/* JOB-20261014-004 Z3: Desktop-Fensterordnung (Einschubleiste | eine Lade | Buehne bis zum Rand), Raster aus UX-ZIELBILD d / DESIGN-Z2.
   Gilt nur ab 769 px und nur mit html.z3 (einschub.js setzt es). Handy (<= 768 px) bleibt unveraendert. Keine Textfarbe dunkler als #bbbbbb. */
#einschub, #sprachklappe, .buch-kopf, #eber-einstieg { display: none; }
/* Z4 Schritt 6 (M7, UX c2): Hoersprache folgt der einen Sprachwahl (Desktop Sprachtaste, Handy LNG/LIESMICH); eigener Umschalter im Kapitelbaum entfaellt */
html.z3 #baum-sprache { display: none; }

@media (min-width: 769px) {
    html.z3 {
        --ea: 56px; --gap: 12px;
        --lade: clamp(480px, 34vw, 720px);
        --buehne-l: var(--ea);
        --papier: #ebe5d1; --tinte: #1c1b17; --kasse: #e0a92b; --kasse-2: #b9831a; --kasse-tinte: #120d00; --lampe: #45d16b; --fokus: #5cc8ff;
    }
    html.z3.lade-offen { --buehne-l: calc(var(--ea) + var(--gap) + var(--lade) + var(--gap)); }

    /* ---- A: Einschubleiste ---- */
    html.z3 #einschub {
        display: flex; flex-direction: column; gap: 8px; position: fixed; left: 0; top: 0; bottom: var(--fuss-h); width: var(--ea);
        padding: 8px 0 10px; z-index: 140; background: linear-gradient(90deg, #1b1c19, #121311); border-right: 1px solid #000; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
    }
    /* JOB-20261020-011: mit LIESMICH sind es fuenf Einschuebe; wird die Leiste doch zu kurz, rollt sie statt Tasten abzuschneiden */
    html.z3 #einschub::-webkit-scrollbar { display: none; }
    html.z3 #einschub .luecke { flex: 1 1 8px; min-height: 4px; }
    html.z3 .einschub {
        position: relative; width: var(--ea); flex: 0 0 auto; min-height: 96px; padding: 16px 0 10px; border: 1px solid #070707; border-radius: 2px;
        background: linear-gradient(90deg, #34352f, #2a2b27 55%, #20211d); color: #ffffff; font-family: var(--font-mono);
        box-shadow: inset 1px 1px 0 rgba(255,255,255,.07), inset -1px -1px 0 rgba(0,0,0,.5), 2px 0 0 #000;
        display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; transition: transform .18s ease, background .18s;
    }
    html.z3 .einschub::before, html.z3 .einschub::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #8a8b83, #3a3b36 60%, #151513); box-shadow: 0 0 0 1px #0a0a09; }
    html.z3 .einschub::before { top: 4px; } html.z3 .einschub::after { bottom: 3px; }
    html.z3 .einschub .schild { writing-mode: vertical-rl; transform: rotate(180deg); background: var(--papier); color: var(--tinte); font-size: 12px; font-weight: bold;
        letter-spacing: 2px; padding: 8px 4px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); white-space: nowrap; }
    html.z3 .einschub .lampe { width: 8px; height: 8px; border-radius: 50%; background: #1d2a20; box-shadow: inset 0 0 0 1px #000; flex-shrink: 0; }
    html.z3 .einschub .kz, html.z3 .ekappe .kz { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px;
        font-weight: bold; color: #ffffff; background: linear-gradient(#3b3c37, #2a2b27); border: 1px solid #0a0a09; border-radius: 3px; box-shadow: 0 2px 0 #050505; flex-shrink: 0; }
    html.z3 .einschub[aria-expanded="true"] { transform: translateX(6px); background: linear-gradient(90deg, #45463f, #36372f 55%, #2a2b26); }
    html.z3 .einschub[aria-expanded="true"] .lampe { background: var(--lampe); box-shadow: 0 0 8px var(--lampe), inset 0 0 0 1px #0a3; }
    html.z3 .einschub[aria-expanded="true"] .schild { background: #ffffff; }
    html.z3 .einschub.shop { flex: 0 0 auto; min-height: 84px; background: linear-gradient(90deg, #4a3a12, #3a2d0c 55%, #2a2008); border-color: #0d0900; }
    html.z3 .einschub.shop .schild { background: var(--kasse); color: var(--kasse-tinte); }
    html.z3 .einschub.shop[aria-expanded="true"] { background: linear-gradient(90deg, #6b531a, #574313 55%, #3e300c); }
    html.z3 .einschub.shop[aria-expanded="true"] .lampe { background: var(--kasse); box-shadow: 0 0 8px var(--kasse); }
    html.z3 .ekappe { position: relative; width: var(--ea); min-height: 44px; flex-shrink: 0; padding: 0; border: 1px solid #070707; border-radius: 4px; color: #ffffff;
        background: linear-gradient(#41423c, #2c2d29); font-family: var(--font-mono); font-size: 13px; font-weight: bold; letter-spacing: 1px; cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 #050505; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
    html.z3 .ekappe .kz { position: absolute; left: 2px; top: 2px; min-width: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; font-size: 9px; }
    html.z3 .ekappe[aria-expanded="true"] { transform: translateY(2px); background: linear-gradient(#ffffff, #dedcd3); color: #000000; box-shadow: 0 1px 0 #050505; }
    html.z3 .ekappe[aria-expanded="true"] .kz { color: #000000; }
    html.z3 #einschub button:focus-visible, html.z3 #sprachklappe button:focus-visible, html.z3 .streifen:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
    @media (max-height: 1000px) { html.z3 #einschub { gap: 5px; } html.z3 .einschub { min-height: 0; padding: 12px 0 8px; gap: 5px; } html.z3 .einschub .schild { font-size: 11px; letter-spacing: 1px; padding: 6px 3px; } }
    /* JOB-20261020-011: Kompaktstufe traegt den fuenften Einschub (LIESMICH): Tastenkappe der LIESMICH-Lade (?) entfaellt, Schilder enger */
    @media (max-height: 1000px) { html.z3 .einschub.liesmich .kz { display: none; } html.z3 .einschub .schild { letter-spacing: 0; } }
    @media (max-height: 620px) { html.z3 .einschub .schild { font-size: 10px; letter-spacing: 0; padding: 4px 2px; } html.z3 .einschub .kz { display: none; } }
    /* eine Sprachwahl (Schritt 9): die DE/EN/RU-Reihe im LIESMICH ist am Desktop doppelt zur Sprachtaste */
    html.z3 #liesmich-sprache { display: none; }
    /* Z4 Schritt 6: das Sprachfenster ist am Desktop nur noch "andere Sprache …" (Uebersetzungsfeld); DE/EN/RU stehen in der Sprachklappe */
    html.z3 #window-lang #lang-reihe { display: none !important; }

    html.z3 #sprachklappe { position: fixed; left: calc(var(--ea) + 8px); z-index: 160; width: 240px; padding: 6px; background: #1b1c19; border: 1px solid #000;
        box-shadow: 0 10px 30px rgba(0,0,0,.7); flex-direction: column; gap: 4px; }
    html.z3 #sprachklappe.offen { display: flex; }
    html.z3 #sprachklappe button { min-height: 44px; padding: 0 12px; text-align: left; border: 1px solid #070707; border-radius: 4px; color: #ffffff; cursor: pointer;
        background: linear-gradient(#41423c, #2c2d29); font-family: var(--font-mono); font-size: 14px; }
    html.z3 #sprachklappe button[aria-checked="true"] { background: linear-gradient(#ffffff, #dedcd3); color: #000000; font-weight: bold; }

    /* ---- B: genau eine Lade (das eine grosse Fenster) ---- */
    html.z3 .script-window.minimized { display: none !important; }
    html.z3 .script-window:not(.minimized):not(.fullscreen) {
        top: var(--gap) !important; bottom: calc(var(--fuss-h) + var(--gap)) !important; left: calc(var(--ea) + var(--gap)) !important; right: auto !important;
        width: var(--lade) !important; height: auto !important; max-width: none; min-width: 0; flex-direction: column !important; border-radius: 2px;
    }
    html.z3 .script-window.fullscreen { left: var(--ea) !important; width: calc(100vw - var(--ea)) !important; bottom: var(--fuss-h) !important; height: auto !important; flex-direction: column !important; }
    html.z3 #window-backlog:not(.minimized) { display: flex !important; }
    html.z3 .script-window .window-header { cursor: default; border-top: 0 !important; border-bottom: 1px solid var(--term-border); min-height: 44px; }
    html.z3 .script-window .window-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    html.z3 .script-window .window-content.text-content, html.z3 #window-liesmich .window-content.text-content { height: auto; max-height: none; }
    html.z3 .script-window .window-controls button { min-width: 44px; min-height: 44px; }
    /* "nach oben/unten"-Pfeil der Leisten ist hier "einschieben" */
    html.z3 .script-window .toggle-btn::after { content: "×" !important; font-size: 20px; }
    html.z3 #window-guestbook #guestbook-list { max-height: none; }
    /* ROMAN/PHYSIK nutzen das Hoerfenster: Buchkopf + Kapitel nur des gewaehlten Buchs */
    html.z3 #window-audio[data-buch] .buch-kopf[data-buch-kopf] { display: none; }
    html.z3 #window-audio[data-buch="roman"] .buch-kopf[data-buch-kopf="roman"], html.z3 #window-audio[data-buch="physik"] .buch-kopf[data-buch-kopf="physik"] { display: block; }
    /* JOB-PLAYER-SCROLL (Rico 30.10.): ohne max-height scrollt das Fenster, nicht #baum; #baum darf dann kein Scroll-Container mit overscroll-behavior: contain sein (Rad ueber der Liste) */
    html.z3 #window-audio #baum { max-height: none; overflow: visible; overscroll-behavior: auto; }
    html.z3 .buch-kopf { margin: 0 0 16px; }
    html.z3 .buch-kopf .angebot-knoepfe { margin-bottom: 4px; }
    html.z3 .buch-kopf .bs-einstieg { margin: 0 0 14px; padding: 16px 16px 14px; }
    html.z3 .buch-kopf .bs-einstieg-satz { font-size: clamp(20px, 1.7vw, 30px); }
    /* Z4 Schritt 7 (UX a3): der Einstieg haengt am Roman-Fenster; im Chat-Startzustand entfaellt er am Desktop (sonst doppelt) */
    html.z3 #chat-verlauf .bs-einstieg { display: none !important; }

    /* Enzyklopedia: die Konsole ist am Desktop ebenfalls die Lade */
    html.z3 #chat-konsole { left: calc(var(--ea) + var(--gap)); right: auto; width: var(--lade); top: var(--gap); bottom: calc(var(--fuss-h) + var(--gap) + var(--kb, 0px));
        height: auto !important; border: 1px solid var(--term-border); border-radius: 2px; box-shadow: 0 15px 50px rgba(0,0,0,.8); }
    html.z3 #chat-konsole.voll { left: var(--ea); width: calc(100vw - var(--ea)); top: 0; bottom: var(--fuss-h); }

    /* MEHR: Lochstreifen */
    html.z3 #window-mehr .window-content { padding: 18px; gap: 10px; }
    html.z3 .streifen { box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 14px 0 10px; cursor: pointer; text-align: left;
        background: var(--papier); color: var(--tinte); border: 0; border-radius: 1px; box-shadow: 0 2px 0 #000; font-family: var(--font-mono); font-weight: bold; letter-spacing: 2px; font-size: 14px; }
    html.z3 .streifen .loch { width: 44px; height: 30px; flex-shrink: 0; background-image: radial-gradient(circle, #0a0a09 3px, transparent 3.5px); background-size: 11px 10px; opacity: .85; }
    html.z3 .streifen .zusatz { margin-left: auto; font-weight: normal; letter-spacing: 0; font-size: 12px; color: var(--tinte); }
    html.z3 .streifen:hover { background: #fff8e0; }

    /* ---- C: Buehne bis zum rechten Rand (M8) ---- */
    html.z3 #desktop-bg { left: var(--buehne-l); width: auto; right: 0; height: auto; bottom: var(--fuss-h); background-position: right center; }
    html.z3 #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert) {
        left: var(--buehne-l) !important; right: 0 !important; top: 0 !important; bottom: var(--fuss-h) !important; width: auto !important; max-width: none !important;
        min-height: 0; border: 0; border-left: 1px solid #000; border-radius: 0; z-index: 9 !important;
    }
    html.z3 #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert) .bs-buehne { flex: 1 1 auto; height: auto; min-height: 0; }
    html.z3 #bildspur-fenster.bs-minimiert:not(.bs-vollbild):not(.bs-maximiert) { display: none; }
    html.z3 #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert) .bs-header-controls .bs-close { display: none; }

    /* Z4 Schritt 1 (Z3q-1, UX e3): Buehnen-Vollbild endet ueber dem Eingabeband; Band (Eingabe, Senden, Mikro) bleibt stehen */
    html.z3 #bildspur-fenster.bs-vollbild { inset: 0 0 var(--fuss-h) 0 !important; height: auto !important; }
    html.z3 #bildspur-fenster.bs-vollbild .bs-buehne { width: min(100%, calc((var(--app-h, 100dvh) - var(--fuss-h) - 34px) * 16 / 9)); max-height: calc(var(--app-h, 100dvh) - var(--fuss-h) - 34px); }
    html.z3.bs-seite-vollbild #eingabe-bereich { display: flex; z-index: 2010; }
    html.z3.bs-seite-vollbild #chat-konsole.offen { display: flex; z-index: 2005; }
    /* Z4 Schritt 2 (Z3q-2): im Buehnen-Vollbild keine Einschubleiste (kein Stummel ueber dem Titel) */
    html.z3.bs-seite-vollbild #einschub, html.z3.bs-seite-vollbild #sprachklappe { display: none !important; }
}
@media (max-width: 768px) {
    /* MEHR gibt es nur am Desktop; am Handy bleibt das Dock */
    #window-mehr { display: none !important; }
    /* Handy: Einstiegssatz in der freien Eber-Flaeche zwischen den Leisten und dem Dock (Entscheid 14.10.); die Rueselscheibe bleibt frei (R14) */
    #eber-einstieg { position: fixed; left: 4vw; right: 4vw; bottom: calc(var(--fuss-h) + 64px); z-index: 5; }
    @media (max-height: 760px) { #eber-einstieg { bottom: auto; top: 190px; } }
    html.app-niedrig #eber-einstieg { bottom: auto; top: 190px; }
    html.eber-frei #eber-einstieg { display: block; }
    #eber-einstieg .bs-einstieg { padding: 10px 14px; border: 1px solid var(--term-border); border-left: 4px solid #ffffff; background: rgba(0, 0, 0, 0.72); }
    #eber-einstieg .bs-einstieg-satz { font-size: 18px; line-height: 1.35; }
    #eber-einstieg .bs-einstieg-fragen { display: none; }
    /* Z4 Schritt 3 (Z3q-3, R14): Erstbesuch-LIESMICH nur im Streifen ueber dem Eber (Bild contain, Seitenverhaeltnis 1984:2144 -> Oberkante 50vh - 54vw), innen scrollbar */
    html.liesmich-kompakt #window-liesmich:not(.minimized):not(.fullscreen) { max-height: max(140px, calc(var(--app-h, 100vh) / 2 - 54vw - 14px)); }
    html.liesmich-kompakt #window-liesmich:not(.minimized):not(.fullscreen) .window-content.text-content { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 12px; }
    /* JOB-20261022-002 Nachtrag (X-App als halbes Blatt, sichtbare Hoehe <= 840, html.app-niedrig): der Streifen ueber dem Eber ist dort zu flach (140 px, Startknoepfe abgeschnitten).
       LIESMICH reicht bis knapp ueber die Rueselscheibe (Oberkante app-h/2 + 22,15vw bei Bild contain, R14) und scrollt innen;
       public_log liegt eingeklappt direkt darunter statt darauf, der Einstiegssatz ruht, solange das kompakte LIESMICH offen ist (kein Platz) */
    html.app-niedrig.liesmich-kompakt { --lm-h: max(140px, calc(var(--app-h, 100vh) / 2 + 22vw - 66px)); }
    html.app-niedrig.liesmich-kompakt #window-liesmich:not(.minimized):not(.fullscreen) { height: var(--lm-h); max-height: var(--lm-h); }
    html.app-niedrig.liesmich-kompakt #window-guestbook.minimized { top: calc(10px + var(--lm-h) + 6px); }
    html.app-niedrig.liesmich-kompakt #eber-einstieg { display: none; }
    /* JOB-20261022-002 N2 (Rico 22.10.: "Da muss alles zu nur der keiler."): im X-App-Browser kein Text ueber dem Keiler, auch keine eingeklappten Leisten oben
       (LIESMICH, Shop, public_log); offen wird nur ueber Dock (INF -> LIESMICH) und Chatleiste. Gilt nur mit html.x-app (UA-Marke, index.html) */
    html.x-app #eber-einstieg { display: none !important; }
    html.x-app .script-window[data-anchor="top"].minimized { display: none !important; }
    /* Z6 Schritt 1 (R14, Entscheid rico-main 20.10.): SND-Fenster im Streifen zwischen den oberen Leisten und der Rueselscheibe
       (Lage aus dem Eberbild, einschub.js r14 -> --r14-oben/--r14-h); Kapitelliste scrollt, Knoepfe bleiben ganz, Einstiegssatz darunter frei */
    html.r14-streifen #window-audio:not(.minimized):not(.fullscreen) { top: var(--r14-oben) !important; bottom: auto !important; height: var(--r14-h); max-height: var(--r14-h); }
    html.r14-streifen #window-audio:not(.minimized):not(.fullscreen) .window-content { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 10px 14px !important; }
    html.r14-streifen #window-audio:not(.fullscreen) #baum-fenster { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-bottom: 8px; }
    html.r14-streifen #window-audio:not(.fullscreen) #baum { flex: 1 1 auto; min-height: 52px; max-height: none; }
    html.r14-streifen #window-audio:not(.fullscreen) .audio-geladen { flex: 0 0 auto; margin-bottom: 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.r14-streifen #window-audio:not(.fullscreen) .audio-knoepfe { flex: 0 0 auto; margin-bottom: 6px !important; gap: 8px !important; }
    html.r14-streifen #window-audio:not(.fullscreen) .audio-knoepfe .action-btn { min-height: 44px; padding: 8px 14px !important; }
    html.r14-streifen #window-audio:not(.fullscreen) #audio-time { margin-left: auto !important; white-space: nowrap; }
    html.r14-streifen #window-audio:not(.fullscreen) #audio-progress { flex: 0 0 auto; margin-bottom: 8px !important; }
    /* Z6 Schritt 2 (R14): laufende Bildspur ebenfalls im Streifen ueber der Scheibe; Buehne 16:9 so gross, wie der Streifen erlaubt (Rest = Titel, Kopf, Transport, Regler) */
    html.r14-streifen #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert):not(.bs-minimiert) { top: var(--r14-oben) !important; bottom: auto !important; max-height: var(--r14-h); }
    html.r14-streifen #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert):not(.bs-minimiert) .bs-buehne { width: auto; max-width: 100%; align-self: center; height: min(calc((96vw - 2px) * 9 / 16), calc(var(--r14-h) - var(--r14-bs-rest, 180px))); }
    /* JOB-20261030-003 Teil C (Rico msg 1565762789539184641): hochkant mit offener Enzyklopedia waehrend der Bildspur oben Bild, unten Chat
       (einschub.js handySplit -> html.enz-split, --split-oben/--split-buehne). Ab oberem Rand des sichtbaren Ausschnitts (--vvt, iOS schiebt beim Tippen),
       Buehne 16:9 so gross wie die obere Haelfte erlaubt; Chat fuellt bis zum Eingabeband, keine Ueberlappung */
    html.enz-split #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert):not(.bs-minimiert) {
        top: var(--vvt, 0px) !important; bottom: auto !important; left: 0 !important; right: auto !important;
        width: 100vw !important; max-width: 100vw !important; height: var(--split-oben) !important; max-height: var(--split-oben) !important;
        border: 0; border-bottom: 1px solid var(--term-border); border-radius: 0; z-index: 148 !important; }
    html.enz-split #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert):not(.bs-minimiert) .bs-buehne { flex: 0 0 auto; width: auto; max-width: 100%; align-self: center; height: var(--split-buehne); }
    html.enz-split.enz-tastatur #bildspur-fenster:not(.bs-vollbild):not(.bs-maximiert):not(.bs-minimiert) > :is(.bs-header, .bs-kopf, .bs-chat-regler) { display: none; }
    /* Dock (SYS/SND/LNG/INF) liegt hinter dem halbdurchsichtigen Chat: im Split ruht er, der Player bleibt ueber den Transport der Bildspur bedienbar */
    html.enz-split .script-window[data-anchor="bottom"].minimized { visibility: hidden; }
    html.enz-split #chat-konsole.offen { top: calc(var(--vvt, 0px) + var(--split-oben)); bottom: calc(var(--fuss-h) + var(--kb, 0px)); height: auto !important; box-shadow: none; animation: none; }
}