/* ================= HANDY-RAHMEN (Alpha 4.00, Stufe 1) =================

   Auftrag AUFTRAG-JARVIS-HANDY-WEB.md, Stufe 1. Gilt nur bis 680 px - das
   ist seit Prompt 13 die Grenze der Handy-Ansicht (layout.css), David hat
   am 24.09.2026 entschieden, sie zu behalten. Am Desktop aendert diese Datei
   nichts: alles Sichtbare steht im @media-Block, ausserhalb nur das
   Verstecken der neuen Elemente.

   Regeln (Material 3, Hoober 2013 - siehe Auftrag):
   - untere Leiste mit fuenf Zielen, Symbol und Wort, 64 px hoch;
   - Kopfzeile eine Zeile: Titel links, ein Statuswert rechts;
   - Fliesstext mindestens 16 px (die Regeln mit kleinerer Schrift hebt
     handy_rahmen.js beim Laden an), keine Sperrschrift, keine Versalien;
   - Bedienelemente mindestens 48 x 48 px, 8 px Abstand.
   Ausnahmen, bewusst: Links mitten im Text (WCAG 2.2, 2.5.8 "Inline"),
   Beschriftung der Leiste (12 px), Plaketten, Nebenzeile im Blatt "Mehr"
   und der Statuswert in der Kopfzeile (je 14 px) - keins davon ist
   Fliesstext.
   Farben: nur die Variablen des gewaehlten Designs.
*/

.kopfHandy{display:none}
.mehrBlatt[hidden]{display:none}
/* Stufe 2 (09.11.2026): Gespraech am Handy (js/handy_gespraech.js) - am Desktop nie sichtbar */
#hgBuehne,#hgZurueck,#hgStopp,#hgKnoepfe{display:none}

@media (max-width:680px){

  /* ---- Grundschrift: keine Sperrschrift, keine Versalien ---- */
  body{line-height:1.45}
  body *{letter-spacing:normal!important;text-transform:none!important}
  /* Schriftgroessen aus style="…" (fuenf Eingabefelder, eine Marke) */
  body [style*="font-size"]{font-size:16px!important}

  /* ---- Kopfzeile: eine Zeile, kein HUD ---- */
  body .masthead{flex-wrap:nowrap;align-items:center;min-height:56px;height:auto;gap:12px;
    padding:env(safe-area-inset-top,0px) 16px 0}
  body .masthead>.mark,body .masthead>.mhead-r,body .masthead>#kopfKlima,body .masthead>.praxiskopf{display:none!important}
  .kopfHandy{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:56px}
  #kopfTitel{font-size:20px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-family:inherit}
  .kopfLuecke{flex:1}
  body .kopfStatus{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--dim);white-space:nowrap}
  .kopfStatus::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim)}
  .kopfStatus.ok::before{background:var(--pos)}
  .kopfStatus.warn{color:var(--warn)}
  .kopfStatus.warn::before{background:var(--warn)}
  /* HUD-Zierrat: Laufbaender, Ecken der Karten, Raster, Zeilenlinien und
     Vignette (am Desktop weiter da). Die Vignette lag mit 75 % Schwarz am Rand
     ueber Kopfzeile und Leiste - der weisse Titel wirkte grau. */
  .tickerbar,.newsbar{display:none!important}
  .card::before,.card::after{display:none!important}
  .fx{display:none!important}

  /* ---- untere Leiste: fuenf Ziele ---- */
  body .app{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  body .bottomnav{min-height:64px;padding:0 4px env(safe-area-inset-bottom,0px);align-items:stretch;overflow:visible}
  body .bottomnav .bnbtn{position:relative;flex:1 1 0;min-width:48px;min-height:64px;margin:0;padding:6px 2px 8px;
    border:0;border-radius:0;background:none;box-shadow:none;color:var(--dim);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
    font-family:inherit;font-size:12px;font-weight:500;line-height:16px}
  body .bottomnav .bnbtn .bnSym{display:flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:15px}
  body .bottomnav .bnbtn svg{width:24px;height:24px}
  body .bottomnav .bnbtn .bnText{font-size:12px;white-space:nowrap}
  body .bottomnav .bnbtn.on{color:var(--text);background:none}
  body .bottomnav .bnbtn.on .bnSym{background:rgba(var(--akzent-rgb),.22);color:var(--akzent-hell)}
  body .bottomnav .bnZahl{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;
    border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
  /* Mikrofon in der Mitte: rund, 56 px, leicht erhoeht */
  body .bottomnav .bnMikro .bnRund{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
    border-radius:50%;margin-top:-24px;background:var(--akzent);color:var(--auf-akzent);box-shadow:0 4px 14px rgba(0,0,0,.35)}
  body .bottomnav .bnMikro .bnRund .bnSym{width:auto;height:auto;background:none!important;color:inherit!important}
  body .bottomnav .bnMikro svg{width:26px;height:26px}
  body .bottomnav .bnMikro.on .bnRund{outline:3px solid rgba(var(--akzent-rgb),.35);outline-offset:2px}

  /* ---- Blatt "Mehr" (von unten) ---- */
  .mehrBlatt{position:fixed;inset:0;z-index:80}
  .mehrSchleier{position:absolute;inset:0;background:rgba(0,0,0,.5)}
  .mehrKasten{position:absolute;left:0;right:0;bottom:0;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;
    background:var(--grund);color:var(--text);border-top:1px solid var(--line-hot);border-radius:16px 16px 0 0;
    padding:0 12px calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .2s ease-out}
  .mehrBlatt.auf .mehrKasten{transform:none}
  .mehrGriff{width:32px;height:4px;border-radius:2px;background:var(--dim);opacity:.5;margin:10px auto 4px}
  .mehrKopf{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}
  body #mehrTitel{font-size:20px;font-weight:600}
  body .mehrZu{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;
    background:none;border:0;color:var(--dim)}
  .mehrZu svg{width:24px;height:24px}
  body .mehrZeile{display:flex;align-items:center;gap:16px;width:100%;min-height:56px;margin:0 0 8px;padding:8px 12px;
    background:rgba(var(--akzent-rgb),.07);border:1px solid var(--line);border-radius:12px;color:var(--text);
    text-align:left;font:inherit;cursor:pointer}
  .mehrZeile .bnSym{display:flex;color:var(--akzent-hell)}
  .mehrZeile svg{width:24px;height:24px}
  .mehrText{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  body .mehrText b{font-size:17px;font-weight:600}
  body .mehrHinweis{font-size:14px;color:var(--dim)}
  body .mehrZahl{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--red);color:#fff;
    font-size:14px;font-weight:700;line-height:24px;text-align:center}
  .mehrZeile .mehrPfeil{color:var(--dim)}

  /* Sprungziele aus "Mehr": nicht unter der Kopfzeile verschwinden */
  .card,.gruppe{scroll-margin-top:64px}

  /* ---- Ueberschriften der Karten ---- */
  body .card .ch{font-size:18px;font-weight:600;min-height:48px;align-items:center}
  body .gruppe{font-size:18px;font-weight:600}

  /* ---- Bedienelemente mindestens 48 x 48 px, 8 px Abstand ---- */
  /* !important: manche Knopfreihe setzt Hoehe oder Mindesthoehe mit hoeherer
     Spezifitaet (gemessen: 35-43 px trotz dieser Regel ohne !important) */
  body :is(button,.sbtn,.ib,select,summary,[role=button]){min-height:48px!important}
  body :is(button,.sbtn,.ib,select,[role=button]){min-width:48px!important}
  body :is(input[type=text],input[type=search],input[type=password],input[type=email],input[type=url],input[type=number],
    input[type=date],input[type=time],input[type=datetime-local],input[type=tel],input:not([type]),textarea){min-height:48px!important;font-size:16px}
  body input[type=range]{min-height:48px!important}
  /* Eingabezeile im Gespraech: mit 48-px-Knoepfen blieben fuer das Textfeld
     im Design "Praxis" 17 px - das Feld bekommt eine eigene Zeile */
  body .inputrow{flex-wrap:wrap;height:auto;padding:8px}
  body .inputrow #field{flex:1 1 100%;min-width:0}
  body .sbtn{padding:10px 14px}
  /* Haken: 48 x 48 Tippflaeche, sichtbar ein 24-px-Kaestchen (Hintergrund,
     damit es auch ohne ::before in jedem Browser zu sehen ist) */
  body input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:0 0 48px;width:48px;height:48px;
    min-width:48px;margin:0;padding:0;border:0;border-radius:8px;cursor:pointer;
    background:linear-gradient(var(--grund),var(--grund)) center/20px 20px no-repeat,
               linear-gradient(var(--dim),var(--dim)) center/24px 24px no-repeat}
  body input[type=checkbox]:checked{background:linear-gradient(var(--akzent),var(--akzent)) center/24px 24px no-repeat}
  body input[type=checkbox]:checked::after{content:"";position:absolute;left:20px;top:14px;width:6px;height:13px;
    border:solid var(--auf-akzent);border-width:0 3px 3px 0;transform:rotate(45deg)}
  body input[type=checkbox]:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:-4px}
  body input[type=radio]{-webkit-appearance:none;appearance:none;flex:0 0 48px;width:48px;height:48px;min-width:48px;margin:0;
    border:0;border-radius:50%;cursor:pointer;
    background:radial-gradient(circle,var(--grund) 9px,var(--dim) 10px,var(--dim) 12px,transparent 12.5px)}
  body input[type=radio]:checked{background:radial-gradient(circle,var(--akzent) 6px,var(--grund) 7px,var(--grund) 9px,var(--akzent) 10px,var(--akzent) 12px,transparent 12.5px)}
  /* Knopfreihen: 8 px Abstand, umbrechen statt quetschen */
  body :is(.acts,.heuteAkt .acts,.inputrow,.ctl,.archivSuche,.aktenLeiste,.leiste) {gap:8px}
  body .acts{display:flex;flex-wrap:wrap}
  /* Handy verbinden: Name, Adresse, Feld fuer unterwegs und Knopf je eine
     Zeile - nebeneinander blieben "Name, z. B. Pixe" und "Andere Adresse f" */
  body .handyNeu>*{flex:1 1 100%}
  /* Knopfreihen ohne Umbruch ragten mit 48-px-Knoepfen seitlich heraus
     (Regression 4.00: "Archivieren" in der Aufnahme bis 436 px, "Alle Lichter
     aus" in Smart Home bis 455 px bei 390 px Breite). Reihen mit Knoepfen
     brechen am Handy um; Spalten (flex-direction:column) nicht. Per JS
     gesetzte Stile stehen als "display: flex" (mit Leerzeichen) im Attribut. */
  body :is([style*="display:flex"],[style*="display: flex"]):not([style*="column"]):has(>button,>.sbtn){flex-wrap:wrap}
  body :is(.heimSammelLeiste,.heimBlockKopf){flex-wrap:wrap}
  /* 4.01: Themenspeicher, Dubletten-Gruppen, Zuordnung in den Nachrichten */
  body :is(.themaZeile,.dublAkte,.dublKopf,.nachricht .nZuordnen){flex-wrap:wrap}
  /* 4.02: Nachricht lesen am Handy fast bildschirmfuellend */
  .mailLeser{left:8px!important;right:8px;top:8px!important;width:auto;max-height:calc(100vh - 16px - 64px - env(safe-area-inset-bottom))}

  /* ==== Stufe 2 (09.11.2026): Gespraech am Handy (js/handy_gespraech.js) ====
     David 21:13 "Darstellung und wie man mit dem Handy arbeitet ... nicht Ideal", 22:04 "ok" auf die
     Vorschlaege (Skizzen A und B). body.hg = Reiter D.A.V.I.N.A. als Gespraech: Buehne oben, Gespraech,
     Eingabe. body.hg-karten = die Karten der Seite (ueber "Mehr"). */

  /* Tastatur offen (jede Seite): die Leiste weicht, sonst saesse sie ueber der Tastatur */
  body.tastatur .bottomnav{display:none}

  /* Gespraechsansicht: nur Buehne, Gespraech und Eingabe */
  body.hg .col.left,body.hg .col.right,body.hg #jarvis>.band{display:none!important}
  /* .center ist ein Container (container-type) - der waere sonst der Bezugsrahmen fuer position:fixed */
  body.hg .center{container-type:normal}
  body.hg #jarvis{position:fixed;left:0;right:0;top:var(--hgOben,57px);bottom:var(--hgUnten,64px);z-index:5;
    display:flex;flex-direction:column;gap:8px;min-height:0;padding:8px 12px 10px}

  /* Buehne: eigene dunkle Flaeche, in jedem Design gleich (die Figur leuchtet auf Dunkel) */
  body.hg #hgBuehne{display:block;position:relative;flex:0 0 auto;height:clamp(140px,34%,330px);border-radius:16px;overflow:hidden;
    background:radial-gradient(ellipse 80% 90% at 50% 38%,#2a1d4e 0%,#120d24 55%,#07060f 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  body.hg.hg-spricht #hgBuehne{height:clamp(180px,56%,560px)}
  body.hg.tastatur #hgBuehne{height:clamp(84px,22%,180px)}
  body.hg:not(.hg-figur) #hgBuehne{display:none}
  .hgFigur{position:absolute;inset:0}
  #hgFigur>#humanoidBuehne{position:absolute;inset:0;z-index:auto}
  /* die Leinwaende des Hintergrunds sind fuer das ganze Fenster gerechnet: zuschneiden statt verzerren */
  #hgFigur .hmKArt>canvas{object-fit:cover}
  body.hg #hgUntertitel{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;max-width:560px;margin:0 auto;
    padding:6px 12px;border-radius:12px;background:rgba(0,0,0,.6);color:#fff;
    font:500 16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  body.hg #hgUntertitel[hidden]{display:none}
  body.hg #hgVoll{position:absolute;top:6px;right:6px;z-index:3;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;padding:0;border:0;border-radius:24px;background:rgba(255,255,255,.12);color:#fff}
  #hgVoll svg{width:22px;height:22px}

  /* Gespraech: Blasen in normaler Schrift, ohne Namenszeile (die Seite zeigt, wer spricht) */
  /* overflow-y: die Telefon-Regel in layout.css laesst #chat sonst ueberlaufen (die Seite rollte dort) */
  body.hg #chat{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:10px;padding:2px 2px 4px;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  body.hg #chat .msg{font-family:inherit;font-size:16px;line-height:1.45;max-width:88%;padding:8px 12px;border:0;border-radius:18px;
    overflow-wrap:anywhere}
  body.hg #chat .msg .who{display:none}
  body.hg #chat .msg.me{align-self:flex-end;background:rgba(var(--akzent-rgb),.22);color:var(--text);border-bottom-right-radius:6px}
  body.hg #chat .msg.ai{align-self:flex-start;background:rgba(var(--karte-rgb),.92);color:var(--text-ai);border:1px solid var(--line);
    border-bottom-left-radius:6px}
  body.hg #chat .msg.sys{align-self:center;max-width:96%;padding:2px 8px;background:none;color:var(--amber);text-align:center}

  /* Eingabe: Feld, (Anhalten), MIC, "..." - die uebrigen Schalter in einer zweiten Reihe auf Wunsch */
  body.hg #jarvis>.inputrow{flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:8px;height:auto;min-height:60px;
    padding:5px 5px 5px 16px;border-radius:30px;background:rgba(var(--karte-rgb),.92)}
  body.hg #jarvis>.inputrow #field{order:1;flex:1 1 0;min-width:0;border:0;background:none;outline:none;padding:0;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  body.hg #jarvis>.inputrow .pre{display:none}
  body.hg #jarvis>.inputrow .ib{border-radius:24px}
  body.hg:not(.hg-knoepfe) #jarvis>.inputrow :is(#recBtn,#ttsBtn,#netBtn,#sndBtn,#hilfeBtn){display:none}
  body.hg.hg-ton #hgStopp{display:grid;order:2;background:var(--red);border-color:var(--red);color:#fff}
  body.hg #micBtn{order:3}
  body.hg #hgKnoepfe{display:grid;order:4}
  #hgStopp svg,#hgKnoepfe svg{width:22px;height:22px}
  body.hg.hg-knoepfe #jarvis>.inputrow{flex-wrap:wrap;border-radius:22px}
  body.hg.hg-knoepfe #jarvis>.inputrow::after{content:"";order:5;flex-basis:100%;height:0}
  body.hg.hg-knoepfe #jarvis>.inputrow :is(#recBtn,#ttsBtn,#netBtn,#sndBtn,#hilfeBtn){order:6;flex:1 1 0}

  /* Kartenansicht: die Karten der Seite, oben der Weg zurueck ins Gespraech */
  body.hg-karten #jarvis>:is(#hgBuehne,#chat,#chatNeu,.inputrow,#praxisStart){display:none!important}
  /* die Figur haelt in der Kartenansicht an (humanoidImReiter) - bis dahin nicht hinter den Karten zeigen */
  body.hg-karten #humanoidBuehne{visibility:hidden}
  body.hg-karten #hgZurueck{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:8px 14px;font-size:16px}
  #hgZurueck svg{width:22px;height:22px}
}

/* ==== 10.11.2026: neue Handy-Bedienung "Strom" (js/handy_strom.js) ====
   David 01:23 "Verwende A mit Clean als Grundstil ... Nutze Glassmorphismus-Elemente". Die Schicht #hs traegt ein
   Shadow DOM mit eigenem Stylesheet (css/handy_strom.css); hier steht nur, wo sie liegt. Sie faengt selbst keine
   Beruehrung ab (pointer-events:none) - nur ihre Seiten, die untere Leiste und ihre Blaetter tun das. */
#hs{display:none}
/* Hinweise, die nur in der neuen Bedienung gelten (Einstellungen: "Design") - sichtbar macht sie css/handy_seiten.css */
.hsNur{display:none}
/* 10.11.2026: Lupe und "Kategorien" der Kalender-Seite (js/handy_kalender.js) - sichtbar nur in der neuen Bedienung (css/handy_seiten.css) */
#hkSucheKnopf,#hkKatKnopf{display:none}
@media (max-width:680px){
  body.hs-an #hs{display:block;position:fixed;inset:0;z-index:44;pointer-events:none}
  body.hs-an #hs:not(.fertig){visibility:hidden}
  body.hs-an .bottomnav{display:none}
  body.tastatur #hs{display:none}
}