.vhp-front,
.vhp-frontend {
    --vhp-text: #1f2933;
    --vhp-muted: #5f6b76;
    --vhp-border: #ccd5dd;
    --vhp-card: #ffffff;
    --vhp-green: #2f7d46;
    --vhp-green-bg: #e8f6ec;
    --vhp-red: #b84040;
    --vhp-gray-bg: #eef1f3;
    --vhp-amber-bg: #fff3cf;
    --vhp-amber-border: #e6c16a;
    --vhp-amber-text: #684f12;
    --vhp-blue: #1f6fb2;
    --vhp-blue-bg: #eaf4ff;
    --vhp-blue-border: #b9d9f5;
    --vhp-required: #b42318;

    max-width: 1040px;
    margin: 24px auto;
    padding: 0 16px;
    color: var(--vhp-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.35;
}

.vhp-front *,
.vhp-frontend * {
    box-sizing: border-box;
}

.vhp-front a,
.vhp-front button,
.vhp-front input,
.vhp-front label,
.vhp-front summary,
.vhp-frontend a,
.vhp-frontend button,
.vhp-frontend input,
.vhp-frontend label,
.vhp-frontend summary {
    font-family: Arial, Helvetica, sans-serif;
}

.vhp-front button,
.vhp-frontend button {
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vhp-front-hero {
    background: var(--vhp-amber-bg);
    border: 1px solid var(--vhp-amber-border);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.vhp-front-hero h2 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -.2px;
    color: var(--vhp-text) !important;
    font-weight: 900 !important;
}

.vhp-front-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.vhp-front-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    color: var(--vhp-amber-text);
    font-weight: 900;
    background: rgba(255, 255, 255, .62);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(230, 193, 106, .68);
}

.vhp-front-contact-details {
    margin: 2px 0 12px;
    color: var(--vhp-amber-text);
    font-weight: 800;
}

.vhp-front-contact-details summary {
    cursor: pointer;
    display: inline-block;
    padding: 4px 0;
}

.vhp-front-contact-lines {
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(230, 193, 106, .55);
    border-radius: 8px;
    display: inline-block;
}

.vhp-front-welcome {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 16px !important;
    color: var(--vhp-text);
}

.vhp-front-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.vhp-front-progress {
    height: 12px;
    background: #e4e8ec;
    border-radius: 999px;
    overflow: hidden;
    flex: 1;
    min-width: 220px;
}

.vhp-front-progress > span {
    display: block;
    height: 100%;
    background: var(--vhp-green);
    border-radius: 999px;
}

.vhp-front-progress-label {
    font-weight: 800;
    color: var(--vhp-muted);
    white-space: nowrap;
}

.vhp-front-message {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    font-weight: 800;
    color: var(--vhp-text);
}

.vhp-front-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}

.vhp-front .vhp-front-btn,
.vhp-frontend .vhp-front-btn {
    appearance: none !important;
    border: 1px solid var(--vhp-border) !important;
    background: #ffffff !important;
    border-radius: 9px !important;
    padding: 9px 13px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--vhp-text) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.vhp-front .vhp-front-btn:hover,
.vhp-frontend .vhp-front-btn:hover {
    border-color: #9fb0bf !important;
    background: #f9fbfc !important;
    color: var(--vhp-text) !important;
}

.vhp-front-area {
    background: var(--vhp-card);
    border: 1px solid var(--vhp-border);
    border-radius: 12px;
    margin: 12px 0;
    overflow: hidden;
}

.vhp-front-area-free {
    background: var(--vhp-green-bg);
    border-color: #b8dfc4;
}

.vhp-front-area-full {
    background: var(--vhp-gray-bg);
    border-color: #d3d9df;
}

.vhp-front .vhp-front-area-head,
.vhp-frontend .vhp-front-area-head {
    appearance: none !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px !important;
    cursor: pointer;
    background: transparent !important;
    border: 0 !important;
    color: var(--vhp-text) !important;
    text-align: left !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.vhp-front-area-title {
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vhp-front-arrow {
    display: inline-block;
    min-width: 18px;
    color: #4b5563;
}

.vhp-front-area-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--vhp-muted);
    font-weight: 800;
}

.vhp-front-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 900;
}

.vhp-front-pill-free {
    background: #ffffff;
    color: var(--vhp-green);
    border: 1px solid #b8dfc4;
}

.vhp-front-pill-full {
    background: #ffffff;
    color: #56616d;
    border: 1px solid #d3d9df;
}

.vhp-front-area-body {
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding: 6px 0;
    background: #ffffff;
}

.vhp-front-service {
    padding: 12px 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    background: #ffffff;
}

.vhp-front-service:first-child {
    border-top: 0;
}

.vhp-front-service-free {
    background: var(--vhp-green-bg);
}

.vhp-front-service-full {
    background: var(--vhp-gray-bg);
}

.vhp-front-service-top {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(170px, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.vhp-front-service-top .vhp-front-dots {
    justify-self: center;
}

.vhp-front-service-top .vhp-front-status {
    justify-self: end;
    text-align: right;
}

.vhp-front-time {
    font-size: 18px;
    font-weight: 900;
    min-width: 170px;
    color: var(--vhp-text);
}

.vhp-front-dots {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

.vhp-front-status {
    font-size: 14px;
    font-weight: 900;
    color: #008000;
    background: #eaffea;
    border: 1px solid #00c000;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
}

.vhp-front-status.full {
    color: #b00000;
    background: #fff0f0;
    border-color: #ff0000;
}

.vhp-front-names {
    color: #2d3742;
    margin: 8px 0 4px;
    font-weight: 800;
}

.vhp-front-names span {
    display: inline-block;
    margin-right: 22px;
    margin-bottom: 4px;
}

.vhp-front-more {
    color: var(--vhp-muted);
    font-weight: 800;
    margin-top: 2px;
}

.vhp-front-select,
.vhp-front-waitlist {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    color: var(--vhp-text);
    cursor: pointer;
}

.vhp-front-waitlist {
    color: var(--vhp-blue);
}

.vhp-front-select input,
.vhp-front-waitlist input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    accent-color: var(--vhp-green);
}

.vhp-front-summary {
    background: var(--vhp-amber-bg);
    border: 1px solid var(--vhp-amber-border);
    border-radius: 14px;
    margin-top: 18px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.vhp-front-summary h3 {
    margin: 0 0 10px !important;
    font-size: 22px !important;
    color: var(--vhp-text) !important;
    font-weight: 900 !important;
}

.vhp-front-selected {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(230, 193, 106, .65);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.vhp-front-selected div {
    font-weight: 800;
    margin: 4px 0;
}

.vhp-front-thanks {
    font-weight: 900;
    margin: 14px 0;
    color: #26323f;
}

.vhp-front-overlap {
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #fff8e5;
    border: 1px solid #f0c36d;
    color: #5c4100;
    font-weight: 800;
}

.vhp-front-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.vhp-front-contact-grid label {
    display: block;
    font-size: 13px;
    color: var(--vhp-muted);
    font-weight: 900;
}

.vhp-front-contact-grid input {
    display: block;
    width: 100%;
    border: 1px solid var(--vhp-border) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    color: var(--vhp-text) !important;
    box-shadow: none !important;
    margin-top: 4px !important;
    height: auto !important;
}

.vhp-front-field-full {
    grid-column: 1 / -1;
}

.vhp-required {
    color: var(--vhp-required);
    font-weight: 900;
    margin-left: 3px;
}

.vhp-optional {
    font-weight: 900;
    color: var(--vhp-blue);
    margin-left: 6px;
}

.vhp-front-privacy-note {
    display: block;
    font-size: 14px;
    color: #254761;
    background: var(--vhp-blue-bg);
    border: 1px solid var(--vhp-blue-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 7px;
    font-weight: 800;
}

.vhp-front-form-note {
    background: var(--vhp-blue-bg);
    border: 1px solid var(--vhp-blue-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 12px;
    color: #254761;
    font-weight: 800;
    font-size: 14px;
}

.vhp-front-form-note p {
    margin: 4px 0 !important;
}

.vhp-front .vhp-front-submit,
.vhp-frontend .vhp-front-submit {
    background: var(--vhp-green) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.vhp-front .vhp-front-submit:hover,
.vhp-frontend .vhp-front-submit:hover {
    filter: brightness(.95);
}

.vhp-front-error {
    border: 1px solid #d63638;
    background: #fcf0f1;
    padding: 12px;
    border-radius: 8px;
}

@media (max-width: 680px) {
    .vhp-front,
    .vhp-frontend {
        margin: 12px auto;
        padding: 0 10px;
        font-size: 15px;
    }

    .vhp-front-hero {
        padding: 18px 16px;
    }

    .vhp-front-hero h2 {
        font-size: 24px !important;
    }

    .vhp-front-progress-label {
        white-space: normal;
    }

    .vhp-front-area-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vhp-front-service-top {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .vhp-front-service-top .vhp-front-dots,
    .vhp-front-service-top .vhp-front-status {
        justify-self: start;
        text-align: left;
    }

    .vhp-front-time {
        min-width: 0;
    }

    .vhp-front-contact-grid {
        grid-template-columns: 1fr;
    }
}


/* ======================================================
   Sprint 4.3.2 – Kopfbereich und Kontaktdaten
   ====================================================== */
.vhp-front-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.vhp-front-hero-main {
    min-width: 0;
    flex: 1 1 auto;
}

.vhp-front-contact-details {
    margin: 0;
    flex: 0 0 auto;
    max-width: 280px;
    text-align: right;
}

.vhp-front-contact-details summary {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    border: 1px solid rgba(230, 193, 106, .75);
    background: rgba(255, 255, 255, .68);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 14px;
    font-weight: 900;
    color: var(--vhp-amber-text);
    list-style: none;
}

.vhp-front-contact-details summary::-webkit-details-marker {
    display: none;
}

.vhp-front-contact-details summary::after {
    content: '▾';
    margin-left: 7px;
    font-size: 12px;
}

.vhp-front-contact-details[open] summary::after {
    content: '▴';
}

.vhp-front-contact-lines {
    display: block;
    text-align: left;
    min-width: 240px;
    margin-top: 8px;
}

.vhp-front-contact-names {
    font-weight: 900;
    color: var(--vhp-text);
    margin-bottom: 6px;
}

.vhp-front-contact-link {
    display: block;
    color: var(--vhp-blue) !important;
    text-decoration: none !important;
    font-weight: 900;
    margin-top: 4px;
    word-break: break-word;
}

.vhp-front-contact-link:hover {
    text-decoration: underline !important;
}

.vhp-front-summary .vhp-front-selected {
    margin-bottom: 16px;
}

.vhp-front-contact-heading {
    margin: 16px 0 8px !important;
    padding-top: 14px;
    border-top: 1px solid rgba(230, 193, 106, .75);
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: var(--vhp-text) !important;
}

@media (max-width: 680px) {
    .vhp-front-hero-top {
        display: block;
    }

    .vhp-front-contact-details {
        max-width: none;
        text-align: left;
        margin: 10px 0 12px;
    }

    .vhp-front-contact-lines {
        min-width: 0;
        width: 100%;
    }
}

/* ===== HP-05 ===== */

.vhp-front-message-error,
.vhp-front-service-duplicate-note {
    background: #b00020;
    color: #ffffff;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 700;
    margin: 12px 0;
}

.vhp-front-message-success {
    background: #e8f5e9;
    color: #1b5e20;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 700;
    margin: 12px 0;
}

.vhp-front-service-duplicate {
    border: 3px solid #b00020;
}


/* ===== HP-06 Success Summary ===== */

.vhp-front-success-summary {
    background: #f3fbf4;
    border: 2px solid #2e7d32;
    border-radius: 16px;
    padding: 18px 20px;
    margin: 18px 0 24px;
}

.vhp-front-success-summary h3 {
    margin-top: 0;
}

.vhp-front-success-summary h4 {
    margin: 16px 0 8px;
}

.vhp-front-success-list {
    margin: 0;
    padding-left: 20px;
}

.vhp-front-success-list li {
    margin: 6px 0;
    font-weight: 600;
}

/* ===== HP-08 Success Finish ===== */

.vhp-front-success-hero {
    text-align: center;
    padding: 22px 18px;
    border-bottom: 1px solid rgba(46, 125, 50, 0.25);
    margin-bottom: 18px;
}

.vhp-front-success-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #2e7d32;
    color: #ffffff;
    font-size: 34px;
    line-height: 54px;
    font-weight: 800;
}

.vhp-front-success-section {
    margin: 20px 0;
}

.vhp-front-success-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.vhp-front-success-action {
    background: #ffffff;
    border: 1px solid rgba(46, 125, 50, 0.25);
    border-radius: 14px;
    padding: 16px;
}

.vhp-front-success-button {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #2e7d32;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.vhp-front-success-button:hover {
    color: #ffffff;
    text-decoration: none;
}

.vhp-front-success-button-secondary {
    background: #374151;
}

.vhp-front-success-summary h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.vhp-front-success-summary h3,
.vhp-front-success-summary h4 {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
}

.vhp-front-success-summary p {
    margin: 0.5rem 0;
    line-height: 1.5;
}

/* ===== RC1 success layout cleanup ===== */

.vhp-front-success-list {
    list-style: none;
    padding-left: 0;
    margin-top: 18px;
}

.vhp-front-success-service-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 8px 0;
    font-weight: 700;
}

.vhp-front-success-service-area {
    min-width: 140px;
}

.vhp-front-success-service-icon {
    font-size: 1.2rem;
}

.vhp-front-success-service-time {
    font-weight: 700;
}

.vhp-front-success-section {
    margin: 22px 0;
}

.vhp-front-success-section h4 {
    margin-bottom: 18px;
}

.vhp-front-success-service-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 10px 0;
    font-weight: 700;
}

.vhp-front-success-service-area {
    min-width: 160px;
}

.vhp-front-success-service-date {
    min-width: 120px;
    font-weight: 500;
}

.vhp-front-success-service-time {
    font-weight: 700;
}

/* ===== RC1 booking status LEDs ===== */

/* ===== RC1 booking status LEDs ===== */

.vhp-front-dot {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    margin-left: 4px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.45) !important;
    position: relative !important;
    opacity: 1 !important;
    background-image: none !important;
}

.vhp-front-dot::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
}

.vhp-front-dot.free {
    background-color: #00ff00 !important;
    box-shadow: inset -2px -2px 3px rgba(0,90,0,.55) !important;
}

.vhp-front-dot.booked {
    background-color: #ff0000 !important;
    box-shadow: inset -2px -2px 3px rgba(120,0,0,.55) !important;
}

/* ===== Überschneidende Dienste ===== */

.vhp-front-service-overlap {
    border: 3px solid #d00000 !important;
    background: #fff0f0 !important;
    box-shadow: 0 0 0 3px rgba(208, 0, 0, 0.15);
}

.vhp-front-service-overlap .vhp-front-select,
.vhp-front-service-overlap .vhp-front-waitlist {
    color: #a00000;
    font-weight: 800;
}

.vhp-front-selected-overlap {
    margin: 6px 0;
    padding: 8px 10px;
    border-left: 5px solid #d00000;
    background: #fff0f0;
    color: #a00000;
    font-weight: 800;
}

.vhp-front-overlap {
    margin-top: 12px;
    padding: 12px 14px;
    border: 2px solid #d00000;
    border-radius: 10px;
    background: #d00000;
    color: #ffffff;
    font-weight: 800;
}

.vhp-front-contact-duplicate-warning{background:#fff3f3;border:2px solid #b00020;color:#7a0016;padding:10px 12px;border-radius:10px;font-weight:700;margin:0 0 12px;}


/* V2.16.4: eindeutige Kennzeichnung von Wartelisteneinträgen */
.vhp-front-success-waitlist-label,
.vhp-front-success-confirmed-label{display:inline-block;margin-left:auto;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}
.vhp-front-success-waitlist-label{background:#fff3cd;color:#664d03;border:1px solid #ffda6a}
.vhp-front-success-confirmed-label{background:#d1e7dd;color:#0f5132;border:1px solid #a3cfbb}
.vhp-front-success-waitlist-info{border-left:5px solid #dba617;background:#fff8df}
@media(max-width:700px){.vhp-front-success-waitlist-label,.vhp-front-success-confirmed-label{display:block;margin:6px 0 0;width:max-content;max-width:100%}}

/* V2.16.6: sichtbare Belegung der Warteliste */
.vhp-front-waitlist-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vhp-front-waitlist-count { font-size:.92em; font-weight:600; color:#7a5700; }

.vhp-front-calendar-button{display:inline-block;text-decoration:none}.vhp-front-calendar-note{font-size:.92em;opacity:.82;margin-bottom:0}

/* V2.16.26 */
.vhp-front-swap-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.vhp-front-submit-secondary{background:#fff!important;color:#333!important;border:1px solid #777!important}

/* V2.19.10: Dienstname mit Dienstzeit im Helferportal */
.vhp-front-time{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.vhp-front-service-name{font-size:15px;line-height:1.25;color:inherit}
.vhp-front-service-time{font-size:13px;font-weight:600;line-height:1.25}

.vhp-admin-preview-banner{max-width:1100px;margin:16px auto;padding:14px 18px;border:2px solid #d79b23;border-radius:8px;background:#fff6d9;color:#593d00;display:flex;flex-direction:column;gap:4px;box-sizing:border-box}
.vhp-admin-preview-banner strong{font-size:16px}.vhp-admin-preview-banner span{line-height:1.45}
.vhp-admin-preview-content form{opacity:.62}.vhp-admin-preview-content form::after{content:"Anmeldung in der Admin-Vorschau deaktiviert";display:block;margin-top:10px;color:#7a5100;font-weight:600}

.vhp-front-resource-selection{margin:18px 0;padding:16px;border:1px solid #9bbbd4;border-radius:8px;background:#f1f7fc}
.vhp-front-resource-selection h3{margin:0 0 6px}.vhp-front-resource-selection p{margin:0 0 12px}
.vhp-front-resource-list{display:grid;gap:8px}.vhp-front-resource-list label{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border:1px solid #c8dbe9;border-radius:6px;background:#fff}
.vhp-front-resource-list input{margin-top:3px}

.vhp-front-resource-quantity{width:76px!important;min-width:76px;padding:6px!important;text-align:center}

.vhp-bot-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}.vhp-front-subtitle{font-size:1.05rem;margin:.2rem 0 .7rem;color:var(--vhp-muted,#50575e)}

.vhp-front-introduction{flex:1 1 100%;margin-top:12px;padding:12px 14px;border-left:4px solid #2271b1;border-radius:6px;background:#f0f6fc;color:#1d2327}
.vhp-front-introduction p{margin:0 0 5px}
.vhp-front-introduction p:last-child{margin-bottom:0}


/* V2.19.138: einheitliche Aktionen und schlanke Informationszeilen im Helferportal */
.vhp-front,
.vhp-frontend{
    --vhp-action-blue:#2271b1;
    --vhp-action-blue-dark:#135e96;
    --vhp-action-blue-soft:#eaf3fc;
    --vhp-action-green:#1d6829;
    --vhp-action-green-soft:#d8f1dc;
    --vhp-action-red:#b32d2e;
    --vhp-action-border:#8fb1d8;
}
.vhp-front :where(button,.vhp-front-btn,input[type="submit"],input[type="button"],a.vhp-button),
.vhp-frontend :where(button,.vhp-front-btn,input[type="submit"],input[type="button"],a.vhp-button){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    width:auto!important;
    max-width:100%!important;
    min-height:32px!important;
    margin:0!important;
    padding:5px 11px!important;
    border:1px solid var(--vhp-action-border)!important;
    border-radius:16px!important;
    background:var(--vhp-action-blue-soft)!important;
    color:#174f82!important;
    box-shadow:none!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.2!important;
    text-decoration:none!important;
    text-transform:none!important;
    letter-spacing:normal!important;
    white-space:normal!important;
    cursor:pointer;
}
.vhp-front :where(button,.vhp-front-btn,input[type="submit"],input[type="button"],a.vhp-button):hover,
.vhp-front :where(button,.vhp-front-btn,input[type="submit"],input[type="button"],a.vhp-button):focus-visible,
.vhp-frontend :where(button,.vhp-front-btn,input[type="submit"],input[type="button"],a.vhp-button):hover,
.vhp-frontend :where(button,.vhp-front-btn,input[type="submit"],input[type="button"],a.vhp-button):focus-visible{
    border-color:#5f91c7!important;
    background:#d8eafb!important;
    color:#0d416f!important;
    outline:2px solid var(--vhp-action-blue)!important;
    outline-offset:2px!important;
}
.vhp-front :where(button.is-active,button.active,button.current,button.is-current,a.is-active,a.active,a.current,a.is-current,[role="button"][aria-pressed="true"],button[aria-pressed="true"]),
.vhp-frontend :where(button.is-active,button.active,button.current,button.is-current,a.is-active,a.active,a.current,a.is-current,[role="button"][aria-pressed="true"],button[aria-pressed="true"]){
    border-color:#63a66d!important;
    background:var(--vhp-action-green-soft)!important;
    color:var(--vhp-action-green)!important;
}
.vhp-front :where(.vhp-icon-link,.vhp-symbol-button),
.vhp-frontend :where(.vhp-icon-link,.vhp-symbol-button){
    display:inline-flex!important;
    flex:0 0 28px!important;
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    padding:2px!important;
    border:0!important;
    border-radius:4px!important;
    background:transparent!important;
    box-shadow:none!important;
}
.vhp-front :where(.vhp-front-controls,.vhp-front-swap-actions,.vhp-actions,.vhp-filter-buttons,.vhp-participant-filters),
.vhp-frontend :where(.vhp-front-controls,.vhp-front-swap-actions,.vhp-actions,.vhp-filter-buttons,.vhp-participant-filters){
    display:flex;
    align-items:center;
    align-content:flex-start;
    gap:6px;
    flex-wrap:wrap;
    max-width:100%;
}
.vhp-front :where(.vhp-info-row,.vhp-compact-row,.vhp-front-success-row),
.vhp-frontend :where(.vhp-info-row,.vhp-compact-row,.vhp-front-success-row){
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding:7px 0;
}
.vhp-front :where(.vhp-info-row,.vhp-compact-row,.vhp-front-success-row) :where(.vhp-actions,.vhp-row-actions),
.vhp-frontend :where(.vhp-info-row,.vhp-compact-row,.vhp-front-success-row) :where(.vhp-actions,.vhp-row-actions){
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
    flex:0 0 auto;
    margin-left:auto;
}
@media(max-width:700px){
    .vhp-front :where(.vhp-info-row,.vhp-compact-row,.vhp-front-success-row),
    .vhp-frontend :where(.vhp-info-row,.vhp-compact-row,.vhp-front-success-row){
        flex-wrap:wrap;
    }
}


/* V2.23.5.37 – geschützte/geschlossene Arbeitsbereiche im Helferportal */
.vhp-front-area-assignment-note{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 18px;
    margin:0 0 12px;
    padding:10px 12px;
    border:1px solid #d7c98a;
    border-radius:7px;
    background:#fff9df;
    color:#3c434a;
    font-size:14px;
    line-height:1.35;
}
.vhp-front-area-assignment-note>strong{color:#6b5700}
.vhp-front-service-restricted{border-color:#dcdcde;background:#fbfbfc}
.vhp-front-service-restricted .vhp-front-service-top{margin-bottom:0}


/* V2.23.5.38 – Verantwortlicher und neutraler Belegungsstatus */
.vhp-front-area-assignment-note{
    align-items:flex-start;
}
.vhp-front-area-responsible{
    font-weight:500;
}
.vhp-front-area-contact{
    display:inline-block;
    margin:0;
}
.vhp-front-area-contact summary{
    cursor:pointer;
    font-weight:600;
    color:#135e96;
}
.vhp-front-area-contact-links{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-top:5px;
}
.vhp-front-area-contact-links a{
    text-decoration:none;
}
.vhp-front-occupancy{
    display:inline-block;
    margin-top:8px;
    padding:3px 8px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    background:#f0f0f1;
    color:#3c434a;
}
.vhp-front-occupancy-belegt{background:#e7f6ea;color:#1e6b32}
.vhp-front-occupancy-teilweise-belegt{background:#fff4d6;color:#6b5700}
.vhp-front-occupancy-nicht-belegt{background:#f0f0f1;color:#50575e}