/**
 * css/aura-modal.css — Modal-Primitive für die AURA-Shell (v1.0.3)
 *
 * ── Zweck ────────────────────────────────────────────────────────────
 * Gemeinsame CSS-Basis für alle Dialog-artigen Modals im Ökosystem.
 * Sechs Typen, vier Größen, eine Öffnungs-Konvention, A11y-Integration.
 *
 * ── Status ───────────────────────────────────────────────────────────
 * Welle M1/M2 des Plans Modal1.0. Fundament. Wird von den migrierten
 * Modals (a11y, qa, einstellungen) genutzt.
 *
 * ── Changelog ────────────────────────────────────────────────────────
 * v1.0.3 | 16.09.2026 | Z-Index-Transitionsfix (Befund im Feld:
 *         |             migrierte Modals liegen auf Kreis-Seiten
 *         |             hinter dem .kreis-header).
 *         |
 *         |             Ursache: --modal-z nutzte den in ADR-css.1.0
 *         |             vorgeschlagenen Band-Wert 700. Der reale
 *         |             .kreis-header hat aber z-index: 1000 (der
 *         |             Audit beschreibt das selbst als "reine
 *         |             Zufallskonsequenz zweier unabhängiger
 *         |             Autoren"). 700 < 1000 — auf Kreis-Seiten
 *         |             liegt der Modal daher hinter dem Header.
 *         |             Auf Public-Seiten (.garden-header: 100) und
 *         |             Veltbewusst (.vb-header: 100) ist 700
 *         |             ausreichend; deshalb trat der Befund erst
 *         |             auf Kreis-Seiten auf.
 *         |
 *         |             Fix: Fallback 700 → 1200. 1200 liegt über
 *         |             allen bekannten Headern (Kreis 1000,
 *         |             Veltbewusst 100, Garden 100, Admin 30) und
 *         |             unter den bekannten Toasts (9999) und
 *         |             Loadern (9999/10000).
 *         |
 *         |             Dies ist ein TRANSITIONS-WERT. Sobald
 *         |             ADR-css.1.0 die Header-Bänder normalisiert
 *         |             (.kreis-header auf 200 statt 1000), kann der
 *         |             Fallback wieder auf 700 gesenkt werden —
 *         |             die Variable --ebene-modal wird dann aus
 *         |             tokens.css kommen, nicht aus dem Fallback.
 *         |
 *         |             Nur --modal-z-Fallback geändert. Alle
 *         |             anderen Selektoren und Token bleiben
 *         |             byte-identisch zu v1.0.2.
 * v1.0.2 | 16.09.2026 | Vorbeugender Firefox-Mobile-Fix für die
 *         |             Panel-max-height. dvh-Support via @supports.
 * v1.0.1 | 16.09.2026 | Firefox-Mobile-Fix: .aura-modal nutzt
 *         |             top/left/width + height: 100vh/100dvh statt
 *         |             inset: 0.
 * v1.0.0 | 16.09.2026 | Initial. Folgt Plan-Modal1.0.md.
 *
 * ── Vertrag ──────────────────────────────────────────────────────────
 * Der Modal-Vertrag in einem Satz:
 *
 *   Ein Modal ist ein Element mit .aura-modal, einem data-modal-
 *   Attribut und dem hidden-Attribut als Öffnungs-Konvention.
 *
 * Struktur (verbindlich für Typ Dialog):
 *
 *   <div class="aura-modal aura-modal--form"
 *        data-modal="qa"
 *        role="dialog"
 *        aria-modal="true"
 *        aria-labelledby="qaTitle"
 *        hidden>
 *     <div class="aura-modal__backdrop"></div>
 *     <div class="aura-modal__panel">
 *       <div class="aura-modal__header">
 *         <h2 id="qaTitle">…</h2>
 *         <button class="aura-modal__close" aria-label="Schließen">×</button>
 *       </div>
 *       <div class="aura-modal__body">
 *         …
 *       </div>
 *       <div class="aura-modal__footer">
 *         <button type="button">…</button>
 *       </div>
 *     </div>
 *   </div>
 *
 * Öffnen:      element.removeAttribute('hidden')
 * Schließen:   element.setAttribute('hidden', '')
 *
 * ── Größen-Varianten ─────────────────────────────────────────────────
 *   .aura-modal--narrow   480px (skaliert mit --a11y-font-scale)
 *   .aura-modal--form     600px (skaliert)
 *   .aura-modal--wide     900px (skaliert)
 *   .aura-modal--full     95vw × 95vh
 *
 * ── Typ-Varianten ────────────────────────────────────────────────────
 *   .aura-modal                  Dialog (Default)
 *   .aura-modal--drawer          Seitliches Menü (rechts, halb)
 *   .aura-modal--ambient         Nicht-blockierender Hinweis
 *   .aura-modal--lightbox        Medien-Dialog
 *
 * ── Ebenen-Band (TRANSITIONAL) ──────────────────────────────────────
 * Alle Modals nutzen var(--ebene-modal, 1200). Der Fallback 1200 ist
 * ein Transitions-Wert: Er überbrückt die Zeit bis ADR-css.1.0 die
 * Header-Bänder normalisiert. Wenn tokens.css --ebene-modal definiert,
 * gewinnt der Token-Wert — dann kann der Fallback entfallen.
 *
 * Zur Zeit der Erstellung liegen die Header bei:
 *   .garden-header  100
 *   .kreis-header   1000   ← Ausreißer (Audit-Befund)
 *   .vb-header      100
 *   .admin-topbar   30
 * 1200 liegt über allen.
 *
 * ── A11y-Integration ─────────────────────────────────────────────────
 *   - --a11y-font-scale skaliert Schrift und Panel-Breite
 *   - --a11y-focus-ring steuert Fokus-Ring-Dicke
 *   - prefers-reduced-motion schaltet Eingangsanimation ab
 *   - data-a11y-reduce-motion="on" schaltet ebenfalls ab
 *   - data-a11y-reduce-motion="off" überstimmt OS-Präferenz
 *   - prefers-reduced-transparency entfernt Backdrop-Blur
 *   - data-a11y-reduce-transparency="on" entfernt ebenfalls
 *   - :focus-visible nutzt Marken-Farbe und --a11y-focus-ring
 *
 * ── Was diese Datei NICHT tut ────────────────────────────────────────
 *   - Fokus-Trap (JS-Aufgabe: aura-focus-guard.js)
 *   - Escape-Handling (JS-Aufgabe: modal-stack.js)
 *   - Backdrop-Klick-Handling (JS-Aufgabe: modal-stack.js)
 *   - Scroll-Lock (JS-Aufgabe: scroll-lock.js)
 *   - Navigation-Close (JS-Aufgabe: modal-stack.js via moaktor:beforeSwap)
 *   - Animation-Exit (Welle M2)
 *   - Theme-Varianten (ADR-css.3.0, Zukunft)
 *   - prefers-contrast: more (Welle M2)
 *   - Header-Normalisierung (ADR-css.1.0, Welle N5)
 *
 * ── Layer ────────────────────────────────────────────────────────────
 * Alle Regeln liegen in @layer komponenten.
 *
 * ── Browser-Support ──────────────────────────────────────────────────
 * Moderne Browser (Chrome 99+, Firefox 97+, Safari 15.4+).
 *   - dvh (dynamic viewport height): Chrome 108+, Firefox 101+, Safari 15.4+
 *     → Fallback auf vh via Doppel-Deklaration bzw. @supports
 *   - prefers-reduced-transparency: Chrome 118+, Firefox (n/a), Safari (n/a)
 *     → data-a11y-reduce-transparency als Fallback
 *   - backdrop-filter: Baseline (mit -webkit- für ältere Safari)
 *   - :focus-visible: Baseline
 *
 * IDX: TBD — bitte manuell in dir.txt/datei_index nachtragen.
 * CHK: idx-marker
 *
 * Teil des MoAktor-Ökosystems | Lizenz: Lichtarchitekt-Lizenz #7
 */

@layer komponenten {

/* ═══════════════════════════════════════════════════════════════════
   1. COMPONENT TOKENS
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal {
    /* ── Ebenen-Band (TRANSITIONAL) ──────────────────────────────
       v1.0.3: Fallback 700 → 1200. Grund siehe Changelog-Kopf.
       Sobald tokens.css --ebene-modal definiert (ADR-css.1.0),
       gewinnt der Token-Wert. */
    --modal-z: var(--ebene-modal, 1200);

    /* ── Backdrop ─────────────────────────────────────────────── */
    --modal-backdrop-color: rgba(5, 10, 21, 0.72);
    --modal-backdrop-color-strong: rgba(0, 0, 0, 0.92);
    --modal-backdrop-color-reduced: rgba(5, 10, 21, 0.92);
    --modal-backdrop-blur: 8px;

    /* ── Panel ────────────────────────────────────────────────── */
    --modal-panel-bg:        var(--color-surface-elevated, #1a2a45);
    --modal-panel-color:     var(--color-text-primary, #f5f0e8);
    --modal-panel-radius:    var(--radius-lg, 16px);
    --modal-panel-shadow:    var(--shadow-xl, 0 24px 60px rgba(0, 0, 0, 0.5));
    --modal-panel-border:    1px solid rgba(212, 175, 55, 0.15);
    --modal-panel-border-strong: 1px solid rgba(212, 175, 55, 0.4);

    /* ── Struktur-Innenabstände ───────────────────────────────── */
    --modal-header-padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    --modal-body-padding:   var(--space-5, 1.5rem);
    --modal-footer-padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    --modal-footer-gap:     var(--space-3, 0.75rem);
    --modal-structure-border: 1px solid rgba(212, 175, 55, 0.1);

    /* ── Größen ───────────────────────────────────────────────── */
    --modal-width-narrow: min(calc(480px * var(--a11y-font-scale, 1)), 95vw);
    --modal-width-form:   min(calc(600px * var(--a11y-font-scale, 1)), 95vw);
    --modal-width-wide:   min(calc(900px * var(--a11y-font-scale, 1)), 95vw);
    --modal-width-full:   95vw;
    --modal-max-height:   95vh;

    /* Drawer-Breite (unabhängig von Größen-Varianten) */
    --modal-drawer-width: min(calc(420px * var(--a11y-font-scale, 1)), 92vw);

    /* ── Animation ────────────────────────────────────────────── */
    --modal-anim-duration: var(--transition-base, 250ms);
    --modal-anim-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
    --modal-anim-scale:    0.96;
    --modal-anim-translate: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   1b. DVH-PROGRESSIVE-ENHANCEMENT
   ═══════════════════════════════════════════════════════════════════
   Browser mit dvh-Support (Chrome 108+, Firefox 101+, Safari 15.4+)
   überschreiben die Panel-max-height auf dvh. Dadurch bleibt die
   Panel-Höhe in bottom-anchored Layouts relativ zur Container-
   Unterkante konstant, auch wenn die Adressleiste ein-/ausfährt. */
@supports (height: 100dvh) {
    .aura-modal {
        --modal-max-height: 95dvh;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   2. BASIS
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal {
    /* Positionierung: fix, an den Viewport-Rändern verankert. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Firefox Mobile: dynamische Viewport-Höhe. dvh berücksichtigt
       die Adressleiste; vh ist der Fallback für ältere Browser. */
    height: 100vh;
    height: 100dvh;
    z-index: var(--modal-z);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-4, 1rem);

    color: var(--modal-panel-color);
    font-family: inherit;
    line-height: 1.5;

    isolation: isolate;
}

.aura-modal[hidden] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. BACKDROP
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop-color);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
}

/* ═══════════════════════════════════════════════════════════════════
   4. PANEL
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: var(--modal-width-form);
    max-height: var(--modal-max-height);

    background: var(--modal-panel-bg);
    color: var(--modal-panel-color);
    border: var(--modal-panel-border);
    border-radius: var(--modal-panel-radius);
    box-shadow: var(--modal-panel-shadow);

    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   5. STRUKTUR — HEADER / BODY / FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    padding: var(--modal-header-padding);
    border-bottom: var(--modal-structure-border);
    flex-shrink: 0;
}

.aura-modal__header h1,
.aura-modal__header h2,
.aura-modal__header h3 {
    margin: 0;
    font-size: var(--text-lg, 1.25rem);
    font-weight: 600;
    line-height: 1.25;
}

.aura-modal__close {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: background var(--transition-fast, 150ms ease);
    flex-shrink: 0;
}

.aura-modal__close:hover {
    background: rgba(212, 175, 55, 0.1);
}

.aura-modal__body {
    padding: var(--modal-body-padding);
    overflow-y: auto;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}

.aura-modal__footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--modal-footer-gap);
    padding: var(--modal-footer-padding);
    border-top: var(--modal-structure-border);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   6. GRÖSSEN-VARIANTEN
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal--narrow .aura-modal__panel { max-width: var(--modal-width-narrow); }
.aura-modal--form   .aura-modal__panel { max-width: var(--modal-width-form); }
.aura-modal--wide   .aura-modal__panel { max-width: var(--modal-width-wide); }
.aura-modal--full   .aura-modal__panel { max-width: var(--modal-width-full); }

/* ═══════════════════════════════════════════════════════════════════
   7. TYP-VARIANTEN
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal--drawer {
    padding: 0;
    justify-content: flex-end;
    align-items: stretch;
    overflow: hidden;
}

.aura-modal--drawer .aura-modal__panel {
    max-width: var(--modal-drawer-width);
    max-height: 100vh;
    max-height: 100dvh;
    height: 100%;
    border-radius: 0;
    border-right: none;
}

.aura-modal--ambient {
    pointer-events: none;
}

.aura-modal--ambient .aura-modal__backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

.aura-modal--ambient .aura-modal__panel {
    pointer-events: auto;
}

.aura-modal--lightbox .aura-modal__backdrop {
    background: var(--modal-backdrop-color-strong);
}

.aura-modal--lightbox .aura-modal__panel {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: var(--modal-width-full);
    max-height: var(--modal-max-height);
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   8. ANIMATION — EINGANG
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal:not([hidden]) .aura-modal__backdrop {
    animation: aura-modal-backdrop-in var(--modal-anim-duration) var(--modal-anim-ease);
}

.aura-modal:not([hidden]) .aura-modal__panel {
    animation: aura-modal-panel-in var(--modal-anim-duration) var(--modal-anim-ease);
}

.aura-modal--drawer:not([hidden]) .aura-modal__panel {
    animation: aura-drawer-panel-in var(--modal-anim-duration) var(--modal-anim-ease);
}

.aura-modal--lightbox:not([hidden]) .aura-modal__panel {
    animation: aura-lightbox-panel-in var(--modal-anim-duration) var(--modal-anim-ease);
}

.aura-modal--ambient:not([hidden]) .aura-modal__backdrop {
    animation: none;
}

@keyframes aura-modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes aura-modal-panel-in {
    from {
        opacity: 0;
        transform: scale(var(--modal-anim-scale)) translateY(var(--modal-anim-translate));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aura-drawer-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes aura-lightbox-panel-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   9. A11Y-INTEGRATION
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal :focus-visible {
    outline: var(--a11y-focus-ring, 2px) solid var(--color-brand-accent, #d4af37);
    outline-offset: 2px;
    border-radius: 2px;
}

html[data-a11y-reduce-motion="on"] .aura-modal *,
html[data-a11y-reduce-motion="on"] .aura-modal:not([hidden]) .aura-modal__panel,
html[data-a11y-reduce-motion="on"] .aura-modal:not([hidden]) .aura-modal__backdrop {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-a11y-reduce-motion="off"]) .aura-modal *,
    html:not([data-a11y-reduce-motion="off"]) .aura-modal:not([hidden]) .aura-modal__panel,
    html:not([data-a11y-reduce-motion="off"]) .aura-modal:not([hidden]) .aura-modal__backdrop {
        animation: none !important;
    }
}

html[data-a11y-reduce-transparency="on"] .aura-modal__backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--modal-backdrop-color-reduced);
}

@media (prefers-reduced-transparency: reduce) {
    html:not([data-a11y-reduce-transparency="off"]) .aura-modal__backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--modal-backdrop-color-reduced);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   10. PROGRAMMATISCHE HOOKS
   ═══════════════════════════════════════════════════════════════════ */

.aura-modal--opening {}

.aura-modal--focus-trapped .aura-modal__panel {
}

/* ═══════════════════════════════════════════════════════════════════
   11. DRUCK
   ═══════════════════════════════════════════════════════════════════ */

@media print {
    .aura-modal:not([hidden]) {
        position: static;
        padding: 0;
    }
    .aura-modal__backdrop {
        display: none;
    }
    .aura-modal__panel {
        box-shadow: none;
        border: 1px solid #000;
        max-width: 100%;
        max-height: none;
    }
    .aura-modal * {
        animation: none !important;
    }
}

} /* Ende @layer komponenten */