/* --- Fenster (epi/fenster) ------------------------------------------------
   Ein Screenshot im Windows-11-Programmfenster, gebaut aus HTML/CSS statt ins
   Bild montiert. Die drei Chrome-Knoepfe geben einen CTA frei, der immer
   schon da ist: .epi-fenster__hinten liegt absolut (inset: 0) exakt unter dem
   Fenster. So bestimmt allein das in-flow-Fenster (.epi-fenster__buehne ist
   fit-content) die Groesse der Buehne — Minimieren/Schliessen aendern nur
   transform/opacity, nie Breite oder Hoehe, und die Seite springt nicht
   (Vertrag: kein Layout-Sprung).

   Fenster-eigene Werte (kein Aequivalent in tokens.generated.css) als lokale
   Custom Properties, alles andere kommt aus den Theme-Tokens. */

.epi-fenster {
    --fenster-chrome: #f3f3f3; /* Mica hell */
    --fenster-glyphe: #1b1b1b;
    --fenster-hover: rgb(0 0 0 / 0.06);
    --fenster-gedrueckt: rgb(0 0 0 / 0.1);
    --fenster-schliessen: #c42b1c;
    --fenster-schliessen-gedrueckt: #c83f31;
    --fenster-rahmen: 8px; /* Chrome-Flaeche um den Screenshot links/rechts/unten, mobil 6px */
}

.epi-fenster__buehne {
    position: relative;
    /* fit-content statt 100 %: die Buehne soll exakt so breit sein wie das
       Fenster, sonst deckt die absolut positionierte CTA-Flaeche dahinter
       eine falsche (zu breite) Flaeche ab. */
    inline-size: fit-content;
    max-inline-size: 100%;
}

/* --- Fenster-Chrome -------------------------------------------------------
   Gilt sowohl fuer das kleine Fenster in der Buehne als auch fuer
   .epi-fenster__fenster--vollbild im Dialog (beide tragen diese Klasse).
   transform-origin unten links, weil Minimieren Richtung Taskleisten-Tab
   unten links in der Buehne schrumpft (Vertrag). */

.epi-fenster__fenster {
    background-color: var(--fenster-chrome);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
    inline-size: fit-content;
    max-inline-size: 100%;
    transform-origin: bottom left;
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing),
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing),
        visibility 0s linear 0s;
}

/* Minimieren: Richtung Tab schrumpfen. Die visibility-Verzoegerung entfernt
   das Fenster erst nach der Animation aus dem Rendering/der Hit-Testing --
   der klassische Kniff fuer eine Transition ueber display/visibility hinweg,
   ganz ohne transition-behavior: allow-discrete. */
[data-zustand="minimiert"] .epi-fenster__fenster {
    transform: scale(0.08);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing),
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing),
        visibility 0s linear var(--motion-entrance-duration);
}

/* Schliessen: kurzes, kleines Ausblenden statt der Reise zum Tab -- es gibt
   ja keinen Tab, dahin muesste nichts schrumpfen. */
[data-zustand="geschlossen"] .epi-fenster__fenster {
    transform: scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--motion-state-duration) var(--motion-state-easing),
        opacity var(--motion-state-duration) var(--motion-state-easing),
        visibility 0s linear var(--motion-state-duration);
}

.epi-fenster__leiste {
    display: flex;
    align-items: center;
    block-size: var(--touch-min);
    padding-inline-start: 16px;
}

.epi-fenster__titel {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    font-size: 0.8125rem;
    color: var(--fenster-glyphe);
}

.epi-fenster__aktionen {
    display: flex;
    flex: none;
    margin-inline-start: auto;
}

/* Ohne diese Regel gewinnt das globale "button { display: inline-flex }"
   aus global.css gegen die UA-Regel "[hidden] { display: none }" -- Autoren-
   CSS schlaegt UA-CSS immer, unabhaengig von der Spezifitaet (derselbe
   Befund wie beim Vollbild-Dialog oben). Betrifft hier zwar ein <div>, nicht
   die Knoepfe selbst, aber ohne JS muss die ganze Leiste verborgen bleiben. */
.epi-fenster__aktionen[hidden] {
    display: none;
}

/* 46 x 44 px wie in Windows 11 (mobil 44 x 44, siehe Media Query unten). */
.epi-fenster__knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 46px;
    block-size: 44px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--fenster-glyphe);
    cursor: pointer;
    transition:
        background-color var(--motion-state-duration) var(--motion-state-easing),
        color var(--motion-state-duration) var(--motion-state-easing);
}

.epi-fenster__knopf svg {
    inline-size: 10px;
    block-size: 10px;
}

/* Der globale Fokusring ist 3 px und liegt damit teils ausserhalb des
   Knopfs -- ohne negativen Offset schneidet das overflow: hidden des
   Fensters ihn ab (Vertrag). */
.epi-fenster__knopf:focus-visible {
    outline-offset: -3px;
}

.epi-fenster__knopf:hover {
    background-color: var(--fenster-hover);
}

/* box-shadow explizit erneut auf none: das globale "button:active { box-shadow:
   inset 0 2px 3px rgba(0,0,0,.25) }" aus global.css ist selbst ueber :active
   qualifiziert und schlaegt damit unsere unqualifizierte Basisregel oben --
   nur eine ebenso hoch spezifische :active-Regel gewinnt zuverlaessig. */
.epi-fenster__knopf:active {
    background-color: var(--fenster-gedrueckt);
    box-shadow: none;
}

.epi-fenster__knopf--schliessen:hover {
    background-color: var(--fenster-schliessen);
    color: var(--color-base);
}

.epi-fenster__knopf--schliessen:active {
    background-color: var(--fenster-schliessen-gedrueckt);
    color: var(--color-base);
    box-shadow: none;
}

/* Chrome-Flaeche links/rechts/unten um den Screenshot -- oben uebernimmt die
   Titelleiste diese Rolle bereits, deshalb kein Top-Padding. */
.epi-fenster__inhalt {
    padding: 0 var(--fenster-rahmen) var(--fenster-rahmen);
}

.epi-fenster__inhalt figure {
    margin: 0;
}

.epi-fenster__inhalt img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    /* Eigene, kleinere Rundung fuer den Screenshot selbst, plus eine
       1-px-Haarlinie: derselbe Grund wie bei .epi-screenshot -- eine im Bild
       eingezeichnete Kante bricht an der groesseren CSS-Ecke ab. */
    border-radius: calc(var(--radius-lg) - var(--fenster-rahmen));
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

/* --- CTA dahinter ----------------------------------------------------------
   Liegt immer schon da, exakt in der Flaeche des Fensters. Steht frei auf
   der Sektionsflaeche -- keine Karte, keine Kontur, kein Schatten, kein
   Eyebrow (DESIGN-Regel gegen den KI-Look): sobald das Fenster weg ist, soll
   auch keine zweite Flaeche an seiner Stelle uebrig bleiben. */

.epi-fenster__hinten {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--lg);
    text-align: center;
    transform: translateY(4px);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        visibility 0s linear var(--motion-entrance-duration);
}

/* Kein interaktives Element -- der programmatische Fokus (tabindex="-1")
   dient nur dazu, dass Screenreader nach dem Minimieren/Schliessen hier
   weiterlesen. Der 3-px-Fokusring um die ganze Flaeche waere hier nur
   visuelles Rauschen ohne Bedienzweck; Tab und Knoepfe behalten ihren Ring. */
.epi-fenster__hinten:focus {
    outline: none;
}

[data-zustand="minimiert"] .epi-fenster__hinten,
[data-zustand="geschlossen"] .epi-fenster__hinten {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing) 80ms,
        visibility 0s linear 0s;
}

/* Traegt bewusst dieselbe Stimme wie eine H2 (font-family, Fettgrad,
   Zeilenhoehe) -- ein <em> darin bekommt ueber den erweiterten Selektor bei
   "Halbsatz" oben exakt deren Kursiv-Tuerkis-Blockdarstellung, ohne die Werte
   hier zu verdoppeln. Der Text ist redaktionell editierbar (role: content,
   render.php gibt ihn ueber wp_kses statt esc_html aus). */
.epi-fenster__cta-text {
    margin: 0;
    max-inline-size: 22ch;
    font-family: var(--font-secondary);
    /* Das Fenster ist hoechstens halb so breit wie die Aufnahme (gut 400 px);
       in H2-Groesse fuellte der Satz die Flaeche mit vier Zeilen. */
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-text);
    text-wrap: balance;
}

.epi-fenster__hinten .wp-block-buttons {
    margin-block-start: 1.5rem;
}

/* Schlichter Textlink, kein Button: global.css macht aus jedem <button> per
   Elementselektor eine gefuellte Flaeche (Hintergrund, Rahmen, Radius,
   min-height 44px, bei :hover/:active sogar Akzentfarbe + Inset-Schatten).
   Jede Eigenschaft, die hier nicht explizit auf "aus" steht, faellt sonst auf
   diese globale Button-Optik zurueck -- deshalb die vollstaendige Liste statt
   nur border/background/padding. */
.epi-fenster__wieder {
    display: inline-flex;
    align-items: center;
    margin-block-start: 1rem;
    /* Trefferflaeche >= 24 px (WCAG 2.5.8) ohne Button-Optik: min-height statt
       Padding, das die Textzeile optisch vergroessern wuerde. */
    min-height: 24px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    width: auto;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color var(--motion-state-duration) var(--motion-state-easing),
        text-decoration-thickness var(--motion-state-duration) var(--motion-state-easing);
}

/* Eigene :hover/:active/:focus-visible-Regeln noetig, nicht nur eine Basis-
   regel: "button:hover"/"button:active" in global.css sind selbst ueber eine
   Pseudoklasse qualifiziert und schlagen daher eine unqualifizierte
   .epi-fenster__wieder-Basisregel unabhaengig von deren Herkunft. */
.epi-fenster__wieder:hover,
.epi-fenster__wieder:active,
.epi-fenster__wieder:focus-visible {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

.epi-fenster__wieder:hover,
.epi-fenster__wieder:active {
    color: var(--color-text);
    text-decoration-thickness: 2px;
}

/* Ohne diese Regel gewinnt das globale "button { display: inline-flex }" aus
   global.css gegen die UA-Regel "[hidden] { display: none }" (Autoren-CSS vor
   UA-CSS, unabhaengig von der Spezifitaet) -- derselbe Befund wie oben bei
   .epi-fenster__aktionen und beim Vollbild-Dialog. */
.epi-fenster__wieder[hidden] {
    display: none;
}

/* --- Taskleisten-Tab --------------------------------------------------------
   Erscheint nur im Zustand "minimiert", unten links in der Flaeche des
   Fensters (nicht am Seiten- oder Browserrand). Animiert von display: none
   herein, deshalb transition-behavior: allow-discrete + @starting-style --
   modernes Gegenstueck zum Verzoegerungs-Trick oben, hier gebraucht, weil der
   Tab keinen fadenden Elternknoten hat wie .epi-fenster__wieder ihn hat. */

.epi-fenster__tab {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-start: 12px;
    max-inline-size: 70%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    block-size: 40px;
    padding-inline: 0.75rem;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background-color: var(--color-base);
    box-shadow: var(--standard-box-shadow);
    cursor: pointer;
    transition:
        opacity var(--motion-entrance-duration) var(--motion-entrance-easing),
        transform var(--motion-entrance-duration) var(--motion-entrance-easing),
        display var(--motion-entrance-duration) allow-discrete;
}

.epi-fenster__tab[hidden] {
    display: none;
}

@starting-style {
    .epi-fenster__tab:not([hidden]) {
        opacity: 0;
        transform: translateY(4px);
    }
}

/* Ohne diese Regel gewinnt das globale "button:hover"/"button:active" aus
   global.css (gelbe Akzentflaeche, Rahmenfarbe, bei :active ein Inset-
   Schatten) -- als Pseudoklassen-Regeln schlagen sie eine unqualifizierte
   .epi-fenster__tab-Basisregel unabhaengig von deren Herkunft. */
.epi-fenster__tab:hover,
.epi-fenster__tab:active,
.epi-fenster__tab:focus-visible {
    border-color: var(--color-line);
    background-color: var(--color-base);
    box-shadow: var(--standard-box-shadow);
}

.epi-fenster__tab:hover {
    transform: translateY(-2px);
}

.epi-fenster__tab-symbol {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.epi-fenster__tab-symbol svg {
    inline-size: 16px;
    block-size: 16px;
    color: var(--color-text);
}

/* Kurzer Akzentstrich unter dem Fenstersymbol, wie in der Windows-Taskleiste
   unter dem aktiven Eintrag. */
.epi-fenster__tab-symbol::after {
    content: "";
    inline-size: 16px;
    block-size: 3px;
    border-radius: 1px;
    background-color: var(--color-accent-dark-wcag);
}

.epi-fenster__tab-titel {
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--color-text);
}

/* --- Vollbild-Dialog ---------------------------------------------------- */

.epi-fenster__vollbild {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Eigene Regel statt auf die UA-Regel "dialog:not([open]) { display: none }"
   zu vertrauen: Autoren-CSS schlaegt UA-CSS immer, unabhaengig von der
   Spezifitaet -- ohne dieses :not([open]) bliebe der Dialog dauerhaft im
   Fluss sichtbar (Befund 2026-09-28 im Test). */
.epi-fenster__vollbild:not([open]) {
    display: none;
}

/* Auf Sichtfenstergroesse statt auf den Inhalt: nur so trifft ein Klick
   neben dem Fenster tatsaechlich das <dialog>-Element selbst (Grundlage
   fuer "Klick auf Hintergrund = Verkleinern" in view.js). */
.epi-fenster__vollbild[open] {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    display: grid;
    place-items: center;
}

/* Ein- und Ausblenden ueber die Klasse is-sichtbar aus view.js: close()
   laeuft erst nach der Animation, deshalb loest sich der Hintergrund auch
   beim Schliessen weich auf (@starting-style kann nur das Einblenden).
   Abdunklung und Unschaerfe laufen gemeinsam ueber ihre eigenen Werte
   (Farbe von transparent, Blur von 0 px) statt ueber opacity: eine
   Deckkraft-Blende ueber einem backdrop-filter springt am Ende sichtbar
   von "unscharf" auf "scharf". */
.epi-fenster__vollbild::backdrop {
    background-color: rgb(16 20 24 / 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition:
        background-color var(--motion-entrance-duration) var(--motion-entrance-easing),
        -webkit-backdrop-filter var(--motion-entrance-duration) var(--motion-entrance-easing),
        backdrop-filter var(--motion-entrance-duration) var(--motion-entrance-easing);
}

.epi-fenster__vollbild.is-sichtbar::backdrop {
    background-color: rgb(16 20 24 / 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Die Bewegung macht view.js (Web Animations API, nur transform/opacity);
   die geerbten Minimieren-Transitions des kleinen Fensters duerfen hier
   nicht mitlaufen. Skaliert wird um die Mitte. */
.epi-fenster__fenster--vollbild {
    transition: none;
    transform-origin: center;
    display: flex;
    flex-direction: column;
    /* fit-content statt einer festen Breite: das Fenster soll genau so breit
       sein wie Screenshot + Rahmen (jede Bildgroesse), nur gedeckelt durch
       den Sichtfensterrand -- kein Wert dafuer im CSS hartcodiert. */
    inline-size: fit-content;
    max-inline-size: calc(100vw - 2rem);
    max-block-size: calc(100dvh - 2rem);
}

.epi-fenster__fenster--vollbild .epi-fenster__leiste {
    flex: none;
}

.epi-fenster__vollbild-inhalt {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    padding: 0 var(--fenster-rahmen) var(--fenster-rahmen);
}

.epi-fenster__vollbild-inhalt img {
    display: block;
    border-radius: calc(var(--radius-lg) - var(--fenster-rahmen));
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

@media screen and (max-width: 767px) {
    .epi-fenster {
        --fenster-rahmen: 6px;
    }

    .epi-fenster__knopf {
        inline-size: 44px;
    }

    .epi-fenster__hinten {
        padding: var(--wp--preset--spacing--md);
    }

    .epi-fenster__fenster--vollbild {
        max-inline-size: calc(100vw - 1.5rem);
        max-block-size: calc(100dvh - 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .epi-fenster__fenster,
    .epi-fenster__hinten,
    .epi-fenster__tab,
    .epi-fenster__knopf,
    .epi-fenster__vollbild::backdrop {
        transition: none;
    }

    /* FLIP-Wachstum/-Schrumpfen laeuft in view.js ueber die Web Animations
       API und prueft dort selbst prefers-reduced-motion -- hier nur die
       CSS-Transitions kappen. */
}