/* =============================================================================
   DIWA 2 Public-Wizard - Jobcenter Krefeld CI

   WICHTIG: Wenn dieses CSS im Contao-Backend-Vorschau (.cte_preview)
   geladen wird, sollen unsere Wizard-Styles dort NICHT greifen.
   Wir resetten alles innerhalb von .cte_preview .diwa2-module--wizard auf
   Browser-Defaults bzw. Backend-Theme-Inheritance.
   ============================================================================= */
.cte_preview .diwa2-module--wizard,
.cte_preview .diwa2-module--wizard * {
    all: revert !important;
    box-sizing: border-box;
}
.cte_preview .diwa2-stepper,
.cte_preview .diwa2-stepper * { all: revert !important; }


/* Legacy „Online-Terminierung"-Inhaltselement ausblenden (war doppelt sichtbar).
   Sehr eng gefasster Selektor: nur der Legacy-centered-wrapper-Inner mit
   einem nicht-Diwa2-Select - so wird kein normales Content-Text-Element
   im Contao-Backend versehentlich ausgeblendet. */
body:has(.diwa2-module--wizard) .centered-wrapper-inner:has(> form > select:not(.diwa2-anliegen-select)) { display: none !important; }

.diwa2-module--wizard *, .diwa2-module--wizard *::before, .diwa2-module--wizard *::after { box-sizing: border-box; }

/* Wizard-Modul erbt Schrift vom Contao-Theme (Open Sans).
   KEIN body { font-family } mehr — das hatte das ganze Theme überschrieben. */
.diwa2-module--wizard {
    font-size: 15px;
    line-height: 1.5;
    color: #1a1a1a;
}

/* Standalone-Seiten (Check-in, Storno, Checkin-Success) auf diwa2.* haben kein
   Contao-Theme, das eine Default-Schrift liefert. Wir setzen System-Stack als
   Fallback — wirkt nur, wenn KEIN .diwa2-module--wizard auf der Seite ist. */
body:not(:has(.diwa2-module--wizard)) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1a1a1a;
}

a { color: #0e75bc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- User-Pill ---------- */
.diwa2-userbar {
    display: flex;
    justify-content: flex-end;
    padding: 16px 32px 0;
    background: #f5f5f5;
}
.diwa2-userpill {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 10px 22px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 14px;
}

/* ---------- Header / Logo ---------- */
.diwa2-header {
    background: #fff;
    padding: 24px 32px 20px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.diwa2-logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.diwa2-logo-block { display: flex; flex-direction: column; line-height: 1; }
.diwa2-logo-text {
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #000;
    letter-spacing: -0.5px;
}
.diwa2-logo-sub {
    font-size: 11px;
    color: #000;
    font-weight: 700;
    letter-spacing: 4px;
    margin-top: 4px;
}
.diwa2-logo .ba-a {
    width: 32px; height: 32px;
    background: #e30613;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}
.diwa2-logo .wappen {
    width: 30px; height: 34px;
    background: #ccc;
    display: inline-block;
    margin-left: 2px;
}

/* ---------- Main ---------- */
.diwa2-main {
    max-width: 980px;
    margin: 40px auto 80px;
    padding: 0 32px;
}

/* ---------- Wizard-Stepper (4 Schritte) ---------- */
.diwa2-stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.diwa2-step {
    padding: 18px 20px;
    background: #f0f0f0;
    color: #999;
    font-weight: 700;
    font-size: 15px;
    border-radius: 3px;
    text-align: left;
}
.diwa2-step.is-active {
    background: rgb(12, 93, 130);
    color: #fff;
}
.diwa2-step.is-done {
    background: #d4edda;
    color: #155724;
}

/* ---------- Page-Titles ---------- */
.diwa2-page-title {
    color: #000;
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 16px;
}
.diwa2-page-subtitle { color: #555; margin: 0 0 32px; font-size: 16px; }
.diwa2-hint { background: #fff3cd; border-left: 4px solid #ffc107; padding: 14px 18px; margin: 0 0 24px; border-radius: 4px; color: #5b4708; font-size: 15px; line-height: 1.45; }
.diwa2-hint strong { color: #4a3a00; }

/* ---------- Breadcrumb ---------- */
.diwa2-breadcrumb {
    font-size: 14px;
    color: #999;
    margin-bottom: 24px;
}
.diwa2-breadcrumb a { color: #0e75bc; }
.diwa2-breadcrumb .sep { margin: 0 8px; color: #ccc; }

/* =============================================================================
   DIWA 2 - Modernes Design-System (Custom Properties + Barrierefreiheit)
   ============================================================================= */
/* Hilfe-Button im Wizard (oben rechts) */
.diwa2-wizard-help-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #0e75bc;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 10;
    transition: background 0.2s;
}
.diwa2-wizard-help-btn:hover { background: #0a5a91; }
.diwa2-wizard-help-btn span { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: rgba(255,255,255,0.25); border-radius: 50%; margin-right: 4px; font-weight: 700; }

.diwa2-module--wizard {
    --diwa2-primary: #e30613;
    --diwa2-primary-dark: #b00510;
    --diwa2-secondary: #0e75bc;
    --diwa2-text: #1a1a1a;
    --diwa2-text-muted: #555;
    --diwa2-border: #d0d0d0;
    --diwa2-border-focus: var(--diwa2-secondary);
    --diwa2-bg: #fff;
    --diwa2-bg-subtle: #f7f7f7;
    --diwa2-success: #2d7a3b;
    --diwa2-radius: 4px;
    --diwa2-shadow-focus: 0 0 0 3px rgba(14,117,188,0.3);
    --diwa2-transition: 0.2s ease;

    position: relative;
    color: var(--diwa2-text);
    font-size: 16px;
    line-height: 1.55;
}

/* Screen-Reader-only Text (visible, aber visuell verborgen) */
.diwa2-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Smooth Transitions (respektiert prefers-reduced-motion) */
.diwa2-module--wizard,
.diwa2-module--wizard * {
    transition: opacity var(--diwa2-transition),
                background-color var(--diwa2-transition),
                border-color var(--diwa2-transition),
                color var(--diwa2-transition),
                transform var(--diwa2-transition);
}
@media (prefers-reduced-motion: reduce) {
    .diwa2-module--wizard,
    .diwa2-module--wizard * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus-Indikatoren (WCAG 2.4.7) */
.diwa2-module--wizard :focus-visible {
    outline: 2px solid var(--diwa2-border-focus);
    outline-offset: 2px;
    box-shadow: var(--diwa2-shadow-focus);
    border-radius: var(--diwa2-radius);
}

/* Loading-State (visuell + aria-busy auf root) */
.diwa2-module--wizard[aria-busy="true"] .diwa2-wizard-content {
    opacity: 0.4;
    pointer-events: none;
}
.diwa2-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--diwa2-radius);
}
.diwa2-module--wizard[aria-busy="true"] .diwa2-loading {
    display: flex;
}
.diwa2-loading-spinner {
    width: 48px; height: 48px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--diwa2-primary);
    border-radius: 50%;
    animation: diwa2-spin 0.8s linear infinite;
}
@keyframes diwa2-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Stepper (semantisch <nav> mit role=progressbar) ---------- */
.diwa2-stepper {
    margin: 0 0 32px;
    background: var(--diwa2-bg-subtle);
    border-radius: var(--diwa2-radius);
    padding: 4px;
}
.diwa2-stepper ol {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0; padding: 0;
}
.diwa2-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    color: var(--diwa2-text-muted);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--diwa2-radius);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.diwa2-step__label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.diwa2-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #ddd;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.diwa2-step--active {
    background: rgb(12, 93, 130);
    color: #fff;
    font-weight: 600;
}
.diwa2-step--active .diwa2-step__num {
    background: #fff;
    color: rgb(12, 93, 130);
}
.diwa2-step--done {
    background: #fff;
    color: rgb(39, 94, 48);
}
.diwa2-step--done .diwa2-step__num {
    background: rgb(39, 94, 48);
}
.diwa2-step--done .diwa2-step__num::before {
    content: '✓';
}
.diwa2-step--done .diwa2-step__num > * { display: none; }
.diwa2-step--pending .diwa2-step__num {
    background: rgb(87, 87, 87);
    color: #fff;
}
.diwa2-step--pending .diwa2-step__label {
    color: rgb(84, 84, 84);
}
.diwa2-step--active { flex: 2 1 auto; }
@media (max-width: 700px) {
    .diwa2-step:not(.diwa2-step--active) .diwa2-step__label { display: none; }
    .diwa2-step { padding: 12px 10px; }
}
.diwa2-wizard-content { min-height: 200px; }

/* ---------- Page-Titles ---------- */
.diwa2-module--wizard .diwa2-page-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 600;
    color: var(--diwa2-text);
    line-height: 1.2;
}
.diwa2-module--wizard .diwa2-page-subtitle {
    margin: 0 0 24px;
    color: var(--diwa2-text-muted);
    font-size: 16px;
}

/* ---------- Felder ---------- */
.diwa2-module--wizard .diwa2-field {
    margin-bottom: 20px;
    max-width: 640px;
}
.diwa2-module--wizard .diwa2-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--diwa2-text);
    margin-bottom: 6px;
}
.diwa2-module--wizard .diwa2-required { color: var(--diwa2-primary); }
.diwa2-module--wizard .diwa2-field input[type=text],
.diwa2-module--wizard .diwa2-field input[type=email],
.diwa2-module--wizard .diwa2-field input[type=tel],
.diwa2-module--wizard .diwa2-field select,
.diwa2-module--wizard .diwa2-field textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--diwa2-border);
    border-radius: var(--diwa2-radius);
    background: var(--diwa2-bg);
    font: inherit;
    color: var(--diwa2-text);
    min-height: 48px;
}
.diwa2-module--wizard .diwa2-field input:focus-visible,
.diwa2-module--wizard .diwa2-field select:focus-visible,
.diwa2-module--wizard .diwa2-field textarea:focus-visible {
    border-color: var(--diwa2-border-focus);
}
.diwa2-module--wizard .diwa2-field-hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--diwa2-text-muted);
}

/* ---------- Symfony-Form im Wizard (Step3) - Grid-Layout ----------
   Symfony rendert die Felder in einen anonymen Wrapper-DIV. Wir greifen
   sowohl Form-direkte-Kinder als auch den Wrapper-DIV mit ab. */
.diwa2-module--wizard form.diwa2-form,
.diwa2-module--wizard .diwa2-form--wizard,
.diwa2-module--wizard form.diwa2-form > div:not(.form-actions):not([class]),
.diwa2-module--wizard .diwa2-form--wizard > div:not(.form-actions):not([class]) {
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 18px;
}
.diwa2-module--wizard form.diwa2-form > div,
.diwa2-module--wizard .diwa2-form--wizard > div,
.diwa2-module--wizard form.diwa2-form > div > div,
.diwa2-module--wizard .diwa2-form--wizard > div > div {
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
}
/* Felder die volle Breite brauchen */
.diwa2-module--wizard form.diwa2-form > div:has(textarea),
.diwa2-module--wizard form.diwa2-form > div:has(input[type=checkbox]),
.diwa2-module--wizard form.diwa2-form > div.form-actions,
.diwa2-module--wizard form.diwa2-form > div > div:has(textarea),
.diwa2-module--wizard form.diwa2-form > div > div:has(input[type=checkbox]),
.diwa2-module--wizard .diwa2-form--wizard > div:has(textarea),
.diwa2-module--wizard .diwa2-form--wizard > div:has(input[type=checkbox]),
.diwa2-module--wizard .diwa2-form--wizard > div.form-actions,
.diwa2-module--wizard .diwa2-form--wizard > div > div:has(textarea),
.diwa2-module--wizard .diwa2-form--wizard > div > div:has(input[type=checkbox]) {
    grid-column: 1 / -1;
}
/* Mobile: alles untereinander */
@media (max-width: 720px) {
    .diwa2-module--wizard form.diwa2-form,
    .diwa2-module--wizard .diwa2-form--wizard,
    .diwa2-module--wizard form.diwa2-form > div:not(.form-actions):not([class]),
    .diwa2-module--wizard .diwa2-form--wizard > div:not(.form-actions):not([class]) {
        grid-template-columns: 1fr;
    }
}
.diwa2-module--wizard form.diwa2-form label,
.diwa2-module--wizard .diwa2-form--wizard label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--diwa2-text);
    margin-bottom: 6px;
}
.diwa2-module--wizard form.diwa2-form input[type=text],
.diwa2-module--wizard form.diwa2-form input[type=email],
.diwa2-module--wizard form.diwa2-form input[type=tel],
.diwa2-module--wizard form.diwa2-form select,
.diwa2-module--wizard form.diwa2-form textarea,
.diwa2-module--wizard .diwa2-form--wizard input[type=text],
.diwa2-module--wizard .diwa2-form--wizard input[type=email],
.diwa2-module--wizard .diwa2-form--wizard input[type=tel],
.diwa2-module--wizard .diwa2-form--wizard select,
.diwa2-module--wizard .diwa2-form--wizard textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--diwa2-border);
    border-radius: var(--diwa2-radius);
    background: var(--diwa2-bg);
    font: inherit;
    color: var(--diwa2-text);
    min-height: 48px;
    box-sizing: border-box;
}
.diwa2-module--wizard .diwa2-form--wizard input:focus-visible,
.diwa2-module--wizard .diwa2-form--wizard select:focus-visible,
.diwa2-module--wizard .diwa2-form--wizard textarea:focus-visible {
    border-color: var(--diwa2-border-focus);
    outline: 2px solid var(--diwa2-border-focus);
    outline-offset: 1px;
}
.diwa2-module--wizard .diwa2-form--wizard input[type=checkbox] {
    width: auto;
    min-height: auto;
    margin-right: 8px;
    transform: scale(1.2);
    vertical-align: middle;
}
.diwa2-module--wizard .diwa2-form--wizard input.is-invalid,
.diwa2-module--wizard .diwa2-form--wizard input[aria-invalid="true"] {
    border-color: var(--diwa2-primary);
    background: #fff5f6;
}
.diwa2-module--wizard .diwa2-form--wizard ul {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    color: var(--diwa2-primary);
    font-size: 13px;
    font-weight: 500;
}

/* Done-Page */
.diwa2-module--wizard .diwa2-done {
    text-align: center;
    padding: 48px 24px;
    max-width: 640px;
    margin: 0 auto;
}
.diwa2-module--wizard .diwa2-done__icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--diwa2-success);
    color: #fff;
    font-size: 44px;
    line-height: 80px;
    text-align: center;
    margin: 0 auto 24px;
    font-weight: 700;
}

/* ---------- Buttons ---------- */
.diwa2-module--wizard a.diwa2-btn,
.diwa2-module--wizard button.diwa2-btn,
.diwa2-module--wizard .diwa2-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 24px !important;
    margin: 0 !important;
    border: 1px solid transparent;
    border-radius: var(--diwa2-radius);
    background: var(--diwa2-primary);
    color: #fff;
    font: inherit;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box !important;
    white-space: nowrap;
}
.diwa2-module--wizard .diwa2-btn:hover {
    background: var(--diwa2-primary-dark);
    color: #fff;
    text-decoration: none;
}
.diwa2-module--wizard .diwa2-btn--ghost {
    background: transparent;
    color: var(--diwa2-text);
    border-color: var(--diwa2-border);
}
.diwa2-module--wizard .diwa2-btn--ghost:hover {
    background: var(--diwa2-bg-subtle);
    color: var(--diwa2-text);
}
.diwa2-module--wizard .diwa2-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* ---------- Anliegen-Select ---------- */
.diwa2-module--wizard .diwa2-anliegen-select {
    display: block;
    width: 100%;
    max-width: 720px;
    padding: 14px 16px;
    margin: 8px 0;
    border: 1px solid var(--diwa2-border);
    border-radius: var(--diwa2-radius);
    background: var(--diwa2-bg);
    font-size: 16px;
    color: var(--diwa2-text);
    cursor: pointer;
    min-height: 48px;
    box-sizing: border-box;
}
/* aktiver Anliegen-Select im .diwa2-field-Wrapper braucht selbe max-width
   wie die past-Selects (vorher 640 vs 720 -> Versatz im Screenshot). */
.diwa2-module--wizard .diwa2-field {
    max-width: 720px !important;
}
/* Mitarbeiter-View: Infoseiten-Optionen rot markieren, damit sie sehen,
   welche Auswahl zu einer Infoseite fuehrt (kein Termin). */
.diwa2-anliegen-select--staff option.diwa2-option--info {
    color: #dc2626;
    font-weight: 600;
}
.diwa2-module--wizard .diwa2-anliegen-select--past {
    background: var(--diwa2-bg-subtle);
    color: var(--diwa2-text-muted);
    cursor: not-allowed;
}
.diwa2-module--wizard .diwa2-breadcrumb {
    color: rgb(84, 84, 84);
    font-size: 14px;
    margin: 16px 0 24px;
}
.diwa2-module--wizard .diwa2-breadcrumb a { color: rgb(12, 93, 130); text-decoration: underline; }
.diwa2-module--wizard .diwa2-breadcrumb .sep { margin: 0 4px; }

/* ---------- Datum + Slots (Step2) ---------- */
.diwa2-module--wizard .diwa2-step2 {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 32px;
    margin-top: 24px;
}
@media (max-width: 700px) {
    .diwa2-module--wizard .diwa2-step2 { grid-template-columns: 1fr; }
}
.diwa2-module--wizard .diwa2-dates ul,
.diwa2-module--wizard .diwa2-slot-list {
    list-style: none;
    padding: 0; margin: 0;
}
.diwa2-module--wizard .diwa2-date {
    display: block;
    padding: 12px 16px;
    margin-bottom: 6px;
    background: var(--diwa2-bg);
    border: 1px solid var(--diwa2-border);
    border-radius: var(--diwa2-radius);
    color: var(--diwa2-text);
    text-decoration: none;
    font-weight: 500;
    min-height: 48px;
}
.diwa2-module--wizard .diwa2-date:hover {
    border-color: var(--diwa2-secondary);
    background: #eaf4fb;
    color: var(--diwa2-text);
    text-decoration: none;
}
.diwa2-module--wizard .diwa2-date.is-selected {
    background: rgb(12, 93, 130);
    border-color: rgb(12, 93, 130);
    color: #fff;
}
.diwa2-module--wizard .diwa2-slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.diwa2-module--wizard .diwa2-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    min-height: 72px;
    background: var(--diwa2-bg);
    border: 2px solid var(--diwa2-border);
    border-radius: var(--diwa2-radius);
    color: var(--diwa2-text);
    font: inherit;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
}
.diwa2-module--wizard .diwa2-slot:hover:not(:disabled),
.diwa2-module--wizard .diwa2-slot:focus-visible:not(:disabled) {
    border-color: rgb(181, 5, 15);
    background: rgb(181, 5, 15);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(181,5,15,0.25);
}
.diwa2-module--wizard .diwa2-slot:hover small,
.diwa2-module--wizard .diwa2-slot:focus-visible small {
    color: rgba(255,255,255,0.9);
}
.diwa2-module--wizard .diwa2-slot small {
    font-size: 12px;
    font-weight: 500;
    color: var(--diwa2-text-muted);
    margin-top: 4px;
}
.diwa2-module--wizard .diwa2-slot__time {
    font-size: 20px;
    font-weight: 700;
}
.diwa2-module--wizard .diwa2-slot--internal {
    border-color: #b45309;
    background: #fffbeb;
}
.diwa2-module--wizard .diwa2-slot__badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #b45309;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.diwa2-module--wizard h3 {
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--diwa2-text);
}

/* ---------- Bestätigungs-Liste (Step4) ---------- */
.diwa2-module--wizard dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 24px 0;
    padding: 24px;
    background: var(--diwa2-bg-subtle);
    border-radius: var(--diwa2-radius);
}
.diwa2-module--wizard dt {
    color: var(--diwa2-text-muted);
    font-size: 14px;
}
.diwa2-module--wizard dd {
    margin: 0;
    color: var(--diwa2-text);
}

/* ---------- Flash-Messages ---------- */
.diwa2-module--wizard .diwa2-flash {
    padding: 14px 18px;
    border-radius: var(--diwa2-radius);
    margin: 16px 0;
}
.diwa2-module--wizard .diwa2-flash--error {
    background: #fff0f0;
    border-left: 4px solid var(--diwa2-primary);
    color: #7a0006;
}
.diwa2-module--wizard .diwa2-flash--info {
    background: #eaf4fb;
    border-left: 4px solid var(--diwa2-secondary);
    color: #003b6f;
}
.diwa2-module--wizard .diwa2-flash--success {
    background: #ecf7ee;
    border-left: 4px solid var(--diwa2-success);
    color: #1d4a25;
}


/* ---------- Anliegen-Select (Step 1) - kompakt wie alte DIWA ---------- */
.diwa2-anliegen-select {
    display: block;
    width: 100%;
    max-width: 720px;
    padding: 12px 14px;
    margin: 8px 0;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background: #fff;
    font-size: 15px;
    color: #1a1a1a;
    cursor: pointer;
}
.diwa2-anliegen-select:focus {
    outline: none;
    border-color: #0e75bc;
    box-shadow: 0 0 0 2px rgba(14,117,188,0.15);
}
.diwa2-anliegen-select--past {
    background: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

/* Cards-Variante (alt - wird nicht mehr genutzt aber CSS bleibt) */
.diwa2-anliegen-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin: 24px 0;
}
.diwa2-anliegen-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    text-decoration: none;
    color: #1a1a1a;
    transition: border-color 0.15s, background 0.15s;
}
.diwa2-anliegen-card:hover {
    border-color: #e30613;
    background: #fff5f6;
    text-decoration: none;
    color: #1a1a1a;
}
.diwa2-anliegen-card__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.diwa2-anliegen-card__hint {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.diwa2-anliegen-card__arrow {
    font-size: 22px;
    color: #999;
    font-weight: 300;
    line-height: 1;
}
.diwa2-anliegen-card:hover .diwa2-anliegen-card__arrow,
.diwa2-anliegen-card:hover .diwa2-anliegen-card__hint {
    color: #e30613;
}

/* Breadcrumb */
.diwa2-breadcrumb { color: #666; font-size: 14px; margin: 16px 0; }
.diwa2-breadcrumb a { color: #0e75bc; }
.diwa2-breadcrumb .sep { margin: 0 8px; color: #ccc; }
.diwa2-breadcrumb .muted { color: #999; }

/* Alte Klassen behalten als Fallback */
.diwa2-anliegen-list { list-style: none; padding: 0; margin: 0; }
.diwa2-anliegen-list li { margin-bottom: 12px; }
.diwa2-anliegen-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 16px;
    transition: all 0.15s;
}
.diwa2-anliegen-item:hover {
    border-color: #e30613;
    background: #fff5f6;
    text-decoration: none;
    color: #1a1a1a;
}
.diwa2-anliegen-item .chevron::after {
    content: '\203A';
    color: #999;
    font-size: 24px;
    font-weight: 300;
    margin-left: 16px;
}
.diwa2-anliegen-item:hover .chevron::after { color: #e30613; }

/* ---------- Step 2: Datum + Slots ---------- */
.diwa2-step2 {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
}
.diwa2-dates {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 16px;
    border-radius: 3px;
}
.diwa2-dates h3 {
    color: rgb(87, 87, 87);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px;
    font-weight: 400;
}
.diwa2-dates ul { list-style: none; padding: 0; margin: 0; }
.diwa2-date {
    display: block;
    padding: 10px 14px;
    margin: 4px 0;
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
}
.diwa2-date:hover { background: #f5f5f5; color: #e30613; text-decoration: none; }
.diwa2-date.is-selected {
    background: #0e75bc;
    color: #fff;
    font-weight: 700;
}

.diwa2-slots {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 24px;
    border-radius: 3px;
}
.diwa2-slots h3 {
    margin: 0 0 16px;
    color: rgb(87, 87, 87);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
}
.diwa2-slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.diwa2-slot {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    color: #1a1a1a;
    text-align: center;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition: all 0.15s;
}
.diwa2-slot:hover {
    background: #0e75bc;
    color: #fff;
    border-color: #0e75bc;
}
.diwa2-slot small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 4px;
    color: #888;
}
.diwa2-slot:hover small { color: rgba(255,255,255,0.85); }

/* ---------- Forms (Step 3) ---------- */
.diwa2-form { max-width: 640px; background: #fff; padding: 32px; border: 1px solid #e0e0e0; border-radius: 3px; }
.diwa2-form .form-group, .diwa2-form > div { margin-bottom: 20px; }
.diwa2-form label {
    display: block;
    color: #999;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 6px;
}
.diwa2-form label .required { color: #0e75bc; }
.diwa2-form input[type=text],
.diwa2-form input[type=email],
.diwa2-form input[type=tel],
.diwa2-form input[type=date],
.diwa2-form input[type=time],
.diwa2-form select,
.diwa2-form textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background: #fff;
    font: inherit;
    color: #1a1a1a;
}
.diwa2-form textarea { min-height: 100px; resize: vertical; }
.diwa2-form input:focus, .diwa2-form select:focus, .diwa2-form textarea:focus {
    outline: none;
    border-color: #0e75bc;
    box-shadow: 0 0 0 2px rgba(14,117,188,0.15);
}
.diwa2-form input[type=checkbox] { width: auto; margin-right: 8px; }
.diwa2-form ul {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    color: #c82333;
    font-size: 13px;
}

/* ---------- Summary (Step 4) ---------- */
.diwa2-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px 24px;
    margin: 0 0 32px;
    background: #fff;
    padding: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}
.diwa2-summary dt { color: rgb(84, 84, 84); font-weight: 400; font-size: 14px; }
.diwa2-summary dd { margin: 0; color: #1a1a1a; font-size: 15px; font-weight: 500; }

/* ---------- Buttons ---------- */
.diwa2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: #e30613;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.diwa2-btn:hover { background: #b00510; text-decoration: none; color: #fff; }
.diwa2-btn--primary { background: rgb(181, 5, 15); }
.diwa2-btn--primary:hover { background: rgb(150, 4, 12); }
.diwa2-btn--danger { background: #c82333; }
.diwa2-btn--danger:hover { background: #a01c2a; }
.diwa2-back {
    color: rgb(12, 93, 130);
    text-decoration: underline;
    margin-left: 20px;
    font-size: 14px;
}
.diwa2-back:hover { color: rgb(12, 93, 130); text-decoration: underline; }

/* ---------- Flash ---------- */
.diwa2-flash {
    padding: 14px 18px;
    margin-bottom: 24px;
    border-radius: 3px;
    border-left: 4px solid;
    font-size: 14px;
}
.diwa2-flash--success { background: #d4edda; border-color: #28a745; color: #155724; }
.diwa2-flash--error   { background: #f8d7da; border-color: #c82333; color: #721c24; }
.diwa2-flash--info    { background: #d1ecf1; border-color: #0e75bc; color: #0c5460; }

/* ---------- Footer ---------- */
.diwa2-footer {
    background: #e30613;
    color: #fff;
    padding: 14px 32px;
    text-align: center;
    font-size: 13px;
    margin-top: 60px;
}
.diwa2-footer a { color: #fff; margin: 0 12px; }
.diwa2-footer a:hover { text-decoration: underline; }

/* ---------- Done-Page ---------- */
.diwa2-done {
    background: #fff;
    padding: 48px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    text-align: center;
}
.diwa2-done h2 { color: #28a745; font-size: 28px; margin-bottom: 16px; }
.diwa2-done p { color: #555; font-size: 16px; }

@media (max-width: 768px) {
    .diwa2-step2 { grid-template-columns: 1fr; }
    .diwa2-stepper { grid-template-columns: repeat(2, 1fr); }
    .diwa2-summary, .diwa2-deflist { grid-template-columns: 1fr; }
}

/* === Symfony Form: Help-Text dezent klein unter dem Input === */
.diwa2-form .form-group { margin-bottom: 16px; }
.diwa2-form label,
.diwa2-form .form-label {
    display: block;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
    font-size: 14px;
}
.diwa2-form .help-text,
.diwa2-form .form-help,
.diwa2-form small.form-text,
.diwa2-form .help-block {
    display: block !important;
    margin-top: 3px;
    color: rgb(84, 84, 84) !important;
    font-size: 11px !important;
    font-weight: normal !important;
    line-height: 1.4;
}
.diwa2-form input::placeholder,
.diwa2-form textarea::placeholder {
    color: rgb(84, 84, 84);
    opacity: 1;
}
.diwa2-form input[type="text"],
.diwa2-form input[type="email"],
.diwa2-form input[type="tel"],
.diwa2-form select,
.diwa2-form textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
}
.diwa2-form input:focus,
.diwa2-form select:focus,
.diwa2-form textarea:focus {
    outline: 2px solid #0e75bc;
    outline-offset: -1px;
    border-color: #0e75bc;
}

/* Datenschutz-Checkbox als zusammenhängender Block (Checkbox links neben Text)
   Wir nutzen den Pattern, dass div nur 1 Label + 1 Checkbox enthält. */
.diwa2-form input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    vertical-align: middle;
    transform: scale(1.25);
    cursor: pointer;
}
/* Container fuer Checkbox + Label: Flex mit reverse, so dass Checkbox links erscheint */
.diwa2-form div:has(> input[type="checkbox"]),
.diwa2-form .form-check {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    margin-top: 18px;
}
.diwa2-form div:has(> input[type="checkbox"]) label {
    flex: 1;
    margin: 0 !important;
    font-weight: normal !important;
    font-size: 13px !important;
    color: #1a1a1a;
    line-height: 1.45;
    cursor: pointer;
}
.diwa2-form div:has(> input[type="checkbox"]) input[type="checkbox"] {
    margin-top: 2px !important;
    flex-shrink: 0;
}
/* Fallback (kein :has-Support): Checkbox-Felder mindestens lesbar machen */
.diwa2-form input[type="checkbox"] + label,
.diwa2-form label + input[type="checkbox"] {
    display: inline-block;
}

/* form-actions: Buttons nebeneinander, "Weiter" links, "Zurueck" rechts daneben */
.diwa2-form .form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}
.diwa2-back {
    color: rgb(12, 93, 130);
    text-decoration: underline;
    font-size: 14px;
}
.diwa2-back:hover { color: rgb(12, 93, 130); text-decoration: underline; }

/* ---------- Step 4 — Bestätigungs-Übersicht ---------- */
.diwa2-module--wizard .diwa2-confirm-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    margin: 18px 0 24px;
    align-items: stretch;
}
@media (max-width: 820px) {
    .diwa2-module--wizard .diwa2-confirm-grid { grid-template-columns: 1fr; }
}

.diwa2-module--wizard .diwa2-confirm-hero {
    background: linear-gradient(135deg, #e30613 0%, #b8050f 100%);
    color: #fff;
    border-radius: 6px;
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 6px 18px rgba(227, 6, 19, 0.18);
}
.diwa2-module--wizard .diwa2-confirm-hero__icon {
    font-size: 28px;
    opacity: 0.85;
    margin-bottom: 6px;
}
.diwa2-module--wizard .diwa2-confirm-hero__date {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.diwa2-module--wizard .diwa2-confirm-hero__time {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    margin: 6px 0 14px;
    font-variant-numeric: tabular-nums;
}
.diwa2-module--wizard .diwa2-confirm-hero__team {
    font-size: 14px;
    line-height: 1.4;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.25);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.diwa2-module--wizard .diwa2-confirm-hero__team small {
    font-size: 12px;
    opacity: 0.85;
}

.diwa2-module--wizard .diwa2-confirm-details {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 18px 22px;
}
.diwa2-module--wizard .diwa2-confirm-details h2 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
}
.diwa2-module--wizard .diwa2-confirm-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
}
.diwa2-module--wizard .diwa2-confirm-dl > div {
    padding: 10px 0;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.diwa2-module--wizard .diwa2-confirm-dl > div:nth-child(-n+2) { border-top: none; padding-top: 0; }
.diwa2-module--wizard .diwa2-confirm-dl > div.is-wide { grid-column: 1 / -1; }
.diwa2-module--wizard .diwa2-confirm-dl > div:not(:nth-child(2n)) { padding-right: 18px; }
.diwa2-module--wizard .diwa2-confirm-dl dt {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgb(84, 84, 84);
    margin: 0;
}
.diwa2-module--wizard .diwa2-confirm-dl dd {
    margin: 0;
    font-size: 15px;
    color: #1f2937;
    word-break: break-word;
}
@media (max-width: 560px) {
    .diwa2-module--wizard .diwa2-confirm-dl { grid-template-columns: 1fr; }
}

.diwa2-module--wizard .diwa2-confirm-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.diwa2-module--wizard .diwa2-btn--big {
    padding: 14px 28px;
    font-size: 16px;
}
.diwa2-module--wizard .diwa2-btn--secondary {
    background: #0e75bc;
    color: #fff;
    border: none;
}
.diwa2-module--wizard .diwa2-btn--secondary:hover { background: #0a5a91; color: #fff; }

/* ---------- Done / Geschafft-Seite ---------- */
.diwa2-module--wizard .diwa2-done {
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 0 0;
}
.diwa2-module--wizard .diwa2-done__header {
    text-align: center;
    margin: 0 0 32px;
}
.diwa2-module--wizard .diwa2-done__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.diwa2-module--wizard .diwa2-done__icon i { display: block; }
.diwa2-module--wizard .diwa2-done h2 {
    font-size: 26px;
    color: #166534;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.2px;
}
.diwa2-module--wizard .diwa2-done__lead {
    color: #475569;
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}
.diwa2-module--wizard .diwa2-done .diwa2-confirm-grid {
    margin: 0 0 28px;
    gap: 18px;
}
.diwa2-module--wizard .diwa2-done .diwa2-confirm-details {
    padding: 22px 24px;
}
.diwa2-module--wizard .diwa2-done .diwa2-confirm-details h3 {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.diwa2-module--wizard .diwa2-done .diwa2-confirm-dl > div {
    padding: 12px 0;
}
.diwa2-module--wizard .diwa2-done .diwa2-confirm-dl dd {
    font-size: 14px;
    font-weight: 500;
}
.diwa2-module--wizard .diwa2-done__actions {
    text-align: center;
    margin: 0 0 10px;
}
.diwa2-module--wizard .diwa2-done__actions .diwa2-btn i { margin-right: 10px; }
.diwa2-module--wizard .diwa2-done__hint {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    margin: 0 0 28px;
    line-height: 1.5;
}
.diwa2-module--wizard .diwa2-done__hint i { margin-right: 6px; }
.diwa2-module--wizard .diwa2-done__notice {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    padding: 14px 18px;
    color: #713f12;
    font-size: 14px;
    line-height: 1.55;
}
.diwa2-module--wizard .diwa2-done__notice i {
    color: #d97706;
    font-size: 20px;
    flex-shrink: 0;
}

/* Kalender-Button im CI-Rot statt Blau */
.diwa2-module--wizard .diwa2-done .diwa2-btn--secondary {
    background: #e30613;
}
.diwa2-module--wizard .diwa2-done .diwa2-btn--secondary:hover {
    background: #b8050f;
}