.base-dialog-body input, .base-dialog-body select, .base-dialog-body textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #67829d;
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-body, 16px);
    font-family: inherit;
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-surface, white);
    transition: border-color 0.2s 
ease;
}/* ============================================================
   DIALOGS.CSS — Konsolidierter Dialog-Stack
   Erstellt: 2026-05-23 (Task_23..._Konsolidierung [5c1])
   Inhalt: dialog-base.css (BaseDialog-System) + custom-dialogs.css
   (CustomDialogs.js Skin). Aus combined-all.css gemeinsam importiert.
   Quelldateien bleiben vorerst bestehen (Soft-Delete in [5e]).
   ============================================================ */

/* ============================================================
   Sektion 1/2: dialog-base.css (BaseDialog-System)
   ============================================================ */

/* ============================================
   BASE DIALOG TEMPLATE
   ============================================

   Styling für wiederverwendbare BaseDialog-Komponente

   Verwendet von:
   - Calendar-Dialogen
   - Booking-Dialogen
   - Complex Forms
   - Multi-step Wizards
   ============================================ */

/* ============================================
   OVERLAY
   ============================================ */

.base-dialog-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index:         var(--z-modal-backdrop, 400);
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity var(--duration-base, 200ms) ease;
}

.base-dialog-overlay.show {
    opacity: 1;
}

/* ============================================
   DIALOG CONTAINER
   ============================================ */

.base-dialog-container {
    /* Visual styles come from .card.card--floating (always added alongside this class) */
    position:       relative;
    width:          min(550px, 90vw);
    max-width:      90vw;
    max-height:     85vh;
    overflow:       hidden;
    padding:        0 !important;
    display:        flex;
    flex-direction: column;
    font-family:    var(--font-family, 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif);
    opacity:        0;
    transform:      scale(0.95) translateY(20px);
    transition:     opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.base-dialog-container.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ============================================
   HEADER
   ============================================ */

.base-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-default, #e9ecef);
    flex-shrink: 0;
}

.base-dialog-title {
    font-size: var(--text-heading, 24px);
    font-weight: 600;
    color: var(--text-primary, #060f1c);
    margin: 0;
    line-height: 1.3;
}

.base-dialog-close {
    width:        36px;
    height:       36px;
    border:       none;
    background:   transparent;
    font-size:    var(--text-heading, 24px);
    line-height:  1;
    color:        var(--text-secondary, #495057);
    cursor:       pointer;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    flex-shrink:  0;
    padding:      0;
    transition:   background var(--duration-fast, 120ms) ease,
                  color var(--duration-fast, 120ms) ease;
}

@media (hover: hover) and (pointer: fine) {
    .base-dialog-close:hover {
        background: var(--bg-subtle, #f1f3f5);
        color:      var(--text-primary, #060f1c);
    }
}

.base-dialog-close:focus-visible {
    outline:    none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(91, 135, 204, 0.35));
}

/* ============================================
   BODY
   ============================================ */

.base-dialog-body {
    padding:    28px;
    overflow-y: auto;
    color:      var(--text-secondary, #495057);
    line-height: 1.6;
    flex:       1;
}

/* Custom scrollbar */
.base-dialog-body::-webkit-scrollbar {
    width: 8px;
}

.base-dialog-body::-webkit-scrollbar-track {
    background:    var(--bg-subtle, #f1f3f5);
    border-radius: 4px;
}

.base-dialog-body::-webkit-scrollbar-thumb {
    background:    var(--border-strong, #dee2e6);
    border-radius: 4px;
}

.base-dialog-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #adb5bd);
}

/* ============================================
   FOOTER
   ============================================ */

.base-dialog-footer {
    display:          flex;
    gap:              12px;
    justify-content:  flex-end;
    padding:          20px 28px;
    border-top:       1px solid var(--border-default, #e9ecef);
    background:       var(--bg-subtle, #f1f3f5);
    flex-shrink:      0;
}

/* ============================================
   BUTTONS — aliased to global .btn system (components.css)
   Class names kept for JS compatibility.
   ============================================ */

.base-dialog-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         10px 20px;
    font-size:       var(--text-body, 16px);
    font-weight:     500;
    font-family:     inherit;
    line-height:     1.2;
    border:          1px solid transparent;
    border-radius:   var(--radius-md, 8px);
    cursor:          pointer;
    white-space:     nowrap;
    min-height:      44px;
    transition:      background 120ms ease,
                     border-color 120ms ease,
                     color 120ms ease;
}

.base-dialog-btn:focus-visible {
    outline:    none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(91, 135, 204, 0.35));
}

.base-dialog-btn:disabled,
.base-dialog-btn[disabled] {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
}

.base-dialog-btn-primary {
    background:   var(--color-primary, #5b87cc);
    border-color: var(--color-primary, #5b87cc);
    color:        var(--neutral-0); /* WP-4 [4/5]: #fff→--neutral-0 */
}
@media (hover: hover) and (pointer: fine) {
    .base-dialog-btn-primary:not(:disabled):hover {
        background:   var(--color-primary-dark, var(--accent-hover, #2a5fa8));
        border-color: var(--color-primary-dark, var(--accent-hover, #2a5fa8));
    }
}
.base-dialog-btn-primary:active:not(:disabled) {
    background:   var(--accent-active, #1a3e73);
    border-color: var(--accent-active, #1a3e73);
}

.base-dialog-btn-secondary {
    background:   var(--bg-surface, #fff);
    border-color: var(--border-default, #e9ecef);
    color:        var(--text-primary, #060f1c);
}
@media (hover: hover) and (pointer: fine) {
    .base-dialog-btn-secondary:not(:disabled):hover {
        background:   var(--bg-subtle, #f1f3f5);
        border-color: var(--border-strong, #dee2e6);
    }
}

.base-dialog-btn-danger {
    background:   var(--color-error, #dc2626);
    border-color: var(--color-error, #dc2626);
    color:        var(--neutral-0); /* WP-4 [4/5]: #fff→--neutral-0 */
}
@media (hover: hover) and (pointer: fine) {
    .base-dialog-btn-danger:not(:disabled):hover {
        background:   var(--danger-text, #b91c1c);
        border-color: var(--danger-text, #b91c1c);
    }
}

/* ============================================
   BOOKING-DIALOG SHARED OVERRIDES
   ============================================
   Diese Overrides waren in booking-options / reschedule / delete-booking /
   modify-duration / recurring-booking-dialog.css IDENTISCH dupliziert.
   Hier einmal gruppiert: gleiche Selektoren + gleiche Werte = KEINE
   visuelle Aenderung (Konsolidierung 2026-05-20, CSS-Audit Phase 3).
   confirm-booking-dialog hat abweichende Werte und bleibt separat.
   recurring-booking-dialog hat abweichendes body-padding (bleibt in
   seiner Datei), teilt aber footer + btn. */

.booking-options-dialog .base-dialog-body,
.reschedule-dialog .base-dialog-body,
.delete-booking-dialog .base-dialog-body,
.modify-duration-dialog .base-dialog-body {
    padding: 0;
}

.booking-options-dialog .base-dialog-footer,
.reschedule-dialog .base-dialog-footer,
.delete-booking-dialog .base-dialog-footer,
.modify-duration-dialog .base-dialog-footer,
.recurring-booking-dialog .base-dialog-footer {
    padding: 16px 28px 28px;
    border-top: none;
    background: transparent;
}

.booking-options-dialog .base-dialog-btn,
.reschedule-dialog .base-dialog-btn,
.delete-booking-dialog .base-dialog-btn,
.modify-duration-dialog .base-dialog-btn,
.recurring-booking-dialog .base-dialog-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: var(--text-body, 16px);
    font-weight: 600;
    border-radius: 10px;
}

/* ============================================
   LOADING STATE
   ============================================ */

.dialog-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
}

.dialog-loading p {
    margin: 0;
    color: var(--text-secondary, #666);
    font-size: var(--text-body, 16px);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border, var(--neutral-300));
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   ERROR STATE
   ============================================ */

.dialog-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 28px 20px;
    background: var(--color-error-bg, #fee2e2);
    border: 1px solid var(--color-error, #dc2626);
    border-radius: var(--radius-md, 8px);
    color: var(--color-error-dark, #991b1b);
    animation: slideIn 0.3s ease;
}

.dialog-error-icon {
    font-size: var(--text-heading, 24px);
    flex-shrink: 0;
}

.dialog-error-message {
    flex: 1;
    font-size: var(--text-body, 16px);
    line-height: 1.4;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.base-dialog-body form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.base-dialog-body label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    font-size: var(--text-body, 16px);
}

.base-dialog-body input,
.base-dialog-body select,
.base-dialog-body textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--color-border, #ddd);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-body, 16px);
    font-family: inherit;
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-surface, white);
    transition: border-color 0.2s ease;
}

.base-dialog-body input:focus,
.base-dialog-body select:focus,
.base-dialog-body textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.base-dialog-body textarea {
    resize: vertical;
    min-height: 100px;
}

.base-dialog-body input[type="checkbox"],
.base-dialog-body input[type="radio"] {
    width: auto;
    margin-right: 8px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
    .base-dialog-container {
        width: 95vw;
        max-height: 90vh;
    }

    .base-dialog-header,
    .base-dialog-body,
    .base-dialog-footer {
        padding: 20px;
    }

    .base-dialog-title {
        font-size: var(--text-body, 16px);
    }

    .base-dialog-btn {
        padding: 10px 20px;
        font-size: var(--text-body, 16px);
        min-width: 80px;
    }

    .base-dialog-footer {
        flex-wrap: wrap;
    }
}

/* Stack buttons on very small screens */
@media (max-width: 400px) {
    .base-dialog-footer {
        flex-direction: column-reverse;
    }

    .base-dialog-btn {
        width: 100%;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .base-dialog-overlay,
    .base-dialog-container,
    .base-dialog-btn {
        transition: none;
    }

    .spinner {
        animation: none;
        border-top-color: transparent;
    }

    .dialog-error {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .base-dialog-overlay {
        background: rgba(0, 0, 0, 0.8);
    }

    .base-dialog-container {
        border: 2px solid var(--text-primary, #1a1a1a);
    }

    .base-dialog-btn {
        border: 2px solid currentColor;
    }

    .base-dialog-body input,
    .base-dialog-body select,
    .base-dialog-body textarea {
        border-width: 3px;
    }
}

/* Focus visible polyfill for older browsers */
.base-dialog-close:focus:not(:focus-visible) {
    outline: none;
}

.base-dialog-btn:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   DARK MODE (if implemented)
   ============================================ */

@media (prefers-color-scheme: dark) and (max-width: 0) { /* Dunkel abgeschaltet 2026-10-10 */
    .base-dialog-container {
        background: var(--color-bg-primary-dark, #1f1f1f);
        color: var(--text-primary-dark, var(--neutral-300));
    }

    .base-dialog-header,
    .base-dialog-footer {
        border-color: var(--color-border-dark, #333);
    }

    .base-dialog-title {
        color: var(--text-primary-dark, var(--neutral-300));
    }

    .base-dialog-close {
        color: var(--text-secondary-dark, #888);
    }

    .base-dialog-close:hover {
        background: var(--color-bg-hover-dark, #2a2a2a);
        color: var(--text-primary-dark, var(--neutral-300));
    }

    .base-dialog-body {
        color: var(--text-secondary-dark, #b0b0b0);
    }

    .base-dialog-footer {
        background: var(--color-bg-secondary-dark, #1a1a1a);
    }

    .base-dialog-btn-secondary {
        background: var(--color-bg-secondary-dark, #2a2a2a);
        color: var(--text-primary-dark, var(--neutral-300));
    }

    .base-dialog-btn-secondary:hover:not(:disabled) {
        background: var(--color-bg-hover-dark, #333);
    }

    .base-dialog-body input,
    .base-dialog-body select,
    .base-dialog-body textarea {
        background: var(--color-bg-secondary-dark, #2a2a2a);
        color: var(--text-primary-dark, var(--neutral-300));
        border-color: var(--color-border-dark, #444);
    }

    .base-dialog-body::-webkit-scrollbar-track {
        background: var(--color-bg-secondary-dark, #1a1a1a);
    }

    .base-dialog-body::-webkit-scrollbar-thumb {
        background: var(--color-border-dark, #444);
    }

    .base-dialog-body::-webkit-scrollbar-thumb:hover {
        background: var(--color-border-dark, #555);
    }
}

/* ============================================
   Z-INDEX MANAGEMENT
   ============================================ */

/*
   Dialog z-index hierarchy (Stand 2026-06-05, S119-Step1.1):
   - BaseDialog overlay:    --z-modal-backdrop (400) — block/booking/profile dialogs
   - CustomDialogs overlay: --z-modal          (500) — confirm/alert/prompt, IMMER on top
   - CustomDialogs toast:   --z-modal          (500) + DOM-Order
   - block-toast:           10003 (in block-dialog.css, separate Notification-Layer)
*/

/* Already set above: z-index: 10002 */

/* ============================================
   PRICE DIALOG FORM
   ============================================ */

/* Inline validation error below the price input */
.price-dialog-error {
    display: none;
    color: var(--color-error, #dc2626);
    font-size: var(--text-caption, 12px);
    margin-top: 4px;
    line-height: 1.3;
}

.price-dialog-error.is-visible {
    display: block;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .base-dialog-overlay,
    .base-dialog-container {
        display: none !important;
    }
}


/* ============================================================
   Sektion 2/2: custom-dialogs.css (CustomDialogs.js Skin)
   ============================================================ */

/* ============================================
   CUSTOM DIALOG SYSTEM
   ============================================

   Custom dialogs to replace browser alert/confirm/prompt

   Features:
   - i18n-compatible
   - WCAG 2.2 AA compliant
   - Mobile-friendly
   - Keyboard accessible
   - Smooth animations
   - Toast notifications
   ============================================ */

/* ============================================
   OVERLAY
   ============================================ */

/* CustomDialogs liegen IMMER über BaseDialog UND messages-overlay (9999).
   2026-06-06: z-index auf 10010 erhoeht (vorher var(--z-modal, 500)).
   Modal-on-Modal-Fall: confirm() aufgerufen aus BlockDialog/Report-Modal
   innerhalb messages-overlay (z-index 9999) wurde sonst verdeckt. */
.custom-dialog-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index:         10010;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity var(--duration-base, 200ms) ease;
}

.custom-dialog-overlay.show {
    opacity: 1;
}

/* Toast overlay - no backdrop */
.dialog-toast-overlay {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
}

.dialog-toast-overlay .custom-dialog-container {
    pointer-events: all;
}

/* ============================================
   DIALOG CONTAINER
   ============================================ */

.custom-dialog-container {
    /* Visual styles from .card.card--floating (added in CustomDialogs.js).
       Only layout-specific properties here. */
    position:       relative;
    width:          min(450px, 90vw);
    max-height:     80vh;
    padding:        0 !important;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    font-family:    var(--font-family, 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif);
    opacity:        0;
    transform:      scale(0.9) translateY(20px);
    transition:     opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-dialog-container.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Toast-style dialogs */
.dialog-toast {
    width: min(400px, 90vw);
    padding: 16px 20px;
    transform: translateX(100%);
    box-shadow: var(--shadow-2xl, 0 25px 80px rgba(0, 0, 0, 0.2));
}

.dialog-toast.show {
    transform: translateX(0);
}

/* ============================================
   HEADER
   ============================================ */

.dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-default, #e9ecef);
    flex-shrink: 0;
}

.dialog-toast .dialog-header {
    border-bottom: none;
    padding: 12px 16px 8px;
}

.dialog-icon {
    font-size: var(--text-heading, 24px);
    line-height: 1;
    flex-shrink: 0;
}

.dialog-toast .dialog-icon {
    font-size: var(--text-heading, 24px);
}

.dialog-title {
    flex: 1;
    font-size: var(--text-heading, 24px);
    font-weight: 600;
    color: var(--text-primary, #060f1c);
    margin: 0;
    line-height: 1.3;
}

.dialog-toast .dialog-title {
    font-size: var(--text-body, 16px);
}

.dialog-close {
    width:        32px;
    height:       32px;
    border:       none;
    background:   transparent;
    font-size:    var(--text-heading, 24px);
    line-height:  1;
    color:        var(--text-secondary, #495057);
    cursor:       pointer;
    border-radius: 50%;
    flex-shrink:  0;
    display:      flex;
    align-items:  center;
    justify-content: center;
    padding:      0;
    transition:   background var(--duration-fast, 120ms) ease,
                  color var(--duration-fast, 120ms) ease;
}

@media (hover: hover) and (pointer: fine) {
    .dialog-close:hover {
        background: var(--bg-subtle, #f1f3f5);
        color:      var(--text-primary, #060f1c);
    }
}

.dialog-close:focus-visible {
    outline:    none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(91, 135, 204, 0.35));
}

/* ============================================
   BODY
   ============================================ */

.dialog-body {
    padding: 24px 28px;
    flex: 1;
    overflow-y: auto;
}

.dialog-toast .dialog-body {
    padding: 8px 16px;
}

.dialog-message {
    font-size: var(--text-body, 16px);
    line-height: 1.6;
    color: var(--text-secondary, #495057);
    margin: 0;
    white-space: pre-line;
}

.dialog-toast .dialog-message {
    font-size: var(--text-body, 16px);
}

/* Prompt Input */
.dialog-input {
    width: 100%;
    padding: 12px 16px;
    margin-top: 16px;
    border: 2px solid #67829d;
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-body, 16px);
    font-family: inherit;
    color: var(--text-primary, #060f1c);
    background: var(--bg-surface, #fff);
    transition: border-color 0.2s ease;
}

.dialog-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.dialog-input.error {
    border-color: var(--color-error, #dc2626);
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* ============================================
   FOOTER
   ============================================ */

.dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 28px;
    border-top: 1px solid var(--border-default, #e9ecef);
    background: var(--bg-subtle, #f1f3f5);
    flex-shrink: 0;
}

/* .dialog-btn: visual styles from .btn / .btn-primary / .btn-secondary (components.css)
   .dialog-btn class kept for responsive layout overrides below. */

/* ============================================
   TYPE-SPECIFIC STYLING
   ============================================ */

/* Success */
.dialog-success .dialog-icon {
    color: var(--color-success, #10b981);
}

.dialog-success .dialog-title {
    color: var(--color-success, #10b981);
}

.dialog-success .custom-dialog-container {
    border-left: 4px solid var(--color-success, #10b981);
}

/* Error */
.dialog-error .dialog-icon {
    color: var(--color-error, #dc2626);
}

.dialog-error .dialog-title {
    color: var(--color-error, #dc2626);
}

.dialog-error .custom-dialog-container {
    border-left: 4px solid var(--color-error, #dc2626);
}

/* Warning */
.dialog-warning .dialog-icon {
    color: var(--warn, #f59e0b);
}

.dialog-warning .dialog-title {
    color: var(--warn, #f59e0b);
}

.dialog-warning .custom-dialog-container {
    border-left: 4px solid var(--warn, #f59e0b);
}

/* Info */
.dialog-info .dialog-icon {
    color: var(--color-info, #3b82f6);
}

.dialog-info .dialog-title {
    color: var(--color-info, #3b82f6);
}

.dialog-info .custom-dialog-container {
    border-left: 4px solid var(--color-info, #3b82f6);
}

/* Destructive (dangerous confirmations) — override confirm to danger style */
.dialog-destructive .btn-primary {
    background:   var(--color-error, #dc2626);
    border-color: var(--color-error, #dc2626);
}
@media (hover: hover) and (pointer: fine) {
    .dialog-destructive .btn-primary:hover {
        background:   var(--danger-text, #b91c1c);
        border-color: var(--danger-text, #b91c1c);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
    .custom-dialog-container {
        width: 95vw;
        padding: 20px 24px;
    }

    .dialog-title {
        font-size: var(--text-body, 16px);
    }

    .dialog-message {
        font-size: var(--text-body, 16px);
    }

    .dialog-btn {
        padding: 10px 20px;
        font-size: var(--text-body, 16px);
        min-width: 70px;
    }

    .dialog-footer {
        gap: 8px;
    }

    .dialog-toast {
        width: 95vw;
    }

    .dialog-toast-overlay {
        padding: 10px;
    }
}

/* Stack buttons on very small screens */
@media (max-width: 400px) {
    .dialog-footer {
        flex-direction: column-reverse;
    }

    .dialog-btn {
        width: 100%;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .custom-dialog-overlay,
    .custom-dialog-container,
    .dialog-toast {
        transition: none;
    }

    .dialog-input.error {
        animation: none;
    }

    .dialog-btn {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .custom-dialog-overlay {
        background: rgba(0, 0, 0, 0.8);
    }

    .custom-dialog-container {
        border: 2px solid var(--text-primary, #060f1c);
    }

    .dialog-btn {
        border: 2px solid currentColor;
    }

    .dialog-input {
        border-width: 3px;
    }
}

/* Focus visible polyfill for older browsers */
.dialog-close:focus:not(:focus-visible) {
    outline: none;
}

.dialog-input:focus:not(:focus-visible) {
    outline: 2px solid var(--color-primary);
}

/* ============================================
   DARK MODE (if implemented)
   ============================================ */

@media (prefers-color-scheme: dark) and (max-width: 0) { /* Dunkel abgeschaltet 2026-10-10 */
    .custom-dialog-container {
        background: var(--color-bg-primary-dark, #1f1f1f);
        color: var(--text-primary-dark, var(--neutral-300));
    }

    .dialog-title {
        color: var(--text-primary-dark, var(--neutral-300));
    }

    .dialog-message {
        color: var(--text-secondary-dark, #b0b0b0);
    }

    .dialog-close {
        color: var(--text-secondary-dark, #888);
    }

    .dialog-close:hover {
        background: var(--color-bg-hover-dark, #2a2a2a);
        color: var(--text-primary-dark, var(--neutral-300));
    }

    .dialog-input {
        background: var(--color-bg-secondary-dark, #2a2a2a);
        color: var(--text-primary-dark, var(--neutral-300));
        border-color: var(--color-border-dark, #444);
    }
}

/* ============================================
   Z-INDEX MANAGEMENT
   ============================================ */

/*
   Dialog z-index hierarchy (Sektion 2/2 — Sektion 1/2 ist maßgeblich):
   - Base overlay (BaseDialog):   var(--z-modal-backdrop, 400)  — in Sektion 1/2 gesetzt
   - Custom overlay (CustomDialogs): var(--z-modal, 500)          — hier gesetzt
   - Toast overlay: z-index 501 (via .dialog-toast-overlay override unten)
   Alte Werte (10000/10001) waren falsch und führten dazu dass CustomDialogs
   hinter BaseDialogs verschwand. Behoben 2026-06-05, S119-Step1.1.
*/

.dialog-toast-overlay {
    z-index: 10011; /* Toasts über custom-dialog-overlay (10010) */
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .custom-dialog-overlay,
    .custom-dialog-container,
    .base-dialog-overlay {
        display: none !important;
    }
}

/* ── Onboarding checklist ────────────────────────────────── */
.onboarding-checklist {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.onboarding-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-body, 16px);
    line-height: 1.5;
    color: var(--text-secondary, #495057);
}
.onboarding-checklist li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* ============================================
   BASE DIALOG (BaseDialog.js)
   ============================================ */

/* NOTE (2026-06-05, S119-Step1.1): Dieses Block war die Ursache des z-index-Konflikts.
   Sektion 1/2 (oben) setzt z-index: var(--z-modal-backdrop, 400).
   Diese Sektion 2/2 (copy aus custom-dialogs.css standalone) hatte z-index: 10000 —
   was wegen CSS-Cascade gewann und CustomDialogs (z-index 500) dahinter verbarg.
   Fix: Nur layout-neutrale Properties hier; z-index-Wert entfernt (Sektion 1/2 gilt). */
.base-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    /* z-index intentionally omitted — Sektion 1/2 definiert var(--z-modal-backdrop, 400) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}
.base-dialog-overlay.show { opacity: 1; }

.base-dialog-container {
    /* Visuelle Eigenschaften (bg, border, border-radius, box-shadow) kommen
       aus .card .card--floating in components.css. Hier nur layout. */
    position: relative;
    width: min(450px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(.9) translateY(20px);
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    font-family: var(--font-family, 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif);
    /* padding 0 weil header/body/footer eigene Padding haben */
    padding: 0 !important;
}
.base-dialog-container.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.base-dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-default, #e9ecef);
    flex-shrink: 0;
}
.base-dialog-title {
    flex: 1;
    font-size: var(--text-heading, 24px);
    font-weight: 600;
    color: var(--text-primary, #060f1c);
    margin: 0;
    line-height: 1.3;
}
.base-dialog-close {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    font-size: var(--text-heading, 24px);
    color: var(--text-secondary, #495057);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    flex-shrink: 0;
    padding: 0;
}
.base-dialog-close:hover { background: var(--bg-subtle, #f0f0f0); }
.base-dialog-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.base-dialog-body {
    padding: 24px 28px;
    flex: 1;
    overflow-y: auto;
    font-size: var(--text-body, 16px);
    color: var(--text-secondary, #495057);
    line-height: 1.6;
}

.base-dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 28px;
    border-top: 1px solid var(--border-default, #e9ecef);
    background: var(--bg-subtle, #f1f3f5);
    flex-shrink: 0;
}

/* .base-dialog-btn — defined in dialog-base.css */

.dialog-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--text-secondary, #495057);
}

@media (prefers-reduced-motion: reduce) {
    .base-dialog-overlay,
    .base-dialog-container { transition: none; }
}

@media (max-width: 600px) {
    .base-dialog-container { width: 95vw; }
    .base-dialog-header,
    .base-dialog-body,
    .base-dialog-footer { padding-left: 20px; padding-right: 20px; }
    .base-dialog-footer { flex-wrap: wrap; }
    .base-dialog-btn { flex: 1; }
}

/* ============================================
   PASST AUFS FENSTER (2026-10-08, UNIVERSAL §23: ohne Scrollen ganz sichtbar)
   Baustein für knappe Dialoge: greift nur mit .is-fit am Dialog.
   Mockup: mockups/mockup-dialoge-passend.html. PD
   Task_2026-10-08_06-45_Dialog-ohne-Scrollen-Kalender-Mobil [7.1/8].
   Breiter als die Vorgabe oben (min(450px, 90vw), 80vh): bei 450 px brechen
   Texte um. Ein Kopf ohne Titel nimmt keine Zeile ein — nur das ✕ bleibt
   in der Ecke. Kopf, Inhalt und Fuß eine Abstands-Stufe kleiner.
   Gemessen bei 1366 × 650: siehe progress …schritt7-1.
   ============================================ */
.base-dialog-container.is-fit {
    width: min(600px, 92vw);
    max-height: 90vh;
}

.base-dialog-container.is-fit .base-dialog-header {
    padding: var(--space-3) var(--space-4);
}

.base-dialog-container.is-fit .base-dialog-header:has(.base-dialog-title:empty) {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: var(--space-2);
    border-bottom: 0;
}

.base-dialog-container.is-fit .base-dialog-body {
    padding: var(--space-3) var(--space-4);
}

.base-dialog-container.is-fit .base-dialog-footer {
    padding: var(--space-3) var(--space-4);
}

/* ============================================
   GOLDENER SCHNITT (2026-10-09, UNIVERSAL §24)
   Baustein für Eingabe-Dialoge: greift nur mit .is-golden am Dialog
   (gesetzt von js/dialog-golden-size.js, applyGoldenSize).
   Hochkant 500 × 809 px (Tokens --dialog-golden-*), höchstens 90vh. Die
   Höhe ist FEST — der Dialog springt nicht, wenn ein Abschnitt erscheint.
   Der Inhalt läuft untereinander; welches Element den freien Platz füllt,
   legt der Dialog in seinem Stylesheet fest. Passt es nicht, schaltet der
   Baustein .is-fit dazu (kompakt), die Höhe bleibt.
   Steht NACH .is-fit: Breite und Höhe von .is-golden gewinnen.
   Mockup: mockups/mockup-dialoge-goldener-schnitt.html
   ============================================ */
.base-dialog-container.is-golden {
    width: min(var(--dialog-golden-width), 92vw);
    height: min(var(--dialog-golden-height), 90vh);
    max-height: 90vh;
}

.base-dialog-container.is-golden .base-dialog-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.base-dialog-container.is-golden .base-dialog-body > * {
    flex-shrink: 0;
}

/* Kopf ohne Titel nimmt keine Zeile ein (wie .is-fit) */
.base-dialog-container.is-golden .base-dialog-header:has(.base-dialog-title:empty) {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: var(--space-2);
    border-bottom: 0;
}

/* Handy: Proportion gilt nicht, Höhe nach Inhalt (§24 Regel 6) */
@media (max-width: 600px) {
    .base-dialog-container.is-golden {
        width: 92vw;
        height: auto;
    }
}

/* ===========================================
   GOLDENER SCHNITT QUER (2026-10-09, UNIVERSAL §24 Regel 5)
   Für Meldungen ohne Eingabe (ein paar Zeilen und „OK“): 500 px breit,
   mindestens 500 ÷ 1,618 ≈ 309 px hoch, sonst so hoch wie der Inhalt.
   Gesetzt von js/dialog-golden-size.js (applyGoldenWideSize).
   Erster Nutzer: Fenster „Was noch fehlt“ beim Wechsel aufs Abo
   (js/subscription-gate-dialog.js, Mockup mockups/mockup-abo-voraussetzungen.html).
   ============================================ */
.base-dialog-container.is-golden-wide {
    width: min(var(--dialog-golden-width), 92vw);
    min-height: min(var(--dialog-golden-wide-min-height), 90vh);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Der freie Platz liegt zwischen Inhalt und Knopfleiste (§24 Regel 3) */
.base-dialog-container.is-golden-wide .base-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 600px) {
    .base-dialog-container.is-golden-wide {
        width: 92vw;
        min-height: 0;
    }
}