/* ============================================================
   sAIrmo · Fenster — das gemeinsame Fenster-Bauteil der Kunden-App
   ------------------------------------------------------------
   Markup und Verhalten: siehe fenster.js (Kopf-Kommentar). Zwei Formen:
     data-fenster-form="mitte"   Dialog in der Mitte, 30 rem (mit
                                 data-fenster-breit 60 rem)
     data-fenster-form="rechts"  Leiste am rechten Rand, volle Hoehe, 32 rem
   Auf dem Handy (bis 720 px, der Burger-Haltepunkt der App) werden beide
   Formen Vollbild. Kopf und Fuss stehen fest, nur .fenster-inhalt scrollt.

   Sichtbarkeit laeuft ueber das `hidden`-Attribut. Die Regel dafuer steht
   hier ausdruecklich, weil `.fenster` ein eigenes `display` setzt und ein
   Browser-Reset fuer [hidden] dagegen verlieren wuerde.

   Farben und Schatten kommen aus brand-tokens.css und dem Token-Block in
   app.css (body.theme-app) — hier steht kein freier Farbwert ausser dem
   Schleier, der als Petrol mit 45 % Deckkraft festgelegt ist.
   ============================================================ */

.fenster[hidden],
.fenster-schleier[hidden] { display: none !important; }

/* Waehrend ein Fenster offen ist, steht die Seite dahinter still. */
html.fenster-offen { overflow: hidden; }

/* ---- Top-Layer statt z-Index -------------------------------------------
   `body.theme-app main` ist ein Stapelkontext (position:relative; z-index:1,
   app.css). Ein Fenster im Seiteninhalt kaeme per z-Index nie ueber den
   klebenden Kopf (z 50/60) oder einen Schleier am body. fenster.js setzt
   deshalb beim Oeffnen `popover="manual"` und ruft showPopover(): Beide
   Elemente liegen dann in der Top-Layer, unabhaengig von jedem Vorfahren.
   Der Browser bringt dafuer eigene Regeln mit (inset:0, width:fit-content,
   margin:auto, padding, border, Canvas-Farben) — alles, was unten steht,
   ist darum AUSDRUECKLICH gesetzt, auch wo `auto` wie ein Standard aussieht.
   Der z-Index bleibt als Rueckfall fuer Engines ohne Popover-API. */

/* ---- Schleier ---------------------------------------------------------- */
.fenster-schleier {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(23, 69, 87, .45); /* Petrol, 45 % */
    z-index: 300; /* Rueckfall: ueber .confirm-backdrop (100) und .layout-card:focus-within (200) */
}

/* ---- Grundform --------------------------------------------------------- */
.fenster {
    position: fixed;
    inset: auto; /* die Formen unten setzen ihre Kanten selbst */
    margin: 0;
    padding: 0;
    z-index: 301;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--stein);
    border: 1px solid var(--sand);
    box-shadow: var(--shadow-3, 0 18px 40px -16px rgba(23, 69, 87, .35));
    color: var(--anthrazit);
    /* Eine Wischgeste im Fenster darf nicht an die Seite dahinter durchreichen
       (Scroll-Chaining). Steht auch auf .fenster-inhalt; hier zusaetzlich,
       weil bin/mobil-check.js die Overlays selbst misst. */
    overscroll-behavior: contain;
    outline: none; /* das Fenster selbst traegt tabindex="-1" als Fokus-Rueckfall */
}

.fenster[data-fenster-form="mitte"] {
    left: 50%;
    /* Mitte des WIRKLICH sichtbaren Bereichs, nicht des Layout-Viewports:
       `--vv-height` setzt app.js aus visualViewport. Bei ausgefahrener
       Tastatur (Tablet) bleibt das Fenster so ueber der Tastatur. */
    top: calc(var(--vv-height, 100dvh) / 2);
    transform: translate(-50%, -50%);
    width: min(30rem, 100vw - 2rem);
    height: auto;
    max-height: calc(var(--vv-height, 100dvh) - 2rem);
    border-radius: 12px;
}
.fenster[data-fenster-form="mitte"][data-fenster-breit] {
    width: min(60rem, 100vw - 2rem);
}

.fenster[data-fenster-form="rechts"] {
    top: 0;
    right: 0;
    width: min(32rem, 100vw);
    height: var(--vv-height, 100dvh);
    max-height: var(--vv-height, 100dvh);
    border-width: 0 0 0 1px;
    border-radius: 0;
    animation: fenster-gleiten .18s ease-out;
}
@keyframes fenster-gleiten {
    from { transform: translateX(100%); }
    to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fenster[data-fenster-form="rechts"] { animation: none; }
}

/* ---- Kopf -------------------------------------------------------------- */
.fenster-kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1rem 1rem 1.5rem;
    background: var(--stein);
}
/* Drei Klassen tief, damit die Regel gegen `body.theme-app h2` (Abstand
   2rem oben) gewinnt. */
.fenster .fenster-kopf h2 {
    margin: 0;
    font-family: var(--display-font);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.25;
    color: var(--petrol);
    overflow-wrap: anywhere;
}
.fenster .fenster-x {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    margin: -.25rem -.25rem -.25rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--petrol);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}
.fenster .fenster-x:hover { background: var(--petrol-08); }

/* ---- Inhalt: das einzige, was scrollt ---------------------------------- */
.fenster-inhalt {
    flex: 1 1 auto;
    min-height: 0; /* sonst dehnt Flex das Kind und nichts scrollt */
    overflow: auto;
    overscroll-behavior: contain;
    padding: .25rem 1.5rem 1.25rem;
}

/* ---- Fuss: weisse Flaeche, Trennlinie oben, Status links, Knoepfe rechts */
.fenster-fuss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .85rem 1.5rem;
    background: #fff;
    border-top: 1px solid var(--sand);
}
.fenster[data-fenster-form="mitte"] .fenster-fuss {
    border-radius: 0 0 11px 11px; /* innerhalb des 12px-Rahmens */
}
.fenster-status {
    flex: 1 1 8rem;
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.fenster-status:empty { display: none; }
.fenster-knoepfe {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

/* ---- Handy: Vollbild, beide Formen gleich ----------------------------- */
@media (max-width: 720px) {
    /* Die zweite Selektorzeile ist noetig: die Breit-Regel oben zaehlt drei
       Attribute und wuerde sonst die Vollbild-Breite ueberstimmen (gemessen:
       358 statt 390 px). */
    .fenster[data-fenster-form],
    .fenster[data-fenster-form][data-fenster-breit] {
        inset: 0;
        transform: none;
        width: auto;
        max-width: none;
        /* inset:0 setzt auch `bottom`; steht daneben eine Hoehe, ignoriert der
           Browser `bottom`. Die Hoehe ist der sichtbare Bereich — bei
           ausgefahrener Tastatur bleibt der Fuss so erreichbar. */
        height: var(--vv-height, 100dvh);
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }
    .fenster[data-fenster-form] .fenster-kopf {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: .85rem .75rem .85rem 1rem;
    }
    .fenster[data-fenster-form] .fenster-inhalt { padding: .25rem 1rem 1rem; }
    .fenster[data-fenster-form] .fenster-fuss {
        position: sticky;
        bottom: 0;
        z-index: 1;
        padding: .75rem 1rem;
        border-radius: 0;
    }
    .fenster[data-fenster-form] .fenster-knoepfe { flex: 1 1 100%; justify-content: flex-end; }
}