/* Werte D „Studio-Wabe“ (Scheibe 0, bauplan 3.1). Quelle: design/system/tokens.css auf dem Branch design,
   Kontraste in tokens.md. Seit Scheibe 7 ohne Brücke: alle Regeln lesen die neuen Namen. --grund bleibt ein
   Hex-Wert (updateThemeMeta liest es für theme-color), darum ohne Tönung per CSS. */
/* 1. Feste Werte: Skalen, Radien, Höhen, Icons, Ebenen, Bewegung, Bühne, Marke */
:root{
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --zh-eng: 1;
  --zh-knapp: 1.2;
  --zh-text: 1.4;
  --zh-weit: 1.5;
  --gewicht-mittel: 500;
  --gewicht-halb: 600;
  --gewicht-fett: 700;
  --lauf-titel: -.02em;
  --lauf-knapp: -.01em;
  --lauf-plakette: .02em;
  --lauf-versal: .06em;
  --lauf-code: .22em;
  --abstand-1: 2px;
  --abstand-2: 4px;
  --abstand-3: 6px;
  --abstand-4: 8px;
  --abstand-5: 10px;
  --abstand-6: 12px;
  --abstand-7: 14px;
  --abstand-8: 16px;
  --abstand-10: 20px;
  --abstand-12: 24px;
  --abstand-14: 28px;
  --abstand-16: 32px;
  --abstand-20: 40px;
  --seite-handy: 16px;
  --seite-spalte: 16px;
  --seite-mitte: 24px;
  --r-strich: 2px;
  --r-xxs: 4px;
  --r-xs: 6px;
  --r-s: 8px;
  --r-m: 10px;
  --r-l: 12px;
  --r-blatt: 14px;
  --r-voll: 999px;
  --hoehe-mini: 24px;
  --hoehe-klein: 28px;
  --hoehe-dicht: 32px;
  --hoehe-desktop: 36px;
  --hoehe-feld-desktop: 40px;
  --hoehe-tipp: 44px;
  --hoehe-gross: 48px;
  --hoehe-kopf: 56px;
  --hoehe-kachel: 60px;
  --hoehe-codefeld: 64px;
  --ic-12: 12px;
  --ic-14: 14px;
  --ic-16: 16px;
  --ic-18: 18px;
  --ic-20: 20px;
  --ic-24: 24px;
  --ic-28: 28px;
  --ic-marke: 10px;
  --strich: 1.75;
  --hx-strich: 1.5px;
  --av-kante-anteil: 55%;
  --rand-stark: 2px;
  --rand-zitat: 3px;
  --fokus-breite: 2px;
  --fokus-abstand: 2px;
  --ring-saum: 0 0 0 calc(var(--fokus-abstand) + var(--fokus-breite) + 2px) var(--pille);
  --ring-saum-innen: inset 0 0 0 calc(var(--fokus-breite) + 2px) var(--pille);
  --breite-rail: 72px;
  --breite-liste: 320px;
  --breite-werkspalte: 360px;
  --breite-frequenzen: 148px;
  --breite-dialog: 440px;
  --breite-blase: 480px;
  --breite-menue: 264px;
  --ebene-unter: -1;
  --ebene-auf: 1;
  --ebene-klebt: 2;
  --ebene-schwebt: 10;
  --ebene-menue: 30;
  --ebene-popover: 60;
  --ebene-ansicht: 70;
  --ebene-anruf: 80;
  --ebene-dialog: 90;
  --ebene-tipp: 200;
  --ebene-meldung: 1000;
  --dauer-druck: 100ms;
  --dauer: 150ms;
  --dauer-auf: 250ms;
  --dauer-auf-weg: 150ms;
  --dauer-blatt: 300ms;
  --dauer-blatt-weg: 250ms;
  --dauer-kreis: 800ms;
  --kurve: cubic-bezier(.2, 0, 0, 1);
  --kurve-hinein: cubic-bezier(.05, .7, .1, 1);
  --kurve-hinaus: cubic-bezier(.3, 0, .8, .15);
  --bewegung: 1;
  --buehne: #0e0f11;
  --buehne-2: #1c1e22;
  --buehne-linie: #33373d;
  --buehne-text: #f2f3f5;
  --buehne-weiss: #ffffff;
  --buehne-glas: rgba(255, 255, 255, .16);
  --pille: rgba(6, 7, 9, .72);
  --glas-dunkel: rgba(0, 0, 0, .52);
  --blur-glas: 8px;
  --schatten-bild: 0 1px 3px rgba(0, 0, 0, .3);
  --schatten-buehne: 0 8px 24px rgba(0, 0, 0, .5);
  --avatar-buehne: 72px;
  --marke: #F2A93B;
  --auf-marke: #17130c;
  --marke-text-hell: #835500;
}
/* 2. Eingänge der Anpassung (Standard; Akzent Honig, mit Farbschema inline aus paletteFrom) */
:root{
  --text-faktor: 1;
  --text-basis: 1rem;
  --dichte: 1;
  --rand: 1px;
  --toen: 0;
  --schrift: system-ui, -apple-system, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  --akzent: #F2A93B;
  --akzent-text-dunkel: #F2A93B;
  --akzent-text-hell: #835500;
  --auf-akzent: #17130c;
  --akzent-gegen: #ffffff;
  --leise-anteil-dunkel: 14;
  --leise-anteil-hell: 22;
}
/* 3. Thema dunkel (Standard, auch .buehne); hell steht weiter unten an :root.light */
:root, .buehne{
  color-scheme: dark; /* Scheibe 3b-2: native Felder, Auswahllisten und Bildlaufleisten dunkel, auch auf der Bühne */
  --hell: 0;
  --grund-n: #0e0f11; --grund-l: .1682; --grund-k: .008;
  --f1-n: #15171a; --f1-l: .2038; --f1-k: .010;
  --f2-n: #1c1e22; --f2-l: .2346; --f2-k: .011;
  --f3-n: #24272c; --f3-l: .2718; --f3-k: .012;
  --schweb-n: #1e2126; --schweb-l: .2468; --schweb-k: .012;
  --linie-n: #272a2f; --linie-l: .2840; --linie-k: .012;
  --linie-2-n: #343840; --linie-2-l: .3400; --linie-2-k: .015;
  --feldrand-n: #737a85; --feldrand-l: .5773; --feldrand-k: .018;
  --text: #f2f3f5;
  --zweit: #9ca3ad;
  --rot: #ff6a5f;
  --auf-rot: #1a0806;
  --rot-leise: rgba(255, 106, 95, .14);
  --gruen: #3ddc84;
  --auf-gruen: #0b1a10;
  --gruen-leise: rgba(61, 220, 132, .12);
  --gelb: #e6c84a;
  --auf-gelb: #1a1500;
  --gelb-leise: rgba(230, 200, 74, .14);
  --scrim: rgba(4, 5, 7, .62);
  --schatten-1: 0 6px 18px rgba(0, 0, 0, .5);
  --schatten-2: 0 12px 32px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;
  --schatten-blatt: 0 -12px 32px rgba(0, 0, 0, .35);
  --av-blau-bg: #22364a; --av-blau-fg: #c6e2fb;
  --av-gruen-bg: #1f3a2c; --av-gruen-fg: #bdf1d0;
  --av-lila-bg: #33294a; --av-lila-fg: #dccbff;
  --av-rot-bg: #46282b; --av-rot-fg: #ffcdc9;
  --av-teal-bg: #1c383b; --av-teal-fg: #b6ecea;
  --av-sand-bg: #3d3324; --av-sand-fg: #f0dfc2;
  --av-grau-bg: #2a2e35; --av-grau-fg: #e2e6eb;
  --fq-chat: #aab2bd;
  --fq-arbeit: #7fb4f0;
  --fq-reise: #63cf9c;
  --fq-kochen: #ff9c86;
  --fq-privat: #bfa3ff;
}
/* 4. Gerät: Handy, ab 760 px Desktop, mit grobem Zeiger alles Tippbare 44 px */
:root{
  --text-basis: 1rem;
  --hoehe-knopf: 44px;
  --hoehe-ik: 44px;
  --hoehe-feld: 44px;
  --hoehe-formular: 48px;
  --hoehe-composer: 44px;
  --hoehe-eintrag: 44px;
  --hoehe-segment: 44px;
  --hoehe-rk: 48px;
  --ic-knopf: 24px;
  --treffer-min: 44px;
  --polster-zeile: 16px;
}
@media (min-width:760px){
  :root{
    --text-basis: .875rem;
    --hoehe-knopf: 36px;
    --hoehe-ik: 36px;
    --hoehe-feld: 36px;
    --hoehe-formular: 44px;
    --hoehe-composer: 40px;
    --hoehe-eintrag: 36px;
    --hoehe-segment: 36px;
    --hoehe-rk: 52px;
    --ic-knopf: 20px;
    --treffer-min: 24px;
    --polster-zeile: 14px;
  }
}
@media (min-width:760px) and (pointer:coarse){
  :root{
    --hoehe-knopf: 44px;
    --hoehe-ik: 44px;
    --hoehe-feld: 44px;
    --hoehe-eintrag: 44px;
    --hoehe-segment: 44px;
    --ic-knopf: 24px;
    --treffer-min: 44px;
  }
}
/* 5. Abgeleitete Werte (Kontext-Gruppe). Akzent-Text und Marke-Text ohne Mischung je Thema
   (Safari vor 16.2 verwirft color-mix mit calc, der Fokusring fiele weg). */
:root, .buehne{
  --tp: calc(var(--text-faktor) * 1rem / 16);
  --text-groesse: calc(var(--text-basis) * var(--text-faktor));
  --grad-1: calc(12 * var(--tp)); --grad-1-zh: calc(16 * var(--tp)); --grad-1-zh-eng: calc(14 * var(--tp));
  --grad-2: calc(13 * var(--tp)); --grad-2-zh: calc(18 * var(--tp)); --grad-2-zh-eng: calc(16 * var(--tp));
  --grad-3: calc(14 * var(--tp)); --grad-3-zh: calc(18 * var(--tp)); --grad-3-zh-text: calc(20 * var(--tp));
  --grad-4: calc(15 * var(--tp)); --grad-4-zh: calc(20 * var(--tp)); --grad-4-zh-eng: calc(18 * var(--tp));
  --grad-5: calc(16 * var(--tp)); --grad-5-zh: calc(20 * var(--tp)); --grad-5-zh-text: calc(22 * var(--tp));
  --grad-6: calc(17 * var(--tp)); --grad-6-zh: calc(22 * var(--tp)); --grad-6-zh-eng: calc(20 * var(--tp));
  --grad-7: calc(20 * var(--tp)); --grad-7-zh: calc(24 * var(--tp));
  --grad-8: calc(24 * var(--tp)); --grad-8-zh: calc(28 * var(--tp));
  --grad-9: calc(28 * var(--tp)); --grad-9-zh: calc(32 * var(--tp));
  --grad-10: calc(34 * var(--tp)); --grad-10-zh: calc(38 * var(--tp));
  --avatar-20: calc(20 * var(--tp));
  --avatar-28: calc(28 * var(--tp));
  --avatar-32: calc(32 * var(--tp));
  --avatar-36: calc(36 * var(--tp));
  --avatar-40: calc(40 * var(--tp));
  --avatar-72: calc(72 * var(--tp));
  --zeile-dicht: calc(32px * var(--dichte));
  --zeile-desktop: calc(36px * var(--dichte));
  --zeile-tipp: calc(44px * var(--dichte));
  --zeile-bereich: calc(48px * var(--dichte));
  --zeile-chat: calc(56px * var(--dichte));
  --zeile-chat-frequenz: calc(76px * var(--dichte));
  --rand-punkt: calc(var(--rand) * 1.5);
  --grund: var(--grund-n);
  --f1: var(--f1-n);
  --f2: var(--f2-n);
  --f3: var(--f3-n);
  --schweb: var(--schweb-n);
  --linie: var(--linie-n);
  --linie-2: var(--linie-2-n);
  --feldrand: var(--feldrand-n);
  --akzent-text: var(--akzent-text-dunkel);
  --akzent-leise: color-mix(in srgb, var(--akzent) calc((var(--leise-anteil-dunkel) * (1 - var(--hell)) + var(--leise-anteil-hell) * var(--hell)) * 1%), var(--f1));
  --akzent-hauch: color-mix(in srgb, var(--akzent) 9%, transparent);
  --akzent-hauch-deckend: color-mix(in srgb, var(--akzent) 9%, var(--f1));
  --akzent-kante: color-mix(in srgb, var(--akzent) calc(45% + 55% * var(--hell)), transparent);
  --akzent-schein: color-mix(in srgb, var(--akzent) 25%, transparent);
  --akzent-rand: color-mix(in srgb, var(--akzent-text) 60%, var(--akzent));
  --akzent-hover: color-mix(in srgb, var(--akzent) 88%, var(--akzent-gegen));
  --akzent-gedrueckt: color-mix(in srgb, var(--akzent) 80%, var(--akzent-gegen));
  --markierung: color-mix(in srgb, var(--akzent) 32%, transparent);
  --marke-text: var(--marke);
  --zitat-flaeche: color-mix(in srgb, var(--text) 6%, transparent);
  --tupfer-ring: color-mix(in srgb, var(--text) 22%, transparent);
  --ring-wahl: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent-text);
}
:root.light{--akzent-text:var(--akzent-text-hell);--marke-text:var(--marke-text-hell)}
/* 7. Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce){
  :root{
    --dauer-druck: 0ms;
    --dauer: 150ms;
    --dauer-auf: 150ms;
    --dauer-auf-weg: 100ms;
    --dauer-blatt: 150ms;
    --dauer-blatt-weg: 100ms;
    --bewegung: 0;
  }
}
:root{--scale:1} /* Darstellungsgröße (Einstellungen), skaliert die ganze rem-basierte UI */
*{box-sizing:border-box}
/* Root-Schriftgröße = Schriftgröße des Browsers × Darstellungsgröße → alles in rem wächst mit
   (festlegungen 2). Handy und Desktop gleich (Scheibe 7: die 20-px-Basis ab 760 px ist weg, der
   Desktop zeigt 14 px wie die Mockups über --text-basis). */
html{font-size:calc(100% * var(--scale))}
/* Die Seite selbst scrollt NICHT. Alles, was scrollt, ist ein Kasten
   darin.
   Warum das wichtig ist: html/body mit height:100% meinen auf einem iPhone
   den GROSSEN Bildbereich (mit eingeblendeter Leiste), #app dagegen 100dvh,
   also den gerade sichtbaren. Body war damit hoeher als das Fenster, die
   Seite liess sich schieben, und darunter kam ein leeres Stueck zum Vorschein
   — genau Hennys "sehr grosser Abstand unten, der beim Hochscrollen
   verschwindet und wiederkommt" (24.09.). Mit derselben Einheit und ohne
   Ueberlauf gibt es nichts mehr zu schieben. */
html,body{margin:0;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{background:var(--grund);color:var(--text);font-family:system-ui,-apple-system,sans-serif;
  font-size:.94rem;line-height:1.45;overscroll-behavior:none}
button{font:inherit;cursor:pointer}
#app{height:100dvh;display:flex;flex-direction:column}

/* Login-Gate (Scheibe 3b-2: D25 nur über CSS; der Aufbau in showGate und showCodeEntry bleibt bei der App-Session, auch
   appZuAlt und die Alterssperre nutzen .gate). Spalte bis --breite-dialog, ab 760 px als Karte (Fläche 1, Kante --linie-2,
   Radius --r-blatt, Polster 28 32); Titel --grad-8, Satz --grad-5 in Zweittext; E-Mail als Feld B7 „Formular“ (48, Desktop 44),
   Code in Mono --grad-9 mit --lauf-code auf --hoehe-codefeld; der Haken „ab 16“ ist eine Zeile B18 (bei .gate-ab16); Hauptknopf
   B1 primär groß (48), gesperrt in der neutralen Form (beim Senden und nach zu vielen Versuchen); Fehler D20 in --rot mit Zeichen;
   „Andere E-Mail oder neuen Code anfordern“ als Textknopf B1; Rechtstext --grad-2, Links in Akzent-Text und unterstrichen (B4). */
.gate{height:100dvh;overflow-y:auto;box-sizing:border-box;display:grid;place-items:center;text-align:center;padding:2rem;background:var(--grund);color:var(--text)}
.gate .box{box-sizing:border-box;width:100%;max-width:calc(var(--breite-dialog) * var(--scale,1))}
@media(min-width:760px){.gate .box{padding:var(--abstand-14) var(--abstand-16);background:var(--f1);border:var(--rand) solid var(--linie-2);border-radius:var(--r-blatt);box-shadow:var(--schatten-1)}}
.gate h1{margin:0 0 var(--abstand-3);font-size:var(--grad-8);line-height:var(--grad-8-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-titel);overflow-wrap:anywhere}
.gate-logo{display:block;width:var(--hoehe-kachel);height:var(--hoehe-kachel);margin:0 auto var(--abstand-6);border-radius:var(--r-l)}
.gate p{margin:0 auto var(--abstand-12);color:var(--zweit);font-size:var(--grad-5);line-height:var(--grad-5-zh-text)}
.gate .gate-legal{max-width:none;margin:var(--abstand-10) 0 0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.gate-legal a{border-radius:var(--r-xxs);color:var(--akzent-text);font-weight:var(--gewicht-halb);text-decoration:underline;text-decoration-thickness:var(--rand);text-underline-offset:.14em}
@media(hover:hover){.gate-legal a:hover{color:var(--text)}}
.gate form{display:flex;flex-direction:column;gap:var(--abstand-5);text-align:left}
.gate input:not([type=checkbox]){box-sizing:border-box;width:100%;min-height:var(--hoehe-formular);padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-knapp);transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.gate input:not([type=checkbox]){padding:0 var(--abstand-6);font-size:var(--grad-3)}}
.gate input::placeholder{color:var(--zweit);opacity:1}
@media(hover:hover){.gate input:not([type=checkbox]):hover{background:var(--f3)}}
.gate input:not([type=checkbox]):focus-visible{border-color:var(--akzent-text);background:var(--f1)}
.gate input[autocomplete="one-time-code"]{min-height:var(--hoehe-codefeld);font-family:var(--mono);font-size:var(--grad-9)!important;letter-spacing:var(--lauf-code);text-align:center} /* !important wie die 16-px-Regel am Handy (größer, kein Fokus-Zoom) */
.gate input[autocomplete="one-time-code"]::placeholder{font-family:var(--schrift);font-size:var(--grad-4);letter-spacing:normal} /* 07.11.: die Ziffern bleiben groß, der Platzhalter nicht (Henny: „viel zu groß“) */
.gate-post{display:block;width:4.5rem;height:4.5rem;margin:0 auto var(--abstand-6);color:var(--text)}.gate-post svg{display:block;width:100%;height:100%}
.gate .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);box-sizing:border-box;max-width:100%;min-height:var(--hoehe-gross);padding:var(--abstand-2) var(--abstand-12);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-5);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-decoration:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.gate .btn:hover{background:var(--akzent-hover)}}
.gate .btn:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gate .btn[disabled]{background:var(--f2);border-color:var(--linie-2);color:var(--zweit);cursor:not-allowed;transform:none}
.gate .err{min-height:var(--grad-2-zh);margin:0;color:var(--rot);font-size:var(--grad-2);line-height:var(--grad-2-zh);text-align:center}
.gate .err:not(:empty)::before{content:"";display:inline-block;width:var(--ic-16);height:var(--ic-16);margin-right:var(--abstand-3);vertical-align:-.2em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat}
.gate .alt{margin:var(--abstand-8) 0 0;color:var(--zweit);font-size:var(--grad-2)}
@media(hover:hover){.gate .alt a:hover,.gate .linkbtn:hover{background:var(--f3)}}
.gate .linkbtn:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gate .alt a,.gate .linkbtn{position:relative;min-height:var(--treffer-min);margin-top:var(--abstand-6);padding:var(--abstand-2) var(--abstand-4);border:0;border-radius:var(--r-s);background:none;color:var(--akzent-text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);text-decoration:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}

/* App-Layout */
/* Scheibe 1b: am Handy unten die Leiste der vier Ziele (D1, zweite Zeile), ab 760 px links die Rail (D2, erste Spalte, so breit wie ihr
   Inhalt: wächst mit großer Schrift und der Safe Area im Querformat). Liste und Chat bleiben, wo sie waren. */
.app{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;height:100dvh;min-height:0}
.app>.col,.app>.pane{grid-row:1;grid-column:1}
.app>.nav-unten{grid-row:2;grid-column:1}
.app>.rail{display:none}
/* Die Breite der linken Spalte gehoert dem Menschen, nicht mir. Sie haengt
   an einer Variablen, laesst sich am Trennstrich ziehen und ueberlebt das
   Neuladen (pro Geraet). */
@media(min-width:760px){.app{grid-template-columns:auto var(--seite,320px) 1fr;grid-template-rows:minmax(0,1fr)}.app>.rail{display:flex;grid-column:1}.app>.col{grid-column:2}.app>.pane{grid-column:3}.app>.nav-unten{display:none}}
/* Der Griff liegt AUF dem Trennstrich: sechs Punkte breit, damit man ihn mit
   der Maus trifft, ohne dass er sichtbar Platz einnimmt. */
.col-griff{display:none}
@media(min-width:760px){
  .col-griff{display:block;position:absolute;top:0;bottom:0;right:-3px;width:6px;z-index:6;cursor:col-resize}
  .col-griff.zieht{background:color-mix(in srgb,var(--akzent) 55%,transparent)}
}
@media(min-width:760px) and (hover:hover){.col-griff:hover{background:color-mix(in srgb,var(--akzent) 55%,transparent)}}
body.spalte-zieht{cursor:col-resize;user-select:none}
.col{min-height:0;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--linie-2);position:relative}
.pane{min-height:0;min-width:0;display:flex;flex-direction:column;position:relative}
/* Zum-Ende-springen-Button: erscheint, wenn man im Chat nach oben gescrollt ist.
   W3a.3 (Scheibe 1b): im Fluss der Pane direkt hinter dem Verlauf, also über Antwortleiste, Format-Leiste, Kacheln und Composer, wie
   hoch die gerade sind; der negative Rand oben legt ihn über das Ende des Verlaufs, der Rand unten gibt ihn zurück (zusammen 0, der
   Composer rückt nicht). Abstand zum Rand setzt .pane>.msg-jump (right, 2a). */
.msg-jump{position:relative;align-self:flex-end;flex:none;margin:calc(-1 * (var(--hoehe-ik) + var(--abstand-6))) 0 var(--abstand-6);z-index:6;width:2.6rem;height:2.6rem;
  border-radius:50%;border:1px solid var(--linie-2);background:var(--f2);color:var(--text);display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--schatten-1);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease}
.msg-jump.show{opacity:1;pointer-events:auto;transform:none}
.msg-jump .ic{width:1.45rem;height:1.45rem}
@media(hover:hover){.msg-jump:hover{border-color:var(--akzent)}}

/* Mobile-Toggle Liste <-> Chat */
@media(max-width:759px){
  .app[data-view="chat"] .col{display:none}
  .app[data-view="list"] .pane{display:none}
}

/* Sidebar (Scheibe 1a, D-Aussehen: Kopf D6 mit Pille E28 und Profil, Reiter B16, Liste D3, Fuß mit Icon-Knöpfen B5).
   Ort und Bedienung bleiben; Kopf- und Fußlinie bleiben auf der Höhe von Chat-Kopf und Composer (dort wie hier --linie-2). */
.side-head{display:flex;align-items:center;gap:var(--abstand-5);padding:.6rem .7rem;border-bottom:var(--rand) solid var(--linie-2);position:relative;box-sizing:border-box;min-height:3.6rem}
.side-head .brand{font-weight:800;letter-spacing:.18em;font-size:1rem;margin-right:auto}
.side-head a,.side-head button{color:var(--zweit);background:none;border:0;text-decoration:none;font-size:.8rem;cursor:pointer}
@media(hover:hover){.side-head a:hover,.side-head button:hover{color:var(--text)}}
.side-head .icon-btn{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.55rem;color:var(--text)}
@media(hover:hover){.side-head .icon-btn:hover{background:var(--f2)}}
.side-head .icon-btn svg{width:1.3rem;height:1.3rem;display:block} /* Archiv + Zahnrad identisch groß */
.side-head .me-av{flex:0 0 auto}
/* Guthaben-Pille oben links (E28): Zahl in Monospace, dann das Hive-Zeichen in Marke; Hauch-Fläche mit Rand in
   Akzent-Text (die Akzent-Kante allein wäre nur Zier, festlegungen 3); Trefferfläche 44 am Handy über ::after.
   .side-head davor, weil .side-head button Fläche und Rand sonst wegnähme. Öffnet Pläne. */
.side-head .credit-pill{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-dicht);margin-right:auto;padding:0 var(--abstand-4) 0 var(--abstand-5);background:var(--akzent-hauch);border:var(--rand) solid var(--akzent-text);border-radius:var(--r-s);color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.side-head .credit-pill::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--treffer-min));transform:translateY(-50%)}
@media(hover:hover){.side-head .credit-pill:hover{background:var(--f3);color:var(--text)}}
.side-head .credit-pill:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.credit-pill .cp-n{font-family:var(--mono);font-size:var(--grad-3);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp);line-height:var(--zh-eng);font-variant-numeric:tabular-nums}
.credit-pill .cp-mark{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--marke);display:block}
/* Profil oben rechts als runder Icon-Knopf (B5): 44 am Handy und mit grobem Zeiger, 36 am Desktop; der Avatar bleibt
   an seinem Platz (Ausgleich über den Rand). Die Initiale in Akzent-Text: Honig hatte im Hellen 1,8:1. Die D-Form
   bekommen Avatare außerhalb der Listen mit ihrer Scheibe (bauplan 3.2). */
.side-head .foot-prof{position:relative;flex:none;display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);margin-right:calc((30px - var(--hoehe-ik)) / 2);padding:0;border-radius:var(--r-voll);transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.side-head .foot-prof:hover{background:var(--f3)}}
.side-head .foot-prof:hover:not(:focus-visible){outline:0} /* statt des Hover-Rings aus .foot-prof:hover (Fläche reicht) */
.side-head .foot-prof:active{background:var(--linie-2)}
:is(.side-head,.rail,.ich-profil) .foot-prof .av-kurz{color:var(--akzent-text)} /* Scheibe 1b: auch in Rail („Ich“) und oben in Ich */
/* Scheibe 1b: die Reiter Chats, Kontakte, Anfragen sind fort. Kontakte ist die Unterseite „Neuer Chat“, Anfragen eine Zeile oben in der
   Chatliste mit eigener Unterseite (bildschirme.md 4.4, 4.5). .side-tabs ist der Kopf dieser Unterseiten (D7: Zurück, Herkunft, Titel);
   die Knöpfe, die den Reiter wechseln, tragen weiter .side-tab[data-tab] (applySideTab, fotos.mjs): „Neuer Chat“ im Kopf der Chatliste,
   die Zeile „Anfragen“ und Zurück. Fokusring innen, Hover Fläche 3, gedrückt Linie 2. */
.side-tabs{display:flex;align-items:center;gap:var(--abstand-2);box-sizing:border-box;min-height:calc(var(--hoehe-kopf) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--abstand-6) 0 var(--abstand-2);border-bottom:var(--rand) solid var(--linie-2)}
.col[data-reiter="chats"]>.side-tabs{display:none}
.col:not([data-reiter="chats"])>:is(.side-head,.nudge){display:none}
.side-tab{display:flex;align-items:center;gap:var(--abstand-4);box-sizing:border-box;background:none;border:0;color:var(--text);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.side-tab:hover{background:var(--f3)}}
.side-tab:active{background:var(--linie-2)}
.side-tab:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.side-tab.zurueck,.u-zurueck{display:flex;align-items:center;flex:none;justify-content:center;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.u-zurueck:hover{background:var(--f3)}}
.u-zurueck:active{background:var(--linie-2)}
:is(.side-tab.zurueck,.u-zurueck) .ic{width:var(--ic-24);height:var(--ic-24)}
:is(.side-tabs,.u-kopf) .u-titel{display:flex;flex-direction:column;flex:1;min-width:0;margin:0}
:is(.side-tabs,.u-kopf) .u-herkunft{color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh-eng);font-weight:var(--gewicht-mittel)}
:is(.side-tabs,.u-kopf) .u-name{overflow:hidden;font-size:var(--grad-6);line-height:var(--grad-6-zh-eng);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp);text-overflow:ellipsis;white-space:nowrap}
:is(.side-tabs,.u-kopf) .u-titel:focus:not(:focus-visible){outline:0}
@media(min-width:760px){:is(.side-tabs,.u-kopf) .u-name{font-size:var(--grad-4);line-height:var(--grad-4-zh-eng)}}
.tab-pane[hidden]{display:none}
/* [hidden] verlässlich in der Listenspalte (bauplan 3.1 Nr. 7, nach 1a gewandert): gezielt, weil eine Regel für alles
   den Reaktionswähler und den Verlauf im KI-Fenster ausblenden würde (dort steht [hidden] an Sichtbarem, Vorher-Zählung
   der Scheibe 0). Das Inline-Menü der Zeile (Inhalt 2c) bleibt außen vor. */
.col [hidden]:not(.box-menu *){display:none!important}
/* Apps-Menü-Fuß unten links; Menü klappt nach OBEN auf. */
/* Fuß: Aktions-Icons (Farben · Archiv · Glocke · Einstellungen) + Profil, full-width verteilt. */
/* Die Linie ueber den vier Zeichen soll auf DERSELBEN Hoehe liegen wie die
   Linie ueber dem Schreibfeld daneben (Henny 24.09.). Die Hoehe des
   Schreibfelds steht in --fusshoehe und wird gemessen, nicht geraten — es
   waechst ja mit, wenn man mehrere Zeilen tippt. */
.side-foot{padding:var(--abstand-4) var(--abstand-6);border-top:var(--rand) solid var(--linie-2);display:flex;align-items:center;justify-content:space-evenly;gap:var(--abstand-1);box-sizing:border-box;min-height:3.7rem}
@media(min-width:760px){.side-foot{min-height:var(--fusshoehe,3.7rem)}}
/* Icon-Knöpfe im Fuß (B5): 44 am Handy und mit grobem Zeiger, 36 am Desktop; Hover Fläche 3, gedrückt Linie 2.
   Reihenfolge der Knöpfe bleibt (fotos.mjs zählt sie mit :nth-of-type). */
.side-foot .icon-btn{background:none;border:0;cursor:pointer;display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);border-radius:var(--r-s);color:var(--text);transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.side-foot .icon-btn:hover{background:var(--f3)}}
.side-foot .icon-btn:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.side-foot .icon-btn svg{width:var(--ic-knopf);height:var(--ic-knopf);display:block}
@media(max-width:759px){.side-foot{padding-bottom:calc(var(--abstand-4) + min(env(safe-area-inset-bottom), 2.2rem))}}
/* ── Navigation und Ziele (Scheibe 1b, bauplan 3.8) ───────────────────────────────────────────────────────────────────────────────
   Vier Ziele Chats, Anrufe, Studio, Ich: am Handy die untere Leiste (D1), ab 760 px die Rail (D2) mit Logo, den Zielen, dem Guthaben (E28,
   am Handy im Kopf der Chatliste) und „Ich“ mit dem eigenen Avatar unten. Je Ziel ein Kopf (D6); Anrufe, Studio und Ich stehen als Seiten
   in der Listenspalte (.ziel-seite), am Desktop zeigt die Mitte dazu nur die Wabe. Ich ist eine Bereichsliste (C37), die bis 5a die
   heutigen Dialoge öffnet. Zustand, Adresse und Zurück gehören W1b.1 (data-ziel an .app); fehlt data-ziel, gilt Chats. */
:root{--rail-breite:max(var(--breite-rail),calc(4.8 * var(--grad-1)))}
/* Höhe der Leiste (D1), gemeinsam für Leiste und Kurzmeldung: ein Ziel ist so hoch wie sein Inhalt (Zeichen, Lücke, eine Zeile Wort,
   Polster), mindestens 56; dazu das Polster der Leiste, die Linie oben und die Safe Area. */
:root{--leiste-ziel:max(var(--hoehe-kopf),calc(var(--hoehe-desktop) + var(--abstand-1) + var(--grad-1-zh) + 2 * var(--abstand-2)));--leiste-h:calc(var(--leiste-ziel) + 2 * var(--abstand-2) + var(--rand) + env(safe-area-inset-bottom,0px))}
.col>.kopf,.ziel-seite>.kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4) var(--abstand-5);box-sizing:border-box;min-height:calc(var(--hoehe-kopf) + env(safe-area-inset-top,0px));margin:0;padding:calc(var(--abstand-3) + env(safe-area-inset-top,0px)) var(--abstand-6) var(--abstand-3) var(--abstand-8);border-bottom:var(--rand) solid var(--linie-2)}
.kopf .kopf-titel{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;color:var(--text);font-size:var(--grad-8);line-height:var(--grad-8-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-titel);text-overflow:ellipsis;white-space:nowrap}
.kopf .kopf-titel:focus:not(:focus-visible){outline:0}
.side-head .side-tab.kopf-knopf{flex:none;display:inline-flex;justify-content:center;min-height:var(--hoehe-knopf);margin-left:auto;padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);white-space:nowrap}
.side-head .side-tab.kopf-knopf .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.side-head .side-tab.kopf-knopf:hover{background:var(--f3);color:var(--text)}}
.side-head .side-tab.kopf-knopf:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.side-head .side-tab.kopf-knopf:focus-visible{outline-offset:var(--fokus-abstand)}
@media(max-width:759px){.col>.kopf,.ziel-seite>.kopf,.col>.side-tabs{padding-right:calc(var(--abstand-6) + env(safe-area-inset-right,0px))}.col>.kopf,.ziel-seite>.kopf{padding-left:calc(var(--abstand-8) + env(safe-area-inset-left,0px))}.col>.side-tabs{padding-left:calc(var(--abstand-2) + env(safe-area-inset-left,0px))}}
@media(min-width:760px){.kopf .kopf-titel{font-size:var(--grad-6);line-height:var(--grad-6-zh);letter-spacing:var(--lauf-knapp)}.side-head>.credit-pill{display:none}}
.ziel-seite>.u-kopf{flex-wrap:nowrap;gap:var(--abstand-2);padding-left:var(--abstand-2)}
@media(max-width:759px){.ziel-seite>.u-kopf{padding-left:calc(var(--abstand-2) + env(safe-area-inset-left,0px))}}
/* Seiten ohne sichtbaren Titel (07.11., Henny: "Chats, Anrufe, Ich überall entfernen, sind in den Zeichen unten"): der Titel bleibt
   für Vorleser; ein Kopf, in dem sonst nichts steht, hält nur den Abstand zur Statusleiste */
.col>.kopf>.kopf-titel,.ziel-seite>.kopf>.kopf-titel{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ziel-seite>.kopf:not(:has(>:not(.kopf-titel))){min-height:0;padding:env(safe-area-inset-top,0px) 0 0;border-bottom:0}
.side-head .side-tab.kopf-knopf{margin-left:0}
.side-head .credit-pill{margin-right:0;margin-left:auto}
/* Eigene Chats und Archiv fest unten in der Liste (07.11.) */
.col>.liste-fuss{flex:none;border-top:var(--rand) solid var(--linie);background:var(--grund)}
.col>.liste-fuss[hidden]{display:none}
.col>.liste-fuss .archiv-zeile{margin-top:0;border-top:0}
.liste-fuss .eigen-liste>.row{border-bottom:var(--rand) solid var(--linie)}
.liste-fuss .eigen-liste:empty{display:none}
.app[data-ziel]:not([data-ziel="chats"]) .col>.liste-fuss,.col:not([data-reiter="chats"])>.liste-fuss{display:none}
/* Zeile „Anfragen“ oben in der Chatliste: nur mit offenen Anfragen (der Zähler [data-reqbadge] ist dann sichtbar); Zeile „Archiv“ am Ende. */
.side-tab.anfragen-zeile,.archiv-zeile{display:flex;align-items:center;gap:var(--abstand-6);box-sizing:border-box;width:100%;min-height:var(--zeile-tipp);padding:var(--abstand-3) var(--polster-zeile);border:0;background:none;color:var(--text);font:inherit;font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.side-tab.anfragen-zeile{border-bottom:var(--rand) solid var(--linie)}
.anfragen-zeile:not(:has([data-reqbadge]:not([hidden]))){display:none}
.archiv-zeile{margin-top:var(--abstand-4);border-top:var(--rand) solid var(--linie)}
:is(.anfragen-zeile,.archiv-zeile)>.ic{flex:none;width:var(--ic-20);height:var(--ic-20);margin:0 var(--abstand-2);color:var(--zweit)}
:is(.anfragen-zeile,.archiv-zeile)>.ic:last-child{width:var(--ic-18);height:var(--ic-18);margin:0}
:is(.anfragen-zeile,.archiv-zeile) .zt{flex:1;min-width:0}
.archiv-zeile .zn{font-family:var(--mono);font-size:var(--grad-2);font-weight:var(--gewicht-mittel);color:var(--zweit);font-variant-numeric:tabular-nums}
.archiv-zeile .zn:empty{display:none}
@media(hover:hover){.archiv-zeile:hover{background:var(--f3)}}
.archiv-zeile:active{background:var(--linie-2)}
.archiv-zeile:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.chat-selecting :is(.archiv-zeile,.anfragen-zeile){display:none}
@media(min-width:760px){.side-tab.anfragen-zeile,.archiv-zeile{font-size:var(--grad-3);line-height:var(--grad-3-zh)}}
:is(.nav-unten,.rail,.col) .sr-nur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Seiten der Ziele in der Listenspalte; die Teile von Chats treten dann zurück. Am Desktop zeigt die Mitte nur die Wabe. */
.col>.ziel-seite{display:none;flex:1;min-height:0;flex-direction:column}
.app[data-ziel="anrufe"] .col>.ziel-seite[data-zielseite="anrufe"],.app[data-ziel="studio"] .col>.ziel-seite[data-zielseite="studio"],.app[data-ziel="cloud"] .col>.ziel-seite[data-zielseite="cloud"],.app[data-ziel="ich"] .col>.ziel-seite[data-zielseite="ich"]{display:flex}
/* Hive Cloud (08.11.2026, App-Session; Form nach HIVE DESIGN cloud.md F0 bis F14, Scheibe 15; Kopf, Fuß, Wurzel und Speicher F15 bis F21,
   Scheibe 15b): am Computer über Listenspalte und Mitte, damit das Raster Platz hat; der Griff der Listenspalte fällt dort weg. */
@media(min-width:760px){.app[data-ziel="cloud"]>.col{grid-column:2 / 4}.app[data-ziel="cloud"]>.pane,.app[data-ziel="cloud"]>.col>.col-griff{display:none}}
/* Fünf Ziele seit der Hive Cloud (D1 in ebenen.css): unter 360 px höchstens 15 px Wort, sonst kürzt die Leiste mit Text XL und XXL
   (gemessen 08.11. bei 320 px: „Anrufe“ 55 und „Studio“ 53 in 48, mit der Grenze 47 und 45). Fünf heißt: mindestens fünf .ziel. */
@media(max-width:359px){.nav-unten:has(>.ziel~.ziel~.ziel~.ziel~.ziel)>.ziel{font-size:min(var(--grad-1),15px)}}
/* Farben der Arten (F2): die Frequenzfarben; die Farbe trägt nie allein (Wort, Zeichen oder Endung stehen daneben); der Papierkorb grau */
.cloud,.cloud-wahl,.datei-ansicht,.cloud-speicher-blatt{--art-bild:var(--fq-arbeit);--art-video:var(--fq-reise);--art-audio:var(--fq-privat);--art-dokument:var(--fq-kochen);--art-rest:var(--fq-chat);--art-korb:var(--zweit)}
.cloud-datei,.cloud-wahl .datei-kachel{--art:var(--art-rest)}
.cloud .art-bild,.cloud-wahl .art-bild,.cloud-teil-bild{--art:var(--art-bild)}
.cloud .art-video,.cloud-wahl .art-video,.cloud-teil-video{--art:var(--art-video)}
.cloud .art-audio,.cloud-teil-audio{--art:var(--art-audio)}
.cloud :is(.art-pdf,.art-dokument,.art-text),.cloud-teil-dok{--art:var(--art-dokument)}
.cloud-teil-korb{--art:var(--art-korb)}
/* F15 Seite (Scheibe 15b, Henny 09.11. Nr. 1, 5, 6): Kopf klebt oben, Fuß klebt über dem Hauptmenü wie das Dock im Studio, dazwischen
   Ordner und Dateien in voller Breite (keine Grenze von 72rem mehr) und voller Höhe; keine Speicherkarte mehr auf der Startseite */
.ziel-seite[data-zielseite="cloud"] .ziel-inhalt{display:flex;flex-direction:column}
.cloud{display:flex;flex-direction:column;flex:1 0 auto;box-sizing:border-box;width:100%}
/* F16 Kopfzeile: am Handy oben der Ort (Zurück und Name, nur außerhalb der Wurzel), darunter die Zeichen über die ganze Breite verteilt;
   am Computer eine Zeile, der Pfad links, die Zeichen rechts. Knöpfe 44 (am Computer 36) ohne Rahmen, Menüs mit Pfeil */
.cloud-kopf{position:sticky;top:0;z-index:var(--ebene-klebt);display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--abstand-4);padding:var(--abstand-2) var(--polster-zeile);border-bottom:var(--rand) solid var(--linie);background:var(--grund)}
.cloud-pfad{display:flex;flex:1 1 100%;align-items:center;gap:0 var(--abstand-2);min-width:0;min-height:var(--hoehe-knopf);color:var(--text);font-size:var(--grad-4);line-height:var(--grad-4-zh)}
.cloud-pfad[hidden]{display:none}
.cloud-pfad>.cloud-zurueck{margin-left:calc(-1 * var(--abstand-3));color:var(--text)}
.cloud-pfad-hier{min-width:0;overflow:hidden;font-weight:var(--gewicht-halb);text-overflow:ellipsis;white-space:nowrap}
.cloud-pfad-stufe{position:relative;flex:none;min-height:var(--hoehe-dicht);margin:0 calc(-1 * var(--abstand-3));padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);background:none;color:var(--akzent-text);font:inherit;font-weight:var(--gewicht-halb);cursor:pointer}
.cloud-pfad-stufe::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--treffer-min));transform:translateY(-50%)}
@media(hover:hover){.cloud-pfad-stufe:hover{background:var(--f3)}}
.cloud-pfad-trenner{flex:none;color:var(--zweit)}
.cloud-werkzeug{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:var(--abstand-1);min-width:0}
.cloud-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-1);flex:none;box-sizing:border-box;min-width:var(--hoehe-knopf);height:var(--hoehe-knopf);margin:0;padding:0 var(--abstand-2);border:0;border-radius:var(--r-s);background:transparent;color:var(--zweit);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.cloud-knopf[hidden]{display:none}
.cloud-knopf .ic{flex:none;width:var(--ic-20);height:var(--ic-20)}
.cloud-knopf .ic.cloud-pfeil{width:var(--ic-14);height:var(--ic-14);margin-right:calc(-1 * var(--abstand-1));transition:transform var(--dauer) var(--kurve)}
@media(hover:hover){.cloud-knopf:hover{background:var(--f3);color:var(--text)}}
.cloud-knopf:active{background:var(--linie-2)}
.cloud-knopf.on,.cloud-knopf[aria-expanded="true"]{color:var(--akzent-text)}
.cloud-knopf[aria-expanded="true"] .cloud-pfeil{transform:rotate(180deg)}
.cloud-knopf:focus-visible{outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:calc(-1 * var(--fokus-breite))}
.cloud-knopf[aria-disabled="true"]{opacity:.45}
@media(hover:hover){.cloud-knopf[aria-disabled="true"]:hover{background:transparent;color:var(--zweit)}}
.cloud-ansicht{display:flex;flex:none;gap:var(--abstand-1)}
.cloud-ansicht>.cloud-knopf.on{background:var(--akzent-leise)}
/* Filter mit Wahl: die Zahl steht statt des Pfeils (der Knopf bleibt so breit) */
.cloud-filter-knopf.on>.cloud-pfeil{display:none}
.cloud-zahl{min-width:var(--ic-16);height:var(--ic-16);box-sizing:border-box;padding:0 var(--abstand-1);border-radius:var(--r-voll);background:var(--akzent);color:var(--auf-akzent);font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-fett);line-height:var(--ic-16);text-align:center;font-variant-numeric:tabular-nums}
.cloud-zahl[hidden]{display:none}
/* Listen der Kopfzeile: Sätze statt Werte; Spalten wie in der Studio-Galerie (Zahl in Mono) */
.ig-kwahl-liste.cloud-klappe .ig-kwahl-ot{font-family:inherit}
.ig-kwahl-liste.cloud-klappe{min-width:min(14rem,calc(100vw - 16px))}
.cloud-klappe-gruppe{display:flex;flex-direction:column;gap:var(--abstand-1)}
.cloud-klappe-kopf.ig-kwahl-opt{margin:var(--abstand-4) 0 0;padding:0 var(--abstand-4) 0 var(--abstand-4);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.cloud-klappe-kopf-text{flex:1 1 auto;min-width:0}
.cloud-klappe-kopf.ig-kwahl-opt.on,.cloud-klappe-kopf.ig-kwahl-opt.teil{color:var(--zweit)}
.cloud-klappe-kopf.on .ig-kwahl-haken,.cloud-klappe-kopf.teil .ig-kwahl-haken{visibility:visible;color:var(--akzent-text)}
.cloud-klappe-kopf{margin:var(--abstand-4) var(--abstand-4) var(--abstand-1);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.cloud-klappe .ig-kwahl-oz .ic{width:var(--ic-20);height:var(--ic-20)}
/* F17 Fuß wie das Dock im Studio: Linie oben, Fläche f1. Links der Speicher als Kreis mit „frei“, rechts Suche, Neuer Ordner, Hochladen
   (nur Zeichen, Hochladen in Akzent ganz rechts). Die Lupe öffnet das Feld im Fuß, am Handy über die ganze Breite */
.cloud-fuss{position:sticky;bottom:0;z-index:var(--ebene-klebt);display:flex;align-items:center;gap:var(--abstand-1);margin-top:auto;padding:var(--abstand-3) var(--polster-zeile);border-top:var(--rand) solid var(--linie);background:var(--f1)}
.cloud-speicher{display:inline-flex;align-items:center;gap:var(--abstand-4);flex:0 1 auto;min-width:0;min-height:var(--hoehe-knopf);margin:0 auto 0 calc(-1 * var(--abstand-2));padding:0 var(--abstand-2);border:0;border-radius:var(--r-s);background:transparent;color:var(--zweit);font:inherit;font-size:var(--grad-2);line-height:var(--grad-2-zh);font-variant-numeric:tabular-nums;text-align:left;cursor:pointer}
@media(hover:hover){.cloud-speicher:hover{background:var(--f3);color:var(--text)}}
.cloud-speicher:focus-visible{outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:calc(-1 * var(--fokus-breite))}
.cloud-speicher>.speicher-kreis{flex:none;width:var(--ic-28);height:var(--ic-28)}
.cloud-speicher-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.speicher-kreis{display:block;transform:rotate(-90deg)}
.sk-spur,.sk-teil{fill:none;stroke-width:6}
.sk-spur{stroke:var(--f3)}
.sk-teil{stroke:var(--art)}
.cloud-fuss>.cloud-hoch{margin-left:var(--abstand-3);border:var(--rand) solid var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.cloud-fuss>.cloud-hoch:hover{background:var(--akzent-hover);color:var(--auf-akzent)}}
.cloud-fuss>.cloud-hoch:active{background:var(--akzent-gedrueckt)}
.cloud-fuss>.cloud-hoch .ic{width:var(--ic-24);height:var(--ic-24)}
.cloud-fuss>.cloud-hoch:focus-visible{outline-color:var(--text);outline-offset:var(--fokus-abstand)}
.cloud-such{position:relative;display:flex;align-items:center;gap:var(--abstand-1);flex:1 1 auto;min-width:0}
.cloud-such[hidden]{display:none}
.cloud-such>.lupe{position:absolute;inset-inline-start:var(--abstand-5);top:50%;width:var(--ic-18);height:var(--ic-18);color:var(--zweit);pointer-events:none;transform:translateY(-50%)}
.cloud-suche{box-sizing:border-box;flex:1 1 auto;width:100%;min-width:0;min-height:var(--hoehe-feld);margin:0;padding-block:0;padding-inline:calc(var(--abstand-5) + var(--ic-18) + var(--abstand-4)) var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--grund);color:var(--text);font:inherit;font-size:var(--grad-4)}
.cloud-suche::placeholder{color:var(--zweit);opacity:1}
.cloud-suche::-webkit-search-cancel-button,.cloud-suche::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
@media(min-width:760px) and (pointer:coarse){.cloud-suche{font-size:max(16px,var(--grad-3))}}
@media(max-width:759px){.cloud-fuss.sucht>:not(.cloud-such){display:none}}
/* Zeile unter dem Kopf: die Filter, die gelten, mit Zurücksetzen; im Papierkorb Frist und Leeren */
.cloud-flaeche{display:flex;flex-direction:column;gap:var(--abstand-5);flex:1 0 auto;padding:var(--abstand-5) var(--polster-zeile) var(--abstand-10)}
.cloud-stand{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-6)}
.cloud-stand[hidden]{display:none}
.cloud-stand-satz{display:flex;flex:1 1 12rem;align-items:center;gap:var(--abstand-3);min-width:0;margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.cloud-stand-satz>.ic{flex:none;width:var(--ic-16);height:var(--ic-16)}
.cloud-stand-namen{min-width:0;color:var(--text);font-weight:var(--gewicht-halb);overflow-wrap:anywhere}
.cloud-stand-weg{position:relative;flex:none;min-height:var(--hoehe-dicht);margin:0 calc(-1 * var(--abstand-3));padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);background:none;color:var(--akzent-text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer}
.cloud-stand-weg::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--treffer-min));transform:translateY(-50%)}
@media(hover:hover){.cloud-stand-weg:hover{background:var(--f3)}}
.cloud-stand>.cloud-korb-leeren{flex:none;color:var(--rot)}
@media(hover:hover){.cloud-stand>.cloud-korb-leeren:hover{border-color:var(--rot);background:var(--rot-leise)}}
/* F18 Ordner und Dateien: ein Raster bzw. eine Liste; Ordner zuerst (an der Wurzel die Bereiche, dann die eigenen), als getönte Kachel
   mit dem Ordner, in den Bereichen das Zeichen der Herkunft darin. Spalten nach der Breite (Kachel mindestens 88 px). */
.cloud-dateien.cloud-raster{display:grid;grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr));gap:var(--abstand-6) var(--abstand-4)}
.cloud-dateien.cloud-liste{display:flex;flex-direction:column}
.cloud-dateien>.leerzustand{grid-column:1 / -1}
.cloud-datei{position:relative;min-width:0}
.cloud-datei-knopf{display:flex;box-sizing:border-box;width:100%;margin:0;padding:0;border:0;border-radius:var(--r-m);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cloud-raster .cloud-datei-knopf{flex-direction:column;gap:var(--abstand-3)}
.cloud-bild{position:relative;display:flex;flex:none;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r-m);background:color-mix(in srgb,var(--art) 14%,var(--f1));color:var(--art)}
.cloud-raster .cloud-bild{width:100%;aspect-ratio:1;outline:var(--rand) solid var(--linie);outline-offset:calc(-1 * var(--rand))}
.cloud-bild img,.cloud-bild video{display:block;width:100%;height:100%;object-fit:cover}
.cloud-bild video.cloud-hover{position:absolute;inset:0}
.cloud-bild>.ic{width:var(--ic-28);height:var(--ic-28)}
@media(hover:hover){.cloud-raster .cloud-datei-knopf:hover .cloud-bild{outline-color:var(--zweit)}}
.cloud-bild.cloud-ordner-bild{background:var(--akzent-hauch);color:var(--akzent-text)}
.cloud-oz{position:relative;display:block;width:46%;aspect-ratio:1}
.cloud-oz>.ic{display:block;width:100%;height:100%}
.cloud-oz>.cloud-oz-glyphe{position:absolute;left:50%;top:57%;width:38%;height:38%;transform:translate(-50%,-50%)}
.dk-art{position:absolute;left:var(--abstand-3);bottom:var(--abstand-3);max-width:calc(100% - 2 * var(--abstand-3));box-sizing:border-box;overflow:hidden;padding:0 var(--abstand-3);border-radius:var(--r-xs);background:var(--glas-dunkel);color:var(--buehne-weiss);font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);text-overflow:ellipsis;white-space:nowrap}
/* Nr. 8: Titel, Prompts und Angaben am Handy eine Stufe kleiner (im Raster sind die Angaben schon auf der kleinsten Stufe, 12) */
.cloud-text{display:flex;flex-direction:column;gap:var(--abstand-1);min-width:0}
.cloud-name{overflow:hidden;color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh);text-overflow:ellipsis;white-space:nowrap}
.cloud-meta{overflow:hidden;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
.cloud-ordner-eintrag .cloud-name{font-weight:var(--gewicht-halb)}
/* F19 Liste: Zeile mit Vorschau 32, 48 oder 72 (Nr. 9, wie im Raster die Spalten), Name und Angaben, „Mehr“ rechts; Trennlinie unten */
.cloud-liste .cloud-datei-knopf{align-items:center;gap:var(--abstand-5);min-height:max(var(--hoehe-gross),calc(var(--vorschau,48px) + 2 * var(--abstand-3)));padding:var(--abstand-3) calc(var(--hoehe-knopf) + var(--abstand-2)) var(--abstand-3) 0;border-bottom:var(--rand) solid var(--linie);border-radius:0}
@media(hover:hover){.cloud-liste .cloud-datei-knopf:hover{background:var(--f2)}}
.cloud-liste .cloud-bild{width:var(--vorschau,48px);height:var(--vorschau,48px);border-radius:var(--r-s)}
.cloud-liste .cloud-bild>.ic{width:calc(var(--vorschau,48px) / 2);height:calc(var(--vorschau,48px) / 2)}
.cloud-liste .cloud-oz{width:64%}
.cloud-liste .cloud-bild>.dk-art{display:none}
.cloud-liste .cloud-name{font-size:var(--grad-3);line-height:var(--grad-3-zh)}
.cloud-mehr{align-self:center}
.cloud-mehr[hidden]{display:none}
/* „Mehr“ an Ordner und Datei: drei Punkte; im Raster als Glas über dem Bild (32, treffbar 44), in der Liste ohne Fläche */
.cloud-menue-knopf{position:absolute;top:var(--abstand-2);right:var(--abstand-2);display:flex;align-items:center;justify-content:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:0;border-radius:var(--r-s);background:var(--glas-dunkel);color:var(--buehne-weiss);cursor:pointer}
.cloud-menue-knopf::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.cloud-menue-knopf .ic{width:var(--ic-20);height:var(--ic-20)}
.cloud-raster .cloud-menue-knopf:focus-visible{outline-color:var(--buehne-weiss);outline-offset:calc(-1 * var(--fokus-breite))}   /* über dem Bild: weiß innen auf dem Glas (auch über hellen Bildern 3:1) */
.cloud-liste .cloud-menue-knopf{top:50%;right:var(--abstand-1);width:var(--hoehe-knopf);height:var(--hoehe-knopf);background:transparent;color:var(--zweit);transform:translateY(-50%)}
@media(hover:hover){.cloud-liste .cloud-menue-knopf:hover{background:var(--f3);color:var(--text)}}
/* F20 Speicher im eigenen Fenster (Nr. 2): Kreis 96 mit der Zahl daneben, Art mit Farbe, Herkunft mit Zeichen, der Papierkorb als Zeile
   (öffnet ihn), Mehr Speicher als Hauptknopf */
.cloud-speicher-blatt{display:flex;flex-direction:column;gap:var(--abstand-8)}
.csb-oben{display:flex;align-items:center;gap:var(--abstand-8)}
.csb-oben>.speicher-kreis{flex:none;width:calc(4 * var(--ic-24));height:calc(4 * var(--ic-24))}
.csb-zahl{display:flex;flex-direction:column;gap:var(--abstand-2);min-width:0}
.csb-belegt{color:var(--text);font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums}
.csb-frei{color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh);font-variant-numeric:tabular-nums}
.csb-gruppe{min-width:0}
.csb-titel{margin:0 0 var(--abstand-2);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.csb-liste{margin:0;padding:0;list-style:none}
.csb-zeile{display:flex;align-items:center;gap:var(--abstand-5);min-height:var(--hoehe-knopf);border-bottom:var(--rand) solid var(--linie);font-size:var(--grad-3);line-height:var(--grad-3-zh)}
.csb-name{flex:1 1 auto;min-width:0;color:var(--text);overflow-wrap:anywhere}
.csb-wert{flex:none;color:var(--zweit);font-variant-numeric:tabular-nums;text-align:right}
.csb-punkt{flex:none;width:var(--abstand-5);height:var(--abstand-5);margin:0 var(--abstand-2);border-radius:var(--r-voll);background:var(--art)}
.csb-zeile>.csb-zeichen{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.csb-korb{display:flex;align-items:center;gap:var(--abstand-5);box-sizing:border-box;width:100%;min-height:var(--hoehe-gross);margin:0;padding:var(--abstand-3) var(--abstand-4);border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:var(--f2);color:var(--text);font:inherit;font-size:var(--grad-3);line-height:var(--grad-3-zh);text-align:left;cursor:pointer}
@media(hover:hover){.csb-korb:hover{background:var(--f3)}}
.csb-korb-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.csb-korb .csb-wert{font-size:var(--grad-2);line-height:var(--grad-2-zh);text-align:left}
.csb-korb>.ic{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.cloud-speicher-blatt>.cloud-mehr-speicher{width:100%;border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.cloud-speicher-blatt>.cloud-mehr-speicher:hover{background:var(--akzent-hover)}}
.cloud-speicher-blatt>.cloud-mehr-speicher:active{background:var(--akzent-gedrueckt)}
/* Ziehen und Ablegen (App-Session 09.11.2026, schlicht; Aussehen später von HIVE DESIGN) */
.zieh-geist{position:fixed;left:0;top:0;z-index:2147483000;display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-m);overflow:hidden;background:var(--f2);color:var(--zweit);box-shadow:0 10px 28px rgba(0,0,0,.45);pointer-events:none;opacity:.94;will-change:transform}
.zieh-geist img,.zieh-geist canvas{display:block;width:100%;height:100%;object-fit:cover}
.zieh-geist .ic{width:var(--ic-28);height:var(--ic-28)}
html.zieht,html.zieht *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
.zieh-quelle{opacity:.45}
.zieh-ziel{outline:2px solid var(--akzent)!important;outline-offset:-2px;background-color:color-mix(in srgb,var(--akzent) 14%,transparent)!important}
.cloud-datei{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cloud-datei img,.st-kachel img{-webkit-user-drag:none}
/* Teilen (App-Session 09.11.2026, Phase 2, schlicht) */
.cloud-teilen{display:flex;flex-direction:column;gap:var(--abstand-8)}
.cloud-teilen-wahl{display:flex;flex-direction:column;gap:var(--abstand-2)}
.cloud-teilen-stufe{display:flex;align-items:center;gap:var(--abstand-5);width:100%;min-height:var(--hoehe-gross);margin:0;padding:var(--abstand-3) var(--abstand-4);border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.cloud-teilen-stufe.on{border-color:var(--akzent-rand)}
@media(hover:hover){.cloud-teilen-stufe:hover{background:var(--f3)}}
.cloud-teilen-zeichen{display:grid;place-items:center;flex:none;color:var(--zweit)}
.cloud-teilen-zeichen .ic{width:var(--ic-24);height:var(--ic-24)}
.cloud-teilen-stufe.on .cloud-teilen-zeichen{color:var(--akzent-text)}
.cloud-teilen-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.cloud-teilen-wort{font-weight:var(--gewicht-halb)}
.cloud-teilen-satz{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.cloud-teilen-haken{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--akzent-text);visibility:hidden}
.cloud-teilen-stufe.on .cloud-teilen-haken{visibility:visible}
.cloud-teilen-link{display:flex;flex-direction:column;gap:var(--abstand-4)}
.cloud-teilen-link[hidden]{display:none}
.cloud-teilen-url{box-sizing:border-box;width:100%;min-height:var(--hoehe-feld);padding:0 var(--abstand-4);border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-family:var(--mono);font-size:max(16px,var(--grad-2))}
.cloud-teilen-knoepfe{display:flex;flex-wrap:wrap;gap:var(--abstand-4)}
.cloud-teilen-knopf{display:inline-flex;align-items:center;gap:var(--abstand-3)}
.cloud-teilen-knopf .ic{width:var(--ic-18);height:var(--ic-18)}
.prof-geteilt{display:flex;flex-direction:column;gap:var(--abstand-4)}
.prof-geteilt-kopf{display:flex;align-items:center;gap:var(--abstand-4)}
.prof-geteilt-zurueck{display:inline-flex;align-items:center;gap:var(--abstand-2)}
.prof-geteilt-zurueck .ic{width:var(--ic-18);height:var(--ic-18)}
.prof-geteilt-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--abstand-4)}
.prof-geteilt-kachel{display:flex;flex-direction:column;gap:var(--abstand-2);min-width:0;margin:0;padding:0;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.prof-geteilt-bild{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;background:var(--f1);color:var(--zweit)}
.prof-geteilt-bild img,.prof-geteilt-bild video{width:100%;height:100%;object-fit:cover;display:block}
.prof-geteilt-bild .ic{width:var(--ic-28);height:var(--ic-28)}
.prof-geteilt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--grad-2)}
/* Info-Ansicht einer Datei (App-Session 09.11.2026, schlicht; das Aussehen kommt mit Scheibe 15c) */
.cloud-info-ansicht{display:flex;flex-direction:column;gap:var(--abstand-8)}
.cloud-info-bild{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:160px;max-height:min(60vh,560px);margin:0;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;background:var(--f1);color:var(--zweit);cursor:zoom-in}
.cloud-info-bild img,.cloud-info-bild video{display:block;max-width:100%;max-height:min(60vh,560px);object-fit:contain}
.cloud-info-bild>.ic{width:var(--ic-28);height:var(--ic-28)}
.cloud-info-bild>.cloud-info-spielen{position:absolute;width:var(--ic-28);height:var(--ic-28);color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.cloud-info-liste{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--abstand-3) var(--abstand-8);margin:0}
.cloud-info-liste dt{color:var(--zweit)}
.cloud-info-liste dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cloud-info-text{display:flex;flex-direction:column;gap:var(--abstand-8)}
.cloud-info-text:empty{display:none}
.cloud-info-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-4)}
.cloud-info-titel{margin:0;font-size:inherit;color:var(--zweit);font-weight:var(--gewicht-halb)}
.cloud-info-prompt{margin:var(--abstand-3) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.cloud-info-link{overflow-wrap:anywhere}
.cloud-info-aktionen{display:flex;flex-wrap:wrap;gap:var(--abstand-4)}
.cloud-info-knopf{display:inline-flex;align-items:center;gap:var(--abstand-3)}
.cloud-info-knopf .ic{width:var(--ic-18);height:var(--ic-18)}
/* F10 Ansicht ohne Vorschau und Text */
.cloud-pre{margin:0;padding:var(--abstand-6);border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:var(--f1);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.cloud-info>p:first-child{color:var(--zweit);font-size:var(--grad-3);font-variant-numeric:tabular-nums}
.cloud-verschieben{display:flex;flex-direction:column}
@media(min-width:760px){
  .cloud-kopf{flex-wrap:nowrap;padding-top:var(--abstand-3);padding-bottom:var(--abstand-3)}
  .cloud-pfad{flex:1 1 auto;font-size:var(--grad-3);line-height:var(--grad-3-zh)}
  .cloud-pfad>.cloud-zurueck{display:none}
  .cloud-werkzeug{flex:none;justify-content:flex-end;margin-left:auto;gap:var(--abstand-2)}
  .cloud-fuss{padding-bottom:calc(var(--abstand-3) + env(safe-area-inset-bottom,0px))}
  .cloud-such{flex:0 1 22rem}
  .cloud-name{font-size:var(--grad-3);line-height:var(--grad-3-zh)}
  .cloud-liste .cloud-name{font-size:var(--grad-4);line-height:var(--grad-4-zh)}
  .cloud-liste .cloud-meta{font-size:var(--grad-2);line-height:var(--grad-2-zh)}
}
@media(max-width:759px){.cloud-pfad>:is(.cloud-pfad-stufe,.cloud-pfad-trenner){display:none}}
/* F14 Aus Hive Cloud im Studio: Filter wie die Cloud, Zählung, Raster mit drei Spalten (auch im Dialog am Computer), gewählt mit Ring innen und Nummer wie im Prompt */
.cloud-wahl{display:flex;flex-direction:column;gap:var(--abstand-5)}
.cloud-wahl .filterzeile{display:flex;flex-wrap:nowrap;gap:var(--abstand-3);margin:calc(-1 * var(--abstand-3)) calc(-1 * var(--abstand-2));padding:var(--abstand-3) var(--abstand-2);overflow-x:auto;scrollbar-width:none}
.cloud-wahl .filterzeile::-webkit-scrollbar{display:none}
.cloud-wahl .filterzeile>.ed-chip{flex:none}
.cloud-wahl .zaehlung{margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.cloud-wahl-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-5) var(--abstand-4)}
.cloud-wahl .datei-kachel{position:relative;display:flex;flex-direction:column;gap:var(--abstand-3);min-width:0;margin:0;padding:0;border:0;border-radius:var(--r-m);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cloud-wahl .dk-bild{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;overflow:hidden;border-radius:var(--r-m);background:color-mix(in srgb,var(--art) 14%,var(--f1));color:var(--art);outline:var(--rand) solid var(--linie);outline-offset:calc(-1 * var(--rand))}
.cloud-wahl .dk-bild img,.cloud-wahl .dk-bild video{display:block;width:100%;height:100%;object-fit:cover}
.cloud-wahl .dk-bild .ic{width:var(--ic-28);height:var(--ic-28)}
.cloud-wahl .datei-kachel.gewaehlt .dk-bild{outline:var(--rand-stark) solid var(--akzent);outline-offset:calc(-1 * var(--rand-stark))}
.cloud-wahl .dk-wahl{position:absolute;top:var(--abstand-3);right:var(--abstand-3);display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--ic-24);height:var(--ic-24);padding:0 var(--abstand-2);border:var(--rand-stark) solid var(--buehne-weiss);border-radius:var(--r-voll);background:var(--glas-dunkel)}
.cloud-wahl .datei-kachel.gewaehlt .dk-wahl{border-color:var(--akzent-rand);background:var(--akzent)}
.cloud-wahl .dk-wahl b{color:var(--auf-akzent);font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-fett);line-height:1}
.cloud-wahl .dk-name{overflow:hidden;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);text-overflow:ellipsis;white-space:nowrap}
.cloud-wahl-mehr{align-self:center}
.cloud-wahl-mehr[hidden],.cloud-wahl-leer[hidden]{display:none}
.cloud-wahl-fuss{position:sticky;bottom:0;margin:0 calc(-1 * var(--abstand-2));padding:var(--abstand-4) var(--abstand-2) calc(var(--abstand-4) + env(safe-area-inset-bottom,0px));border-top:var(--rand) solid var(--linie);background:var(--schweb)}
.cloud-wahl-nehmen{width:100%}
.cloud-verschieben .fwd-row.on{color:var(--akzent-text)}
.app[data-ziel]:not([data-ziel="chats"]) .col>:is(.side-head,.nudge,.side-tabs,.side-scroll,.chat-sel-head,.chat-sel-bar){display:none}
.app[data-ziel]:not([data-ziel="chats"]) .pane>.leerzustand>:not(.zeichen){display:none}
.ziel-inhalt{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}
.ziel-seite .callhist{padding:var(--abstand-2) var(--polster-zeile)}
.ziel-seite[data-zielseite="studio"] .ziel-inhalt{display:flex;flex-direction:column}
.ziel-seite[data-zielseite="studio"] .leerzustand{padding:var(--abstand-10) var(--abstand-8)}
/* Ich (C37 vorläufig, Bereiche mit eigener Form erst mit 5a): Profil oben, Bereiche, Rechtliches, Abmelden und „Konto löschen“ als leiser Link. */
.ich-profil,.bereich{display:flex;align-items:center;box-sizing:border-box;width:100%;border:0;background:none;color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.ich-profil{gap:var(--abstand-7);min-height:calc(var(--zeile-bereich) + var(--abstand-10));padding:var(--abstand-6) var(--polster-zeile);border-bottom:var(--rand) solid var(--linie)}
.ich-profil .foot-prof{flex:none;cursor:inherit}
.ich-profil .ip-text,.bereich .bereich-text{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--abstand-1)}
.ich-profil .ip-name{font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-fett);overflow-wrap:anywhere}
.ich-profil .ip-unter{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);overflow-wrap:anywhere}
:is(.ich-profil,.bereich)>.ic:last-child{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.bereich-liste{margin:0;padding:var(--abstand-4) 0;list-style:none}
.bereich{gap:var(--abstand-6);min-height:var(--zeile-bereich);padding:var(--abstand-3) var(--polster-zeile)}
.bereich>.ic:first-child{flex:none;width:var(--ic-20);height:var(--ic-20);margin:0 var(--abstand-2);color:var(--zweit)}
.bereich .bereich-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb);hyphens:auto;overflow-wrap:break-word}
.bereich .bereich-unter{color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh)}
.bereich .bereich-unter .zahl{color:var(--text);font-family:var(--mono);font-variant-numeric:tabular-nums}
.bereich-liste .bereich-trenn{height:var(--rand);margin:var(--abstand-3) var(--polster-zeile);background:var(--linie)}
@media(hover:hover){:is(.ich-profil,.bereich):hover{background:var(--f3)}.ich-profil .foot-prof:hover{outline:0}}
:is(.ich-profil,.bereich):active{background:var(--linie-2)}
:is(.ich-profil,.bereich):focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.ich-recht{padding:var(--abstand-6) var(--polster-zeile) 0}
.ich-recht h2{margin:0 0 var(--abstand-2);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.ich-recht .links{display:flex;flex-wrap:wrap;gap:0 var(--abstand-6);margin-left:calc(-1 * var(--abstand-3))}
.ich-recht a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--treffer-min);min-height:var(--treffer-min);padding:0 var(--abstand-3);box-sizing:border-box;border-radius:var(--r-xs);color:var(--akzent-text);font-size:var(--grad-3);font-weight:var(--gewicht-halb);text-decoration:none}
@media(hover:hover){.ich-recht a:hover{text-decoration:underline}}
.ich-recht a:active{background:var(--f3)}
.ich-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4) var(--abstand-8);padding:var(--abstand-10) var(--polster-zeile) var(--abstand-10)}
.ich-fuss button{display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);box-sizing:border-box;min-height:var(--hoehe-knopf);border-radius:var(--r-s);font:inherit;font-size:var(--grad-3);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ich-fuss .ich-abmelden{padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);background:transparent;color:var(--text);font-weight:var(--gewicht-halb)}
.ich-fuss .ich-abmelden .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
.ich-fuss .ich-loeschen{padding:0 var(--abstand-7);border:var(--rand) solid transparent;background:none;color:var(--rot);font-weight:var(--gewicht-halb)} /* B2 Gefahr-Text (3b-2): rot mit Wort, kein Rand */
@media(hover:hover){.ich-fuss .ich-abmelden:hover{background:var(--f3)}.ich-fuss .ich-loeschen:hover{background:var(--rot-leise)}}
.ich-fuss .ich-abmelden:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ich-fuss .ich-loeschen:active{background:var(--rot-leise);transform:scale(calc(1 - .03 * var(--bewegung)))}
@media(min-width:760px){.ich-profil .ip-name{font-size:var(--grad-4);line-height:var(--grad-4-zh)}.bereich .bereich-name{font-size:var(--grad-3);line-height:var(--grad-3-zh)}}
/* Leiste (D1) und Rail (D2): Ziel mit Zeichen in der Sechseck-Kontur (aktiv in Akzent-Text), Wort darunter, Zähler oben rechts innerhalb der
   Leiste. Eine Tab-Station je Leiste, Pfeiltasten wechseln (zielNavTasten). Am Handy steht die Leiste nur auf den Startseiten: nicht im
   offenen Chat, nicht auf den Unterseiten Neuer Chat und Anfragen, nicht beim Auswählen von Chats und nicht, solange ein Feld in der Liste
   den Fokus hat (Tastatur offen). */
.nav-unten{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-content:center;gap:var(--abstand-1);box-sizing:border-box;min-height:var(--leiste-h);padding:var(--abstand-2) calc(var(--abstand-4) + env(safe-area-inset-right,0px)) calc(var(--abstand-2) + env(safe-area-inset-bottom,0px)) calc(var(--abstand-4) + env(safe-area-inset-left,0px));border-top:var(--rand) solid var(--linie);background:var(--f1)}
/* Henny 07.11. abends: die Leiste bleibt immer zu sehen (Chat, Unterseiten, Studio), ausblenden geht mit dem Pfeil (.nav-klapp);
   weg ist sie nur beim Auswählen von Chats (eigene Leiste) und solange getippt wird (Tastatur) */
@media(max-width:759px){.col.chat-selecting~.nav-unten{display:none}}
@media(max-width:759px){.col:has(:is(input,textarea,select):focus)~.nav-unten{display:none}}
@media(max-width:759px){.app:has(>.pane :is(input,textarea,select,[contenteditable="true"]):focus)>.nav-unten,body:has(.modal.gen :is(input,textarea,select):focus) .app>.nav-unten{display:none}}
@media(max-width:759px){.app:has(>.nav-unten) .pane .composer{padding-bottom:var(--comp-unten)}} /* die Leiste darunter trägt die Safe Area */
.nav-unten .ziel,.rail .ziel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--abstand-1);box-sizing:border-box;min-width:0;min-height:var(--hoehe-kopf);padding:var(--abstand-2) var(--abstand-1);border:0;border-radius:var(--r-s);background:none;color:var(--zweit);font:inherit;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel);cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.nav-unten .ziel{min-height:var(--leiste-ziel)}
.ziel .ziel-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(hover:hover){.nav-unten .ziel:hover,.rail .ziel:hover{background:var(--f3);color:var(--text)}}
.nav-unten .ziel:active,.rail .ziel:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.nav-unten .ziel[aria-current],.rail .ziel[aria-current]{color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.ziel .ziel-ic{position:relative;display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-desktop)}
.ziel .ziel-ic>.hx{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--akzent-text);stroke-width:var(--hx-strich);opacity:0;transition:opacity var(--dauer) var(--kurve)}
.ziel[aria-current] .ziel-ic>.hx{opacity:1}
.ziel .ziel-ic>.ic{position:relative;width:var(--ic-24);height:var(--ic-24)}
.ziel .ziel-zaehler{position:absolute;top:calc(-1 * var(--abstand-2));right:calc(-1 * var(--abstand-7));z-index:var(--ebene-auf);isolation:isolate;display:inline-grid;place-items:center;box-sizing:border-box;min-width:1.5em;height:1.75em;padding:0 .3em;color:var(--auf-akzent);font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-fett);line-height:var(--zh-eng);letter-spacing:0;font-variant-numeric:tabular-nums}
.ziel .ziel-zaehler::before,.ziel .ziel-zaehler::after{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);background:var(--akzent-rand);clip-path:polygon(50% 2.5%,97% 26.25%,97% 73.75%,50% 97.5%,3% 73.75%,3% 26.25%)}
.ziel .ziel-zaehler::after{inset:var(--rand);background:var(--akzent)}
.ziel .ziel-zaehler[hidden]{display:none}
.rail{flex-direction:column;align-items:center;gap:var(--abstand-3);box-sizing:border-box;width:calc(var(--rail-breite) + env(safe-area-inset-left,0px));min-height:0;padding:calc(var(--abstand-6) + env(safe-area-inset-top,0px)) 0 calc(var(--abstand-6) + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);overflow-x:hidden;overflow-y:auto;border-right:var(--rand) solid var(--linie-2);background:var(--f1)}
.rail .rail-logo{flex:none;display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);margin-bottom:var(--abstand-4);color:var(--marke)}
.rail .rail-logo .ic{width:var(--ic-28);height:var(--ic-28)}
.rail .ziel,.rail .rail-guthaben{flex:none;width:calc(100% - var(--abstand-4));min-height:var(--hoehe-kachel)}
.rail .abstand{flex:1}
.rail .ziel .foot-prof{display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-desktop);border-radius:0;cursor:inherit}
.rail .ziel[aria-current] .foot-prof .av{box-shadow:0 0 0 var(--rand-stark) var(--akzent-text)}
@media(hover:hover){.rail .ziel .foot-prof:hover{outline:0}}
.rail .rail-guthaben{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--abstand-1);box-sizing:border-box;padding:var(--abstand-2) var(--abstand-1);border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.rail .rail-guthaben .cp-mark{order:-1;width:var(--ic-24);height:var(--ic-24)}
.rail .rail-guthaben .cp-n{max-width:100%;overflow:hidden;font-size:var(--grad-1);line-height:var(--grad-1-zh);text-overflow:ellipsis}
@media(hover:hover){.rail .rail-guthaben:hover{background:var(--f3)}}
.rail .rail-guthaben:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Navigation ein- und ausklappen (Henny 07.11. abends: "mit einem Toggle-Pfeil unten ausblenden … oder nach links zur Seite auf Desktop,
   so dass man einen Fullscreen-View hat"). Handy: Pfeil rechts in der Leiste, eingeklappt ein Streifen in der Safe Area mit dem Pfeil;
   Computer: Pfeil unten in der Rail, eingeklappt ein schmaler Streifen links. */
.nav-klapp{display:grid;place-items:center;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--zweit);font:inherit;cursor:pointer}
.nav-klapp .ic{width:var(--ic-18);height:var(--ic-18);transition:transform var(--dauer) var(--kurve-hinein)}
@media(hover:hover){.nav-klapp:hover{background:var(--f3);color:var(--text)}}
.nav-klapp:active{background:var(--f3)}
.nav-unten{position:relative;padding-right:calc(var(--abstand-4) + var(--hoehe-dicht) + var(--abstand-2) + env(safe-area-inset-right,0px))}
.nav-unten>.nav-klapp{position:absolute;top:var(--abstand-2);right:calc(var(--abstand-2) + env(safe-area-inset-right,0px));bottom:calc(var(--abstand-2) + env(safe-area-inset-bottom,0px));width:var(--hoehe-dicht)}
.nav-unten>.nav-klapp .ic{transform:rotate(180deg)}
.app.nav-zu>.nav-unten{min-height:0;padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);border-top-color:transparent}
.app.nav-zu>.nav-unten>.ziel{display:none}
.app.nav-zu>.nav-unten>.nav-klapp{position:static;justify-items:end;width:100%;height:max(1.5rem,env(safe-area-inset-bottom,0px));padding:0 calc(var(--abstand-2) + var(--hoehe-dicht) / 2 - var(--ic-18) / 2);border-radius:0}
.app.nav-zu>.nav-unten>.nav-klapp .ic{transform:none}
/* Henny 07.11. spät: am Handy "sehr großer Abstand nach oben und nach unten" an der Leiste, und zwischen Erstellen und der Leiste eine
   Lücke. Die Leiste wird so knapp wie eine Tab-Leiste in iOS (Kachel 48, darunter nur die Safe Area), und was über ihr liegt, rechnet
   die Safe Area nicht noch einmal ein (sie trägt die Leiste bzw. ihr eingeklappter Streifen). */
@media(max-width:759px){
  .app>.nav-unten{min-height:0;padding-top:var(--abstand-1);padding-bottom:max(var(--abstand-1),env(safe-area-inset-bottom,0px))}
  .nav-unten .ziel{min-height:calc(var(--hoehe-tipp) + var(--abstand-2));padding-top:var(--abstand-1);padding-bottom:var(--abstand-1)}
  .nav-unten .ziel .ziel-ic{height:calc(var(--hoehe-dicht) - var(--abstand-2))}
  .nav-unten>.nav-klapp{top:var(--abstand-1);bottom:max(var(--abstand-1),env(safe-area-inset-bottom,0px))}
  .app:has(>.nav-unten) .accept-bar{padding-bottom:.7rem}
  .app:has(>.nav-unten) .privat-wartet{padding-bottom:var(--abstand-6)}
  .app:has(>.nav-unten) :is(.ich-bereich,.darstellung,.plans.guthaben-seite){padding-bottom:var(--abstand-16)}
  .modal-ov.st-rahmen.st-unten-belegt .ig-dock{padding-bottom:var(--abstand-4)}
}
/* Chat neben dem Studio (Henny 07.11. spät): an der Trennlinie ziehen wie bei der Chatliste, mit dem Knopf darauf zur Seite einklappen;
   eingeklappt schwebt das Profilbild des Chatpartners rechts, ein Tipp oder Ziehen nach links holt den Chat zurück. */
.chat-griff{position:absolute;top:0;bottom:0;right:calc(-1 * var(--abstand-2));width:var(--abstand-4);z-index:3;cursor:col-resize;touch-action:none}
.chat-griff[hidden],.chat-blase[hidden]{display:none}
@media(hover:hover){.chat-griff:hover{background:color-mix(in srgb,var(--akzent) 55%,transparent)}}
.chat-griff.zieht{background:color-mix(in srgb,var(--akzent) 55%,transparent)}
.chat-griff-zu{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-voll);background:var(--f2);color:var(--zweit);transform:translate(-50%,-50%);cursor:pointer}
.chat-griff-zu .ic{width:var(--ic-18);height:var(--ic-18);transform:rotate(90deg)}
@media(hover:hover){.chat-griff-zu:hover{background:var(--f3);color:var(--text)}}
.chat-blase{position:fixed;top:50%;right:calc(var(--abstand-6) + env(safe-area-inset-right,0px));z-index:calc(var(--ebene-dialog) + 5);display:grid;place-items:center;width:calc(var(--hoehe-tipp) + var(--abstand-4));height:calc(var(--hoehe-tipp) + var(--abstand-4));margin:0;padding:0;border:var(--rand-stark) solid var(--akzent-rand);border-radius:var(--r-voll);background:var(--f2);box-shadow:var(--schatten-2);cursor:grab;touch-action:none;transform:translateY(-50%)}
.chat-blase .av{width:100%!important;height:100%!important;font-size:var(--grad-4)!important}
.chat-blase.zieht{cursor:grabbing}
@media(min-width:760px){.app.studio-neben.chat-zu{grid-template-columns:auto minmax(0,1fr) 0}.app.studio-neben.chat-zu>.pane{visibility:hidden}}
/* Studio: X statt Zurück (Henny 07.11. spät) */
.st-zurueck.st-zu .ic{transform:rotate(45deg)}
.rail>.nav-klapp{flex:none;width:calc(100% - var(--abstand-4));min-height:var(--hoehe-dicht)}
.rail>.nav-klapp .ic{transform:rotate(-90deg)}
@media(min-width:760px){.app.nav-zu>.rail{width:calc(var(--abstand-8) + env(safe-area-inset-left,0px));padding:0 0 0 env(safe-area-inset-left,0px);gap:0}
  .app.nav-zu>.rail>:not(.nav-klapp){display:none}
  .app.nav-zu>.rail>.nav-klapp{width:100%;height:100%;align-items:end;padding-bottom:calc(var(--abstand-6) + env(safe-area-inset-bottom,0px));border-radius:0}
  .app.nav-zu>.rail>.nav-klapp .ic{transform:rotate(90deg)}}
/* Studio im Rahmen (Henny 07.11. abends): neben der Navigation statt darüber; aus einem Chat heraus am Handy unter dem Kopf des Chats,
   am Computer mit dem Chat als schmaler Spalte rechts. Die Ränder misst studioRahmen und setzt sie an der Ebene. */
.modal-ov.st-rahmen{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:transparent;padding:0;place-items:stretch}
.modal-ov.st-rahmen>.modal.gen,.modal-ov.st-rahmen>.modal.wide.gen{width:100%;min-width:0;max-width:none;height:100%;max-height:none;border-width:0;border-radius:0;box-shadow:none}
@media(max-width:759px){.modal-ov.st-rahmen.st-oben-frei>.modal.gen>.modal-head{padding-top:calc(var(--abstand-4) + var(--abstand-2) + var(--abstand-5) + env(safe-area-inset-top,0px))}
  .modal-ov.st-rahmen:not(.st-oben-frei)>.modal.gen>.modal-head::before{content:none}}
@media(min-width:760px){.modal-ov.st-eng .modal.gen>.modal-head .gen-tabs{display:none}.modal-ov.st-eng .st-reiter-wahl{display:inline-flex}.modal-ov.st-eng .modal.gen>.modal-head .credit-pill{margin-left:auto}}
@media(min-width:760px){.app.studio-neben{grid-template-columns:auto minmax(0,1fr) var(--chat-neben,min(26rem,40vw))}.app.studio-neben>.col{visibility:hidden}.app.studio-neben>.pane{border-left:var(--rand) solid var(--linie-2)}}


/* Profil-Nudge (kein Name/Handle gesetzt → andere sehen „Mitglied"): Hinweis-Kasten, Link in Akzent-Text (Honig hatte
   im Hellen 1,9:1). */
.nudge{margin:var(--abstand-4) var(--abstand-6);padding:var(--abstand-5) var(--abstand-6);background:var(--f2);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);font-size:var(--grad-2);color:var(--zweit);line-height:var(--zh-text)}
.nudge a{color:var(--akzent-text);text-decoration:none;font-weight:var(--gewicht-halb)}
@media(hover:hover){.nudge a:hover{text-decoration:underline}}
.side-scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding-bottom:.4rem}/* Nav-Pill sitzt jetzt im Fuß-Band (nicht mehr über der Liste) */
/* Abschnitt „Kontakt hinzufügen“ (C4 Kapitälchen), Feld (B7, Rand in Feldrand mit 3:1) und Knopf mit Rand (B5), je
   44 am Handy; Herkunft einer Anfrage als Plakette mit Rand (C7 .tag.rand.grau).
   .sect und .add-hint stehen auch in Dialogen anderer Scheiben (Podcast, Pläne, KI-Zustimmung, Profil, Anrufverlauf,
   Aufnahme im Anruf …): dort gelten weiter die bisherigen Regeln, die D-Werte nur in der Listenspalte (.col). */
.sect{padding:.5rem .8rem .2rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--zweit);display:flex;align-items:center;gap:.5rem}
.col .sect{display:flex;align-items:center;gap:var(--abstand-4);padding:var(--abstand-5) var(--polster-zeile) var(--abstand-2);font-size:var(--grad-1);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.add-row{padding:var(--abstand-2) var(--abstand-6)}
.add-row form{display:flex;gap:var(--abstand-4)}
.add-sub{padding:var(--abstand-4) var(--polster-zeile) var(--abstand-1);font-size:var(--grad-1);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.src-pill{flex:none;display:inline-flex;align-items:center;min-height:1.5em;margin-left:auto;padding:0 .5em;border:var(--rand) solid var(--feldrand);border-radius:var(--r-xs);background:transparent;color:var(--zweit);font-size:var(--grad-1);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-plakette);line-height:var(--zh-eng);white-space:nowrap}
.add-row input{flex:1;min-width:0;min-height:var(--hoehe-feld);background:var(--f1);border:var(--rand) solid var(--feldrand);color:var(--text);border-radius:var(--r-s);padding:0 var(--abstand-6);font:inherit;font-size:var(--grad-4)}
.add-row input::placeholder{color:var(--zweit);opacity:1}
.add-row button{flex:none;display:grid;place-items:center;min-width:var(--hoehe-ik);min-height:var(--hoehe-ik);padding:0 var(--abstand-4);background:transparent;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);color:var(--text);font-size:var(--grad-6);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.add-row button:hover{background:var(--f3)}}
.add-row button:active{background:var(--linie-2)}
.add-hint{padding:.1rem .8rem .4rem;font-size:.78rem;color:var(--zweit)}
.add-hint.err{color:var(--rot)}
.col .add-hint{padding:var(--abstand-1) var(--polster-zeile) var(--abstand-4);font-size:var(--grad-2);color:var(--zweit)}
.col .add-hint.err{color:var(--rot)}
/* Leerzustand (D18, Scheibe 1a). Mitte ohne offenen Chat (leereMitte, aus buildShell und closeConversation): Wabe in
   Marke-Text, Satz, zwei Knöpfe, Hinweis, darunter das Wabenraster als kaum sichtbarer Grund (A13). In der Liste
   (leereZeile) klein in Zweittext. Die Knöpfe bekommen ihre endgültige Form mit 3b-2. */
.leerzustand{position:relative;isolation:isolate;flex:1;display:grid;place-content:center;justify-items:center;gap:var(--abstand-7);padding:var(--abstand-10) var(--abstand-20);text-align:center;color:var(--text)}
.leerzustand::before{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);pointer-events:none;background:var(--zweit);opacity:.13;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.712 8V24L13.856 32 0 24V8Z M13.856 32V48' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"),radial-gradient(closest-side at 50% 46%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);-webkit-mask-size:27.713px 48px,100% 100%;-webkit-mask-composite:source-in;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.712 8V24L13.856 32 0 24V8Z M13.856 32V48' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"),radial-gradient(closest-side at 50% 46%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);mask-size:27.713px 48px,100% 100%;mask-composite:intersect}
.leerzustand .zeichen{display:grid;place-items:center;color:var(--marke-text)}
.leerzustand .zeichen .ic{width:calc(var(--ic-20) * 2);height:calc(var(--ic-20) * 2)}
.leerzustand .satz{margin:0;max-width:28em;font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-knapp)}
.leerzustand .knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--abstand-4)}
.leerzustand .hinweis{margin:0;max-width:32em;font-size:var(--grad-2);line-height:var(--zh-weit);color:var(--zweit)}
.lz-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);min-height:var(--hoehe-knopf);padding:0 var(--abstand-8);background:transparent;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.lz-knopf .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.lz-knopf:hover{background:var(--f3)}}
.lz-knopf:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.lz-knopf.haupt{background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
@media(hover:hover){.lz-knopf.haupt:hover{background:var(--akzent-hover)}}
.lz-knopf.haupt:active{background:var(--akzent-gedrueckt)}
.leerzustand.in-zeile{flex:none;gap:var(--abstand-4);padding:var(--abstand-10) var(--seite-handy);font-size:var(--grad-2);line-height:var(--zh-weit);color:var(--zweit)}
.leerzustand.in-zeile::before{content:none}
.leerzustand.in-zeile .zeichen{color:var(--zweit)}
.leerzustand.in-zeile .zeichen .ic{width:var(--ic-24);height:var(--ic-24)}
.leerzustand.in-zeile .satz{max-width:24em;font-size:inherit;line-height:inherit;font-weight:var(--gewicht-mittel);letter-spacing:0}
/* Laden (D19): bis die Chatliste das erste Mal gezeichnet ist, ist ihr Feld leer; dann stehen dort Platzhalterzeilen
   in Fläche 2 (Avatar, Name, Vorschau). renderConversations füllt das Feld bei jedem Lauf, danach greift die Regel
   nicht mehr. Ohne Bewegung (bauplan 4.6 Nr. 2). */
[data-convlist]:empty{min-height:calc(var(--zeile-chat) * 5);background:radial-gradient(circle at calc(var(--polster-zeile) + 20px) 50%,var(--f2) 19.5px,transparent 20px) 0 0/100% var(--zeile-chat) repeat-y,linear-gradient(transparent calc(50% - 11px),var(--f2) calc(50% - 11px),var(--f2) calc(50% - 2px),transparent calc(50% - 2px)) calc(var(--polster-zeile) + 52px) 0/40% var(--zeile-chat) repeat-y,linear-gradient(transparent calc(50% + 4px),var(--f2) calc(50% + 4px),var(--f2) calc(50% + 11px),transparent calc(50% + 11px)) calc(var(--polster-zeile) + 52px) 0/62% var(--zeile-chat) repeat-y}
/* Spaltengriff (D4): beim Ziehen und bei Hover eine 2-px-Linie in Akzent-Text statt der getönten Fläche. */
.col > .col-griff.zieht{background:linear-gradient(var(--akzent-text),var(--akzent-text)) 50% 0/var(--rand-stark) 100% no-repeat}
@media(hover:hover){.col > .col-griff:hover{background:linear-gradient(var(--akzent-text),var(--akzent-text)) 50% 0/var(--rand-stark) 100% no-repeat}}

/* Chat-Zeile (C1, Scheibe 1a): Avatar, oben Name mit Status-Zeichen und Zeit, darunter Vorschau und Zähler. Höhen in
   px mal Dichte, Schrift in tp. Fokusring innen, weil die Liste rollt und abschneidet. Gewählt (offener Chat) mit
   Fläche 2 und 2-px-Leiste in Akzent-Text; --av-ring folgt der Fläche (Ring um den Präsenzpunkt). Seit Scheibe 12a mit logischen
   Richtungen (Einzug, Leiste, Textausrichtung), damit Arabisch und Hebräisch von rechts beginnen; links nach rechts unverändert. */
.row{display:flex;align-items:center;gap:var(--abstand-6);min-height:var(--zeile-chat);padding-block:calc(var(--abstand-4) * var(--dichte));padding-inline:calc(var(--polster-zeile) - var(--rand-stark)) var(--polster-zeile);cursor:pointer;border:0;border-inline-start:var(--rand-stark) solid transparent;background:none;width:100%;text-align:start;color:var(--text);font:inherit;transition:background-color var(--dauer) var(--kurve);--av-ring:var(--grund)}
@media(hover:hover){.row:hover{background:var(--f3);--av-ring:var(--f3)}}
.row:active{background:var(--linie-2);--av-ring:var(--linie-2)}
.row.active{background:var(--f2);border-inline-start-color:var(--akzent-text);--av-ring:var(--f2)}
@media(hover:hover){.row.active:hover{background:var(--f3);--av-ring:var(--f3)}}
.row:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.row .meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--abstand-1)}
:is([data-convlist],[data-reqlist]) > .row{border-bottom:var(--rand) solid var(--linie)}
.zeile-kopf{display:flex;align-items:center;gap:var(--abstand-4);min-width:0;min-height:var(--grad-5-zh)}
.row .name{flex:0 1 auto;min-width:0;font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-halb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .name.leise{font-weight:var(--gewicht-mittel);color:var(--zweit)}
.row .sub{display:flex;align-items:center;gap:var(--abstand-4);min-width:0;min-height:var(--grad-3-zh);font-size:var(--grad-3);line-height:var(--grad-3-zh);color:var(--zweit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.selbst-neu .sub{display:block} /* Satz direkt in .sub (ohne Kind-Span): als Block, damit „…“ greift (Browser-Schrift groß, Desktop) */
.row .sub > span:not([class]){min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(min-width:760px){.row{gap:var(--abstand-5)}.zeile-kopf{min-height:var(--grad-3-zh)}.row .name{font-size:var(--grad-3);line-height:var(--grad-3-zh)}.row .sub{font-size:var(--grad-2);line-height:var(--grad-2-zh)}}
/* Die Vorschau der letzten Nachricht: ein Zeichen, ein Text, eine Zeile. Der Vorspann (Du, Absender, Frequenz) in
   Zweittext ohne Deckkraft: mit .75 hatte er in der offenen Zeile am Desktop 4,31:1 (Zwischenstand der Scheibe 0). */
.row-vor{display:flex;align-items:center;gap:var(--abstand-2);min-width:0;flex:1}
.row-vor-wer{flex:none;color:var(--zweit)}
.row-vor-ic{width:var(--ic-16);height:var(--ic-16);flex:none}
.row-vor-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Ein verpasster Anruf ist die eine Zeile, die auffallen darf: Rot, mit Zeichen und Wort. */
.row-vor-tx.warn{color:var(--rot)}
.row-vor-tx.warn + .row-vor-ic,.row-vor:has(.warn) .row-vor-ic{color:var(--rot);opacity:1}
.row .right{display:flex;flex-direction:row;align-items:center;gap:var(--abstand-1);flex:none}
/* Zeit der letzten Nachricht rechts in der Kopfzeile, in Monospace (A14); in der Frequenzzeile direkt vor dem Zähler. */
.row-time{flex:none;margin-left:auto;font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);letter-spacing:var(--lauf-knapp);font-variant-numeric:tabular-nums;color:var(--zweit);white-space:nowrap}
.box-line .row-time{margin-left:0}
/* Zähler (C6): Sechseck in Akzent mit Kante, Zahl in Monospace, rechts in der Vorschauzeile. Zwei Flächen mit
   clip-path (Kante, darauf die Fläche); mit mehr Ziffern wird das Sechseck breit (oben und unten eine Kante). */
.badge{--hx-halb:.875em;--hx-seite:.0525em;position:relative;isolation:isolate;flex:none;display:inline-grid;place-items:center;min-width:1.75em;height:2em;margin-left:auto;padding:0 .35em;color:var(--auf-akzent);font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-fett);line-height:var(--zh-eng);letter-spacing:0;font-variant-numeric:tabular-nums}
.badge::before,.badge::after{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);background:var(--akzent-rand);clip-path:polygon(var(--hx-halb) 2.5%,calc(100% - var(--hx-halb)) 2.5%,calc(100% - var(--hx-seite)) 26.25%,calc(100% - var(--hx-seite)) 73.75%,calc(100% - var(--hx-halb)) 97.5%,var(--hx-halb) 97.5%,var(--hx-seite) 73.75%,var(--hx-seite) 26.25%)}
.badge::after{inset:var(--rand);background:var(--akzent)}
/* Archiv und Zahnrad in der Zeile (Icon-Knopf B5): 44 am Handy und auf Touch, 36 am Desktop; offen mit Fläche und Rand
   in Akzent. Sie bleiben im Zeilenknopf (bauplan 3.2, W1a.1). Am Desktop mit Maus erst bei Hover oder Fokus in der
   Zeile sichtbar, ein offenes Zahnrad bleibt (C1). */
.row-cog{position:relative;display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);border:var(--rand) solid transparent;border-radius:var(--r-s);color:var(--zweit);cursor:pointer;flex:none;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),opacity var(--dauer) var(--kurve)}
@media(hover:hover){.row-cog:hover{color:var(--text);background:var(--linie-2)}}
.row-cog.on{color:var(--akzent-text);background:var(--akzent-leise);border-color:var(--akzent-text)}
.row-cog .ic{width:var(--ic-knopf);height:var(--ic-knopf);display:block}
.row-cog:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
@media(hover:hover) and (pointer:fine){
  :is(.row,.box-line) .row-cog:not(.on){opacity:0}
  :is(.row,.box-line):is(:hover,:focus-within) .row-cog{opacity:1}
}

/* Avatar */
.av{flex:0 0 auto;position:relative;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--f2);color:var(--zweit);font-weight:700;border:1px solid var(--linie-2)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
/* Ein Buchstabe, mittig, ohne Gitter dahinter. Etwas groesser als frueher —
   er hat jetzt das ganze Feld fuer sich. */
.av .av-kurz{position:relative;z-index:1;font-weight:700;letter-spacing:0;font-size:1.05em;line-height:1;color:var(--marke)}
/* Präsenz-Punkt (Wrapper nötig, weil .av overflow:hidden den Eck-Punkt sonst wegschneidet). */
.av-wrap{position:relative;display:inline-flex;flex:0 0 auto}
.pdot{position:absolute;right:-1px;bottom:-1px;width:.72rem;height:.72rem;border-radius:50%;border:2px solid var(--grund);box-sizing:border-box}
.pdot.online{background:var(--gruen)}
.pdot.busy{background:var(--gelb)}
.pdot.offline{background:var(--zweit)}
/* Avatare in den Listen (C5, Scheibe 1a): Personen rund in ihrer Farbe (--av-*, aus listenAvFarbe), Gruppen und Notizen
   als Sechseck mit Kante. Nur unter .row und .search-res: Chat-Kopf, Anruf, Profil und Dialoge ziehen mit ihrer Scheibe
   nach (bauplan 3.2, 4.6 Nr. 12). Die Größe bleibt der Parameter von avatar(). Der Ring der Frequenz kommt als
   --fq-ring (tintRowColor): am runden Avatar als Schatten, am Sechseck als Kante (clip-path schnitte einen Schatten ab). */
.row .av-blau{--av-bg:var(--av-blau-bg);--av-fg:var(--av-blau-fg)}
.row .av-gruen{--av-bg:var(--av-gruen-bg);--av-fg:var(--av-gruen-fg)}
.row .av-lila{--av-bg:var(--av-lila-bg);--av-fg:var(--av-lila-fg)}
.row .av-rot{--av-bg:var(--av-rot-bg);--av-fg:var(--av-rot-fg)}
.row .av-teal{--av-bg:var(--av-teal-bg);--av-fg:var(--av-teal-fg)}
.row .av-sand{--av-bg:var(--av-sand-bg);--av-fg:var(--av-sand-fg)}
.row .av-grau{--av-bg:var(--av-grau-bg);--av-fg:var(--av-grau-fg)}
.row .av,.search-res .av{border:0;background:var(--av-bg,var(--f3));color:var(--av-fg,var(--text));font-weight:var(--gewicht-halb);box-shadow:0 0 0 var(--rand-stark) var(--fq-ring,transparent)}
.row .av .av-kurz,.search-res .av .av-kurz{color:inherit;font-weight:var(--gewicht-halb);font-size:1em}
/* Ohne Bild und ohne Initiale (gelöschtes Konto, Person ohne Namen): das Personen-Zeichen (C1, C5) als Maske. */
.row .av:empty::before{content:"";width:50%;height:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.row :is(.grp-av,.selbst-av){position:relative;isolation:isolate;flex:none;border-radius:0;background:none;color:var(--av-fg,var(--text));--av-kante:color-mix(in srgb,var(--av-fg,var(--text)) var(--av-kante-anteil),transparent)}
.row :is(.grp-av,.selbst-av)::before,.row :is(.grp-av,.selbst-av)::after{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);background:var(--fq-ring,var(--av-kante));clip-path:polygon(50% 2.5%,97% 26.25%,97% 73.75%,50% 97.5%,3% 73.75%,3% 26.25%)}
.row :is(.grp-av,.selbst-av)::after{inset:var(--hx-rand,var(--hx-strich));background:var(--av-bg,var(--f3))}
.row :is(.grp-av,.selbst-av)[style*="--fq-ring"]{--hx-rand:var(--rand-stark)}
.row :is(.grp-av,.selbst-av) svg{width:50%;height:50%}
/* Präsenz in der Liste (C5): Punkt 12 px unten rechts, Ring in der Farbe der Zeile, online Grün, beschäftigt Gelb. */
.row .pdot{right:-2px;bottom:-2px;width:var(--ic-12);height:var(--ic-12);border:var(--rand-stark) solid var(--av-ring,var(--grund));background-clip:padding-box}
.row .pdot.online{background-color:var(--gruen)}
.row .pdot.busy{background-color:var(--gelb)}
/* Präsenz-Zeile im Peer-Profil. */
.pa-presence{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--zweit);margin:.1rem 0 .3rem}
.pa-presence .pdot{position:static;border-color:transparent}

/* Chat-Pane */
/* Scheibe 2a (D-Aussehen nach design/system): Kopf D8, Verlauf, Tagestrenner C9, Blase C10, Fuß C11, Platzhalter C25, Ältere
   laden und Zum Ende C33. Klassen, data-Attribute und die direkten Kinder von [data-msgs] bleiben (bauplan 3.3, 4.3, 4.4).
   Kopf D8: Handy Zurück 44, Avatar 36 tp, Name --grad-6, Knöpfe 44, Polster 0 8 0 4; Desktop Avatar 32 tp, Name --grad-4,
   Knöpfe 36 mit Rand, Polster 0 12 0 16 und die Höhe des Listenkopfs (3.6rem: beide Linien fluchten, bis 1b sie zusammen
   umstellt). .pane > davor, weil die Regel für die Abstände zum Rand (env) weiter unten das Polster sonst zurücksetzt. */
.chat-head{display:flex;align-items:center;gap:var(--abstand-3);padding:0 var(--abstand-4) 0 var(--abstand-2);border-bottom:var(--rand) solid var(--linie-2);box-sizing:border-box;min-height:var(--hoehe-kopf);container-type:inline-size}
.pane>.chat-head{padding:env(safe-area-inset-top) calc(var(--abstand-4) + env(safe-area-inset-right)) 0 calc(var(--abstand-2) + env(safe-area-inset-left));min-height:calc(var(--hoehe-kopf) + env(safe-area-inset-top))}
@media(min-width:760px){.pane>.chat-head{gap:var(--abstand-5);padding:calc(.6rem + env(safe-area-inset-top)) calc(var(--abstand-6) + env(safe-area-inset-right)) .6rem calc(var(--seite-handy) + env(safe-area-inset-left));min-height:3.6rem}}
.chat-head .back{display:none;place-items:center;flex:none;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.chat-head .back .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
@media(max-width:759px){.chat-head .back{display:grid}}
@media(hover:hover){.chat-head .back:hover{background:var(--f3)}}
.chat-head .back:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.chat-head .name{min-width:0;font-size:var(--grad-6);line-height:var(--grad-6-zh-eng);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:760px){.chat-head .name{font-size:var(--grad-4);line-height:var(--grad-4-zh-eng)}}
/* Avatar im Kopf (D8 mit C5): Person rund in ihrer Farbe (listenAvFarbe wie in den Listen), Gruppe und Meine Notizen als Sechseck
   mit Kante. Die Größe kommt aus den Werten (36 tp, Desktop 32 tp); buildChatPane nimmt die feste Größe von avatar() heraus. */
.chat-head>:is(.av,.grp-av,.selbst-av){flex:none;width:var(--avatar-36);height:var(--avatar-36);margin-right:var(--abstand-2);font-size:calc(var(--avatar-36) * .4)}
@media(min-width:760px){.chat-head>:is(.av,.grp-av,.selbst-av){width:var(--avatar-32);height:var(--avatar-32);margin-right:0;font-size:calc(var(--avatar-32) * .4)}}
/* Schmaler Kopf (D8: unter 18em Containerbreite wie im System, dazu jeder Kopf unter 360 px; 320-px-Gerät, große Schrift): der
   Avatar wird kleiner und verliert seinen Abstand, die Lücken zwischen den Teilen schrumpfen auf 4, zwischen den Knöpfen auf 0, damit
   Name (mindestens 3em) und alle Knöpfe mit Fokusring ganz im Kopf bleiben (der Kopf selbst ist der Container, darum über die Ränder
   der Kinder). „Beitreten“ zeigt Zeichen und Zahl mit Polster 6. Video wandert nicht ins Menü (das bräuchte Logik), es bleibt. */
@container (max-width:359px) or (max-width:18em){.chat-head>:is(.av,.grp-av,.selbst-av){width:var(--avatar-32);height:var(--avatar-32);margin-right:0;font-size:calc(var(--avatar-32) * .4)}.chat-head>:is(.av,.grp-av,.selbst-av,.htitle,.head-actions){margin-left:calc(var(--abstand-2) - var(--abstand-3))}.chat-head .head-actions{gap:0}.chat-head .head-actions .head-join{margin-right:0;padding:0 var(--abstand-3)}.chat-head .head-join .wort{display:none}}
.chat-head>.av{border:0;background:var(--av-bg,var(--f3));color:var(--av-fg,var(--text));font-weight:var(--gewicht-halb)}
.chat-head>.av .av-kurz{color:inherit;font-weight:var(--gewicht-halb);font-size:1em}
.chat-head>.av-blau{--av-bg:var(--av-blau-bg);--av-fg:var(--av-blau-fg)}
.chat-head>.av-gruen{--av-bg:var(--av-gruen-bg);--av-fg:var(--av-gruen-fg)}
.chat-head>.av-lila{--av-bg:var(--av-lila-bg);--av-fg:var(--av-lila-fg)}
.chat-head>.av-rot{--av-bg:var(--av-rot-bg);--av-fg:var(--av-rot-fg)}
.chat-head>.av-teal{--av-bg:var(--av-teal-bg);--av-fg:var(--av-teal-fg)}
.chat-head>.av-sand{--av-bg:var(--av-sand-bg);--av-fg:var(--av-sand-fg)}
.chat-head>.av-grau{--av-bg:var(--av-grau-bg);--av-fg:var(--av-grau-fg)}
.chat-head>.av:empty::before{content:"";width:50%;height:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.chat-head>:is(.grp-av,.selbst-av){position:relative;isolation:isolate;border-radius:0;background:none;color:var(--av-fg,var(--text))}
.chat-head>:is(.grp-av,.selbst-av)::before,.chat-head>:is(.grp-av,.selbst-av)::after{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);background:color-mix(in srgb,var(--av-fg,var(--text)) var(--av-kante-anteil),transparent);clip-path:polygon(50% 2.5%,97% 26.25%,97% 73.75%,50% 97.5%,3% 73.75%,3% 26.25%)}
.chat-head>:is(.grp-av,.selbst-av)::after{inset:var(--hx-strich);background:var(--av-bg,var(--f3))}
.chat-head>:is(.grp-av,.selbst-av) svg{width:50%;height:50%}

/* Verlauf: Lücke --abstand-6 mal Dichte, Polster 12 16 8 (Desktop unten 14 20 8). */
.msgs{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--abstand-6) var(--seite-handy) var(--abstand-4);display:flex;flex-direction:column;gap:calc(var(--abstand-6) * var(--dichte))}
.bubble>*{max-width:100%;min-width:0}
/* Ältere laden (C33): kleiner Knopf (32, Trefferfläche 44) oben in der Mitte, Fläche 2, Zweittext; Hover und Gedrückt Textfarbe. */
.more-top{position:relative;align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:var(--hoehe-dicht);margin-bottom:var(--abstand-4);padding:0 var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--zweit);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);cursor:pointer;transition:color var(--dauer) var(--kurve)}
.more-top::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.more-top:hover{color:var(--text)}}
.more-top:active{color:var(--text)}
/* Zum Ende (C33): rund rechts unten, 44 (Desktop 36), schwebende Fläche mit Linie 2 und Schatten 1. Versteckt auch mit
   visibility: hidden, sonst bliebe er mit Tab erreichbar und sein Fokusring unsichtbar. Die Grundregel .msg-jump steht im Bereich
   von 1b (Raster); bis 1b sie umstellt, gilt hier die D-Form (spezifischer). */
.pane>.msg-jump{right:var(--seite-handy);width:var(--hoehe-ik);height:var(--hoehe-ik);border:var(--rand) solid var(--linie-2);background:var(--schweb);color:var(--text);box-shadow:var(--schatten-1);visibility:hidden;transform:translateY(calc(var(--abstand-4) * var(--bewegung)));transition:background-color var(--dauer) var(--kurve),opacity var(--dauer) var(--kurve),transform var(--dauer) var(--kurve),visibility 0s var(--dauer)}
.pane>.msg-jump.show{visibility:visible;transform:none;transition-delay:0s}
.pane>.msg-jump .ic{width:var(--ic-24);height:var(--ic-24)}
@media(hover:hover){.pane>.msg-jump:hover{background:var(--f3);border-color:var(--feldrand)}}
.pane>.msg-jump:active{background:var(--linie-2)}
@media(min-width:760px){.pane>.msg-jump{right:var(--abstand-10)}.pane>.msg-jump .ic{width:var(--ic-20);height:var(--ic-20)}}
/* Tagestrenner (C9): Kapsel mittig über der ersten Nachricht eines Tages, ohne Linie; Fläche 1 mit Rand, Zweittext. Kein Ziel. */
.day-sep{align-self:stretch;display:flex;justify-content:center;margin:calc(var(--abstand-4) * var(--dichte)) 0;pointer-events:none}
.day-sep span{display:inline-flex;align-items:center;min-height:var(--hoehe-mini);padding:0 var(--abstand-5);border:var(--rand) solid var(--linie);border-radius:var(--r-xs);background:var(--f1);color:var(--zweit);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);white-space:nowrap}
/* Blase (C10): .bubble ist der Wrapper (Ausrichtung, Gesten, data-id, Aktionsleiste, Reaktionen), .bubble-body die Fläche. Fremd
   Fläche 2 mit Linie, eigen --akzent-leise mit --akzent-kante (Zier); eigen oder fremd zeigt die Ausrichtung. Höchstens 82 %
   breit (Desktop 480 px, unten), Radius --r-m, keine Schwänzchen. */
.bubble{max-width:82%;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;position:relative;gap:var(--abstand-3)}
.bubble.mine{align-self:flex-end;align-items:flex-end}
/* Wird gesendet: nur der Text auf Deckkraft .75, nie Fuß oder Platzhalter („wird gesendet …“ steht allein in der Blase). */
.bubble.sending>.bubble-body>.body:not(:only-child){opacity:.75}
.bubble-body{max-width:100%;min-width:0;padding:var(--abstand-4) var(--abstand-6) var(--abstand-3);border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:var(--f2);color:var(--text);font-size:var(--text-groesse);line-height:var(--zh-text);white-space:pre-wrap;overflow-wrap:anywhere;position:relative;display:flex;flex-direction:column;gap:var(--abstand-1);transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
.bubble.mine .bubble-body{background:var(--akzent-leise);border-color:var(--akzent-kante)}
/* Rückfall ohne color-mix (Safari vor 16.2, bauplan 3.3, 4.6 Nr. 18): eigene Blase und ihr KI-Feld auf Fläche 2, Kante Akzent. */
@supports not (color:color-mix(in srgb,red,blue)){.bubble.mine .bubble-body,.bubble.mine .ai-panel{background:var(--f2);border-color:var(--akzent)}}
/* Hover am Desktop: fremde Blase Fläche 3; die eigene behält Akzent-leise, dort zeigt die Aktionsleiste den Zustand. */
@media(hover:hover){.bubble:not(.mine):hover>.bubble-body{background:var(--f3)}}
.bubble-body>*{max-width:100%;min-width:0}
/* Text: fett, kursiv, unterstrichen (parseFormatting) in Textfarbe; Link in Akzent-Text, unterstrichen, mit Zeichen nach außen.
   Die Grundregeln .msg-link und .grp-sender stehen in Bereichen anderer Scheiben (6a, 3b-2); bis die sie umstellen, gelten hier
   die D-Werte (spezifischer). Gruppe: Absender über fremden Blasen in Akzent-Text, fett. */
.bubble-body .body u{text-decoration-thickness:var(--rand);text-underline-offset:.14em}
.bubble .bubble-body a.msg-link{color:var(--akzent-text);font-weight:var(--gewicht-mittel);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:var(--rand);text-underline-offset:.14em;border-radius:var(--r-strich)}
.bubble .bubble-body a.msg-link::after{content:"";display:inline-block;width:var(--ic-12);height:var(--ic-12);margin-left:var(--abstand-1);vertical-align:-.08em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5H20v6.5M20 4.5L11 13.5M19 14.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5H20v6.5M20 4.5L11 13.5M19 14.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3.5'/%3E%3C/svg%3E") center/contain no-repeat}
@media(hover:hover){.bubble .bubble-body a.msg-link:hover{text-decoration-thickness:var(--rand-stark)}}
.bubble-body>.grp-sender{margin:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-fett);color:var(--akzent-text)}
.bubble.media>.bubble-body>.grp-sender{padding:var(--abstand-1) var(--abstand-4) 0}
/* Platzhalter (C25): Medium nicht mehr verfügbar; der Satz in Zweittext. */
.bubble-body .platzhalter{color:var(--zweit)}
/* Fuß (C11): links Vorlesen (nur Text, Preis im Namen), rechts Schloss, Uhr, Zeit in Mono und bei eigenen 1:1-Nachrichten der Haken
   (Text ✓ und ✓✓ aus updateReadReceipt; gelesen in Akzent-Text). Bei grobem Zeiger mehr Luft über dem Fuß, damit die
   Trefferfläche von Vorlesen nicht in den Text darüber reicht. */
.bubble-body .bfoot{display:flex;align-items:center;justify-content:flex-end;gap:var(--abstand-6);min-height:var(--grad-1-zh);margin-top:var(--abstand-1)}
@media(pointer:coarse){.bubble-body .bfoot{margin-top:var(--abstand-5)}}
.bubble.media .bubble-body .bfoot{padding:0 var(--abstand-4) var(--abstand-1)}   /* Medien-Blase: der Fuß rückt vom schmalen Rand ab (C11) */
.bf-left{display:inline-flex;align-items:center;gap:var(--abstand-1);min-width:0;margin-inline-end:auto}
.bf-left:empty{display:none}
.bubble-body .t{display:inline-flex;align-items:center;gap:var(--abstand-2);flex:none;font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);letter-spacing:var(--lauf-knapp);font-variant-numeric:tabular-nums;color:var(--zweit);white-space:nowrap}
/* Vorlesen (C11): 20 × 16 in Zweittext, Trefferfläche 44 am Handy; die Grundregel .tts-play steht im Bereich von 6a. */
.bfoot .tts-play{position:relative;display:inline-grid;place-items:center;width:var(--ic-20);height:var(--ic-16);margin:0 0 0 calc(-1 * var(--abstand-1));padding:0;border:0;border-radius:var(--r-xxs);background:none;color:var(--zweit);opacity:1;transition:color var(--dauer) var(--kurve),background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.bfoot .tts-play::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.bfoot .tts-play .tts-ic .ic{width:var(--ic-16);height:var(--ic-16)}
@media(hover:hover){.bfoot .tts-play:hover{color:var(--text);background:var(--f3)}}
.bfoot .tts-play:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.bfoot .tts-play.loading{color:var(--akzent-text);cursor:progress}
/* Lese-Haken pro eigener Nachricht: ✓ gesendet in Zweittext, ✓✓ gelesen in Akzent-Text. */
.bubble .tick{font-size:var(--grad-2);line-height:1;letter-spacing:-.04em;color:var(--zweit)}
.bubble.mine .tick.read{color:var(--akzent-text)}
/* Aktionsknöpfe (Kopieren · Weiterleiten · Antworten · Reagieren · Löschen) = SCHWEBENDE
   Leiste über der Blase, seit Scheibe 2c nicht mehr im Bild (Hennys Vorgabe 24.10.: keine Hover-Leiste): ihre Knöpfe bleiben im
   DOM als Quelle des Menüs zur Nachricht (data-aktion) und für Prüfskripte (.meta-btn.ai-btn, .react-btn). */
.bubble-actions{display:none}
.meta-icons{display:flex;gap:var(--abstand-1)}
/* Reaktions-Chips: eigener Knoten am Wrapper, direkt unter der Blase, auf der Sender-Seite. */
.bubble>.rx-zone{margin-top:.15rem}
/* Text in der Blase lässt sich nur markieren, solange ihr Menü offen ist (.nm-offen, am Handy das Abbild .nm-abbild); so markiert
   der lange Druck nichts und zeigt keinen Callout und keine Lupe. Das KI-Feld bleibt markierbar (der lange Druck öffnet dort nichts).
   Die Blase ist ein Tab-Stopp: Ring aus der globalen Regel, mit dem Radius der Blase. */
.bubble{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bubble.nm-offen,.nm-frei>.bubble.nm-abbild,.bubble .ai-panel{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.bubble .ai-panel button{-webkit-user-select:none;user-select:none}
.nm-lift,body:has(>.nm-ov) .app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* Menü, Reaktionsreihe und am Handy die App dahinter nie markierbar (der lange Druck einer Geste markierte sonst das ❤️ der Reihe oder Text hinter der Abdunklung); nur das Abbild nach dem Loslassen */
.bubble[tabindex]:focus-visible{border-radius:var(--r-m)}
.bubble.nm-gehoben{visibility:hidden}
/* Menü zur Nachricht (Scheibe 2c, C16 mit der Reaktionswahl C14; Hennys Vorgabe 24.10.): am Handy nach dem langen Druck über der
   Abdunklung --scrim (Ebene --ebene-popover) eine Spalte von Seitenrand zu Seitenrand mit dem Abbild der Nachricht an ihrer Stelle
   (nicht bedienbar, Text markierbar), der Reaktionsreihe und dem Menü; am Desktop nach einem Klick als Popover unter der Blase ohne
   Abdunklung (fremd links-, eigen rechtsbündig, sonst darüber), mindestens --breite-menue breit. Die Spalte rückt ins Fenster und
   rollt, wenn die Höhe nicht reicht. Einträge 44 (Desktop 36), Zeichen 20 in Zweittext, Hover und Fokus Fläche 3, gedrückt Fläche 3
   und 1 % kleiner (Zweitzeile und Preis halten auf --linie-2 nicht); KI-Gruppe auf --akzent-hauch-deckend mit 2-px-Kante in
   Akzent-Text, Preis in Mono, darunter die Notiz; Löschen zuletzt, rot nur an eigenen. */
.nm-ov{position:fixed;inset:0;z-index:var(--ebene-popover);background:var(--scrim)}
.nm-lift{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-4);box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;animation:ebene-auf var(--dauer-auf) var(--kurve-hinein)}
.nm-lift.nm-pop{position:fixed;z-index:var(--ebene-popover);gap:var(--abstand-2);width:max-content;min-width:min(var(--breite-menue),calc(100vw - 2 * var(--seite-handy)));max-width:min(calc(1.75 * var(--breite-menue)),calc(100vw - 2 * var(--seite-handy)))}
.nm-lift.eigen{align-items:flex-end}
.nm-lift:focus{outline:none}
.nm-lift.nm-wartet{pointer-events:none}
.nm-lift>.bubble{flex:none;max-width:100%;max-height:34vh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.nm-abbild a,.nm-abbild button,.nm-abbild video,.nm-abbild audio,.nm-abbild input{pointer-events:none}
.nm-lift>.rx-pop{position:static;flex:none;max-width:100%}
.nm-pop>.rx-pop{box-shadow:var(--schatten-2)}
.nm-menue{display:flex;flex-direction:column;flex:none;box-sizing:border-box;width:100%;padding:var(--abstand-2) 0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--schweb);box-shadow:var(--schatten-2);overflow:hidden}
.nm-eintrag{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-1) var(--abstand-6);box-sizing:border-box;width:100%;min-height:var(--hoehe-eintrag);margin:0;padding:var(--abstand-2) var(--abstand-6) var(--abstand-2) var(--abstand-7);border:0;border-radius:0;background:none;color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-knapp);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.nm-eintrag>.ic{width:var(--ic-20);height:var(--ic-20);flex:none;color:var(--zweit)}
.nm-eintrag .nm-t{display:flex;flex-direction:column;flex:1 1 auto;flex-basis:min-content;min-width:0}
.nm-eintrag .nm-t small{font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel);color:var(--zweit)}
.nm-eintrag .preis{margin-left:auto}
@media(hover:hover){.nm-eintrag:hover{background:var(--f3)}}
.nm-eintrag:focus-visible{background:var(--f3);outline-offset:calc(-1 * var(--fokus-breite))}
.nm-eintrag:active{background:var(--f3);transform:scale(calc(1 - .01 * var(--bewegung)))}
.nm-eintrag.gefahr,.nm-eintrag.gefahr>.ic{color:var(--rot)}
.nm-ki{margin:var(--abstand-2) 0;padding:var(--abstand-1) 0 0;border-top:var(--rand) solid var(--linie-2);border-bottom:var(--rand) solid var(--linie-2);border-left:var(--rand-stark) solid var(--akzent-text);background:var(--akzent-hauch-deckend)}
.nm-ki .nm-eintrag{padding-left:calc(var(--abstand-7) - var(--rand-stark))}
.nm-ki .nm-eintrag>.ic{color:var(--akzent-text)}
.nm-notiz{margin:0;padding:var(--abstand-1) var(--abstand-6) var(--abstand-4) calc(var(--abstand-7) - var(--rand-stark));font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
@media(min-width:760px){.nm-eintrag{font-size:var(--grad-3)}}
/* Preis (C19) in Menü und KI-Feld: Zahl in Mono mit gleich breiten Ziffern, halbfett, Akzent-Text, bricht nicht; „inklusive“ in der
   Schrift; während die Aktion läuft Zweittext. */
.nm-menue .preis,.ai-panel .preis{display:inline-flex;align-items:center;font-family:var(--mono);font-size:var(--grad-2);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp);line-height:var(--zh-eng);color:var(--akzent-text);white-space:nowrap}
.nm-menue .preis.inklusive,.ai-panel .preis.inklusive{font-family:inherit;letter-spacing:0}
.ai-panel .preis.laeuft{color:var(--zweit)}
.ai-panel .preis[hidden]{display:none}
@media(min-width:760px){.nm-menue .preis,.ai-panel .preis{font-size:var(--grad-1)}}
/* Die Knöpfe der Leiste stehen nicht im Bild; ihr Zustand (KI offen) bleibt als Klasse. */
.meta-btn.ai-btn.on{outline:0}
/* AI-/Transkript-Panel in der Bubble-FARBE (gehört optisch zur Nachricht), so breit wie nötig. */
/* Scheibe 2c (C17 KI-Feld, C19, B21): hängt unten an der Blase (.bubble.mit-ki: Blase oben rund, Feld unten rund, gleiche Breite),
   Fläche 2 mit Kante --linie (eigen Akzent-leise mit --akzent-kante); Kopf mit Wabe, Wörtern und Zeichen in Mono und dem Kreuz,
   Aktionen als Zeilen 44 (Desktop 36) mit Wabe in Akzent-Text, Wort, Zweitzeile und Preis rechts, darunter die Notiz; Sprachwahl
   unter „Übersetzen“; Ergebnisse unter einer Trennlinie --linie-2 mit Modell in Zweittext und „KI-Ergebnis melden“. */
.ai-panel{display:flex;flex-direction:column;align-self:flex-start;box-sizing:border-box;max-width:100%;border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:var(--f2);color:var(--text);font-size:var(--grad-4);line-height:var(--zh-text);overflow:hidden}
.bubble.mine .ai-panel{align-self:flex-end;background:var(--akzent-leise);color:var(--text)}
.ai-transcript,.ai-summary{white-space:pre-wrap;overflow-wrap:anywhere}
.ai-summary{margin-top:var(--abstand-1);padding-top:var(--abstand-3);border-top:var(--rand) solid var(--linie-2)}
.ai-note,.ai-stats{font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.ai-model{font-size:var(--grad-2);font-weight:var(--gewicht-mittel);color:var(--zweit);white-space:nowrap}
.ai-tts-slot{margin-top:var(--abstand-1)}
.tts-speeds{display:flex;gap:.35rem;flex:0 0 auto}
.bubble.mine>.ai-panel{border-color:var(--akzent-kante)}
.bubble.mit-ki>.bubble-body,.bubble.mit-ki>.ai-panel{align-self:stretch}
.bubble.mit-ki>.bubble-body{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.bubble.mit-ki>.ai-panel{margin-top:calc(-1 * var(--abstand-3));border-top-color:var(--linie-2);border-top-left-radius:0;border-top-right-radius:0}
.bubble.mine.mit-ki>.ai-panel{border-top-color:var(--akzent-kante)}
.ai-panel .ai-stats{display:flex;align-items:center;gap:var(--abstand-3);box-sizing:border-box;min-height:var(--hoehe-klein);padding:var(--abstand-1) var(--abstand-2) var(--abstand-1) var(--abstand-5)}
.ai-panel .ai-stats>.ic{width:var(--ic-16);height:var(--ic-16);flex:none;color:var(--akzent-text)}
.ai-panel .ai-zahlen{flex:1;min-width:0}
.ai-panel .ai-stats b{font-family:var(--mono);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;color:var(--text)}
.ai-panel .ai-zu{position:relative;display:grid;place-items:center;flex:none;width:max(var(--hoehe-klein),var(--treffer-min));height:max(var(--hoehe-klein),var(--treffer-min));padding:0;border:var(--rand) solid transparent;border-radius:var(--r-xs);background:none;color:var(--zweit);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ai-panel .ai-zu:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.ai-panel .ai-zu .ic{width:var(--ic-16);height:var(--ic-16);transform:rotate(45deg)}
@media(hover:hover){.ai-panel .ai-zu:hover{background:var(--f3);color:var(--text)}}
.ai-panel .ai-zu:active{background:var(--linie-2);color:var(--text);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ai-panel .ai-transcript{padding:var(--abstand-3) var(--abstand-5) 0}
.ai-panel .ai-note{padding:var(--abstand-3) var(--abstand-5) 0;font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.ai-panel .ai-acts{display:flex;flex-direction:column;margin-top:var(--abstand-3);padding:var(--abstand-1) var(--abstand-2);border-top:var(--rand) solid var(--linie-2)}
.ai-act{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-5);box-sizing:border-box;width:100%;min-height:var(--hoehe-eintrag);margin:0;padding:var(--abstand-2) var(--abstand-4);border:var(--rand) solid transparent;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;line-height:var(--zh-knapp);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ai-act>.ic{width:var(--ic-20);height:var(--ic-20);flex:none;color:var(--akzent-text)}
.ai-act .ai-t{display:flex;flex-direction:column;flex:1 1 auto;flex-basis:min-content;min-width:0}
.ai-act .ai-t small{font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.ai-act .preis{margin-left:auto}
@media(hover:hover){.ai-act:hover{background:var(--f3)}}
.ai-act:active{background:var(--f3);transform:scale(calc(1 - .01 * var(--bewegung)))}
.ai-act.on{background:var(--akzent-hauch);border-color:var(--akzent-text)}
.ai-act:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.ai-act.on:focus-visible{outline-offset:calc(-1 * (var(--fokus-breite) + var(--rand)))}
@media(min-width:760px){.bubble>.ai-panel{font-size:var(--grad-2)}.ai-act>.ic{width:var(--ic-18);height:var(--ic-18)}}
.ai-panel .ai-notiz{margin:0;padding:var(--abstand-1) var(--abstand-6) var(--abstand-4);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.ai-panel .ai-wahl{position:relative;display:block;margin:var(--abstand-2) var(--abstand-4) var(--abstand-3)}
.ai-panel select.ai-lang{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;min-width:10em;max-width:100%;min-height:var(--hoehe-feld);margin:0;padding:0 calc(var(--abstand-5) + var(--ic-18) + var(--abstand-3)) 0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.ai-panel select.ai-lang{font-size:var(--grad-3)}}
@media(hover:hover){.ai-panel select.ai-lang:hover{background:var(--f3)}}
.ai-panel select.ai-lang:focus-visible{border-color:var(--akzent-text)}
.ai-panel select.ai-lang:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:default}
.ai-panel .ai-pfeil{position:absolute;top:50%;right:var(--abstand-5);width:var(--ic-18);height:var(--ic-18);transform:translateY(-50%);color:var(--zweit);pointer-events:none}
.ai-panel .ai-summary,.ai-panel .ai-translation,.ai-panel .ai-tts-slot{margin:0;padding:var(--abstand-3) var(--abstand-5) var(--abstand-4);border-top:var(--rand) solid var(--linie-2)}
.ai-panel .ai-summary p{margin:var(--abstand-2) 0;line-height:var(--zh-text)}
.ai-panel .ai-summary[hidden],.ai-panel .ai-translation[hidden],.ai-panel .ai-tts-slot[hidden]{display:none}
.ai-translation{white-space:pre-wrap;overflow-wrap:anywhere}
.set-link.kf-melden{display:flex;align-items:center;gap:var(--abstand-3);width:auto;min-height:var(--hoehe-tipp);margin:var(--abstand-2) 0 0 calc(-1 * var(--abstand-3));padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);color:var(--zweit);font-size:var(--grad-2);font-weight:var(--gewicht-mittel);line-height:var(--zh-knapp);white-space:normal}
.set-link.kf-melden .ic{width:var(--ic-16);height:var(--ic-16);flex:none}
.ai-panel .set-link.kf-melden{color:var(--zweit)}
@media(hover:hover){.set-link.kf-melden:hover,.ai-panel .set-link.kf-melden:hover{background:var(--f3);color:var(--text);text-decoration:none}}
.set-link.kf-melden:active{background:var(--f3)}
@media(hover:hover) and (pointer:fine){.set-link.kf-melden{min-height:var(--hoehe-klein)}}
.ai-lang{font:inherit;font-size:.8rem;padding:.3rem .4rem;border:var(--rand) solid var(--feldrand);background:var(--f1);color:inherit;border-radius:.5rem;cursor:pointer;max-width:100%}
.ai-lang option{color:initial}
.ai-act:disabled{cursor:progress}
.empty{margin:auto;color:var(--zweit);text-align:center;padding:2rem}

/* ── Reaktions-Chips (in der Meta-Reihe, neben dem Reaktions-Icon) ────────────── */
/* Reaktion (C13): Knopf unter der Blase, Emoji, Zahl in Mono erst ab 2; die eigene wie gewählt (Akzent-leise mit Rand in
   Akzent-Text, aria-pressed), fremde auf Fläche 1 mit Feldrand. Mindestens 28 × 28 mit Trefferfläche 44 am Handy; die Lücken
   16/12 und bei grobem Zeiger 10 zur Blase halten die Trefferflächen frei (auch die von Vorlesen im Fuß). */
.rx-zone{display:inline-flex;flex-wrap:wrap;gap:var(--abstand-8) var(--abstand-6);align-items:center;min-width:0;flex:0 0 auto}
.rx-zone:empty{display:none}
@media(pointer:coarse){.bubble>.rx-zone:not(:empty){margin-top:var(--abstand-5)}}
.rx-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-2);min-width:var(--hoehe-klein);min-height:var(--hoehe-klein);padding:0 var(--abstand-3);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font-size:var(--grad-3);line-height:var(--zh-eng);cursor:pointer;flex:0 0 auto;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.rx-chip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.rx-chip .rx-n{font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-fett);font-variant-numeric:tabular-nums;color:var(--zweit)}
.rx-chip.mine{background:var(--akzent-leise);border-color:var(--akzent-text)}
.rx-chip.mine .rx-n{color:var(--akzent-text)}
.rx-chip:active{background:var(--f3);border-color:var(--text);transform:scale(calc(1 - .04 * var(--bewegung)))}
@media(hover:hover){.rx-chip:hover{background:var(--f3);border-color:var(--text)}}

/* Reaktions-Picker (Popup über/unter der Bubble). Liquid-Glass-artig, fixed positioniert. */
/* Scheibe 2c (C14): Fläche --schweb, Kante --linie-2, Radius --r-l, --schatten-2, Polster --abstand-2; Schnellreihe mit fünf Emojis und
   „Weitere Reaktionen“ (Plus in Zweittext), das Raster mit 15 Emojis in 8 Spalten erst nach dem Plus (hidden gilt jetzt), im
   Bearbeiten-Modus „Löschen“ in Rot. Knopf 44 bei Touch, 32 am Desktop mit Maus, Emoji --grad-8 (Desktop --grad-7); gewählt (eigene
   Reaktion, aria-pressed) Akzent-leise mit Rand Akzent-Text, bearbeitet dazu --ring-wahl; Hover Fläche 3 (nur Maus), gedrückt --linie-2
   und 6 % kleiner. Im Menü zur Nachricht steht dieselbe Wahl im Fluss (.nm-lift > .rx-pop). */
.rx-pop{position:fixed;z-index:var(--ebene-popover);display:flex;flex-direction:column;gap:var(--abstand-2);box-sizing:border-box;max-width:min(calc(100vw - 2 * var(--abstand-4)),22rem);padding:var(--abstand-2);border:var(--rand) solid var(--linie-2);border-radius:var(--r-l);background:var(--schweb);box-shadow:var(--schatten-2)}
.rx-quick{display:flex;gap:var(--abstand-1);align-items:center}
.rx-quick button,.rx-grid button{position:relative;display:grid;place-items:center;box-sizing:border-box;width:max(var(--hoehe-dicht),var(--treffer-min));height:max(var(--hoehe-dicht),var(--treffer-min));margin:0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;font-size:var(--grad-8);line-height:var(--zh-eng);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.rx-quick button{font-size:var(--grad-7)}}
@media(hover:hover){.rx-quick button:hover,.rx-grid button:hover{background:var(--f3)}}
.rx-quick button:active,.rx-grid button:active{background:var(--linie-2);transform:scale(calc(1 - .06 * var(--bewegung)))}
.rx-quick button.sel,.rx-grid button.sel{background:var(--akzent-leise);border-color:var(--akzent-text)}
.rx-quick .rx-more{color:var(--zweit)}
.rx-quick .rx-more .ic{width:var(--ic-24);height:var(--ic-24);transition:transform var(--dauer) var(--kurve)}
.rx-quick .rx-more[aria-expanded="true"] .ic{transform:rotate(45deg)}
.rx-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--abstand-1);padding-top:var(--abstand-2);border-top:var(--rand) solid var(--linie)}
.rx-grid[hidden]{display:none}
.rx-grid button{width:auto;min-width:0;font-size:var(--grad-7)}
@media(min-width:760px){.rx-grid button{font-size:var(--grad-6)}}
/* Bearbeiten-Modus: das gerade geklickte eigene Emoji deutlich hervorheben; mit Fokus füllt der Ring die Lücke von --ring-wahl. */
.rx-quick button.editing,.rx-grid button.editing{border-color:var(--akzent-text);box-shadow:var(--ring-wahl)}
.rx-quick button.editing:focus-visible,.rx-grid button.editing:focus-visible{outline-offset:0}
/* „Löschen" im Bearbeiten-Modus (ersetzt den früheren Antworten-Knopf im Picker). */
.rx-pop .rx-del{display:flex;align-items:center;gap:var(--abstand-4);box-sizing:border-box;width:100%;min-height:var(--hoehe-eintrag);margin:0;padding:0 var(--abstand-4);border:0;border-top:var(--rand) solid var(--linie);border-radius:0 0 var(--r-s) var(--r-s);background:none;color:var(--rot);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:left;cursor:pointer}
@media(hover:hover){.rx-pop .rx-del:hover{background:var(--rot-leise)}}
.rx-pop .rx-del:active{background:var(--rot-leise)}
.rx-pop .rx-del .rx-del-emoji{font-size:var(--grad-6);line-height:var(--zh-eng)}

/* ── Antworten: Vorschau ÜBER dem Inhalt einer Bubble (Zitat) ─────────────────── */
/* Antwort-Referenz (C12): Knopf oben in der Blase, 3-px-Strich in Akzent-Text, Name in Textfarbe, Auszug einzeilig in Zweittext
   (in der eigenen Blase Textfarbe: Zweittext hält auf der Zitatfläche über Akzent-leise nicht in jedem Akzent 4,5:1). width 0 mit
   min-width 100 % macht ihn so breit wie die Blase, ohne sie zu verbreitern. Original weg: grauer Strich, kursiv, kein Knopf. */
.reply-quote{display:flex;flex-direction:column;gap:var(--abstand-1);width:0;min-width:100%;margin:0 0 var(--abstand-3);padding:var(--abstand-3) var(--abstand-5);border:0;border-left:var(--rand-zitat) solid var(--akzent-text);border-radius:var(--r-xxs) var(--r-xs) var(--r-xs) var(--r-xxs);background:var(--zitat-flaeche);color:inherit;font:inherit;text-align:left;white-space:normal;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.reply-quote .rq-who{display:block;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-quote .rq-snip{display:block;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble.mine .reply-quote .rq-snip{color:var(--text)}
@media(hover:hover){.reply-quote:not(.gone):hover{background:var(--f3)}}
.reply-quote:not(.gone):active{background:var(--f3);transform:scale(calc(1 - .02 * var(--bewegung)))}
.reply-quote.gone{width:auto;border-left-color:var(--linie-2);cursor:default}
.reply-quote.gone .rq-snip{font-style:italic}
.reply-quote .sr-nur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Angesprungen (C10; .flash setzt scrollToMessage und nimmt sie nach der Zeit wieder weg): Rand in Akzent-Text mit Ring, darunter
   blendet ein Hauch Akzent ein (unter Text und Fuß, sonst fielen Zeit und Zweittext unter 4,5:1). */
.bubble.flash .bubble-body{isolation:isolate;border-color:var(--akzent-text);box-shadow:var(--ring-wahl)}
.bubble.flash .bubble-body::after{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);border-radius:inherit;background:var(--akzent-hauch);pointer-events:none;animation:bubbleFlash var(--dauer-auf) var(--kurve-hinein)}
@keyframes bubbleFlash{from{opacity:0}to{opacity:1}}

/* ── Antworten: Reply-Leiste im Composer ─────────────────────────────────────── */
/* Scheibe 3a (C30): direkt über dem Composer, Fläche 1 mit Linie oben; Strich in Akzent-Text, „Antwort an …“ halbfett in
   Akzent-Text, Auszug einzeilig in Zweittext; Abbrechen 32 mit Trefferfläche 44, Zeichen „plus“ als Kreuz gedreht. */
.reply-bar{display:flex;align-items:center;gap:var(--abstand-4);padding:var(--abstand-3) calc(var(--abstand-6) + env(safe-area-inset-right)) var(--abstand-3) calc(var(--abstand-6) + env(safe-area-inset-left));border-top:var(--rand) solid var(--linie);background:var(--f1)}
@media(min-width:760px){.reply-bar{padding-left:calc(var(--abstand-8) + env(safe-area-inset-left));padding-right:calc(var(--abstand-8) + env(safe-area-inset-right))}}
.reply-bar .rb-stripe{width:var(--rand-zitat);align-self:stretch;background:var(--akzent-text);border-radius:var(--r-strich);flex:0 0 auto}
.reply-bar .rb-body{flex:1;min-width:0;display:flex;flex-direction:column}
.reply-bar .rb-who{font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);color:var(--akzent-text)}
.reply-bar .rb-snip{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar .rb-x{position:relative;flex:0 0 auto;display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:transparent;color:var(--zweit);cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.reply-bar .rb-x::after{content:"";position:absolute;left:50%;top:50%;width:max(100%, var(--treffer-min));height:max(100%, var(--treffer-min));transform:translate(-50%,-50%)}
.reply-bar .rb-x .ic{width:var(--ic-18);height:var(--ic-18);transform:rotate(45deg)}
.reply-bar .rb-x:active{background:var(--linie-2);color:var(--text);transform:scale(calc(1 - .03 * var(--bewegung)))}
@media(hover:hover){.reply-bar .rb-x:hover{background:var(--f3);color:var(--text)}}
/* Swipe-Affordance: kleines Pfeil-Echo beim seitlichen Wischen einer Bubble. */
/* pinch-zoom dazu (W0.1b, Scheibe 2a): im Browser lässt sich auch auf einer Blase mit zwei Fingern zoomen. */
.bubble{touch-action:pan-y pinch-zoom}
.bubble.swiping{transition:none}

/* Desktop ab 760 px: Blasen bis --breite-blase, Verlauf mit Polster 14 20 8. Die eigene Schriftbasis (20 px) ist seit Scheibe 7
   weg: der Desktop nimmt die Schriftgröße des Browsers wie das Handy, Fließtext 14 px über --text-basis (Mockups). */
@media(min-width:760px){
  .bubble{max-width:min(var(--breite-blase),82%)}
  .msgs{padding:var(--abstand-7) var(--abstand-10) var(--abstand-4)}
}

/* ── Weiterleiten-Modal: Kontext-Schalter + Chat-Auswahl ─────────────────────── */
/* Scheibe 3b-2: „Mit Kontext“ als Zeile B18 (das Kästchen zeichnet die Regel bei .gate-ab16), die Ziele als Listenwahl B17
   mit Avatar (Fläche 1, Kante --linie-2, Radius --r-m, mindestens --zeile-tipp hoch, Fokusring innen, weil die Liste rollt);
   Geheim-Chats gesperrt in der einen Form (Fläche 2, Zweittext), der Grund steht in der Zweitzeile. */
.fwd{display:flex;flex-direction:column;gap:var(--abstand-5)}
.fwd-ctx{display:flex;align-items:center;gap:var(--abstand-5);min-height:var(--hoehe-knopf);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--text);cursor:pointer}
.fwd-hint{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.fwd-list{display:flex;flex-direction:column;gap:var(--abstand-4);max-height:50vh;overflow-y:auto}
.fwd-row{display:flex;flex:none;align-items:center;gap:var(--abstand-6);box-sizing:border-box;width:100%;min-height:var(--zeile-tipp);padding:var(--abstand-4) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.fwd-row:hover{background:var(--f3)}}
.fwd-row:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.fwd-row:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.fwd-meta{min-width:0;flex:1}
.fwd-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwd-sub{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.fwd-warn{color:var(--zweit)}
.fwd-row.fwd-disabled{background:var(--f2);color:var(--zweit);cursor:not-allowed;transform:none}
.fwd-empty{padding:var(--abstand-4) 0;color:var(--zweit);font-size:var(--grad-3)}

/* ── Archiv: Chat-Header-Button + Dialog + Verwaltungs-Modal ──────────────────── */
/* Icon-Knöpfe im Chat-Kopf (D8 mit B5; Anrufen, Video, Gruppen-Einstellungen): Form und Zustände unten bei „Alle drei
   Chat-Header-Icon-Buttons“, hier nur die Grundform ohne Kopf. */
.head-icon-btn{display:grid;place-items:center;padding:0;border:0;background:none;color:var(--text);cursor:pointer;line-height:1}
.head-icon-btn .ic{width:var(--ic-knopf);height:var(--ic-knopf);display:block}
/* Header-Aktionen rechts im Chat-Header (Anrufen · Video · ⚙) — kein Sticky-Sub-Bar mehr. */
.head-actions{display:flex;align-items:center;gap:var(--abstand-1);flex:0 0 auto;margin-left:auto}
@media(min-width:760px){.head-actions{gap:var(--abstand-3)}} /* Ende Kopf-Aktionen: die Unterleiste .chat-actions fiel mit Scheibe 7 weg (placeChatActions war tot). */
.arch-dialog{display:flex;flex-direction:column;gap:var(--abstand-6)}
.arch-note{margin:0;font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--text)}
/* Datum und Uhrzeit der Selbstzerstörung im Dialog (B22, Scheibe 3b-2): natives Feld in der Form von B7, Ziffern als Tabellenziffern,
   der Picker im Thema über color-scheme. Die Grundregel .sd-time (2c) bleibt. */
.arch-dialog .sd-time{min-height:var(--hoehe-feld);padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font-size:var(--grad-5);font-variant-numeric:tabular-nums;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.arch-dialog .sd-time{padding:0 var(--abstand-6);font-size:var(--grad-3)}}
@media(hover:hover){.arch-dialog .sd-time:hover{background:var(--f3)}}
.arch-dialog .sd-time:focus-visible{border-color:var(--akzent-text);background:var(--f1)}
/* Nachrichten-Vorschau-Karte im Lösch-/Anfrage-Dialog (welche Nachricht genau?). Scheibe 3b-2: Karte wie D12 .vorschau-karte
   (Fläche 2, Kante --linie-2, Radius --r-m), Absender fett, Zeit in Mono, Lesestatus in Zweittext bzw. Akzent-Text, Auszug
   höchstens vier Zeilen (seit 2a ohne Formatzeichen: replySnippetFor). */
.del-preview{display:flex;flex-direction:column;gap:var(--abstand-2);padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f2)}
.del-preview .dp-head{display:flex;justify-content:space-between;gap:var(--abstand-5);align-items:baseline}
.del-preview .dp-who{font-size:var(--grad-3);font-weight:var(--gewicht-fett);color:var(--text)}
.del-preview .dp-time{font-family:var(--mono);font-size:var(--grad-1);color:var(--zweit);white-space:nowrap;font-variant-numeric:tabular-nums}
.del-preview .dp-status{font-size:var(--grad-1);color:var(--zweit)}
.del-preview .dp-status.read{color:var(--akzent-text)}
.del-preview .dp-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--text);overflow-wrap:anywhere}
.arch-opt{display:flex;align-items:center;gap:var(--abstand-5);min-height:var(--hoehe-knopf);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--text);cursor:pointer}
/* Knöpfe der Dialoge (Scheibe 3b-2, B1 und B2). Reihe wie D12 (bestaetigen, 3b-1): am Handy untereinander, die Hauptaktion
   oben; ab 600 px nebeneinander rechtsbündig, die Hauptaktion rechts außen. .arch-go ist der Hauptknopf (Akzentfläche mit
   --akzent-rand, Schrift --auf-akzent), .arch-go.danger rot gefüllt (B2 „voll“, nur in Bestätigungen), .arch-cancel mit Rand
   --feldrand; Höhe --hoehe-knopf (44 Handy und Touch, 36 Desktop), Radius --r-s, Schrift --grad-4 (ab 760 px --grad-2),
   halbfett; Hover nur bei Maus (4.6), gedrückt 3 % kleiner; gesperrt eine Form: Fläche 2, Rand --linie-2, Zweittext. */
.arch-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--abstand-4);margin-top:var(--abstand-2)}
@media(min-width:600px){.arch-actions{flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start}}
.arch-go,.arch-cancel{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.arch-go,.arch-cancel{padding-left:var(--abstand-7);padding-right:var(--abstand-7);font-size:var(--grad-2)}}
.arch-go{border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
.arch-go.danger{border-color:var(--rot);background:var(--rot);color:var(--auf-rot)}
@media(hover:hover){.arch-go:hover{background:var(--akzent-hover)}.arch-go.danger:hover{background:var(--rot);border-color:var(--auf-rot)}.arch-cancel:hover{background:var(--f3)}}
.arch-go:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.arch-go.danger:active{background:var(--rot);border-color:var(--auf-rot);transform:scale(calc(1 - .03 * var(--bewegung)))}
.arch-cancel:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Hover und Gedrückt auch im Fuß von bestaetigen() und eingeben() (D12): die lokale Brücke aus 3b-1 (.ebene-fuss>.arch-go:not(.danger),
   0,3,0) setzt die Akzentfläche fest und überstimmt sonst .arch-go:hover und :active; sie selbst liegt im Bereich von 3b-1 und bleibt
   bis 7 stehen (gleiche Werte in Ruhe). */
@media(hover:hover){.ebene-fuss>.arch-go:not(.danger):hover{background:var(--akzent-hover)}}
.ebene-fuss>.arch-go:not(.danger):active{background:var(--akzent-gedrueckt)}
/* Box-Menü-Gefahrenknopf (alle eigenen Nachrichten löschen): B2 mit Rand, roter Text, Hover und Gedrückt rot leise. */
.box-menu .box-danger{display:flex;align-items:center;justify-content:center;gap:var(--abstand-4);box-sizing:border-box;width:100%;min-height:var(--hoehe-knopf);margin-top:var(--abstand-3);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:none;color:var(--rot);font:inherit;font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.box-menu .box-danger:hover{background:var(--rot-leise);border-color:var(--rot)}}
.box-menu .box-danger .ic{width:var(--ic-20);height:var(--ic-20);flex:0 0 auto}
.box-menu .box-danger:active{background:var(--rot-leise);border-color:var(--rot)}
/* Löschoptionen als Auswahlkarte B17 „Gefahr“: Fläche 1, Kante --linie-2, Radius --r-m; gewählt --rot-leise mit Rand und Titel in
   --rot; der Fokusring liegt um die ganze Karte, der Punkt (B18, gezeichnet bei .gate-ab16) trägt keinen zweiten. */
.del-opt{display:flex;align-items:flex-start;gap:var(--abstand-5);box-sizing:border-box;min-height:var(--zeile-tipp);padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.del-opt:hover{background:var(--f3)}}
.del-opt.on,.del-opt:has(input:checked){background:var(--rot-leise);border-color:var(--rot)}
.del-opt:has(input:focus-visible){outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:var(--fokus-abstand)}
@supports selector(:has(*)){.del-opt input:focus-visible{outline:none}}
.del-opt b{display:block;margin-bottom:var(--abstand-1);font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.del-opt.on b,.del-opt:has(input:checked) b{color:var(--rot)}
.del-opt small{display:block;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
/* Hinweis auf ein laufendes Store-Abo im Loesch-Dialog (KAUF.md 6): Warnung (B10) auf --gelb-leise mit Rand --gelb; „Abo
   verwalten“ (Store-Pflichtknopf) bleibt darin ein eigener Knopf. */
.del-abo{display:flex;flex-direction:column;gap:var(--abstand-3);padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--gelb);border-radius:var(--r-m);background:var(--gelb-leise)}
.del-abo[hidden]{display:none}
.del-abo .set-link{align-self:flex-start;width:auto;border-top:0}
.arch-go:disabled,.arch-cancel:disabled,.arch-go.danger:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed;transform:none}
/* Archiv und Verwaltung: Kapitälchen über jedem Abschnitt, Zeilen mit Avatar, Name und einem kleinen Knopf B1 „k“ (32 hoch,
   Trefferfläche --treffer-min über ::after). */
.arch-modal{display:flex;flex-direction:column;gap:var(--abstand-10)}
.arch-sect h3{margin:0 0 var(--abstand-3);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.arch-empty{padding:var(--abstand-2) 0;color:var(--zweit);font-size:var(--grad-3)}
.arch-row{display:flex;align-items:center;gap:var(--abstand-6);min-height:var(--zeile-tipp);padding:var(--abstand-3) 0;border-top:var(--rand) solid var(--linie)}
.arch-meta{flex:1;min-width:0}
.arch-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-sub{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.arch-act{position:relative;flex:0 0 auto;min-height:var(--hoehe-dicht);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.arch-act::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.arch-act:hover{background:var(--f3)}}
.arch-act:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.arch-act:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:progress;transform:none}

/* Composer = EINE Reihe (Umbau 14.09.2026): [+] · Eingabefeld · EIN rechter Knopf, der
   Mikrofon zeigt solange das Feld leer ist und Senden, sobald Text drinsteht.
   Das [+] klappt die Werkzeug-Leiste (Anhang · Kamera · Standort · KI) darunter auf, die
   Format-Leiste (B/I/U) nur auf Anforderung (Plus-Menü oder Strg/Cmd+Shift+F). Im
   Ruhezustand ist also genau eine Reihe sichtbar. */
/* Scheibe 3a (C28, B24, Kreieren nach DESIGN.md 11 und 12): Block auf Fläche 1 mit Linie oben, darin Format-Leiste,
   Eingabezeile (Plus, Feld, Kreieren, Senden bzw. Mikrofon) und Kacheln. Feld und Knöpfe --hoehe-composer (44, Desktop
   40); das Feld auf Grund mit Feldrand, im Fokus Rand in Akzent-Text und der normale Ring (global) statt Schein. Senden
   ist neutral, solange das Feld leer ist, mit Text Akzent (.hat-text aus setSendMode); Kreieren ist dann nur noch die
   Wabe (folgt dem Feld selbst, :placeholder-shown, siehe unten). Die Polster stehen in --comp-rand und --comp-unten, weil die Regel für die Abstände zum Rand (unten) sie nutzt. */
.composer{--comp-rand:var(--abstand-6);--comp-unten:var(--abstand-4);display:flex;flex-direction:column;gap:var(--abstand-4);padding:var(--abstand-4) var(--comp-rand) var(--comp-unten);border-top:var(--rand) solid var(--linie);background:var(--f1);box-sizing:border-box}
@media(min-width:760px){.composer{--comp-rand:var(--abstand-8);--comp-unten:var(--abstand-5);padding-top:var(--abstand-5)}}
@media(min-width:760px) and (pointer:coarse){.composer{--hoehe-composer:var(--hoehe-tipp)}} /* Touch am Desktop-Layout (Tablet): Feld und Knöpfe 44 wie alles Tippbare (im System fehlt diese Zeile) */
.composer.recording{flex-direction:row;align-items:center}
/* Die Eingabezeile ist der Container für die schmale Form von Kreieren (unten) */
.comp-input-row{display:flex;gap:var(--abstand-4);align-items:flex-end;container-type:inline-size}
/* Plus links (Icon-Knopf mit Rand): öffnet die Kacheln; offen Akzent-leise mit Rand in Akzent-Text, das Zeichen dreht zum Kreuz */
.comp-plus{position:relative;flex:0 0 auto;display:grid;place-items:center;width:var(--hoehe-composer);height:var(--hoehe-composer);padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.comp-plus .ic{width:var(--ic-knopf);height:var(--ic-knopf);display:block;transition:transform var(--dauer) var(--kurve)}
@media(hover:hover){.comp-plus:hover{background:var(--f3)}}
.comp-plus:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.comp-plus[aria-expanded="true"]{background:var(--akzent-leise);border-color:var(--akzent-text);color:var(--akzent-text)}
.comp-plus[aria-expanded="true"] .ic{transform:rotate(45deg)}
/* Format-Leiste (B24) über der Eingabezeile: Werkzeugleiste mit drei Icon-Knöpfen mit Rand, 44 (Desktop 36), umbrechend */
.comp-fmt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3)}
.comp-fmt[hidden]{display:none}
.comp-fmt-b{position:relative;display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font-family:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.comp-fmt-b:hover{background:var(--f3)}}
.comp-fmt-b:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
@media(min-width:760px){.comp-fmt-b{font-size:var(--grad-3)}}
.comp-fmt-b.f-b{font-weight:var(--gewicht-fett)}
.comp-fmt-b.f-i{font-style:italic;font-weight:var(--gewicht-mittel)}
.comp-fmt-b.f-u{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:var(--rand-stark)}
/* Feld: Höhe 44 (Desktop 40) bei einer Zeile, wächst bis 8rem (ta.oninput); Zeilenhöhe in em, weil das Feld am Handy immer
   16 px Schrift hat (iOS zoomt sonst beim Fokus, Regel unten) */
.composer textarea{flex:1;min-width:0;min-height:var(--hoehe-composer);max-height:8rem;padding:calc((var(--hoehe-composer) - 1.4em) / 2 - var(--rand)) var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--grund);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-text);resize:none;overflow-wrap:anywhere;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.composer textarea{font-size:var(--grad-3);padding-left:var(--abstand-6);padding-right:var(--abstand-6)}}
.composer textarea::placeholder{color:var(--zweit);opacity:1}
@media(hover:hover){.composer textarea:hover{background:var(--f3)}}
/* Fokus: Rand in Akzent-Text, der Ring kommt aus der globalen Regel (kein Schein mehr) */
.composer textarea:focus-visible{border-color:var(--akzent-text);background:var(--grund)}
/* Rechter Knopf (Mikrofon bzw. Senden): Icon-Knopf mit Rand; mit Text im Feld Akzent */
.composer .comp-send{position:relative;flex:0 0 auto;display:grid;place-items:center;width:var(--hoehe-composer);height:var(--hoehe-composer);padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.composer .comp-send:hover{background:var(--f3)}.composer.hat-text .comp-send:hover{background:var(--akzent-hover)}}
.composer .comp-send:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.composer.hat-text .comp-send{background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
.composer.hat-text .comp-send:active{background:var(--akzent-gedrueckt)}
.composer .comp-send:disabled{opacity:.4}
.composer .comp-send .ic{width:var(--ic-knopf);height:var(--ic-knopf);display:block}
/* Kacheln aus dem Plus (C28): gleich breit, 60 hoch mit Zeichen und Beschriftung untereinander; am Desktop 40 (bei Touch 44)
   mit Zeichen und Text nebeneinander. Grundbreite in em: bei großer Schrift zwei Reihen statt zerbrochener Wörter. Am
   Desktop-Layout wird die Beschriftung nie getrennt (nowrap) und die Kachel schrumpft nicht unter ihren Inhalt (min-width
   auto): passt eine Reihe nicht, bricht die Reihe um, nicht das Wort. */
.comp-sheet{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.comp-sheet[hidden]{display:none}
.comp-tools-row{display:flex;gap:.4rem}
.comp-sheet .comp-tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--abstand-1);flex:1 1 4em;min-width:0;min-height:var(--hoehe-kachel);padding:var(--abstand-2) var(--abstand-1);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--grund);color:var(--text);font:inherit;text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.comp-sheet .comp-tool .ic{width:var(--ic-24);height:var(--ic-24);display:block;flex:none}
.comp-sheet .comp-tool .l{max-width:100%;font-size:var(--grad-1);line-height:var(--zh-knapp);font-weight:var(--gewicht-mittel);hyphens:auto;overflow-wrap:break-word}
.comp-sheet .comp-tool .z{max-width:100%;font-size:var(--grad-1);line-height:var(--zh-knapp);color:var(--zweit)}
.comp-sheet .comp-tool .lz{display:contents}
@media(hover:hover){.comp-sheet .comp-tool:hover{background:var(--f3)}}
.comp-sheet .comp-tool:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.comp-sheet .comp-tool:disabled{opacity:.4}
.comp-sheet .comp-tool[aria-pressed="true"]{background:var(--akzent-leise);border-color:var(--akzent-text);color:var(--akzent-text)}
/* „B / I / U“ als Zeichen der Kachel Format */
.comp-fmt-lbl{font-size:var(--grad-2);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-plakette);line-height:var(--ic-24);white-space:nowrap}
/* Video mit KI (Henny 12: Video bleibt vorerst im Plus): Kachel in Akzent mit Wabe, Zweitzeile „Video“ */
.comp-sheet .comp-tool.ki-video{background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
.comp-sheet .comp-tool.ki-video .z{color:var(--auf-akzent)}
@media(hover:hover){.comp-sheet .comp-tool.ki-video:hover{background:var(--akzent-hover)}}
.comp-sheet .comp-tool.ki-video:active{background:var(--akzent-gedrueckt)}
@media(min-width:760px){
  .comp-sheet{gap:var(--abstand-4)}
  .comp-sheet .comp-tool{flex-direction:row;flex-basis:7em;min-width:auto;min-height:max(var(--hoehe-feld-desktop), var(--treffer-min));gap:var(--abstand-4);padding:0 var(--abstand-6)} /* 7em (3a nahm 6em, solange die Desktop-Schrift 1,25-fach war; seit Scheibe 7 wieder 7em, am Tablet weiter alle fünf in einer Reihe) */
  .comp-sheet .comp-tool .ic{width:var(--ic-18);height:var(--ic-18)}
  .comp-sheet .comp-tool .l{font-size:var(--grad-2);font-weight:var(--gewicht-halb);white-space:nowrap;hyphens:manual}
  .comp-sheet .comp-tool .lz{display:flex;flex-direction:column;align-items:flex-start}
  .comp-fmt-lbl{line-height:var(--ic-18)}
}
/* Touch am Desktop-Layout (Tablet, 1024): schmaleres Polster und kleinere Lücke in der Kachel, damit „Anhängen“ und
   „B / I / U Format“ ungetrennt in die Reihe der fünf passen */
@media(min-width:760px) and (pointer:coarse){.comp-sheet .comp-tool{gap:var(--abstand-3);padding:0 var(--abstand-3)}}
/* Kreieren (DESIGN.md 11 und 12, Mockups kreieren-ruhe, kreieren-tippt): immer in der Eingabezeile vor Senden. Leeres Feld:
   Akzent mit Wabe und „Kreieren“, so hoch wie die Knöpfe daneben. Text im Feld: nur die Wabe auf Akzent-leise mit
   Akzent-Rand, Senden ist dann der einzige gefüllte Knopf. Der Zustand hängt am Feld selbst (textarea:not(:placeholder-shown),
   Kreieren steht direkt dahinter), nicht an .hat-text: ta.oninput misst die Höhe vor setSendMode, und eingefügter Text muss
   schon beim Messen das breite Feld sehen. Schmale Zeile (bis 24em bzw. 360 px, also Handys bis 384 px und große Schrift):
   nur die Wabe, so bleibt das Feld überall mindestens 140 px breit. */
.composer .comp-tool.gen{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);min-width:var(--hoehe-composer);height:var(--hoehe-composer);padding:0 var(--abstand-6) 0 var(--abstand-5);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);white-space:nowrap;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.composer .comp-tool.gen:hover{background:var(--akzent-hover)}.composer textarea:not(:placeholder-shown) ~ .comp-tool.gen:hover{background:var(--f3)}}
.composer .comp-tool.gen:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.composer textarea:not(:placeholder-shown) ~ .comp-tool.gen{width:var(--hoehe-composer);padding:0;background:var(--akzent-leise);color:var(--akzent-text)}
.composer textarea:not(:placeholder-shown) ~ .comp-tool.gen:active{background:var(--f3)}
.composer textarea:not(:placeholder-shown) ~ .comp-tool.gen .gen-wort{display:none}
@container (max-width:24em) or (max-width:360px){.composer .comp-tool.gen{width:var(--hoehe-composer);padding:0}.composer .comp-tool.gen .gen-wort{display:none}}
.comp-tool.gen .ic{width:var(--ic-20);height:var(--ic-20);display:block;flex:none}
/* Eingabezeile (07.11. spät, Henny): der KI-Knopf klein im Feld rechts; die Kacheln aus dem Plus breit gleich links neben dem Feld ohne
   Plus, schmal (Richtung Handy) hinter dem Plus und aufgeklappt über die volle Breite unter der Zeile */
.comp-input-row{flex-wrap:wrap}
.comp-feld{position:relative;display:flex;flex:1 1 0;min-width:0}
.composer .comp-feld>textarea{flex:1 1 auto;padding-right:calc(var(--hoehe-dicht) + var(--abstand-6))}
.composer .comp-input-row .comp-feld>textarea~.comp-tool.gen{position:absolute;right:var(--abstand-3);bottom:calc((var(--hoehe-composer) - var(--hoehe-dicht)) / 2);width:var(--hoehe-dicht);min-width:0;height:var(--hoehe-dicht);margin:0;padding:0;border-width:var(--rand);border-radius:var(--r-s)}
.composer .comp-feld>.comp-tool.gen .ic{width:var(--ic-18);height:var(--ic-18)}
.comp-input-row>.comp-sheet{order:9;flex:1 0 100%;display:flex;flex-wrap:nowrap;gap:var(--abstand-2)}
.comp-input-row>.comp-sheet[hidden]{display:none}
.comp-input-row>.comp-sheet .comp-tool{flex:1 1 0;width:auto;min-width:0}
@container (min-width:34rem){
  .comp-input-row>.comp-plus{display:none}
  .comp-input-row>.comp-sheet,.comp-input-row>.comp-sheet[hidden]{order:0;flex:0 0 auto;display:flex;gap:var(--abstand-2)}
  .comp-input-row>.comp-sheet .comp-tool{flex:0 0 auto;width:var(--hoehe-composer);height:var(--hoehe-composer);min-height:0;padding:0}
  .comp-input-row>.comp-sheet .comp-tool.comp-fmt-tool{width:auto;min-width:var(--hoehe-composer);padding:0 var(--abstand-3)}   /* 08.11.: B / I / U passt ganz */
  .comp-input-row>.comp-sheet .comp-fmt-tool .comp-fmt-lbl{max-width:none;overflow:visible;letter-spacing:0}
}
/* 07.11. spät (Henny): KI-Knopf nur mit Zeichen; Kacheln im Plus nur mit Zeichen, gleich groß und quadratisch */
.composer .comp-tool.gen{width:var(--hoehe-composer);padding:0}
.comp-sheet .comp-tool{flex:0 0 auto;width:calc(var(--hoehe-tipp) + var(--abstand-4));min-width:0;min-height:calc(var(--hoehe-tipp) + var(--abstand-4));padding:0}
@media(min-width:760px){.comp-sheet .comp-tool{flex:0 0 auto;width:max(var(--hoehe-feld-desktop),var(--treffer-min));min-width:0;padding:0}}
.ki-sprachen{display:flex;flex-direction:column;gap:var(--abstand-5);padding-bottom:var(--abstand-4)}
.ki-sprachen-satz{margin:0;color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
.ki-sprachen-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--abstand-3)}
.ki-sprache{min-height:var(--hoehe-tipp);margin:0;padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-3);cursor:pointer}
@media(hover:hover){.ki-sprache:hover{background:var(--f3)}}
.ki-sprache:disabled{opacity:.5}
/* Vereinheitlichtes KI-Menü (Tabs Bild · Video) */
/* Scheibe 6a (bauplan 3.13, E16, B16): KI-Fenster in D. Fläche wie eine Seite (Untergrund, Kästen in Fläche 1 wie im Mockup
   bilder-*), Reiter Bild und Video mit Zeichen und Unterstrich in Akzent-Text (wie die Reiter der Liste, 1a), Fokusring innen.
   Hover nur bei Maus (4.6). Die D-Regeln stehen unter .modal.gen: das Profilbild-Studio (openAvatarStudio) nutzt dieselben
   .ig-Klassen ohne .gen und bleibt bis 5a gleich (Ausnahme zu 2.3). */
.gen-menu{display:flex;flex-direction:column;gap:0}
.gen-tabs{display:flex;gap:var(--abstand-2);margin:0 -1rem;padding:0 var(--abstand-4);border-bottom:var(--rand) solid var(--linie)}
.gen-tab{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);min-height:var(--hoehe-tipp);padding:0 var(--abstand-6);background:none;border:0;border-bottom:var(--rand-stark) solid transparent;border-radius:var(--r-xs) var(--r-xs) 0 0;color:var(--zweit);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.gen-tab .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.gen-tab:hover{color:var(--text);background:var(--f3)}}
.gen-tab:active{background:var(--linie-2)}
.gen-tab.on{color:var(--akzent-text);border-bottom-color:var(--akzent-text)}
.gen-tab:focus-visible{outline-offset:calc(-2 * var(--fokus-breite))} /* innen, über dem Unterstrich des gewählten Reiters */
.gen-pane[hidden]{display:none}
/* KI-Fenster mit fester Eingabeleiste unten (Hennys Ansage 24.09.). Das Fenster
   selbst scrollt nicht mehr; es scrollt nur der obere Teil, die Leiste steht.
   Scheibe 6a: overflow clip, damit auch scrollIntoView (Chip, Fokus im Prompt) das Fenster nicht als Ganzes verschiebt; am Handy
   immer so hoch wie das Blatt sein darf, damit es beim Wechsel der Reiter nicht springt (mit Tastatur in der App schrumpft es mit). */
.modal.gen{display:flex;flex-direction:column;max-width:100vw;height:calc(100dvh - var(--hoehe-kopf));overflow:hidden;overflow:clip;padding-bottom:0;background:var(--grund)}
.modal.gen>.modal-head{flex:0 0 auto;margin-bottom:0;background:var(--grund)}
.modal.gen .gen-menu,.modal.gen>.ig-split{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.modal.gen .gen-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.modal.gen .gen-pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.modal.gen .gen-pane[hidden]{display:none}
.modal.gen .ig-split{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:0}
/* Rollbereich: Einstellungen (Modelle, bei Video Auflösung und Länge), darunter die Galerie (.ig-werk) */
.ig-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -1rem;padding:var(--abstand-8) 1rem var(--abstand-10);display:flex;flex-direction:column;gap:var(--abstand-10)}
.ig-einst,.ig-werk{display:flex;flex-direction:column;gap:var(--abstand-8);min-width:0}
.ig-scroll>*,.ig-einst>*,.ig-werk>*,.ig-dock>*{flex-shrink:0} /* Zeilen mit Mindesthöhe (Wahlzeile, Köpfe) nicht zusammendrücken */
/* Leiste (D22): Fläche 1 mit Linie oben, Safe Area unten (Deckel wie das Blatt aus 3b-1); Prompt, Format und Anzahl, KI-Hinweis,
   Hauptaktion, Fortschritt, Guthaben */
.ig-dock{flex:0 0 auto;margin:0 -1rem;padding:var(--abstand-5) 1rem calc(var(--abstand-4) + min(env(safe-area-inset-bottom,0px),2.2rem));border-top:var(--rand) solid var(--linie);background:var(--f1);display:flex;flex-direction:column;gap:var(--abstand-4)}
.ig-dock .ig-field{margin:0}
/* In der Leiste erklaeren Platzhalter und Symbole sich selbst; die
   Ueberschriften kosteten auf dem Handy ein Viertel der Hoehe. (Scheibe 6a: das Feld trägt seinen Namen per aria-label; nur
   Format und Anzahl zeigen eine kleine Beschriftung, sonst blieben „1 2 4“ ohne Sinn.) */
.ig-dock .ig-field>.igl{display:none}
.ig-dock-row{display:flex;flex-direction:column;gap:var(--abstand-4);min-width:0}
/* Format und Anzahl: eine wischbare Zeile (Hennys Ansage 24.09.), rechts weich auslaufend, solange es weitergeht */
.ig-dock-chips{display:flex;align-items:center;gap:var(--abstand-8);contain:inline-size;overflow-x:auto;scrollbar-width:none;margin:calc(-1 * var(--abstand-1)) -1rem;padding:var(--abstand-3) 1rem;scroll-padding-inline:1rem;-webkit-mask-image:linear-gradient(to right,currentColor calc(100% - var(--abstand-8)),transparent);mask-image:linear-gradient(to right,currentColor calc(100% - var(--abstand-8)),transparent)}
.ig-dock-chips::-webkit-scrollbar{display:none}
.ig-dock-chips>.ig-field{flex:0 0 auto;display:flex;align-items:center;gap:var(--abstand-4)}
.ig-dock-chips>.ig-field+.ig-field{padding-left:var(--abstand-8);border-left:var(--rand) solid var(--linie)}
.modal.gen .ig-dock-chips>.ig-field>.igl{display:block;margin:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.ig-dock .ig-ratios,.ig-dock .ig-counts{flex-wrap:nowrap}
.ig-dock .ig-go{margin-top:0;width:100%}
/* Referenzbilder (26.10.2026, App-Session): Plus und Vorschauen in einer wischbaren Reihe, Nummer @n unten links, Entfernen oben rechts */
/* Scheibe 9 (bauplan 3.16): Hinzufügen als Chip vorn im Format-Streifen (.ig-ref-feld, Zeichen bildplus), die Reihe samt Hinweis und
   Haken erst mit Bildern (vorher kostete sie die Leiste rund 130 px, am Handy blieben zwei Zeilen der Modellliste). Jedes Bild eine
   Pille, daneben die Zählung in Mono; Hinweis eine Zeile links in Grad 1, Pflicht-Haken (B18) in Grad 2; Format grau, wenn der Clip es
   vom Startbild nimmt (frMalen, W9.2); Preise der Modellliste mit der Wahl (preiseNeu, W9.1); die Leiste im Betrachter bricht bei wenig
   Breite um, statt überzustehen. „Aus Video“ (openVideoUmbau, App-Session 28.10.) nutzt dieselben Klassen und sieht darum gleich aus. */
.ig-ref-feld{flex:0 0 auto;display:flex;align-items:center;min-width:0}
.modal.gen .ig-ref-feld[hidden],.modal.gen .ig-refs[hidden],.modal.gen .ig-refs .gate-ab16[hidden]{display:none}
.modal.gen .ig-chip.ig-ref-plus{gap:var(--abstand-3);font-weight:var(--gewicht-halb);white-space:nowrap}
.modal.gen .ig-chip.ig-ref-plus .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
/* Ein Bild als Pille (Höhe --hoehe-knopf): links Vorschau und @n bzw. Startbild (Tipp setzt @n bzw. wählt neu), rechts Entfernen als
   eigene Fläche; das Kreuz auf der Ecke der Vorschau nahm ihr die Trefferfläche (44 px am Handy gingen für keins von beiden). Die
   Reihe hält 4 px Rand, damit Ring und Trefferfläche des Kreuzes nicht abgeschnitten werden. */
.ig-ref-reihe{min-width:0;display:flex;align-items:center;gap:var(--abstand-4);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--abstand-2));padding:var(--abstand-2)}
.ig-ref-reihe::-webkit-scrollbar{display:none}
.ig-ref{position:relative;flex:0 0 auto;display:flex;align-items:stretch;box-sizing:border-box;height:var(--hoehe-knopf);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1)}
.ig-ref:has(>.ig-ref-plus){border:0;background:none}
.ig-ref-bild,.ig-ref-reihe .ig-ref-plus{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);box-sizing:border-box;height:100%;min-width:var(--hoehe-knopf);margin:0;padding:0 var(--abstand-4) 0 var(--abstand-1);border:0;border-radius:calc(var(--r-s) - var(--rand));background:transparent;color:var(--text);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.ig-ref-bild:has(+.ig-ref-weg){border-top-right-radius:0;border-bottom-right-radius:0}
.ig-ref-bild::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--treffer-min));transform:translateY(-50%)} /* über den Rand der Pille, volle Trefferhöhe */
.ig-ref-reihe .ig-ref-plus{justify-content:center;padding:0 var(--abstand-5);border:var(--rand) dashed var(--feldrand);border-radius:var(--r-s);color:var(--zweit)}
.ig-ref-reihe .ig-ref-plus .ic{flex:none;width:var(--ic-16);height:var(--ic-16)}
@media(hover:hover){.ig-ref-bild:hover,.ig-ref-weg:hover{background:var(--f3)}.ig-ref-reihe .ig-ref-plus:hover{background:var(--f3);color:var(--text)}}
.ig-ref-bild:active,.ig-ref-weg:active,.ig-ref-reihe .ig-ref-plus:active{background:var(--linie-2)}
.ig-ref-bild:focus-visible,.ig-ref-weg:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.ig-ref-reihe .ig-ref-bild :is(img,video){flex:none;width:calc(var(--hoehe-knopf) - 2 * var(--abstand-1) - 2 * var(--rand));height:calc(var(--hoehe-knopf) - 2 * var(--abstand-1) - 2 * var(--rand));border-radius:var(--r-xs);object-fit:cover}
.ig-ref-nr{flex:none;font-family:var(--mono);font-size:var(--grad-2);font-weight:var(--gewicht-halb);line-height:var(--grad-2-zh);font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.ig-ref-nr.wort{font-family:inherit;font-size:var(--grad-3)}
.ig-ref-reihe .ig-ref-plus .ig-ref-nr{color:inherit}
.ig-ref-weg{position:relative;flex:none;display:grid;place-items:center;box-sizing:border-box;width:calc(var(--hoehe-knopf) - var(--abstand-4));height:100%;margin:0;padding:0;border:0;border-left:var(--rand) solid var(--linie);border-radius:0 calc(var(--r-s) - var(--rand)) calc(var(--r-s) - var(--rand)) 0;background:transparent;color:var(--zweit);cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.ig-ref-weg::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.ig-ref-weg .ic{width:var(--ic-14);height:var(--ic-14);transform:rotate(45deg)}
@media(hover:hover){.ig-ref-weg:hover{color:var(--text)}}
.ig-ref-fuss{display:flex;align-items:baseline;justify-content:space-between;gap:var(--abstand-4);margin-top:var(--abstand-2)}
.modal.gen .ig-dock .ig-refs .ig-ref-fuss .ig-note{flex:1 1 auto;min-width:0;margin:0}
.ig-ref-zahl{flex:none;font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--grad-1-zh);font-variant-numeric:tabular-nums;color:var(--zweit)}
.ig-ref-zahl.knapp{color:var(--gelb)}
.ig-refs .sr-nur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.modal.gen .ig-dock .ig-refs .ig-note{margin:var(--abstand-3) 0 0;text-align:left}
.modal.gen .ig-dock .ig-refs .ig-note.knapp{color:var(--gelb)}
.modal.gen .ig-refs .gate-ab16{gap:var(--abstand-4);min-height:0;margin:var(--abstand-4) 0 0;font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.modal.gen .ig-refs .gate-ab16 input[type=checkbox]{margin:calc((var(--grad-2-zh) - var(--ic-20)) / 2) 0 0}
.modal.gen .ig-mwahl.geht-nicht .ig-mpreis{font-weight:var(--gewicht-halb);color:var(--zweit)}
/* Betrachter mit zwei Aktionen (Speichern, Damit kreieren): beide in einer Leiste unten in der Mitte; mittig über left/right und
   margin auto statt left 50 % und translate (so stünde nur die halbe Breite zur Verfügung), bei wenig Platz zwei Zeilen */
.lb-leiste{position:absolute;left:0;right:0;bottom:calc(var(--abstand-6) + env(safe-area-inset-bottom,0px));z-index:var(--ebene-auf);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--abstand-4);box-sizing:border-box;width:fit-content;max-width:calc(100% - 2 * var(--abstand-8));margin-inline:auto}
.lb-leiste .lb-dl{position:static;transform:none;white-space:nowrap}
.lb-leiste .lb-dl[hidden]{display:none}
.lb-dl.lb-loop.on,.st-voll-loop.on{background:var(--akzent);color:var(--auf-akzent)}
.lb-leiste .lb-dl:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
.ig-dock .ig-status[hidden],.ig-dock .ig-note[hidden]{display:none}
/* Im geteilten Fenster fliessen die Modelle im oberen Teil mit, statt eine
   eigene kleine Scrollbox zu haben (zwei Scrollbalken uebereinander). Scheibe 6a: die Modellliste (E18) hat am Handy ihr
   eigenes Fenster von fünf Zeilen (Regeln am Ende des Studio-Blocks); am Desktop steht sie ganz in der linken Spalte. */
.modal.gen .ig-models{max-height:none;overflow:visible;margin:0;padding:0}
/* Desktop (D11, Bildschirm 3.10 ohne Werkspalte): links Einstellungen und Leiste in einer Spalte, rechts die Galerie; beide rollen
   für sich, die Leiste steht. .ig-scroll gibt ihre beiden Teile an das Raster weiter (display: contents). */
@media(min-width:760px){
  .modal.gen{height:min(88dvh,58rem)}
  .gen-tabs{padding:0 1rem}
  .gen-tab{flex:0 0 auto;font-size:var(--grad-2)}
  .modal.gen .ig-split{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"einst werk" "dock werk";margin:0 -1rem}
  .modal.gen .ig-scroll{display:contents}
  .modal.gen .ig-einst{grid-area:einst;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--abstand-8) var(--abstand-8) var(--abstand-10) 1rem;border-right:var(--rand) solid var(--linie)}
  .modal.gen .ig-werk{grid-area:werk;align-self:stretch;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--abstand-8) 1rem var(--abstand-10) var(--abstand-10)}
  .modal.gen .ig-dock{grid-area:dock;margin:0;padding:var(--abstand-6) var(--abstand-8) var(--abstand-6) 1rem;border-right:var(--rand) solid var(--linie)}
  .modal.gen .ig-dock-chips{flex-direction:column;align-items:stretch;gap:max(var(--abstand-4), calc(var(--treffer-min) - var(--ig-chip)));contain:none;overflow:visible;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
  .modal.gen .ig-dock-chips>.ig-field{min-width:0}
  .modal.gen .ig-dock-chips>.ig-field+.ig-field{padding-left:0;border-left:0}
  .modal.gen .ig-dock-chips>.ig-field>.igl{flex:none;min-width:4.2em}
  .modal.gen .ig-dock .ig-ratios,.modal.gen .ig-dock .ig-counts{flex-wrap:wrap;row-gap:max(var(--abstand-3), calc(var(--treffer-min) - var(--ig-chip)));min-width:0}
  .modal.gen .ig-dock .ig-ratio-ic{display:none} /* in der schmalen Spalte nur die Zahlen (D E21), am Handy bleibt das Zeichen */
}
.no-chat{margin:auto;color:var(--zweit)}

#toast{position:fixed;left:50%;bottom:calc(var(--abstand-8) + env(safe-area-inset-bottom,0px));z-index:var(--ebene-meldung);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--abstand-4);width:max-content;max-width:min(var(--breite-dialog),calc(100vw - 2 * var(--seite-handy)));min-height:var(--hoehe-tipp);box-sizing:border-box;padding:var(--abstand-3) var(--abstand-7);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--schweb);color:var(--text);box-shadow:var(--schatten-2);font-size:var(--grad-3);line-height:var(--grad-3-zh);text-align:start;overflow-wrap:anywhere;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(calc(var(--abstand-4) * var(--bewegung)));transition:opacity var(--dauer-auf-weg) var(--kurve-hinaus),transform var(--dauer-auf-weg) var(--kurve-hinaus)}
/* Kurzmeldung (D13, Scheibe 3b-1): unten mittig, über allen Ebenen (--ebene-meldung), Fläche --schweb mit Rand und Schatten,
   mindestens 44 hoch, höchstens 440 breit (Breite nach Inhalt, lange Texte brechen um). Steht 4 s, mit Aktion 10 s (toast()).
   Erscheint von unten (unter reduzierter Bewegung nur Überblenden). Lage: bei offenem Dialog oben in den 56 px über dem Blatt
   (c0a4b9d), damit sie nicht dessen Knöpfe verdeckt; am Handy in der Liste über dem Fuß (Navigation, Maße wie .side-foot), im
   offenen Chat über dem Composer (Höhe wie .composer: Polster, --hoehe-composer, Rand, Safe Area mit demselben Deckel); am
   Desktop mittig über dem Chat (--seite ist die Breite der Listenspalte) und über --fusshoehe (misst fusshoeheMessen, Composer
   und Fuß der Listenspalte gleich hoch); im Betrachter über „Speichern“, in der Medien-Ablage unter deren Kopf. Wächst das Feld
   über mehrere Zeilen, deckt die Meldung höchstens dessen obere Zeile (bauplan 3.6). */
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);transition-duration:var(--dauer-auf);transition-timing-function:var(--kurve-hinein)}
@media(max-width:759px){body:not(:has(.modal-ov,.lb-ov,.mc-ov)):has(.app[data-view="chat"] .pane .composer) #toast{bottom:calc(3 * var(--abstand-4) + var(--hoehe-composer) + var(--rand) + min(env(safe-area-inset-bottom,0px),2.2rem))}}
@media(max-width:759px){body:not(:has(.modal-ov,.lb-ov,.mc-ov)):has(.app[data-view="list"]>.nav-unten) #toast{bottom:calc(var(--leiste-h) + var(--abstand-4))}}
@media(min-width:760px){body:not(:has(.modal-ov,.lb-ov,.mc-ov)):has(.pane .composer) #toast{left:calc(50% + (var(--rail-breite) + var(--seite,320px)) / 2);bottom:calc(var(--fusshoehe,0px) + var(--abstand-4) + env(safe-area-inset-bottom,0px));max-width:min(var(--breite-dialog),calc(100vw - var(--rail-breite) - var(--seite,320px) - 2 * var(--seite-handy)))}}
body:has(.modal-ov) #toast{bottom:auto;top:calc((var(--hoehe-kopf) - var(--hoehe-tipp)) / 2 + env(safe-area-inset-top,0px));transform:translateX(-50%) translateY(calc(-1 * var(--abstand-4) * var(--bewegung)))}
body:has(.modal-ov) #toast.show{transform:translateX(-50%) translateY(0)}
body:has(.mc-ov) #toast{bottom:auto;top:calc(var(--hoehe-kopf) + var(--abstand-4) + env(safe-area-inset-top,0px))}
body:has(.lb-ov) #toast{top:auto;bottom:calc(var(--hoehe-knopf) + var(--abstand-6) + var(--abstand-4) + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(calc(var(--abstand-4) * var(--bewegung)))}
body:has(.lb-ov) #toast.show{transform:translateX(-50%) translateY(0)}
/* Antippbarer Hinweis (toast mit aktion): nur solange er sichtbar ist. Die Aktion ist ein Textknopf (per Tab erreichbar,
   Trefferfläche 44), verborgen, sobald die Meldung geht; ein Tipp auf die ganze Meldung löst sie weiter aus. */
#toast.tippbar.show{pointer-events:auto;cursor:pointer}
#toast:not(.show) .toast-akt{visibility:hidden}
#toast .toast-akt::after{content:"";position:absolute;left:50%;top:50%;width:max(100%, var(--treffer-min));height:max(100%, var(--treffer-min));transform:translate(-50%,-50%)}
#toast .toast-akt{position:relative;flex:none;min-height:var(--hoehe-dicht);margin:calc(-1 * var(--abstand-2)) 0;padding:0 var(--abstand-2);border:0;border-radius:var(--r-xs);background:none;color:var(--akzent-text);font:inherit;font-weight:var(--gewicht-halb);white-space:nowrap;cursor:pointer}

/* Light-Theme (opt-in; Default ist dunkel = Hive-Identität). */
:root.light{
  color-scheme: light; /* Scheibe 3b-2 (.buehne bleibt dunkel: eigene Regel oben) */
  --hell: 1;
  --grund-n: #f6f6f4; --grund-l: .9726; --grund-k: .005;
  --f1-n: #ffffff; --f1-l: 1; --f1-k: 0;
  --f2-n: #eceef1; --f2-l: .9484; --f2-k: .006;
  --f3-n: #e2e5e9; --f3-l: .9208; --f3-k: .008;
  --schweb-n: #ffffff; --schweb-l: 1; --schweb-k: 0;
  --linie-n: #e2e4e8; --linie-l: .9185; --linie-k: .009;
  --linie-2-n: #d3d7dd; --linie-2-l: .8778; --linie-2-k: .011;
  --feldrand-n: #737a83; --feldrand-l: .5766; --feldrand-k: .016;
  --text: #121417;
  --zweit: #565d67;
  --rot: #c4271c;
  --auf-rot: #ffffff;
  --rot-leise: rgba(196, 39, 28, .10);
  --gruen: #16743e;
  --auf-gruen: #ffffff;
  --gruen-leise: rgba(22, 116, 62, .10);
  --gelb: #7b6300;
  --auf-gelb: #ffffff;
  --gelb-leise: rgba(123, 99, 0, .12);
  --scrim: rgba(18, 20, 23, .42);
  --schatten-1: 0 6px 18px rgba(18, 20, 23, .18);
  --schatten-2: 0 12px 32px rgba(18, 20, 23, .16), 0 0 0 1px rgba(18, 20, 23, .04);
  --schatten-blatt: 0 -12px 32px rgba(18, 20, 23, .16);
  --av-blau-bg: #dbe9f7; --av-blau-fg: #1d3f5e;
  --av-gruen-bg: #d8f0e0; --av-gruen-fg: #1b4b30;
  --av-lila-bg: #e7def7; --av-lila-fg: #3f2a66;
  --av-rot-bg: #f8dcd8; --av-rot-fg: #6b2520;
  --av-teal-bg: #d3efee; --av-teal-fg: #174a4c;
  --av-sand-bg: #f0e6d2; --av-sand-fg: #5a4218;
  --av-grau-bg: #e3e6ea; --av-grau-fg: #2a2e35;
  --fq-chat: #5a616b;
  --fq-arbeit: #1f5fa8;
  --fq-reise: #1f7a4a;
  --fq-kochen: #b8402a;
  --fq-privat: #6a45b8;
}
:root.light body{background:var(--grund);color:var(--text)}

/* Such-Ergebnisse beim Kontakt-Hinzufügen (Scheibe 1a): Karten wie die Zielliste (C35), Avatar wie in der Liste. */
.search-res{margin:0 var(--abstand-6);display:flex;flex-direction:column;gap:var(--abstand-2)}
.search-res button{display:flex;align-items:center;gap:var(--abstand-5);width:100%;min-height:var(--zeile-tipp);text-align:left;background:var(--f1);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);padding:var(--abstand-2) var(--abstand-5);color:var(--text);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.search-res button:hover{background:var(--f3)}}
.search-res button:active{background:var(--linie-2)}
.search-res .sn{font-weight:var(--gewicht-halb);font-size:var(--grad-4);line-height:var(--grad-4-zh)}
.search-res .sh{font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
/* Suche immer sichtbar (Scheibe 13): Suchfeld B12 unter dem Kopf der Chatliste, nur auf der Seite Chats selbst (nicht unter „Neuer
   Chat“, „Anfragen“, einem anderen Ziel oder beim Auswählen): Feld B7 mit der Lupe am Anfang und dem Kreuz zum Leeren am Ende, mit
   logischen Richtungen; ab 760 px mit grobem Zeiger nie unter 16 px (sonst zoomt Safari beim Fokus, wie 3b-2). Mit Suchtext (.sucht an
   der Tafel) treten Anfragen und Archiv zurück; über den Treffern Kapitälchen „Chats“ und „Leute finden“ (die zweite nur mit Treffern).
   Treffer der Leute wie unter „Neuer Chat“ (.search-res), am Ende das Plus (anfragen) oder der Pfeil (Chat eines Kontakts öffnen). */
/* Connections, Kopf der Chatliste, Ich (07.11.2026 spät, Henny): Neuer Chat als „+ in der Sprechblase“, daneben die Lupe; die Suche
   erscheint erst nach dem Tipp darauf; unter Ich rechts neben dem Profil der eigene QR-Code und das Scannen. */
.side-head .kopf-ic{display:inline-grid;place-items:center;width:var(--hoehe-tipp);min-width:var(--hoehe-tipp);height:var(--hoehe-tipp);padding:0;border-radius:var(--r-s)}
.side-head .kopf-ic .ic{width:var(--ic-24);height:var(--ic-24)}
.side-head .such-knopf{margin:0;border:0;background:none;color:var(--text);cursor:pointer}
@media(hover:hover){.side-head .such-knopf:hover{background:var(--f3)}}
.side-head .such-knopf[aria-expanded="true"]{background:var(--akzent-leise);color:var(--akzent-text)}
.col:not(.such-offen)>.liste-suche{display:none}
/* Meine Medien (08.11.2026): Arten als Chips, darunter nach Tagen eine Liste mit Bild oder Zeichen, Titel, Art und Uhrzeit */
.meine-medien{display:flex;flex-direction:column;gap:var(--abstand-4)}
.meine-medien>.such-arten{padding:0}
.mm-liste{display:flex;flex-direction:column}
.mm-tag{margin:var(--abstand-6) 0 var(--abstand-2);color:var(--zweit);font-size:var(--grad-2);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-plakette);text-transform:uppercase}
.mm-zeile{display:flex;align-items:center;gap:var(--abstand-5);width:100%;min-height:var(--hoehe-kachel);margin:0;padding:var(--abstand-2) 0;border:0;border-bottom:var(--rand) solid var(--linie);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.mm-bild{display:grid;place-items:center;flex:none;width:48px;height:48px;overflow:hidden;border-radius:var(--r-s);background:var(--f2);color:var(--zweit)}
.mm-bild img{width:100%;height:100%;object-fit:cover}
.mm-bild .ic{width:var(--ic-20);height:var(--ic-20)}
.mm-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.mm-titel{overflow:hidden;font-weight:var(--gewicht-halb);text-overflow:ellipsis;white-space:nowrap}
.mm-unter{overflow:hidden;color:var(--zweit);font-size:var(--grad-2);text-overflow:ellipsis;white-space:nowrap}
.mm-mehr{align-self:center}
.mm-mehr[hidden]{display:none}
.mm-voll{margin:0;white-space:pre-line;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.mm-transkript{display:flex;flex-direction:column;gap:var(--abstand-5)}
.mm-original summary{color:var(--zweit);cursor:pointer}
.mm-musik{display:flex;flex-direction:column;gap:var(--abstand-5)}
.mm-musik audio{width:100%}
/* Sprachmemo-Vorschau: Abschreiben, Abschrift, mit KI umschreiben (08.11.2026) */
.amp-tr{display:flex;flex-direction:column;gap:var(--abstand-4)}
.amp-tr-los,.amp-tr-feld{display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-weight:var(--gewicht-halb);cursor:pointer}
.amp-tr-los[hidden],.amp-tr-feld[hidden],.amp-tr-stile[hidden],.amp-tr-text[hidden]{display:none}
.amp-tr-los .ic,.amp-tr-feld .ic{width:var(--ic-18);height:var(--ic-18)}
.amp-preis{color:var(--zweit);font-weight:400;font-size:var(--grad-2)}
.amp-tr-stand{margin:0;color:var(--zweit);font-size:var(--grad-2)}
.amp-tr-stand:empty{display:none}
.amp-tr-text{box-sizing:border-box;width:100%;min-height:5rem;padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;resize:vertical}
.amp-tr-stile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2)}
.amp-tr-stile-l{color:var(--zweit);font-size:var(--grad-2);margin-right:var(--abstand-2)}
.amp-tr-stile>.ed-chip[hidden]{display:none}
/* Suche mit Reitern (07.11.2026 spät): unter dem Feld Profile, Gruppen, Chats, Medien; solange die Suche offen ist, statt der Liste */
.such-ansicht{display:none;flex:1 1 auto;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.app:is([data-ziel="chats"],:not([data-ziel])) .col.such-offen[data-reiter="chats"]:not(.chat-selecting)>.such-ansicht{display:flex}
.app:is([data-ziel="chats"],:not([data-ziel])) .col.such-offen[data-reiter="chats"]:not(.chat-selecting)>:is(.side-scroll,.liste-fuss){display:none}
.such-reiter{position:sticky;top:0;z-index:1;display:flex;gap:var(--abstand-1);padding:0 var(--polster-zeile);border-bottom:var(--rand) solid var(--linie);background:var(--grund)}
.such-reiter-k{display:inline-flex;align-items:center;gap:var(--abstand-2);min-height:var(--hoehe-tipp);margin:0;padding:0 var(--abstand-4);border:0;border-bottom:var(--rand-stark) solid transparent;background:none;color:var(--zweit);font:inherit;font-size:var(--grad-3);cursor:pointer}
.such-reiter-k.on{border-bottom-color:var(--akzent-text);color:var(--text);font-weight:var(--gewicht-halb)}
.such-zahl{color:var(--akzent-text);font-family:var(--mono);font-size:var(--grad-1)}
.such-zahl:empty{display:none}
.such-inhalt{display:flex;flex-direction:column;padding:var(--abstand-3) 0 var(--abstand-8)}
.such-inhalt>.such-ueber{margin:var(--abstand-6) var(--polster-zeile) var(--abstand-2);color:var(--zweit);font-size:var(--grad-2);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-plakette);text-transform:uppercase}
.such-inhalt>.add-hint{margin:var(--abstand-4) var(--polster-zeile)}
.such-ansicht>.add-hint{margin:var(--abstand-4) var(--polster-zeile) 0}
.such-ansicht>.add-hint[hidden]{display:none}
.such-zeile{display:flex;align-items:center;gap:var(--abstand-5);min-height:var(--hoehe-kachel);padding:var(--abstand-2) var(--polster-zeile)}
.such-zeile .meta{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.such-zeile .name{overflow:hidden;font-weight:var(--gewicht-halb);text-overflow:ellipsis;white-space:nowrap}
.such-zeile .sub{overflow:hidden;color:var(--zweit);font-size:var(--grad-2);text-overflow:ellipsis;white-space:nowrap}
.such-zeile-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-voll);background:var(--f2);color:var(--zweit)}
.such-zeile-ic .ic{width:var(--ic-20);height:var(--ic-20)}
.such-profil{display:flex;flex:1 1 auto;align-items:center;gap:var(--abstand-5);min-width:0;margin:0;padding:0;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.such-connect{flex:none;min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-6);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-voll);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer}
.such-connect.leise{border-color:var(--feldrand);background:var(--f1);color:var(--text)}
.such-connect:disabled{border-color:var(--feldrand);background:transparent;color:var(--zweit);cursor:default}
.such-nachricht .such-ausschnitt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.such-mark{background:none;color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.such-arten{display:flex;flex-wrap:wrap;gap:var(--abstand-2);padding:var(--abstand-2) var(--polster-zeile) var(--abstand-4)}
.such-medien{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:var(--abstand-2);padding:0 var(--polster-zeile)}
.such-medium{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;margin:0;padding:0;border:0;border-radius:var(--r-s);background:var(--f2);color:var(--zweit);cursor:pointer}
.such-medium img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.such-medium>.ic{position:relative;width:var(--ic-24);height:var(--ic-24)}
.such-medium:not(.ohne-bild)>.ic{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.such-medium.ohne-bild{align-content:center;gap:var(--abstand-2);padding:var(--abstand-3)}
.such-medium-name{max-width:100%;overflow:hidden;color:var(--text);font-size:var(--grad-1);text-overflow:ellipsis;white-space:nowrap}
.prof-fremd>.prof-connect{display:block;width:100%;margin-top:var(--abstand-6)}
/* Mein Profil als Seite (08.11.2026): gestaltet wie /u/<name>, darüber die Wahl des Blicks */
.profil-seite{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--abstand-6);max-width:30rem;margin:0 auto;padding:var(--abstand-8) var(--seite-handy) var(--abstand-16)}
.ps-vorschau{margin:0;color:var(--zweit);font-size:var(--grad-2)}
.ps-wahl{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--abstand-2);margin-top:calc(-1 * var(--abstand-4))}
.ps-karte{box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--abstand-5);padding:var(--abstand-10) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-l,18px);background:var(--f1)}
.ps-bild{border:var(--rand) solid var(--linie)}
.ps-name{margin:0;font-size:var(--grad-7,26px);line-height:1.2;text-align:center;overflow-wrap:anywhere}
.ps-handle{margin:calc(-1 * var(--abstand-4)) 0 0;color:var(--zweit)}
.ps-bio{margin:0;text-align:center;white-space:pre-line;overflow-wrap:anywhere}
.ps-links{width:100%;display:flex;flex-direction:column;gap:var(--abstand-4)}
.ps-links a{display:block;padding:var(--abstand-6) var(--abstand-7);border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:var(--grund);color:var(--text);font-weight:var(--gewicht-halb);text-align:center;text-decoration:none;overflow-wrap:anywhere}
@media(hover:hover){.ps-links a:hover{border-color:var(--akzent-text)}}
.ps-hinweis{margin:0;color:var(--zweit);font-size:var(--grad-2);text-align:center}
.ps-los{display:block;width:100%;box-sizing:border-box;padding:var(--abstand-6);border-radius:var(--r-m);background:var(--akzent);color:var(--auf-akzent);font-weight:var(--gewicht-fett);text-align:center;opacity:.55}
.ps-acts{width:100%;display:flex;flex-wrap:wrap;gap:var(--abstand-4)}
.ps-acts>.cs-save{flex:1 1 100%}
.ps-acts>.pa-btn:not(.cs-save){flex:1 1 auto;text-align:center;text-decoration:none}
.ps-sicht{margin:0;text-align:center}
/* Downloader (08.11.2026): Helfer-Zeile, Link, Format, Qualität, Liste der Downloads */
.dl-pane{display:flex;flex-direction:column;gap:var(--abstand-6);max-width:44rem}
.dl-satz{margin:0}
.dl-helfer{display:flex;align-items:center;gap:var(--abstand-4);padding:var(--abstand-4) var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.dl-punkt{flex:none;width:10px;height:10px;border-radius:50%;background:var(--zweit)}
.dl-punkt.an{background:var(--gruen)}
.dl-helfer-satz{flex:1 1 auto;min-width:0}
.dl-form{display:flex;flex-direction:column;gap:var(--abstand-4)}
.dl-reihe{display:flex;gap:var(--abstand-3)}
.dl-reihe .dl-link{flex:1 1 auto;min-width:0}
.dl-plattform{color:var(--akzent-text);font-size:var(--grad-2);font-weight:var(--gewicht-halb)}
.dl-plattform:empty{display:none}
.dl-format{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.dl-qualitaet{align-self:flex-start}
.dl-liste{display:flex;flex-direction:column}
.dl-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-5);padding:var(--abstand-4) 0;border-bottom:var(--rand) solid var(--linie)}
.dl-text{display:flex;flex:1 1 14rem;flex-direction:column;min-width:0}
.dl-titel{overflow:hidden;font-weight:var(--gewicht-halb);text-overflow:ellipsis;white-space:nowrap}
.dl-unter{color:var(--zweit);font-size:var(--grad-2)}
.dl-fehler .dl-unter{color:var(--rot)}
.dl-knoepfe{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.modal.gen .dl-knoepfe .dl-weg{color:var(--rot)}
@media(max-width:759px){.modal.gen .dl-knoepfe .ig-chip{padding:0 var(--abstand-3);min-width:0}}
.dl-kopf{display:flex;flex:1 1 16rem;align-items:center;gap:var(--abstand-4);min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
button.dl-kopf{cursor:pointer}
.dl-kopf .dl-text{flex:1 1 auto}
.dl-bild{position:relative;display:flex;flex:none;align-items:center;justify-content:center;width:56px;height:56px;overflow:hidden;border-radius:var(--r-s);background:var(--f2);color:var(--zweit)}
.dl-bild img{display:block;width:100%;height:100%;object-fit:cover}
.dl-bild .ic{width:var(--ic-20);height:var(--ic-20)}
.dl-anzahl{position:absolute;right:3px;bottom:3px;min-width:18px;padding:0 4px;border-radius:var(--r-voll);background:rgba(0,0,0,.66);color:#fff;font-size:11px;font-variant-numeric:tabular-nums;line-height:18px;text-align:center}
.dl-zahlen-kurz{font-variant-numeric:tabular-nums}
.dl-details{display:flex;flex-direction:column;gap:var(--abstand-5)}
.dl-gross{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.dl-gross-bild{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:120px;overflow:hidden;border-radius:var(--r-m);background:var(--f2);color:var(--zweit)}
.dl-gross-bild img{display:block;width:100%;height:auto;max-height:min(56vh,420px);object-fit:contain}
.dl-gross-bild .ic{width:40px;height:40px}
.dl-gross-bild .dl-anzahl{right:8px;bottom:8px;min-width:24px;font-size:13px;line-height:24px}
.dl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:var(--abstand-2)}
.dl-kachel{position:relative;aspect-ratio:1;margin:0;padding:0;overflow:hidden;border:0;border-radius:var(--r-s);background:var(--f2);cursor:pointer}
.dl-kachel img,.dl-kachel video{display:block;width:100%;height:100%;object-fit:cover}
.dl-kachel .ic{position:absolute;right:4px;bottom:4px;width:var(--ic-16);height:var(--ic-16);color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.dl-konto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-1);min-width:0}
.dl-konto strong{overflow-wrap:anywhere}
.dl-original{margin-top:var(--abstand-2)}
.dl-zahlen{display:flex;flex-wrap:wrap;gap:var(--abstand-8)}
.dl-zahl{display:flex;flex-direction:column}
.dl-zahl strong{font-size:var(--grad-5);font-variant-numeric:tabular-nums}
.dl-zahl span{color:var(--zweit);font-size:var(--grad-2)}
.dl-abschnitt{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-4)}
.dl-abschnitt .mm-tag{margin:0}
.dl-caption{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.dl-tags{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.dl-tag{padding:2px var(--abstand-3);border-radius:var(--r-voll);background:var(--f2);color:var(--akzent-text);font-size:var(--grad-2);-webkit-user-select:text;user-select:text}
.dl-aktionen{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}
.dl-aktionen .dl-weg{color:var(--rot)}
.dl-aktionen .on{border-color:var(--akzent)}
.dl-schritte{display:flex;flex-direction:column;gap:var(--abstand-5);padding-left:1.25rem}
.dl-schritte li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-2)}
.dl-befehl{display:block;max-width:100%;padding:var(--abstand-3) var(--abstand-4);border-radius:var(--r-s);background:var(--f2);font-family:var(--mono);font-size:var(--grad-2);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
/* 08.11.2026: Frequenz-Art mit Wort (Menü, Profil), Ich mit Profilbild in der Leiste, KI-Hinweise aus, Studio-Vorgabe nur Zeichen und Preis */
.ctag.mit-text{display:inline-flex;align-items:center;gap:var(--abstand-1);padding:0 var(--abstand-3) 0 var(--abstand-2);border:var(--rand) solid var(--linie);border-radius:var(--r-voll);font-size:var(--grad-1);line-height:var(--grad-1-zh);white-space:nowrap}
.ctag.mit-text .ic{width:var(--ic-14,14px);height:var(--ic-14,14px)}
.ctag.ki.mit-text{color:var(--akzent-text);border-color:var(--akzent-rand)}
.nav-unten .ziel .foot-prof{display:grid;place-items:center;height:var(--hoehe-dicht);cursor:inherit}
@media(max-width:759px){.nav-unten .ziel .foot-prof{height:calc(var(--hoehe-dicht) - var(--abstand-2))}.nav-unten .ziel .foot-prof .av{width:24px!important;height:24px!important;font-size:11px!important}}   /* so hoch wie die Zeichen daneben */
.nav-unten .ziel[aria-current] .foot-prof .av{box-shadow:0 0 0 var(--rand-stark) var(--akzent-text)}
.ki-hinweis.aus{display:none}
@media(max-width:759px){.ig-mklapp.nur-zeichen .ig-mklapp-name{display:none}}   /* am Computer mit Namen (Platz genug) */
/* Profilbild-Studio über OpenAI (08.11.2026): Stile in Gruppen, Ideen, Anzahl mit Preis, Ergebnisse als Karten */
.ig.av-studio .ig-provs[role="radiogroup"]:has(>.av-gruppe){display:flex;flex-direction:column;align-items:stretch;gap:var(--abstand-5);width:100%}
.av-gruppe{display:flex;flex-direction:column;gap:var(--abstand-2)}
.av-gruppe-name{color:var(--zweit);font-size:var(--grad-1);font-weight:var(--gewicht-halb)}
.av-gruppe-reihe,.av-ideen{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.av-ideen{align-items:center;width:100%}
.av-ideen>.av-gruppe-name{flex-basis:100%}
.av-preis{margin:0}
.ig.av-studio .av-out:not([hidden]){display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--abstand-6)}
.av-karte{display:flex;flex-direction:column;gap:var(--abstand-3);min-width:0}
.av-karte .av-out-img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-m)}
.av-karte .av-out-row{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.av-karte .av-out-row .ig-go{flex:1 1 100%}
/* Kamera am Computer (08.11.2026): Vorschau, Foto, Video, Kamera wechseln */
.kam{position:fixed;inset:0;z-index:calc(var(--ebene-dialog) + 30);display:grid;place-items:center;background:#000}
.kam-bild{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.kam-bild.gespiegelt{transform:scaleX(-1)}
.kam.blitz::after{content:"";position:absolute;inset:0;background:#fff;opacity:.6;pointer-events:none}
.kam-x{position:absolute;top:calc(var(--abstand-6) + env(safe-area-inset-top,0px));right:var(--abstand-6);display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);border:0;border-radius:var(--r-voll);background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.kam-x .ic{transform:rotate(45deg);width:var(--ic-24);height:var(--ic-24)}
.kam-satz{position:absolute;left:0;right:0;top:45%;margin:0;color:#fff;text-align:center}
.kam-satz:empty{display:none}
.kam-leiste{position:absolute;left:0;right:0;bottom:calc(var(--abstand-10) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:var(--abstand-10)}
.kam-foto{display:grid;place-items:center;width:72px;height:72px;border:4px solid #fff;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;cursor:pointer}
.kam-foto .ic{width:var(--ic-28);height:var(--ic-28)}
.kam-video,.kam-wechsel{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-tipp);padding:0 var(--abstand-6);border:0;border-radius:var(--r-voll);background:rgba(0,0,0,.55);color:#fff;font:inherit;font-weight:var(--gewicht-halb);cursor:pointer}
.kam-wechsel[hidden]{display:none}
.kam-wechsel .ic{width:var(--ic-20);height:var(--ic-20)}
.kam-punkt{width:12px;height:12px;border-radius:50%;background:#ff3b30}
.kam.nimmt .kam-punkt{animation:kam-blink 1s steps(2,start) infinite}
.kam.nimmt .kam-foto,.kam.nimmt .kam-wechsel{opacity:.35;pointer-events:none}
@keyframes kam-blink{to{visibility:hidden}}
/* Rail oben: Zeichen mit Guthaben, so groß wie vorher das Zeichen (08.11.2026) */
.rail .rail-guthaben.rail-oben{margin-bottom:var(--abstand-4)}
.rail .rail-guthaben.rail-oben .cp-mark{width:var(--ic-28);height:var(--ic-28)}
/* Anmeldung: Umschalter E-Mail oder Benutzername (08.11.2026) */
.gate .gate-art{margin-top:var(--abstand-6)}
.gate .gate-art-satz{margin:calc(-1 * var(--abstand-2)) 0 var(--abstand-4);color:var(--zweit);font-size:var(--grad-2)}
.gate .gate-art-satz[hidden],.gate .gate-ab16[hidden]{display:none}
/* Newsletter-Haken unter dem Ab-16-Haken (HIVE DESIGN, 08.11.2026): Trefferfläche über Polster statt Mindesthöhe, enger Abstand zwischen beiden */
.gate .gate-ab16{min-height:0;margin:0;padding:max(var(--abstand-2),calc((var(--treffer-min) - var(--grad-3-zh-text)) / 2)) 0}
.gate .gate-ab16+.gate-ab16{margin-top:calc(var(--abstand-1) - var(--abstand-5))}
/* Anmeldung 08.11.2026: Backup-E-Mail, Zwei-Faktor (Einrichten, Ersatzcodes, zweiter Schritt der Anmeldung) */
.backup-mail{display:flex;flex-direction:column}
.backup-mail .set-link.danger{color:var(--rot)}
.zf-einrichten{text-align:left}
.zf-einrichten>.notiz{text-align:left;margin:0}
.zf-schluessel{font-family:var(--mono);letter-spacing:.04em;user-select:all;-webkit-user-select:all}
.zf-code{text-align:center;font-family:var(--mono);font-size:var(--grad-6,18px);letter-spacing:.2em}
.zf-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-3) var(--abstand-8);margin:var(--abstand-6) 0;padding-left:1.4rem;font-family:var(--mono);font-size:var(--grad-4);user-select:all;-webkit-user-select:all}
.gate .gate-post>.ic{width:48px;height:48px;color:var(--akzent-text)}
.gate-2fa-titel{font-size:var(--grad-6,20px)}
/* Speichern mit Rückmeldung (08.11.2026): lädt mit Kreisel, grün mit Haken, rot mit Kreuz; Profil-Seite: fest unten über der Leiste */
.sk{display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.sk .ic{width:var(--ic-18);height:var(--ic-18);flex:none}
.sk .sk-x{transform:rotate(45deg)}
.sk.sk-laedt{cursor:progress}
.sk.sk-ok{border-color:var(--gruen);background:var(--gruen);color:var(--grund)}
.sk.sk-fehler{border-color:var(--rot);background:var(--rot);color:var(--grund)}
.sk-kreisel{flex:none;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sk-dreh .7s linear infinite}
@keyframes sk-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sk-kreisel{animation-duration:2s}}
.prof-body.auf-seite>.prof-foot.klebt{position:sticky;bottom:0;z-index:var(--ebene-klebt);margin:var(--abstand-8) calc(-1 * var(--seite-handy)) 0;padding:var(--abstand-5) var(--seite-handy);border-top:var(--rand) solid var(--linie);background:var(--grund);box-shadow:none}
@media(min-width:760px){.prof-body.auf-seite>.prof-foot.klebt{margin-left:calc(-1 * var(--seite-mitte));margin-right:calc(-1 * var(--seite-mitte));padding-left:var(--seite-mitte);padding-right:var(--seite-mitte)}}
.prof-body.auf-seite>.prof-foot.klebt .cs-save{flex:1 1 auto}
/* HIVE DESIGN 08.11. (bauplan 3.19, gemessen): W-QR, W-Suche, W-Ich, W-Treffer, W-Fuß */
.qr-link{max-width:100%;font-family:inherit;font-size:var(--grad-3);letter-spacing:0;color:var(--zweit);overflow-wrap:anywhere;text-align:center}
.prof-link{flex-wrap:wrap}
.prof-link>.prof-link-url{flex-basis:100%;display:inline-flex;align-items:center;min-height:var(--hoehe-tipp)}
.prof-eigen .prof-qr-knopf{min-width:0}
.prof-eigen>.cs-save{flex-basis:100%}
.such-reiter{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.such-reiter::-webkit-scrollbar{display:none}
.such-reiter-k{flex:none}
.ich-kopf>.ich-profil{flex:1 1 0;min-width:0}   /* 08.11. (Henny): QR und Scannen bleiben rechts neben dem Profil, auch schmal */
.ich-kopf>.ich-profil .ip-text>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.such-connect,.ed-chip{position:relative}
.such-connect::after,.ed-chip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.col>.liste-fuss{max-height:50%;overflow-y:auto;overscroll-behavior:contain}
/* Ich, Account und Profil als Seite (08.11.2026): Fuß nicht klebend, ohne Abmelden; Profil-Link; eigenes Profil; Geräte-Schritte */
.prof-body.auf-seite{box-sizing:border-box;padding:var(--abstand-6) calc(var(--seite-handy) + env(safe-area-inset-right,0px)) calc(var(--abstand-16) + env(safe-area-inset-bottom,0px)) calc(var(--seite-handy) + env(safe-area-inset-left,0px))}
@media(min-width:760px){.prof-body.auf-seite{max-width:calc(640 * var(--tp));padding:var(--abstand-10) var(--seite-mitte) var(--abstand-20)}}
.prof-body.auf-seite>.prof-foot{position:static;margin:var(--abstand-8) 0 0;padding:var(--abstand-6) 0 0;background:none;box-shadow:none}
.prof-body.auf-seite>.ich-bereich,.prof-body.auf-seite>.ein-gruppe{margin-top:var(--abstand-10)}
.prof-link{display:flex;align-items:center;gap:var(--abstand-4);min-width:0}
.prof-link:empty{display:none}
.prof-link-url{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--akzent-text);text-overflow:ellipsis;white-space:nowrap}
.prof-eigen .cs-save{flex:1 1 auto}
.prof-eigen .prof-qr-knopf{flex:none;display:grid;place-items:center;width:var(--hoehe-knopf);padding:0}
.prof-eigen .prof-qr-knopf .ic{width:var(--ic-20);height:var(--ic-20)}
.prof-sicht{margin:var(--abstand-6) 0 0}
.verbinden-schritte p{margin:0}
.verbinden-schritte ol{margin:var(--abstand-3) 0 0;padding-left:1.25rem;display:flex;flex-direction:column;gap:var(--abstand-2)}
.prof-bio,.prof-field .pv{white-space:pre-line;overflow-wrap:anywhere}
.prof-mehr{display:flex;flex-direction:column;gap:var(--abstand-6);margin-top:var(--abstand-8)}
.prof-mehr>.prof-socials{margin-top:0}
.prof-mehr>.prof-offen{padding:0}
.prof-mehr>.pe-hint{margin-top:calc(-1 * var(--abstand-4))}
.prof-fremd>.prof-connect:not(:disabled){border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent);font-weight:var(--gewicht-halb)}
.such-medium-ki{position:absolute;top:var(--abstand-2);left:var(--abstand-2);padding:0 var(--abstand-2);border-radius:var(--r-xs);background:rgba(0,0,0,.6);color:#fff;font-size:var(--grad-1);font-weight:var(--gewicht-halb)}
.connections{display:flex;flex-direction:column;gap:var(--abstand-4);padding-bottom:var(--abstand-4)}
.connections-liste{display:flex;flex-direction:column}
.connections-liste .row{display:flex;align-items:center;gap:var(--abstand-6);width:100%;min-height:var(--hoehe-kachel);padding:var(--abstand-3) var(--abstand-2);border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
@media(hover:hover){.connections-liste .row:hover{background:var(--f3)}}
.connections-liste .meta{display:flex;flex-direction:column;min-width:0}
.connections-liste .name{font-weight:var(--gewicht-halb)}
.connections-liste .sub{color:var(--zweit);font-size:var(--grad-2)}
.connections .add-hint[hidden]{display:none}
.ich-kopf{display:flex;align-items:center;gap:var(--abstand-4);padding-right:var(--polster-zeile);border-bottom:var(--rand) solid var(--linie)}
.ich-kopf>.ich-profil{flex:1 1 auto;min-width:0;border-bottom:0}
.ich-qr,.ich-scan{flex:none;display:grid;place-items:center;box-sizing:border-box;margin:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);cursor:pointer}
.ich-qr{width:calc(var(--hoehe-tipp) + var(--abstand-8));height:calc(var(--hoehe-tipp) + var(--abstand-8));padding:var(--abstand-2);background:#fff;color:#000}
.ich-qr svg{display:block;width:100%;height:100%}
.ich-qr>.ic{width:var(--ic-24);height:var(--ic-24)}
.ich-scan{width:var(--hoehe-tipp);height:var(--hoehe-tipp);padding:0;background:var(--f1);color:var(--text)}
.ich-scan .ic{width:var(--ic-24);height:var(--ic-24)}
@media(hover:hover){.ich-scan:hover{background:var(--f3)}}
.liste-suche{flex:none;padding:var(--abstand-3) var(--polster-zeile) var(--abstand-4);border-bottom:var(--rand) solid var(--linie)}
.col:not([data-reiter="chats"])>.liste-suche,.app[data-ziel]:not([data-ziel="chats"]) .col>.liste-suche,.col.chat-selecting>.liste-suche{display:none}
.liste-suche .suche{position:relative;display:flex;align-items:center;width:100%;min-width:0}
.liste-suche .lupe{position:absolute;inset-inline-start:var(--abstand-5);top:50%;transform:translateY(-50%);width:var(--ic-18);height:var(--ic-18);color:var(--zweit);pointer-events:none}
.liste-suche .feld{box-sizing:border-box;width:100%;min-width:0;min-height:var(--hoehe-feld);padding-block:0;padding-inline:calc(var(--abstand-5) + var(--ic-18) + var(--abstand-4)) calc(var(--abstand-1) + var(--hoehe-ik));border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-4)}
.liste-suche .feld::placeholder{color:var(--zweit);opacity:1}
.liste-suche .feld::-webkit-search-cancel-button,.liste-suche .feld::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.liste-suche .leeren{position:absolute;inset-inline-end:var(--abstand-1);top:50%;transform:translateY(-50%);display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--zweit);cursor:pointer}
.liste-suche .leeren[hidden]{display:none}
@media(hover:hover){.liste-suche .leeren:hover{background:var(--f3);color:var(--text)}}
.liste-suche .leeren .ic{width:var(--ic-18);height:var(--ic-18)}
@media(min-width:760px){.liste-suche .feld{font-size:var(--grad-3)}}
@media(min-width:760px) and (pointer:coarse){.liste-suche .feld{font-size:max(16px,var(--grad-3))}}
.tab-pane.sucht>:is(.anfragen-zeile,.archiv-zeile){display:none}
.such-ueber{margin:0;padding:var(--abstand-6) var(--polster-zeile) var(--abstand-3);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.such-leute{padding-bottom:var(--abstand-6)}
.tab-pane:not(.sucht)>.such-leute{display:none}
.such-leute:not(:has(.search-res>button))>.such-ueber{display:none}
.search-res button{text-align:start}
.search-res .tr-zeichen{flex:none;margin-inline-start:auto;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
[dir="rtl"] .search-res .tr-zeichen{transform:scaleX(-1)}
/* Angefragt (Scheibe 14, W13.2): „Angefragt“ halbfett in Marke-Text neben dem Benutzernamen; ohne Chat in der Liste ein gesperrter
   Treffer (aria-disabled, kein Hover, tippbar mit Kurzmeldung) mit dem Haken in Marke-Text, der von rechts nach links nicht gespiegelt wird. */
.search-res .tr-angefragt{color:var(--marke-text);font-weight:var(--gewicht-halb)}
.search-res button[aria-disabled="true"]{cursor:default}
@media(hover:hover){.search-res button[aria-disabled="true"]:hover{background:var(--f1)}}
.search-res button[aria-disabled="true"]:active{background:var(--f1)}
.search-res .tr-zeichen.tr-haken{color:var(--marke-text)}
[dir="rtl"] .search-res .tr-zeichen.tr-haken{transform:none}

/* Zähler im Reiter Anfragen (C6 klein): Sechseck in Akzent mit Kante wie .badge. */
.req-badge[hidden]{display:none}
.req-badge{position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:1.5em;height:1.75em;padding:0 .3em;color:var(--auf-akzent);font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-fett);line-height:var(--zh-eng);letter-spacing:0;font-variant-numeric:tabular-nums;flex:none}
.req-badge::before,.req-badge::after{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);background:var(--akzent-rand);clip-path:polygon(50% 2.5%,97% 26.25%,97% 73.75%,50% 97.5%,3% 73.75%,3% 26.25%)}
.req-badge::after{inset:var(--rand);background:var(--akzent)}

/* Annehmen/Ablehnen-Leiste statt Composer bei einer Anfrage. */
/* Scheibe 3a (C31): Leiste statt Composer auf Fläche 1 mit Linie oben; der Satz in Zweittext, der Name halbfett in Textfarbe;
   Ablehnen links (Rand) und Annehmen rechts (Akzent), gleich breit, bei großer Schrift untereinander; darunter „Melden“.
   Gelöschtes oder gesperrtes Konto: nur der Satz. Die Abstände zum Rand setzt die Regel weiter unten. */
.accept-bar{display:flex;flex-direction:column;gap:var(--abstand-4);padding:var(--abstand-6);border-top:var(--rand) solid var(--linie);background:var(--f1)}
.accept-bar .at{font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
.accept-bar .at b{font-weight:var(--gewicht-halb);color:var(--text)}
.accept-bar .ab{display:flex;flex-wrap:wrap;gap:var(--abstand-4)}
.accept-bar .acc,.accept-bar .dec{position:relative;flex:1 1 8em;min-height:var(--hoehe-knopf);padding:0 var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.accept-bar .acc{background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
@media(hover:hover){.accept-bar .acc:hover{background:var(--akzent-hover)}.accept-bar .dec:hover{background:var(--f3)}}
.accept-bar .acc:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.accept-bar .dec:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.accept-bar .dec{background:transparent}

/* Nachrichten-Mehrfachauswahl: Kopf-Leiste (Anzahl+Abbrechen) ersetzt den Chat-Header,
   Aktionsleiste unten ersetzt den Composer; markierte Blasen bekommen einen Ring + Haken. */
/* Scheibe 2c (C32): Kopf 56 auf Fläche 1 mit „Auswahl beenden“ (44, Desktop 36) und der Anzahl (role=status, --grad-6 fett, Desktop
   --grad-4; „Nachrichten antippen“ in Zweittext); gewählte Blasen mit Rand und Ring in Akzent-Text und der Haken-Marke in der
   Akzentfläche; Leiste auf Fläche 1 mit Kacheln 60 (Desktop 40 nebeneinander, bei Touch 44): Rand --feldrand, Fläche --grund, Zeichen
   20, Wabe in Akzent-Text, Preis in Mono in Akzent-Text; gesperrt Fläche 2 mit --linie-2 und Zweittext (eine Form, keine Deckkraft). */
.sel-head{display:flex;align-items:center;gap:var(--abstand-4);box-sizing:border-box;min-height:calc(var(--hoehe-kopf) + env(safe-area-inset-top));padding:env(safe-area-inset-top) calc(var(--abstand-4) + env(safe-area-inset-right)) 0 calc(var(--abstand-2) + env(safe-area-inset-left));background:var(--f1);border-bottom:var(--rand) solid var(--linie);position:sticky;top:0;z-index:7}
.sel-x{position:relative;display:grid;place-items:center;flex:none;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:none;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.sel-x .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
@media(hover:hover){.sel-x:hover{background:var(--f3)}}
.sel-x:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.sel-count{flex:1;min-width:0;font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp);color:var(--text)}
.sel-count.leer{font-weight:var(--gewicht-mittel);color:var(--zweit)}
@media(min-width:760px){.sel-count{font-size:var(--grad-4);line-height:var(--grad-4-zh)}}
.selecting .chat-head,.selecting .composer,.selecting .accept-bar,.selecting .msg-jump,.selecting .secret-banner,.selecting .e2e-nudge{display:none}
.selecting .bubble{cursor:pointer}
.selecting .bubble-actions{display:none}
.selecting .bubble.sel .bubble-body{border-color:var(--akzent-text);box-shadow:0 0 0 var(--rand) var(--akzent-text)}
.selecting .bubble.sel .bubble-body::after{content:"✓";position:absolute;top:calc(-1 * var(--abstand-4));inset-inline-end:calc(-1 * var(--abstand-4));z-index:3;display:grid;place-items:center;box-sizing:border-box;width:var(--ic-20);height:var(--ic-20);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-voll);background:var(--akzent);color:var(--auf-akzent);box-shadow:var(--schatten-bild);font-size:var(--grad-1);font-weight:var(--gewicht-fett);line-height:var(--zh-eng)}
.sel-bar{display:flex;gap:var(--abstand-4);padding:var(--abstand-4) calc(var(--abstand-6) + env(safe-area-inset-right)) calc(var(--abstand-4) + env(safe-area-inset-bottom)) calc(var(--abstand-6) + env(safe-area-inset-left));background:var(--f1);border-top:var(--rand) solid var(--linie)}
.sel-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:.22rem;background:var(--f2);border:1px solid var(--linie-2);border-radius:.7rem;color:var(--text);padding:.5rem .3rem;font-size:.72rem;font-weight:600;cursor:pointer}
.sel-act .ic{width:1.25rem;height:1.25rem}
.sel-act .sel-spark{font-size:1.2rem;line-height:1}
.sel-act:disabled{opacity:.4;cursor:default}
.sel-act.loading{opacity:.6}
.sel-act .sel-preis{font-size:.6rem;font-weight:500;opacity:.75;white-space:nowrap}
.sel-bar .sel-act{min-width:0;justify-content:center;gap:var(--abstand-1);box-sizing:border-box;min-height:var(--hoehe-kachel);padding:var(--abstand-3) var(--abstand-2);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--grund);color:var(--text);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;hyphens:auto;overflow-wrap:anywhere;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.sel-bar .sel-act .ic{width:var(--ic-20);height:var(--ic-20);flex:none}
.sel-bar .sel-act .sel-wabe{color:var(--akzent-text)}
@media(hover:hover){.sel-bar .sel-act:hover{background:var(--f3)}}
.sel-bar .sel-act:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.sel-bar .sel-act:disabled{opacity:1;background:var(--f2);border-color:var(--linie-2);color:var(--zweit);cursor:not-allowed;transform:none}
.sel-bar .sel-act:disabled .ic,.sel-bar .sel-act:disabled .sel-preis{color:var(--zweit)}
.sel-bar .sel-act.loading{opacity:1;cursor:progress}
.sel-bar .sel-act .sel-preis{max-width:100%;font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp);color:var(--akzent-text);opacity:1;white-space:normal}
@media(min-width:760px){.sel-bar .sel-act{flex-direction:row;flex-wrap:wrap;min-height:var(--hoehe-feld-desktop);gap:var(--abstand-2) var(--abstand-4);padding:var(--abstand-2) var(--abstand-6);font-size:var(--grad-2)}}
@media(min-width:760px) and (pointer:coarse){.sel-bar .sel-act{min-height:var(--hoehe-tipp)}}
.sel-act .sel-preis:empty{display:none}

/* Chats auswählen (C32, Scheibe 1a): Kopf 56 mit „Fertig“, Anzahl mittig und „Alle“ (Text in Akzent-Text, gedrückt mit
   Fläche 3 und Schrumpfen); Zeilen mit Kästchen (B18) als erstem Kind, gewählt in Akzent-leise; Leiste mit „Für mich
   löschen“ und „Archivieren“ (Fläche Grund, Rand Feldrand). Reiter und Fuß bleiben dabei ausgeblendet. */
.chat-sel-head{display:flex;align-items:center;gap:var(--abstand-4);min-height:var(--hoehe-kopf);padding:0 var(--abstand-4);border-bottom:var(--rand) solid var(--linie);background:var(--grund)}
.chat-sel-head .csh-count{flex:1;min-width:0;text-align:center;font-size:var(--grad-6);font-weight:var(--gewicht-fett);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sel-head button{flex:none;min-height:var(--hoehe-knopf);padding:0 var(--abstand-5);background:none;border:0;border-radius:var(--r-s);color:var(--akzent-text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.chat-sel-head button:hover{background:var(--f3)}}
.chat-sel-head button:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
@media(min-width:760px){.chat-sel-head .csh-count{font-size:var(--grad-4)}.chat-sel-head button{font-size:var(--grad-2)}}
.chat-selecting .side-tabs,.chat-selecting .side-foot{display:none}
.chat-sel-bar{display:flex;gap:var(--abstand-4);padding:var(--abstand-4) calc(var(--abstand-6) + env(safe-area-inset-right)) calc(var(--abstand-4) + env(safe-area-inset-bottom)) calc(var(--abstand-6) + env(safe-area-inset-left));background:var(--grund);border-top:var(--rand) solid var(--linie-2)}
.chat-sel-bar .sel-act{min-height:var(--hoehe-kachel);gap:var(--abstand-2);background:var(--grund);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);color:var(--text);font-size:var(--grad-1);font-weight:var(--gewicht-halb);transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.chat-sel-bar .sel-act:hover{background:var(--f3)}}
.chat-sel-bar .sel-act:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.chat-sel-bar .sel-act .ic{width:var(--ic-20);height:var(--ic-20)}
.chat-sel-bar .sel-act:disabled{opacity:1;background:var(--f2);border-color:var(--linie-2);color:var(--zweit);cursor:not-allowed;transform:none}
@media(min-width:760px){.chat-sel-bar .sel-act{flex-direction:row;justify-content:center;min-height:var(--hoehe-feld-desktop);font-size:var(--grad-2)}}
@media(min-width:760px) and (pointer:coarse){.chat-sel-bar .sel-act{min-height:var(--hoehe-tipp)}}
.row.selrow{cursor:pointer}
.row.selrow.on{background:var(--akzent-leise);--av-ring:var(--akzent-leise)}
@media(hover:hover){.row.selrow.on:hover{background:var(--akzent-leise);--av-ring:var(--akzent-leise)}}
.selbox{flex:none;display:grid;place-items:center;width:var(--ic-20);height:var(--ic-20);border:var(--rand) solid var(--feldrand);border-radius:var(--r-xxs);background:var(--f1);color:transparent;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.row.selrow:hover .selbox{background:var(--f3);border-color:var(--text)}}
.row.selrow.on .selbox{background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
.selbox svg{width:var(--ic-14);height:var(--ic-14);display:block}

/* Modal (Settings + Profil). */
/* Scheibe 3b-1 (D10 Blatt am Handy, D11 Dialog ab 600 px): die Hülle aller modal() und ebene(). Scrim --scrim; Ebene
   --ebene-dialog 90 über dem Anruf-Bildschirm (80) und der Mini-Pille (83), die eigene Ebene über einem offenen Dialog
   (ebene(): Bestätigung, Eingabe, KI-Zustimmung, Melden) 20 darüber. Am Handy schwebt das Blatt von unten: Fläche --schweb,
   Kante --linie-2, Radius --r-blatt oben, --schatten-blatt, Griff 36 × 4 (Zier, aria-los über ::before), höchstens Fensterhöhe
   minus 56, Safe Area unten (Deckel wie am Composer). Ab 600 px steht der Dialog mittig, höchstens --breite-dialog (440, mit
   der Darstellungsgröße der App wachsend), Radius --r-blatt, --schatten-2; die Familien .modal.wide, .modal.gen und
   .modal-breit behalten ihre Breite (Desktop-Block, Podcast). Der Kopf bleibt beim Rollen stehen; Titel --grad-6 fett,
   Schließen als Icon-Knopf (--hoehe-ik). Polster seitlich und unten bleibt 1rem (.prof-foot rechnet damit). Eintritt:
   Blatt und Dialog steigen um 16 px und blenden ein (--dauer-blatt, --kurve-hinein; reduziert nur Überblenden); der Scrim steht
   sofort, sonst blitzte beim Wechsel von Dialog zu Dialog die App dahinter auf. */
.modal-ov{position:fixed;inset:0;z-index:var(--ebene-dialog);background:var(--scrim);display:grid;place-items:end center}
/* Eigene Ebene ueber einem offenen Modal (ebene()): KI-Zustimmung, Melden. */
.modal-ov.ebene-ov{z-index:calc(var(--ebene-dialog) + 20)}
.ki-melden{display:block;margin-top:.45rem;font-size:.75rem}
.ai-panel .ki-melden{color:inherit;border-top-color:color-mix(in srgb,currentColor 30%,transparent)}
@media(hover:hover){.ai-panel .ki-melden:hover{color:inherit;text-decoration:underline}}
@media(min-width:600px){.modal-ov{place-items:center}}
.modal{position:relative;box-sizing:border-box;width:100%;max-height:calc(100dvh - var(--hoehe-kopf));overflow-y:auto;overscroll-behavior:contain;padding:0 1rem calc(1rem + min(env(safe-area-inset-bottom,0px),2.2rem));background:var(--schweb);border:0 solid var(--linie-2);border-top-width:var(--rand);border-radius:var(--r-blatt) var(--r-blatt) 0 0;box-shadow:var(--schatten-blatt);color:var(--text);animation:ebene-auf var(--dauer-blatt) var(--kurve-hinein)}
.modal:has(.prof-foot){padding-bottom:1rem} /* lokale Brücke (bauplan 2.3): der feste Fuß des Profils (3b-2) trägt die Safe Area selbst */
@media(min-width:600px){
  .modal{max-width:calc(var(--breite-dialog) * var(--scale,1));max-height:88dvh;padding-bottom:1rem;border-width:var(--rand);border-radius:var(--r-blatt);box-shadow:var(--schatten-2)}
}
@keyframes ebene-auf{from{opacity:0;transform:translateY(calc(var(--abstand-8) * var(--bewegung)))}}
.modal-head{position:sticky;top:0;z-index:var(--ebene-klebt);display:flex;align-items:center;gap:var(--abstand-4);margin:0 -1rem var(--abstand-4);padding:calc(var(--abstand-4) + var(--abstand-2) + var(--abstand-5)) var(--abstand-4) var(--abstand-2) 1rem;background:var(--schweb)}
.modal.gen>.modal-head{position:relative} /* das KI-Fenster rollt nicht als Ganzes (1072); rollt scrollIntoView es doch (Chip unten, Fokus im Prompt), laeuft der Kopf mit, statt die Reiter zu verdecken */
.modal-head::before{content:"";position:absolute;top:var(--abstand-4);left:50%;width:var(--hoehe-desktop);height:var(--abstand-2);border-radius:var(--r-strich);background:var(--linie-2);transform:translateX(-50%)}
@media(min-width:600px){.modal-head{padding-top:var(--abstand-8)}.modal-head::before{content:none}}
.modal-head .mt{flex:1;min-width:0;margin:0;font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp);color:var(--text);overflow-wrap:anywhere}
.modal-head .mt:focus{outline:none} /* Startfokus ohne Ring: der Titel ist kein Bedienelement (tabindex -1), Vorleser nennen den Dialog */
.modal-head .x{position:relative;flex:none;display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:transparent;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.modal-head .x .ic{width:var(--ic-knopf);height:var(--ic-knopf);transform:rotate(45deg)}
.modal-head .x:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Bestätigung und Eingabe (bestaetigen(), eingeben(); D12): Satz in Zweittext, Feld wie B7, Knöpfe untereinander (Handy, die
   Hauptaktion zuerst) bzw. rechts in einer Reihe (ab 600 px, Abbrechen links daneben); die Knöpfe selbst (.arch-go,
   .arch-cancel) bekommen ihre D-Form mit 3b-2. */
.ebene-frage .arch-note{white-space:pre-line;overflow-wrap:anywhere}
.ebene-label{font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb);color:var(--text)}
.ebene-feld{box-sizing:border-box;width:100%;min-width:0;min-height:var(--hoehe-feld);padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-knapp)}
.ebene-feld:focus-visible{border-color:var(--akzent-text)}
.ebene-fuss{display:flex;flex-direction:column;align-items:stretch;gap:var(--abstand-4);margin-top:var(--abstand-2)}
.ebene-fuss>button{min-height:var(--hoehe-knopf);white-space:normal}
.ebene-fuss>.arch-go:not(.danger){background:var(--akzent);color:var(--auf-akzent)} /* lokale Brücke (bauplan 2.3): mit Farbschema hält --auf-akzent 4,5:1, das alte --me-ink nicht immer; die Knopfform kommt mit 3b-2 */
.ebene-fuss>.arch-go.danger{background:var(--rot);color:var(--auf-rot)}
@media(min-width:600px){.ebene-fuss{flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start}.ebene-fuss>button{flex:0 1 auto}}
@media(hover:hover){.modal-head .x:hover{background:var(--f3)}}
/* AI-Bild-Generator (Foto-Button → Lightbox) */
/* Scheibe 5a-2: die Regeln, die nur noch das Profilbild-Studio ohne .modal.gen nutzte (.ig-field, .igl, .ig-prompt, .ig-provs, .ig-chip, .ig-preview-note, .ig-go, .ig-status, .ig-bal, .ig-note, .av-*), sind weg; das Studio hat eigene unter .ig.av-studio (bauplan 3.11). */
/* Diktier-Button oben rechts im Prompt-Feld (Aufnahme = rot). */
.ig-mic{position:absolute;top:0;right:0;width:2rem;height:2rem;display:grid;place-items:center;background:var(--f2);border:1px solid var(--linie-2);border-radius:.5rem;color:var(--text);cursor:pointer}
@media(hover:hover){.ig-mic:hover{border-color:var(--akzent)}}
.ig-mic.rec{background:var(--rot);color:var(--auf-rot);border-color:var(--rot);box-shadow:none}
.ig-mic .ic{width:1.05rem;height:1.05rem;display:block}
.ig-mic:disabled{opacity:.6}
.ig-mic-preis{position:absolute;top:.35rem;right:2.5rem;font-size:.7rem;font-weight:600;color:var(--rot);background:var(--f1);border:1px solid var(--linie-2);border-radius:.4rem;padding:.05rem .35rem;white-space:nowrap;pointer-events:none}
.ig-mic-preis:empty{display:none}
.ig-dock .ig-mic-preis{top:.75rem;right:2.9rem}
.ig-ratios,.ig-counts{display:flex;flex-wrap:wrap;gap:.4rem}
.ig-chip-cr{opacity:.55;font-size:.78rem;margin-left:.28rem}
.ig-cat{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--zweit);margin:.6rem 0 .32rem;font-weight:600}
.ig-cat:first-child{margin-top:0}
.ig-model-desc{font-size:.78rem;color:var(--zweit);margin:.5rem 0 0;line-height:1.35;min-height:1.05rem}
.ig-dice{margin-top:.4rem;background:var(--f2);border:1px solid var(--linie-2);color:var(--text);border-radius:.6rem;padding:.4rem .7rem;font-size:.8rem;cursor:pointer}
@media(hover:hover){.ig-dice:hover{border-color:var(--akzent)}}
.ig-mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:.15rem}
.ig-mcard{border:1px solid var(--linie-2);border-radius:.7rem;overflow:hidden;background:var(--f2);cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;display:flex;flex-direction:column}
.ig-mcard.on{border-color:var(--akzent);box-shadow:inset 0 0 0 2px var(--akzent)}
.ig-mcard-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--linie-2)}
.ig-mcard.mcard-vid .ig-mcard-img{aspect-ratio:16/9}
.ig-mcard-body{padding:.4rem .55rem .5rem;display:flex;flex-direction:column;gap:.05rem}
.ig-mcard-lbl{font-size:.82rem;font-weight:600;line-height:1.2}
.ig-mcard-cr{font-size:.72rem;color:var(--zweit)}
.md-p{margin:.2rem 0}
.md-ul{margin:.2rem 0;padding-left:1.1rem}
.md-ul li{margin:.12rem 0}
.md-p code,.md-ul code{background:var(--f2);border:1px solid var(--linie-2);border-radius:.3rem;padding:0 .25rem;font-size:.9em}
.msg-link{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.bubble.mine .msg-link{text-decoration-color:color-mix(in srgb,var(--text) 55%,transparent)}
.tts-play{display:inline-flex;align-items:center;gap:.18rem;background:none;border:0;color:inherit;opacity:.72;cursor:pointer;font:inherit;font-size:.68rem;padding:0;margin-right:.4rem;line-height:1;flex:0 0 auto}
.tts-play:hover{opacity:1}
.tts-ic{font-size:.6rem;display:inline-flex;align-items:center}
.tts-ic .ic{width:.82rem;height:.82rem;display:block}
.tts-cost{font-size:.6rem;opacity:.85}
.ig-chip.has-thumb{padding-left:.3rem}
.ig-chip-thumb{width:2.5rem;height:2.5rem;border-radius:.4rem;object-fit:cover;background:var(--linie-2);flex:0 0 auto}
.igl-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.ig-paste{background:var(--f2);border:1px solid var(--linie-2);color:var(--text);border-radius:.5rem;padding:.2rem .55rem;font-size:.72rem;cursor:pointer;flex:0 0 auto}
.ig-hist{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:.45rem}
.ig-hist-lbl{font-size:.7rem;color:var(--zweit)}
.ig-hist-pill{background:var(--f2);border:1px solid var(--linie-2);color:var(--zweit);border-radius:.5rem;padding:.22rem .5rem;font-size:.75rem;cursor:pointer;max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(hover:hover){.ig-hist-pill:hover{color:var(--text);border-color:var(--akzent)}}
.ig-models{max-height:min(24rem,48vh);overflow-y:auto;margin:-.1rem -.2rem 0;padding:.1rem .2rem 0}
.ig-models .ig-provs{margin-bottom:.15rem}
.ig-ratio-ic{display:inline-block;border:1.5px solid currentColor;border-radius:2px;opacity:.7;flex:0 0 auto}
.ig-bar{height:3px;border-radius:999px;background:var(--linie-2);overflow:hidden;margin:.45rem auto 0;max-width:15rem}
.ig-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--marke);transition:width .6s linear}
.ig-eta{font-size:.72rem;color:var(--zweit);text-align:center;margin-top:.25rem;font-variant-numeric:tabular-nums}
.ig-chip-eta,.ig-mcard-eta{font-size:.68rem;color:var(--zweit);font-variant-numeric:tabular-nums}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.3rem}
.ig-card{position:relative;border-radius:.6rem;overflow:hidden;background:var(--f2);border:1px solid var(--linie-2)}
.ig-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;background:var(--f2)}
.ig-acts{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.3rem;padding:.35rem}
/* Fuenf Zeichen passen am Handy nicht in eine halbe Breite: umbrechen statt links abschneiden. */
.ig-acts-icons{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
.ig-acts button{background:var(--pille);color:var(--buehne-weiss);border:0;border-radius:.45rem;padding:.35rem;font-size:.85rem;cursor:pointer;backdrop-filter:blur(3px)}
.ig-acts button.send{width:100%;background:var(--marke);color:var(--auf-marke);font-weight:800;box-shadow:none;backdrop-filter:none;padding:.5rem}
.ig-acts button.del,.ig-acts button.cpy,.ig-acts button.dl{flex:0 0 auto;width:2.1rem}
.ig-acts .ic{width:1.15rem;height:1.15rem;display:block}
.ig-acts button:disabled{opacity:.5;cursor:default}
.ig-sendopt{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text);margin:.8rem 0 .3rem}
.ig-sub{font-size:.78rem;color:var(--zweit);margin:1.1rem 0 .1rem;border-top:1px solid var(--linie-2);padding-top:.9rem}
.ig-empty{font-size:.83rem;color:var(--zweit);text-align:center;padding:.8rem 0}
.ig-badge{position:absolute;top:.3rem;left:.3rem;background:var(--pille);color:var(--buehne-weiss);font-size:.62rem;font-weight:600;padding:.12rem .42rem;border-radius:.4rem;backdrop-filter:blur(3px);letter-spacing:.02em;pointer-events:none}
/* Prompt-Zeile unter dem Bild/Video (2 Zeilen, Klick übernimmt den Prompt). */
.ig-cap{padding:.4rem .55rem;font-size:.72rem;color:var(--zweit);line-height:1.3;cursor:pointer;border-top:1px solid var(--linie-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(hover:hover){.ig-cap:hover{color:var(--text)}}
.ig-skel{aspect-ratio:1/1;background:linear-gradient(100deg,var(--f2) 30%,var(--linie-2) 50%,var(--f2) 70%);background-size:200% 100%;animation:hv-shimmer 1.2s linear infinite}
@keyframes hv-shimmer{to{background-position:-200% 0}}
/* Video-Generator */
.ig-grid.vid{grid-template-columns:1fr}
@media(min-width:520px){.ig-grid.vid{grid-template-columns:1fr 1fr}}
.ig-grid.vid .ig-card{border:1px solid var(--linie-2);background:var(--f2)}
.ig-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--buehne)}
.ig-grid.vid .ig-acts{position:static;background:none;padding:.35rem;gap:.35rem}
.ig-vpend,.ig-vfail{aspect-ratio:16/9;display:grid;place-items:center;background:var(--f2)}
.ig-vpend-in{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--zweit);font-size:.8rem;text-align:center;padding:.5rem}
.ig-vfail{color:var(--zweit);font-size:.8rem;text-align:center;padding:.5rem;position:relative;grid-template-rows:1fr auto;gap:.3rem}
.ig-vfail .ig-cap{border-top:0;padding:0 1.8rem 0 0;text-align:left;justify-self:stretch}
.ig-vfail-del{position:absolute;right:.35rem;bottom:.35rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;border:0;border-radius:.45rem;background:var(--f1);color:var(--text);cursor:pointer}
/* Scheibe 6a (bauplan 3.13): das KI-Fenster in D. Zweiter Regelsatz unter .modal.gen (Ausnahme zu 2.3): die Regeln oben bleiben
   für das Profilbild-Studio (openAvatarStudio, ohne .gen) bis 5a. Bausteine E17 Prompt-Feld, E18 Modellliste, E19 Beispiel,
   E20 Vergleich, E21 Wahlzeile, E22 Hauptaktion, E23 Bildkarte, E24 Galerie, E25 Video, D18 Leer, D19 Laden, B3, B15, C19.
   Zeilen und Knöpfe 44 am Handy und mit grobem Zeiger, am Desktop mit Maus dicht (32, Chips 28). Hover nur bei Maus (4.6). */
.modal.gen,.ig-ebene{--ig-zeile:var(--zeile-tipp);--ig-chip:var(--hoehe-dicht);--ig-chip-min:var(--hoehe-tipp);--ig-ik:var(--hoehe-tipp)}
@media(min-width:760px) and (pointer:fine){.modal.gen,.ig-ebene{--ig-zeile:var(--zeile-dicht);--ig-chip:var(--hoehe-klein);--ig-chip-min:var(--hoehe-desktop);--ig-ik:var(--hoehe-dicht)}}
/* Überschriften im Fenster (Modell, Deine Bilder): Kapitälchen in Zweittext wie D .ueber */
.modal.gen .ig-mkopf .igl,.modal.gen .ig-wahl>.igl,.modal.gen .ig-sub{display:block;margin:0;padding:0;border:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.modal.gen .ig-field{margin:0}
/* E17 Prompt-Feld: Rahmen Fläche wie die Leiste, Rand --feldrand, Radius --r-m; Fokus als Ring am Feld (focus-within) */
.modal.gen .ig-pf{position:relative;display:flex;flex-direction:column;border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);transition:border-color var(--dauer) var(--kurve)}
.modal.gen .ig-pf:focus-within{border-color:var(--akzent-text)}
/* Das Feld wächst mit dem Text von zwei auf fünf Zeilen (field-sizing; ohne es setzt genFeldWaechst die Höhe beim Eingeben).
   Zeilenhöhe und Grenzen in em: am Handy steht jedes Feld auf 16 px (gegen den Fokus-Zoom, spa „input,textarea,select“), auch
   bei großer Schrift; so passen Zeilenabstand und Höhe zur Schrift. */
.modal.gen .ig-pf .ig-prompt{display:block;box-sizing:border-box;width:100%;min-height:calc(2em * var(--zh-text) + var(--abstand-5) + var(--abstand-4));max-height:calc(5em * var(--zh-text) + var(--abstand-5) + var(--abstand-4));margin:0;padding:var(--abstand-5) calc(var(--hoehe-dicht) + var(--abstand-6)) var(--abstand-4) var(--abstand-7);border:0;border-radius:var(--r-m);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-text);resize:none;field-sizing:content}
.modal.gen .ig-pf:has(.ig-dice) .ig-prompt{padding-right:calc(2 * var(--hoehe-dicht) + var(--abstand-6) + var(--abstand-3) + var(--abstand-7))}
.modal.gen .ig-pf .ig-prompt:focus-visible{outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:calc(-1 * var(--fokus-breite))} /* Ring am Textfeld selbst (sichtbar auch, wenn das Feld schon den Fokus hat), der Rahmen zeigt Akzent-Text */
.modal.gen .ig-pf .ig-prompt::placeholder{color:var(--zweit);opacity:1}
/* Diktieren und Zufall: Werkzeugknöpfe 32 oben rechts im Feld, Trefferfläche 44; Diktat läuft = Rot (aria-pressed), Zähler daneben */
.modal.gen .ig-mic,.modal.gen .ig-dice{position:absolute;top:var(--abstand-3);right:var(--abstand-3);display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:transparent;color:var(--zweit);box-shadow:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.modal.gen .ig-dice{right:calc(var(--hoehe-dicht) + var(--abstand-6) + var(--abstand-3))}
.modal.gen .ig-mic::after,.modal.gen .ig-dice::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.modal.gen .ig-mic .ic,.modal.gen .ig-dice .ic{width:var(--ic-18);height:var(--ic-18);display:block}
@media(hover:hover){.modal.gen .ig-mic:hover,.modal.gen .ig-dice:hover{background:var(--f3);color:var(--text);border-color:transparent}}
.modal.gen .ig-mic:active,.modal.gen .ig-dice:active{background:var(--linie-2);color:var(--text)}
.modal.gen .ig-mic.rec{background:var(--rot);border-color:var(--rot);color:var(--auf-rot);box-shadow:none}
.modal.gen .ig-mic:disabled{opacity:1;color:var(--zweit);cursor:default}
.modal.gen .ig-mic-preis{position:absolute;top:calc(var(--abstand-3) + (var(--hoehe-dicht) - var(--hoehe-mini)) / 2);right:calc(var(--hoehe-dicht) + var(--abstand-4));display:inline-flex;align-items:center;min-height:var(--hoehe-mini);padding:0 var(--abstand-3);border:var(--rand) solid var(--rot);border-radius:var(--r-xs);background:var(--f1);color:var(--rot);font-family:var(--mono);font-size:var(--grad-1);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.modal.gen .ig-pf:has(.ig-dice) .ig-mic-preis{right:calc(2 * var(--hoehe-dicht) + var(--abstand-6) + var(--abstand-5))}
.modal.gen .ig-mic-preis:empty{display:none}
/* Prompt-Verlauf: eine wischbare Zeile im Feld unter dem Text, „Verlauf löschen“ am Ende (Hilfe #daten-loeschen) */
.modal.gen .ig-hist{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--abstand-3);contain:inline-size;margin:0;padding:max(var(--abstand-3), calc((var(--treffer-min) - var(--ig-chip)) / 2)) var(--abstand-4);overflow-x:auto;scrollbar-width:none;border-top:var(--rand) solid var(--linie)}
.modal.gen .ig-hist::-webkit-scrollbar{display:none}
.modal.gen .ig-hist[hidden]{display:none}
.modal.gen .ig-hist-lbl{flex:none;font-size:var(--grad-1);font-weight:var(--gewicht-halb);color:var(--zweit)}
.modal.gen .ig-hist-pill{position:relative;flex:none;display:inline-flex;align-items:center;max-width:none;min-height:var(--ig-chip);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--zweit);font:inherit;font-size:var(--grad-1);line-height:var(--zh-knapp);white-space:nowrap;overflow:visible;cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.modal.gen .ig-hist-pill::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--treffer-min));transform:translateY(-50%)}
@media(hover:hover){.modal.gen .ig-hist-pill:hover{background:var(--f3);color:var(--text);border-color:var(--feldrand)}}
.modal.gen .ig-hist-pill:active{background:var(--linie-2);color:var(--text)}
.modal.gen .ig-hist-weg{color:var(--rot);border-color:var(--linie-2)}
@media(hover:hover){.modal.gen .ig-hist-weg:hover{background:var(--rot-leise);color:var(--rot);border-color:var(--rot)}}
/* E21 Chips (B15): 32 (Desktop 28), Rand --feldrand, gewählt Akzent-Hauch mit Rand und Schrift in Akzent-Text; Zahlen in Mono */
.modal.gen .ig-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);min-height:var(--ig-chip);min-width:var(--ig-chip-min);margin:0;padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-mittel);line-height:var(--zh-knapp);white-space:nowrap;box-shadow:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.modal.gen .ig-chip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.modal.gen .ig-ratios .ig-chip,.modal.gen .ig-counts .ig-chip,.modal.gen .ig-wahl .ig-chip{font-family:var(--mono);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp)}
@media(hover:hover){.modal.gen .ig-chip:hover{background:var(--f3)}}
.modal.gen .ig-chip:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.modal.gen .ig-chip.on{background:var(--akzent-leise);border-color:var(--akzent-text);color:var(--akzent-text);font-weight:var(--gewicht-fett);box-shadow:none}
.modal.gen .ig-chip:disabled{background:var(--f2);border-color:var(--linie-2);color:var(--zweit);opacity:1;cursor:not-allowed}
.modal.gen .ig-chip-cr{margin:0;opacity:1;font-family:var(--mono);font-size:var(--grad-2);font-weight:var(--gewicht-halb);color:var(--zweit)}
.modal.gen .ig-chip.on .ig-chip-cr{color:inherit}
.modal.gen .ig-ratio-ic{display:inline-block;flex:none;box-sizing:border-box;border:var(--rand-stark) solid currentColor;border-radius:var(--r-strich);opacity:1;transform:scale(.8)}
.modal.gen .ig-ratios,.modal.gen .ig-counts,.modal.gen .ig-provs{display:flex;gap:var(--abstand-3)}
/* Wahlzeile (Video: Auflösung, Länge): Beschriftung links, Chips rechts, Lücken so, dass die Trefferflächen frei bleiben */
.modal.gen .ig-wahl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4) var(--abstand-6);min-height:var(--ig-zeile)}
.modal.gen .ig-wahl[hidden]{display:none} /* „Auto“ und Modelle ohne Auflösung bzw. Länge: das Feld bleibt weg (renderRes, renderSeconds) */
.modal.gen .ig-wahl>.igl{flex:none;min-width:calc(4 * var(--abstand-8))}
.modal.gen .ig-wahl>.ig-provs{flex:1 1 12rem;flex-wrap:wrap;gap:var(--abstand-6) var(--abstand-4);min-width:0}
/* Video: Auflösung und Länge stehen in der wischbaren Zeile der Leiste neben dem Format (preiswirksam, ohne Rollen sichtbar) */
.modal.gen .ig-dock-chips>.ig-wahl{flex-wrap:nowrap;min-height:0;gap:var(--abstand-4)}
.modal.gen .ig-dock-chips>.ig-wahl>.igl{min-width:0}
.modal.gen .ig-dock-chips>.ig-wahl>.ig-provs{flex:none;flex-wrap:nowrap;gap:var(--abstand-3)}
.modal.gen .ig-einst>.ig-note{margin:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
/* E18 Modellliste: Kopf mit „Beispiele vergleichen“, Kasten Fläche 1 mit Rand, am Handy ein Fenster von fünf Zeilen, das oben und
   unten weich ausläuft (Maske innen, der Rahmen bleibt ganz), am Desktop die ganze Liste */
.modal.gen .ig-mkopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-2) var(--abstand-4);min-height:var(--hoehe-dicht);margin-bottom:var(--abstand-4);container-type:inline-size}
@container (max-width:330px){.modal.gen .ig-vgl-knopf>span{display:none}.modal.gen .ig-vgl-knopf{padding:0 var(--abstand-4)}} /* schmal (320 px, große Schrift): nur das Zeichen, der Kopf bleibt eine Zeile */
.modal.gen .ig-vgl-knopf{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--ig-chip);padding:0 var(--abstand-5);border:var(--rand) solid var(--akzent-text);border-radius:var(--r-s);background:var(--akzent-hauch);color:var(--akzent-text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);white-space:nowrap;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.modal.gen .ig-vgl-knopf::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.modal.gen .ig-vgl-knopf .ic{width:var(--ic-16);height:var(--ic-16)}
@media(hover:hover){.modal.gen .ig-vgl-knopf:hover{background:var(--akzent-leise)}}
.modal.gen .ig-vgl-knopf:active{background:var(--akzent-leise);transform:scale(calc(1 - .03 * var(--bewegung)))}
.modal.gen .ig-zuletzt{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--abstand-3);contain:inline-size;margin:0 -1rem var(--abstand-4);padding:var(--abstand-2) 1rem;overflow-x:auto;scrollbar-width:none}
.modal.gen .ig-zuletzt::-webkit-scrollbar{display:none}
.modal.gen .ig-zuletzt-l{flex:none;font-size:var(--grad-1);color:var(--zweit)}
.modal.gen .ig-zchip{position:relative;flex:none;display:inline-flex;align-items:center;min-height:var(--hoehe-klein);padding:0 var(--abstand-4);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-mittel);white-space:nowrap;cursor:pointer}
.modal.gen .ig-zchip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.modal.gen .ig-zchip:hover{background:var(--f3)}}
.modal.gen .ig-zchip:active{background:var(--linie-2)}
.modal.gen .ig-mbox{border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);overflow:hidden}
.modal.gen .ig-mgrid{display:block;max-height:calc(5 * var(--ig-zeile) + 4 * var(--rand) + 2 * var(--abstand-6));max-height:min(calc(5 * var(--ig-zeile) + 4 * var(--rand) + 2 * var(--abstand-6)),calc(100cqh - 2 * var(--treffer-min)));margin:0;padding-block:var(--abstand-6);scroll-padding-block:var(--abstand-6);overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(transparent,currentColor var(--abstand-6),currentColor calc(100% - var(--abstand-6)),transparent);mask-image:linear-gradient(transparent,currentColor var(--abstand-6),currentColor calc(100% - var(--abstand-6)),transparent)}
.modal.gen .ig-mzeile{position:relative;display:flex;align-items:center;gap:var(--abstand-3);min-height:var(--ig-zeile);padding:0 var(--abstand-6) 0 var(--abstand-4);border-bottom:var(--rand) solid var(--linie);color:var(--text);transition:background-color var(--dauer) var(--kurve)}
.modal.gen .ig-mzeile:last-child{border-bottom:0}
@media(hover:hover){.modal.gen .ig-mzeile:hover{background:var(--f3)}}
.modal.gen .ig-mzeile:active{background:var(--linie-2)}
.modal.gen .ig-mzeile:has(>.ig-mwahl.on){background:var(--akzent-leise);outline:var(--rand) solid var(--akzent-text);outline-offset:calc(-1 * var(--rand));color:var(--akzent-text)}
/* 07.11. nachts (Henny, Bildschirmfoto): der Rahmen der gewählten Zeile folgt den runden Ecken der Liste, statt an ihnen abgeschnitten zu wirken */
.modal.gen .ig-mzeile:has(>.ig-mwahl.on),.modal.gen .ig-mwahl:focus-visible{border-radius:calc(var(--r-m) - var(--rand))}
/* Miniatur als Knopf „Beispiel ansehen“ (kein Tab-Stopp): 44 Fläche, Bild 32, Lupe auf Glas unten rechts */
.modal.gen .ig-mbsp{position:relative;isolation:isolate;flex:none;display:grid;place-items:center;width:var(--ig-zeile);height:var(--ig-zeile);margin:0;padding:0;border:0;border-radius:var(--r-s);background:transparent;cursor:zoom-in}
.modal.gen .ig-mbsp img,.modal.gen .ig-mbsp video{display:block;width:calc(var(--ig-zeile) - var(--abstand-6));height:calc(var(--ig-zeile) - var(--abstand-6));border-radius:var(--r-xs);object-fit:cover;background:var(--f2);box-shadow:0 0 0 var(--rand) var(--linie-2);pointer-events:none;transition:box-shadow var(--dauer) var(--kurve)}
/* Lupe auf eigener Ebene: Safari legt ein Video sonst über Geschwister mit z-index (gemessen an Pixverse V6, iOS 26.5) */
.modal.gen .ig-lupe{position:absolute;z-index:2;right:var(--abstand-1);bottom:var(--abstand-1);display:grid;place-items:center;width:var(--ic-20);height:var(--ic-20);border-radius:var(--r-xxs);background:var(--pille);color:var(--buehne-weiss);pointer-events:none;transform:translateZ(0)}
.modal.gen .ig-lupe .ic{width:var(--ic-12);height:var(--ic-12)}
@media(hover:hover){.modal.gen .ig-mbsp:hover img,.modal.gen .ig-mbsp:hover video{box-shadow:0 0 0 var(--rand-stark) var(--akzent-text)}}
.modal.gen .ig-mbsp:active{background:var(--linie-2)}
.modal.gen .ig-mauto{flex:none;display:grid;place-items:center;width:var(--ig-zeile);height:var(--ig-zeile);color:var(--marke)}
.modal.gen .ig-mauto .ic{width:var(--ic-20);height:var(--ic-20)}
/* Wahl (Radio): Name, „ab 18“, Dauer und Preis in Mono; nimmt den Rest der Zeile */
.modal.gen .ig-mwahl{flex:1;min-width:0;align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--abstand-4);min-height:var(--ig-zeile);margin:0;padding:var(--abstand-1) 0;border:0;border-radius:var(--r-xs);background:transparent;color:inherit;font:inherit;font-size:var(--grad-4);text-align:left;cursor:pointer}
.modal.gen .ig-mwahl:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
/* Der Name wird nie gekürzt: reicht die Zeile nicht, rutschen „ab 18“, Dauer und Preis unter den Namen (der Haken bleibt sichtbar) */
.modal.gen .ig-mn{flex:1 0 auto;max-width:100%;min-width:0;display:block;font-weight:var(--gewicht-mittel);white-space:normal;overflow-wrap:anywhere}
.modal.gen .ig-mn .ic{display:none;width:var(--ic-18);height:var(--ic-18);margin-left:var(--abstand-3);vertical-align:calc(-1 * var(--abstand-2));color:var(--akzent-text)}
.modal.gen .ig-mwahl.on .ig-mn{font-weight:var(--gewicht-halb);color:var(--akzent-text)}
.modal.gen .ig-mwahl.on .ig-mn .ic{display:inline-block}
/* „Auto“ nennt das Modell, das es für dieses Konto nimmt (ohne „ab 18“ keins von Google) */
.modal.gen .ig-mziel{display:block;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel);color:var(--zweit)}
.modal.gen .ig-mwahl.on .ig-mziel{color:var(--akzent-text)}
.modal.gen .ig-mmeta{flex:none;display:inline-flex;align-items:center;gap:var(--abstand-4);margin-left:auto}
.modal.gen .ig-ab18{flex:none;display:inline-flex;align-items:center;min-height:1.5em;padding:0 .5em;border:var(--rand) solid var(--feldrand);border-radius:var(--r-xs);background:transparent;color:var(--zweit);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);letter-spacing:var(--lauf-plakette);white-space:nowrap}
.modal.gen .ig-mdauer{flex:none;font-size:var(--grad-1);color:var(--zweit);font-variant-numeric:tabular-nums;white-space:nowrap}
.modal.gen .ig-mpreis{flex:none;min-width:2em;font-family:var(--mono);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp);text-align:right;color:var(--text)}
.modal.gen .ig-mwahl.on .ig-mpreis{font-weight:var(--gewicht-fett);color:var(--akzent-text)}
.modal.gen .ig-mfuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-2) var(--abstand-4);margin-top:var(--abstand-4);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.modal.gen .ig-mfuss b{font-family:var(--mono);font-weight:var(--gewicht-halb);color:var(--text);font-variant-numeric:tabular-nums}
.modal.gen .ig-mbsp-k{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-klein);padding:0 var(--abstand-3);border:0;border-radius:var(--r-xs);background:transparent;color:var(--akzent-text);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);cursor:pointer}
.modal.gen .ig-mbsp-k::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.modal.gen .ig-mbsp-k .ic{width:var(--ic-14);height:var(--ic-14)}
.modal.gen .ig-mbsp-k[hidden]{display:none}
@media(hover:hover){.modal.gen .ig-mbsp-k:hover{background:var(--f3)}}
.modal.gen .ig-model-desc{margin:var(--abstand-3) 0 0;min-height:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.modal.gen .ig-model-desc[hidden]{display:none}
/* E22 Hauptaktion (B3): primär in Akzent, 48 am Handy, 36 am Desktop; Teile mit Trennpunkt, Preis in Mono. Läuft: neutral mit
   Ring, der Text bleibt (Preis = gesendete Grenze). Darunter das Guthaben (in Warnfarbe, wenn es nicht reicht) */
.modal.gen .ig-go{position:relative;display:block;width:100%;min-height:var(--hoehe-gross);margin:0;padding:var(--abstand-3) var(--abstand-8);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;box-shadow:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.modal.gen .ig-go:not([aria-disabled="true"]):hover{background:var(--akzent-hover)}}
.modal.gen .ig-go:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .02 * var(--bewegung)))}
/* Läuft (aria-disabled, der Fokus bleibt am Knopf): neutral ohne eigenen Ring; der Ring steht nur im Platzhalter (D19) */
.modal.gen .ig-go:disabled,.modal.gen .ig-go[aria-disabled="true"]{background:var(--f2);border-color:var(--linie-2);color:var(--zweit);opacity:1;cursor:progress;transform:none}
/* Teile: der Trennpunkt steht vor seinem Teil und bricht mit ihm um (nie am Zeilenende); sehr schmal darf ein Teil umbrechen */
.modal.gen .ig-teil{white-space:nowrap}
@media(max-width:359px){.modal.gen .ig-teil{white-space:normal}}
.modal.gen .ig-preis{font-family:var(--mono);font-weight:var(--gewicht-fett);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp)}
.modal.gen .ig-trenn{font-family:var(--schrift);font-weight:var(--gewicht-halb)}
.modal.gen .ig-dock .ig-note,.modal.gen .ig-dock .ig-bal{margin:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel);color:var(--zweit);text-align:center}
.modal.gen .ig-dock .ig-bal b{font-family:var(--mono);font-weight:var(--gewicht-fett);color:var(--text);font-variant-numeric:tabular-nums}
.modal.gen .ig-dock .ig-bal.knapp,.modal.gen .ig-dock .ig-bal.knapp b{color:var(--gelb)}
.modal.gen .ig-status[hidden]{display:none}
.modal.gen .ig-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--abstand-2) var(--abstand-4);padding:0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit);text-align:center}
.modal.gen .ig-status .ig-bar{flex:1 1 100%;max-width:none;height:var(--abstand-2);margin:var(--abstand-1) 0 0;border-radius:var(--r-strich);background:var(--linie-2)}
.modal.gen .ig-bar i{background:var(--akzent-text);border-radius:var(--r-strich)}
.modal.gen .ig-status .spin{display:none} /* ein Ring je Platzhalter genügt (D19); die Statuszeile zeigt Satz und Balken */
.modal.gen .ig-eta{margin:0;font-family:inherit;font-size:var(--grad-1);font-variant-numeric:tabular-nums;color:var(--zweit)} /* „noch etwa 37 s“ als Satz, Ziffern gleich breit */
.modal.gen .spin{border-color:var(--linie-2);border-top-color:var(--akzent-text);animation-duration:var(--dauer-kreis)}
/* Galerie (E24) mit Bildkarten (E23): Kopf „Deine Bilder“ und „Prompt mitschicken“, am Handy eine Spalte, breiter mehrere */
.modal.gen .ig-werk-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-2) var(--abstand-6);min-height:var(--hoehe-dicht)}
.modal.gen .ig-sendopt{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-4);margin:0;min-height:var(--treffer-min);font-size:var(--grad-2);color:var(--text);cursor:pointer}
.modal.gen .ig-sendopt[hidden]{display:none}
.modal.gen .ig-sendopt input{width:var(--ic-18);height:var(--ic-18);margin:0;accent-color:var(--akzent);color-scheme:dark} /* das Kästchen des Systems im Thema (sonst rein weiß im dunklen Blatt) */
html.light .modal.gen .ig-sendopt input{color-scheme:light}
.modal.gen .ig-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--abstand-6);margin:0;align-items:stretch}
@media(min-width:520px){.modal.gen .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:760px){.modal.gen .ig-grid{grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}.modal.gen .ig-grid.vid{grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr))}}
.modal.gen .ig-card{position:relative;display:flex;flex-direction:column;min-width:0;aspect-ratio:auto;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);overflow:hidden;color:var(--text);text-align:left}
.modal.gen .ig-bild{position:relative;display:block;width:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:0;background:var(--f2);overflow:hidden;cursor:zoom-in}
.modal.gen .ig-bild.video{aspect-ratio:16/9;cursor:auto;background:var(--buehne)}
.modal.gen .ig-bild img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;cursor:inherit;background:transparent}
.modal.gen .ig-bild .ig-video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:var(--buehne)}
/* Fokus auf dem Bild: weißer Ring mit dunklem Saum innen über dem Bild (wie Glas-Knöpfe, ring-saum), sonst verschwindet der Ring
   in Akzent-Text auf bräunlichen Bildern (gemessen 1,1:1); die Kontur bleibt durchsichtig für den Kontrastmodus */
.modal.gen .ig-bild:focus-visible{outline-color:transparent;outline-offset:calc(-1 * var(--fokus-breite))}
.modal.gen .ig-bild:focus-visible::after{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 var(--fokus-breite) var(--buehne-weiss),var(--ring-saum-innen);pointer-events:none}
/* Schild „Mit KI erstellt · Modell“ (gemeinsam .schild): Kapsel auf Glas oben links */
.modal.gen .ig-badge,.ig-schild,.st-abbild .ig-badge{position:absolute;z-index:1;left:var(--abstand-4);top:var(--abstand-4);display:inline-flex;align-items:center;gap:var(--abstand-3);max-width:calc(100% - 2 * var(--abstand-4));min-height:var(--hoehe-mini);padding:0 var(--abstand-5);border-radius:var(--r-voll);background:var(--pille);color:var(--buehne-weiss);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);letter-spacing:var(--lauf-plakette);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(var(--blur-glas));-webkit-backdrop-filter:blur(var(--blur-glas));pointer-events:none}
.ig-schild .ic{flex:none;width:var(--ic-12);height:var(--ic-12);color:var(--marke)}
.modal.gen .ig-cap{padding:var(--abstand-4) var(--abstand-6) 0;border:0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit);cursor:pointer;-webkit-line-clamp:2}
@media(hover:hover){.modal.gen .ig-cap:hover{color:var(--text)}}
/* Aktionen UNTER dem Bild: „In Chat senden“ als Knopf mit Wort (32), die übrigen als Zeichen (32, Löschen in Rot) */
.modal.gen .ig-acts{position:static;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:auto;gap:var(--abstand-3) var(--abstand-4);min-height:calc(var(--hoehe-dicht) + 2 * var(--abstand-3));padding:var(--abstand-3) var(--abstand-4);background:none}
.modal.gen .ig-acts-icons{flex:1 1 100%;display:flex;justify-content:space-between;gap:var(--abstand-2);margin:0}
.modal.gen .ig-acts button{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--ig-ik);height:var(--ig-ik);margin:0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:transparent;color:var(--zweit);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.modal.gen .ig-acts button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.modal.gen .ig-acts .ic{width:var(--ic-18);height:var(--ic-18);display:block}
@media(hover:hover){.modal.gen .ig-acts button:hover{background:var(--f3);color:var(--text)}.modal.gen .ig-acts button.del:hover,.modal.gen .ig-acts .ig-vfail-del:hover{background:var(--rot-leise);color:var(--rot)}}
.modal.gen .ig-acts button:active{background:var(--linie-2);color:var(--text);transform:scale(calc(1 - .03 * var(--bewegung)))}
.modal.gen .ig-acts button.del,.modal.gen .ig-acts .ig-vfail-del{color:var(--rot)}
.modal.gen .ig-acts button:disabled{opacity:.6;cursor:default;transform:none}
.modal.gen .ig-acts button.send{display:inline-flex;flex:1 1 100%;gap:var(--abstand-3);width:auto;height:auto;min-height:var(--hoehe-knopf);padding:0 var(--abstand-5);border-color:var(--feldrand);color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);white-space:nowrap}
.modal.gen .ig-acts-leer{min-height:calc(var(--hoehe-dicht) + 2 * var(--abstand-3))}
/* Warten (D19): gestrichelte Fläche mit Wabenraster, Ring und Satz; Fehler (E25): Rand und Satz in Rot */
.modal.gen .ig-skel,.modal.gen .ig-vpend{aspect-ratio:auto;display:flex;place-items:normal;border-style:dashed;background:var(--f1);animation:none}
.modal.gen .ig-warte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--abstand-4);padding:var(--abstand-6);background:var(--f1);color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);text-align:center;cursor:default}
.modal.gen .ig-warte::before{content:"";position:absolute;inset:0;background:var(--linie);opacity:.7;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0 28 8V24L14 32 0 24V8Z M14 32 28 40V56 M14 32 0 40V56' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/28px 48px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0 28 8V24L14 32 0 24V8Z M14 32 28 40V56 M14 32 0 40V56' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0/28px 48px repeat}
.modal.gen .ig-warte>*{position:relative}
.modal.gen .ig-bild.video.ig-warte,.modal.gen .ig-bild.video.ig-fehler{background:var(--f1)} /* Warten und Fehler auf Fläche 1, nicht auf der dunklen Bühne des Videos */
.modal.gen .ig-warte .spin{width:var(--ic-24);height:var(--ic-24)}
.modal.gen .ig-vpend-in{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-4);width:100%;max-width:18rem;padding:0;color:var(--zweit);font-size:var(--grad-2)}
.modal.gen .ig-vpend-t,.modal.gen .ig-warte-t{font-weight:var(--gewicht-halb);color:var(--text)}
.modal.gen .ig-vpend-in .ig-bar{width:100%;max-width:none;height:var(--abstand-2);margin:0;border-radius:var(--r-strich);background:var(--linie-2)}
.modal.gen .ig-vfail{aspect-ratio:auto;display:flex;place-items:normal;gap:0;padding:0;font-size:var(--grad-2);border-color:var(--rot);text-align:left;color:var(--text)}
.modal.gen .ig-fehler{display:grid;place-content:center;justify-items:center;gap:var(--abstand-3);padding:var(--abstand-6);background:var(--f1);text-align:center;cursor:default}
.modal.gen .ig-vfail-t{font-size:var(--grad-3);font-weight:var(--gewicht-halb);color:var(--rot)}
.modal.gen .ig-vfail .ig-cap{padding:var(--abstand-4) var(--abstand-6) 0;text-align:left;cursor:default}
.modal.gen .ig-acts .ig-vfail-del{position:relative;right:auto;bottom:auto;margin-left:auto}
.modal.gen .ig-vfail-del .ic{width:var(--ic-18);height:var(--ic-18)}
/* Leer (D18): Satz auf gestrichelter Fläche */
.modal.gen .ig-empty{grid-column:1/-1;padding:var(--abstand-10) var(--abstand-8);border:var(--rand) dashed var(--linie-2);border-radius:var(--r-m);font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit);text-align:center}
/* E19 Beispiel und E20 Vergleich: eigene Ebenen (ebene(), am Handy Blatt, am Desktop Dialog); der Vergleich am Desktop breiter */
.ig-bsp{display:flex;flex-direction:column;min-width:0;padding-bottom:var(--abstand-4)}
.ig-bsp-haus{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4);margin-top:calc(-1 * var(--abstand-2));font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
/* „von Haus“ und „ab 18“ stehen im Kopf direkt unter dem Titel (E19: 2 px), Schließen rechts über beide Zeilen */
.modal-head.ig-bsp-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--abstand-4);row-gap:var(--abstand-1);align-items:center}
.modal-head.ig-bsp-kopf>.mt{grid-column:1;grid-row:1}
.modal-head.ig-bsp-kopf>.ig-bsp-haus{grid-column:1;grid-row:2;margin:0}
.modal-head.ig-bsp-kopf>.x{grid-column:2;grid-row:1 / span 2}
.ig-ebene .ig-ab18{flex:none;display:inline-flex;align-items:center;min-height:1.5em;padding:0 .5em;border:var(--rand) solid var(--feldrand);border-radius:var(--r-xs);color:var(--zweit);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);letter-spacing:var(--lauf-plakette);white-space:nowrap}
.ig-bsp-bild{position:relative;margin-top:var(--abstand-4);aspect-ratio:1;border-radius:var(--r-m);background:var(--f2);box-shadow:0 0 0 var(--rand) var(--linie-2);overflow:hidden}
.ig-bsp-bild.video{aspect-ratio:16/9;background:var(--buehne)}
.ig-bsp-bild img,.ig-bsp-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-bsp-ab{position:absolute;z-index:1;right:var(--abstand-4);bottom:var(--abstand-4);display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);padding:0;border:var(--rand-stark) solid transparent;border-radius:var(--r-voll);background:var(--glas-dunkel);box-shadow:inset 0 0 0 var(--rand) var(--buehne-glas);color:var(--buehne-weiss);backdrop-filter:blur(var(--blur-glas));-webkit-backdrop-filter:blur(var(--blur-glas));cursor:pointer}
.ig-bsp-ab .ic{width:var(--ic-20);height:var(--ic-20)}
@media(hover:hover){.ig-bsp-ab:hover{background:var(--pille)}}
.ig-bsp-ab:focus-visible{outline-color:var(--buehne-weiss);outline-offset:calc(-1 * var(--fokus-breite));box-shadow:var(--ring-saum)}
.ig-bsp-motiv{margin:var(--abstand-5) 0 0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.ig-bsp-fakten{display:flex;flex-direction:column;margin:var(--abstand-3) 0 0}
.ig-bsp-fakten>div{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-6);min-height:var(--zeile-dicht);border-top:var(--rand) solid var(--linie);font-size:var(--grad-3)}
.ig-bsp-fakten dt{flex:none;color:var(--zweit);font-weight:var(--gewicht-mittel)}
.ig-bsp-fakten dd{min-width:0;margin:0;text-align:right;color:var(--text)}
.ig-bsp-fakten dd b{font-family:var(--mono);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums}
.ig-staerke{display:inline-flex;align-items:center;min-height:1.5em;padding:0 .5em;border:var(--rand) solid var(--akzent-kante);border-radius:var(--r-xs);background:var(--akzent-leise);color:var(--akzent-text);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);letter-spacing:var(--lauf-plakette)}
.ig-bsp-hinweis{margin:var(--abstand-4) 0 0;padding:var(--abstand-4) var(--abstand-5);border-radius:var(--r-s);background:var(--f2);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.ig-bsp-knoepfe{display:flex;flex-direction:column;gap:var(--abstand-4);margin-top:var(--abstand-6)}
.ig-bsp-knoepfe>button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);min-height:var(--hoehe-knopf);padding:0 var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ig-bsp-knoepfe .ic{width:var(--ic-18);height:var(--ic-18)}
.ig-bsp-knoepfe>.ig-bsp-ja{background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
.ig-bsp-knoepfe>.ig-bsp-ja[aria-disabled="true"]{background:var(--akzent-leise);border-color:var(--akzent-text);color:var(--akzent-text)}
@media(hover:hover){.ig-bsp-knoepfe>button:hover{background:var(--f3)}.ig-bsp-knoepfe>.ig-bsp-ja:hover{background:var(--akzent-hover)}.ig-bsp-knoepfe>.ig-bsp-ja[aria-disabled="true"]:hover{background:var(--akzent-leise)}}
.ig-bsp-knoepfe>button:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
@media(min-width:600px){.ig-bsp-knoepfe{flex-direction:row;flex-wrap:wrap}.ig-bsp-knoepfe>button{flex:1 1 auto;white-space:nowrap}.ig-bsp-knoepfe>.ig-bsp-ja{flex-grow:2}}
@media(min-width:760px){.ig-bsp-knoepfe>button{font-size:var(--grad-2)}}
.ig-vgl-motiv{margin:calc(-1 * var(--abstand-2)) 0 var(--abstand-6);font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.ig-vgl-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-5);padding-bottom:var(--abstand-4)}
@media(min-width:600px){.modal.ig-vgl-ebene{max-width:min(60rem,94vw)}.ig-vgl-raster{grid-template-columns:repeat(auto-fill,minmax(min(10em,100%),1fr))}.ig-vgl-raster.video{grid-template-columns:repeat(auto-fill,minmax(min(14em,100%),1fr))}}
.ig-vk{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;text-align:left;overflow:hidden;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve),box-shadow var(--dauer) var(--kurve)}
.ig-vk-bild{position:relative;display:block;aspect-ratio:1;background:var(--f2);overflow:hidden}
.ig-vgl-raster.video .ig-vk-bild{aspect-ratio:16/9;background:var(--buehne)}
.ig-vk-bild img,.ig-vk-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-vk-bild .ig-ab18{position:absolute;z-index:1;top:var(--abstand-3);right:var(--abstand-3);border-color:transparent;background:var(--pille);color:var(--buehne-text);box-shadow:var(--schatten-bild)}
.ig-vk-bild .ig-staerke{position:absolute;z-index:1;left:var(--abstand-3);bottom:var(--abstand-3);display:block;max-width:calc(100% - 2 * var(--abstand-3));overflow-wrap:anywhere;hyphens:auto;box-shadow:var(--schatten-bild)} /* bricht bei großer Schrift um, statt über das Bild zu laufen */
.ig-vk-text{display:flex;flex-direction:column;gap:var(--abstand-1);min-width:0;padding:var(--abstand-3) var(--abstand-5) var(--abstand-4)}
.ig-vk-name{display:flex;align-items:center;gap:var(--abstand-2);min-width:0;font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb)}
.ig-vk-name>span{min-width:0;overflow-wrap:anywhere}
.ig-vk-name .ic{flex:none;width:var(--ic-16);height:var(--ic-16);color:var(--akzent-text)}
.ig-vk-preis{font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.ig-vk-preis b{font-family:var(--mono)}
.ig-vk-preis b,.ig-vk-preis .ig-dauer{font-variant-numeric:tabular-nums}
.ig-vk-preis b{font-size:var(--grad-3);font-weight:var(--gewicht-fett);color:var(--text)}
@media(hover:hover){.ig-vk:hover{background:var(--f3);border-color:var(--feldrand)}}
@media(hover:hover) and (min-width:600px){.ig-vk:hover{transform:translateY(calc(-1 * var(--abstand-1) * var(--bewegung)));box-shadow:var(--schatten-1)}}
.ig-vk:active{background:var(--f3);border-color:var(--feldrand);transform:scale(calc(1 - .02 * var(--bewegung)))}
.ig-vk[aria-current="true"]{border-color:var(--akzent-text);box-shadow:inset 0 0 0 var(--rand) var(--akzent-text);background:var(--akzent-leise)}
.ig-vk[aria-current="true"] .ig-vk-name,.ig-vk[aria-current="true"] .ig-vk-preis b{color:var(--akzent-text)}
/* Desktop: Liste ohne eigenes Fenster (die linke Spalte rollt), Zeilen 32 mit Maus, Schrift dichter */
@media(min-width:760px){
  .modal.gen .ig-mgrid{max-height:none;padding-block:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .modal.gen .ig-mwahl{font-size:var(--grad-2);gap:0 var(--abstand-3)}
  .modal.gen .ig-mmeta{gap:var(--abstand-3)}
  .modal.gen .ig-mzeile{padding:0 var(--abstand-5) 0 var(--abstand-3);gap:var(--abstand-2)}
  .modal.gen .ig-go{min-height:var(--hoehe-knopf);font-size:var(--grad-2)}
  .modal.gen .ig-pf .ig-prompt{min-height:calc(2 * var(--grad-3-zh-text) + var(--abstand-4) + var(--abstand-3));max-height:calc(6 * var(--grad-3-zh-text));padding-top:var(--abstand-4);font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
  .modal.gen .ig-zuletzt{margin:0 0 var(--abstand-4);padding:var(--abstand-1) 0;flex-wrap:wrap;overflow:visible}
  .modal.gen .ig-mziel{display:inline-block;margin-left:var(--abstand-4)} /* die Spalte ist breit genug: „Auto“ bleibt eine Zeile */
  /* Video: Auflösung und Länge als eigene Zeilen der Leiste wie Format (Beschriftung so breit wie die längste) */
  .modal.gen .ig-dock-chips:has(>.ig-wahl)>.ig-field>.igl{min-width:6.2em}
  .modal.gen .ig-dock-chips>.ig-wahl{flex-wrap:nowrap;align-items:center}
  .modal.gen .ig-dock-chips>.ig-wahl>.ig-provs{flex:1 1 auto;flex-wrap:wrap;row-gap:max(var(--abstand-3), calc(var(--treffer-min) - var(--ig-chip)));min-width:0}
}
/* Desktop mit Maus (Zeilen 32): Miniatur 24 mit kleiner Lupe in der Ecke wie im Mockup (bilder-*-desktop: 14, Zeichen 10);
   die Lupe aus E18 (18) deckte die Hälfte des Bildes. Trefferfläche bleibt der Knopf (32). */
@media(min-width:760px) and (pointer:fine){.modal.gen .ig-chip{padding:0 var(--abstand-4);font-size:var(--grad-2)}.modal.gen .ig-mbsp{cursor:zoom-in}
  .modal.gen .ig-mbsp img,.modal.gen .ig-mbsp video{width:calc(var(--ig-zeile) - var(--abstand-4));height:calc(var(--ig-zeile) - var(--abstand-4));border-radius:var(--r-xxs)}
  .modal.gen .ig-lupe{width:var(--ic-14);height:var(--ic-14)}
  .modal.gen .ig-lupe .ic{width:calc(var(--ic-14) - var(--abstand-2));height:calc(var(--ic-14) - var(--abstand-2))}
  .modal.gen .ig-acts button.send{flex:0 1 auto;min-height:var(--hoehe-dicht)}.modal.gen .ig-acts-icons{flex:0 1 auto;justify-content:flex-end;margin-left:auto}.modal.gen .ig-sendopt{min-height:var(--hoehe-dicht)}}
@media(max-height:680px) and (max-width:759px){.modal.gen .ig-pf .ig-prompt{min-height:calc(1em * var(--zh-text) + var(--abstand-5) + var(--abstand-4));max-height:calc(4em * var(--zh-text) + var(--abstand-5) + var(--abstand-4))}} /* kurze Fenster (Tastatur, kleine Handys): der Prompt beginnt einzeilig, wächst bis vier Zeilen */
@media(max-height:600px) and (max-width:759px){.modal.gen .ig-dock .ig-bal:not(.knapp){display:none}} /* sehr kurz (offene Tastatur): der Satz zum Guthaben nur, wenn es nicht reicht */
/* Handy: Rollfläche und Bereich als Container (Höhe in cqh, Schwellen in em, also auch bei großer Schrift) */
@media(max-width:759px){
  .modal.gen .gen-pane{container:gen-pane / size}
  .modal.gen .ig-scroll{container:ig-rolle / size}
  /* Bildkarte (E23): das Bild höchstens so hoch, dass Schild, Prompt und „In Chat senden“ mit ihm in die Rollfläche passen */
  .modal.gen .ig-card>.ig-bild{max-height:max(8rem,calc(100cqh - 9.5rem))}
  /* Modellliste: mit dem Finger rollt am Ende der Liste das Blatt weiter; das Fenster lässt immer zwei Daumenbreiten Blatt frei,
     bei sehr wenig Höhe fließt die Liste ohne eigenes Fenster im Blatt mit */
  @container ig-rolle (max-height:200px){.modal.gen .ig-mgrid{max-height:none;padding-block:0;overflow:visible;-webkit-mask-image:none;mask-image:none}}
  /* wenig Höhe für die Schrift (kleines Handy, Text XL und XXL): Leiste schlanker. Der KI-Hinweis bleibt ganz (Pflichttext, 4.6
     Nr. 13); der Knopf ohne Modellnamen (der steht gewählt an der Liste), der Satz zum Guthaben nur, wenn es nicht reicht */
  @container gen-pane (max-height:34em){
    .modal.gen .ig-dock{gap:var(--abstand-3);padding-top:var(--abstand-4)}
    .modal.gen .ig-go .ig-teil-m{display:none}
    .modal.gen .ig-pf .ig-prompt{min-height:calc(1em * var(--zh-text) + var(--abstand-5) + var(--abstand-4));max-height:calc(4em * var(--zh-text) + var(--abstand-5) + var(--abstand-4))}
  }
  /* erst bei sehr wenig Höhe (Text XXL am kleinen Handy): Satz zum Guthaben nur, wenn es nicht reicht; das leere Feld einzeilig (der
     Platzhalter zeigt seine erste Zeile, mit dem ersten Zeichen wächst das Feld); KI-Hinweis mit enger Zeilenhöhe */
  @container gen-pane (max-height:26em){
    .modal.gen .ig-dock .ig-bal:not(.knapp){display:none}
    .modal.gen .ig-pf .ig-prompt:placeholder-shown{field-sizing:fixed;min-height:0;height:max(var(--treffer-min), calc(1em * var(--zh-text) + var(--abstand-5) + var(--abstand-4)));padding-block:0;line-height:max(var(--treffer-min), calc(1em * var(--zh-text) + var(--abstand-5) + var(--abstand-4)))} /* eine Zeile so hoch wie das Feld (mindestens Trefferfläche): die zweite Zeile des Platzhalters beginnt unter dem Feld (in einem Textfeld läuft Text sonst in den Innenabstand unten) */
    .modal.gen .ig-dock .ig-ki-hinweis{line-height:var(--grad-1-zh-eng)}
  }
}
@media(pointer:coarse){.modal.gen .ig-mgrid{overscroll-behavior-y:auto}}
@media (prefers-reduced-motion:reduce){.modal.gen .spin{animation-duration:calc(var(--dauer-kreis) * 3)}}
.ig-vfail-del .ic{width:1.1rem;height:1.1rem}
/* Video im Chat (C22, Scheibe 2b): natives Video mit Vorschaubild und der Steuerung des Browsers (Poster-Logik und Abspielen im
   Verlauf bleiben), Radius --r-s wie das Bild, Streifen auf der dunklen Bühnenfläche. Die Breite setzt medienMass. */
.msg-video{display:block;width:280px;max-width:100%;max-height:60vh;border-radius:var(--r-s);background:var(--buehne);object-fit:contain}
@media(max-width:520px){.msg-video{width:100%}}
/* Profilbild-Upload + Zuschneiden */
/* Scheibe 5a-2: Profilkopf C42 im Profil (Bild 72, daneben die Knöpfe zum Profilbild als B1 mit Rand und Zeichen, Wege wie bisher) und
   Zuschnitt E27 (Bühne quadratisch, Radius --r-m, Fläche 2, Kreismaske mit --scrim und weißem Rand; darunter der Regler B20 mit Wert
   als Text, Griff 24 in Akzent, Spur bis zum Griff in Akzent-Text). Hover nur bei Maus (4.6). */
.prof-av{display:flex;flex:1 1 12em;flex-wrap:wrap;align-items:center;gap:var(--abstand-3);min-width:0} /* wird es neben dem Bild zu eng (XXL, 320 px), rutschen die Knöpfe darunter */
.prof-av:empty{display:none}
.prof-av .prof-av-knopf{flex:0 1 auto;min-width:0;font-size:var(--grad-3)}
.prof-av .prof-av-knopf .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
.avc{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-8)}
.avc-stage{position:relative;width:256px;height:256px;border-radius:var(--r-m);overflow:hidden;background:var(--f2);touch-action:none}
.avc-canvas{display:block;width:256px;height:256px;cursor:grab}
.avc-canvas:active{cursor:grabbing}
.avc-ring{position:absolute;inset:0;border-radius:var(--r-voll);box-shadow:0 0 0 9999px var(--scrim),inset 0 0 0 var(--rand-stark) var(--buehne-weiss);pointer-events:none}
.avc-zoom{display:flex;align-items:center;gap:var(--abstand-5);width:100%;min-width:0;min-height:var(--hoehe-knopf)}
.avc-zoom .avc-zl{flex:none;color:var(--text);font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb)}
.avc-zoom .wert{flex:none;min-width:4ch;color:var(--zweit);font-family:var(--mono);font-size:var(--grad-3);font-variant-numeric:tabular-nums;text-align:right}
.avc-zoom input[type=range]{--fuellung:0%;-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:var(--hoehe-knopf);margin:0;background:transparent;cursor:pointer}
.avc-zoom input[type=range]::-webkit-slider-runnable-track{height:var(--abstand-2);border-radius:var(--r-strich);background:linear-gradient(var(--akzent-text) 0 0) 0 / var(--fuellung) 100% no-repeat,var(--linie-2)}
.avc-zoom input[type=range]::-moz-range-track{height:var(--abstand-2);border-radius:var(--r-strich);background:var(--linie-2)}
.avc-zoom input[type=range]::-moz-range-progress{height:var(--abstand-2);border-radius:var(--r-strich);background:var(--akzent-text)}
.avc-zoom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--ic-24);height:var(--ic-24);margin-top:calc((var(--abstand-2) - var(--ic-24)) / 2);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-voll);background:var(--akzent);box-shadow:0 0 0 var(--rand-stark) var(--schweb)}
.avc-zoom input[type=range]::-moz-range-thumb{width:var(--ic-24);height:var(--ic-24);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-voll);background:var(--akzent);box-shadow:0 0 0 var(--rand-stark) var(--schweb)}
.avc-zoom input[type=range]:focus-visible{outline:none}
.avc-zoom input[type=range]:focus-visible::-webkit-slider-thumb{outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:var(--fokus-abstand)}
.avc-zoom input[type=range]:focus-visible::-moz-range-thumb{outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:var(--fokus-abstand)}
.avc .cs-acts{align-self:stretch;margin-top:0}
.prof-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-6) var(--abstand-8);padding:0 0 var(--abstand-8)}
.prof-top>.avatar,.prof-top>.av{flex:none}
/* Profilbild-Studio (Scheibe 5a-2, bauplan 3.11): die Formen aus 6a (.modal.gen) unter .ig.av-studio: Überschriften als Kapitälchen
   (C4), Chips B15 (gewählt --akzent-leise mit Rand --akzent-text, ein Tab-Stopp), Prompt-Feld E17, Hauptaktion E22 in Akzent, Notizen in
   Zweittext, Ergebnis mit Radius --r-l; der Pflicht-Haken (label.gate-ab16, Apple 1.2) als Zeile B18 in voller Höhe. Die alten Regeln
   ohne .modal.gen, die nur das Studio noch nutzte, sind dafür weg (bei „AI-Bild-Generator“). Hover nur bei Maus (4.6). */
.ig.av-studio{display:flex;flex-direction:column;gap:var(--abstand-8);color:var(--text)}
.ig.av-studio .ig-bal{margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);font-weight:var(--gewicht-mittel);font-variant-numeric:tabular-nums}
.ig.av-studio .ig-field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-4);margin:0}
.ig.av-studio .igl{display:block;margin:0;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.ig.av-studio .ig-note{margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.ig.av-studio .ig-note[hidden],.ig.av-studio .ig-status[hidden],.ig.av-studio .av-out[hidden]{display:none}
.ig.av-studio .av-ref-img{width:var(--avatar-72);height:var(--avatar-72);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);object-fit:cover}
.ig.av-studio .ig-provs{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}
.ig.av-studio .ig-chip{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);margin:0;padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);background:var(--f1);box-shadow:none;color:var(--text);font:inherit;font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-mittel);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
.ig.av-studio .ig-chip .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.ig.av-studio .ig-chip:hover{background:var(--f3)}}
.ig.av-studio .ig-chip:active{background:var(--linie-2)}
.ig.av-studio .ig-chip.on,.ig.av-studio .ig-chip[aria-checked="true"]{border-color:var(--akzent-text);background:var(--akzent-leise);color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.ig.av-studio .ig-chip:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed}
.ig.av-studio .ig-prompt{display:block;box-sizing:border-box;width:100%;min-height:calc(2em * var(--zh-text) + 2 * var(--abstand-5));margin:0;padding:var(--abstand-5) var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-text);resize:vertical;transition:border-color var(--dauer) var(--kurve)}
.ig.av-studio .ig-prompt::placeholder{color:var(--zweit);opacity:1}
.ig.av-studio .ig-prompt:focus-visible{border-color:var(--akzent-text)}
.ig.av-studio .ig-go{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:var(--hoehe-gross);margin:0;padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-4);line-height:var(--zh-knapp);font-weight:var(--gewicht-halb);text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.ig.av-studio .ig-go:hover{background:var(--akzent-hover)}}
.ig.av-studio .ig-go:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ig.av-studio .ig-go:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed;transform:none}
.ig.av-studio .av-biene{align-self:flex-start}
.ig.av-studio .ig-preview-note{margin:calc(-1 * var(--abstand-4)) 0 0;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh)}
.ig.av-studio .ig-status{display:flex;align-items:center;justify-content:center;gap:var(--abstand-3);color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);text-align:center}
.ig.av-studio .av-out{display:flex;flex-direction:column;gap:var(--abstand-6)}
.ig.av-studio .av-out-img{display:block;width:100%;max-width:calc(288 * var(--tp));margin:0 auto;border:var(--rand) solid var(--linie-2);border-radius:var(--r-l)}
.ig.av-studio .av-out-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--abstand-4)}
.ig.av-studio .av-out-row .ig-go{flex:1 1 12rem;width:auto}
.ig.av-studio .gate-ab16{min-height:var(--hoehe-knopf);margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
.ig.av-studio .gate-ab16 input[type=checkbox]{margin:calc((var(--grad-3-zh-text) - var(--ic-20)) / 2) 0 0}
.prof-name{font-weight:700;font-size:1.2rem}
.prof-handle{color:var(--zweit);font-size:.9rem}
.prof-invite{display:flex;flex-direction:column;gap:.4rem;padding:.7rem;margin:0 0 .3rem;background:var(--f2);border:1px solid var(--linie-2);border-radius:.7rem}
.pi-label{font-weight:600;font-size:.8rem;color:var(--zweit);text-transform:uppercase;letter-spacing:.04em}
.pi-row{display:flex;align-items:center;gap:.5rem}
.pi-code{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:1.15rem;font-weight:700;letter-spacing:.12em;color:var(--text);-webkit-user-select:all;user-select:all;overflow:hidden;text-overflow:ellipsis}
.pi-copy,.pi-qr{flex:0 0 auto;display:grid;place-items:center;min-width:2.2rem;height:2.2rem;padding:0 .5rem;background:var(--f1);border:1px solid var(--linie-2);border-radius:.5rem;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.pi-copy .ic{width:1.1rem;height:1.1rem}
.pi-qr.on{border-color:var(--akzent);color:var(--akzent)}
@media(hover:hover){.pi-copy:hover,.pi-qr:hover{border-color:var(--akzent);color:var(--akzent)}} /* Scheibe 3b-2: Hover nur bei Maus (4.6) */
.pi-hint{color:var(--zweit);font-size:.78rem}
.prof-disc{display:flex;align-items:center;gap:var(--abstand-5);min-height:var(--hoehe-knopf);margin-top:var(--abstand-6);padding-top:var(--abstand-4);border-top:var(--rand) solid var(--linie);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--text);cursor:pointer}
.prof-field{padding:.55rem 0;border-top:1px solid var(--linie-2)}
.prof-field .pl{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--zweit)}
.prof-field .pv{margin-top:.15rem;white-space:pre-wrap;overflow-wrap:anywhere}
.prof-field .pv a{color:var(--akzent);text-decoration:none}
/* Knopfreihe der Pflicht-Dialoge, des fremden Profils und der Moderation (Scheibe 3b-2): .pa-btn ist B1 mit Rand, .pa-btn.cs-save
   der Hauptknopf (Regel bei .cs-save), .pa-btn.danger B2 mit Rand (roter Text, Hover rot leise; gefüllt nur in Bestätigungen).
   Die Knöpfe teilen sich die Breite und brechen um, statt abgeschnitten zu werden. */
.prof-actions{display:flex;flex-wrap:wrap;gap:var(--abstand-4);margin-top:var(--abstand-8);padding-top:var(--abstand-6);border-top:var(--rand) solid var(--linie)}
.pa-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);flex:1 1 auto;box-sizing:border-box;min-width:8rem;max-width:100%;min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.pa-btn{padding-left:var(--abstand-7);padding-right:var(--abstand-7);font-size:var(--grad-2)}}
@media(hover:hover){.pa-btn:hover{background:var(--f3)}.pa-btn.danger:hover{background:var(--rot-leise);border-color:var(--rot)}}
.pa-btn:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.pa-btn.danger{color:var(--rot)}
.pa-btn.danger:active{background:var(--rot-leise);border-color:var(--rot)}
.pa-btn:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed;transform:none}
.set-row{display:flex;align-items:center;gap:.6rem;padding:.7rem 0;border-top:1px solid var(--linie-2)}
.set-row .sl{flex:1}
.set-row .sl small{display:block;color:var(--zweit);font-size:.8rem}
/* .set-link (Scheibe 3b-2): Textknopf als ganze Zeile (B1 „Text“ in der Form der Zeile C36, bis 5a daraus Bereiche macht):
   mindestens --hoehe-knopf hoch, Trennlinie oben, Text --text halbfett; Hover Fläche 3 (nur Maus), gedrückt --linie-2, Fokusring
   innen. Darunter auch die Store-Pflichtknöpfe „Käufe wiederherstellen“ und „Abo verwalten“ (storeKasse, openDeleteAccount,
   geloeschtMitAbos). .set-logout ist Abmelden: B1 mit Rand, neutral, voll breit; als Gefahr (Konto löschen unter Abmelden in
   den Einstellungen, Gruppe verlassen mit .danger) B2 als Text: roter Text ohne Rand. */
.set-link{display:block;box-sizing:border-box;width:100%;min-height:var(--hoehe-knopf);padding:var(--abstand-5) 0;border:0;border-top:var(--rand) solid var(--linie);border-radius:0;background:none;color:var(--text);font:inherit;font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.set-link:hover{background:var(--f3)}}
.set-link:active{background:var(--linie-2)}
.set-link:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.set-link:disabled{color:var(--zweit);cursor:default}
.set-logout{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:var(--hoehe-knopf);margin-top:var(--abstand-8);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.set-logout{font-size:var(--grad-2)}}
@media(hover:hover){.set-logout:hover{background:var(--f3)}.set-logout+.set-logout:hover,.set-logout.danger:hover{background:var(--rot-leise)}}
.set-logout:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.set-logout+.set-logout,.set-logout.danger{border-color:transparent;color:var(--rot)}
.set-logout+.set-logout:active,.set-logout.danger:active{background:var(--rot-leise)}
.set-legal{margin-top:var(--abstand-8);padding-top:var(--abstand-6);border-top:var(--rand) solid var(--linie);font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit);text-align:center}
.set-legal a{color:var(--zweit);text-decoration:underline;text-decoration-thickness:var(--rand);text-underline-offset:.14em}
@media(hover:hover){.set-legal a:hover{color:var(--text)}}
/* Darstellung (Scheibe 5a, bauplan 3.11, Bildschirm 3.12): Unterseite unter Ich, vor dem Rahmen als Dialog. E37 mit Vorschau (fremde und
   eigene Blase, Listenzeile mit Zähler; nur Anschauung), Reglergruppen mit Kapitälchen-Überschrift (C4), Segment B14 (gewählt
   --akzent-leise mit Rand --akzent-text, Fokus innen; .aa mit „Aa“ je Stufe), Farbtupfer B19 (Punkt 28 in Fläche 44 bzw. 36, gewählt mit
   Haken und Ring), „Eigene Farbe“ als gestrichelte Kapsel, Vorlagen und eigene Schemata als Kapseln mit Punkt im Kasten, Schalter B13
   („Ganze App einfärben“), Zurücksetzen als Knopf mit Rand (B1). Am Handy untereinander (Vorschau oben); am Desktop steht die Seite in
   voller Breite neben der Rail wie Stufen & Guthaben (5b), Regler links, Vorschau rechts (haftet oben). Hover nur bei Maus (4.6);
   ohne color-mix (Safari vor 16.2) tragen die gewählten Felder Fläche 1 statt --akzent-leise (4.6 Nr. 18). */
@media(min-width:760px){
  .app[data-ziel="ich"]:has(>.col>.ziel-seite.unterseite-offen){grid-template-columns:auto minmax(0,1fr)}
  .app[data-ziel="ich"]:has(>.col>.ziel-seite.unterseite-offen)>.pane,.app[data-ziel="ich"]:has(>.col>.ziel-seite.unterseite-offen) .col-griff{display:none}
} /* Nachbesserung 5a: nur mit angemeldeter, offener Unterseite (ichMalen setzt .unterseite-offen); #ich/<unbekannt> zeigt Ich wie sonst */
.darstellung{display:flex;flex-direction:column;gap:var(--abstand-10);box-sizing:border-box;color:var(--text);padding:var(--abstand-6) calc(var(--seite-handy) + env(safe-area-inset-right,0px)) calc(var(--abstand-16) + env(safe-area-inset-bottom,0px)) calc(var(--seite-handy) + env(safe-area-inset-left,0px))}
.darstellung.im-dialog{padding:0}
@media(min-width:760px){
  .darstellung:not(.im-dialog){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(calc(300 * var(--tp)),100%),1fr));align-items:start;gap:var(--abstand-10) var(--abstand-16);max-width:calc(880 * var(--tp));padding:var(--abstand-10) var(--seite-mitte) var(--abstand-20)}
  .darstellung:not(.im-dialog) .darstellung-regler{order:1}
  .darstellung:not(.im-dialog) .darstellung-vorschau{order:2;position:sticky;top:0}
}
:is(.darstellung,.ich-bereich) .ueber{margin:0;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
:is(.darstellung,.ich-bereich) .notiz{margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.darstellung .live-vorschau{position:relative;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);overflow:hidden}
.darstellung .vorschau-name{display:block;width:max-content;margin:var(--abstand-4) var(--abstand-6) 0 auto;padding:0 var(--abstand-3);border:var(--rand) solid var(--linie-2);border-radius:var(--r-voll);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel)}
.darstellung .vorschau-chat{display:flex;flex-direction:column;gap:var(--abstand-3);padding:var(--abstand-2) var(--abstand-7) var(--abstand-6)}
.darstellung .vorschau-blase{display:flex;flex-direction:column;align-self:flex-start;max-width:86%;padding:var(--abstand-3) var(--abstand-6);border:var(--rand) solid var(--linie);border-radius:var(--r-m);background:var(--f2);color:var(--text);font-size:var(--grad-4);line-height:var(--grad-4-zh)}
.darstellung .vorschau-blase.eigen{align-self:flex-end;background:var(--akzent-leise);border-color:var(--akzent-kante)}
.darstellung .vorschau-fuss{display:flex;justify-content:flex-end;gap:var(--abstand-2);color:var(--zweit);font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-variant-numeric:tabular-nums}
.darstellung .vorschau-haken{color:var(--akzent-text)}
.darstellung .vorschau-zeile{display:flex;align-items:center;gap:var(--abstand-6);min-height:var(--zeile-bereich);padding:var(--abstand-4) var(--abstand-7);border-top:var(--rand) solid var(--linie)}
.darstellung .vz-text{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--abstand-1)}
.darstellung :is(.vz-oben,.vz-unten){display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-4)}
.darstellung .vz-name{font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-halb)}
.darstellung .vz-oben time{color:var(--zweit);font-family:var(--mono);font-size:var(--grad-1);font-variant-numeric:tabular-nums}
.darstellung .vz-vorschau{min-width:0;overflow:hidden;color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh);text-overflow:ellipsis;white-space:nowrap}
@media(min-width:760px){.darstellung .vorschau-blase{font-size:var(--grad-2);line-height:var(--grad-2-zh)}.darstellung .vz-name{font-size:var(--grad-3);line-height:var(--grad-3-zh)}.darstellung .vz-vorschau{font-size:var(--grad-2);line-height:var(--grad-2-zh)}}
.darstellung-regler{display:flex;flex-direction:column;gap:var(--abstand-10);min-width:0}
.darstellung .regler{display:flex;flex-direction:column;gap:var(--abstand-4);min-width:0}
.darstellung .regler-kopf{display:flex;align-items:center;gap:var(--abstand-4);min-height:var(--grad-2-zh)}
.darstellung .tupfer-name{margin-left:auto;color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh);font-weight:var(--gewicht-mittel);overflow-wrap:anywhere}
:is(.darstellung,.ich-bereich) .segment{display:flex;flex-wrap:wrap;gap:var(--rand);min-width:0;max-width:100%;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--feldrand);overflow:hidden}
:is(.darstellung,.ich-bereich) .segment>button{position:relative;display:inline-flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--abstand-3);min-width:min-content;min-height:var(--hoehe-segment);height:auto;padding:var(--abstand-2) var(--abstand-6);border:0;border-radius:0;background:var(--f1);box-shadow:0 calc(-1 * var(--rand)) 0 var(--feldrand);color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-mittel);line-height:var(--zh-knapp);text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
@media(min-width:760px){:is(.darstellung,.ich-bereich) .segment>button{font-size:var(--grad-2)}}
:is(.darstellung,.ich-bereich) .segment.gleich>button{flex:1 1 0}
@media(hover:hover){:is(.darstellung,.ich-bereich) .segment>button:hover{background:var(--f3)}}
:is(.darstellung,.ich-bereich) .segment>button:active{background:var(--linie-2)}
:is(.darstellung,.ich-bereich) .segment>button[aria-checked="true"]{background:var(--akzent-leise);box-shadow:0 calc(-1 * var(--rand)) 0 var(--feldrand),inset 0 0 0 var(--rand) var(--akzent-text);color:var(--akzent-text);font-weight:var(--gewicht-halb);outline:var(--rand) solid var(--akzent-text);outline-offset:calc(-1 * var(--rand))}
:is(.darstellung,.ich-bereich) .segment>button:focus-visible{outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:calc(-1 * var(--fokus-breite))}
:is(.darstellung,.ich-bereich) .segment>button[aria-checked="true"]:focus-visible{outline-offset:calc(-1 * (var(--fokus-breite) + var(--rand-stark)))}
.darstellung .segment.aa>button{flex-direction:column;gap:0;min-height:var(--hoehe-gross);padding:var(--abstand-2) var(--abstand-3);line-height:var(--zh-eng)}
.darstellung .segment.aa .vorschau{font-weight:var(--gewicht-halb)}
.darstellung .segment.aa .kuerzel{margin-top:var(--abstand-2);color:var(--zweit);font-size:var(--grad-1);font-weight:var(--gewicht-mittel)}
.darstellung .segment.aa>button[aria-checked="true"] .kuerzel{color:inherit}
.darstellung .segment.aa .g1{font-size:var(--grad-2)}
.darstellung .segment.aa .g2{font-size:var(--grad-4)}
.darstellung .segment.aa .g3{font-size:var(--grad-6)}
.darstellung .segment.aa .g4{font-size:var(--grad-7)}
.darstellung .segment.aa .g5{font-size:var(--grad-8)}
.darstellung .tupfer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) 0} /* Punkte ohne Lücke (die Trefferflächen 44 bzw. 36 stoßen aneinander), damit „Eigene Farbe“ am Handy in der Reihe bleibt */
.darstellung .tupfer-knopf{position:relative;display:grid;flex:none;place-items:center;width:var(--hoehe-knopf);height:var(--hoehe-knopf);padding:0;border:0;border-radius:var(--r-voll);background:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.darstellung .tupfer-knopf .punkt{display:grid;place-items:center;width:var(--ic-28);height:var(--ic-28);border-radius:var(--r-voll);box-shadow:inset 0 0 0 var(--rand) var(--tupfer-ring);transition:transform var(--dauer-druck) var(--kurve)}
.darstellung .tupfer-knopf .punkt .ic{width:var(--ic-16);height:var(--ic-16);opacity:0}
@media(hover:hover){.darstellung .tupfer-knopf:hover{background:var(--f3)}}
.darstellung .tupfer-knopf:active .punkt{transform:scale(calc(1 - .06 * var(--bewegung)))}
.darstellung .tupfer-knopf[aria-checked="true"] .punkt{outline:var(--rand-stark) solid var(--akzent-text);outline-offset:var(--fokus-abstand)}
.darstellung .tupfer-knopf[aria-checked="true"] .punkt .ic{opacity:1}
.darstellung .tupfer-knopf:focus-visible{outline-offset:0}
.darstellung .tupfer-eigen{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);margin-left:auto;padding:0 var(--abstand-6) 0 var(--abstand-5);border:var(--rand-punkt) dashed var(--feldrand);border-radius:var(--r-voll);background:none;color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-mittel);white-space:nowrap;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.darstellung .tupfer-eigen .ic{flex:none;width:var(--ic-16);height:var(--ic-16);color:var(--zweit)}
@media(hover:hover){.darstellung .tupfer-eigen:hover{background:var(--f3)}}
.darstellung .tupfer-eigen:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.darstellung .tupfer-eigen[aria-checked="true"]{border-color:var(--akzent-text);background:var(--akzent-leise);color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.darstellung .tupfer-eigen[aria-checked="true"] .ic{color:inherit}
.darstellung .eigen-bereich{display:flex;flex-direction:column;gap:var(--abstand-6);padding:var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.darstellung .farb-chips{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}
.darstellung .farb-chip{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);box-sizing:border-box;min-height:var(--hoehe-knopf);max-width:100%;padding:0 var(--abstand-6) 0 var(--abstand-4);border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-2);line-height:var(--grad-2-zh);font-weight:var(--gewicht-mittel);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
.darstellung .farb-chip .punkt{flex:none;width:var(--ic-20);height:var(--ic-20);border-radius:var(--r-voll);box-shadow:inset 0 0 0 var(--rand) var(--tupfer-ring)}
.darstellung .farb-chip-name{min-width:0;overflow-wrap:anywhere}
@media(hover:hover){.darstellung .farb-chip:hover{background:var(--f3)}}
.darstellung .farb-chip:active{background:var(--linie-2)}
.darstellung .farb-chip[aria-checked="true"]{border-color:var(--akzent-text);background:var(--akzent-leise);color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.darstellung .farb-wahl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4)}
.darstellung .farb-feld-rahmen{display:flex;align-items:center;gap:var(--abstand-5);min-height:var(--hoehe-knopf);cursor:pointer}
.darstellung .farb-feld{flex:none;box-sizing:border-box;width:var(--hoehe-knopf);height:var(--hoehe-knopf);margin:0;padding:var(--abstand-1);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);cursor:pointer}
.darstellung .farb-feld::-webkit-color-swatch-wrapper{padding:0}
.darstellung .farb-feld::-webkit-color-swatch{border:0;border-radius:var(--r-xs)}
.darstellung .farb-feld::-moz-color-swatch{border:0;border-radius:var(--r-xs)}
.darstellung .farb-feld-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.darstellung .farb-akt{display:flex;flex-wrap:wrap;gap:var(--abstand-4)}
.darstellung .farb-akt .cs-save,.darstellung .farb-akt .cs-cancel{flex:1 1 auto}
.darstellung .farb-loeschen{flex:none;align-self:flex-start}
.darstellung .toenung-zeile{gap:var(--abstand-8);margin-top:var(--abstand-2);padding-top:var(--abstand-4);border-top:var(--rand) solid var(--linie)}
.darstellung .toenung-text{flex-direction:column;align-items:flex-start;gap:var(--abstand-1)}
.darstellung .opt-lbl{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.darstellung .zuruecksetzen{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-4);padding-top:var(--abstand-8);border-top:var(--rand) solid var(--linie)}
.darstellung .zuruecksetzen .pa-btn{flex:none;min-width:0}
.darstellung .zuruecksetzen .pa-btn .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
.darstellung :is(.eigen-bereich,.farb-akt,.farb-loeschen,.farb-hinweis,.toenung-zeile)[hidden]{display:none}
@supports not (color:color-mix(in srgb,red,blue)){
  .darstellung .vorschau-blase.eigen{background:var(--f2);border-color:var(--akzent)}
  :is(.darstellung,.ich-bereich) :is(.segment>button,.tupfer-eigen,.farb-chip)[aria-checked="true"]{background:var(--f1)}
}
/* Bereiche unter Ich (Scheibe 5a-2, bauplan 3.11, Bildschirm 3.12): Unterseiten Benachrichtigungen und Klingelton, Chats und
   Privatsphäre, Sprache, KI-Funktionen (vor dem Rahmen als Dialog). Gruppen mit Kapitälchen-Überschrift (C4) und Kasten (C38: Fläche 1,
   Rand --linie-2, Radius --r-m), darin Einstellungszeilen (C36: Name --grad-4 halbfett, Satz --grad-2 in Zweittext, Steuerung rechts,
   mindestens --zeile-tipp, Trennlinie --linie). Schalter B13 (.tgl aus 3b-2), Auswahlliste B21 (.ein-wahl: Feldform 44 bzw. 36,
   Rand --feldrand, Radius --r-m), Knöpfe B1 mit Rand (.pa-btn), Sprache als Wahlzeilen (Radiogruppe, gewählt mit Haken in Akzent-Text),
   Vorlese-Tempo als Segment B14. Am Desktop in voller Breite neben der Rail (Regel oben), Inhalt höchstens 640 tp breit. */
.ich-bereich{display:flex;flex-direction:column;gap:var(--abstand-10);box-sizing:border-box;color:var(--text);padding:var(--abstand-6) calc(var(--seite-handy) + env(safe-area-inset-right,0px)) calc(var(--abstand-16) + env(safe-area-inset-bottom,0px)) calc(var(--seite-handy) + env(safe-area-inset-left,0px))}
.ich-bereich.im-dialog{padding:0}
@media(min-width:760px){.ich-bereich:not(.im-dialog){max-width:calc(640 * var(--tp));padding:var(--abstand-10) var(--seite-mitte) var(--abstand-20)}}
.ein-gruppe{display:flex;flex-direction:column;gap:var(--abstand-4);min-width:0}
.ein-kasten{border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.ein-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4) var(--abstand-6);box-sizing:border-box;min-height:var(--zeile-tipp);padding:var(--abstand-5) var(--abstand-7)}
/* Phase 2 (App-Session 29.10.2026): Wege unter „Auffindbar“, QR-Code, Scanner. Vorlaeufig, HIVE DESIGN zeichnet nach. */
.ein-zeile.ein-unter{padding-left:calc(var(--abstand-7) * 2)}
.add-qr{display:flex;flex-wrap:wrap;gap:var(--abstand-2) var(--abstand-6);padding:0 var(--abstand-6) var(--abstand-2)}
.add-qr .set-link{text-align:start}
.mein-qr,.qr-person{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-4);text-align:center}
.qr-rahmen{display:grid;place-items:center;width:min(15rem,70vw);aspect-ratio:1;background:#fff;border-radius:var(--r-s);padding:.4rem;box-sizing:border-box}
.qr-rahmen .qr-bild{width:100%;height:100%;display:block}
.qr-rahmen .notiz{color:#555}
.qr-schluessel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--grad-5);letter-spacing:.06em;user-select:all}
.qr-name{font-weight:var(--gewicht-halb);font-size:var(--grad-5)}
.qr-handle{color:var(--zweit)}
.qr-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--abstand-4)}
.qr-sucher{position:relative;width:min(20rem,80vw);aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:#000;margin:0 auto}
.qr-sucher video{width:100%;height:100%;object-fit:cover;display:block}
.qr-sucher::after{content:"";position:absolute;inset:18%;border:2px solid rgba(255,255,255,.85);border-radius:.6rem;pointer-events:none}
.qr-scanner{display:flex;flex-direction:column;gap:var(--abstand-4);align-items:center;text-align:center}
.musik-liste{display:flex;flex-direction:column;gap:var(--abstand-4)}
.stimme-satz{margin:0;padding:var(--abstand-5) var(--abstand-6);border-left:3px solid var(--akzent-rand);background:var(--f2);border-radius:var(--r-s);font-size:var(--grad-4);line-height:var(--zh-text)}
.stimme-zeit{font-family:var(--mono);font-size:var(--grad-5);text-align:center}
.stimme-aufnahme .gate-ab16{display:flex;gap:var(--abstand-4);align-items:flex-start;text-align:left}
.modal.gen .stimme-zaehler{margin:0;padding:0 var(--abstand-6) var(--abstand-3);text-align:right;font-family:var(--mono)}
.modal.gen .stimme-eigen{padding:0}
.grafik-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--abstand-6)}
.grafik-bild{position:relative;display:grid;place-items:center;background:var(--f2);border-radius:var(--r-m) var(--r-m) 0 0;overflow:hidden}
.grafik-bild img{display:block;width:100%;height:auto}
.grafik-karte.frei .grafik-bild{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.modal.gen .grafik-karte .grafik-bild img{aspect-ratio:auto;object-fit:contain;background:transparent;cursor:default}
.modal.gen .grafik-karte .ig-badge{top:auto;left:auto;right:var(--abstand-4);bottom:var(--abstand-4)}
.modal.gen .grafik-karte .ig-acts{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--abstand-4);padding:var(--abstand-4)}
.modal.gen .grafik-karte .ig-acts .send{flex:1 1 auto;min-width:0}
.modal.gen .grafik-karte .ig-acts-icons{flex:none;display:flex;align-items:center;gap:var(--abstand-3);margin:0}
.modal.gen .grafik-karte .ig-acts button.ig-hist-pill{width:auto;height:var(--ig-ik);padding:0 var(--abstand-5);border-color:var(--feldrand);font-size:var(--grad-1);white-space:nowrap}
/* Chip-Reihe mit Überschrift für Modell- und Bildwahl in Musik, Meme und Aus Video: Kapitälchen wie .ig-sub, Chips in normaler
   Schrift, sie brechen um und werden nie gequetscht (Henny 29.10.) */
.modal.gen .ig-chipfeld{display:flex;flex-direction:column;align-items:stretch;gap:var(--abstand-3)}
.modal.gen .ig-chipfeld>.igl{display:block;margin:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.modal.gen .ig-chipfeld>.ig-provs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3)}
.modal.gen .ig-chipfeld .ig-chip{flex:0 0 auto;white-space:nowrap}
.modal.gen .ig-chipfeld[hidden]{display:none}
.modal.gen .meme .ig-acts{flex-wrap:nowrap}
.modal.gen .meme .ig-acts .ig-acts-icons{flex:none;width:auto}
/* Fünf Reiter passen am Handy nicht nebeneinander: wischbar statt umbrechen (Henny 29.10.) */
@media(max-width:759px){.gen-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}.gen-tabs::-webkit-scrollbar{display:none}.gen-tab{flex:0 0 auto;white-space:nowrap}}
/* Studio-Umbau (07.11.2026, App-Session nach Hennys Vorgaben; HIVE DESIGN zeichnet nach). Kopf mit Zurück und Guthaben, Vollbild am
   Computer, Übersicht in zwei Spalten mit Aktionen auf langes Drücken bzw. Maus, Großansicht als Ebene, am Handy Modell als
   Ausklappliste und Format, Anzahl, Auflösung und Länge als kompakte Auswahl in einer Zeile. */
.modal.gen .sr-nur,.st-gross-m .sr-nur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.modal.gen>.modal-head{justify-content:space-between;padding-top:var(--abstand-4);padding-bottom:var(--abstand-3)}
.modal.gen>.modal-head::before{content:none}
/* Kopfzeile (07.11., Henny): Zurück nur als Zeichen; am Computer die Reiter in der Zeile, am Handy eine Ausklappliste */
.st-reiter-wahl{display:none;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-4);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);cursor:pointer}
.st-reiter-wahl .ic{width:var(--ic-18);height:var(--ic-18)}
.st-reiter-wahl .st-reiter-pfeil{width:var(--ic-16);height:var(--ic-16);color:var(--zweit);transform:rotate(180deg)}
.st-reiter-wahl[aria-expanded="true"] .st-reiter-pfeil{transform:none}
@media(max-width:759px){.modal.gen>.modal-head .gen-tabs{display:none}.st-reiter-wahl{display:inline-flex}}
@media(min-width:760px){.modal.gen>.modal-head .gen-tabs{flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;justify-content:center;overflow-x:auto;scrollbar-width:none}.modal.gen>.modal-head .gen-tabs::-webkit-scrollbar{display:none}.modal.gen>.modal-head .credit-pill{margin-left:0}}
.st-zurueck{display:inline-flex;align-items:center;gap:var(--abstand-2);min-height:var(--hoehe-dicht);margin:0 0 0 calc(-1 * var(--abstand-3));padding:0 var(--abstand-4) 0 var(--abstand-2);border:0;border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);cursor:pointer}
.st-zurueck .ic{width:var(--ic-24);height:var(--ic-24)}
@media(hover:hover){.st-zurueck:hover{background:var(--f3)}}
.st-zurueck:active{background:var(--linie-2)}
.modal.gen>.modal-head .credit-pill{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-dicht);margin-left:auto;padding:0 var(--abstand-4) 0 var(--abstand-5);background:var(--akzent-hauch);border:var(--rand) solid var(--akzent-text);border-radius:var(--r-s);color:var(--text);cursor:pointer}
@media(hover:hover){.modal.gen>.modal-head .credit-pill:hover{background:var(--f3)}}
.ig-go .ig-mark{display:inline-block;width:1em;height:1em;margin-right:.18em;vertical-align:-.14em;color:currentColor}
@media(min-width:760px){
  .modal-ov:has(>.modal.gen){place-items:stretch;padding:0}
  .modal.gen,.modal.wide.gen{width:100vw;max-width:none;height:100dvh;max-height:none;border-width:0;border-radius:0;box-shadow:none}
}
/* Übersicht: zwei Spalten, nur Bild bzw. Video mit Modell-Schild */
.modal.gen .ig-grid,.modal.gen .ig-grid.vid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-4)}
@media(min-width:760px){.modal.gen .ig-grid,.modal.gen .ig-grid.vid{grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr))}} /* im Vollbild so viele Spalten, wie passen */
.modal.gen .ig-dock-chips>.ig-field[hidden]{display:none} /* sonst stand „Auflösung“ ohne Auswahl da (display:flex schlug [hidden]) */
.modal.gen .ig-grid .ig-vpend>.ig-bild,.modal.gen .ig-grid .ig-vfail>.ig-bild{aspect-ratio:1}
.modal.gen .st-kachel>.ig-bild,.modal.gen .st-kachel>.ig-bild.video{aspect-ratio:1;max-height:none;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.modal.gen .st-kachel>.ig-bild .ig-video{object-fit:cover;pointer-events:none}
.st-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--pille);color:var(--buehne-weiss);transform:translate(-50%,-50%);pointer-events:none}
.st-play .ic{width:var(--ic-18);height:var(--ic-18)}
.modal.gen .st-kachel .st-over{position:absolute;left:0;right:0;top:0;bottom:auto;align-items:flex-start;z-index:2;min-height:0;margin:0;padding:var(--abstand-3);border:0;background:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0));opacity:0;pointer-events:none;transition:opacity var(--dauer) var(--kurve)}
.modal.gen .st-kachel.zeigt .st-over{opacity:1;pointer-events:auto}
@media(hover:hover){.modal.gen .st-kachel:hover .st-over,.modal.gen .st-kachel:focus-within .st-over{opacity:1;pointer-events:auto}}
.modal.gen .st-kachel .st-over .ig-acts-icons{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;gap:var(--abstand-2)}
.modal.gen .st-kachel .st-over button{color:var(--buehne-weiss);background:rgba(0,0,0,.35)}
.modal.gen .st-kachel .st-over button.del{color:#ffb4ab}
/* Großansicht (Ebene über dem Studio) */
.st-gross-m{--ig-ik:var(--hoehe-tipp)}
@media(min-width:760px) and (pointer:fine){.st-gross-m{--ig-ik:var(--hoehe-dicht)}}
@media(min-width:600px){.modal.st-gross-m{max-width:min(56rem,94vw)}}
.st-gross{display:flex;flex-direction:column;gap:var(--abstand-5);padding-bottom:var(--abstand-2)}
.st-gross-medien{display:grid;place-items:center;border-radius:var(--r-m);overflow:hidden;background:var(--buehne)}
.st-gross-zoom{display:block;width:100%;margin:0;padding:0;border:0;background:transparent;cursor:zoom-in}
.st-gross-zoom img,.st-gross-video{display:block;width:100%;max-height:min(68dvh,48rem);object-fit:contain}
.st-gross-modell{font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.st-gross-prompt{margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.st-gross-acts{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-4);padding:0;background:none}
.st-gross-acts .ig-acts-icons{display:flex;flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;gap:var(--abstand-2)}
.st-gross-acts button{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--ig-ik);height:var(--ig-ik);margin:0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:transparent;color:var(--zweit);cursor:pointer}
.st-gross-acts button .ic{width:var(--ic-18);height:var(--ic-18);display:block}
@media(hover:hover){.st-gross-acts button:hover{background:var(--f3);color:var(--text)}.st-gross-acts button.del:hover{background:var(--rot-leise);color:var(--rot)}}
.st-gross-acts button:active{background:var(--linie-2);color:var(--text)}
.st-gross-acts button.del{color:var(--rot)}
.st-gross-acts button:disabled{opacity:.6;cursor:default}
.st-gross-acts button.send{display:inline-flex;gap:var(--abstand-3);width:auto;height:auto;min-height:var(--hoehe-knopf);padding:0 var(--abstand-5);border-color:var(--feldrand);color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);white-space:nowrap}
/* Prompt-Werkzeuge rechts unten im Feld (07.11.2026): Verlauf und KI-Zeichen (Mit KI verbessern, danach Rückgängig) */
.ig-pf{position:relative}
.ig-pf-tools{position:absolute;right:var(--abstand-3);bottom:var(--abstand-3);z-index:1;display:flex;gap:var(--abstand-2)}
.modal.gen .ig-pf:has(>.ig-pf-tools) .ig-prompt{padding-bottom:calc(var(--hoehe-dicht) + var(--abstand-4))}
.ig-pf-tools button{position:relative;display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--zweit);cursor:pointer}
.ig-pf-tools button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.ig-pf-tools button .ic{width:var(--ic-18);height:var(--ic-18)}
.ig-pf-tools .ig-ki-knopf{color:var(--marke)}
.ig-pf-tools .ig-ki-knopf.zurueck{color:var(--text)}
.ig-pf-tools .ig-ki-knopf.laeuft .ic{animation:ki-puls 1s var(--kurve) infinite}
@keyframes ki-puls{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.ig-pf-tools .ig-ki-knopf.laeuft .ic{animation:none;opacity:.5}}
@media(hover:hover){.ig-pf-tools button:hover{background:var(--f3);color:var(--text)}}
/* Verlauf (Ebene): Prompts mit Art, Zeit, Vorschaubildern und Aktionen */
@media(min-width:600px){.modal.verlauf-m{max-width:min(44rem,94vw)}}
.verlauf{display:flex;flex-direction:column;gap:var(--abstand-5);padding-bottom:var(--abstand-2)}
.verlauf-liste{display:flex;flex-direction:column;gap:var(--abstand-4)}
.verlauf-zeile{display:flex;flex-direction:column;gap:var(--abstand-3);padding:var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.verlauf-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-4);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.verlauf-art{font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.verlauf-ki{display:inline-flex;align-items:center;gap:var(--abstand-2);color:var(--marke)}
.verlauf-ki .ic{width:var(--ic-12);height:var(--ic-12)}
.verlauf-zeit{margin-left:auto;font-family:var(--mono)}
.verlauf-text{margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.verlauf-werke{display:flex;gap:var(--abstand-3);overflow-x:auto;scrollbar-width:none}
.verlauf-werke::-webkit-scrollbar{display:none}
.verlauf-werk{flex:none;position:relative;width:4.5rem;height:4.5rem;margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);overflow:hidden;background:var(--f2);cursor:pointer}
.verlauf-werk img,.verlauf-werk video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.verlauf-acts{display:flex;align-items:center;gap:var(--abstand-3)}
.verlauf-acts .ig-chip{margin-right:auto}
.verlauf-acts button.dl,.verlauf-acts button.del{display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:transparent;color:var(--zweit);cursor:pointer}
.verlauf-acts button .ic{width:var(--ic-18);height:var(--ic-18)}
.verlauf-acts button.del{color:var(--rot)}
@media(hover:hover){.verlauf-acts button.dl:hover{background:var(--f3);color:var(--text)}.verlauf-acts button.del:hover{background:var(--rot-leise)}}
.verlauf-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-3)}
.verlauf-fuss .ig-note{margin:0;font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.verlauf-acts .ig-chip{display:inline-flex;align-items:center;min-height:var(--hoehe-dicht);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer}
@media(hover:hover){.verlauf-acts .ig-chip:hover{background:var(--f3)}}
.verlauf-fuss .linkbtn{margin:0;padding:0;border:0;background:none;color:var(--akzent-text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer}
/* Handy: Modell als Ausklappliste, kompakte Auswahl statt wischbarer Chips */
.ig-kwahl{display:none}
/* Dock (07.11.2026 spät, Henny): Referenzbilder, EINE Zeile (Referenz, Format, Anzahl, Auflösung bzw. Länge, Verlauf, Info, Modell),
   der Prompt und ganz unten „Erstellen“ über die volle Breite; das Modellfeld klappt über dem Dock auf */
.modal.gen .ig-dock{position:relative}
.modal.gen .ig-optzeile{display:flex;align-items:center;gap:var(--abstand-2);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -1rem;padding:var(--abstand-1) 1rem}
.modal.gen .ig-optzeile::-webkit-scrollbar{display:none}
.modal.gen .ig-optzeile>*{flex:none}
.modal.gen .ig-optzeile>.ig-field{display:flex;align-items:center;margin:0;padding:0;border:0;min-width:0}
.modal.gen .ig-optzeile>.ig-field[hidden]{display:none}
.modal.gen .ig-optzeile>.ig-field>.igl,.modal.gen .ig-optzeile>.ig-field>:is(.ig-ratios,.ig-provs,.ig-counts){display:none}
/* Kompakte Wahl (07.11. nachts): Knopf mit Zeichen, Wert und Pfeil; die Liste hängt am Dokument (.ig-kwahl-liste) */
.modal.gen .ig-optzeile .ig-kwahl{display:inline-flex;align-items:center;gap:var(--abstand-2);min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-2) 0 var(--abstand-3);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);white-space:nowrap;cursor:pointer}
@media(hover:hover){.modal.gen .ig-optzeile .ig-kwahl:not(:disabled):hover{background:var(--f3)}}
.modal.gen .ig-optzeile .ig-kwahl:disabled{opacity:.5;cursor:default}
.modal.gen .ig-optzeile .ig-kwahl-ic{display:inline-grid;place-items:center;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.modal.gen .ig-optzeile .ig-kwahl-ic[hidden]{display:none}
.modal.gen .ig-optzeile .ig-kwahl-ic .ic{width:var(--ic-18);height:var(--ic-18)}
.modal.gen .ig-optzeile .ig-kwahl-pfeil{flex:none;width:var(--ic-16);height:var(--ic-16);color:var(--zweit);transition:transform var(--dauer) var(--kurve)}   /* nach oben wie beim Modell: die Liste klappt nach oben auf */
.modal.gen .ig-optzeile .ig-kwahl[aria-expanded="true"] .ig-kwahl-pfeil{transform:rotate(180deg)}
.ig-kwahl-liste{position:fixed;z-index:calc(var(--ebene-dialog) + 40);display:flex;flex-direction:column;gap:var(--abstand-1);min-width:0;max-width:calc(100vw - 16px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:var(--abstand-2);box-sizing:border-box;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);box-shadow:var(--schatten-2)}
.ig-kwahl-opt{display:flex;align-items:center;gap:var(--abstand-5);min-height:var(--hoehe-knopf);margin:0;padding:0 var(--abstand-4) 0 var(--abstand-3);border:0;border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);text-align:left;cursor:pointer}
.ig-kwahl-opt:disabled{opacity:.45;cursor:default}
.ig-kwahl-opt.on{color:var(--akzent-text)}
@media(hover:hover){.ig-kwahl-opt:not(:disabled):hover{background:var(--f3)}}
.ig-kwahl-opt:focus-visible{background:var(--f3)}
.ig-kwahl-oz{display:inline-grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;color:var(--zweit)}
.ig-kwahl-opt.on .ig-kwahl-oz{color:var(--akzent-text)}
.ig-kwahl-oz .ic{width:var(--ic-24);height:var(--ic-24)}
.ig-kwahl-oz .ig-ratio-ic{display:inline-block;box-sizing:border-box;border:var(--rand-stark) solid currentColor;border-radius:var(--r-strich);opacity:1;transform:scale(1.15)}
.ig-kwahl-ot{flex:1 1 auto;font-family:var(--mono)}
.ig-kwahl-liste.ki-menue .ig-kwahl-ot{font-family:inherit} /* KI-Knopf im Chat: Sätze, keine Werte (07.11. spät) */
/* Chatliste (07.11.2026 spät): eine Zeile je Person; langer Druck oder Rechtsklick öffnet das Menü der Zeile */
.row.mit-menue,.row.mit-menue *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}   /* 08.11.: überall, auch Notizen und KI-Chats im Fuß */
.side-scroll .row.gedrueckt{background:var(--f3)}
.ig-kwahl-liste.listen-menue{min-width:min(15rem,calc(100vw - 16px))}
.ig-kwahl-liste.listen-menue .ig-kwahl-haken{display:none}
.ig-kwahl-liste.listen-menue .ic.gedreht{transform:rotate(180deg)}
.ig-kwahl-liste.listen-menue .ig-kwahl-opt.gefahr{color:var(--rot)}
.ig-kwahl-liste.listen-menue .ig-kwahl-opt.gefahr .ic{color:var(--rot)}
.ig-kwahl-liste.ki-menue .ig-kwahl-opt:disabled .ig-kwahl-ot{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.ig-kwahl-haken{flex:none;width:var(--ic-18);height:var(--ic-18);visibility:hidden}
.ig-kwahl-opt.on .ig-kwahl-haken{visibility:visible}
.modal.gen .ig-optzeile .ig-ref-plus{padding:0 var(--abstand-3);gap:var(--abstand-2)}
.modal.gen .ig-optzeile .ig-ref-feld{margin:0}
.modal.gen .ig-ref-plus .ig-ref-max{font-family:var(--mono);color:var(--zweit)}
.modal.gen .ig-optzeile .ig-mklapp{position:sticky;right:0;z-index:1;margin-left:auto;min-height:var(--hoehe-dicht);padding:0 var(--abstand-3);gap:var(--abstand-2);background:var(--f1);box-shadow:calc(-1 * var(--abstand-6)) 0 var(--abstand-5) calc(-1 * var(--abstand-2)) var(--f1)}   /* bleibt am rechten Rand sichtbar, die Mitte wischt */
.modal.gen .ig-optzeile .ig-verlauf-knopf,.modal.gen .ig-optzeile .ig-info-knopf{position:relative;display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--zweit);cursor:pointer}
.modal.gen .ig-optzeile .ig-verlauf-knopf .ic{width:var(--ic-18);height:var(--ic-18)}
.ig-info-knopf{font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;font-style:italic;font-weight:700;line-height:1}
@media(hover:hover){.modal.gen .ig-optzeile .ig-verlauf-knopf:hover,.modal.gen .ig-optzeile .ig-info-knopf:hover{background:var(--f3);color:var(--text)}}
@media(max-width:430px){.modal.gen .ig-optzeile .ig-ref-wort{display:none}}
/* Info-Blatt */
.st-info{display:flex;flex-direction:column;gap:var(--abstand-6);padding-bottom:var(--abstand-4)}
.st-info-teil h3{display:flex;align-items:center;gap:var(--abstand-4);margin:0 0 var(--abstand-3);font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-fett);color:var(--text)}
.st-info-z{display:inline-flex;align-items:center;gap:var(--abstand-2);color:var(--zweit)}
.st-info-z .ic,.st-info-chip .ic{width:var(--ic-18);height:var(--ic-18)}
.st-info-z .ig-anbieter.hive{color:var(--marke)}
.st-info-bsp{display:flex;flex-wrap:wrap;gap:var(--abstand-2);margin:0 0 var(--abstand-3)}
.st-info-chip{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-dicht);padding:0 var(--abstand-4);box-sizing:border-box;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font-family:var(--mono);font-size:var(--grad-2);font-weight:var(--gewicht-halb)}
.st-info-chip>.ic,.st-info-chip>.ig-ratio-ic{color:var(--zweit)}
.st-info-chip .ig-ratio-ic{display:inline-block;box-sizing:border-box;border:var(--rand-stark) solid currentColor;border-radius:var(--r-strich);opacity:1;transform:scale(.85)}
.st-info-teil p{margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
/* Info-Blatt ausführlich (07.11. abends, Henny: "ausführlicher und breiter gefasst"): Grundlagen oben, Modelle mit Preis als Liste */
@media(min-width:600px){.modal.st-info-m{max-width:min(46rem,94vw)}}
.st-info-teil p+p{margin-top:var(--abstand-3)}
.st-info-grund{display:flex;align-items:flex-start;gap:var(--abstand-5);padding:var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.st-info-gz{flex:none;display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);border-radius:var(--r-s);background:var(--f2);color:var(--marke)}
.st-info-gz .ic{width:var(--ic-18);height:var(--ic-18)}
.st-info-gt{display:flex;flex-direction:column;gap:var(--abstand-3);min-width:0}
.st-info-gt p{margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--text)}
.st-info-schritte{display:flex;flex-wrap:wrap;gap:var(--abstand-2);margin:var(--abstand-2) 0 0;padding:0;list-style:none;counter-reset:st-schritt}
.st-info-schritte li{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-dicht);padding:0 var(--abstand-4);box-sizing:border-box;border-radius:var(--r-s);background:var(--f2);color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh);counter-increment:st-schritt}
.st-info-schritte li::before{content:counter(st-schritt);color:var(--zweit);font-variant-numeric:tabular-nums}
.st-info-schritte .ic{width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.st-info-schritte .ig-ratio-ic{display:inline-block;box-sizing:border-box;border:var(--rand-stark) solid currentColor;border-radius:var(--r-strich);transform:scale(.85)}
.st-info-modelle{list-style:none;margin:var(--abstand-4) 0 0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);overflow:hidden}
.st-info-modelle li{display:flex;align-items:center;gap:var(--abstand-4);padding:var(--abstand-3) var(--abstand-4)}
.st-info-modelle li+li{border-top:var(--rand) solid var(--linie-2)}
.st-info-modelle .ig-anbieter{flex:none}
.st-info-modelle .ig-anbieter.hive{color:var(--marke)}
.st-info-mtext{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.st-info-mname{color:var(--text);font-size:var(--grad-3);line-height:var(--grad-3-zh)}
.st-info-minfo{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.st-info-mpreis{flex:none;color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh);font-variant-numeric:tabular-nums;white-space:nowrap}
.modal.gen>.modal-head .st-ansicht>[hidden]{display:none}
/* Anbieter-Logos (07.11.): einfarbige als Maske in der Textfarbe, farbige als Bild; im Modell-Knopf und vor jedem Namen der Liste */
.ig-anbieter.logo{display:inline-block;flex:none;width:var(--ic-18);height:var(--ic-18);min-width:0;padding:0;border-radius:0;background:transparent;object-fit:contain;vertical-align:calc(-1 * var(--abstand-2))}
.ig-anbieter.logo.mono{background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.modal.gen .ig-mklapp-z{display:inline-flex;align-items:center}
.modal.gen .ig-mn>.ig-anbieter{margin-right:var(--abstand-3)}
.modal.gen .ig-mn>.ig-anbieter.mono{color:var(--text)}
.modal.gen .ig-pf-tools button{border:var(--rand) solid var(--linie-2);background:var(--f2);color:var(--zweit)}
.modal.gen .ig-pf-tools .ig-mic.rec{color:var(--rot);border-color:var(--rot)}
.modal.gen .ig-mklapp{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);margin:0;padding:0 var(--abstand-4);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);cursor:pointer}
@media(hover:hover){.modal.gen .ig-mklapp:hover{background:var(--f3)}}
.modal.gen .ig-mklapp .ig-mpreis{min-width:0;font-family:var(--mono);text-align:left;color:var(--zweit)}
.modal.gen .ig-optzeile .ig-kwahl-ic .ig-ratio-ic{display:inline-block}   /* die Form der Wahl auch am Computer (dort blendete eine ältere Dock-Regel sie aus) */
.modal.gen .ig-mklapp-pfeil{flex:none;width:var(--ic-18);height:var(--ic-18);transition:transform var(--dauer) var(--kurve)}
.modal.gen .ig-mklapp[aria-expanded="true"] .ig-mklapp-pfeil{transform:rotate(180deg)}
.ig-anbieter{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .3rem;box-sizing:border-box;border-radius:.45rem;background:var(--f3);color:var(--text);font-family:var(--mono);font-size:.68rem;font-weight:var(--gewicht-fett);letter-spacing:.02em}
.ig-anbieter.hive{background:transparent;color:var(--marke);padding:0}
.ig-anbieter.hive .ic{width:var(--ic-18);height:var(--ic-18)}
.modal.gen .ig-modellwahl{position:absolute;left:0;right:0;bottom:100%;z-index:3;max-height:min(70dvh,36rem);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:var(--abstand-6) 1rem;box-sizing:border-box;border:var(--rand) solid var(--linie-2);border-bottom:0;border-radius:var(--r-blatt) var(--r-blatt) 0 0;background:var(--f1);box-shadow:var(--schatten-2)}
.modal.gen .ig-modellwahl[hidden]{display:none}
/* Werkzeuge rechts neben dem Prompt: Mikro und KI-Zeichen oben, Verlauf (und beim Video der Würfel) darunter */
.modal.gen .ig-pf-tools{top:var(--abstand-3);bottom:auto;display:grid;grid-template-columns:repeat(2,auto);gap:var(--abstand-2)}
.modal.gen .ig-pf-tools .ig-mic,.modal.gen .ig-pf-tools .ig-dice{position:relative;top:auto;right:auto}
.modal.gen .ig-pf:has(>.ig-pf-tools) .ig-prompt{padding-right:calc(2 * var(--hoehe-dicht) + var(--abstand-2) + var(--abstand-6));padding-bottom:var(--abstand-4);min-height:calc(2 * var(--hoehe-dicht) + var(--abstand-2) + 2 * var(--abstand-3))}
.modal.gen .ig-pf:has(>.ig-pf-tools) .ig-mic-preis{right:calc(2 * var(--hoehe-dicht) + var(--abstand-2) + var(--abstand-5))}
/* Prompt-Feld im Dock (07.11. nachts, Henny): Modell-Knopf oben rechts über Mikro und KI-Zeichen, Verlauf unten links im Feld */
.modal.gen .ig-pf-dock .ig-pf-tools{grid-template-columns:repeat(2,minmax(var(--hoehe-dicht),1fr))}
.modal.gen .ig-pf-dock .ig-pf-tools>button:not(.ig-mklapp){width:100%}
.modal.gen .ig-pf-tools>.ig-mklapp{grid-column:1/-1;justify-content:center;width:auto;min-width:0;height:var(--hoehe-dicht);min-height:0;margin:0;padding:0 var(--abstand-3);gap:var(--abstand-2);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--text);font-size:var(--grad-2);white-space:nowrap}
.modal.gen .ig-pf-tools>.ig-mklapp .ig-mklapp-pfeil{width:var(--ic-16);height:var(--ic-16);color:var(--zweit)}
.modal.gen .ig-pf.ig-pf-dock:has(>.ig-pf-tools) .ig-prompt{padding-right:calc(var(--pf-rechts,5.5rem) + var(--abstand-3) + var(--abstand-4));padding-bottom:calc(var(--hoehe-dicht) + 2 * var(--abstand-3));min-height:calc(var(--pf-hoch,4.75rem) + 2 * var(--abstand-3));max-height:calc(5em * var(--zh-text) + var(--abstand-5) + var(--hoehe-dicht) + 2 * var(--abstand-3))}
.modal.gen .ig-pf-dock>.ig-pf-verlauf{position:absolute;left:var(--abstand-3);bottom:var(--abstand-3);z-index:1;display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--zweit);cursor:pointer}
.modal.gen .ig-pf-dock>.ig-pf-verlauf .ic{width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.modal.gen .ig-pf-dock>.ig-pf-verlauf:hover{background:var(--f3);color:var(--text)}}
.modal.gen .ig-pf.ig-pf-dock:has(>.ig-pf-tools) .ig-mic-preis{right:calc(var(--pf-rechts,5.5rem) + var(--abstand-5))}
/* Großansicht im Vollbild (07.11.2026, Henny): schwarze Bühne, Werk mittig, darunter Angaben, Prompt und Aktionen links, rechts das
   Hive-Zeichen; ein Tipp aufs Bild blendet Kopf und Leiste aus (.ruhig) */
.st-voll{position:fixed;inset:0;z-index:var(--ebene-dialog);display:flex;flex-direction:column;background:#000;color:var(--text);--ig-ik:var(--hoehe-tipp)}
@media(min-width:760px) and (pointer:fine){.st-voll{--ig-ik:var(--hoehe-dicht)}}
.st-voll-kopf{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:flex-end;padding:calc(var(--abstand-4) + env(safe-area-inset-top,0px)) calc(var(--abstand-4) + env(safe-area-inset-right,0px)) 0;pointer-events:none}
.st-voll-x{pointer-events:auto;display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);margin:0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-voll);background:var(--buehne-glas);color:var(--buehne-weiss);-webkit-backdrop-filter:blur(var(--blur-glas));backdrop-filter:blur(var(--blur-glas));cursor:pointer}
.st-voll-x .ic{width:var(--ic-24);height:var(--ic-24);transform:rotate(45deg)}
.st-voll-kopf>.st-voll-loop{margin-left:auto;margin-right:var(--abstand-3)}
.st-voll-loop .ic{transform:none}
.st-voll-medien{flex:1 1 auto;min-height:0;display:grid;place-items:center;touch-action:pan-y pinch-zoom;padding:calc(var(--hoehe-tipp) + var(--abstand-6) + env(safe-area-inset-top,0px)) var(--abstand-4) var(--abstand-3);border-radius:0;background:transparent;overflow:hidden}
/* Henny 07.11. abends: am Computer war das Bild "etwas gezoomt, so dass das Hive-Zeichen abgeschnitten wird". Die Prozent-Höhen lösten
   sich nicht auf, ein hohes Bild kam in voller Größe und lief unten aus der Fläche. Jetzt füllt ein Rahmen die Fläche (absolut, ohne
   Prozent-Ketten) und das Bild zeigt sich darin ganz (object-fit: contain). */
.st-voll-medien{position:relative}
.st-voll .st-gross-zoom,.st-voll .st-voll-rahmen{position:absolute;top:calc(var(--hoehe-tipp) + var(--abstand-6) + env(safe-area-inset-top,0px));right:var(--abstand-4);bottom:var(--abstand-3);left:var(--abstand-4);display:block;width:auto;height:auto;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.st-voll .st-voll-rahmen{cursor:auto}
.st-voll .st-gross-zoom img,.st-voll .st-voll-rahmen .st-gross-video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.st-voll.ruhig .st-gross-zoom,.st-voll.ruhig .st-voll-rahmen{top:env(safe-area-inset-top,0px);right:0;bottom:env(safe-area-inset-bottom,0px);left:0}
.st-voll.ruhig .st-voll-kopf,.st-voll.ruhig .st-voll-leiste{display:none}
.st-voll.ruhig .st-voll-medien{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.st-voll-leiste{flex:none;display:flex;flex-direction:column;gap:var(--abstand-3);width:100%;max-width:60rem;margin:0 auto;padding:var(--abstand-3) 1rem calc(var(--abstand-5) + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.st-voll .st-gross-prompt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.st-voll .st-gross-prompt.offen{display:block;max-height:30dvh;overflow-y:auto;-webkit-line-clamp:unset}
.st-voll-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-3) var(--abstand-6)}
.st-voll .st-gross-acts{justify-content:flex-start}
.st-voll .st-gross-acts .ig-acts-icons{flex:0 1 auto;justify-content:flex-start}
/* Text und Knöpfe links bündig mit dem Bild (Henny 07.11. abends); studioGross setzt --st-links und --st-breite nach dem gezeichneten Bild */
.st-voll-leiste.st-buendig{max-width:none;margin:0;padding-left:var(--st-links);padding-right:max(var(--abstand-4),calc(100% - var(--st-links) - max(var(--st-breite),28rem)))}
/* „In Chat senden“ rechts in der Zeile der Zeichen und so hoch wie sie (Henny 07.11. abends) */
.st-voll-zeile>.st-gross-acts{flex:1 1 100%;flex-direction:row;flex-wrap:nowrap;align-items:center}
.st-voll .st-gross-acts .ig-acts-icons{flex-wrap:wrap}
.st-voll .st-gross-acts>button.send{margin-left:auto;min-height:0;height:var(--ig-ik)}
/* W15c.2 (HIVE DESIGN): Senden dunkel auf Akzent (vorher hell, 1,9:1), Zeichen am Handy 44 breit, wie in der Cloud */
.st-voll .ig-acts button.dl,.st-voll .ig-acts button.del{width:var(--ig-ik)}
.st-voll .st-gross-acts>button.send{border:var(--rand) solid var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.st-voll .st-gross-acts>button.send:hover{background:var(--akzent-hover)}}
@media(max-width:430px){.st-voll .st-gross-acts>button.send>span{display:none}.st-voll .st-gross-acts>button.send{width:var(--ig-ik);padding:0}}
/* Dock-Fuß (07.11. nachmittags, Henny): links Verlauf, Mikro, KI-Zeichen und Info, rechts „Erstellen“ über die halbe Breite */
.modal.gen .ig-dock-fuss{display:flex;align-items:stretch;gap:var(--abstand-3)}
.modal.gen .ig-fuss-werkzeuge{flex:1 1 0;display:flex;align-items:stretch;gap:var(--abstand-3);min-width:0}
.modal.gen .ig-dock-fuss>.ig-go{flex:0 0 calc(50% - var(--abstand-3) / 2);width:auto;margin:0}
/* Erstellen und in den Chat senden (Henny 07.11. abends): rechts neben „Erstellen“ dasselbe Zeichen mit dem Pfeil, beide zusammen
   halb so breit wie die Zeile */
.modal.gen .ig-dock-fuss>.ig-go-paar{flex:0 0 calc(50% - var(--abstand-3) / 2);display:flex;gap:var(--abstand-2);min-width:0}
.modal.gen .ig-go-paar>.ig-go{flex:1 1 auto;width:auto;min-width:0;margin:0}
.modal.gen .ig-go-senden{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-1);box-sizing:border-box;min-width:calc(var(--hoehe-knopf) + var(--abstand-6));margin:0;padding:0 var(--abstand-4);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent-hauch);color:var(--akzent-text);cursor:pointer}
.modal.gen .ig-go-senden .ic{width:var(--ic-18);height:var(--ic-18)}
.modal.gen .ig-go-senden .ic.hx{color:var(--marke)}
@media(hover:hover){.modal.gen .ig-go-senden:hover{background:var(--f3)}}
.modal.gen .ig-go-senden:disabled,.modal.gen .ig-go-senden[aria-disabled="true"]{opacity:.55;cursor:default}
.modal.gen .ig-fuss-werkzeuge>button{position:relative;top:auto;right:auto;display:inline-grid;place-items:center;flex:1 1 0;width:auto;height:auto;min-height:var(--hoehe-knopf);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--zweit);box-shadow:none;cursor:pointer}
.modal.gen .ig-fuss-werkzeuge>button .ic{width:var(--ic-18);height:var(--ic-18)}
.modal.gen .ig-fuss-werkzeuge .ig-ki-knopf{color:var(--marke)}
.modal.gen .ig-fuss-werkzeuge .ig-ki-knopf.zurueck{color:var(--text)}
.modal.gen .ig-fuss-werkzeuge .ig-ki-knopf.laeuft .ic{animation:ki-puls 1s var(--kurve) infinite}
.modal.gen .ig-fuss-werkzeuge .ig-mic.rec{color:var(--rot);border-color:var(--rot)}
@media(hover:hover){.modal.gen .ig-fuss-werkzeuge>button:hover{background:var(--f3);color:var(--text)}}
.modal.gen .ig-pf:not(:has(.ig-mic,.ig-pf-tools)) .ig-prompt{padding-right:var(--abstand-7)}
/* KI-Sterne (und beim Video der Würfel) unten rechts im Feld, ohne Rahmen (07.11. später, Henny) */
.modal.gen .ig-pf-ecke{position:absolute;right:var(--abstand-2);bottom:var(--abstand-2);z-index:1;display:flex;align-items:center;gap:0}
.modal.gen .ig-pf-ecke>button{position:relative;top:auto;right:auto;display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:0;border-radius:var(--r-s);background:transparent;color:var(--zweit);box-shadow:none;cursor:pointer}
.modal.gen .ig-pf-ecke>button .ic{width:var(--ic-20);height:var(--ic-20)}
.modal.gen .ig-pf-ecke>.ig-ki-knopf{color:var(--marke)}
.modal.gen .ig-pf-ecke>.ig-ki-knopf.zurueck{color:var(--text)}
.modal.gen .ig-pf-ecke>.ig-ki-knopf.laeuft .ic{animation:ki-puls 1s var(--kurve) infinite}
@media(hover:hover){.modal.gen .ig-pf-ecke>button:hover{background:var(--f3)}}
.modal.gen .ig-pf:has(>.ig-pf-ecke) .ig-prompt{padding-bottom:calc(var(--hoehe-dicht) + var(--abstand-2));padding-right:var(--abstand-7)}
/* Modell-Knopf über dem Prompt (07.11. später): am Handy füllt er den Rest der Zeile mit dem kurzen Namen, am Computer der lange Name */
.modal.gen .ig-optzeile .ig-mklapp{flex:1 1 auto;min-width:6.5rem;justify-content:flex-start}
.modal.gen .ig-mklapp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.modal.gen .ig-mklapp-name.lang{display:none}
.modal.gen .ig-optzeile .ig-mklapp .ig-mklapp-name{flex:1 1 auto}
.modal.gen .ig-optzeile .ig-mklapp .ig-mpreis{margin-left:auto}
@media(min-width:760px){.modal.gen .ig-mklapp-name.kurz{display:none}.modal.gen .ig-mklapp-name.lang{display:block}}
/* Info in der Kopfzeile neben dem Auge */
.modal.gen>.modal-head .st-ansicht .ig-info-knopf{display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f1);color:var(--zweit);cursor:pointer}
@media(hover:hover){.modal.gen>.modal-head .st-ansicht .ig-info-knopf:hover{background:var(--f3);color:var(--text)}}
/* Kopfzeile: Spalten und Auge neben „Bild“ bzw. den Reitern (07.11. nachmittags) */
.modal.gen>.modal-head .st-ansicht{display:inline-flex;align-items:center;gap:var(--abstand-2);flex:none}
.modal.gen>.modal-head .st-ansicht[hidden]{display:none}
.modal.gen .ig-werk-kopf:not(:has(>:not([hidden]))){display:none}
.wd-schaetz{color:var(--akzent-text)}
.wd-summe[hidden]{display:none}
/* Umwandeln (07.11.2026): Dateien wählen oder hineinziehen, Liste, Wahl je Art, Ergebnisse mit Größe vorher und nachher */
.wd-zone{min-height:8rem;text-align:center}
.wd-zone-satz{max-width:28rem;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.wd.zieht .wd-zone{border-color:var(--akzent-text);background:var(--akzent-hauch)}
.wd-liste{display:flex;flex-direction:column;gap:var(--abstand-2)}
.wd-liste:empty{display:none}
.wd-datei{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-4);min-height:var(--hoehe-dicht);padding:var(--abstand-2) var(--abstand-4);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f1);font-size:var(--grad-2)}
.wd-datei.fehler .wd-g{color:var(--rot)}
.wd-z{display:inline-grid;place-items:center;color:var(--zweit)}
.wd-z .ic{width:var(--ic-18);height:var(--ic-18)}
.wd-n{flex:1 1 10rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:var(--gewicht-halb)}
.wd-g{font-family:var(--mono);color:var(--zweit)}
.wd-weg{display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:0;border-radius:var(--r-s);background:transparent;color:var(--zweit);cursor:pointer}
.wd-weg .ic{width:var(--ic-18);height:var(--ic-18);transform:rotate(45deg)}
/* Zuschneiden (07.11.2026 spät): Vollbild-Ebene; oben die Fläche mit festem Rahmen (ziehen, zwei Finger, Mausrad), unten Zeitleiste mit
   Filmstreifen und zwei Griffen, Seitenverhältnis, Drehen, Zoom, Einstellungen (Ausklapplisten mit „Eigene“), geschätzte Größe, Aktionen */
.ed{position:fixed;inset:0;z-index:calc(var(--ebene-dialog) + 25);display:flex;flex-direction:column;background:#000;color:var(--text)}
.ed-kopf{flex:none;display:flex;align-items:center;gap:var(--abstand-4);padding:calc(var(--abstand-4) + env(safe-area-inset-top,0px)) calc(var(--abstand-6) + env(safe-area-inset-right,0px)) var(--abstand-4) calc(var(--abstand-6) + env(safe-area-inset-left,0px))}
.ed-x{flex:none;display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);margin:0;padding:0;border:0;border-radius:var(--r-voll);background:var(--buehne-glas);color:var(--buehne-weiss);cursor:pointer}
.ed-x .ic{width:var(--ic-24);height:var(--ic-24);transform:rotate(45deg)}
.ed-titel{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;color:var(--buehne-weiss);font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-fett);text-overflow:ellipsis;white-space:nowrap}
.ed-reset{flex:none;min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:transparent;color:var(--zweit);font:inherit;font-size:var(--grad-2);cursor:pointer}
@media(hover:hover){.ed-reset:hover,.ed-chip:hover,.ed-wahl:hover,.ed-spiel:hover,.ed-zweit:hover{background:var(--f3);color:var(--text)}}
.ed-flaeche{position:relative;flex:1 1 auto;min-height:11rem;touch-action:none;cursor:grab}
.ed-lw{position:absolute;inset:0;display:block;width:100%;height:100%}
.ed-leiste{flex:none;display:flex;flex-direction:column;gap:var(--abstand-5);box-sizing:border-box;width:100%;max-height:55dvh;overflow-y:auto;padding:var(--abstand-5) calc(var(--abstand-6) + env(safe-area-inset-right,0px)) calc(var(--abstand-6) + env(safe-area-inset-bottom,0px)) calc(var(--abstand-6) + env(safe-area-inset-left,0px));border-top:var(--rand) solid var(--linie-2);background:var(--grund)}
@media(min-width:760px){.ed-leiste{width:min(46rem,100%);margin:0 auto;border:var(--rand) solid var(--linie-2);border-bottom:0;border-radius:var(--r-m) var(--r-m) 0 0}}
.ed-grund{margin:0;color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.ed-zeit{display:flex;align-items:center;gap:var(--abstand-4)}
.ed-spiel{flex:none;display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f1);color:var(--text);cursor:pointer}
.ed-spiel .ic{width:var(--ic-18);height:var(--ic-18)}
/* Vorschau beim Schneiden (08.11.2026): Bild über dem gezogenen Griff mit Zeit */
.ed-blick{position:absolute;bottom:calc(100% + var(--abstand-5));width:7rem;transform:translateX(-50%);overflow:hidden;border:var(--rand-stark) solid var(--buehne-weiss);border-radius:var(--r-s);background:#000;box-shadow:0 6px 18px rgba(0,0,0,.45);pointer-events:none;z-index:2}
.ed-blick[hidden]{display:none}
.ed-blick canvas{display:block;width:100%}
.ed-blick-zeit{position:absolute;left:0;right:0;bottom:0;padding:2px 0;background:rgba(0,0,0,.6);color:#fff;font-family:var(--mono);font-size:var(--grad-1);text-align:center}
.ed-spur{position:relative;flex:1 1 auto;height:var(--hoehe-tipp);margin:0 var(--abstand-4);border-radius:var(--r-s);background:var(--f2);touch-action:none}
.ed-streifen{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--r-s);opacity:.6;pointer-events:none}
.ed-band{position:absolute;top:0;bottom:0;box-sizing:border-box;border:var(--rand-stark) solid var(--akzent);border-radius:var(--r-xs);background:color-mix(in srgb,var(--akzent) 14%,transparent);cursor:grab;touch-action:none}
.ed-linie{position:absolute;top:calc(-1 * var(--abstand-2));bottom:calc(-1 * var(--abstand-2));width:2px;margin-left:-1px;background:var(--buehne-weiss);pointer-events:none}
.ed-griff{position:absolute;top:calc(-1 * var(--abstand-2));bottom:calc(-1 * var(--abstand-2));width:var(--abstand-8);margin-left:calc(-1 * var(--abstand-8) / 2);border-radius:var(--r-xs);background:var(--akzent);cursor:ew-resize;touch-action:none}
.ed-griff::after{content:"";position:absolute;top:32%;bottom:32%;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:var(--auf-akzent)}
.ed-griff.zieht,.ed-griff:focus-visible{box-shadow:0 0 0 var(--rand-stark) var(--buehne-weiss)}
.ed-zeit-t,.ed-schaetz{margin:0;color:var(--zweit);font-size:var(--grad-2);font-variant-numeric:tabular-nums}
.ed-zeit-t.knapp,.ed-schaetz.knapp{color:var(--gelb)}
.ed-werkzeuge{display:flex;align-items:center;gap:var(--abstand-3);overflow-x:auto;scrollbar-width:none}
.ed-werkzeuge::-webkit-scrollbar{display:none}
.ed-formen{display:flex;gap:var(--abstand-2)}
.ed-chip{flex:none;display:inline-flex;align-items:center;gap:var(--abstand-3);box-sizing:border-box;min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-2);white-space:nowrap;cursor:pointer}
.ed-chip .ic{width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.ed-chip .ig-ratio-ic{display:inline-block;box-sizing:border-box;border:var(--rand-stark) solid currentColor;border-radius:var(--r-strich);color:var(--zweit);transform:scale(.8)}
.ed-chip.on,.ed-chip[aria-pressed="true"]{border-color:var(--akzent-text);background:var(--akzent-hauch)}
.ed-zoom{display:flex;align-items:center;gap:var(--abstand-5)}
.ed-zoom input{flex:1 1 auto;min-width:0;accent-color:var(--akzent)}
.ed-l{color:var(--zweit);font-size:var(--grad-2)}
.ed-einst,.wd-video-einst{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--abstand-4)}
.wd-video-einst[hidden]{display:none}
.ed-feld{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:start;gap:var(--abstand-2) var(--abstand-3);min-width:0}
.ed-feld>.ed-l{grid-column:1/-1}
.ed-feld[hidden],.ed-feld>[hidden]{display:none}
.ed-wahl{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--abstand-3);box-sizing:border-box;min-width:8.5rem;min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-2);cursor:pointer}
.ed-wahl-pfeil{width:var(--ic-18);height:var(--ic-18);color:var(--zweit);transform:rotate(180deg)}
.ed-wahl[aria-expanded="true"] .ed-wahl-pfeil{transform:none}
.ed-zahl{width:5.5rem;min-height:var(--hoehe-dicht);box-sizing:border-box;margin:0;padding:0 var(--abstand-4);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:16px}
.ed-einheit{color:var(--zweit);font-size:var(--grad-2)}
.ed-aktionen{display:flex;gap:var(--abstand-4)}
.ed-aktionen[hidden],.ed-lauf[hidden],.ed-grund[hidden]{display:none}
.ed-zweit,.ed-haupt{display:inline-flex;flex:1 1 0;align-items:center;justify-content:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);margin:0;padding:0 var(--abstand-6);border-radius:var(--r-s);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);cursor:pointer}
.ed-zweit{border:var(--rand) solid var(--feldrand);background:var(--f1);color:var(--text)}
.ed-haupt{border:var(--rand) solid var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
.ed-haupt[hidden]{display:none}
.ed-zweit .ic,.ed-haupt .ic{width:var(--ic-18);height:var(--ic-18)}
.ed-lauf{display:flex;align-items:center;gap:var(--abstand-5)}
.ed-balken{flex:1 1 auto;height:var(--abstand-3);overflow:hidden;border-radius:var(--r-voll);background:var(--f2)}
.ed-balken>span{display:block;width:0;height:100%;background:var(--akzent);transition:width .2s linear}
.ed-lauf-t{flex:0 1 auto;color:var(--zweit);font-size:var(--grad-2)}
.ed.laeuft .ed-flaeche{pointer-events:none}
.wd-zs{display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:0;border-radius:var(--r-s);background:transparent;color:var(--zweit);cursor:pointer}
.wd-zs .ic,.ed-zs-knopf .ic{width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.wd-zs:hover{background:var(--f3);color:var(--text)}}
.ed-zs-knopf[hidden]{display:none}
.wd-opt{display:flex;flex-direction:column;gap:var(--abstand-5)}
.wd-opt[hidden]{display:none}
.wd-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-3)}
.modal.gen .wd .wf-go:disabled{opacity:.5}
/* Hive-Zeichen in der Großansicht (07.11.2026): rechts in der Zeile der Aktionen, Name, Stufe und Schalter */
.st-zeichen{display:inline-flex;align-items:center;gap:var(--abstand-3);margin-left:auto;font-size:var(--grad-2);font-weight:var(--gewicht-halb);color:var(--text)}
.st-zeichen .pro-pill{flex:none}
.st-zeichen-satz{margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--text)}
/* Großansicht: Hive-Zeichen oben links, Pfeile links und rechts (07.11. später, Henny) */
.st-voll-kopf{justify-content:space-between;align-items:center}
.st-voll-kopf>.st-zeichen{pointer-events:auto;margin:0;min-height:var(--hoehe-tipp);padding:0 var(--abstand-5);box-sizing:border-box;border-radius:var(--r-voll);background:var(--buehne-glas);color:var(--buehne-weiss);-webkit-backdrop-filter:blur(var(--blur-glas));backdrop-filter:blur(var(--blur-glas))}
.st-voll-kopf>.st-zeichen .st-zeichen-n{color:var(--buehne-weiss)}
.st-voll-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);margin:0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-voll);background:var(--buehne-glas);color:var(--buehne-weiss);-webkit-backdrop-filter:blur(var(--blur-glas));backdrop-filter:blur(var(--blur-glas));transform:translateY(-50%);cursor:pointer}
.st-voll-nav .ic{width:var(--ic-24);height:var(--ic-24)}
.st-voll-nav.zurueck{left:calc(var(--abstand-4) + env(safe-area-inset-left,0px))}
.st-voll-nav.vor{right:calc(var(--abstand-4) + env(safe-area-inset-right,0px))}
.st-voll-nav.vor .ic{transform:rotate(180deg)}
@media(hover:none){.st-voll-nav{display:none}}   /* am Handy wischen */
.st-voll.ruhig .st-voll-nav{display:none}
/* Weiterleiten: in Hive weiterverwenden */
.fwd-hive-z{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:var(--r-s);background:var(--f3);color:var(--akzent-text)}
.fwd-hive-z .ic{width:var(--ic-18);height:var(--ic-18)}
/* Studio-Workflows (07.11.2026): Übersicht mit Karten, Formular mit Foto, Wahl, Schritten und Preis, darunter die Läufe */
.modal.gen .wf{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--abstand-7);width:100%;max-width:56rem;margin:0 auto;padding:var(--abstand-6) 0 var(--abstand-10);box-sizing:border-box}   /* seitlich rückt schon das Fenster ein */
.wf-intro{margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
.wf-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:var(--abstand-5)}
.wf-karte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-3);margin:0;padding:var(--abstand-7);box-sizing:border-box;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.wf-karte:hover{background:var(--f3);border-color:var(--feldrand)}}
.wf-vorschau{display:block;width:100%;aspect-ratio:16/10;margin:0 0 var(--abstand-2);border-radius:var(--r-s);overflow:hidden;background:var(--f2)}
.wf-vorschau[hidden]{display:none}
.wf-vorschau video{display:block;width:100%;height:100%;object-fit:cover}
.wf-kette{display:inline-flex;align-items:center;gap:var(--abstand-2);color:var(--akzent-text)}
.wf-kette .ic{width:var(--ic-24);height:var(--ic-24)}
.wf-pfeil{color:var(--zweit);font-size:var(--grad-2)}
.wf-titel{font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-fett)}
.wf-satz{font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
.wf-preis{display:inline-flex;align-items:center;gap:var(--abstand-2);margin-top:var(--abstand-2);font-family:var(--mono);font-size:var(--grad-2);font-weight:var(--gewicht-halb);color:var(--text)}
.wf-mark{width:var(--ic-16);height:var(--ic-16);color:var(--marke)}
.wf-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-4)}
.wf-zurueck{display:inline-flex;align-items:center;gap:var(--abstand-2);min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-3) 0 0;border:0;background:none;color:var(--zweit);font:inherit;font-size:var(--grad-2);cursor:pointer}
.wf-zurueck .ic{width:var(--ic-18);height:var(--ic-18)}
.wf-ueber{width:100%;margin:0;font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-fett);color:var(--text)}
.wf-foto-knopf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--abstand-3);width:100%;min-height:10rem;margin:0;padding:var(--abstand-6);box-sizing:border-box;border:var(--rand-stark) dashed var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--zweit);font:inherit;font-size:var(--grad-3);cursor:pointer;overflow:hidden}
.wf-foto-knopf .ic{width:var(--ic-24);height:var(--ic-24)}
.wf-foto-knopf img{display:block;max-width:100%;max-height:16rem;border-radius:var(--r-s);object-fit:contain}
.wf-foto-wechsel{font-size:var(--grad-2);color:var(--akzent-text)}
.wf-feld{display:flex;flex-direction:column;gap:var(--abstand-3)}
.wf-l{font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.wf-chips{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.wf-chip{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-5);box-sizing:border-box;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);cursor:pointer}
.wf-chip.on,.wf-chip[aria-pressed="true"]{border-color:var(--akzent-text);background:var(--akzent-leise);color:var(--akzent-text)}
@media(hover:hover){.wf-chip:not(.on):not([aria-pressed="true"]):hover{background:var(--f3)}}
.wf-chip .ig-ratio-ic{display:inline-block;box-sizing:border-box;border:var(--rand-stark) solid currentColor;border-radius:var(--r-strich);transform:scale(.8)}
.wf-text{width:100%;box-sizing:border-box;min-height:var(--hoehe-knopf);margin:0;padding:var(--abstand-3) var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:max(16px,var(--grad-3))}
.wf-text::placeholder{color:var(--zweit);opacity:1;font-size:var(--grad-3)}
.wf-ok{margin:0}
.wf-schritte{margin:0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.modal.gen .wf .wf-go{width:100%;margin:0}
.wf-lauf{display:flex;flex-direction:column;gap:var(--abstand-5)}
.wf-lauf:empty{display:none}
.wf-lauf-karte{display:flex;flex-direction:column;gap:var(--abstand-5);padding:var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.wf-lauf-titel{margin:0;font-size:var(--grad-3);font-weight:var(--gewicht-fett);color:var(--text)}
.wf-schritt{display:flex;flex-direction:column;gap:var(--abstand-3)}
.wf-schritt-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-3);font-size:var(--grad-3)}
.wf-schritt-z{display:inline-grid;place-items:center;flex:none;width:var(--ic-20);height:var(--ic-20);color:var(--zweit)}
.wf-schritt-z .ic{width:var(--ic-18);height:var(--ic-18)}
.wf-schritt-z .spin{width:var(--ic-16);height:var(--ic-16)}
.wf-schritt-n{font-weight:var(--gewicht-halb);color:var(--text)}
.wf-schritt-t{flex:1 1 12rem;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.wf-schritt.wartet .wf-schritt-z::before,.wf-schritt.aus .wf-schritt-z::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--linie-2)}
.wf-schritt.fertig .wf-schritt-z{color:var(--akzent-text)}
.wf-schritt.fehler .wf-schritt-z,.wf-schritt.fehler .wf-schritt-t{color:var(--rot)}
.wf-schritt.fehler .wf-schritt-z .ic{transform:rotate(45deg)}
.wf-ergebnisse{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(8rem,45%),1fr));gap:var(--abstand-3)}
.wf-werk{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-2);max-width:16rem}
.wf-ergebnisse .wf-werk{max-width:none}
.wf-bild{display:block;width:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:var(--r-s);overflow:hidden;background:var(--f2);cursor:zoom-in}
.wf-bild img{display:block;width:100%;height:100%;object-fit:cover}
.wf-klein{display:inline-flex;align-items:center;gap:var(--abstand-2);min-height:var(--hoehe-dicht);margin:0;padding:0 var(--abstand-4);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer}
.wf-klein .ic{width:var(--ic-16);height:var(--ic-16)}
@media(hover:hover){.wf-klein:hover{background:var(--f3)}}
/* Galerie (07.11. nachts, Henny): ohne Überschrift dicht unter den Reitern; darüber Spalten 1 bis 4 und das Auge (Modell und Zeit aus) */
.modal.gen .ig-einst:empty{display:none}
.modal.gen .ig-scroll{padding-top:var(--abstand-4)}
.modal.gen .ig-werk{gap:var(--abstand-4)}
.modal.gen .st-ansicht{display:inline-flex;align-items:center;gap:var(--abstand-3)}
.modal.gen .st-spalten-knopf,.modal.gen .st-auge{display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f1);color:var(--zweit);cursor:pointer}
.modal.gen .st-spalten-knopf .ic,.modal.gen .st-auge .ic{width:var(--ic-18);height:var(--ic-18)}
.modal.gen .st-spalten-knopf[aria-expanded="true"],.modal.gen .st-auge[aria-pressed="true"]{color:var(--akzent-text)}
@media(hover:hover){.modal.gen .st-spalten-knopf:hover,.modal.gen .st-auge:hover{background:var(--f3);color:var(--text)}}
.modal.gen .ig-grid.st-raster{grid-template-columns:repeat(var(--st-spalten,2),minmax(0,1fr));width:100%;max-width:calc(var(--st-spalten,2) * 34rem);margin-inline:auto}
.modal.gen .ig-grid.st-raster[data-spalten="1"] .st-kachel>.ig-bild{aspect-ratio:auto}
.modal.gen .ig-grid.st-raster[data-spalten="1"] .st-kachel>.ig-bild>:is(img,.ig-video){position:relative;inset:auto;display:block;height:auto;max-height:85dvh;object-fit:contain}
.modal.gen .st-kachel{container-type:inline-size}
.modal.gen .st-zeit,.st-abbild .st-zeit{position:absolute;z-index:1;right:var(--abstand-4);bottom:var(--abstand-4);display:inline-flex;align-items:center;gap:var(--abstand-2);max-width:calc(100% - 2 * var(--abstand-4));min-height:var(--hoehe-mini);padding:0 var(--abstand-4);box-sizing:border-box;border-radius:var(--r-voll);background:var(--pille);color:var(--buehne-weiss);font-family:var(--mono);font-size:var(--grad-1);line-height:1;white-space:nowrap;overflow:hidden;pointer-events:none}
@container (max-width:8.5rem){.modal.gen .st-zeit-u{display:none}}
@container (max-width:5.5rem){.modal.gen .st-zeit,.modal.gen .st-kachel .ig-badge{display:none}}
.modal.gen .st-raster.st-ruhig :is(.ig-badge,.st-zeit){display:none}
@container (max-width:12rem){.modal.gen .st-kachel .st-over{display:none}}   /* kleine Kacheln: Aktionen nur im Menü (langer Druck, Rechtsklick) */
.modal.gen .st-kachel.st-gehoben{visibility:hidden}
/* Menü nach langem Drücken auf eine Kachel (07.11. nachts, wie im Chat): Abdunklung über dem Studio, das Bild hervorgehoben an seiner
   Stelle, darunter das Menü (.nm-menue und .nm-eintrag aus dem Menü zur Nachricht) */
.st-menue-ov{position:fixed;inset:0;z-index:calc(var(--ebene-dialog) + 20);background:var(--scrim);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.st-menue{position:fixed;inset:0;pointer-events:none}
.st-menue>*{pointer-events:auto}
.st-menue.wartet>*{pointer-events:none}
.st-menue:focus{outline:none}
/* Das Abbild steht genau auf der Kachel und hebt sich nur leicht an (07.11., Henny: kein Sprung, kein gelber Rahmen) */
.st-abbild{position:fixed;overflow:hidden;background:var(--f2);box-shadow:var(--schatten-2);transform:translateY(-3px) scale(1.02);animation:st-heben var(--dauer) var(--kurve-hinein)}
@keyframes st-heben{from{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.st-abbild{transform:none;animation:none}}
.st-abbild>img,.st-abbild>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.st-abbild>.ig-badge,.st-abbild>.st-zeit,.st-abbild>.st-play{z-index:1}
.st-menue>.nm-menue{position:fixed;width:auto;min-width:min(15rem,calc(100vw - 24px));max-width:calc(100vw - 24px);overflow-y:auto;overscroll-behavior:contain;animation:ebene-auf var(--dauer-auf) var(--kurve-hinein)}
/* Diktat im Prompt (07.11. nachts): Leiste über dem Feld wie die Sprachmemo im Chat, mit den Wörtern schon während man spricht */
.ig-pf:has(>.ig-diktat){position:relative}
.ig-diktat{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:var(--abstand-3);padding:var(--abstand-3) var(--abstand-3) var(--abstand-4) var(--abstand-5);box-sizing:border-box;border-radius:inherit;background:var(--f1);overflow:hidden}
.ig-diktat[hidden]{display:none}
.ig-diktat-kopf{display:flex;align-items:center;gap:var(--abstand-4);min-height:var(--hoehe-dicht)}
.ig-diktat-punkt{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--rot);animation:diktat-puls 1.2s ease-in-out infinite}
@keyframes diktat-puls{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.ig-diktat-punkt{animation:none}}
.ig-diktat.schreibt .ig-diktat-punkt{background:var(--zweit);animation:none}
.ig-diktat-zeit{flex:none;font-family:var(--mono);font-size:var(--grad-2);color:var(--text);font-variant-numeric:tabular-nums}
.ig-diktat-pegel{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:1.5rem;min-width:0;overflow:hidden}
.ig-diktat-pegel i{flex:none;width:3px;height:12%;border-radius:2px;background:var(--zweit);transition:height .08s linear}
.ig-diktat-weg,.ig-diktat-fertig{flex:none;display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f2);color:var(--zweit);cursor:pointer}
.ig-diktat-fertig{border-color:transparent;background:var(--akzent);color:var(--auf-akzent)}
.ig-diktat-weg .ic,.ig-diktat-fertig .ic{width:var(--ic-18);height:var(--ic-18)}
.ig-diktat-text{flex:1 1 auto;min-height:0;margin:0;overflow-y:auto;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.ig-diktat-text .leise{color:var(--zweit)}
.ig-diktat-preis{flex:none;font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit);white-space:nowrap}
/* Prompt-Feld (07.11. nachts, Henny): kurzer Platzhalter, kleiner; am Handy bleibt der Text auf 16 px (sonst zoomt iOS beim Tippen) */
.modal.gen .ig-pf .ig-prompt::placeholder{font-size:var(--grad-3)}
@media(min-width:760px) and (pointer:fine){.modal.gen .ig-pf.ig-pf-dock .ig-prompt{font-size:var(--grad-3)}}
/* Umschalter (07.11. nachts, Henny: "Monatlich" bei den Stufen): die gewählte Fläche folgt den runden Ecken, statt an ihnen
   abgeschnitten zu wirken */
.plans .plans-int-b.on,:is(.darstellung,.ich-bereich) .segment>button[aria-checked="true"]{border-radius:calc(var(--r-s) - var(--rand))}
/* Bildansicht im Vollbild (07.11. nachts, Henny: "Wenn man in der Lightbox auf das Bild klickt, soll das Bild fullscreen einnehmen") */
.lb-ov.lb-voll{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#000}
.lb-ov.lb-voll .lb-img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:0;box-shadow:none}
/* Computer: Galerie oben über die ganze Breite, der Dock unten mittig wie eine Eingabeleiste */
@media(min-width:760px){
  .modal.gen .ig-split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"einst" "werk" "dock"}
  .modal.gen .ig-einst{max-height:32dvh;border-right:0;border-bottom:var(--rand) solid var(--linie)}
  .modal.gen .ig-einst:empty{display:none}
  .modal.gen .ig-werk{padding:var(--abstand-4) 1rem var(--abstand-10)}   /* 07.11. nachts: dicht unter den Reitern */
  .modal.gen .ig-dock{justify-self:center;width:min(100%,48rem);box-sizing:border-box;border-right:0;padding:var(--abstand-6) 1rem}
  /* 07.11. (Henny): die Galerie läuft unter dem Dock durch, links und rechts bleiben die Bilder sichtbar; der Dock ist eine Karte */
  .modal.gen .ig-split .ig-werk{grid-row:2 / 4;grid-column:1;padding-bottom:calc(var(--dock-hoch,12rem) + var(--abstand-8))}
  .modal.gen .ig-split>.ig-dock{grid-row:3;grid-column:1;z-index:2;align-self:end;margin-bottom:var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-blatt);background:var(--f1);box-shadow:var(--schatten-2)}
  .modal.gen .ig-dock-chips{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--abstand-6)}
}
@media(max-width:759px){
  .modal.gen .ig-dock-chips{flex-wrap:wrap;overflow:visible;row-gap:var(--abstand-3);-webkit-mask-image:none;mask-image:none}
  .modal.gen .ig-dock-chips>.ig-field+.ig-field{padding-left:var(--abstand-4)}
  .modal.gen .ig-field:has(>.ig-kwahl)>:is(.ig-ratios,.ig-provs,.ig-counts){display:none}
  .modal.gen .ig-kwahl{display:block;min-height:var(--hoehe-dicht);max-width:9.5rem;margin:0;padding:0 var(--abstand-6) 0 var(--abstand-4);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:16px;font-weight:var(--gewicht-halb)}
}
.meme-galerie{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}
.meme-galerie:empty{display:none}
.meme-canvas[hidden]{display:none}
.meme-vorschlag{align-self:flex-start;margin-top:var(--abstand-3)}
.meme .ig-field,.ig .ig-field:has(>.ig-sub){display:flex;flex-direction:column;gap:var(--abstand-3)}
.modal.gen .meme .ig-acts{display:flex;align-items:center;gap:var(--abstand-4);margin:0}
.modal.gen .meme .ig-acts .send{flex:1 1 auto}
.modal.gen .musik-text{min-height:calc(6em * var(--zh-text))}
.meme-mini{width:56px;height:56px;padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);overflow:hidden;background:var(--f2);cursor:pointer}
.meme-mini img{width:100%;height:100%;object-fit:cover;display:block}
.meme-vorschau{display:grid;place-items:center;min-height:10rem;background:var(--f2);border:var(--rand) dashed var(--linie-2);border-radius:var(--r-m);padding:var(--abstand-4);text-align:center}
.meme-vorschau:has(.meme-canvas:not([hidden])){border-style:solid;background:transparent}
.meme-canvas{max-width:100%;max-height:min(60vh,36rem);height:auto;display:block;border-radius:var(--r-s)}
.meme-text{box-sizing:border-box;width:100%;min-height:var(--hoehe-feld);background:var(--f1);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);color:var(--text);padding:0 var(--abstand-6);font:inherit;font-size:var(--grad-4)}
.musik-karte{display:flex;flex-direction:column;gap:var(--abstand-2);position:relative;padding:var(--abstand-4)}
.musik-karte audio{width:100%}
.musik-karte .ig-badge{position:static;align-self:flex-start}
.pin-sperre{position:fixed;inset:0;z-index:950;display:grid;place-items:center;box-sizing:border-box;padding:calc(var(--abstand-7) + env(safe-area-inset-top)) var(--abstand-7) calc(var(--abstand-7) + env(safe-area-inset-bottom));background:var(--grund);color:var(--text)}
.pin-box,.pin-neu{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-4);width:min(20rem,100%);text-align:center}
.pin-logo{width:var(--hoehe-kachel);height:var(--hoehe-kachel);border-radius:var(--r-l)}
.pin-titel{margin:0;font-size:var(--grad-6)}
.pin-feld{box-sizing:border-box;width:100%;min-height:var(--hoehe-feld);font:inherit;font-size:1.5rem;letter-spacing:.35em;text-align:center;background:var(--f1);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);color:var(--text)}
.pin-fehler{margin:0;color:var(--rot)}
.row.gesperrt-zeile .av-schloss{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--f2);flex:none}
.ein-zeile+.ein-zeile{border-top:var(--rand) solid var(--linie)}
.ein-text{display:flex;flex-direction:column;gap:var(--abstand-1);flex:1 1 12em;min-width:0}
.ein-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb);overflow-wrap:anywhere}
.ein-satz{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);overflow-wrap:anywhere}
.ein-satz[hidden]{display:none}
.ein-zeile>.tgl{flex:none}
.ein-zeile>.ein-knopf,.ein-zeile>.pa-btn{flex:0 0 auto;min-width:0}
.ein-zeile>.pa-btn .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
.ein-zeile-segment>.segment{flex:0 1 auto}
.ein-zeile-segment>.segment>button{min-width:var(--hoehe-segment)} /* Tempo „1ד ist schmaler als die Trefferfläche 44 bzw. 36 */
.ein-zeile-doppel>.ein-wahl{flex:1 1 10em}
.ein-wahl{box-sizing:border-box;flex:0 1 auto;max-width:100%;min-height:var(--hoehe-feld);padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-4);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.ein-wahl:hover{background:var(--f3)}}
.ein-wahl:focus-visible{border-color:var(--akzent-text)}
@media(min-width:760px){.ein-name{font-size:var(--grad-3);line-height:var(--grad-3-zh)}.ein-satz{font-size:var(--grad-1);line-height:var(--grad-1-zh)}.ein-wahl{font-size:var(--grad-3)}}
.wahl-liste{display:flex;flex-direction:column}
.wahl-zeile{display:flex;align-items:center;gap:var(--abstand-6);box-sizing:border-box;width:100%;min-height:var(--zeile-tipp);padding:var(--abstand-4) var(--abstand-7);border:0;border-radius:0;background:none;color:var(--text);font:inherit;font-size:var(--grad-4);line-height:var(--grad-4-zh);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.wahl-zeile+.wahl-zeile{border-top:var(--rand) solid var(--linie)}
.wahl-zeile:first-child{border-radius:var(--r-m) var(--r-m) 0 0}
.wahl-zeile:last-child{border-radius:0 0 var(--r-m) var(--r-m)}
.wahl-zeile .wahl-name{flex:1;min-width:0}
.wahl-zeile .ic{flex:none;width:var(--ic-20);height:var(--ic-20);color:var(--akzent-text);opacity:0}
@media(hover:hover){.wahl-zeile:hover{background:var(--f3)}}
.wahl-zeile:active{background:var(--linie-2)}
.wahl-zeile[aria-checked="true"]{color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.wahl-zeile[aria-checked="true"]:active{background:var(--f3)}
.wahl-zeile[aria-checked="true"] .ic{opacity:1}
.wahl-zeile:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
@media(min-width:760px){.wahl-zeile{font-size:var(--grad-3);line-height:var(--grad-3-zh)}}
.ich-bereich>.notiz{margin-top:calc(-1 * var(--abstand-6))}
/* Privatsphäre und Sicherheit (Scheibe 11, bauplan 3.18): Personen unter „Blockiert“ als Einstellungszeile (C36) mit rundem Avatar
   in ihrer Farbe (C5 wie in den Listen, Größe aus avatar()) vor Name und Benutzername; Hinweiszeilen („Lädt …“, „Niemand
   blockiert.“) in Zweittext ohne Gewicht; Zustand von Schlüssel und Backup als Plakette C7 (.e2e-pill ok/warn) hinter dem Namen. */
.ein-person>.av{flex:none;border:0;background:var(--av-bg,var(--f3));color:var(--av-fg,var(--text));font-weight:var(--gewicht-halb)}
.ein-person>.ein-text{flex-basis:8em}
.ein-person>.av .av-kurz{color:inherit;font-weight:var(--gewicht-halb);font-size:1em}
.ein-person .av-blau{--av-bg:var(--av-blau-bg);--av-fg:var(--av-blau-fg)}
.ein-person .av-gruen{--av-bg:var(--av-gruen-bg);--av-fg:var(--av-gruen-fg)}
.ein-person .av-lila{--av-bg:var(--av-lila-bg);--av-fg:var(--av-lila-fg)}
.ein-person .av-rot{--av-bg:var(--av-rot-bg);--av-fg:var(--av-rot-fg)}
.ein-person .av-teal{--av-bg:var(--av-teal-bg);--av-fg:var(--av-teal-fg)}
.ein-person .av-sand{--av-bg:var(--av-sand-bg);--av-fg:var(--av-sand-fg)}
.ein-person .av-grau{--av-bg:var(--av-grau-bg);--av-fg:var(--av-grau-fg)}
.ein-leer .ein-name{color:var(--zweit);font-weight:inherit}
.ein-name>.e2e-pill{margin-inline-start:var(--abstand-3);vertical-align:middle}
.ein-name>.e2e-pill[hidden]{display:none}
/* Hauptknopf .cs-save und Abbrechen .cs-cancel (Scheibe 3b-2, B1): Akzentfläche mit --akzent-rand und --auf-akzent bzw. Rand
   --feldrand; Maße wie .arch-go. „Speichert …“ und „✓“ setzt die App als Text (data-busy-prev gibt den Inhalt zurück), gesperrt
   die neutrale Form. In einer Einstellungszeile (.set-row: Schreiben, Zustimmen, Einstellen) ist er ein Knopf mit Rand, damit
   nicht drei Hauptknöpfe untereinander stehen. */
.cs-acts{display:flex;flex-wrap:wrap;gap:var(--abstand-4);margin-top:var(--abstand-8)}
.cs-save,.cs-cancel{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);flex:1 1 auto;box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.cs-save,.cs-cancel{padding-left:var(--abstand-7);padding-right:var(--abstand-7);font-size:var(--grad-2)}}
.cs-cancel,.set-row .cs-save{flex:1 1 auto;border-color:var(--feldrand);background:transparent;color:var(--text)}
.set-row .cs-save{flex:none}
@media(hover:hover){.cs-save:hover{background:var(--akzent-hover)}.cs-cancel:hover,.set-row .cs-save:hover{background:var(--f3)}}
.cs-save:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.cs-cancel:active,.set-row .cs-save:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* „Ja, Backup löschen“ (.cs-save.e2e-danger-btn im Secret-Chat-Backup) ist der gefüllte Gefahrknopf B2: Fläche --rot, Schrift
   --auf-rot, Hover und Gedrückt rot mit Rand --auf-rot wie .arch-go.danger; ohne diese Regeln machten .cs-save:hover und :active
   (0,2,0) ihn honigfarben, die alte Regel .e2e-danger-btn (0,1,0, außerhalb der Bereiche) bleibt stehen. */
.cs-save.e2e-danger-btn{border-color:var(--rot);background:var(--rot);color:var(--auf-rot)}
@media(hover:hover){.cs-save.e2e-danger-btn:hover{background:var(--rot);border-color:var(--auf-rot)}}
.cs-save.e2e-danger-btn:active{background:var(--rot);border-color:var(--auf-rot)}
.cs-save:disabled,.cs-cancel:disabled,.cs-save.e2e-danger-btn:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed;transform:none}
/* ── Profil-Editor (mein Profil) ────────────────────────────────────────────── */
.prof-edit{display:flex;flex-direction:column;gap:.7rem;margin-top:.6rem}
.prof-edit>.add-hint{padding:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)} /* Scheibe 3b-2: Hinweis in der Ebene „E-Mail-Adresse ändern“ ohne den Einzug der Listen-Hinweise */
.prof-edit .add-hint.err{color:var(--rot)}
/* Profil als Formular (Scheibe 3b-2, B7 und B11): sichtbares Label --grad-3 halbfett über dem Feld, Feld --hoehe-feld mit Fläche
   1, Rand --feldrand, Radius --r-m, Schrift --grad-5 (ab 760 px --grad-3; 16 px gegen den Fokus-Zoom regelt die Feldregel am
   Ende); Fokus: Ring plus Rand in Akzent-Text; Hinweis darunter --grad-1 in Zweittext. */
.pe-field{display:flex;flex-direction:column;gap:var(--abstand-3)}
.pe-l{font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb);color:var(--text)}
.pe-field input,.pe-field textarea{box-sizing:border-box;width:100%;min-height:var(--hoehe-feld);padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-knapp);transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.pe-field input,.pe-field textarea{padding:0 var(--abstand-6);font-size:var(--grad-3)}}
.pe-field input::placeholder,.pe-field textarea::placeholder{color:var(--zweit);opacity:1}
@media(hover:hover){.pe-field input:hover,.pe-field textarea:hover{background:var(--f3)}}
.pe-field input:focus-visible,.pe-field textarea:focus-visible{border-color:var(--akzent-text);background:var(--f1)}
.pe-field textarea{min-height:4.5rem;padding-top:var(--abstand-5);padding-bottom:var(--abstand-5);resize:vertical}
.pe-hint{font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
/* Profil-Ausbau (Batch 05.07): Identitaet-Inline-Edit · Sichtbarkeits-Toggles · Socials · Billing · Sticky-Footer. */
.prof-id{display:flex;flex-direction:column;gap:.6rem;margin:.2rem 0 .4rem}
.pe-id .pe-l{display:flex;align-items:center;gap:.35rem}
.pe-id .pe-l .ic{width:.85rem;height:.85rem;color:var(--zweit)}
.pe-prefixed{display:flex;align-items:center;box-sizing:border-box;min-height:var(--hoehe-feld);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);overflow:hidden;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
.pe-prefixed .pe-prefix{padding:0 0 0 var(--abstand-7);color:var(--zweit);font-size:var(--grad-5)}
@media(min-width:760px){.pe-prefixed .pe-prefix{padding-left:var(--abstand-6);font-size:var(--grad-3)}}
.pe-field .pe-prefixed input{min-height:calc(var(--hoehe-feld) - 2 * var(--rand));padding-left:var(--abstand-2);border:0;border-radius:0;background:none}
@media(hover:hover){.pe-prefixed:hover{background:var(--f3)}}
.pe-prefixed:focus-within{border-color:var(--akzent-text);background:var(--f1)}
@supports selector(:has(*)){.pe-field .pe-prefixed input:focus-visible{outline:none}}
.pe-prefixed:has(input:focus-visible){outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:var(--fokus-abstand)}
.pe-l-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.vis-toggle{background:none;border:0;cursor:pointer;color:var(--akzent);display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.4rem;padding:0}
@media(hover:hover){.vis-toggle:hover{background:var(--f3)}}
.vis-toggle.off{color:var(--zweit)}
.vis-toggle .ic{width:1.15rem;height:1.15rem}
.prof-socials{display:flex;flex-direction:column;gap:.45rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--linie-2)}
.soc-list{display:flex;flex-direction:column;gap:.4rem}
.soc-row{display:flex;gap:.4rem;align-items:center}
.soc-row .soc-title{flex:0 0 38%;min-width:0}
.soc-row .soc-url{flex:1;min-width:0}
.soc-row input{box-sizing:border-box;min-height:var(--hoehe-feld);padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5)}
.soc-rm{flex:0 0 auto;background:none;border:0;color:var(--zweit);cursor:pointer;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.4rem}
@media(hover:hover){.soc-rm:hover{color:var(--rot);background:var(--f3)}}
.soc-rm .ic{width:1.05rem;height:1.05rem}
.soc-add{display:inline-flex;align-items:center;gap:.15rem;align-self:flex-start}
.soc-add .ic{width:.95rem;height:.95rem}
/* Fester Fuß des Profils (Scheibe 3b-2): Fläche des Blatts, Linie oben, Safe Area unten (gedeckelt wie das Blatt); Speichern als
   Hauptknopf, Abmelden neutral daneben; der Fehlersatz (D20) darüber in --rot. */
.prof-foot{position:sticky;bottom:-1rem;z-index:var(--ebene-klebt);display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4);margin:var(--abstand-8) -1rem -1rem;padding:var(--abstand-6) 1rem calc(var(--abstand-6) + min(env(safe-area-inset-bottom,0px),2.2rem));background:var(--schweb);border-top:var(--rand) solid var(--linie-2)}
.prof-foot .add-hint.err{color:var(--rot);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.prof-foot .cs-save{flex:1 1 8rem;margin:0}
.prof-foot .set-logout{flex:0 0 auto;width:auto;margin:0}
.prof-soc-list{display:flex;flex-direction:column;gap:.35rem}
.prof-soc-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--akzent);text-decoration:none}
.prof-soc-link .ic{width:.9rem;height:.9rem;flex:0 0 auto}
/* ── Profil-Button unten rechts (gespiegelt zum Apps-Menü) ──────────────────── */
.foot-prof{background:none;border:0;padding:0;cursor:pointer;border-radius:50%;display:flex;line-height:0}
@media(hover:hover){.foot-prof:hover{outline:var(--rand-stark) solid var(--linie-2);outline-offset:var(--rand)}} /* Scheibe 5a-2: Hover nur bei Maus (4.6) */
/* ── Gruppen ─────────────────────────────────────────────────────────────────── */
.grp-av{display:grid;place-items:center;background:var(--f2);color:var(--zweit);border-radius:50%;flex:0 0 auto}
.selbst-av{display:grid;place-items:center;background:var(--f2);color:var(--marke);border-radius:50%;flex:0 0 auto}
.grp-sender{font-size:.72rem;font-weight:700;color:var(--akzent);margin-bottom:.12rem}
.bubble.mine .grp-sender{color:color-mix(in srgb,var(--text) 88%,transparent)}
/* Gruppen-Dialoge (Scheibe 3b-2): „Neue Gruppe“ und „Mitglied hinzufügen“ als Knopf B1 mit Rand, Gruppenname als Feld B7,
   Mitglieder als Zeilen B18 mit Avatar (die ganze Zeile ist das Ziel, Fokusring innen, weil die Liste rollt), „Entfernen“ als
   kleiner Gefahrknopf B2 (roter Text, Trefferfläche --treffer-min). Avatare in den Dialogen in der neutralen D-Form (Fläche 3,
   Initiale in --text), wie 1a sie in den Listen zeigt, ohne Farbklassen. */
.new-group-btn{display:flex;align-items:center;justify-content:center;gap:var(--abstand-4);box-sizing:border-box;width:calc(100% - 1.4rem);min-height:var(--hoehe-knopf);margin:.5rem .7rem;padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.grp-modal .new-group-btn{width:100%;margin:var(--abstand-4) 0}
.new-group-btn:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.grp-title-in{box-sizing:border-box;width:100%;min-height:var(--hoehe-feld);margin-bottom:var(--abstand-3);padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--zh-knapp);transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.grp-title-in{padding:0 var(--abstand-6);font-size:var(--grad-3)}}
.grp-title-in::placeholder{color:var(--zweit);opacity:1}
.grp-title-in:focus-visible{border-color:var(--akzent-text);background:var(--f1)}
.grp-pick-list{display:flex;flex-direction:column;gap:var(--abstand-1);max-height:18rem;overflow-y:auto}
.grp-pick,.grp-pick-btn{display:flex;flex:none;align-items:center;gap:var(--abstand-6);box-sizing:border-box;width:100%;min-height:var(--zeile-tipp);padding:var(--abstand-3) var(--abstand-4);border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.grp-pick:hover,.grp-pick-btn:hover,.new-group-btn:hover{background:var(--f3)}}
.grp-pick:active,.grp-pick-btn:active{background:var(--linie-2)}
.grp-pick:has(input:checked){background:var(--akzent-leise)}
.grp-pick:has(input:focus-visible){outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:calc(-1 * var(--fokus-breite))}
@supports selector(:has(*)){.grp-pick input:focus-visible{outline:none}}
.grp-pick-btn:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
:is(.fwd-row,.arch-row,.grp-pick,.grp-pick-btn,.grp-mrow,.prof-top) .av{border:0;background:var(--f3);color:var(--text);font-weight:var(--gewicht-halb)}
:is(.fwd-row,.arch-row,.grp-pick,.grp-pick-btn,.grp-mrow,.prof-top) .av .av-kurz{color:inherit;font-weight:var(--gewicht-halb)}
:is(.fwd-row,.arch-row,.grp-pick,.grp-pick-btn,.grp-mrow) .grp-av{background:var(--f3);color:var(--text)}
.grp-create .add-hint,.grp-modal .add-hint{padding:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
.grp-create .add-hint.err,.grp-modal .add-hint.err{color:var(--rot)}
.gp-meta{min-width:0;flex:1}
.gp-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-sub{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.gp-owner{font-size:var(--grad-1);color:var(--zweit);font-weight:var(--gewicht-halb)}
.grp-members{display:flex;flex-direction:column;gap:var(--abstand-1);margin:var(--abstand-4) 0}
.grp-mrow{display:flex;align-items:center;gap:var(--abstand-6);min-height:var(--zeile-tipp);padding:var(--abstand-2) var(--abstand-1)}
.gp-remove{position:relative;flex:0 0 auto;min-height:var(--hoehe-dicht);margin-left:auto;padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:none;color:var(--rot);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
.gp-remove::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.gp-remove:active{background:var(--rot-leise);border-color:var(--rot)}
@media(hover:hover){.gp-remove:hover{background:var(--rot-leise);border-color:var(--rot)}}
/* ── Calls (WebRTC Slice 1) ──────────────────────────────────────────────────── */
/* Scheibe 4a (E1 bis E10, Entscheidung 7): heutige Anordnung samt Ausblenden-Pfeil, Aussehen D, Bühne immer dunkel (.buehne an
   .call-ov, .call-kopf, .call-unten, .call-min und an den Dialogen aus dem Anruf). Die Ebenen bleiben absolut (79 großes Bild,
   80 Rahmen, 81 kleines Bild, 82 seine Knöpfe, 83 Mini-Karte, 84 Kopf und Leiste; bauplan 4.6 Nr. 7). Hover nur bei Maus, Fokus
   auf der Bühne weiß mit dunklem Saum. Die Lage des kleinen Bildes steht im Code (kleinCss), ebenso die der Mini-Karte. */
.head-call svg{color:var(--gruen)} /* Anruf-Button grün */
/* Rahmen: vor dem Verbinden und ohne Bild 92 % Bühne mit Unschärfe über der App. Die Karte steht mittig im freien Raum zwischen
   Kopf und Leiste (Polster in deren Höhe, auch Safe Area links und rechts); ist sie höher, beginnt sie oben und der Rahmen rollt. */
.call-ov{position:fixed;inset:0;z-index:var(--ebene-anruf);display:flex;flex-direction:column;align-items:center;box-sizing:border-box;
  padding:calc(var(--hoehe-kopf) + var(--abstand-20) + env(safe-area-inset-top,0px)) calc(var(--abstand-8) + env(safe-area-inset-right,0px)) calc(2 * var(--hoehe-rk) + var(--hoehe-mini) + 2 * var(--abstand-20) + env(safe-area-inset-bottom,0px)) calc(var(--abstand-8) + env(safe-area-inset-left,0px));
  overflow-x:hidden;overflow-y:auto;background:var(--buehne);background:color-mix(in srgb,var(--buehne) 92%,transparent);backdrop-filter:blur(var(--blur-glas));color:var(--buehne-text)}
.call-ov > .call-card{flex:none;margin:auto 0}
/* Im Videoanruf liegen Kopf und Leiste AUSSERHALB des Overlays (sie muessen
   ueber dem kleinen Bild liegen). Hier bleibt nur der Hintergrund. */
.call-ov.video{background:none;backdrop-filter:none;justify-content:center;pointer-events:none}
.call-ov.video > *{pointer-events:auto}
/* Persistente Video-Elemente (außerhalb des Overlays → kein Wiedergabe-Abriss beim Re-Render). Remote: echte Seitenverhältnisse
   (contain) mit Bühnenbalken; „Bildschirm füllen“ und Drehen setzt applyRemoteVideo() inline. */
#call-remote{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;background:var(--buehne);z-index:79;display:none}
/* Lage und Groesse des kleinen Bildes stehen im Code (es laesst sich schieben). */
#call-local{position:fixed;z-index:81;display:none;background:var(--buehne-2)}
/* Kopf (E1): eine Zeile mit drei Plätzen (44 / Mitte / 44): links Minimieren, Mitte Name und Dauer, rechts Auflegen; darüber die
   Schloss-Pille, darunter die Hinweise. Verlauf in --pille bis unter die letzte Zeile, Schrift mit Schatten. Er hängt am Dokument
   (über dem kleinen Bild) und fängt nur an seinen Knöpfen Tipps ab. */
.call-kopf{position:fixed;left:0;right:0;top:0;z-index:84;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:var(--abstand-4);box-sizing:border-box;
  padding:calc(var(--abstand-5) + env(safe-area-inset-top,0px)) calc(var(--abstand-4) + env(safe-area-inset-right,0px)) var(--abstand-14) calc(var(--abstand-4) + env(safe-area-inset-left,0px));
  background:linear-gradient(to bottom,var(--pille) calc(100% - var(--abstand-14)),transparent);color:var(--buehne-text);text-shadow:var(--schatten-bild)}
.call-kopf-pille{display:flex;justify-content:center;max-width:100%;pointer-events:auto}
.call-kopf-reihe{display:grid;grid-template-columns:var(--hoehe-tipp) minmax(0,1fr) var(--hoehe-tipp);align-items:center;justify-items:center;gap:var(--abstand-4);width:100%;min-height:var(--hoehe-tipp)}
/* Feste Breite links und rechts, damit die Mitte wirklich die Mitte ist, auch wenn ein Knopf gerade fehlt (beim Klingeln). */
.call-kopf-seite{display:flex;align-items:center;justify-content:center;pointer-events:auto}
.call-kopf-mitte{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--abstand-1);text-align:center}
.call-kopf-hinweise{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-6);max-width:100%}
.call-vname{max-width:100%;font-size:var(--grad-6);line-height:var(--grad-6-zh-eng);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-knapp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-vtimer{font-family:var(--mono);font-size:var(--grad-2);line-height:var(--grad-2-zh-eng);color:var(--buehne-text);font-variant-numeric:tabular-nums}
.call-schloss-zeile{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-3);width:100%;padding:0 var(--abstand-8);box-sizing:border-box}
/* Leiste (E3): zwei feste Reihen (5 und 4), je für sich mittig, darunter die Kapsel zum Ausblenden. Sie klebt unten (Pfeil
   10 über der Kante, Safe Area dazu), zugeklappt an derselben Stelle. Sie fängt Tipps ab wie bisher (auch in den Lücken): liegt das
   kleine Bild darunter, tauschte ein Tipp zwischen zwei Knöpfen sonst die Bilder. */
.call-unten{position:fixed;left:0;right:0;bottom:0;z-index:84;display:flex;flex-direction:column;align-items:center;gap:var(--abstand-4);box-sizing:border-box;
  padding:var(--abstand-20) calc(var(--abstand-4) + env(safe-area-inset-right,0px)) calc(var(--abstand-5) + env(safe-area-inset-bottom,0px)) calc(var(--abstand-4) + env(safe-area-inset-left,0px));color:var(--buehne-text)}
/* Über dem Bild: Verlauf, der --glas-dunkel schon über der ersten Reihe erreicht. */
.call-unten.ueberBild{background:linear-gradient(to bottom,transparent,var(--glas-dunkel) 20%,var(--scrim))}
/* ZWEI feste Reihen, fuenf und vier, jeder Knopf mit fester Groesse: so steht jeder Knopf in jedem Zustand auf demselben Punkt. */
.call-acts{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-4);width:100%}
.call-reihe{display:flex;justify-content:center;align-items:center;gap:var(--abstand-6)}
@media(min-width:760px){.call-reihe{gap:var(--abstand-7)}}
/* Annehmen und Ablehnen beim Klingeln: groß (64, Desktop 68), mittig mit Abstand 40 (vorher linksbündig). */
.call-acts.klingelt{flex-direction:row;justify-content:center;gap:var(--abstand-20)}
.call-acts.klingelt .call-fab{width:calc(var(--hoehe-rk) + var(--abstand-8));height:calc(var(--hoehe-rk) + var(--abstand-8))}
/* Zugeklappt: kein Verlauf, nur die Kapsel an derselben Stelle (mit dunkler Unterlage, das Bild liegt dann frei darunter). */
.call-unten.zu{background:none;padding-top:0}
/* Die beiden Knoepfe auf dem kleinen Bild (E6, 28 mit Trefferfläche 44). Der Rahmen selbst faengt nichts ab, sonst koennte man das
   Bild nicht mehr schieben; nur die Knoepfe tun es. Sie sitzen in den Ecken des Bildes statt halb darüber (System E6): das Bild liegt
   heute 8 statt 22 vom Rand (kleinGrenzen, Startlage W4a.1), so bleibt ihre Trefferfläche ganz im Bildschirm. */
.pip-ui{display:none}
.pip-knopf{position:absolute;width:var(--hoehe-klein);height:var(--hoehe-klein);border-radius:var(--r-voll);border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;pointer-events:auto;background:var(--pille);color:var(--buehne-weiss);
  backdrop-filter:blur(var(--blur-glas));transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.pip-knopf::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.pip-knopf svg{width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.pip-knopf:hover{background:color-mix(in srgb,var(--pille),var(--buehne-weiss) 14%)}}
.pip-knopf:active{background:color-mix(in srgb,var(--pille),var(--buehne-weiss) 24%);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Wegschieben: mittig an der Aussenkante, der Pfeil zeigt dorthin, wo das Bild gleich hinwandert. */
.pip-weg{left:0;top:50%;margin-top:calc(-1 * var(--hoehe-klein) / 2)}
.pip-weg.nachRechts{left:auto;right:0}
.pip-weg.nachRechts svg{transform:rotate(180deg)}
/* Groesse ziehen: obere rechte Ecke. */
.pip-griff{right:0;top:0;cursor:nwse-resize;touch-action:none}
/* Die Lasche am Bildschirmrand, wenn das kleine Bild weggeschoben ist (26 × 44, Radius nach innen im Code, Trefferfläche nach innen). */
.pip-tab{position:relative;align-items:center;justify-content:center;box-sizing:border-box;width:calc(var(--hoehe-klein) - var(--abstand-1));height:var(--hoehe-tipp);border:0;padding:0;
  background:var(--glas-dunkel);color:var(--buehne-weiss);cursor:pointer;backdrop-filter:blur(var(--blur-glas));transition:background-color var(--dauer) var(--kurve)}
.pip-tab::after{content:"";position:absolute;top:0;right:0;width:var(--treffer-min);height:100%}
.pip-tab.nachRechts::after{right:auto;left:0}
.pip-tab svg{width:var(--ic-20);height:var(--ic-20)}
.pip-tab.nachRechts svg{transform:rotate(180deg)}
@media(hover:hover){.pip-tab:hover{background:color-mix(in srgb,var(--glas-dunkel),var(--buehne-weiss) 14%)}}
.pip-tab:active{background:color-mix(in srgb,var(--glas-dunkel),var(--buehne-weiss) 24%)}
/* Der Pfeil, der die ganze Leiste wegklappt: Kapsel 52 × 24 auf Glas, Chevron 20, Trefferfläche 44. */
.call-pfeil{position:relative;display:inline-grid;place-items:center;width:calc(var(--hoehe-mini) * 2 + var(--abstand-2));height:var(--hoehe-mini);margin-top:var(--abstand-1);padding:0;border:0;border-radius:var(--r-voll);
  background:var(--buehne-glas);color:var(--buehne-weiss);cursor:pointer;backdrop-filter:blur(var(--blur-glas));transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.call-pfeil::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.call-pfeil svg{width:var(--ic-20);height:var(--ic-20)}
@media(hover:hover){.call-pfeil:hover{background:color-mix(in srgb,var(--buehne-weiss) 26%,transparent)}}
.call-pfeil:active{background:color-mix(in srgb,var(--buehne-weiss) 34%,transparent);transform:scale(calc(1 - .03 * var(--bewegung)))}
.call-unten.zu .call-pfeil{background:var(--glas-dunkel)}
@media(hover:hover){.call-unten.zu .call-pfeil:hover{background:color-mix(in srgb,var(--glas-dunkel),var(--buehne-weiss) 14%)}}
.call-unten.zu .call-pfeil:active{background:color-mix(in srgb,var(--glas-dunkel),var(--buehne-weiss) 24%)}
/* Quer oder niedriges Fenster: dieselbe Anordnung, die Knöpfe bleiben 48 (System E1), nur die Polster werden knapper. */
@media (max-height:520px){
  .call-kopf{gap:var(--abstand-2);padding-bottom:var(--abstand-8)}
  .call-unten,.call-unten.ueberBild{padding-top:var(--abstand-8);gap:var(--abstand-2)}
  .call-acts{gap:var(--abstand-2)}
  .call-ov{padding-top:calc(var(--hoehe-kopf) + var(--abstand-8) + env(safe-area-inset-top,0px));padding-bottom:calc(2 * var(--hoehe-rk) + var(--hoehe-mini) + var(--abstand-16) + env(safe-area-inset-bottom,0px))}
}
/* Hinweis-Pillen (E7): eine Form für Schloss, Stumm, Teilen, Leitung und Aufnahme: Kapsel 32 hoch in --pille mit feiner Kante,
   Zeichen 16, halbfett. Reine Hinweise fangen keine Tipps ab; Schloss und Aufnahme sind Knöpfe mit Trefferfläche 44. */
.call-schloss,.call-mutei,.call-quali{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);max-width:100%;min-height:var(--hoehe-dicht);box-sizing:border-box;padding:var(--abstand-1) var(--abstand-5);
  border:var(--rand) solid var(--buehne-linie);border-color:color-mix(in srgb,var(--buehne-weiss) 18%,transparent);border-radius:var(--r-voll);background:var(--pille);color:var(--buehne-weiss);
  font:inherit;font-size:var(--grad-2);line-height:var(--grad-2-zh-eng);font-weight:var(--gewicht-halb);text-align:left;text-shadow:none;backdrop-filter:blur(var(--blur-glas))}
.call-mutei .ic,.call-quali .ic{width:var(--ic-16);height:var(--ic-16);flex:none}
span.call-mutei,div.call-mutei,.call-quali{pointer-events:none}
/* Schloss: Fläche bleibt --pille, Grün nur in Kante und Schrift (auf hellem Bild 4,8:1). */
.call-schloss{border-color:var(--gruen);border-color:color-mix(in srgb,var(--gruen) 42%,transparent);color:var(--gruen);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.call-schloss::after,button.ruf-hinweis::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.call-schloss:hover{background:color-mix(in srgb,var(--buehne-weiss) 12%,var(--pille))}}
.call-schloss:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
.cs-mehr{text-decoration:underline;text-underline-offset:.14em;flex:0 0 auto}
.cs-ic{display:inline-flex;flex:0 0 auto}
.cs-ic .ic{width:var(--ic-16);height:var(--ic-16)}
.cs-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Erklärkarte (D15): kurzer Satz, Abschnitte mit Überschrift, im Anruf als Bühne, vor dem Anruf im Thema. */
.erkl{display:flex;flex-direction:column;gap:var(--abstand-1)}
.erkl-kurz{margin:0 0 var(--abstand-6);font-size:var(--grad-5);line-height:var(--grad-5-zh-text);color:var(--text)}
.erkl-h{margin-top:var(--abstand-7);font-weight:var(--gewicht-fett);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--text)}
.erkl-t{margin:var(--abstand-2) 0 0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
.erkl-btn,.netztest-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);margin-top:var(--abstand-10);padding:var(--abstand-2) var(--abstand-8);
  border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);cursor:pointer;
  transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.erkl-btn,.netztest-btn{padding-left:var(--abstand-7);padding-right:var(--abstand-7);font-size:var(--grad-2)}}
@media(hover:hover){.erkl-btn:hover,.netztest-btn:hover{background:var(--f3)}}
.erkl-btn:active,.netztest-btn:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.sl-mehr{position:relative;background:none;border:0;padding:0;color:var(--akzent-text);font:inherit;font-weight:var(--gewicht-halb);text-decoration:underline;text-underline-offset:.14em;cursor:pointer}
.sl-mehr::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.sl-kopf{display:block}
.call-quali{color:var(--gelb)}
.call-mutei[hidden]{display:none}
/* Der Aufnahme-Hinweis ist ein Knopf: antippen haelt an, setzt fort, beendet (rot getönt, Kante in --rot). */
button.ruf-hinweis{cursor:pointer;pointer-events:auto;border-color:var(--rot);background:var(--pille);background:color-mix(in srgb,var(--rot) 30%,var(--pille));transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){button.ruf-hinweis:hover{background:color-mix(in srgb,var(--rot) 40%,var(--pille))}}
button.ruf-hinweis:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Fokus auf der Bühne: weiß mit dunklem Saum (statt Akzent); auf Minimieren, den Mini-Knöpfen, der Lasche und den Pillen innen. */
:is(.call-ov,.call-kopf,.call-unten,.call-min) :focus-visible,.pip-knopf:focus-visible,.pip-tab:focus-visible{outline-color:var(--buehne-weiss);box-shadow:var(--ring-saum)}
.call-kopf .call-back:focus-visible,.pip-knopf:focus-visible,.pip-tab:focus-visible{outline-offset:calc(-1 * var(--fokus-breite));box-shadow:var(--ring-saum-innen)}
:is(.call-kopf,.call-ov) :is(.call-schloss,button.ruf-hinweis):focus-visible{outline-offset:calc(-1 * (var(--fokus-breite) + var(--rand-stark)));box-shadow:inset 0 0 0 calc(var(--fokus-breite) + var(--rand-stark)) var(--pille)}
/* Anruf-Einstellungen (E9, vor dem Anruf, im Thema): wer, Feststellung „Ende-zu-Ende verschlüsselt“, Vorlagen, Schalter, Verbindung
   prüfen, Zurück und Anruf starten. Bedingungen auf dem Klingel-Bildschirm unten (E4). */
.callset-head{display:flex;align-items:center;gap:var(--abstand-6);padding:var(--abstand-1) 0 var(--abstand-5)}
.callset-hm{min-width:0}
.callset-name{font-weight:var(--gewicht-fett);font-size:var(--grad-6);line-height:var(--grad-6-zh);overflow-wrap:anywhere}
.callset-sub{display:flex;align-items:center;gap:var(--abstand-3);font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.callset-sub .ic{width:var(--ic-16);height:var(--ic-16);flex:none}
.callset-enc{border-top:0}
.callset-enc-fest{border:var(--rand) solid var(--gruen);border-color:color-mix(in srgb,var(--gruen) 42%,transparent);background:var(--gruen-leise);border-radius:var(--r-m);padding:var(--abstand-5) var(--abstand-6);margin:var(--abstand-2) 0 var(--abstand-8)}
.cef-t{display:flex;align-items:center;gap:var(--abstand-3);font-weight:var(--gewicht-halb);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--gruen)}
.cef-t .ic{width:var(--ic-16);height:var(--ic-16);flex:none}
.cef-s{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit);margin-top:var(--abstand-2)}
.sicher-box{display:flex;flex-direction:column;gap:var(--abstand-6)}
.sicher-txt{margin:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
/* Sicherheitscode (C43): Mono in Fünfergruppen, auswählbar in einem Zug; für Vorleser Ziffer für Ziffer (.sr-nur). */
.sicher-code{margin:0;padding:var(--abstand-6) var(--abstand-7);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f2);color:var(--text);font-family:var(--mono);font-size:var(--grad-7);line-height:var(--grad-7-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-versal);word-spacing:.5em;font-variant-numeric:tabular-nums;text-align:center;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
@media(min-width:760px){.sicher-code{font-size:var(--grad-6);line-height:var(--grad-6-zh)}}
.sicher-box .sr-nur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.netztest-btn{margin-top:var(--abstand-8)}
.netztest-btn:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed;transform:none}
.netztest{font-size:var(--grad-2);color:var(--zweit);margin-top:var(--abstand-3);min-height:var(--grad-2-zh);line-height:var(--grad-2-zh)}
.netztest.gut{color:var(--gruen)}
.netztest.mittel{color:var(--gelb)}
.netztest.schlecht{color:var(--rot)}
/* Vorlagen: zwei Karten nebeneinander (60 hoch, Rand --feldrand); gewählt Akzent leise mit Rand und Name in Akzent-Text. Eine
   Vorlage stellt nur die Schalter darunter, man sieht sofort, was sie getan hat. .cv nutzt auch das Podcast-Studio (4b). */
.callset-vorlagen{display:flex;gap:var(--abstand-4);margin:var(--abstand-2) 0 var(--abstand-8)}
.cv{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--abstand-1);box-sizing:border-box;min-height:var(--hoehe-kachel);text-align:left;background:var(--f1);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);padding:var(--abstand-5) var(--abstand-6);cursor:pointer;color:var(--text);font:inherit;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.cv:hover{background:var(--f3)}}
.cv:active{background:var(--linie-2)}
.cv.on{border-color:var(--akzent-text);background:var(--akzent-leise)}
.cv.on .cv-n{color:var(--akzent-text)}
.cv-n{font-weight:var(--gewicht-halb);font-size:var(--grad-4);line-height:var(--grad-4-zh)}
.cv-u{font-size:var(--grad-2);color:var(--zweit);line-height:var(--grad-2-zh)}
/* Chat-Kopf, Anrufblatt und Profil (07.11.2026 spät, Henny): rechts die Frequenzen als Ausklappliste mit Vorschau und EIN Anrufknopf
   „Telefon / Video“ ganz rechts; das Blatt davor mit den Karten Telefon und Video, „Anruf starten“ und zugeklappt den erweiterten
   Einstellungen mit Zeichen; im Profil die Frequenzen und „Einstellungen in diesem Chat“ (das frühere Zahnrad). */
.chat-head .head-actions .head-anruf{display:inline-flex;align-items:center;gap:1px;width:auto;min-width:var(--hoehe-ik);padding:0 var(--abstand-3);border-radius:var(--r-s)}
.chat-head .head-actions .head-freq{flex:0 1 auto}
.chat-head .head-actions{min-width:0;flex:0 1 auto}
.head-anruf .ic{width:var(--ic-20);height:var(--ic-20)}
.head-anruf-strich{margin:0 1px;color:var(--zweit);font-size:var(--grad-3);line-height:1}
@media(hover:hover){.head-anruf:hover{background:var(--f3)}}
.head-freq{display:inline-flex;align-items:center;gap:var(--abstand-2);box-sizing:border-box;max-width:min(11rem,32vw);min-height:var(--hoehe-dicht);margin:0 var(--abstand-2) 0 0;padding:0 var(--abstand-3) 0 var(--abstand-4);border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-2);cursor:pointer}
.head-freq>.ic{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.head-freq-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* W-Kopf (HIVE DESIGN 07.11. spät, bei 320 px mit Text XXL gemessen): schmal nur das Zeichen der Frequenz mit Zahl und der Hörer;
   die Namen der Knöpfe bleiben vollständig. Trefferfläche 44 um die 32 hohe Frequenz. */
@container (max-width:359px) or (max-width:18em){.chat-head .head-freq-name{display:none}.chat-head .head-anruf-strich,.chat-head .head-anruf-strich~.ic{display:none}}
.head-freq{position:relative}
.head-freq::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.head-freq-zahl{flex:none;min-width:1.25rem;padding:0 var(--abstand-2);border-radius:var(--r-voll);background:var(--akzent);color:var(--auf-akzent);font-size:var(--grad-1);line-height:var(--grad-1-zh);text-align:center}
.head-freq-zahl[hidden]{display:none}
.head-freq-pfeil{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--zweit);transform:rotate(180deg)}
.head-freq[aria-expanded="true"] .head-freq-pfeil{transform:none}
@media(hover:hover){.head-freq:hover{background:var(--f3)}}
.ig-kwahl-liste.freq-liste{min-width:min(20rem,calc(100vw - 16px))}
.ig-kwahl-liste.freq-liste .ig-kwahl-ot{font-family:inherit;font-weight:var(--gewicht-halb)}
.ig-kwahl-otx{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;padding:var(--abstand-2) 0}
.ig-kwahl-otx .row-vor{display:flex;align-items:center;gap:var(--abstand-2);min-width:0;overflow:hidden;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);text-overflow:ellipsis;white-space:nowrap}
.ig-kwahl-otx .row-vor-tx{overflow:hidden;text-overflow:ellipsis}
.ig-kwahl-ou{display:block;min-width:0;overflow:hidden;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);text-overflow:ellipsis;white-space:nowrap}
.comp-sheet .comp-tool .comp-fmt-lbl{max-width:100%;overflow:hidden;font-size:var(--grad-1);letter-spacing:0}
.ig-kwahl-otx .row-vor-ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
.ig-kwahl-zahl{flex:none;min-width:1.25rem;padding:0 var(--abstand-2);border-radius:var(--r-voll);background:var(--akzent);color:var(--auf-akzent);font-size:var(--grad-1);line-height:var(--grad-1-zh);text-align:center}
.ig-kwahl-zeit{flex:none;color:var(--zweit);font-family:var(--mono);font-size:var(--grad-1)}
.neu-freq{display:flex;flex-direction:column;gap:var(--abstand-5);padding-bottom:var(--abstand-4)}
.neu-freq-satz{margin:0;color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
.callset-sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2)}
.callset-arten{margin-bottom:var(--abstand-6)}
.callset-arten .cv{align-items:flex-start}
.callset-arten .cv-z{width:var(--ic-24);height:var(--ic-24);margin-bottom:var(--abstand-2);color:var(--zweit)}
.callset-arten .cv.on .cv-z{color:var(--akzent-text)}
.callset .callset-acts{margin-top:0}
.callset-erw-k{display:flex;align-items:center;gap:var(--abstand-3);width:100%;min-height:var(--hoehe-knopf);margin:var(--abstand-6) 0 0;padding:0 var(--abstand-2);border:0;border-top:var(--rand) solid var(--linie-2);background:none;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);text-align:left;cursor:pointer}
.callset-erw-s{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--akzent-text);font-size:var(--grad-2);font-weight:var(--gewicht-mittel);text-overflow:ellipsis;white-space:nowrap}
.callset-erw-s[hidden]{display:block;visibility:hidden}
.callset-erw-p{flex:none;width:var(--ic-18);height:var(--ic-18);margin-left:auto;color:var(--zweit);transform:rotate(180deg)}
.callset-erw-k[aria-expanded="true"] .callset-erw-p{transform:none}
.callset-erw[hidden]{display:none}
.callset .sl-kopf{display:flex;align-items:center;gap:var(--abstand-3)}
.callset .sl-kopf>.ic{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.prof-h{margin:var(--abstand-8) 0 var(--abstand-3);color:var(--zweit);font-size:var(--grad-2);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-plakette);text-transform:uppercase}
.prof-freq{display:flex;flex-direction:column;gap:var(--abstand-2)}
.prof-freq-zeile{display:flex;align-items:center;gap:var(--abstand-5);box-sizing:border-box;width:100%;min-height:var(--hoehe-tipp);margin:0;padding:var(--abstand-3) var(--abstand-4);border:var(--rand) solid transparent;border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.prof-freq-zeile>.ic{flex:none;width:var(--ic-20);height:var(--ic-20);color:var(--zweit)}
.prof-freq-zeile.on{border-color:var(--akzent-text);background:var(--akzent-leise)}
.prof-freq-zeile.neu{background:transparent;color:var(--akzent-text)}
.prof-freq-zeile.neu>.ic{color:var(--akzent-text)}
@media(hover:hover){.prof-freq-zeile:hover{background:var(--f3)}}
.prof-freq-tx{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.prof-freq-name{font-weight:var(--gewicht-halb)}
.prof-freq-tx .row-vor{display:flex;align-items:center;gap:var(--abstand-2);min-width:0;overflow:hidden;color:var(--zweit);font-size:var(--grad-2);white-space:nowrap}
.prof-freq-tx .row-vor-tx{overflow:hidden;text-overflow:ellipsis}
.prof-freq-tx .row-vor-ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
.box-menu.im-profil{position:static;z-index:auto;width:auto;max-height:none;overflow:visible;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
/* Podcast: Blatt, Fortschritt, Knopf im Anruf-Rahmen. */
/* Scheibe 4b (E15): das Studio öffnet aus dem Chat und folgt dem Thema (Blatt am Handy, breiter Dialog am Desktop): Vorschau auf der
   dunklen Bühne, Abschnitte in Kapitälchen, Format und Größe als Vorlagen (.cv aus 4a, geschätzte Größe in Akzent-Text), Regler je
   Person als Karte mit drei Icon-Knöpfen 32 (Trefferfläche 44), Fortschritt D19. Die Leinwand selbst zeichnet podcastRahmen, sie
   bleibt. Dazu aus 4a übernommen: die Knöpfe am Ende der Blätter (B1) und die Bedingungen beim Klingeln (E4) mit Zeichen statt Emoji. */
.pod-formate{display:flex;flex-wrap:wrap;gap:var(--abstand-4);margin:var(--abstand-2) 0 var(--abstand-8)}
.pod-formate .cv{flex:1 1 6rem}
/* Die Buehne haelt das Bild in Form: die Leinwand hat je nach Vorlage ein
   anderes Seitenverhaeltnis, also darf sie nur in der Hoehe begrenzt werden. */
.pod-buehne{display:flex;justify-content:center;background:var(--buehne);border-radius:var(--r-s);overflow:hidden}
.pod-vorschau{max-width:100%;max-height:48vh;width:auto;height:auto;display:block;background:var(--buehne);cursor:grab}
.pod-vorschau:active{cursor:grabbing}
.podlauf .pod-vorschau{cursor:default}
.pod-zeit{display:flex;align-items:center;gap:var(--abstand-6);margin:var(--abstand-5) 0 var(--abstand-1)}
.pod-zeit input[type=range]{flex:1;min-width:0;min-height:var(--hoehe-knopf);accent-color:var(--akzent-text)} /* Regler 44 hoch (Desktop 36): Trefferfläche */
.pod-zt{flex:0 0 auto;font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit);font-variant-numeric:tabular-nums}
.pod-schnitt{display:flex;flex-direction:column;gap:var(--abstand-2);margin:var(--abstand-1) 0 var(--abstand-8)}
.pod-griff{display:flex;align-items:center;gap:var(--abstand-6)}
.pod-griff input[type=range]{flex:1;min-width:0;min-height:var(--hoehe-knopf);accent-color:var(--akzent-text)}
.pod-gl{flex:0 0 auto;width:2rem;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.cv-mb{font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);color:var(--akzent-text);font-variant-numeric:tabular-nums}
.pod-regler{display:flex;flex-direction:column;gap:var(--abstand-4);margin:var(--abstand-1) 0 var(--abstand-8)}
.pod-person{display:flex;flex-direction:column;gap:var(--abstand-3);padding:var(--abstand-4) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.pp-kopf{display:flex;align-items:baseline;gap:var(--abstand-4);min-width:0}
.pp-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb);color:var(--text)}
.pp-p{margin-right:auto;font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.pp-knoepfe{display:flex;gap:var(--abstand-6)} /* Lücke 12: die Trefferflächen (44) der 32er Knöpfe bleiben frei */
.pp-b{position:relative;display:grid;place-items:center;box-sizing:border-box;width:var(--hoehe-dicht);height:var(--hoehe-dicht);padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);cursor:pointer;
  transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.pp-b::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.pp-b:hover{background:var(--f3)}}
.pp-b:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.pp-b .ic{width:var(--ic-18);height:var(--ic-18)}
/* Fortschritt (D19): Schiene in Fläche 3, Füllung in Akzent; die Breite setzt podcastLauf. */
.pod-balken{height:var(--abstand-2);margin:var(--abstand-6) 0 var(--abstand-3);overflow:hidden;border-radius:var(--r-voll);background:var(--f3)}
.pod-balken-in{height:100%;width:0;background:var(--akzent);transition:width var(--dauer) linear}
.podset .set-row .tgl.fest,.podstudio .set-row .tgl.fest{opacity:.55}
@media(min-width:760px){.modal.modal-breit{max-width:46rem}}
/* Hinweise im Studio, im Lauf und im Ergebnis: Zweittext ohne den Einzug der Listen-Hinweise. */
:is(.podstudio,.podlauf,.podfertig)>.add-hint{padding:0;margin:var(--abstand-3) 0;font-size:var(--grad-2);line-height:var(--zh-weit);color:var(--zweit)}
/* Abschnitte im Studio (Ausschnitt, Format, Größe): Kapitälchen in Zweittext ohne den Einzug der Listen. */
.podstudio .sect{padding:var(--abstand-6) 0 var(--abstand-3);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.ruf-pod{display:inline-flex;align-items:center;gap:var(--abstand-4);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);cursor:pointer}
@media(hover:hover){.ruf-pod:hover{background:var(--f3)}}
.ruf-pod .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
/* Knöpfe am Ende der Blätter (B1, aus 4a übernommen): Anruf-Einstellungen (Zurück, Anruf starten), Podcast-Studio (Abbrechen, Hier
   rechnen, Auf dem Server rendern), Lauf (Abbrechen) und fertig (Herunterladen, Teilen, In den Chat). Mit Rand, der Hauptknopf in
   Akzent; 44 hoch (Desktop 36), Radius --r-s; sie brechen um, der Hauptknopf nimmt den Rest der Zeile. */
.callset-acts{display:flex;flex-wrap:wrap;gap:var(--abstand-4);margin-top:var(--abstand-10)}
.callset-back,.callset-go{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);
  background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.callset-back,.callset-go{padding-left:var(--abstand-7);padding-right:var(--abstand-7);font-size:var(--grad-2)}}
.callset-back{flex:0 1 auto}
.callset-go{flex:1 1 auto;border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.callset-back:hover{background:var(--f3)}.callset-go:hover{background:var(--akzent-hover)}}
.callset-back:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.callset-go:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.callset-back:disabled,.callset-go:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed;transform:none}
.callset-go .ic{width:var(--ic-20);height:var(--ic-20);flex:0 0 auto}
/* Bedingungen beim Klingeln (E4, aus 4a übernommen): ein Kasten je Bedingung auf der Bühne, Zeichen statt Emoji (Wabe in Marke für den
   normalen Anruf, roter Punkt für die Aufnahme, Video aus, Auge aus, Mikro für den Podcast). Den roten Punkt (.aufnahme-punkt) nimmt
   mit W4b.1 auch die Aufnahme-Pille im Anruf (rufLeisteMalen gehört der App-Session). */
.call-conds{display:flex;flex-direction:column;gap:var(--abstand-2);width:100%;max-width:calc(var(--breite-liste) - var(--abstand-20));margin-top:var(--abstand-2)}
.call-cond{display:flex;align-items:center;gap:var(--abstand-4);box-sizing:border-box;min-height:var(--hoehe-dicht);padding:var(--abstand-2) var(--abstand-5);border:var(--rand) solid var(--buehne-linie);border-radius:var(--r-s);background:var(--buehne-2);color:var(--buehne-text);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.call-cond .cc-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.call-cond .cc-ic .ic{width:var(--ic-18);height:var(--ic-18)}
.call-cond .cc-ic.wabe{color:var(--marke)}
.aufnahme-punkt{display:inline-block;flex:0 0 auto;width:var(--abstand-4);height:var(--abstand-4);border-radius:var(--r-voll);background:var(--rot)}
.call-cond .cc-tx{text-align:left}
/* Call-Historie-Liste (Phase B). Scheibe 4a (bildschirme 4.1, C40 mit C26): Zeile 56 mit D-Avatar 40 in der Farbe der Listen, Name,
   Art als Zeichen und Wort (verpasst in --rot mit Zeichen, 4,5:1 auch hell), Zeit in Mono; daneben der Rückruf-Knopf 44 (Hörer bzw.
   Kamera in Grün). Die Zeile selbst bleibt der Knopf, der den Chat öffnet. */
.callhist{display:flex;flex-direction:column}
.callhist-zeile{display:flex;align-items:center;gap:var(--abstand-2);border-top:var(--rand) solid var(--linie)}
.callhist-zeile:first-child{border-top:0}
.callhist-row{display:flex;align-items:center;gap:var(--abstand-6);flex:1;min-width:0;min-height:var(--zeile-chat);box-sizing:border-box;padding:var(--abstand-4) var(--abstand-2);border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.callhist-row:hover{background:var(--f2)}}
.callhist-row:active{background:var(--linie-2)}
.callhist-row:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.chr-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--abstand-1)}
.chr-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chr-sub{display:flex;align-items:center;gap:var(--abstand-3);font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.chr-sub.missed{color:var(--rot)}
.chr-dir{display:inline-flex;flex:none}
.chr-dir .ic{width:var(--ic-16);height:var(--ic-16)}
.chr-time{font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit);font-variant-numeric:tabular-nums;flex:0 0 auto}
.chr-ruf{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:0;border-radius:var(--r-voll);background:none;color:var(--gruen);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.chr-ruf::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.chr-ruf .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
@media(hover:hover){.chr-ruf:hover{background:var(--f3)}}
.chr-ruf:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* D-Avatare (C5) in den Anrufteilen: Fläche und Schrift aus den Avatarwerten (auf der Bühne die dunklen), Größe 40 tp in Liste und
   Einstellungen, 28 tp in der Mini-Karte, auf Bildflächen 72 px fest (aus avatar()). */
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av{border:0;background:var(--av-bg,var(--f3));color:var(--av-fg,var(--text));font-weight:var(--gewicht-halb)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av .av-kurz{color:inherit;font-weight:inherit;font-size:1em}
:is(.callhist-row,.callset-head) .av{width:var(--avatar-40);height:var(--avatar-40);font-size:calc(var(--avatar-40) * .4)}
.call-min .av{width:var(--avatar-28);height:var(--avatar-28);font-size:calc(var(--avatar-28) * .4)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av-blau{--av-bg:var(--av-blau-bg);--av-fg:var(--av-blau-fg)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av-gruen{--av-bg:var(--av-gruen-bg);--av-fg:var(--av-gruen-fg)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av-lila{--av-bg:var(--av-lila-bg);--av-fg:var(--av-lila-fg)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av-rot{--av-bg:var(--av-rot-bg);--av-fg:var(--av-rot-fg)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av-teal{--av-bg:var(--av-teal-bg);--av-fg:var(--av-teal-fg)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av-sand{--av-bg:var(--av-sand-bg);--av-fg:var(--av-sand-fg)}
:is(.call-card,.call-vcamoff,.call-min,.callhist-row,.callset-head) .av-grau{--av-bg:var(--av-grau-bg);--av-fg:var(--av-grau-fg)}
/* Kamera der Gegenseite aus (E5): Deckel in Bühnengrund mit Avatar und Satz. */
.call-ov.video.camoff{background:var(--buehne)}
.call-vcamoff{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-5);text-align:center;color:var(--buehne-text)}

/* Podcast-Ansicht: der "Kamera aus"-Deckel gehoert nur ueber die Haelfte der
   Gegenseite, nicht ueber den ganzen Schirm. Oben liegt immer, wer angerufen
   hat: beim Anrufer selbst also unten, beim Angerufenen oben. */
.call-ov.pod .call-vcamoff{position:absolute;left:0;right:0;justify-content:center;background:var(--buehne)}
.call-ov.pod.pod-oben .call-vcamoff{top:0;height:50%}
.call-ov.pod.pod-unten .call-vcamoff{top:50%;height:50%}
.call-ov.pod.camoff{background:none}
.call-camoff-txt{font-size:var(--grad-3);line-height:var(--grad-3-zh);color:var(--buehne-text);max-width:18rem}
/* Karte ohne Bild (E5) und beim Klingeln (E4): Avatar 72, Name 24 fett, Lage in Zweittext mit Zeichen, Dauer in Mono. */
.call-card{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-4);max-width:100%;text-align:center;color:var(--buehne-text)}
.call-name{margin-top:var(--abstand-2);font-size:var(--grad-8);line-height:var(--grad-8-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-titel);overflow-wrap:anywhere}
.call-sub{display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);min-height:var(--grad-4-zh);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--zweit);font-variant-numeric:tabular-nums}
.call-sub .ic{width:var(--ic-18);height:var(--ic-18);flex:none}
.call-sub [data-call-timer]{font-family:var(--mono);font-size:var(--grad-6);color:var(--buehne-text)}
/* Anrufknöpfe (E2, Familie .rk): rund, 48 (Desktop 52), Glas mit Unschärfe, Zeichen weiß. Zeichen 28: Hennys Wunsch 21.09. (größere
   Zeichen), das Prüfskript der App-Session misst über die Hälfte des Knopfs. „An“ (aria-pressed) in Akzent, außer am Video, das
   seinen Stand nur im Zeichen zeigt; gesperrt über aria-disabled (8 % Weiß, Zeichen 45 %), bleibt tippbar und sagt den Grund. */
.call-fab{position:relative;display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:var(--hoehe-rk);height:var(--hoehe-rk);padding:0;border:0;border-radius:var(--r-voll);
  background:var(--buehne-glas);color:var(--buehne-weiss);font:inherit;cursor:pointer;backdrop-filter:blur(var(--blur-glas));
  transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.call-fab svg{width:var(--ic-28);height:var(--ic-28)}
@media(hover:hover){.call-fab:hover{background:color-mix(in srgb,var(--buehne-weiss) 26%,transparent)}}
.call-fab:active{background:color-mix(in srgb,var(--buehne-weiss) 34%,transparent);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Nachbesserung: „an“ auf der Bühne in Akzent-Text (auf .buehne die dunkle Fassung, mit Farbschema auf 4,5:1 gerechnet) statt
   --akzent, das .buehne nicht umstellt (hell mit p-karamell 2,7:1 gegen die Bühne); Zeichen in --buehne. */
.call-fab[aria-pressed="true"]:not(.cam){background:var(--akzent-text);color:var(--buehne)}
@media(hover:hover){.call-fab[aria-pressed="true"]:not(.cam):hover{background:color-mix(in srgb,var(--akzent-text) 88%,var(--buehne-weiss))}}
.call-fab[aria-pressed="true"]:not(.cam):active{background:color-mix(in srgb,var(--akzent-text) 80%,var(--buehne-weiss))}
/* Sicherheitscode: grün getönt. */
.call-fab.schloss{background:var(--glas-dunkel);background:color-mix(in srgb,var(--gruen) 22%,var(--glas-dunkel));color:var(--gruen)}
@media(hover:hover){.call-fab.schloss:hover{background:color-mix(in srgb,var(--gruen) 32%,var(--glas-dunkel))}}
.call-fab.schloss:active{background:color-mix(in srgb,var(--gruen) 40%,var(--glas-dunkel))}
/* Annehmen grün, Ablehnen und Auflegen rot. */
.call-fab.accept{background:var(--gruen);color:var(--auf-gruen)}
@media(hover:hover){.call-fab.accept:hover{background:color-mix(in srgb,var(--gruen) 88%,var(--buehne-weiss))}}
.call-fab.accept:active{background:color-mix(in srgb,var(--gruen) 80%,var(--buehne-weiss))}
.call-fab.decline,.call-fab.hangup{background:var(--rot);color:var(--auf-rot);box-shadow:var(--schatten-bild)}
@media(hover:hover){.call-fab.decline:hover,.call-fab.hangup:hover{background:color-mix(in srgb,var(--rot) 88%,var(--buehne-weiss))}}
.call-fab.decline:active,.call-fab.hangup:active{background:color-mix(in srgb,var(--rot) 80%,var(--buehne-weiss))}
.call-fab.hangup svg{transform:rotate(135deg)} /* aufgelegter Hörer */
.call-fab[aria-disabled="true"],.call-fab[aria-disabled="true"]:active{background:var(--buehne-glas);background:color-mix(in srgb,var(--buehne-weiss) 8%,transparent);color:var(--zweit);color:color-mix(in srgb,var(--buehne-weiss) 45%,transparent);cursor:default;transform:none}
@media(hover:hover){.call-fab[aria-disabled="true"]:hover{background:color-mix(in srgb,var(--buehne-weiss) 8%,transparent)}}
/* Auflegen sitzt in der Kopfzeile rechts, gespiegelt zum Minimieren (Hennys Anordnung 21.09.): klein (36 mit Trefferfläche 44) und
   weit weg von den Knöpfen, die man im Gespräch dauernd drückt. */
.call-fab.hangup.oben{width:var(--hoehe-desktop);height:var(--hoehe-desktop)}
.call-fab.hangup.oben::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.call-fab.hangup.oben svg{width:var(--ic-20);height:var(--ic-20)}
/* Ton hören über und Aufnahme (E10): Zeilen 44 auf Fläche 2 mit Linie, gewählt Akzent leise mit Haken. */
.ton-wahl{display:flex;flex-direction:column;gap:var(--abstand-3)}
.ton-opt{display:flex;align-items:center;gap:var(--abstand-6);width:100%;min-height:var(--hoehe-eintrag);box-sizing:border-box;text-align:left;background:var(--f2);border:var(--rand) solid var(--linie-2);
  color:var(--text);border-radius:var(--r-m);padding:var(--abstand-3) var(--abstand-6);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.ton-opt:hover{background:var(--f3)}}
.ton-opt:active{background:var(--linie-2)}
.ton-opt.on{border-color:var(--akzent-text);background:var(--akzent-leise)}
.ton-opt.aus{color:var(--zweit);cursor:default}
.ton-opt .ic{width:var(--ic-20);height:var(--ic-20);flex:0 0 auto;color:var(--zweit)}
.ton-opt.on .ic{color:var(--akzent-text)}
.ton-tx{flex:1;min-width:0}
.ton-n{font-weight:var(--gewicht-halb);font-size:var(--grad-4);line-height:var(--grad-4-zh)}
.ton-u{font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit);margin-top:var(--abstand-1)}
.ton-hk{color:var(--akzent-text);font-weight:var(--gewicht-fett);flex:0 0 auto}
/* Minimieren oben links im Vollbild (E2 .min): 44 rund auf --pille, Bild-im-Bild-Zeichen 24. */
.call-back{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--hoehe-tipp);height:var(--hoehe-tipp);padding:0;border:0;border-radius:var(--r-voll);
  background:var(--pille);color:var(--buehne-weiss);cursor:pointer;backdrop-filter:blur(var(--blur-glas));transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.call-back svg{width:var(--ic-24);height:var(--ic-24)}
@media(hover:hover){.call-back:hover{background:color-mix(in srgb,var(--pille),var(--buehne-weiss) 14%)}}
.call-back:active{background:color-mix(in srgb,var(--pille),var(--buehne-weiss) 24%);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Minimierter Anruf (E8) = verschiebbare Mini-Karte (Lage inline left/top), selbst Bühne: Kapsel auf Fläche der Bühne mit Linie und
   Schatten, Avatar, Name, Dauer in Grün (Mono), Öffnen und Auflegen 36 mit Trefferfläche 44. Mit Bild liegt #call-remote oben (132
   × 176), die Leiste nahtlos darunter: Name und Dauer in einer Zeile über den zwei Knöpfen. Ton läuft weiter. */
.call-min{position:fixed;z-index:83;display:flex;align-items:center;gap:var(--abstand-6);min-height:var(--hoehe-tipp);box-sizing:border-box;padding:var(--abstand-2) var(--abstand-2) var(--abstand-2) var(--abstand-3);
  background:var(--buehne-2);color:var(--buehne-text);border:var(--rand) solid var(--buehne-linie);border-radius:var(--r-voll);box-shadow:var(--schatten-buehne);
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:background-color var(--dauer) var(--kurve)}
.call-min.has-vid{flex-wrap:wrap;justify-content:flex-end;gap:var(--abstand-2) var(--abstand-6);padding:var(--abstand-2) var(--abstand-2) var(--abstand-2) var(--abstand-4);border-top:0;border-radius:0 0 var(--r-l) var(--r-l)}
.call-min.has-vid .call-min-txt{flex-basis:100%}
.call-min.has-vid .call-min-name{max-width:none;font-size:var(--grad-1)}
@media(hover:hover){.call-min:hover{background:var(--f3)}}
.call-min:active{background:var(--linie-2);cursor:grabbing}
.call-min-txt{display:flex;flex-direction:column;line-height:var(--zh-eng);min-width:0;flex:1}
.call-min-name{font-size:var(--grad-2);font-weight:var(--gewicht-halb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(var(--breite-rail) * 2)}
.call-min-timer{margin-top:var(--abstand-1);font-family:var(--mono);font-size:var(--grad-1);color:var(--gruen);font-variant-numeric:tabular-nums}
.call-min-fab{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--hoehe-desktop);height:var(--hoehe-desktop);padding:0;border:0;border-radius:var(--r-voll);background:var(--buehne-glas);color:var(--buehne-weiss);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.call-min-fab::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.call-min-fab svg{width:var(--ic-20);height:var(--ic-20)}
@media(hover:hover){.call-min-fab.expand:hover{background:color-mix(in srgb,var(--buehne-weiss) 26%,transparent)}.call-min-fab.hangup:hover{background:color-mix(in srgb,var(--rot) 88%,var(--buehne-weiss))}}
.call-min-fab.hangup{background:var(--rot);color:var(--auf-rot)}
.call-min-fab.hangup svg{transform:rotate(135deg)}
.call-min-fab:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Call-Event-Pille im Chat-Verlauf (zentriert, klickbar = zurückrufen). Scheibe 2b (C26 Anruf-Eintrag): Kapsel 32 hoch (Trefferfläche
   44) auf Fläche 2 mit Linie 2, Zweittext; Hörer oder Kamera in Grün, verpasst und abgelehnt Zeichen und Wort in Rot (das Wort steht
   immer da); Zeit und Datum in Mono. Daneben „Aus dem Verlauf entfernen“ (.ce-x, Anruf-Rahmen). Der KI-Hinweis (.ki-hinweis, ein
   span, Wunsch der App-Session 19.10.) nimmt dieselbe Kapsel, ist aber kein Knopf: kein Zeiger, kein Hover, Zeichen in Zweittext. */
.call-event{align-self:center;display:flex;align-items:center;justify-content:center;gap:var(--abstand-2);max-width:100%;min-width:0;margin:0}
.ce-pill{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--abstand-1) var(--abstand-3);min-width:0;min-height:var(--hoehe-dicht);padding:var(--abstand-1) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-voll);background:var(--f2);color:var(--zweit);font:inherit;font-size:var(--grad-2);line-height:var(--zh-knapp);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
button.ce-pill::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.ce-pill .ic{width:var(--ic-16);height:var(--ic-16);flex:none;color:var(--gruen)}
.ce-pill .was{color:var(--text);font-weight:var(--gewicht-mittel)}
.ce-pill.missed .ic,.ce-pill.missed .was{color:var(--rot)}
@media(hover:hover){button.ce-pill:hover{background:var(--f3);border-color:var(--feldrand)}}
button.ce-pill:active{background:var(--f3);border-color:var(--feldrand);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ki-hinweis .ce-pill{flex-wrap:nowrap;border-radius:var(--r-l);cursor:default}
.ki-hinweis .ce-pill>span:not(.ce-time){flex:1 1 auto;min-width:0}
.ki-hinweis .ce-pill .ic{color:var(--zweit)}
.ce-time{font-family:var(--mono);font-size:var(--grad-1);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp)}
/* ── Gruppenanrufe (25.09.2026): Kachelraster, Kostenzeile, Einladen ── */
/* Scheibe 4b (E11 bis E13, Entscheidung 7): dieselbe Spalte wie bisher (Kopf mit Minimieren, Raster, Kostenzeile, vier Knöpfe),
   Aussehen D, Bühne immer dunkel (.buehne an .gr-ov, .gr-pille, .gr-ruf und an den Kosten-Dialogen im Anruf). Lücke und Polster des
   Rasters liest rasterOrdnen aus dem Stil (Handy 6 und 0 12, Desktop 12 und 0 24). Hover nur bei Maus, Fokus auf der Bühne weiß mit
   dunklem Saum. Die Ebenen bleiben absolut (80 Anruf, 79 Kapsel, 90 Klingelkarte; bauplan 4.6 Nr. 7). */
.head-gruppenruf{display:flex;align-items:center}
.head-gruppenruf[hidden]{display:none}
.head-join{display:inline-flex;align-items:center;gap:var(--abstand-3);padding:0 var(--abstand-5);border:0;border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);cursor:pointer}
.head-join .ic{width:var(--ic-18);height:var(--ic-18)}
.gr-ov{position:fixed;inset:0;z-index:var(--ebene-anruf);display:flex;flex-direction:column;box-sizing:border-box;background:var(--buehne);color:var(--buehne-text);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.gr-ov[hidden]{display:none}
/* Kopf (E11): Minimieren (Bild im Bild, 44), Gruppenname --grad-6 fett, darunter „6 Personen · 1:46“ bzw. „Verbinde neu …“. */
.gr-kopf{flex:0 0 auto;display:flex;align-items:center;gap:var(--abstand-6);box-sizing:border-box;min-height:var(--hoehe-kopf);padding:var(--abstand-2) var(--abstand-6) var(--abstand-4)}
@media(min-width:760px){.gr-kopf{gap:var(--abstand-7);padding:var(--abstand-6) var(--abstand-12) var(--abstand-5)}}
.gr-titel{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--abstand-1)}
.gr-titel b{font-size:var(--grad-6);line-height:var(--grad-6-zh-eng);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-titel small{font-size:var(--grad-2);line-height:var(--grad-2-zh-eng);color:var(--zweit);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Anrufknöpfe (E2, dieselbe Form wie .call-fab aus 4a): rund 48 (Desktop 52) auf Glas, Zeichen 28 weiß. Stumm an (aria-pressed) und
   „Du lädst alle ein“ (.gold.an) als Fläche in Akzent-Text der Bühne mit Zeichen in --buehne; die Kamera zeigt ihren Stand nur im
   Zeichen; Alle einladen sonst mit Krone in Akzent-Text; Auflegen rot. Minimieren oben 44 mit Zeichen 24. */
.gr-knopf{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;box-sizing:border-box;width:var(--hoehe-rk);height:var(--hoehe-rk);padding:0;border:0;border-radius:var(--r-voll);
  background:var(--buehne-glas);color:var(--buehne-weiss);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.gr-knopf .ic{width:var(--ic-28);height:var(--ic-28)}
@media(hover:hover){.gr-knopf:hover{background:color-mix(in srgb,var(--buehne-weiss) 26%,transparent)}}
.gr-knopf:active{background:color-mix(in srgb,var(--buehne-weiss) 34%,transparent);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gr-knopf[aria-pressed="true"]:not(.kam),.gr-knopf.gold.an{background:var(--akzent-text);color:var(--buehne)}
@media(hover:hover){.gr-knopf[aria-pressed="true"]:not(.kam):hover,.gr-knopf.gold.an:hover{background:color-mix(in srgb,var(--akzent-text) 88%,var(--buehne-weiss))}}
.gr-knopf[aria-pressed="true"]:not(.kam):active,.gr-knopf.gold.an:active{background:color-mix(in srgb,var(--akzent-text) 80%,var(--buehne-weiss))}
.gr-knopf.gold:not(.an){color:var(--akzent-text)}
@media(hover:hover){.gr-knopf.gold:not(.an):hover{color:var(--buehne-weiss)}} /* auf dem helleren Glas Weiß statt Akzent-Text */
.gr-knopf.rot{background:var(--rot);color:var(--auf-rot);box-shadow:var(--schatten-bild)}
@media(hover:hover){.gr-knopf.rot:hover{background:color-mix(in srgb,var(--rot) 88%,var(--buehne-weiss))}}
.gr-knopf.rot:active{background:color-mix(in srgb,var(--rot) 80%,var(--buehne-weiss))}
.gr-knopf.rot .ic{transform:rotate(135deg)} /* aufgelegter Hörer */
.gr-kopf .gr-knopf{width:var(--hoehe-tipp);height:var(--hoehe-tipp)}
.gr-kopf .gr-knopf .ic{width:var(--ic-24);height:var(--ic-24)}
/* Raster (E11): rasterOrdnen wählt die Spalten so, dass die Kacheln so groß wie möglich werden (quer 16:9, hochkant 3:4, nie schmaler
   als 140, dann rollt es). Jede Zeile ist so hoch wie ihre Kachel: auch wenn die Kostenzeile wächst, liegt nichts übereinander. */
.gr-raster{flex:1;min-height:0;display:grid;grid-auto-rows:max-content;gap:var(--abstand-3);padding:0 var(--abstand-6);overflow-y:auto;align-content:center;align-content:safe center;justify-content:center}
@media(min-width:760px){.gr-raster{gap:var(--abstand-6);padding:0 var(--abstand-12)}}
.gr-kachel{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:16/9;container-type:size;border-radius:var(--r-m);background:var(--buehne-2);color:var(--buehne-text)}
.gr-raster.hoch .gr-kachel{aspect-ratio:3/4}
/* Sprecher: grüner Rand 2 innen für 1,6 s, über dem Bild (eine Kontur läge unter dem Video), als Rand auch im Kontrastmodus. */
.gr-kachel::after{content:"";position:absolute;inset:0;z-index:var(--ebene-auf);border:var(--rand-stark) solid transparent;border-radius:inherit;pointer-events:none;transition:border-color var(--dauer) var(--kurve)}
.gr-kachel.spricht::after{border-color:var(--gruen)}
.gr-av{position:relative;display:grid;place-items:center}
.gr-kachel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--buehne-2)}
.gr-kachel video[hidden]{display:none}
.gr-kachel.ich video{transform:scaleX(-1)}
/* D-Avatar (C5) ohne Bild: rund in der Farbe der Listen (auf der Bühne die dunklen Werte), fest 72 px wie jede Bildfläche, in flachen
   Kacheln höchstens 56 % der Kachelhöhe (Container-Einheit; ohne sie bleibt es bei 72). */
.gr-kachel .av{width:var(--avatar-buehne);height:var(--avatar-buehne);font-size:calc(var(--avatar-buehne) * .4);width:min(var(--avatar-buehne),56cqh);height:min(var(--avatar-buehne),56cqh);font-size:calc(min(var(--avatar-buehne),56cqh) * .4);
  border:0;background:var(--av-bg,var(--f3));color:var(--av-fg,var(--text));font-weight:var(--gewicht-halb)}
.gr-kachel .av .av-kurz{z-index:auto;color:inherit;font-weight:inherit;font-size:1em} /* die Initiale liegt unter dem Video (sonst stand sie mit z-index 1 darüber) */
/* Namensschild (Schild unten): Kapsel 28 auf --pille, --grad-1 halbfett, eine Zeile mit Auslassung; stumm mit rotem Mikro vorn,
   der Einlader mit Krone in Akzent-Text hinten. */
.gr-name{position:absolute;left:var(--abstand-4);bottom:var(--abstand-4);z-index:var(--ebene-klebt);display:inline-flex;align-items:center;gap:var(--abstand-2);box-sizing:border-box;max-width:calc(100% - 2 * var(--abstand-4));min-height:var(--hoehe-klein);padding:0 var(--abstand-5);
  border-radius:var(--r-voll);background:var(--pille);color:var(--buehne-weiss);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);white-space:nowrap;overflow:hidden}
.gr-name .gr-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gr-name .ic{width:var(--ic-14);height:var(--ic-14);flex:0 0 auto;color:var(--rot)}
.gr-name .ic.gr-krone{color:var(--akzent-text)}
/* Kostenzeile (E12): mittig unter dem Raster, nur wenn nötig (leer ohne Höhe); Zweittext, Zahlen in Mono und --buehne-text, die Krone
   und der Einlader in Akzent-Text; Kapseln 36 hoch mit Trefferfläche 44 („Alle sehen“ voll in Akzent, sonst mit Rand). kostenZeile
   leert und füllt sie bei jeder Raumänderung: keine Eintritts-Animation. Angesagt wird über .gr-ansage, nur bei neuem Satz. */
.gr-kosten{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--abstand-3) var(--abstand-5);box-sizing:border-box;min-height:var(--hoehe-tipp);padding:var(--abstand-3) var(--abstand-8) var(--abstand-1);
  font-size:var(--grad-3);line-height:var(--grad-3-zh);color:var(--zweit);text-align:center;font-variant-numeric:tabular-nums}
.gr-kosten:empty{min-height:0;padding:0}
.gr-kosten .zahl,.gr-kosten .gr-bisher{font-family:var(--mono);font-weight:var(--gewicht-halb);color:var(--buehne-text)}
.gr-kosten button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);box-sizing:border-box;min-height:var(--hoehe-desktop);padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);
  background:transparent;color:var(--buehne-text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);white-space:nowrap;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.gr-kosten button{font-size:var(--grad-2)}}
.gr-kosten button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.gr-kosten button:hover{background:var(--f3)}}
.gr-kosten button:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gr-kosten button.voll{border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.gr-kosten button.voll:hover{background:var(--akzent-hover)}}
.gr-kosten button.voll:active{background:var(--akzent-gedrueckt)}
.gr-ansage{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Ansage der Kostenzeile, nur für Vorleser */
.gr-einlader{display:inline-flex;align-items:center;gap:var(--abstand-3);color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.gr-einlader .ic{width:var(--ic-18);height:var(--ic-18);flex:0 0 auto}
/* Vier Knöpfe mittig, Lücke 16. */
.gr-unten{flex:0 0 auto;display:flex;justify-content:center;gap:var(--abstand-8);padding:var(--abstand-4) var(--abstand-4) var(--abstand-6)}
@media(min-width:760px){.gr-unten{padding:var(--abstand-5) 0 var(--abstand-12)}}
/* Minimiert (E8, Gruppe): grüne Kapsel 44 unten rechts über der Eingabezeile, Zeichen und Dauer (Mono), selbst Bühne; Tippen öffnet.
   Das letzte Kind ist die Dauer (kopfAuffrischen schreibt sie), davor der Name für Vorleser. */
.gr-pille{position:fixed;right:var(--abstand-8);bottom:calc(5rem + env(safe-area-inset-bottom,0px));z-index:79;display:inline-flex;align-items:center;gap:var(--abstand-4);box-sizing:border-box;min-height:var(--hoehe-tipp);padding:0 var(--abstand-8);border:0;border-radius:var(--r-voll);
  background:var(--gruen);color:var(--auf-gruen);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;box-shadow:var(--schatten-buehne);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.gr-pille[hidden]{display:none}
.gr-pille .ic{width:var(--ic-18);height:var(--ic-18);flex:0 0 auto}
.gr-pille>span:last-child{font-family:var(--mono)}
.gr-pille .sr-nur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(hover:hover){.gr-pille:hover{background:color-mix(in srgb,var(--gruen) 88%,var(--buehne-weiss))}}
.gr-pille:active{background:color-mix(in srgb,var(--gruen) 80%,var(--buehne-weiss));transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Klingelkarte (E13): oben mittig über der App, höchstens 440 breit, selbst Bühne; Gruppen-Sechseck 40 in der Farbe der Listen, Name
   und Satz, Kapseln „Später“ (Glas) und „Beitreten“ (Grün). Wird der Text schmaler als 12em, rutschen beide Kapseln zusammen in eine
   zweite Zeile und teilen sich die Breite (Textgröße, schmales Fenster, Handy). */
.gr-ruf{position:fixed;left:50%;top:calc(var(--abstand-8) + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:90;display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-5);box-sizing:border-box;width:min(var(--breite-dialog),calc(100% - 2 * var(--abstand-8)));
  padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--buehne-linie);border-radius:var(--r-blatt);background:var(--buehne-2);color:var(--buehne-text);box-shadow:var(--schatten-buehne)}
.gr-ruf .grp-av{position:relative;isolation:isolate;flex:0 0 auto;width:var(--avatar-40);height:var(--avatar-40);border-radius:0;background:none;color:var(--av-fg,var(--text))}
.gr-ruf .grp-av::before,.gr-ruf .grp-av::after{content:"";position:absolute;inset:0;z-index:var(--ebene-unter);background:color-mix(in srgb,var(--av-fg,var(--text)) var(--av-kante-anteil),transparent);clip-path:polygon(50% 2.5%,97% 26.25%,97% 73.75%,50% 97.5%,3% 73.75%,3% 26.25%)}
.gr-ruf .grp-av::after{inset:var(--hx-strich);background:var(--av-bg,var(--f3))}
.gr-ruf .grp-av svg{width:50%;height:50%}
:is(.gr-kachel,.gr-ruf) .av-blau{--av-bg:var(--av-blau-bg);--av-fg:var(--av-blau-fg)}
:is(.gr-kachel,.gr-ruf) .av-gruen{--av-bg:var(--av-gruen-bg);--av-fg:var(--av-gruen-fg)}
:is(.gr-kachel,.gr-ruf) .av-lila{--av-bg:var(--av-lila-bg);--av-fg:var(--av-lila-fg)}
:is(.gr-kachel,.gr-ruf) .av-rot{--av-bg:var(--av-rot-bg);--av-fg:var(--av-rot-fg)}
:is(.gr-kachel,.gr-ruf) .av-teal{--av-bg:var(--av-teal-bg);--av-fg:var(--av-teal-fg)}
:is(.gr-kachel,.gr-ruf) .av-sand{--av-bg:var(--av-sand-bg);--av-fg:var(--av-sand-fg)}
:is(.gr-kachel,.gr-ruf) .av-grau{--av-bg:var(--av-grau-bg);--av-fg:var(--av-grau-fg)}
.gr-ruf-text{flex:1 1 12em;min-width:0;display:flex;flex-direction:column;gap:var(--abstand-1);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.gr-ruf-text b{font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-fett);overflow-wrap:anywhere}
.gr-ruf-text span{color:var(--zweit)}
.gr-ruf-knoepfe{flex:1 0 auto;display:flex;gap:var(--abstand-4)}
.gr-ruf button{position:relative;flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--hoehe-desktop);padding:0 var(--abstand-7);border:var(--rand) solid transparent;border-radius:var(--r-voll);
  font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);white-space:nowrap;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.gr-ruf button{font-size:var(--grad-2)}}
.gr-ruf button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.gr-ruf button:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
.gr-ruf .ja{border-color:var(--gruen);background:var(--gruen);color:var(--auf-gruen)}
@media(hover:hover){.gr-ruf .ja:hover{background:color-mix(in srgb,var(--gruen) 88%,var(--buehne-weiss))}}
.gr-ruf .ja:active{background:color-mix(in srgb,var(--gruen) 80%,var(--buehne-weiss))}
.gr-ruf .nein{background:var(--buehne-glas);color:var(--buehne-text)}
@media(hover:hover){.gr-ruf .nein:hover{background:color-mix(in srgb,var(--buehne-weiss) 26%,transparent)}}
.gr-ruf .nein:active{background:color-mix(in srgb,var(--buehne-weiss) 34%,transparent)}
/* Fokus auf der Bühne: weiß mit dunklem Saum (wie 4a); auf der grünen Kapsel innen in --auf-gruen. */
:is(.gr-ov,.gr-ruf) :focus-visible{outline-color:var(--buehne-weiss);box-shadow:var(--ring-saum)}
.gr-pille:focus-visible{outline:var(--fokus-breite) solid var(--auf-gruen);outline-offset:calc(-2 * var(--fokus-breite))} /* innen in der Schrift auf Grün: hält auf hellem und dunklem Grund */
.gr-modal p{margin:0 0 var(--abstand-6);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--text)}
/* Feedback-Dialog (30.09.2026); Feld mit 16 px, sonst zoomt iOS beim Tippen. */
/* Scheibe 3b-2: Feedback, Melden, KI-Zustimmung, Hinweis auf neue AGB, Erlaubnisse (vorläufig, App-Session) und Moderation in
   den D-Formen über ihre Klassen; Texte und Aufbau bleiben. Satz --grad-4 in --text, Hinweise --grad-3 in Zweittext ohne den
   Einzug der Listen-Hinweise, Art und Grund als Chips B15 (32 hoch, Trefferfläche --treffer-min, gewählt --akzent-leise mit Rand
   und Text in Akzent-Text), Freitext als Feld B9, „Datenschutzerklärung“ und „AGB lesen“ als Textlink B4 allein (unterstrichen,
   Trefferfläche über ::after). */
:is(.fb-box,.ki-zust,.mod)>p{margin:0 0 var(--abstand-6);font-size:var(--grad-4);line-height:var(--grad-4-zh);color:var(--text)}
:is(.fb-box,.ki-zust,.mod) .add-hint{padding:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
:is(.fb-box,.ki-zust,.mod) .add-hint.err{color:var(--rot)}
.fb-wahl{display:flex;gap:max(var(--abstand-4),calc(var(--treffer-min) - var(--hoehe-dicht))) var(--abstand-4);flex-wrap:wrap;margin:var(--abstand-2) 0 var(--abstand-6)} /* Zeilenabstand so, dass die Trefferflächen (44) sich nicht überlappen */
.fb-art{position:relative;min-height:var(--hoehe-dicht);padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-mittel);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.fb-art::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.fb-art:hover{background:var(--f3)}}
.fb-art:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.fb-art.an{border-color:var(--akzent-text);background:var(--akzent-leise);color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.ki-zust-liste{margin:0 0 var(--abstand-6) var(--abstand-10);padding:0;font-size:var(--grad-4);line-height:var(--grad-4-zh)}
.ki-zust-liste li+li{margin-top:var(--abstand-2)}
.ki-zust-link{position:relative;display:inline-block;margin:var(--abstand-2) 0 var(--abstand-6);padding:var(--abstand-2) 0;border-radius:var(--r-xxs);color:var(--akzent-text);font-size:var(--grad-3);font-weight:var(--gewicht-halb);text-decoration:underline;text-decoration-thickness:var(--rand);text-underline-offset:.14em}
.ki-zust-link::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.ki-zust-link:hover{color:var(--text)}}
.melde-mit{display:flex;gap:var(--abstand-5);align-items:flex-start;min-height:var(--hoehe-knopf);margin:var(--abstand-4) 0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--text);cursor:pointer}
.accept-melden{position:relative;display:block;align-self:center;min-height:var(--treffer-min);margin:0 auto;padding:0 var(--abstand-4);border:0;border-radius:var(--r-s);background:none;color:var(--zweit);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);text-decoration:underline;text-underline-offset:.2em;cursor:pointer} /* C31 mit „Melden“: Textknopf in Zweittext, 44 hoch */
@media(hover:hover){.accept-melden:hover{color:var(--text)}}
/* Pflicht-Haken „ab 16“ (Anmeldung) und „Das Foto zeigt mich …“ (Profilbild-Studio, Apple 1.2): Zeile B18, die ganze Zeile ist
   das Ziel (mindestens --hoehe-knopf), Text --grad-3 in --text; bleibt immer sichtbar. */
.gate-ab16{display:flex;gap:var(--abstand-5);align-items:flex-start;min-height:var(--hoehe-knopf);margin:var(--abstand-2) 0 0;text-align:left;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--text);cursor:pointer}
/* Im Profilbild-Studio (openAvatarStudio, 5a) nur der Haken in der D-Form: die Zeile behält ihre bisherigen Maße, damit sich im
   Studio nichts verschiebt, bis 5a es mit den Formen aus 6a umbaut (bauplan 3.11, 3.6b). */
.ig .gate-ab16{min-height:0;margin:.2rem 0 .6rem;font-size:.85rem;line-height:inherit}
.ig .gate-ab16 input[type=checkbox]{margin:var(--abstand-2) 0 calc(-1 * var(--abstand-2))} /* etwas Luft zum Knopf „Foto wählen“ darüber; der Ausgleich unten hält die Zeile auch einzeilig gleich hoch */
/* Kästchen und Punkt B18 (Scheibe 3b-2) für die nativen Felder der Dialoge: 20 px, Rand --feldrand (3:1), Fläche 1; an in der
   Akzentfläche mit --akzent-rand und Haken bzw. Punkt in --auf-akzent; Hover Fläche 3 (nur Maus); gesperrt eine Form; der Punkt
   der Löschoptionen und das Häkchen der Schlüssel-Warnungen (beide in .del-opt, Gefahrkarte B17) an in --rot. Sitzt mittig zur
   ersten Textzeile; Fokusring aus der globalen Regel. */
:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt) input[type=checkbox],.del-opt input[type=radio]{-webkit-appearance:none;appearance:none;position:relative;flex:none;display:inline-grid;place-items:center;box-sizing:border-box;width:var(--ic-20);height:var(--ic-20);min-height:0;margin:calc((var(--grad-3-zh-text) - var(--ic-20)) / 2) 0 0;padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-xxs);background:var(--f1);color:var(--auf-akzent);font-size:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
:is(.fwd-ctx,.arch-opt,.prof-disc,.grp-pick) input[type=checkbox]{margin-top:0}
.del-opt input[type=radio]{margin-top:calc((var(--grad-4-zh) - var(--ic-20)) / 2);border-radius:var(--r-voll)}
.del-opt input[type=checkbox]{margin-top:calc((1.45em - var(--ic-20)) / 2)} /* Häkchen der Schlüssel-Warnungen (e2eHaekchen): der Satz erbt Größe und Zeilenhöhe 1.45 von body, das Kästchen sitzt mittig zu seiner ersten Zeile */
:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt) input[type=checkbox]::after,.del-opt input[type=radio]::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)} /* Trefferfläche des Kästchens selbst (die Zeile ist ohnehin Ziel) */
/* Trefferfläche des Kästchens selbst (B18, wie gemeinsam.css): --treffer-min über ::after, falls die Zeile niedriger ist
   (Haken im Profilbild-Studio, der seine alten Maße behält) */
:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt) input[type=checkbox]::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt) input[type=checkbox]::before{content:"";width:var(--ic-14);height:var(--ic-14);background:currentColor;opacity:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.del-opt input[type=radio]::before{content:"";width:var(--abstand-4);height:var(--abstand-4);border-radius:var(--r-voll);background:currentColor;opacity:0}
:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt) input[type=checkbox]:checked,.del-opt input[type=radio]:checked{border-color:var(--akzent-rand);background:var(--akzent)}
.del-opt input[type=radio]:checked,.del-opt input[type=checkbox]:checked{border-color:var(--rot);background:var(--rot);color:var(--auf-rot)}
:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt) input[type=checkbox]:checked::before,.del-opt input[type=radio]:checked::before{opacity:1}
@media(hover:hover){:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt):hover input[type=checkbox]:not(:checked):not(:disabled),.del-opt:hover input[type=radio]:not(:checked){border-color:var(--text);background:var(--f3)}}
:is(.gate-ab16,.melde-mit,.fwd-ctx,.arch-opt,.prof-disc,.grp-pick,.del-opt) input[type=checkbox]:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:not-allowed}
.mod-kopf{display:flex;justify-content:flex-end}
.mod-kopf .set-link{width:auto;border-top:0}
.mod-karte{display:flex;flex-direction:column;gap:var(--abstand-3);margin:var(--abstand-6) 0;padding:var(--abstand-6) var(--abstand-7);border:var(--rand) solid var(--linie-2);border-radius:var(--r-l);background:var(--f1)}
.mod-titel{font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-fett);color:var(--text)}
.mod-zeile{font-size:var(--grad-3);line-height:var(--grad-3-zh-text);white-space:pre-wrap;overflow-wrap:anywhere}
.mod-medium{max-width:100%;max-height:50vh;border-radius:var(--r-m)}
.mod-karte .prof-actions{margin-top:var(--abstand-4);padding-top:0;border-top:0}
/* Freitext B9: Feld mehrzeilig, mindestens fünf Zeilen, Fläche 1, Rand --feldrand, Radius --r-m; 16 px am Handy (Fokus-Zoom). */
.fb-text{display:block;box-sizing:border-box;width:100%;min-height:7.5rem;padding:var(--abstand-5) var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);line-height:var(--grad-5-zh-text);resize:vertical;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.fb-text{padding-left:var(--abstand-6);padding-right:var(--abstand-6);font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}}
.fb-text::placeholder{color:var(--zweit);opacity:1}
@media(hover:hover){.fb-text:hover{background:var(--f3)}}
.fb-text:focus-visible{border-color:var(--akzent-text);background:var(--f1)}
.fb-hinweis{display:block;margin:var(--abstand-4) 0 var(--abstand-2);color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.fb-akt{display:flex;justify-content:flex-end;margin-top:var(--abstand-6)}
.gr-modal .gr-preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--abstand-4);margin:var(--abstand-2) 0 var(--abstand-6);font-family:var(--mono);font-size:var(--grad-9);line-height:var(--grad-9-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-titel);font-variant-numeric:tabular-nums;color:var(--text)}
/* Kostenblatt (E14, Scheibe 4b): Hülle aus 3b-1 (Blatt am Handy, Dialog am Desktop), im Anruf auf der Bühne; Satz --grad-4, der Preis
   als große Zahl (D12: Zahl in Mono, Einheit klein in Zweittext; „bis zu … je Person“ eine Stufe kleiner), Herleitung, Guthaben und
   Hinweise in --grad-2 Zweittext. Obergrenze als Chips B15 (32 hoch, Trefferfläche 44, gewählt Akzent leise mit Rand). Knöpfe wie B1:
   am Handy untereinander gleich breit mit dem Hauptknopf oben, ab 600 px rechts in einer Reihe mit Abbrechen links; der Kaufknopf folgt
   dem Akzent (Entscheidung 7), der Startfokus liegt auf Abbrechen (modal). „Gruppenanruf beendet“ kommt nach dem Auflegen über dem
   Chat und folgt dem Thema. Alle Pflichtteile der Texte bleiben (Preis jetzt und höchstens, wer zahlt, Stand, gratis zurück). */
.gr-modal .gr-preis small{font-family:var(--schrift);font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-mittel);letter-spacing:0;color:var(--zweit)}
.gr-modal .gr-preis.gr-je{font-size:var(--grad-8);line-height:var(--grad-8-zh)}
.gr-modal .gr-klein{margin:0 0 var(--abstand-4);font-size:var(--grad-2);line-height:var(--zh-weit);color:var(--zweit)}
.gr-wahl{display:flex;flex-wrap:wrap;gap:max(var(--abstand-3),calc(var(--treffer-min) - var(--hoehe-dicht))) var(--abstand-3);margin:var(--abstand-2) 0 var(--abstand-6)} /* Zeilenabstand so, dass sich die Trefferflächen (44) nicht überlappen */
.gr-wahl button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--hoehe-dicht);padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);
  font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-mittel);line-height:var(--zh-knapp);white-space:nowrap;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.gr-wahl button.zahl{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:var(--hoehe-tipp)}
.gr-wahl button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.gr-wahl button:hover{background:var(--f3)}}
.gr-wahl button:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gr-wahl button.an{border-color:var(--akzent-text);background:var(--akzent-leise);color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.gr-aktionen{display:flex;flex-direction:column-reverse;align-items:stretch;gap:var(--abstand-4);margin-top:var(--abstand-8)}
@media(min-width:600px){.gr-aktionen{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}}
.gr-aktionen button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);
  font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(min-width:760px){.gr-aktionen button{padding-left:var(--abstand-7);padding-right:var(--abstand-7);font-size:var(--grad-2)}}
@media(hover:hover){.gr-aktionen button:hover{background:var(--f3)}}
.gr-aktionen button:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gr-aktionen .gr-ja{border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.gr-aktionen .gr-ja:hover{background:var(--akzent-hover)}}
.gr-aktionen .gr-ja:active{background:var(--akzent-gedrueckt)}
.gr-aktionen .gr-ja:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:progress;transform:none}
.ruf-ki{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);min-width:0;max-width:100%;min-height:var(--hoehe-knopf);margin-top:0;padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.ruf-ki:hover:not(:disabled){background:var(--f3)}}
.ruf-ki:active:not(:disabled){background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ruf-ki.on{border-color:var(--akzent-text);color:var(--akzent-text);background:var(--akzent-leise)}
.ruf-ki:disabled{color:var(--zweit);cursor:progress}
/* Scheibe 2b (C27 Anruf-Rahmen): Abschrift und Zusammenfassung unter dem Fuß, mit Linie 2 abgesetzt; „Wortlaut anzeigen“ als
   Aufklapper (C41, neutral: Chevron und Text in Textfarbe, 44 hoch, Desktop 36), die Zeilen mit Linie links. */
.ruf-panel[hidden]{display:none}
.ruf-panel{width:100%;margin-top:var(--abstand-1);padding-top:var(--abstand-4);border-top:var(--rand) solid var(--linie-2);display:flex;flex-direction:column;gap:var(--abstand-4);font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
.ruf-roh{margin-top:var(--abstand-1);color:var(--text)}
.ruf-roh summary{position:relative;display:flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);margin:0 calc(-1 * var(--abstand-3));padding:0 var(--abstand-3);border-radius:var(--r-s);list-style:none;font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ruf-roh summary::-webkit-details-marker{display:none}
.ruf-roh summary:focus-visible{outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:calc(-1 * var(--fokus-breite))}
.ruf-roh summary::before{content:"";width:var(--ic-18);height:var(--ic-18);flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dauer) var(--kurve)}
.ruf-roh[open] summary::before{transform:rotate(180deg)}
@media(hover:hover){.ruf-roh summary:hover{background:var(--f3)}}
.ruf-roh summary:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ruf-zeile{margin:var(--abstand-4) 0 0;padding-left:var(--abstand-5);border-left:var(--rand-stark) solid var(--linie-2);line-height:var(--grad-3-zh-text)}
/* Beide Aufnahmen EINES Anrufs stehen im selben Rahmen — links die eine Stimme,
   rechts die andere, jede in ihrer Farbe. Unten drunter der eine Knopf fuer das
   ganze Gespraech (Hennys Wunsch 20.09.). Scheibe 2b (C27): Rand Grün, Fläche Grün-leise, Radius --r-l, Polster 8/10; oben der
   Anruf-Eintrag als Überschrift, Blasen bis 88 %, unten der Fuß mit Linie 2 (Podcast und KI-Knopf in einem Fuß). */
.ruf-box{align-self:stretch;display:flex;flex-direction:column;gap:var(--abstand-3);margin:0;padding:var(--abstand-4) var(--abstand-5) var(--abstand-5);border:var(--rand) solid var(--gruen);border-radius:var(--r-l);background:var(--gruen-leise)}
.ruf-kopf{align-self:center;font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
/* Name ueber der Aufnahme: klein, ruhig, eine Zeile. Scheibe 2b (C20 Sprecher): Grad 1, fett, Zweittext. */
.memo-kopf{margin-bottom:var(--abstand-2);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-fett);color:var(--zweit)}
/* Datum in der Anruf-Zeile (die Ueberschrift des Rahmens). */
.ce-date{font-family:var(--mono);font-size:var(--grad-1);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp)}
/* Beschriftung neben der Hive-Wabe. */
.kx{min-width:0}
.ruf-box>.bubble{max-width:88%}
.ruf-fuss{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--abstand-3);margin-top:var(--abstand-1);padding-top:var(--abstand-4);border-top:var(--rand) solid var(--linie-2)}
.ruf-fuss+.ruf-fuss{margin-top:calc(-1 * var(--abstand-1));padding-top:0;border-top:0}
.ruf-fuss .ruf-ki{margin-top:0}
.ruf-fuss .ruf-pod{position:relative;gap:var(--abstand-4);min-height:var(--hoehe-knopf);max-width:100%;padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ruf-fuss .ruf-pod .ic{width:var(--ic-knopf);height:var(--ic-knopf);flex:none}
@media(hover:hover){.ruf-fuss .ruf-pod:hover{background:var(--f3)}}
.ruf-fuss .ruf-pod:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ruf-box .ruf-panel{margin-top:0}
/* Knopf je Aufnahme: steht IN der Blase, also in der Farbe des Sprechers. Scheibe 2b (C27 KI-Knopf .btn.k): 32 hoch (Trefferfläche
   44), Rand, Wabe in Akzent-Text, Text und Preis dürfen umbrechen; offen in Akzent-leise. 12 Abstand nach oben, damit sich seine
   Trefferfläche und die der Tempo-Chips darüber nicht überdecken (8 + 6 Überstand). */
.ruf-txt{position:relative;display:inline-flex;align-items:center;gap:var(--abstand-3);align-self:flex-start;min-width:0;max-width:100%;min-height:var(--hoehe-dicht);margin-top:var(--abstand-6);padding:var(--abstand-2) var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--grad-1-zh);text-align:left;white-space:normal;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ruf-txt::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.ruf-txt .ic,.ruf-ki .ic{width:var(--ic-18);height:var(--ic-18);flex:none;color:var(--akzent-text)}
.ai-act .ic{width:.95rem;height:.95rem;flex:0 0 auto}
@media(hover:hover){.ruf-txt:hover:not(:disabled){background:var(--f3)}}
.ruf-txt:active:not(:disabled){background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.ruf-txt.on{border-color:var(--akzent-text);color:var(--akzent-text);background:var(--akzent-leise)}
.ruf-txt:disabled{color:var(--zweit);cursor:progress}
.ruf-text{margin-top:var(--abstand-2);padding-top:var(--abstand-2);border-top:var(--rand) solid var(--linie-2);font-size:var(--grad-3);line-height:var(--grad-3-zh-text);white-space:pre-wrap}
/* Das X sitzt neben der Pille. Scheibe 2b (C26 Entfernen, .ik.k): 32 mit Trefferfläche 44, im Ruhezustand sichtbar in Zweittext
   (vorher halb durchsichtig), Zeichen statt „✕“; Hover Rot auf Rot-leise. */
.ce-x{position:relative;display:inline-grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);flex:none;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:none;color:var(--zweit);cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.ce-x::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.ce-x .ic{width:var(--ic-18);height:var(--ic-18);transform:rotate(45deg)}
@media(hover:hover){.ce-x:hover{color:var(--rot);background:var(--rot-leise)}}
.ce-x:active{color:var(--text);background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* Pläne & Preise: Stufen & Guthaben (Scheibe 5b, bauplan 3.12, Bildschirm 3.11). Unterseite unter Ich (Kopf D7 aus 1b), vor dem Rahmen
   noch als Dialog. Kontostand E29, Töpfe E30 im Kasten C38, Verlauf E31, Segment B14, Stufenkarten E32, Pakete E34, Pflichtzeilen E35,
   Abo-Zeile E36; „Kostenpflichtig …“ als Kaufknopf B3 in Akzent, Rechtslinks als Textlink B4. Am Handy eine Spalte; am Desktop steht die
   Seite in voller Breite neben der Rail (die Mitte tritt zurück, kein Spaltengriff), links das Konto (Kontostand, Töpfe, Verlauf), rechts
   der Kauf (Stufen, Pakete, Pflichtzeilen), bei wenig Platz untereinander. Zahlen in Mono mit Tabellenziffern; Hover nur bei Maus (4.6). */
/* Credit-Symbol (Wabe + Punkt) inline neben Zahlen. */
.cr-sym{width:.95em;height:.95em;color:var(--marke);vertical-align:-.12em;margin-left:.1em}
@media(min-width:760px){
  .app[data-ziel="ich"][data-unterseite="guthaben"]{grid-template-columns:auto minmax(0,1fr)}
  .app[data-ziel="ich"][data-unterseite="guthaben"]>.pane,.app[data-ziel="ich"][data-unterseite="guthaben"] .col-griff{display:none}
}
.plans{display:flex;flex-direction:column;gap:var(--abstand-10);color:var(--text)}
.plans.guthaben-seite{padding:var(--abstand-6) calc(var(--seite-handy) + env(safe-area-inset-right,0px)) calc(var(--abstand-16) + env(safe-area-inset-bottom,0px)) calc(var(--seite-handy) + env(safe-area-inset-left,0px))}
.plans .gs-konto,.plans .gs-kauf{display:flex;flex-direction:column;gap:var(--abstand-10);min-width:0}
.plans :is(a,button){scroll-margin:var(--abstand-6)}
@media(min-width:760px){
  .plans.guthaben-seite{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:var(--abstand-12) var(--abstand-16);padding:var(--abstand-10) var(--seite-mitte) var(--abstand-20)}
  .plans.guthaben-seite>.gs-konto{flex:1 1 calc(288 * var(--tp))}
  .plans.guthaben-seite>.gs-kauf{flex:999 1 calc(560 * var(--tp))}
}
/* Kapitälchen-Überschrift (C4) mit Zusatz und Weg rechts (B4) */
:is(.plans,.gv) .ueber{margin:0;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.plans .ueber-zusatz{font-weight:var(--gewicht-mittel);letter-spacing:0;text-transform:none}
.plans .gs-ueber{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-4) var(--abstand-8);margin-bottom:var(--abstand-4)}
.plans .plans-lead{margin:0 0 var(--abstand-4);color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
/* E29 Kontostand */
:is(.plans,.gv) .stand{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--abstand-1) var(--abstand-6);padding-top:var(--abstand-3)}
:is(.plans,.gv) .stand>.ueber{grid-column:1}
:is(.plans,.gv) .st-stufe,:is(.plans,.gv) .st-euro{grid-column:2;justify-self:end;color:var(--zweit);font-size:var(--grad-4);line-height:var(--grad-4-zh)}
:is(.plans,.gv) .st-stufe b{color:var(--text);font-weight:var(--gewicht-halb)}
:is(.plans,.gv) .st-euro{font-family:var(--mono);font-variant-numeric:tabular-nums}
:is(.plans,.gv) .st-zahl{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--abstand-4);min-width:0;font-family:var(--mono);font-size:var(--grad-10);line-height:var(--grad-10-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-titel);font-variant-numeric:tabular-nums}
:is(.plans,.gv) .st-zahl small{font-family:var(--schrift);font-size:var(--grad-4);font-weight:var(--gewicht-mittel);letter-spacing:0;color:var(--zweit)}
@media(min-width:760px){:is(.plans,.gv) .st-zahl{font-size:var(--grad-9);line-height:var(--grad-9-zh)}:is(.plans,.gv) .st-zahl small,:is(.plans,.gv) .st-stufe,:is(.plans,.gv) .st-euro{font-size:var(--grad-3);line-height:var(--grad-3-zh)}}
/* E36 Abo-Zeile und Hinweis der Kasse */
.plans .abo-zeile{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--abstand-2) var(--abstand-4);min-height:var(--zeile-dicht);margin:0;color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.plans .abo-zeile>.ic{flex:none;width:var(--ic-16);height:var(--ic-16);margin-top:calc((var(--grad-2-zh) - var(--ic-16)) / 2);color:var(--zweit)}
.plans .abo-zeile.gekuendigt>.ic{color:var(--gelb)}
.plans .abo-satz{flex:1 1 12em;min-width:0;overflow-wrap:break-word}
.plans .abo-tag{flex:none;padding:0 var(--abstand-3);border:var(--rand) solid var(--gelb);border-radius:var(--r-xs);background:var(--gelb-leise);color:var(--gelb);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb)}
.plans .gs-hinweis{margin:0;padding:var(--abstand-5) var(--abstand-7);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f2);color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.plans .gs-fehler{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4) var(--abstand-8)}
.plans .gs-fehler .add-hint{margin:0}
.plans .gs-nochmal,.gv .gv-mehr{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.plans .gs-nochmal:hover,.gv .gv-mehr:not(:disabled):hover{background:var(--f3)}}
.plans .gs-nochmal:active,.gv .gv-mehr:not(:disabled):active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
/* C38 Kasten mit Kopf und Fuß; E30 Töpfe */
:is(.plans,.gv) .box{margin:0;overflow:hidden;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.plans .box-kopf{padding:var(--abstand-1) var(--abstand-7);border-bottom:var(--rand) solid var(--linie);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel);text-align:right}
.plans .box-fuss{padding:var(--abstand-3) var(--abstand-7);border-top:var(--rand) solid var(--linie);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh)}
.plans .topf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 var(--abstand-6);padding:calc(var(--abstand-3) * var(--dichte,1)) var(--abstand-7)}
.plans .topf+.topf{border-top:var(--rand) solid var(--linie)}
.plans .tf-name{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.plans .tf-zahl{font-family:var(--mono);font-size:var(--grad-5);line-height:var(--grad-4-zh);font-weight:var(--gewicht-fett);font-variant-numeric:tabular-nums;text-align:right}
.plans .tf-regel{grid-column:1/-1;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh)}
.plans .tf-regel b{font-family:var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
@media(min-width:760px){.plans .tf-name{font-size:var(--grad-3);line-height:var(--grad-3-zh)}.plans .tf-zahl{font-size:var(--grad-4)}}
/* E31 Verlauf (Vorschau): „Alle Buchungen“ als Textlink rechts in der Überschrift, Zeilen wie ein Kontoauszug; am Handy die letzten drei */
.plans .verlauf-alle{position:relative;margin:0 calc(-1 * var(--abstand-2)) 0 auto;padding:var(--abstand-1) var(--abstand-2);border:0;border-radius:var(--r-xxs);background:none;color:var(--akzent-text);font:inherit;font-size:var(--grad-2);line-height:var(--grad-2-zh);font-weight:var(--gewicht-halb);text-decoration:underline;text-decoration-thickness:var(--rand);text-underline-offset:.14em;cursor:pointer}
.plans .verlauf-alle::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.plans .verlauf-alle:hover{background:var(--f3);color:var(--text)}}
.plans .verlauf-alle:active{background:var(--f3);text-decoration-thickness:var(--rand-stark)}
.plans .buchungen{margin:0;padding:0;list-style:none}
.plans .buchung{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-6);min-height:calc(var(--zeile-desktop) * var(--dichte,1));padding:calc(var(--abstand-2) * var(--dichte,1)) var(--abstand-7)}
.plans .buchung+.buchung{border-top:var(--rand) solid var(--linie)}
.plans .bu-was{display:flex;align-items:baseline;gap:var(--abstand-5);min-width:0;font-size:var(--grad-3);line-height:var(--grad-3-zh);hyphens:auto;overflow-wrap:break-word}
.plans .bu-zeit{flex:none;min-width:3.6em;color:var(--zweit);font-family:var(--mono);font-size:var(--grad-1);font-variant-numeric:tabular-nums}
.plans .bu-betrag{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-family:var(--mono);font-size:var(--grad-4);line-height:var(--grad-4-zh-eng);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;white-space:nowrap}
.plans .bu-betrag small{color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel)}
.plans .bu-betrag.plus{color:var(--gruen)}
.plans .gs-leer{margin:0;padding:var(--abstand-5) var(--abstand-7);color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh)}
.plans .gs-leer.err{color:var(--text)}
@media(max-width:759px){.plans .buchung:nth-child(n+4){display:none}}
@media(min-width:760px){.plans .bu-was,.plans .bu-betrag{font-size:var(--grad-2)}}
/* B14 Segment Monatlich/Jährlich: Lücken in der Randfarbe als Trenner, gewählt Akzent-leise mit Rand innen, Fokus innen */
.plans .plans-int{display:inline-flex;flex-wrap:wrap;gap:var(--rand);max-width:100%;overflow:hidden;border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--feldrand)}
.plans .plans-int-b{position:relative;flex:1 1 auto;min-height:var(--hoehe-segment);padding:var(--abstand-2) var(--abstand-7);border:0;border-radius:0;background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-mittel);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.plans .plans-int-b.on{background:var(--akzent-leise);color:var(--akzent-text);font-weight:var(--gewicht-halb);box-shadow:inset 0 0 0 var(--rand) var(--akzent-text)}
.plans .plans-int-b.on:not(:focus-visible){outline:var(--rand) solid transparent;outline-offset:calc(-1 * var(--rand))}
@media(hover:hover){.plans .plans-int-b:not(.on):hover{background:var(--f3)}}
.plans .plans-int-b:not(.on):active{background:var(--linie-2)}
.plans .plans-int-b:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.plans .plans-int-b.on:focus-visible{outline-offset:calc(-1 * (var(--fokus-breite) + var(--rand-stark)))}
@media(min-width:760px){.plans .plans-int-b{font-size:var(--grad-2)}}
/* E32 Stufenkarten: am Handy untereinander, am Desktop so viele nebeneinander, wie Platz haben (bei 1440 alle vier). Name und Preis oben,
   der Kaufknopf direkt darunter, dann die Leistungen; hervorgehoben (.feat) mit Akzent-Kante und Hauch, Name in Akzent-Text. */
.plans .pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(176 * var(--tp))),1fr));gap:var(--abstand-4);margin:0}
.plans .pcard{position:relative;display:flex;flex-direction:column;gap:var(--abstand-4);min-width:0;padding:var(--abstand-3) var(--abstand-7) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);box-shadow:none}
.plans .pcard.feat{border-color:var(--akzent-kante);background:var(--akzent-hauch)}
.plans .stufe-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--abstand-1) var(--abstand-6)}
.plans .stufe-name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-4);min-width:0;margin:0;font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-fett)}
.plans .pcard.feat .pcard-name{color:var(--akzent-text)}
.plans .stufe-tag{display:inline-flex;align-items:center;padding:0 var(--abstand-3);border-radius:var(--r-xs);background:var(--f2);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-plakette)}
.plans .pcard.feat .stufe-tag{background:var(--akzent-leise);color:var(--akzent-text)}
.plans .pcard-price{font-family:var(--mono);font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-fett);color:var(--text);letter-spacing:var(--lauf-knapp);font-variant-numeric:tabular-nums;white-space:nowrap}
.plans .pcard-price span{font-family:var(--schrift);font-size:var(--grad-2);font-weight:var(--gewicht-mittel);letter-spacing:0;color:var(--zweit)}
.plans .pcard-store{flex-basis:100%;margin:0;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh)}
.plans .pcard-cta{position:relative;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);margin:0;padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;box-shadow:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.plans .pcard-cta.kauf{min-height:var(--hoehe-gross);padding:var(--abstand-3) var(--abstand-10);border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.plans .pcard-cta:not(:disabled):hover{background:var(--f3)}.plans .pcard-cta.kauf:not(:disabled):hover{background:var(--akzent-hover)}}
.plans .pcard-cta:not(:disabled):active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.plans .pcard-cta.kauf:not(:disabled):active{background:var(--akzent-gedrueckt)}
.plans .pcard-cta:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:progress;transform:none}
.plans .pcard-cta.cur{min-height:0;padding:0;border:0;background:none;color:var(--zweit);font-size:var(--grad-2);font-weight:var(--gewicht-mittel);text-align:left;cursor:default}
.plans .pcard.dein-plan>.pcard-cta.cur{display:none}
.plans .pcard-lines{display:flex;flex-direction:column;gap:var(--abstand-2);margin:0;padding:0;list-style:none}
.plans .pcard-lines li{display:flex;align-items:flex-start;gap:var(--abstand-3);color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.plans .pcard-lines li .ic{flex:none;width:var(--ic-14);height:var(--ic-14);margin-top:calc((var(--grad-2-zh) - var(--ic-14)) / 2);color:var(--zweit)}
.plans .pcard-lines li.bald{color:var(--zweit)}
.plans .pl-t{flex:1;min-width:0;hyphens:auto;overflow-wrap:break-word}
.plans .pl-bald{flex:none;padding:0 var(--abstand-2);border:var(--rand) solid var(--linie-2);border-radius:var(--r-xxs);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);white-space:nowrap}
@media(max-width:759px){.plans .pcards{grid-template-columns:minmax(0,1fr)}}
@media(min-width:760px){.plans .pcards{gap:var(--abstand-5)}.plans .pcard-cta{align-self:stretch;font-size:var(--grad-2)}.plans .pcard-cta.kauf{min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-5)}.plans .pcard-cta.cur{align-self:flex-start}}
/* E34 Pakete: je Paket ein Knopf als Karte (Guthaben, Preis der Kasse, darunter „Kostenpflichtig kaufen“ in der Akzentfläche); der Inhalt
   bleibt der Kasse (pt-k, pt-p) und kommt nach der Rückkehr von Stripe über data-busy-prev zurück. */
.plans .plans-topup{margin:0}
.plans .plans-topup .pt-h{margin:0 0 var(--abstand-4)}
.plans .pt-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(180 * var(--tp))),1fr));gap:var(--abstand-4)}
@media(max-width:759px){.plans .pt-packs{grid-template-columns:minmax(0,1fr)}}
.plans .pt-pack{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-2);box-sizing:border-box;min-width:0;margin:0;padding:var(--abstand-5) var(--abstand-7) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-4);line-height:var(--zh-knapp);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.plans .pt-pack .pt-n{font-family:var(--mono);font-size:var(--grad-7);line-height:var(--grad-7-zh);font-weight:var(--gewicht-fett);font-variant-numeric:tabular-nums}
.plans .pt-pack .pt-n small{margin-left:var(--abstand-3);font-family:var(--schrift);font-size:var(--grad-2);font-weight:var(--gewicht-mittel);color:var(--zweit)}
.plans .pt-pack .pt-p{order:1;font-family:var(--mono);font-size:var(--grad-3);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums}
.plans .pt-pack .pt-k{order:2;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100%;min-height:var(--hoehe-gross);margin-top:var(--abstand-3);padding:var(--abstand-3) var(--abstand-10);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font-size:var(--grad-4);font-weight:var(--gewicht-halb);text-align:center;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.plans .pt-pack:not(:disabled):hover{background:var(--f3)}.plans .pt-pack:not(:disabled):hover .pt-k{background:var(--akzent-hover)}}
.plans .pt-pack:not(:disabled):active .pt-k{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.plans .pt-pack:disabled{cursor:default}
.plans .pt-pack:disabled .pt-k{border-color:var(--linie-2);background:var(--f2);color:var(--zweit)}
@media(min-width:760px){.plans .pt-pack .pt-k{min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-8);font-size:var(--grad-2)}}
/* E35 Pflichtzeilen: die Knöpfe der Kasse mit Rand in einer Reihe (Stripe: Zahlung & Abo verwalten, dazu Kündigen und Widerrufen aus
   rechtsKnoepfe als Knöpfe; Store: Käufe wiederherstellen, Abo verwalten), darunter Recht und Bedingungen mit Textlinks (B4). */
.plans .pflichtzeilen{display:flex;flex-wrap:wrap;align-items:center}
.plans .pflichtzeilen>.set-link,.plans .kasse-stripe>.set-link+.plans-foot>a{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:auto;max-width:100%;min-height:var(--hoehe-knopf);margin:0 var(--abstand-4) var(--abstand-4) 0;padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.plans .kasse-stripe>.set-link+.plans-foot{display:contents;font-size:0}
@media(hover:hover){.plans .pflichtzeilen>.set-link:not(:disabled):hover,.plans .kasse-stripe>.set-link+.plans-foot>a:hover{background:var(--f3)}}
.plans .pflichtzeilen>.set-link:not(:disabled):active,.plans .kasse-stripe>.set-link+.plans-foot>a:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.plans .pflichtzeilen>.set-link:focus-visible{outline-offset:var(--fokus-abstand)}
.plans .pflichtzeilen>.set-link:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit)}
.plans .pflichtzeilen>.plans-foot{flex-basis:100%;margin:0 0 var(--abstand-4);color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
.plans .pflichtzeilen>.plans-foot a{color:var(--akzent-text);font-weight:var(--gewicht-halb);text-decoration:underline;text-decoration-thickness:var(--rand);text-underline-offset:.14em}
@media(hover:hover){.plans .pflichtzeilen>.plans-foot a:hover{color:var(--text)}}
@media(min-width:760px){.plans .pflichtzeilen>.set-link,.plans .kasse-stripe>.set-link+.plans-foot>a{font-size:var(--grad-2)}.plans .pflichtzeilen>.plans-foot{font-size:var(--grad-1);line-height:var(--grad-1-zh)}}
/* E31 ganzer Verlauf (Dialog): Kasten mit Tagen als Kapitälchen, je Zeile Uhrzeit und Stand danach in Mono, „Mehr laden“ als Knopf B1 */
.gv{display:flex;flex-direction:column;gap:var(--abstand-6);color:var(--text)}
.gv-naechst{margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.gv-liste{display:flex;flex-direction:column}
.gv-liste>.add-hint{margin:0;padding:var(--abstand-5) var(--abstand-7)}
.gv-tag{margin:0;padding:calc(var(--abstand-5) * var(--dichte,1)) var(--abstand-7) var(--abstand-2);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.gv-tag:not(:first-child){border-top:var(--rand) solid var(--linie)}
.gv-z{display:flex;justify-content:space-between;align-items:center;gap:var(--abstand-6);min-height:calc(var(--zeile-desktop) * var(--dichte,1));padding:calc(var(--abstand-2) * var(--dichte,1)) var(--abstand-7)}
.gv-z+.gv-z{border-top:var(--rand) solid var(--linie)}
.gv-l{min-width:0}
.gv-t{font-size:var(--grad-3);line-height:var(--grad-3-zh);hyphens:auto;overflow-wrap:break-word}
.gv-r{flex-shrink:0;text-align:right}
.gv-b{font-family:var(--mono);font-size:var(--grad-4);line-height:var(--grad-4-zh-eng);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums}
.gv-b.plus{color:var(--gruen)}
.gv-s{margin-top:var(--abstand-1);color:var(--zweit);font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-variant-numeric:tabular-nums}
.gv .gv-mehr{align-self:center}
.gv-mehr[hidden]{display:none}
.gv .gv-mehr:disabled{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:progress}
@media(min-width:760px){.gv-t,.gv-b{font-size:var(--grad-2)}.gv .gv-mehr{font-size:var(--grad-2)}}
.plans-foot{margin-top:var(--abstand-2);color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh)}
.plans-foot a{color:var(--akzent-text);font-weight:var(--gewicht-halb);text-decoration:underline;text-decoration-thickness:var(--rand);text-underline-offset:.14em}
/* Desktop: breite Modals (Pläne/Farben etc.) füllen mehr vom Chat statt Mobile-Schmalheit. */
/* Scheibe 3b-1 (D11): gewöhnliche Dialoge stehen höchstens --breite-dialog breit (Dialog-Block); breiter bleiben nur die
   Familien, deren Inhalt die Breite braucht: Stufen & Guthaben und Meldungen (.wide), das KI-Fenster (.gen, Raster mit vier
   Spalten), die PDF-Vorschau; das Podcast-Studio (.modal-breit) hat seine eigene Regel. */
@media(min-width:760px){
  .modal.gen,.modal:has(> .pdf-wrap){max-width:42rem}
  .modal.wide{max-width:min(64rem,94vw)}
}
.chat-head .name{cursor:inherit}
@media(hover:hover){.chat-head button.htitle:hover .name{text-decoration:underline;text-underline-offset:.14em}}

/* Medien-Versand: Anhängen-Button + Bild-/Datei-Bubbles + Lightbox + PDF-Preview. Scheibe 2b: Medien-Blase fast randlos (schmaler
   Rand, den medienMass einrechnet), Unterschrift mit Polster 4/8 (C21). */
.bubble.media .bubble-body{--bubble-pad-r:.25rem;padding:.25rem}
.bubble.media .cap{padding:var(--abstand-2) var(--abstand-4) 0;white-space:pre-wrap;overflow-wrap:anywhere}
/* Bild und Video geben die Breite vor, der Text darunter folgt ihr.
   "width:0" zusammen mit "min-width:100%" ist der Kniff: so zaehlt der Text beim Ausmessen der
   Blase gar nicht mit, bekommt danach aber genau deren Breite. Ohne ihn macht
   eine lange Bildunterschrift die Blase breit und das Bild klebt links. */
.bubble.media.mrat .bubble-body{width:max-content;max-width:100%}
.bubble.media.mrat .bubble-body>*{width:0;min-width:100%;box-sizing:border-box}
.bubble.media.mrat .bubble-body>img,.bubble.media.mrat .bubble-body>video{min-width:0}
/* Bild (C21): Radius --r-s, Fläche 3 als Platzhalter, Lupe als Zeiger; das Bild steht im Knopf .msg-bild („Bild öffnen“), so breit wie
   das Bild (medienMass), der Fokusring liegt direkt am Bild auf dem schmalen Blasenrand (dort hält Akzent-Text 4,5:1, auf dem Motiv
   selbst nicht). */
.msg-img{max-width:100%;width:auto;height:auto;border-radius:var(--r-s);display:block;cursor:zoom-in;background:var(--f3)}
.msg-bild{display:block;max-width:100%;padding:0;border:0;border-radius:var(--r-s);background:none;color:inherit;font:inherit;line-height:0;cursor:zoom-in}
.bubble.media.mrat .bubble-body>.msg-bild{width:auto;min-width:0}
.msg-bild:focus-visible{outline-offset:0}
/* Platzhalter (C25) mit Zeichen statt Emoji; Farbe setzt der Verlauf (2a). */
.bubble-body .platzhalter{display:inline-flex;align-items:center;gap:var(--abstand-3)}
.bubble-body .platzhalter .ic{width:var(--ic-16);height:var(--ic-16);flex:none}
/* Dateikarte (C23): Knopf mit Zeichen (Dokument bei PDF, sonst Anhang) auf Zitatfläche, Name halbfett einzeilig, Größe und Art in
   Zweittext; PDF öffnet die Vorschau, sonst Herunterladen. Hover Fläche 3, gedrückt Fläche 3 mit Schrumpfen (Zweittext). */
.file-card{display:flex;align-items:center;gap:var(--abstand-5);width:100%;min-width:calc(180 * var(--tp));max-width:calc(300 * var(--tp));padding:var(--abstand-3) var(--abstand-4) var(--abstand-3) var(--abstand-3);border:0;border-radius:var(--r-s);background:none;color:inherit;font:inherit;line-height:var(--zh-knapp);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.file-card:hover{background:var(--f3)}}
.file-card:active{background:var(--f3);transform:scale(calc(1 - .02 * var(--bewegung)))}
.file-card:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.file-card .fc-ic{display:grid;place-items:center;width:var(--avatar-40);height:var(--avatar-40);flex:none;border-radius:var(--r-s);background:var(--zitat-flaeche);color:var(--text)}
.file-card .fc-ic .ic{width:var(--ic-24);height:var(--ic-24)}
.file-card .fc-meta{min-width:0;display:flex;flex-direction:column;gap:var(--abstand-1)}
.file-card .fc-name{font-weight:var(--gewicht-halb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-card .fc-sub{font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
/* Große Dateien (App-Session 30.10.2026), gezeichnet in Scheibe 14 nach C23 und C25: die Hochlade-Blase ist eine Medien-Blase wie die
   empfangene Datei, darin die Datei-Karte (Zeichen wie fileCard), Abbrechen am Ende als Icon-Knopf 32 mit Trefferfläche 44; darunter
   der Balken bündig mit dem Zeichenfeld (Spur Linie 2, Wert Marke, Radius voll). Unterbrochen („Fortsetzen“ sichtbar): Wert in Zweittext,
   „Fortsetzen“ als kleiner Randknopf mit dem Zeichen „noch einmal“. Lädt eine große Datei im Secret Chat ([data-laedt]), steht derselbe
   Balken unten in der Karte (--fortschritt 0 bis 1, setzt grossE2eLaden). */
.gd-karte{min-width:0;cursor:default}   /* schmal mit großer Schrift: die Karte bleibt in der Blase, der Name kürzt */
@media(hover:hover){.gd-karte:hover{background:none}}
.gd-karte:active{background:none;transform:none}
.gd-karte .fc-meta{flex:1 1 auto}
.gd-karte .fc-sub{font-variant-numeric:tabular-nums;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}   /* eng: an Silben trennen statt mitten im Wort */
.gd-weg{position:relative;display:grid;place-items:center;flex:none;width:var(--hoehe-ik);height:var(--hoehe-ik);margin:0;padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--zweit);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.gd-weg::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.gd-weg:hover{background:var(--f3);color:var(--text)}}
.gd-weg:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gd-weg .ic{width:var(--ic-18);height:var(--ic-18)}
.gd-balken{display:block;box-sizing:border-box;width:calc(100% - 2 * var(--abstand-3));height:4px;margin:var(--abstand-1) var(--abstand-3) var(--abstand-3);border:0;border-radius:var(--r-voll);background:var(--linie-2);overflow:hidden;-webkit-appearance:none;appearance:none}
.gd-balken::-webkit-progress-bar{background:var(--linie-2);border-radius:var(--r-voll)}
.gd-balken::-webkit-progress-value{background:var(--marke);border-radius:var(--r-voll);transition:width var(--dauer) var(--kurve)}
.gd-balken::-moz-progress-bar{background:var(--marke);border-radius:var(--r-voll)}
.gd-blase:has(.gd-weiter:not([hidden])) .gd-balken::-webkit-progress-value{background:var(--zweit)}
.gd-blase:has(.gd-weiter:not([hidden])) .gd-balken::-moz-progress-bar{background:var(--zweit)}
.gd-weiter{position:relative;display:inline-flex;align-self:flex-start;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-dicht);margin:0 var(--abstand-3) var(--abstand-3);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.gd-weiter::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,var(--treffer-min));transform:translateY(-50%)}
@media(hover:hover){.gd-weiter:hover{background:var(--f3)}}
.gd-weiter:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.gd-weiter .ic{flex:none;width:var(--ic-16);height:var(--ic-16)}
.gd-weiter[hidden]{display:none}
.file-card[data-laedt]{position:relative;cursor:progress}
.file-card[data-laedt]::after{content:"";position:absolute;inset-inline:var(--abstand-3);bottom:var(--abstand-1);height:3px;border-radius:var(--r-voll);background:linear-gradient(to right,var(--marke) calc(var(--fortschritt,0) * 100%),var(--linie-2) 0);pointer-events:none}
[dir="rtl"] .file-card[data-laedt]::after{background:linear-gradient(to left,var(--marke) calc(var(--fortschritt,0) * 100%),var(--linie-2) 0)}
/* Wird gesendet (C25, Scheibe 14): Foto, Video, Datei, Standort und Aufnahme mit Zeichen statt Emoji; das Zeichen pulsiert wie
   „Wird entschlüsselt …“ (12b), ruhig bei „Bewegung reduzieren“. */
.bubble-body .sende-lade{color:var(--zweit)}
.bubble-body .sende-lade .ic{animation:ki-puls calc(var(--dauer) * 8) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.bubble-body .sende-lade .ic{animation:none}}
/* Sticker (App-Session 01.11.2026), gezeichnet in Scheibe 14: im Chat ohne Blase, höchstens 160 tp und 40 % der Breite, der Fuß darunter.
   Das Blatt: „Bearbeiten“ als Textknopf in Marke-Text am Ende über dem Raster; Kacheln quadratisch (mindestens 88 px, mit großer Schrift
   70 tp: am Handy drei je Reihe, mit Text XXL zwei) auf Fläche 1 mit Linie 2 (Radius m, Hover Fläche 3,
   gedrückt schrumpft, Fokusring außen in der Lücke); die erste „Neuer Sticker“ mit gestricheltem Feldrand, Plus in Marke, Preis in Mono wie C19. Beim
   Bearbeiten an jeder Kachel ein rundes Kreuz an der oberen Ecke (Fläche rot, Zeichen auf Rot). */
.bubble.sticker,.bubble.sticker .bubble-body{background:none!important;border-color:transparent!important;box-shadow:none!important}
.bubble.sticker .msg-bild{background:none;padding:0}
.bubble.sticker .msg-img{width:auto!important;height:auto!important;max-width:min(calc(160 * var(--tp)),40vw)!important;max-height:calc(160 * var(--tp))!important;background:none!important;border-radius:0!important;aspect-ratio:auto!important}
.sticker-blatt{display:flex;flex-direction:column;gap:var(--abstand-4)}
.sticker-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(88px,calc(70 * var(--tp))),1fr));gap:var(--abstand-3)}
.sticker-kachel,.sticker-neu{position:relative;aspect-ratio:1;display:grid;place-items:center;min-width:0;margin:0;padding:var(--abstand-4);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.sticker-kachel img{display:block;max-width:100%;max-height:100%;object-fit:contain}
@media(hover:hover){.sticker-kachel:hover,.sticker-neu:hover{background:var(--f3)}}
.sticker-kachel:active,.sticker-neu:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.sticker-neu{align-content:center;gap:var(--abstand-2);border:var(--rand) dashed var(--feldrand);background:none;color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);text-align:center}
.sticker-neu .ic{width:var(--ic-24);height:var(--ic-24);color:var(--marke-text)}
.sticker-neu .sn-t{color:var(--text);font-weight:var(--gewicht-halb)}
.sticker-neu :is(.sn-t,.sn-p){max-width:100%;overflow-wrap:anywhere}
.sticker-neu .sn-p{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp);color:var(--akzent-text)}
.sticker-kachel .sk-weg{position:absolute;inset-block-start:var(--abstand-2);inset-inline-end:var(--abstand-2);display:none;place-items:center;width:var(--ic-20);height:var(--ic-20);border-radius:var(--r-voll);background:var(--rot);color:var(--auf-rot)}
.sticker-kachel .sk-weg .ic{width:var(--ic-12);height:var(--ic-12);stroke-width:3}
.sticker-blatt.bearbeiten .sticker-kachel .sk-weg{display:grid}
.sticker-blatt .sticker-bearb{align-self:flex-end;width:auto;min-height:var(--hoehe-ik);margin:calc(-1 * var(--abstand-2)) 0 0;margin-inline-end:calc(-1 * var(--abstand-3));padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);color:var(--marke-text)}
@media(hover:hover){.sticker-blatt .sticker-bearb:hover{background:var(--f3)}}
.sticker-bearb[hidden],.sticker-blatt .notiz[hidden]{display:none}
/* Sperrbildschirm (Scheibe 14): „Mit Face ID entsperren“ bzw. Fingerabdruck als Randknopf unter „Entsperren“, mit dem Zeichen davor;
   beide Knöpfe in voller Breite. */
.pin-box .pin-bio{width:100%;margin-top:var(--abstand-3)}   /* Face ID oder Fingerabdruck auf dem Sperrbildschirm (31.10.2026) */
.pin-box .pin-bio .ic{flex:none;width:var(--ic-20);height:var(--ic-20)}
.pin-box>.pa-btn.cs-save{width:100%}   /* „Entsperren“ so breit wie der Knopf darunter */
.pin-box .pin-bio[hidden]{display:none}
/* Einladungen (App-Session 31.10.2026): „Freunde einladen“ im Leerzustand der Chatliste als Textknopf (B4, Form von HIVE DESIGN) */
.einladen{display:flex;flex-direction:column;gap:var(--abstand-5)}   /* Einladen-Dialog (31.10.2026): Link zum Kopieren, darunter die Wege */
.einladen-link{box-sizing:border-box;width:100%;min-height:var(--hoehe-feld);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:max(16px,var(--grad-3))}
.einladen-wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--abstand-3)}
.einladen-wege .pa-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.leerzustand .einladen-knopf{min-height:var(--hoehe-ik);padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);background:none;color:var(--marke-text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
@media(hover:hover){.leerzustand .einladen-knopf:hover{background:var(--f3)}}
/* Geteilter Waveform-Player (Aufnahme-Vorschau UND empfangene/gesendete Chat-Bubbles):
   Play/Pause + klickbare Waveform + Dauer + Speed-Buttons-Reihe. Token-/dark-tauglich. */
/* Player = ZWEI saubere Zeilen: oben [▶ · Waveform · Zeit], unten die Speed-Reihe auf
   voller Breite (kein gequetschtes time|speed-Nebeneinander mehr → kein Umbruch-Chaos).
   Scheibe 2b (C20 Sprachmemo, B6, B15): Abspielen ist der runde Medienknopf in Akzent (44, Desktop 36) mit Zeichen statt „▶“ und „⏸“,
   lädt mit Ring; Welle in Zweittext, gespielt in Akzent-Text; Dauer in Mono; Tempo als Zahl-Chips 28 hoch und 36 breit (Trefferfläche
   44, Lücke 8), gewählt in Akzent-leise; Herunterladen als Icon-Knopf 32 rechts (bei Text M in der zweiten Zeile). Eigene und fremde
   Blase gleich (kein Blau, kein --me-ink). */
.wf-player{display:flex;flex-direction:column;gap:var(--abstand-5);min-width:0;width:100%}
.wf-player audio:not(.wf-fallback){display:none}
.wf-row{display:flex;align-items:center;gap:var(--abstand-5);min-width:0;width:100%}
.wf-play{position:relative;flex:none;display:inline-grid;place-items:center;width:var(--hoehe-knopf);height:var(--hoehe-knopf);padding:0;border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-voll);background:var(--akzent);color:var(--auf-akzent);line-height:1;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.wf-play .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
.wf-play .ic.abspielen{margin-left:calc(var(--ic-knopf) / 12)}
@media(hover:hover){.wf-play:hover{background:var(--akzent-hover)}}
.wf-play:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.wf-play.laeuft{cursor:progress}
.wf-play.laeuft .ic{display:none}
.wf-play.laeuft::before{content:"";width:var(--ic-18);height:var(--ic-18);border:var(--rand-stark) solid var(--akzent-rand);border-top-color:var(--auf-akzent);border-radius:var(--r-voll);animation:hv-spin var(--dauer-kreis) linear infinite}
@media(prefers-reduced-motion:reduce){.wf-play.laeuft::before{animation:none}}
.wf-wave{flex:1;position:relative;height:var(--ic-28);display:flex;align-items:center;gap:2px;cursor:pointer;overflow:hidden;min-width:0}
.wf-wave .wbar{flex:1 1 0;min-width:1px;border-radius:var(--r-voll);background:var(--zweit)}
.wf-wave .wbar.on{background:var(--akzent-text)}
.wf-fallback{width:100%}
.wf-time{flex:none;font-family:var(--mono);font-size:var(--grad-2);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp);color:var(--zweit)}
/* In der Chat-Bubble ist der Player kompakter (sitzt in der schmalen Audio-Bubble).
   KEIN harter min-width mehr: die alte min-width:13rem floorte die Bubble-Breite
   → auf schmalen Phones sprengte die eigene (rechte) Audio-Bubble den 78%-Cap, der
   Player lief raus UND das ganze Chat-Fenster wurde horizontal swipebar. Stattdessen
   eine bevorzugte Breite, die unter dem Bubble-Cap nachgeben darf. C20 zeichnet 250 tp (Desktop 280) mit drei Tempi; die App hat
   fünf, darum auch am Handy 280 tp: so stehen 1× bis 4× und Herunterladen bei 390 px und Text M in einer Zeile. */
.audio-msg{display:block;width:calc(280 * var(--tp));min-width:0;max-width:100%;padding:var(--abstand-2) var(--abstand-4) 0}
.audio-msg .wf-player{min-width:0;max-width:100%}
/* Abspiel-Geschwindigkeit: mehrere Buttons NEBENEINANDER (1×…4×), aktiver hervorgehoben.
   Geteilt für Chat-Bubble + Vorschau. Token-basiert, gut tappbar. */
.speed-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-8) var(--abstand-4);width:100%;min-width:0}
.speed-btn{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:var(--hoehe-desktop);height:var(--hoehe-klein);padding:0 var(--abstand-3);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-family:var(--mono);font-size:var(--grad-2);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp);line-height:1;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.speed-btn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.speed-btn:not(.on):hover{background:var(--f3)}}
.speed-btn:not(.on):active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.speed-btn.on{background:var(--akzent-leise);border-color:var(--akzent-text);color:var(--akzent-text);font-weight:var(--gewicht-fett)}
/* Download-Icon-Knopf in der Speed-Reihe (rechts neben 4×). */
.speed-btn.dl-btn{width:var(--hoehe-dicht);min-width:0;height:var(--hoehe-dicht);margin-left:auto;padding:0;border-color:transparent;color:var(--zweit)}
@media(hover:hover){.speed-btn.dl-btn:hover{color:var(--text)}}
.speed-btn.dl-btn .ic{width:var(--ic-18);height:var(--ic-18);display:block}
/* Standort-Bubble: Pin im Titel + Maps-Buttons + benannte Koordinaten. Kein großes
   Mini-Karten-Icon mehr (redundant) → kompakter, kein Overflow auf Mobile. Scheibe 2b (C24): Karte 320 tp breit (höchstens die Blase),
   Titel halbfett mit Ortszeichen in Akzent-Text; vier Ziele als kleine Knöpfe 32 (Trefferfläche 44) mit Rand auf Fläche 1 im 2er-Raster,
   solange je Ziel 110 tp bleiben, sonst untereinander; Koordinaten in Mono mit dem Hilfe-Knopf 20 (Trefferfläche 44). */
.bubble.loc .bubble-body{--bubble-pad-r:var(--abstand-6)}
.loc-card{display:flex;width:calc(320 * var(--tp));min-width:0;max-width:100%}
.loc-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--abstand-4);padding-top:var(--abstand-1)}
.loc-title{display:flex;align-items:center;gap:var(--abstand-3);font-weight:var(--gewicht-halb)}
.loc-title .ic{width:var(--ic-18);height:var(--ic-18);flex:none;color:var(--akzent-text)}
.loc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(calc(110 * var(--tp)),100%),1fr));gap:var(--abstand-6) var(--abstand-3)}
@media(pointer:coarse){.loc-links{row-gap:var(--abstand-6)}}
.loc-link{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:var(--hoehe-dicht);padding:var(--abstand-2) var(--abstand-4);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.loc-link::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.loc-link:hover{background:var(--f3)}}
.loc-link:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.loc-link .loc-link-tx{min-width:0;overflow-wrap:anywhere}
.loc-coords{display:flex;align-items:center;flex-wrap:wrap;gap:var(--abstand-1) var(--abstand-3);min-height:var(--treffer-min);font-size:var(--grad-1);line-height:var(--grad-1-zh);color:var(--zweit)}
.loc-coords-lbl{font-weight:var(--gewicht-halb)}
.loc-coords-zahl{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp)}
.loc-coords.loc-fehlt{min-height:0;font-size:var(--grad-2)}
.loc-coords .tip{position:relative;width:var(--ic-20);height:var(--ic-20);border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);background:none;color:var(--zweit);font-family:var(--schrift);font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.loc-coords .tip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.loc-coords .tip:hover{background:var(--f3);border-color:var(--text);color:var(--text)}}
.loc-coords .tip:active{background:var(--linie-2)}
/* Aufnahme-Leiste im Composer (ersetzt optisch Texteingabe/Buttons beim Aufnehmen). */
/* Scheibe 3a (C29, B6): ohne Blau und ohne Emoji. Leiste 44 auf Fläche 2 mit Linie, roter Punkt (pulsiert, nicht bei reduzierter
   Bewegung), Zeit in Mono, Pegel in Akzent; Medienknöpfe 36 mit Trefferfläche 44: Pause neutral, Verwerfen rot, Senden grün,
   Zeichen aus svgIcon. Pausiert: Punkt und Pegel in Zweittext. */
.composer.recording > .comp-input-row,.composer.recording > .comp-tools-row,.composer.recording > .comp-fmt,.composer.recording > .comp-sheet{display:none}
.rec-bar{flex:1;display:flex;align-items:center;gap:var(--abstand-4);min-width:0;min-height:var(--hoehe-composer);padding:var(--abstand-1) var(--abstand-1) var(--abstand-1) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f2)}
.rec-dot{flex:0 0 auto;width:var(--ic-12);height:var(--ic-12);border-radius:var(--r-voll);background:var(--rot);animation:recpulse calc(var(--dauer-kreis) * 1.5) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rec-dot{animation:none}}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.3}}
.rec-timer{flex:0 0 auto;font-family:var(--mono);font-size:var(--grad-3);font-variant-numeric:tabular-nums;color:var(--text)}
/* Live-Waveform während der Aufnahme: Balken laufen nach links durch. */
.rec-live{flex:1;min-width:0;height:var(--ic-24);display:flex;align-items:center;justify-content:flex-end;gap:var(--abstand-1);overflow:hidden}
.rec-live .lbar{flex:0 0 auto;width:var(--abstand-1);min-height:var(--abstand-1);border-radius:var(--r-voll);background:var(--akzent)}
/* Medienknöpfe: unter .rec-bar qualifiziert, damit keine allgemeinere Knopfregel gewinnt. */
.rec-bar .rec-cancel,.rec-bar .rec-stop,.rec-bar .rec-pause{position:relative;flex:0 0 auto;display:grid;place-items:center;width:var(--hoehe-desktop);height:var(--hoehe-desktop);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-voll);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.rec-bar .rec-cancel::after,.rec-bar .rec-stop::after,.rec-bar .rec-pause::after{content:"";position:absolute;left:50%;top:50%;width:max(100%, var(--treffer-min));height:max(100%, var(--treffer-min));transform:translate(-50%,-50%)}
.rec-bar .rec-cancel .ic,.rec-bar .rec-stop .ic{display:block;width:var(--ic-20);height:var(--ic-20)}
.rec-bar .rec-cancel .ic{transform:rotate(45deg)}
.rec-bar .rec-cancel{background:var(--rot);border-color:var(--rot);color:var(--auf-rot)}
.rec-bar .rec-stop{background:var(--gruen);border-color:var(--gruen);color:var(--auf-gruen)}
.rec-bar .rec-pause{background:var(--f2);border-color:var(--feldrand);color:var(--text)}
@media(hover:hover){.rec-bar .rec-pause:hover{background:var(--f3)}.rec-bar .rec-cancel:hover{border-color:var(--auf-rot);box-shadow:inset 0 0 0 var(--rand) var(--auf-rot)}.rec-bar .rec-stop:hover{border-color:var(--auf-gruen);box-shadow:inset 0 0 0 var(--rand) var(--auf-gruen)}}
.rec-bar .rec-cancel:active,.rec-bar .rec-stop:active,.rec-bar .rec-pause:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
.rec-bar .rec-pause:active{background:var(--linie-2)}
/* Pause-Icon (‖) + Resume-Icon (▶) sauber als SVG/CSS statt OS-Emoji (iOS-Smiley-Bug). */
.rec-pause .ic{display:block;width:var(--ic-20);height:var(--ic-20)}
.rec-bar.paused .rec-dot{animation:none;background:var(--zweit)}
.rec-bar.paused .rec-live .lbar{background:var(--zweit)}
.rec-bar.paused .rec-live{opacity:1}
/* Sprachmemo-Vorschau (vor dem Senden) — lebt im geteilten modal(). Nutzt denselben
   .wf-player wie die Chat-Bubbles; hier in eine Karte gefasst + etwas größer. */
/* Scheibe 3a (C29 Vorschau): Karte auf Fläche 2 mit Linie; Knöpfe in D-Form mit Zeichen statt Emoji: Senden primär (Akzent)
   und Verwerfen (Gefahr) über die ganze Breite, Speichern und Neue Memo mit Rand; die Rückfrage als eigene Karte. */
.amp{display:flex;flex-direction:column;gap:var(--abstand-6)}
.amp .wf-player{padding:var(--abstand-5) var(--abstand-6);gap:var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f2)}
.amp .wf-play{width:var(--hoehe-knopf);height:var(--hoehe-knopf);background:var(--akzent);color:var(--auf-akzent)}
.amp .wf-wave{height:var(--hoehe-dicht)}
.amp .wf-time{font-family:var(--mono);font-size:var(--grad-1)}
.amp-actions{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}
.amp-actions button,.amp-ask-row button{position:relative;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);padding:0 var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.amp-actions button .ic,.amp-ask-row button .ic{flex:none;width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.amp-actions button:hover,.amp-ask-row button:hover{background:var(--f3)}.amp-actions .amp-send:hover,.amp-ask-row .amp-ask-yes:hover{background:var(--akzent-hover)}.amp-actions .amp-discard:hover{background:var(--rot-leise)}}
.amp-actions button:active,.amp-ask-row button:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.amp-actions .amp-send,.amp-ask-row .amp-ask-yes{background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
.amp-actions .amp-send{flex:1 1 100%}
.amp-actions .amp-send:active,.amp-ask-row .amp-ask-yes:active{background:var(--akzent-gedrueckt)}
.amp-actions .amp-discard{flex:1 1 100%;border-color:var(--rot);color:var(--rot)}
.amp-actions .amp-discard:active{background:var(--rot-leise)}
/* Inline-Abfrage „Aktuelle Memo speichern?" (ersetzt temporär die Aktionen). */
.amp-ask{display:flex;flex-direction:column;gap:var(--abstand-4);padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f2)}
.amp-ask-q{font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb)}
.amp-ask-row{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}
.amp-ask-row .amp-ask-back{flex:0 0 auto;border-color:transparent;color:var(--zweit)}
/* Bild-Lightbox (eigenes Overlay, dunkel, über allem). */
/* Medienbetrachter (D23, Scheibe 3b-1): Bühne in beiden Themen dunkel (.buehne, Grund --buehne), Kopf 56 mit Zähler mittig
   (Mono) und Schließen rechts, Pfeile seitlich, unten „Speichern“ als Glas-Pille; Knöpfe 44 rund auf --buehne-glas mit
   --blur-glas, Ring in --buehne-weiss; das Bild steht mit Radius --r-xxs und --schatten-buehne zwischen Kopf und Fuß. Ebene
   --ebene-ansicht; Safe Area an Schließen, Zähler, Pfeilen und Speichern (703dd7b). Ein Tipp auf die Bühne neben das Bild
   schließt (openMediaViewer), Pinch zoomt im Browser (W0.1b). */
.lb-ov{position:fixed;inset:0;z-index:var(--ebene-ansicht);display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;box-sizing:border-box;padding:calc(var(--hoehe-kopf) + env(safe-area-inset-top,0px)) calc(var(--abstand-14) + env(safe-area-inset-right,0px)) calc(var(--hoehe-knopf) + var(--abstand-4) + var(--abstand-6) + env(safe-area-inset-bottom,0px)) calc(var(--abstand-14) + env(safe-area-inset-left,0px));background:var(--buehne);color:var(--buehne-text)}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-xxs);box-shadow:var(--schatten-buehne)}
/* Aus einem Dialog geoeffnet (Bild-Generator, Galerie): ueber dem Dialog und seinen Ebenen.
   Vorher lag die Vorschau mit 70 unter dem Dialog (90): unsichtbar, und nach dem Schliessen
   des Dialogs lagen alle versteckten Vorschauen offen (Hennys Befund 19.10., Android). */
body:has(.modal-ov) .lb-ov{z-index:calc(var(--ebene-dialog) + 30)}
.lb-x,.lb-nav{display:grid;place-items:center;width:var(--hoehe-tipp);height:var(--hoehe-tipp);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-voll);background:var(--buehne-glas);color:var(--buehne-weiss);-webkit-backdrop-filter:blur(var(--blur-glas));backdrop-filter:blur(var(--blur-glas));cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.lb-x{position:absolute;top:calc((var(--hoehe-kopf) - var(--hoehe-tipp)) / 2 + env(safe-area-inset-top,0px));right:calc(var(--abstand-4) + env(safe-area-inset-right,0px));z-index:var(--ebene-auf)}
.lb-x .ic,.lb-nav .ic{width:var(--ic-24);height:var(--ic-24)}
.lb-x .ic{transform:rotate(45deg)}
.lb-dl{position:absolute;left:50%;bottom:calc(var(--abstand-6) + env(safe-area-inset-bottom,0px));z-index:var(--ebene-auf);display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);padding:0 var(--abstand-8);border:var(--rand) solid transparent;border-radius:var(--r-voll);background:var(--buehne-glas);color:var(--buehne-weiss);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);white-space:nowrap;-webkit-backdrop-filter:blur(var(--blur-glas));backdrop-filter:blur(var(--blur-glas));cursor:pointer;transform:translateX(-50%);transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.lb-dl .ic{width:var(--ic-20);height:var(--ic-20)}
.lb-dl[hidden]{display:none}
.lb-stage{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;width:100%;height:100%;touch-action:pan-y pinch-zoom}
.lb-count{position:absolute;top:env(safe-area-inset-top,0px);left:50%;display:flex;align-items:center;height:var(--hoehe-kopf);transform:translateX(-50%);font-family:var(--mono);font-size:var(--grad-2);font-variant-numeric:tabular-nums;color:var(--buehne-text);pointer-events:none}
.lb-nav{position:absolute;top:50%;z-index:var(--ebene-auf);transform:translateY(-50%)}
.lb-prev{left:calc(var(--abstand-4) + env(safe-area-inset-left,0px))}
.lb-next{right:calc(var(--abstand-4) + env(safe-area-inset-right,0px))}
.lb-next .ic{transform:rotate(180deg)}
.lb-x:active,.lb-nav:active,.lb-dl:active{background:var(--glas-dunkel)}
.lb-x:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
.lb-nav:active{transform:translateY(-50%) scale(calc(1 - .03 * var(--bewegung)))}
.lb-dl:active{transform:translateX(-50%) scale(calc(1 - .03 * var(--bewegung)))}
@media(hover:hover){.lb-x:hover,.lb-nav:hover{border-color:var(--buehne-weiss)}}
.lb-ov :focus-visible{outline-color:var(--buehne-weiss);box-shadow:var(--ring-saum)}
/* Erlaubnis-Dialog beim ersten Start (App-Session 19.10.2026, vorlaeufig bis zur Scheibe Einfuehrung). */
.ton-wahl{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Einführung (Scheibe 8, HIVE DESIGN, Konzept design/scheiben/8-einfuehrung/konzept.md): eigene Ebene .einf auf --ebene-ansicht
   (70), kein modal(): Zuschneiden, Profilbild-Studio, Bestätigungen und ein Anruf liegen darüber. Handy ganze Seite wie die Anmeldung
   (D25), ab 760 px Karte 440 (Stufen 880, .breit) auf dem Wabengrund; Kopf 56 mit Zurück, Fortschritt als Waben und Überspringen,
   Inhalt rollt, Fuß klebt mit der Hauptaktion (Breite nach Inhalt, am Desktop rechts). Bausteine an eigenen Klassen: B1 Knopf und
   Textknopf, B7 und B11 Feld mit „@“, B10 Hinweis, D20 Fehler, B17 Auswahlkarte, C36 Zeile mit B13 Schalter, Zeile „Erlaubnis“ (Zeichen,
   Titel, Satz, darunter Aktion oder Stand als Wort mit Zeichen), Stufenkarte wie E32 ohne Kaufknopf, Zeichnungen der Tour aus 3a und C3.
   Ersetzt die Vorstufe .erl-zeile (App-Session 19.10.). */
.einf{position:fixed;inset:0;z-index:var(--ebene-ansicht);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:var(--grad-4);line-height:var(--zh-text)}
.einf .sr-nur,.einf.gross .einf-zahl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.einf-blatt{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
.einf-laedt{margin:auto;color:var(--zweit);font-size:var(--grad-3)}
.einf-kopf{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--abstand-2);min-height:var(--hoehe-kopf);padding:0 var(--abstand-3) 0 var(--abstand-2)}
.einf-kopf>:first-child{justify-self:start}
.einf-kopf>:last-child{justify-self:end}
.einf-platz{width:var(--hoehe-ik);height:var(--hoehe-ik)}
.einf-zurueck{display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:none;color:var(--text);transition:background-color var(--dauer) var(--kurve)}
.einf-zurueck .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
.einf-stand{display:flex;align-items:center;justify-content:center;gap:var(--abstand-5);min-width:0}
.einf-schritte{display:flex;align-items:center;gap:var(--abstand-3);margin:0;padding:0;list-style:none}
.einf-schritte li{flex:none;width:12px;height:14px}
.einf-schritte li.jetzt{width:15px;height:17px}
.einf-hx{display:block;width:100%;height:100%;overflow:visible;fill:var(--hx-f,none);stroke:var(--hx-s,currentColor);stroke-width:var(--hx-w,var(--hx-strich));stroke-linejoin:round}
.einf-schritte .einf-hx{--hx-s:var(--feldrand)}
.einf-schritte li.fertig .einf-hx{--hx-f:var(--akzent);--hx-s:var(--akzent-rand)}
.einf-schritte li.jetzt .einf-hx{--hx-f:var(--akzent-leise);--hx-s:var(--akzent-text);--hx-w:var(--rand-stark)}
.einf-zahl{color:var(--zweit);font-size:var(--grad-1);font-weight:var(--gewicht-halb);white-space:nowrap;font-variant-numeric:tabular-nums}
.einf-inhalt{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--abstand-10);padding:var(--abstand-4) var(--abstand-12) var(--abstand-10)}
.einf-inhalt.start{padding-top:var(--abstand-14);gap:var(--abstand-14)}
.einf-inhalt.ohne-kopf{padding-top:var(--abstand-14)}
.einf-inhalt.sprache{padding-top:var(--abstand-12)}   /* Sprachschritt ohne Kopf: oben wie seitlich (HIVE DESIGN 31.10.) */
.einf-inhalt.wechsel{animation:einfEin var(--dauer) var(--kurve)}
@keyframes einfEin{from{opacity:0}}
.einf-text{display:flex;flex-direction:column;gap:var(--abstand-4)}
.einf h1{margin:0;font-size:var(--grad-8);line-height:var(--grad-8-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-titel);text-wrap:balance;overflow-wrap:anywhere}
.einf h1:focus{outline:none} /* Titel bekommt den Fokus beim Schrittwechsel (Startfokus für den Vorleser), ist aber kein Bedienelement; Safari zeigte sonst nach jedem Tipp einen Ring */
.einf-satz{margin:0;color:var(--zweit);font-size:var(--grad-5);line-height:var(--grad-5-zh-text);text-wrap:pretty}
.einf-notiz{margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);text-wrap:pretty}
.einf-ueber{margin:0 0 calc(-1 * var(--abstand-4));color:var(--zweit);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase}
.einf-fuss{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4);padding:var(--abstand-6) var(--abstand-12) calc(var(--abstand-6) + env(safe-area-inset-bottom,0px));border-top:var(--rand) solid var(--linie);background:var(--grund)}
.einf-leise{margin-left:auto;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
/* B1: Knopf mit Rand, Hauptaktion in Akzent (.gross 48 am Handy), Textknopf in Akzent-Text, Link unterstrichen (Trefferfläche 44 über ::after) */
.einf-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-4);box-sizing:border-box;max-width:100%;min-height:var(--hoehe-knopf);margin:0;padding:var(--abstand-2) var(--abstand-8);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);line-height:var(--zh-knapp);font-weight:var(--gewicht-halb);text-align:center;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.einf-knopf .ic{flex:none;width:var(--ic-20);height:var(--ic-20)}
.einf-knopf.primaer{border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
.einf-knopf.gross{min-height:var(--hoehe-gross);padding:var(--abstand-2) var(--abstand-12);font-size:var(--grad-5)}
.einf-knopf:active,.einf-textknopf:active{transform:scale(calc(1 - .03 * var(--bewegung)))}
.einf-knopf:active{background:var(--linie-2)}
.einf-knopf.primaer:active{background:var(--akzent-gedrueckt)}
.einf-knopf[aria-disabled="true"],.einf-knopf.primaer[aria-disabled="true"]{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:progress;transform:none}
.einf-textknopf{position:relative;display:inline-flex;align-items:center;min-height:var(--hoehe-knopf);margin:0;padding:0 var(--abstand-5);border:0;border-radius:var(--r-s);background:none;color:var(--akzent-text);font:inherit;font-size:var(--grad-4);line-height:var(--zh-knapp);font-weight:var(--gewicht-halb);text-align:left;transition:background-color var(--dauer) var(--kurve)}
.einf-link{position:relative;align-self:flex-start;display:inline;margin:0;padding:0;border:0;border-radius:var(--r-xxs);background:none;color:var(--akzent-text);font:inherit;font-weight:var(--gewicht-halb);text-align:left;text-decoration:underline;text-decoration-thickness:var(--rand);text-underline-offset:.14em}
.einf-link::after{content:"";position:absolute;inset:calc(-1 * var(--abstand-5)) 0}
.einf-inhalt>.einf-link{display:inline-flex;align-items:center;min-height:var(--treffer-min)}
@media(hover:hover){.einf-zurueck:hover,.einf-knopf:not(.primaer):not([aria-disabled="true"]):hover,.einf-textknopf:hover{background:var(--f3)}.einf-knopf.primaer:not([aria-disabled="true"]):hover{background:var(--akzent-hover)}.einf-link:hover{color:var(--text)}}
.einf-zurueck:active{background:var(--linie-2)}
/* Willkommen: Marke D26, drei Versprechen mit Zeichen in einer Akzent-Wabe */
.einf-marke{display:inline-flex;align-items:center;align-self:flex-start;color:var(--marke-text)}
.einf-marke .ic{width:44px;height:44px;margin-left:-9px}
.einf-marke .wort{color:var(--text);font-size:var(--grad-8);line-height:var(--zh-eng);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-titel)}
.einf-punkte{display:flex;flex-direction:column;gap:var(--abstand-10);margin:0;padding:0;list-style:none}
.einf-punkte li{display:grid;grid-template-columns:32px 1fr;column-gap:var(--abstand-7);align-items:start;color:var(--zweit);font-size:var(--grad-4);line-height:var(--grad-4-zh)}
.einf-punkte b{display:block;margin-bottom:var(--abstand-1);color:var(--text);font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-halb)}
.einf-zeichen{position:relative;flex:none;display:grid;place-items:center;width:32px;height:36px;color:var(--akzent-text)}
.einf-zeichen>.einf-hx{position:absolute;inset:0;--hx-s:var(--akzent-kante);--hx-f:var(--akzent-hauch)}
.einf-zeichen>.ic{position:relative;width:var(--ic-18);height:var(--ic-18)}
.einf-zeichen.leise{color:var(--zweit)}
.einf-zeichen.leise>.einf-hx{--hx-s:var(--linie-2);--hx-f:var(--f2)}
/* Profil: Avatar 88 rund mit der Initiale (wächst mit dem Feld), Foto wählen und Mit KI erstellen; Felder B7 und B11 */
.einf-bild{display:flex;align-items:center;gap:var(--abstand-10)}
.einf-av{flex:none;display:grid}
.einf .einf-av .av{border-color:transparent;background:var(--av-sand-bg)}
.einf .einf-av .av .av-kurz{color:var(--av-sand-fg)}
.einf-bild-knoepfe{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-4);min-width:0}
.einf-form{display:flex;flex-direction:column;gap:var(--abstand-8)}
.einf-feld{display:flex;flex-direction:column;gap:var(--abstand-3)}
.einf-feld label{color:var(--text);font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb)}
.einf-feld label span{color:var(--zweit);font-weight:var(--gewicht-mittel)}
.einf-eingabe{display:flex;align-items:center;min-height:var(--hoehe-formular);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);transition:border-color var(--dauer) var(--kurve)}
.einf-eingabe input{flex:1;min-width:0;align-self:stretch;margin:0;padding:0 var(--abstand-7);border:0;border-radius:inherit;background:none;color:inherit;font:inherit;font-size:var(--grad-5)}
.einf-eingabe input::placeholder{color:var(--zweit);opacity:1}
.einf-praefix{padding-left:var(--abstand-7);color:var(--zweit);font-size:var(--grad-5)}
.einf-praefix+input{padding-left:var(--abstand-1)}
.einf-eingabe:has(input:focus-visible){border-color:var(--akzent-text);outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:var(--fokus-abstand)}
@supports selector(:has(*)){.einf-eingabe input:focus-visible{outline:none}}
.einf-eingabe.fehler{border-color:var(--rot)}
.einf-hinweis{margin:0;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh);overflow-wrap:anywhere}
.einf-fehler{margin:0;color:var(--rot);font-size:var(--grad-2);line-height:var(--grad-2-zh);font-weight:var(--gewicht-halb)}
.einf-fehler:empty{display:none}
.einf-fehler::before{content:"";display:inline-block;width:var(--ic-16);height:var(--ic-16);margin-right:var(--abstand-3);vertical-align:-.2em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat}
/* Sichtbarkeit: B17 Auswahlkarten als Radiogruppe (gewählt Akzent-leise, Rand und Titel in Akzent-Text), C36 Zeilen mit B13 Schalter;
   die ganze Karte bzw. Zeile ist das Ziel */
.einf-wahl{display:flex;flex-direction:column;gap:var(--abstand-4)}
.einf-sprachen{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--abstand-3)}   /* Sprachschritt (App-Session 31.10.2026): 13 Karten, kompakt */
.einf-sprachen .einf-wahlkarte{align-items:center;padding:var(--abstand-4) var(--abstand-5);text-align:start}
.einf-sprachen .einf-wahlkarte .titel{display:inline-block}   /* Name mit dir rtl steht neben dem Punkt, nicht ganz am Rand (HIVE DESIGN 31.10.) */
.einf-wahlkarte{display:grid;grid-template-columns:22px 1fr;column-gap:var(--abstand-6);align-items:start;width:100%;min-height:var(--treffer-min);margin:0;padding:var(--abstand-6) var(--abstand-7);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;text-align:left;transition:background-color var(--dauer) var(--kurve)}
.einf-wahlkarte .punkt{display:grid;place-items:center;width:22px;height:22px;margin-top:var(--abstand-1);border:var(--rand-punkt) solid var(--feldrand);border-radius:var(--r-voll)}
.einf-wahlkarte .titel{display:block;font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-halb)}
.einf-wahlkarte .erklaerung{display:block;margin-top:var(--abstand-1);color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh-text);text-wrap:pretty}
.einf-wahlkarte[aria-checked="true"]{border-color:var(--akzent-text);background:var(--akzent-leise);box-shadow:inset 0 0 0 var(--rand) var(--akzent-text)}
.einf-wahlkarte[aria-checked="true"] .titel{color:var(--akzent-text)}
.einf-wahlkarte[aria-checked="true"] .punkt{border:var(--rand-stark) solid var(--akzent-text)}
.einf-wahlkarte[aria-checked="true"] .punkt::after{content:"";width:10px;height:10px;border-radius:var(--r-voll);background:var(--akzent-text)}
.einf-zeilen,.einf-erl,.einf-liste{margin:0;padding:0;list-style:none;border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);overflow:hidden}
.einf-zeile{display:flex;align-items:center;gap:var(--abstand-6);width:100%;min-height:var(--zeile-bereich);margin:0;padding:var(--abstand-5) var(--abstand-7);border:0;background:none;color:var(--text);font:inherit;text-align:left;transition:background-color var(--dauer) var(--kurve)}
.einf-zeile+.einf-zeile{border-top:var(--rand) solid var(--linie)}
.einf-zeile:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.einf-zeile .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--abstand-1)}
.einf-zeile .n{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.einf-zeile .u{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.einf-bahn{position:relative;flex:none;width:40px;height:24px;border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);background:var(--f3);transition:background-color var(--dauer) var(--kurve)}
.einf-bahn::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--r-voll);background:var(--text);transition:transform var(--dauer) var(--kurve)}
.einf-zeile[aria-checked="true"] .einf-bahn{border-color:var(--akzent-rand);background:var(--akzent)}
.einf-zeile[aria-checked="true"] .einf-bahn::after{background:var(--auf-akzent);transform:translateX(16px)}
@media(hover:hover){.einf-wahlkarte[aria-checked="false"]:hover,.einf-zeile:hover{background:var(--f3)}}
/* Erlaubnisse: Zeile mit Zeichen, Titel, Satz, darunter die Aktion bzw. der Stand (Wort plus Zeichen, nie nur Farbe) */
.einf-erl>li{display:grid;grid-template-columns:32px 1fr;column-gap:var(--abstand-7);padding:var(--abstand-6) var(--abstand-7) var(--abstand-6) var(--abstand-6)}
.einf-erl>li+li{border-top:var(--rand) solid var(--linie)}
.einf-erl .t{display:flex;flex-direction:column;gap:var(--abstand-1);min-width:0}
.einf-erl .n{font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-halb)}
.einf-erl .n span{color:var(--zweit);font-size:var(--grad-2);font-weight:var(--gewicht-mittel)}
.einf-erl .u{color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh-text);text-wrap:pretty}
.einf-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-6);margin-top:var(--abstand-4)}
.einf-aktion:empty{display:none}
.einf-aktion:focus{outline:none}
.einf-wort{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:32px;font-size:var(--grad-3);font-weight:var(--gewicht-halb)}
.einf-wort .ic{width:var(--ic-18);height:var(--ic-18)}
.einf-wort.an{color:var(--gruen)}
.einf-wort.ab{color:var(--zweit)}
.einf-aktion .einf-link{display:inline-flex;align-items:center;min-height:32px}
/* Stufen: die gewählte Stufe als Karte (Kante und Titel in Akzent-Text, Plakette „Dein Plan“), die übrigen leise als Liste ohne Knöpfe;
   ab 760 px alle als Karten in einer Reihe, die gewählte zuerst */
.einf-stufe{display:flex;flex-direction:column;gap:var(--abstand-4);margin:0;padding:var(--abstand-5) var(--abstand-7) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1)}
.einf-stufe.gewaehlt{border-color:var(--akzent-text);background:var(--akzent-hauch);box-shadow:inset 0 0 0 var(--rand) var(--akzent-text)}
.einf-stufe-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--abstand-1) var(--abstand-6)}
.einf-stufe h2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-4);margin:0;font-size:var(--grad-7);line-height:var(--grad-7-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp)}
.einf-stufe.gewaehlt h2{color:var(--akzent-text)}
.einf-plakette{display:inline-flex;align-items:center;padding:var(--abstand-1) var(--abstand-3);border-radius:var(--r-xs);background:var(--akzent);color:var(--auf-akzent);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-plakette)}
.einf-preis{font-family:var(--mono);font-size:var(--grad-6);line-height:var(--grad-6-zh);font-weight:var(--gewicht-fett);font-variant-numeric:tabular-nums;white-space:nowrap}
.einf-preis small{font-family:var(--schrift);font-size:var(--grad-2);font-weight:var(--gewicht-mittel);color:var(--zweit)}
.einf-merk{display:flex;flex-direction:column;gap:var(--abstand-1);margin:0;padding:0;list-style:none}
.einf-merk li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--abstand-6);color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh)}
.einf-merk span{min-width:0}
.einf-merk b{flex:none;max-width:60%;color:var(--text);font-weight:var(--gewicht-halb);text-align:right}
.einf-merk b.z{font-family:var(--mono);font-variant-numeric:tabular-nums}
.einf-stufen{display:flex;flex-direction:column;gap:var(--abstand-10)}
.einf-mehr{display:flex;flex-direction:column;gap:var(--abstand-6)}
.einf-liste li{display:grid;grid-template-columns:1fr auto;column-gap:var(--abstand-6);align-items:baseline;padding:var(--abstand-4) var(--abstand-7)}
.einf-liste li+li{border-top:var(--rand) solid var(--linie)}
.einf-liste .n{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.einf-liste .u{grid-column:1;color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.einf-liste .u b{font-family:var(--mono);font-weight:var(--gewicht-halb);color:var(--text);font-variant-numeric:tabular-nums}
.einf-liste .p{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--mono);font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.einf-liste .p small{display:block;font-family:var(--schrift);font-size:var(--grad-1);font-weight:var(--gewicht-mittel);color:var(--zweit)}
.einf-reihe{display:none}
/* Kurze Tour: drei Karten auf einer Seite, oben je eine Zeichnung aus D-Bausteinen (aria-hidden): Feld mit Kreieren (3a), Person mit
   Frequenz-Tabs (C3), Secret-Hinweis (3a) */
.einf-tour{display:flex;flex-direction:column;gap:var(--abstand-5);margin:0;padding:0;list-style:none}
.einf-tour>li{border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);overflow:hidden}
.einf-zeichnung{display:flex;align-items:center;gap:var(--abstand-4);min-height:60px;padding:var(--abstand-4) var(--abstand-6);border-bottom:var(--rand) solid var(--linie);background:var(--grund);overflow:hidden}
.einf-tour .t{display:flex;flex-direction:column;gap:var(--abstand-1);padding:var(--abstand-5) var(--abstand-7) var(--abstand-6)}
.einf-tour .n{margin:0;font-size:var(--grad-5);line-height:var(--grad-5-zh);font-weight:var(--gewicht-halb)}
.einf-tour .u{margin:0;color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh-text);text-wrap:pretty}
.einf-mini-feld{flex:1;min-width:0;display:flex;align-items:center;min-height:40px;padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--zweit);font-size:var(--grad-3);white-space:nowrap;overflow:hidden}
.einf-mini-kreieren{flex:none;display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:40px;padding:0 var(--abstand-6) 0 var(--abstand-5);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font-size:var(--grad-3);font-weight:var(--gewicht-halb)}
.einf-mini-kreieren .ic{width:var(--ic-18);height:var(--ic-18)}
.einf-zeichnung .av{border-color:transparent;background:var(--av-lila-bg)}
.einf-zeichnung .av .av-kurz{color:var(--av-lila-fg)}
.einf-mini-tabs{display:flex;align-items:center;gap:var(--abstand-3);min-width:0;overflow:hidden}
.einf-mini-tabs>span{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:30px;padding:0 var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f1);color:var(--zweit);font-size:var(--grad-2);font-weight:var(--gewicht-halb);white-space:nowrap}
.einf-mini-tabs>span.aktiv{border-color:var(--akzent-text);background:var(--akzent-leise);color:var(--akzent-text)}
.einf-mini-tabs .einf-hx{width:8px;height:9px;--hx-s:none}
.einf-mini-tabs .fq-chat{--hx-f:var(--fq-chat)}
.einf-mini-tabs .fq-arbeit{--hx-f:var(--fq-arbeit)}
.einf-mini-tabs .fq-reise{--hx-f:var(--fq-reise)}
.einf-mini-secret{display:flex;align-items:center;gap:var(--abstand-4);color:var(--zweit);font-size:var(--grad-2)}
.einf-mini-secret .ic{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--text)}
@media(prefers-reduced-motion:reduce){.einf-inhalt.wechsel{animation:none}}
/* Desktop: Karte nach D11 (440, Stufen 880) auf dem Wabengrund wie die Anmeldung; Knöpfe im Fuß rechts, 36 (grober Zeiger 44) */
@media(min-width:760px){
  .einf{display:grid;place-items:center;isolation:isolate;padding:var(--abstand-20) var(--abstand-12);overflow:auto}
  .einf::before{content:"";position:fixed;inset:0;z-index:var(--ebene-unter);pointer-events:none;background:var(--zweit);opacity:.13;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.712 8V24L13.856 32 0 24V8Z M13.856 32V48' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"),radial-gradient(closest-side at 50% 50%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);-webkit-mask-size:27.713px 48px,100% 100%;-webkit-mask-composite:source-in;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.712 8V24L13.856 32 0 24V8Z M13.856 32V48' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"),radial-gradient(closest-side at 50% 50%,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);mask-size:27.713px 48px,100% 100%;mask-composite:intersect}
  .einf-blatt{flex:none;width:min(calc(var(--breite-dialog) * var(--scale,1)),100%);max-height:calc(100dvh - 2 * var(--abstand-20));border:var(--rand) solid var(--linie-2);border-radius:var(--r-blatt);background:var(--f1);box-shadow:var(--schatten-1);overflow:hidden}
  .einf-blatt.breit{width:min(calc(2 * var(--breite-dialog) * var(--scale,1)),100%)}
  .einf-kopf{min-height:calc(var(--hoehe-ik) + var(--abstand-4));padding:var(--abstand-4) var(--abstand-6) 0}
  .einf-inhalt{gap:var(--abstand-8);padding:var(--abstand-6) var(--abstand-16) var(--abstand-10)}
  .einf-inhalt.start{padding-top:var(--abstand-14);gap:var(--abstand-10)}
  .einf-inhalt.sprache{padding-top:var(--abstand-16)}
  .einf h1{font-size:var(--grad-7);line-height:var(--grad-7-zh)}
  .einf-satz{font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
  .einf-marke .ic{width:36px;height:36px;margin-left:-8px}
  .einf-marke .wort{font-size:var(--grad-7)}
  .einf-punkte{gap:var(--abstand-7)}
  .einf-punkte li{font-size:var(--grad-2);line-height:var(--grad-2-zh)}
  .einf-punkte b{font-size:var(--grad-3);line-height:var(--grad-3-zh)}
  .einf-fuss{justify-content:flex-end;padding:var(--abstand-8) var(--abstand-12) var(--abstand-10);background:var(--f1)}
  .einf-leise{margin:0 auto 0 0}
  .einf-knopf.gross{min-height:var(--hoehe-knopf);padding:var(--abstand-2) var(--abstand-7);font-size:var(--grad-3)}
  .einf-knopf,.einf-textknopf{font-size:var(--grad-3)}
  .einf-stufen-handy{display:none}
  .einf-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(150 * var(--tp))),1fr));gap:var(--abstand-6);align-items:stretch}
  .einf-reihe .einf-stufe-kopf{flex-direction:column;align-items:flex-start}
  .einf-reihe .einf-stufe h2{font-size:var(--grad-5);line-height:var(--grad-5-zh)}
  .einf-reihe .einf-preis{font-size:var(--grad-5)}
  .einf-reihe .einf-merk{gap:var(--abstand-3)}
  .einf-reihe .einf-merk li{flex-direction:column;align-items:flex-start;gap:0;font-size:var(--grad-1);line-height:var(--grad-1-zh)}
  .einf-reihe .einf-merk b{max-width:none;font-size:var(--grad-2);text-align:left}
}
/* Medien-Kompositions-Ablage (Vorschau vor dem Senden: Karussell · Bildunterschrift · weitere). */
/* Scheibe 3a (D24): Vollbild auf Grund (Ebene 75 bleibt), Kopf 56 mit Linie, Bühne mit Pfeilen auf schwebender Fläche, Feld für
   die Bildunterschrift, Streifen mit Vorschauen 88 (Desktop 56) und eigenem Entfernen-Knopf in der Ecke (kein Knopf im Knopf,
   24 sichtbar, Trefferfläche 44), Fuß mit „Weitere“, „Aufnehmen“ (Rand) und „Senden“ (Akzent). */
.mc-ov{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:75;background:var(--grund);color:var(--text);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mc-head{flex:none;display:flex;align-items:center;gap:var(--abstand-4);min-height:var(--hoehe-kopf);padding:0 var(--abstand-4) 0 var(--abstand-2);border-bottom:var(--rand) solid var(--linie)}
.mc-x{position:relative;flex:none;display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:none;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.mc-x .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
@media(hover:hover){.mc-x:hover{background:var(--f3)}}
.mc-x:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.mc-title{flex:1;min-width:0;font-size:var(--grad-3);font-weight:var(--gewicht-halb);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-body{flex:1 1 0;position:relative;min-height:0;overflow:hidden}
/* Bühne füllt die (flex-begrenzte) Body-Höhe ABSOLUT → das Bild ist immer gedeckelt, egal welches
   Seitenverhältnis; kein Aufblähen mehr, das die Bildunterschrift/Leiste wegdrückt. */
.mc-stage{position:absolute;inset:var(--abstand-6) calc(2 * var(--abstand-4) + var(--hoehe-ik));display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.mc-prev[style*="none"] ~ .mc-stage{inset:var(--abstand-6)} /* ein Medium: keine Pfeile, die Bühne nutzt die Breite; mit Pfeilen liegen sie auf dem Grund, nicht auf dem Bild (D24) */
.mc-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-s)}
.mc-file{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-5);color:var(--zweit);text-align:center}
.mc-file .ic{width:calc(var(--ic-24) * 2);height:calc(var(--ic-24) * 2)}
.mc-fn{max-width:80vw;font-size:var(--grad-3);color:var(--text);overflow-wrap:anywhere;text-align:center}
.mc-nav{position:absolute;top:50%;z-index:var(--ebene-auf);display:grid;place-items:center;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:var(--rand) solid var(--linie-2);border-radius:var(--r-voll);background:var(--schweb);color:var(--text);box-shadow:var(--schatten-1);cursor:pointer;transform:translateY(-50%);transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.mc-nav:hover{background:var(--f3);border-color:var(--feldrand)}}
.mc-nav:active{background:var(--linie-2);transform:translateY(-50%) scale(calc(1 - .03 * var(--bewegung)))}
.mc-nav .ic{width:var(--ic-knopf);height:var(--ic-knopf)}
.mc-prev{left:var(--abstand-4)}.mc-next{right:var(--abstand-4)}.mc-next .ic{transform:rotate(180deg)}
.mc-cap{flex:0 0 auto;display:block;width:calc(100% - 2 * var(--seite-handy));min-height:var(--hoehe-feld);max-height:calc(var(--hoehe-feld) * 2);margin:var(--abstand-4) var(--seite-handy) 0;padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-4);line-height:var(--zh-text);resize:none}
.mc-cap::placeholder{color:var(--zweit);opacity:1}
.mc-cap:focus-visible{border-color:var(--akzent-text)}
.mc-strip{display:flex;gap:var(--abstand-5);overflow-x:auto;padding:var(--abstand-10) var(--seite-handy) var(--abstand-2);scrollbar-width:none}
.mc-strip::-webkit-scrollbar{display:none}
.mc-item{position:relative;flex:none;width:calc(var(--hoehe-tipp) * 2);height:calc(var(--hoehe-tipp) * 2)}
@media(min-width:760px) and (pointer:fine){.mc-item{width:var(--hoehe-kopf);height:var(--hoehe-kopf)}} /* bei Touch bleibt es 88: sonst nimmt Entfernen (44) die Mitte (D24) */
.mc-thumb{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;padding:0;border:var(--rand-stark) solid transparent;border-radius:var(--r-s);background:var(--f2);color:var(--zweit);cursor:pointer;transition:border-color var(--dauer) var(--kurve),background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.mc-thumb.on{border-color:var(--akzent-text)}
.mc-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-xs)}
@media(hover:hover){.mc-thumb:hover{border-color:var(--feldrand);background:var(--f3)}.mc-thumb.on:hover{border-color:var(--akzent-text)}}
.mc-thumb:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.mc-fx{display:grid;place-items:center;width:100%;height:100%}
.mc-fx .ic{width:var(--ic-24);height:var(--ic-24)}
.mc-vbadge{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);border-radius:var(--r-voll);background:var(--glas-dunkel);color:var(--buehne-weiss);transform:translate(-50%,-50%);pointer-events:none}
.mc-vbadge .ic{width:var(--ic-16);height:var(--ic-16)}
.mc-rm{position:absolute;top:calc(-1 * var(--abstand-4));right:calc(-1 * var(--abstand-4));z-index:var(--ebene-auf);display:grid;place-items:center;width:var(--hoehe-mini);height:var(--hoehe-mini);padding:0;border:var(--rand-stark) solid var(--grund);border-radius:var(--r-voll);background:var(--text);color:var(--grund);cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.mc-rm::after{content:"";position:absolute;left:50%;top:50%;width:var(--treffer-min);height:var(--treffer-min);transform:translate(-50%,-50%)}
.mc-rm .ic{width:var(--ic-14);height:var(--ic-14)}
.mc-rm .ic path{transform-box:view-box;transform-origin:center;transform:rotate(45deg)} /* Plus als Kreuz; gedreht wird nur der Pfad, sonst ragt das Zeichen in den Saum */
@media(hover:hover){.mc-rm:hover{background:var(--rot);color:var(--auf-rot)}}
.mc-rm:active{background:var(--rot);color:var(--auf-rot);transform:scale(calc(1 - .06 * var(--bewegung)))}
.mc-rm:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.mc-foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-4);padding:var(--abstand-5) var(--seite-handy)}
.mc-more,.mc-send{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-3);min-height:var(--hoehe-knopf);padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.mc-more .ic,.mc-send .ic{width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.mc-more:hover{background:var(--f3)}.mc-send:hover{background:var(--akzent-hover)}}
.mc-more:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.mc-send{margin-left:auto;background:var(--akzent);border-color:var(--akzent-rand);color:var(--auf-akzent)}
.mc-send:active{background:var(--akzent-gedrueckt);transform:scale(calc(1 - .03 * var(--bewegung)))}
.mc-send:disabled{opacity:.5}
/* Icon-Tooltips (Desktop-Hover) — invertierter Chip, erklärt was ein Icon tut. */
/* Scheibe 2c (D14): Fläche --text, Schrift --grad-1 in --grund (500), Polster 4 8, Radius --r-xs, --schatten-1, Spitze 6 zum Träger
   (8 Abstand), Breite nach Inhalt bis 28em, lange Texte brechen ausgewogen um; am Fensterrand rückt die Fläche ins Bild, die Spitze
   bleibt über dem Träger (--tip-x aus initTooltips). Nur mit Maus, bei Tastaturfokus sofort, Esc schließt. */
.hive-tip{position:fixed;z-index:var(--ebene-tipp);box-sizing:border-box;width:max-content;max-width:min(28em,calc(100vw - 2 * var(--abstand-4)));padding:var(--abstand-2) var(--abstand-4);border-radius:var(--r-xs);background:var(--text);color:var(--grund);box-shadow:var(--schatten-1);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel);text-align:center;text-wrap:balance;overflow-wrap:anywhere;pointer-events:none;opacity:0;transform:translateY(-100%);transition:opacity var(--dauer) var(--kurve)}
.hive-tip::after{content:"";position:absolute;top:100%;left:var(--tip-x,50%);width:0;height:0;margin-left:calc(-1 * var(--abstand-3));border:var(--abstand-3) solid transparent;border-bottom-width:0;border-top-color:var(--text)}
.hive-tip.below{transform:none}
.hive-tip.below::after{top:auto;bottom:100%;border-top-width:0;border-bottom-width:var(--abstand-3);border-top-color:transparent;border-bottom-color:var(--text)}
.hive-tip.show{opacity:1}
@media(hover:hover){.lb-dl:hover{border-color:var(--buehne-weiss)}}
/* PDF-Preview im Modal. */
/* Scheibe 3b-1 (D23, PDF): weiße Seite mit Kante --linie-2 und Radius --r-xs im Dialog (am Desktop 42rem breit, Desktop-Block);
   ins Betrachter-Layout kommt das PDF erst mit einem Wunsch an die App (ebenen.md, Was alle brauchen 6). */
.pdf-wrap{display:flex;flex-direction:column;gap:var(--abstand-5)}
.pdf-frame{box-sizing:border-box;width:100%;height:68vh;border:var(--rand) solid var(--linie-2);border-radius:var(--r-xs);background:var(--buehne-weiss)}

/* Frequenzen (C2, Scheibe 1a): die aufgeklappte Person mit ihren Chats, eingerückt um Avatar und Lücke, 44 hoch,
   untereinander gestrichelt, zur nächsten Person durchgezogen. Griff am Anfang (über den Einzug), Archiv und Pfeil am Ende,
   alle im Zeilenknopf (bauplan 3.2, W1a.1; .box-line bleibt direktes Kind von .contact-boxes, 4.4 Nr. 9). Der Titel
   behält die Farbe der Frequenz (readableTitleColor, jetzt mit 4,5:1). Scheibe 12a (Hennys Wünsche 2 und 3): Pfeil zum Öffnen
   statt Zahnrad; Einzug und Rand mit logischen Richtungen, damit Arabisch und Hebräisch von rechts einrücken. */
.contact-wrap{display:block;border-bottom:var(--rand) solid var(--linie)}
.conv-wrap{display:block;border-bottom:var(--rand) solid var(--linie)}
.contact-boxes{display:flex;flex-direction:column;container-type:inline-size}
.box-line{display:flex;align-items:center;gap:var(--abstand-4);min-height:var(--zeile-tipp);padding-block:0;padding-inline:calc(var(--polster-zeile) - var(--rand-stark) + 40px + var(--abstand-6)) calc(var(--polster-zeile) - var(--abstand-2));background:none;border:0;border-top:var(--rand) dashed var(--linie);border-inline-start:var(--rand-stark) solid transparent;color:var(--text);text-align:start;font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-mittel);width:100%;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(min-width:760px){.box-line{padding-inline-start:calc(var(--polster-zeile) - var(--rand-stark) + 40px + var(--abstand-5));font-size:var(--grad-2)}}
@media(hover:hover){.box-line:hover{background:var(--f3)}}
.box-line:active{background:var(--linie-2)}
.box-line.active{background:var(--f2);border-inline-start-color:var(--akzent-text)}
.box-line:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.box-line .bt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.box-line .badge{--hx-halb:.75em;--hx-seite:.045em;min-width:1.5em;height:1.75em;margin-inline:0}
.box-line .row-cog{flex:none}
.box-line>.bl-weiter{flex:none;width:var(--ic-18);height:var(--ic-18);color:var(--zweit)}
.box-line .grip{flex:none;display:grid;place-items:center;align-self:stretch;width:var(--hoehe-klein);margin-inline-start:calc(-1 * (var(--hoehe-klein) + var(--abstand-4)));color:var(--zweit);cursor:grab;touch-action:none}
.box-line .grip:active{cursor:grabbing}
@media(hover:hover){.box-line .grip:hover{color:var(--text)}}
.box-line .grip .ic{width:var(--ic-16);height:var(--ic-16);display:block}
.box-line.dragging{background:var(--f2)}
/* Wird es eng (Tablet mit 320er-Spalte, Text XL und XXL am Handy), rücken Status, Zeit und Zähler unter den Titel,
   statt ihn auf zwei Buchstaben zu kürzen; Griff, Archiv und Pfeil bleiben in der ersten Zeile (C2). Nur mit grobem
   Zeiger: am Desktop mit Maus sind die Knöpfe schmaler. Ohne Container-Abfragen (Safari vor 16) bleibt es einzeilig. */
@media(pointer:coarse){@container (max-width:21em){
  .box-line{flex-wrap:wrap;row-gap:0;padding-top:var(--abstand-1);padding-bottom:var(--abstand-2)}
  .box-line .bt{flex:1 1 calc(100% - var(--hoehe-ik) - var(--ic-18) - 2 * var(--abstand-4))}
  .box-line.mit-schloss .bt{flex-basis:calc(100% - var(--hoehe-ik) - var(--ic-18) - var(--ic-16) - 3 * var(--abstand-4))}
  .box-line .row-arch{order:1}
  .box-line>.bl-weiter{order:2}
  .box-line :is(.chat-tags,.row-time,.badge){order:3;margin-top:calc(-1 * var(--abstand-2))}
}}
/* Pfeil der aufklappbaren Zeile (Person, Kontakt): dreht beim Aufklappen nach unten. */
.row .chev{display:grid;place-items:center;flex:none;width:var(--ic-20);height:var(--ic-20);color:var(--zweit)}
.row .chev .ic{width:var(--ic-20);height:var(--ic-20);transform:rotate(90deg)}
.row[aria-expanded="true"] .chev .ic{transform:rotate(180deg)}
/* Von rechts nach links (Arabisch, Hebräisch; Scheibe 12a): die Pfeile der Chatliste zeigen nach links, zugeklappt auch der Pfeil der
   Person. Nur in der Chatliste und unter „Neuer Chat“; die übrigen Seiten folgen mit einer eigenen Scheibe. */
[dir="rtl"] .row .chev .ic{transform:rotate(-90deg)}
[dir="rtl"] .row[aria-expanded="true"] .chev .ic{transform:rotate(180deg)}
[dir="rtl"] :is(.box-line>.bl-weiter,.newbox button .ic,.neu-wege .bereich>.ic:last-child,.archiv-zeile>.ic:last-child,.anfragen-zeile>.ic:last-child){transform:scaleX(-1)}
/* Status-Zeichen (C8): Schloss, Uhr, Glocke aus in Zweittext, 16 px, jedes mit Namen. */
.chat-tags{display:inline-flex;align-items:center;gap:var(--abstand-2);flex:none;color:var(--zweit)}
/* Zeichen der Frequenz rechts neben der Uhrzeit (08.11.2026) */
.zeile-kopf>.row-time+.chat-tags{margin-left:calc(var(--abstand-2) - var(--abstand-4))}
.zeile-kopf>:first-child+.chat-tags{margin-left:auto}
.ctag.wartet{opacity:.45}
.freq-rechts{display:inline-flex;flex:none;align-items:center;gap:var(--abstand-3);margin-left:auto;color:var(--zweit)}
.freq-rechts>.row-time{margin-left:0}
.ctag{display:inline-grid;place-items:center;color:var(--zweit)}
.ctag .ic{width:var(--ic-16);height:var(--ic-16);display:block}
/* „Neuer Chat: Titel …“ und „Neue Frequenz: Titel …“ (Scheibe 12a, Hennys Wunsch 1): ein Feld ohne Kasten in der Zeile der
   Frequenzen (C2 „neu“), eingerückt wie die Titel, das Plus davor in Zweittext; nur eine Linie unter dem Feld in Feldrand zeigt, dass
   man hier schreibt (1.4.11, 3:1), im Fokus in Akzent-Text. Tippen auf die Zeile setzt den Cursor ins Feld.
   Der Knopf am Ende (Icon-Knopf B5 in Akzent) erscheint, sobald ein Titel dasteht; über der Grenze der Stufe steht er immer, mit
   der Plus-Pille und Rand wie bisher. */
.newbox{display:flex;align-items:center;gap:var(--abstand-4);min-height:var(--zeile-tipp);padding-block:var(--abstand-1);padding-inline:calc(var(--polster-zeile) - var(--rand-stark) + 40px + var(--abstand-6)) calc(var(--polster-zeile) - var(--abstand-2));border-top:var(--rand) dashed var(--linie);border-inline-start:var(--rand-stark) solid transparent;color:var(--zweit);cursor:text;transition:background-color var(--dauer) var(--kurve)}
@media(min-width:760px){.newbox{padding-inline-start:calc(var(--polster-zeile) - var(--rand-stark) + 40px + var(--abstand-5))}}
@media(hover:hover){.newbox:hover{background:var(--f3)}}
.newbox:focus-within{background:var(--f2)}
.newbox>.nb-plus{flex:none;width:var(--ic-16);height:var(--ic-16)}
.newbox input{flex:1;min-width:0;min-height:var(--zeile-tipp);padding:0;border:0;border-bottom:var(--rand) solid var(--feldrand);border-radius:0;background:transparent;color:var(--text);font:inherit;font-size:var(--grad-4);font-weight:var(--gewicht-mittel)}
@media(min-width:760px){.newbox input{font-size:var(--grad-2)}}
.newbox input::placeholder{color:var(--zweit);opacity:1}
.newbox input:focus-visible{border-bottom-color:var(--akzent-text)}
@supports selector(:has(*)){.newbox input:focus-visible{outline:0}.newbox:has(input:focus-visible){outline:var(--fokus-breite) solid var(--akzent-text);outline-offset:calc(-1 * var(--fokus-breite))}}
.newbox button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-2);min-width:var(--hoehe-ik);min-height:var(--hoehe-ik);padding:0 var(--abstand-3);background:var(--akzent);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);color:var(--auf-akzent);cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
.newbox.ueber button{background:transparent;border-color:var(--feldrand);color:var(--text)}
.newbox:not(.ueber) input:placeholder-shown+button{visibility:hidden}
@media(hover:hover){.newbox.ueber button:hover{background:var(--f3)}}
.newbox.ueber button:active{background:var(--linie-2)}
.newbox button:disabled{opacity:.5;cursor:default}
.newbox button .ic{width:var(--ic-18);height:var(--ic-18)}
.row .name .bt{color:var(--zweit);font-weight:var(--gewicht-mittel)}
.pro-pill{display:inline-flex;align-items:center;font-size:.6rem;font-weight:800;letter-spacing:.04em;background:var(--marke);color:var(--auf-marke);box-shadow:none;border-radius:.35rem;padding:.05rem .3rem;vertical-align:middle}
/* Kastenfarben aus BOX_COLORS (dieselbe Liste in functions/api/_lib/store.js): Daten, die Nutzer wählen, keine Werte des Systems;
   sie bleiben fest (Scheibe 7, bauplan 4.3 „Familien aus Daten“). */
.c-amber{background:#fbbf24}.c-blue{background:#3b82f6}.c-green{background:#22c55e}.c-violet{background:#8b5cf6}.c-rose{background:#f43f5e}.c-cyan{background:#06b6d4}.c-slate{background:#94a3b8}

/* Chat-Header: Box-Titel unter dem Namen + Einstellungs-Menü */
/* D8: der Weg zum Profil bzw. zur Gruppe ist ein Knopf um Name und Untertitel (button.htitle), mindestens --treffer-min hoch und
   3em breit; ohne Ziel (Meine Notizen, Konto gelöscht) bleibt es ein div. Gedrückt schrumpft er aus der linken Mitte, der Fokusring
   liegt innen (der Kopf reicht bei XXL bis an den Rand). Schloss im Secret Chat als Zeichen (16) in Zweittext. */
.chat-head .htitle{display:flex;flex-direction:column;justify-content:center;gap:var(--abstand-1);flex:1;min-width:3em;line-height:var(--zh-knapp)}
.chat-head button.htitle{min-height:var(--treffer-min);padding:0;border:0;border-radius:var(--r-xs);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform var(--dauer-druck) var(--kurve)}
.chat-head button.htitle:active{transform:scale(calc(1 - .02 * var(--bewegung)));transform-origin:left center}
.chat-head button.htitle:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.chat-head .htitle .name-row{display:flex;align-items:center;gap:var(--abstand-3);min-width:0}
.chat-head .htitle .name-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head .htitle .lock-chip{flex:none;display:grid;place-items:center;color:var(--zweit)}
.chat-head .htitle .lock-chip .ic{width:var(--ic-16);height:var(--ic-16)}
.chat-head .htitle .bt{font-size:var(--grad-1);line-height:var(--grad-1-zh-eng);color:var(--zweit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Secret Chat: Banner · verschlüsselte Bubbles */
/* Banner im Chat (D17): eine Form unter dem Kopf mit Zeichen, Text (bricht um, ab 16em rücken die Aktionen in die nächste Zeile)
   und Aktionen oder „Mehr“ rechts. Neutral Fläche 2 (Secret Chat, als Knopf, mindestens 44 hoch), Warnung Gelb (Schlüssel
   sichern, Selbstzerstörung), Gefahr Rot (Lösch-Anfrage); Warnungen tragen Zeichen und Wort. Knöpfe .k 32 mit Trefferfläche 44. */
.secret-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-5);width:100%;min-height:var(--treffer-min);padding:var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-right)) var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-left));border:0;border-bottom:var(--rand) solid var(--linie);background:var(--f2);color:var(--text);font:inherit;font-size:var(--grad-2);line-height:var(--grad-2-zh);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.secret-banner:hover{background:var(--f3)}}
.secret-banner:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.secret-banner:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.secret-banner>.ic{flex:none;width:var(--ic-20);height:var(--ic-20);color:var(--zweit)}
.secret-banner .sb-txt{flex:1 1 16em;min-width:0}
.secret-banner .sb-more{flex:none;margin-left:auto;color:var(--akzent-text);font-weight:var(--gewicht-halb);white-space:nowrap}
/* Backup-Nudge in Secret-Chats ohne gesichertes Schlüssel-Backup (verhindert Nachrichtenverlust
   bei Geräteverlust — der ursprüngliche Henny+Kollege-Fall). Wegklickbar; weg, sobald Backup da. */
.e2e-nudge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-5);padding:var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-right)) var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-left));border-bottom:var(--rand) solid var(--linie);background:var(--gelb-leise);color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.e2e-nudge .en-txt{display:flex;flex-direction:column;gap:var(--abstand-1);flex:1 1 16em;min-width:0}
.e2e-nudge .en-txt strong{color:var(--gelb);font-size:inherit;font-weight:var(--gewicht-halb)}
.e2e-nudge .en-txt span{color:var(--text)}   /* Textfarbe: Zweittext und Akzent-Text halten auf Gelb-leise nicht mit jedem Farbschema 4,5:1 */
.e2e-nudge .en-acts{display:flex;align-items:center;gap:var(--abstand-3);margin-left:auto}
.e2e-nudge .en-go{position:relative;min-height:var(--hoehe-dicht);padding:0 var(--abstand-5);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);cursor:pointer}
.e2e-nudge .en-later{position:relative;min-height:var(--hoehe-dicht);padding:0 var(--abstand-5);border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);text-decoration:underline;text-underline-offset:.14em;cursor:pointer}
@media(hover:hover){.e2e-nudge .en-go:hover{background:var(--akzent-hover)}.e2e-nudge .en-later:hover{background:var(--f3)}}
:is(.e2e-nudge,.dr-req,.sd-banner) button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
/* Lösch-Anfrage-Banner im Chat (vom Peer) — Annehmen/Ablehnen. */
.dr-bar:empty{display:none}
.dr-req{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-5);padding:var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-right)) var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-left));border-bottom:var(--rand) solid var(--linie);background:var(--rot-leise)}
/* D17: auch die Lösch-Anfrage (Gefahr) trägt ein Zeichen (Papierkorb 20 in Rot), als Maske, weil deleteRequestBanner nicht im Bereich liegt */
.dr-req::before{content:"";flex:none;width:var(--ic-20);height:var(--ic-20);background:var(--rot);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E") center/contain no-repeat}
.dr-txt{flex:1 1 16em;min-width:0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--text)}
.dr-acts{display:flex;align-items:center;gap:var(--abstand-3);margin-left:auto}
.dr-yes{position:relative;min-height:var(--hoehe-dicht);padding:0 var(--abstand-5);border:var(--rand) solid var(--rot);border-radius:var(--r-s);background:var(--rot);color:var(--auf-rot);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);cursor:pointer}
.dr-no{position:relative;min-height:var(--hoehe-dicht);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);cursor:pointer}
@media(hover:hover){.dr-no:hover{background:var(--f3)}}
.dr-yes:disabled,.dr-no:disabled{opacity:.6;cursor:default}
/* Selbstzerstörung: Box-Menü-Eintrag · Banner (amber, ≠ rotes Lösch-Banner) · Zeit-Input. */
.box-menu .sd-menu{display:flex;align-items:center;width:100%;background:none;border:0;border-top:1px solid var(--linie-2);color:var(--text);padding:.6rem .1rem;font:inherit;font-weight:600;cursor:pointer;text-align:left}
@media(hover:hover){.box-menu .sd-menu:hover{color:var(--akzent)}}
.sd-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-5);padding:var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-right)) var(--abstand-4) calc(var(--seite-handy) + env(safe-area-inset-left));border-bottom:var(--rand) solid var(--linie);background:var(--gelb-leise)}
.sd-banner>.ic{flex:none;width:var(--ic-20);height:var(--ic-20);color:var(--gelb)}
.sd-txt{flex:1 1 16em;min-width:0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--text)}
.sd-txt .zahl{font-family:var(--mono);font-weight:var(--gewicht-halb);font-variant-numeric:tabular-nums}
@media(min-width:760px){:is(.secret-banner,.e2e-nudge,.dr-req,.sd-banner){padding-top:var(--abstand-3);padding-bottom:var(--abstand-3)}}
.sd-time{width:100%;box-sizing:border-box;background:var(--f2);border:1px solid var(--linie-2);color:var(--text);border-radius:.5rem;padding:.5rem .6rem;font:inherit}
/* Verschlüsselt (C10, C25): nicht entschlüsselbar als Satz in Zweittext; Schloss und Uhr im Fuß als Zeichen (12) mit Namen. */
.bubble.enc .body.enc-fail{color:var(--zweit);font-style:italic}
.bubble .t .enc-ic,.bubble .t .ttl-ic{display:inline-grid;place-items:center}
.bubble .t .enc-ic .ic,.bubble .t .ttl-ic .ic{width:var(--ic-12);height:var(--ic-12)}
.secret-intro p{margin:.5rem 0;line-height:1.5}
.secret-more{margin-top:.6rem;border-top:1px solid var(--linie-2);padding-top:.5rem}
.secret-more summary{cursor:pointer;color:var(--akzent-text);font-weight:600;font-size:.85rem}
.secret-more p{font-size:.85rem;color:var(--zweit);margin:.55rem 0}
/* Secret-Chat-Backup-Dialog (Key-Recovery). Token-basiert → hell + dunkel. */
/* Scheibe 5a-2 (bauplan 3.11): Secret-Chat-Backup und Schlüssel dieses Geräts in D. Sätze --grad-3 in Zweittext, Zustand als Plakette
   mit Wort (grün „Backup aktiv“, gelb „Kein Backup“ auf der leisen Fläche ihrer Farbe), Warnung im Kasten Gelb-leise mit Rand --gelb und
   Zeichen, Feld wie B7, Code in Mono im Kasten mit gestricheltem Rand, Erfolg mit grünem Haken; Gefahr als roter Text (B2), gefüllt nur in
   der Bestätigung „Ja, Backup löschen“. Knoten und Ablauf bleiben (Lauf-Zähler, isConnected-Wachen). Hover nur bei Maus (4.6). */
.e2e-bk{display:flex;flex-direction:column;gap:var(--abstand-6)}
.e2e-lead{margin:0;color:var(--zweit);font-size:var(--grad-3);line-height:var(--grad-3-zh-text)}
.e2e-lead.e2e-ok{display:flex;align-items:flex-start;gap:var(--abstand-3);color:var(--text)}
.e2e-lead.e2e-ok .ic{flex:none;width:var(--ic-20);height:var(--ic-20);margin-top:calc((var(--grad-3-zh-text) - var(--ic-20)) / 2);color:var(--gruen)}
.e2e-status{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-3)}
.e2e-status small{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.e2e-muted{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.e2e-pill{display:inline-flex;align-items:center;min-height:var(--hoehe-mini);padding:0 var(--abstand-4);border-radius:var(--r-voll);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb)}
.e2e-pill.ok{background:var(--gruen-leise);color:var(--gruen)}
.e2e-pill.warn{background:var(--gelb-leise);color:var(--gelb)}
.e2e-actions{display:flex;flex-direction:column;gap:var(--abstand-3);margin-top:var(--abstand-2)}
.e2e-warn{position:relative;padding:var(--abstand-5) var(--abstand-6) var(--abstand-5) calc(var(--abstand-6) + var(--ic-20) + var(--abstand-4));border:var(--rand) solid var(--gelb);border-radius:var(--r-m);background:var(--gelb-leise);color:var(--text);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.e2e-warn::before{content:"";position:absolute;left:var(--abstand-6);top:calc(var(--abstand-5) + (var(--grad-2-zh) - var(--ic-20)) / 2);width:var(--ic-20);height:var(--ic-20);background:var(--gelb);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat}
.e2e-field{display:flex;flex-direction:column;gap:var(--abstand-3)}
.e2e-field label{color:var(--text);font-size:var(--grad-3);line-height:var(--grad-3-zh);font-weight:var(--gewicht-halb)}
.e2e-input{box-sizing:border-box;width:100%;min-height:var(--hoehe-feld);padding:0 var(--abstand-7);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);transition:border-color var(--dauer) var(--kurve)}
@media(min-width:760px){.e2e-input{padding:0 var(--abstand-6);font-size:var(--grad-3)}}
.e2e-input::placeholder{color:var(--zweit);opacity:1}
.e2e-input:focus-visible{border-color:var(--akzent-text)}
.e2e-code{padding:var(--abstand-8) var(--abstand-6);border:var(--rand-punkt) dashed var(--akzent-text);border-radius:var(--r-m);background:var(--f1);color:var(--text);font-family:var(--mono);font-size:var(--grad-7);line-height:var(--grad-7-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-versal);text-align:center;-webkit-user-select:all;user-select:all;word-break:break-all}
.e2e-note{color:var(--zweit);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.e2e-danger{color:var(--rot)}
@media(hover:hover){.set-link.e2e-danger:hover{background:var(--rot-leise)}}
.set-link.e2e-danger:active{background:var(--rot-leise)}
.e2e-danger-btn{background:var(--rot)}
.set-wrap{position:relative}
.set-btn{background:none;border:0;color:var(--zweit);cursor:pointer;padding:.2rem .45rem;line-height:1;display:grid;place-items:center}
@media(hover:hover){.set-btn:hover{color:var(--text)}}
.set-btn .ic{width:1.3rem;height:1.3rem;display:block}
/* Alle drei Chat-Header-Icon-Buttons (Zahnrad · Archiv · Glocke) exakt gleich groß. */
/* D8 mit B5: 44 am Handy, am Desktop 36 mit Rand (bei grobem Zeiger 44), Zeichen 24 bzw. 20 in Textfarbe; Anruf und Video neutral
   statt grün (die Regel .head-call svg steht im Bereich von 4a); „Beitreten · 3“ als kleiner Akzent-Knopf mit Trefferfläche 44
   (die Grundregel .head-join steht im Bereich von 4b). Bis 4a und 4b sie umstellen, gelten hier die D-Werte (spezifischer). */
.chat-head .set-btn,.chat-head .head-icon-btn{position:relative;display:grid;place-items:center;flex:none;width:var(--hoehe-ik);height:var(--hoehe-ik);padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:none;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.chat-head .set-btn .ic,.chat-head .head-icon-btn .ic{width:var(--ic-knopf);height:var(--ic-knopf);color:inherit}
@media(hover:hover){.chat-head .set-btn:hover,.chat-head .head-icon-btn:hover{background:var(--f3);color:var(--text)}}
.chat-head .set-btn:active,.chat-head .head-icon-btn:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.chat-head .head-gruppenruf{gap:inherit}
.chat-head .head-join{position:relative;min-height:var(--hoehe-dicht);margin-right:var(--abstand-2);padding:0 var(--abstand-5);gap:var(--abstand-3);border:var(--rand) solid var(--akzent-rand);border-radius:var(--r-s);background:var(--akzent);color:var(--auf-akzent);font-size:var(--grad-1);font-weight:var(--gewicht-halb);transition:background-color var(--dauer) var(--kurve)}
.chat-head .head-join::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.chat-head .head-join .ic{width:var(--ic-18);height:var(--ic-18)}
@media(hover:hover){.chat-head .head-join:hover{background:var(--akzent-hover)}}
.chat-head .head-join:active{background:var(--akzent-gedrueckt)}
@media(min-width:760px){
  .chat-head .set-btn,.chat-head .head-icon-btn{border-color:var(--feldrand)}
}
.box-menu{position:absolute;right:0;top:calc(100% + var(--abstand-4));z-index:var(--ebene-menue);box-sizing:border-box;width:min(24rem,calc(100vw - 2 * var(--abstand-4)));max-height:min(80vh,34rem);overflow-y:auto;overscroll-behavior:contain;padding:var(--abstand-6) var(--abstand-7) var(--abstand-7);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--schweb);color:var(--text);box-shadow:var(--schatten-2);text-align:left}
/* Verschwindende Nachrichten (TTL) im ⚙-Box-Menü / Gruppen-Modal — Optionen als Pillen. */
.grp-sec{font-size:.8rem;color:var(--zweit);font-weight:700;margin:1.1rem 0 .4rem}
/* Scheibe 2c (C34, B15): Verschwinden als Chips (Radiogruppe), 32 hoch mit Trefferfläche 44, Rand --feldrand auf Fläche 1; gewählt
   Akzent-leise mit Rand und Schrift in Akzent-Text (gilt auch im Gruppen-Dialog). */
.box-ttl{display:flex;flex-wrap:wrap;gap:var(--abstand-6) var(--abstand-3);margin:var(--abstand-1) 0 var(--abstand-2)}
.box-ttl-opt{position:relative;min-height:var(--hoehe-dicht);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-3);font-weight:var(--gewicht-mittel);line-height:var(--zh-knapp);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.box-ttl-opt::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.box-ttl-opt:hover{background:var(--f3);border-color:var(--text)}}
.box-ttl-opt:active{background:var(--f3);transform:scale(calc(1 - .03 * var(--bewegung)))}
.box-ttl-opt.sel{background:var(--akzent-leise);border-color:var(--akzent-text);color:var(--akzent-text);font-weight:var(--gewicht-halb)}
.box-menu[hidden]{display:none}
@media(max-width:759px){.box-menu{position:fixed;left:var(--abstand-4);right:var(--abstand-4);top:calc(env(safe-area-inset-top) + var(--hoehe-kopf) + var(--abstand-2));width:auto;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--hoehe-kopf) - 2 * var(--abstand-8))}}
.box-menu h4{margin:var(--abstand-7) 0 var(--abstand-3);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.box-menu h4:first-child{margin-top:0}
/* Scheibe 2c (C34 mit C4, B7, B1, B19): Überschriften als Kapitälchen in Zweittext; Titel als Feld (Fläche 1, Rand --feldrand,
   Radius --r-m, Fokus Rand in Akzent-Text) mit „Speichern“ mit Rand (Nebenaktion, gefüllt bleibt nur „Chat zusammenfassen“); Farbe als Tupfer 28 mit feiner Kante und Trefferfläche
   44 (Desktop 24), gewählt mit Haken und Ring in Akzent-Text, „keine Farbe“ gestrichelt mit Kreuz, die eigene Farbe mit Verlauf. */
.box-menu .rename{display:flex;gap:var(--abstand-3)}
.box-menu .rename input{flex:1;min-width:0;box-sizing:border-box;min-height:var(--hoehe-feld);padding:0 var(--abstand-5);border:var(--rand) solid var(--feldrand);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;font-size:var(--grad-5);transition:border-color var(--dauer) var(--kurve)}
.box-menu .rename input::placeholder{color:var(--zweit);opacity:1}
.box-menu .rename input:focus-visible{border-color:var(--akzent-text)}
@media(min-width:760px){.box-menu .rename input{font-size:var(--grad-3)}}
.box-menu .rename button{flex:none;min-width:0;min-height:var(--hoehe-feld);padding:0 var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;color:var(--text);font:inherit;font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
@media(hover:hover){.box-menu .rename button:hover{background:var(--f3)}}
.box-menu .rename button:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.box-menu .rename button[disabled]{border-color:var(--linie-2);background:var(--f2);color:var(--zweit);cursor:default}
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:max(var(--abstand-4),calc(var(--treffer-min) - var(--ic-28)));padding:var(--abstand-3) var(--abstand-3) var(--abstand-4)}
.swatches button,.swatches .sw-pick-rand{position:relative;display:grid;place-items:center;flex:none;box-sizing:border-box;width:var(--ic-28);height:var(--ic-28);margin:0;padding:0;border:var(--rand) solid var(--tupfer-ring);border-radius:var(--r-voll);color:var(--auf-akzent);cursor:pointer;transition:transform var(--dauer-druck) var(--kurve),border-color var(--dauer) var(--kurve)}
.swatches .sw-pick-rand{width:max(var(--ic-28),var(--treffer-min));height:max(var(--ic-28),var(--treffer-min));margin:calc((var(--ic-28) - max(var(--ic-28),var(--treffer-min))) / 2);border:0}
.swatches button::after{content:"";position:absolute;left:50%;top:50%;width:var(--treffer-min);height:var(--treffer-min);transform:translate(-50%,-50%)}
.swatches button .ic{width:var(--ic-16);height:var(--ic-16);opacity:0}
.swatches button.sel{box-shadow:0 0 0 var(--rand-stark) var(--schweb),0 0 0 calc(2 * var(--rand-stark)) var(--akzent-text)}
.swatches button.sel .ic{opacity:1}
.swatches button:focus-visible{outline-offset:calc(2 * var(--rand-stark) + var(--fokus-abstand))}
.swatches button:active{transform:scale(calc(1 - .06 * var(--bewegung)))}
@media(hover:hover){.swatches button:hover{border-color:var(--text)}}
.swatches .sw-none{border:var(--rand-punkt) dashed var(--feldrand);background:none;color:var(--zweit)}
.swatches .sw-none .ic:first-child{opacity:1;transform:rotate(45deg)}
.swatches .sw-none .ic:last-child{display:none}
/* Farbrad für „Eigene Farbe wählen“: der Verlauf ist Inhalt (alle Farbtöne), kein Wert des Systems; bleibt fest (Scheibe 7). */
.swatches .sw-pick{width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--linie-2);padding:0;cursor:pointer;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
.swatches .sw-pick-rand .sw-pick{width:var(--ic-28);height:var(--ic-28);border:var(--rand) solid var(--tupfer-ring)}
.swatches .sw-pick::-webkit-color-swatch-wrapper{padding:0}
.swatches .sw-pick::-webkit-color-swatch{border:none;border-radius:50%}
.swatches .sw-pick::-moz-color-swatch{border:none;border-radius:50%}
.swatches .sw-pick.sel{box-shadow:0 0 0 var(--rand-stark) var(--schweb),0 0 0 calc(2 * var(--rand-stark)) var(--akzent-text)}
/* Zeile mit Steuerung (C36), Hilfe-Knopf B23 und Schalter B13 (Scheibe 3b-2). Zeile mindestens --zeile-tipp; „?“ sichtbar 20 rund
   mit Rand --feldrand in Zweittext, Trefferfläche --treffer-min; Schalter als Bahn 40 × 24 (aus: Fläche 3 mit Rand --feldrand,
   Knopf in --text; an: Akzent mit --akzent-rand, Knopf in --auf-akzent), die Lage des Knopfs trägt den Zustand, Trefferfläche
   --treffer-min; fest (.locked, .fest): Fläche 2, Rand --linie-2. role="switch" und aria-checked setzt setToggle. */
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-6);min-height:var(--zeile-tipp);padding:var(--abstand-2) 0}
.opt-l{display:flex;align-items:center;gap:var(--abstand-3);min-width:0;color:var(--text)}
.opt-l .pro-pill{margin-left:var(--abstand-1)}
.tip{position:relative;flex:0 0 auto;display:grid;place-items:center;box-sizing:border-box;width:var(--ic-20);height:var(--ic-20);padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);background:none;color:var(--zweit);font:inherit;font-size:var(--grad-1);font-weight:var(--gewicht-halb);line-height:var(--zh-eng);cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.tip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.tip:hover{border-color:var(--text);background:var(--f3);color:var(--text)}}
.tip:active{background:var(--linie-2)}
.tgl{position:relative;flex:0 0 auto;box-sizing:border-box;width:var(--abstand-20);height:var(--abstand-12);padding:0;border:var(--rand) solid var(--feldrand);border-radius:var(--r-voll);background:var(--f3);cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
.tgl::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
.tgl .knob{position:absolute;top:calc(50% - var(--ic-18) / 2);left:var(--abstand-1);width:var(--ic-18);height:var(--ic-18);border-radius:var(--r-voll);background:var(--text);transition:left calc(var(--dauer) * var(--bewegung)) var(--kurve),background-color var(--dauer) var(--kurve)}
@media(hover:hover){.tgl:hover{background:var(--linie-2)}.tgl.on:hover{background:var(--akzent-hover)}}
.tgl.on{border-color:var(--akzent-rand);background:var(--akzent)}
.tgl.on .knob{left:calc(100% - var(--ic-18) - var(--abstand-1));background:var(--auf-akzent)}
.tgl.locked{border-color:var(--linie-2);background:var(--f2);cursor:not-allowed}
.tgl.locked .knob{background:var(--zweit)}
.tgl.locked.on{background:var(--akzent-leise)}
/* Scheibe 2c (C34 mit B1): volle Knöpfe mit Zeichen und Wort (Export, Auswahl, Selbstzerstörung, Archiv, für mich löschen) mit Rand
   --feldrand, 44 (Desktop 36); „Chat zusammenfassen“ in der Akzentfläche mit Hive-Wabe und Preis rechts in Mono (bricht bei Enge unter
   die Beschriftung); Hover Fläche 3 (nur Maus), gedrückt --linie-2 und 3 % kleiner. Ersetzt die Form von .sd-menu im Box-Menü. */
.box-menu .ai-btn{margin-top:var(--abstand-3)}
.box-menu .box-knopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--abstand-1) var(--abstand-4);box-sizing:border-box;width:100%;min-height:var(--hoehe-knopf);margin:var(--abstand-3) 0 0;padding:var(--abstand-3) var(--abstand-6);border:var(--rand) solid var(--feldrand);border-radius:var(--r-s);background:transparent;box-shadow:none;color:var(--text);font:inherit;font-weight:var(--gewicht-halb);line-height:var(--zh-knapp);text-align:left;cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.box-menu .box-knopf .ic{width:var(--ic-20);height:var(--ic-20);flex:none}
.box-menu .box-knopf .box-wort{flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:auto}
.box-menu .box-knopf .preis{margin-left:auto;font-family:var(--mono);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-mittel);font-variant-numeric:tabular-nums;letter-spacing:var(--lauf-knapp);white-space:nowrap}
.box-menu .box-knopf .preis.inklusive{font-family:inherit;letter-spacing:0}
.box-menu .box-knopf.ki{border-color:var(--akzent-rand);background:var(--akzent);color:var(--auf-akzent)}
@media(hover:hover){.box-menu .box-knopf:hover{background:var(--f3);color:var(--text)}.box-menu .box-knopf.ki:hover{background:var(--akzent-hover);color:var(--auf-akzent)}}
.box-menu .box-knopf:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
.box-menu .box-knopf.ki:active{background:var(--akzent-gedrueckt)}
.box-menu .box-knopf:disabled{cursor:progress}
.box-menu .box-knopf .spin{flex:none}
.box-menu .ai-wrap .sum-hist{margin-top:var(--abstand-4)}
.ai-summary p{margin:.35rem 0;line-height:1.5;color:var(--text)}
/* Eckiges, NUR vom User schließbares Tooltip-Overlay (Basis für In-Context-Doku).
   Erklärkarte (D15, Scheibe 3b-1): Karte mittig über dem Scrim, höchstens 384 breit (Dialog minus 2 × 28), Fläche --schweb,
   Kante --linie-2, Radius --r-l, --schatten-2, Titel --grad-4 fett, Text --grad-3 Fließtext, Schließen als kleiner Icon-Knopf
   (32, Trefferfläche 44). Bleibt, bis man sie schließt (Knopf, Hintergrund, Esc); Ebene über dem Dialog wie ebene(), damit
   ein „?“ auch aus einem Dialog heraus sichtbar ist (vorher 80, unter dem Dialog). */
.tip-ov{position:fixed;inset:0;z-index:calc(var(--ebene-dialog) + 20);display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;box-sizing:border-box;padding:calc(var(--seite-mitte) + env(safe-area-inset-top,0px)) var(--seite-handy) calc(var(--seite-mitte) + env(safe-area-inset-bottom,0px));background:var(--scrim)}
.tip-card{display:flex;flex-direction:column;gap:var(--abstand-4);box-sizing:border-box;width:100%;max-width:calc(var(--breite-dialog) - 2 * var(--abstand-14));max-height:100%;overflow-y:auto;padding:var(--abstand-6) var(--abstand-10) var(--abstand-10);border:var(--rand) solid var(--linie-2);border-radius:var(--r-l);background:var(--schweb);color:var(--text);box-shadow:var(--schatten-2);text-align:left;animation:ebene-auf var(--dauer-auf) var(--kurve-hinein)}
.tip-card .tip-head{display:flex;align-items:flex-start;gap:var(--abstand-4)}
.tip-card .tip-title{flex:1;min-width:0;margin:0;padding-top:calc((var(--hoehe-dicht) - var(--grad-4-zh)) / 2);font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-fett);letter-spacing:var(--lauf-knapp);color:var(--text);overflow-wrap:anywhere}
.tip-card .tip-title:focus{outline:none}
.tip-card .tip-x{position:relative;flex:none;display:grid;place-items:center;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0 calc(-1 * var(--abstand-4)) 0 0;padding:0;border:var(--rand) solid transparent;border-radius:var(--r-s);background:transparent;color:var(--text);cursor:pointer;transition:background-color var(--dauer) var(--kurve),transform var(--dauer-druck) var(--kurve)}
.tip-card .tip-x::after{content:"";position:absolute;left:50%;top:50%;width:var(--treffer-min);height:var(--treffer-min);transform:translate(-50%,-50%)}
.tip-card .tip-x .ic{width:var(--ic-18);height:var(--ic-18);transform:rotate(45deg)}
.tip-card .tip-x:active{background:var(--linie-2);transform:scale(calc(1 - .03 * var(--bewegung)))}
@media(hover:hover){.tip-card .tip-x:hover{background:var(--f3)}}
.tip-card .tip-body{font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--text)}
/* Lade-Spinner (Chat zusammenfassen). */
.spin{display:inline-block;width:1.05rem;height:1.05rem;border-radius:50%;border:2px solid var(--linie-2);border-top-color:var(--akzent);animation:hv-spin .7s linear infinite;vertical-align:-.18rem}
@keyframes hv-spin{to{transform:rotate(360deg)}}
.ai-loading{display:flex;align-items:center;gap:.6rem;color:var(--zweit);font-size:.92rem;padding:.4rem 0}
/* Gespeicherte Zusammenfassungen (datierte Liste unter dem Button). */
.sum-hist{margin-top:var(--abstand-4);padding-top:var(--abstand-4);border-top:var(--rand) solid var(--linie-2)}
/* Scheibe 2c (C34): gespeicherte Zusammenfassungen als Zeilen 44 (Desktop 36) auf Fläche 1 mit Kante --linie-2, Überschrift als
   Kapitälchen, Löschen 32 mit Trefferfläche 44, Hover rot leise (nur Maus). */
.sum-hist .sh-lbl{margin:0 0 var(--abstand-3);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.sum-hist .sh-item{display:flex;align-items:center;gap:var(--abstand-3);box-sizing:border-box;width:100%;min-height:var(--hoehe-knopf);margin:0 0 var(--abstand-2);padding:0 var(--abstand-2) 0 var(--abstand-5);border:var(--rand) solid var(--linie-2);border-radius:var(--r-s);background:var(--f1);color:var(--text);text-align:left}
.sum-hist .sh-item .sh-when{flex:1;min-width:0;align-self:stretch;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:var(--grad-3);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.sum-hist .sh-item .sh-when:focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.sum-hist .sh-item .sh-del{position:relative;display:grid;place-items:center;flex:none;width:var(--hoehe-dicht);height:var(--hoehe-dicht);margin:0;padding:0;border:0;border-radius:var(--r-xs);background:none;color:var(--zweit);font-size:var(--grad-3);line-height:var(--zh-eng);cursor:pointer}
.sum-hist .sh-item .sh-del::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--treffer-min));height:max(100%,var(--treffer-min));transform:translate(-50%,-50%)}
@media(hover:hover){.sum-hist .sh-item:hover{border-color:var(--feldrand)}}
@media(hover:hover){.sum-hist .sh-item .sh-del:hover{background:var(--rot-leise);color:var(--rot)}}

/* iOS-PWA Safe-Area: viewport-fit=cover + black-translucent → der Inhalt rendert
   UNTER Statusleiste/Notch (oben) und Home-Indicator (unten). Die Leisten müssen
   in die sichere Zone gepolstert werden, sonst ist der Header unerreichbar und der
   Composer läuft über. env(...) ist 0 ohne Notch → keine Regression sonstwo.
   Längs: oben/unten relevant; quer (Notch links/rechts): auch seitlich. */
.side-head{padding-top:calc(.6rem + env(safe-area-inset-top));padding-left:calc(.7rem + env(safe-area-inset-left));padding-right:calc(.7rem + env(safe-area-inset-right))}
.chat-head{padding-top:calc(.6rem + env(safe-area-inset-top));padding-left:calc(.8rem + env(safe-area-inset-left));padding-right:calc(.8rem + env(safe-area-inset-right))}
/* Der Streifen fuer den Home-Balken ist auf jedem iPhone hoechstens 34 Punkte
   hoch. Meldet der Browser mehr, gehoert der Rest ihm selbst (Werkzeugleiste)
   und nicht uns — wir wuerden ihn doppelt reservieren und unten bliebe ein
   leeres Band stehen (Hennys Bild vom 25.09.). Deshalb gedeckelt. */
.composer{padding-bottom:calc(var(--comp-unten) + min(env(safe-area-inset-bottom), 2.2rem));padding-left:calc(var(--comp-rand) + env(safe-area-inset-left));padding-right:calc(var(--comp-rand) + env(safe-area-inset-right))} /* Scheibe 3a: Polster aus dem Composer (C28), Deckel 2.2rem wie bisher */
.accept-bar{padding-bottom:calc(.7rem + min(env(safe-area-inset-bottom), 2.2rem));padding-left:calc(.8rem + env(safe-area-inset-left));padding-right:calc(.8rem + env(safe-area-inset-right))}
.gate{padding:calc(2rem + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(2rem + env(safe-area-inset-left))}

/* iOS zoomt beim Fokus automatisch rein, wenn ein Feld font-size < 16px hat. Auf
   Mobile alle Felder auf 16px → kein Auto-Zoom, Pinch-Zoom bleibt erlaubt (besser
   für Barrierefreiheit als user-scalable=no). !important schlägt die per-Element-
   font:inherit/.85rem-Regeln. Desktop unberührt. */
@media(max-width:759px){input,textarea,select{font-size:16px!important}}
/* Scheibe 3b-2: auch ab 760 px mit grobem Zeiger (iPad, Touch-Desktop) nie unter 16 px, sonst zoomt Safari beim Fokus. Nur die
   Felder, deren eigene Größe bei Darstellungsgröße S darunter fällt (gemessen mit skripte/felder.mjs: Felder in --grad-3, auch
   „Neuer Chat: Titel …“ unter einer Person und der Composer mit 15,75 px, und die Auswahl .ai-lang mit .8rem); jede behält ihre
   eigene Größe, solange die über 16 px liegt (der Composer ist seit Scheibe 7 am Desktop bei M 14 px, mit grobem Zeiger also 16 px). */
@media(min-width:760px) and (pointer:coarse){.gate input:not([type=checkbox]):not([autocomplete="one-time-code"]),.pe-field input,.pe-field textarea,.grp-title-in,.fb-text,.arch-dialog .sd-time,.newbox input,.composer textarea{font-size:max(16px,var(--grad-3))!important}.ai-lang{font-size:max(16px,.8rem)!important}}

/* Fokusring GLOBAL in der Markenfarbe statt im blauen System-Akzent. :where() hat
   Spezifität 0 → überschreibt keine bestehende Regel, schließt die Lücke aber überall,
   wo (wie früher beim Composer) keine eigene :focus-Regel existiert. */
:where(input,textarea,select,button,a,[tabindex]):focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
/* Immer dunkle Ebenen (Betrachter; Anruf mit Kopf, Leiste und kleinem Bild am Dokument; Gruppenanruf) behalten im hellen
   Thema den Ring der dunklen Seite: lokale Brücke (bauplan 2.3), bis 3b-1, 4a und 4b sie mit .buehne versehen. */
:where(.lb-ov,.call-ov,.call-kopf,.call-unten,#call-pipui,.gr-ov) :focus-visible,.pip-tab:focus-visible{outline-color:var(--akzent-text-dunkel)}
:where(input,textarea,select,button,a,[tabindex]):focus:not(:focus-visible){outline:none}
/* Zeiger statt Tastatur (07.11.2026, Henny: beim Antippen oder Klicken kein Hervorheben, "überall ausschalten"): ohne Ring und ohne
   Akzentrahmen, solange man zeigt oder tippt (html.zeiger, gesetzt bei pointerdown); Tab nimmt die Klasse weg, dann gilt alles oben. */
html.zeiger :is(:focus,:focus-visible),html.zeiger :is(.del-opt,.pe-prefixed,.grp-pick,.newbox,.einf-eingabe):has(:focus-visible){outline:none!important}
html.zeiger :is(.gate input:not([type=checkbox]),.ai-panel select.ai-lang,.arch-dialog .sd-time,.composer textarea,.ebene-feld,.ig.av-studio .ig-prompt,.ein-wahl,.pe-field input,.pe-field textarea,.grp-title-in,.fb-text,.mc-cap,.e2e-input,.box-menu .rename input):focus-visible,html.zeiger :is(.modal.gen .ig-pf,.pe-prefixed):focus-within,html.zeiger .einf-eingabe:has(input:focus-visible){border-color:var(--feldrand)!important}
html.zeiger .newbox input:focus-visible{border-bottom-color:var(--feldrand)!important}
html.zeiger :is(.lb-ov,.call-ov,.call-kopf,.call-unten,.call-min,.gr-ov,.gr-ruf) :focus-visible,html.zeiger :is(.pip-knopf,.pip-tab,.ig-bsp-ab):focus-visible{box-shadow:none!important}
html.zeiger .modal.gen .ig-bild:focus-visible::after{display:none}
/* iOS legt beim Loslassen ein graues Kästchen auf das Element unter dem Finger; geht ein Menü unter dem Finger auf, traf es das X oder
   ein Emoji (Henny 07.11. spät: "Dinge werden beim Öffnen random gehighlighted mit einem Kasten"). Die App zeigt :active selbst. */
html{-webkit-tap-highlight-color:transparent}
/* Frequenzen Privat und Mit KI (29.10.2026, App-Session). Scheibe 12b: die Warteleiste ist eine Leiste statt Composer wie bei einer
   Anfrage (C31): Fläche 1 mit Linie oben, Schloss in Zweittext, Titel halbfett in Textfarbe, Satz in Zweittext, „Jetzt einschalten“
   als Hauptknopf; am Handy unter dem Satz (eingerückt wie der Text), ab 760 px daneben. Die Wahl beim Anlegen und das Schloss an der
   Zeile zeichnet Scheibe 12a (unten). */
.privat-wartet{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--abstand-4) var(--abstand-5);padding:var(--abstand-6);padding-bottom:calc(var(--abstand-6) + min(env(safe-area-inset-bottom), 2.2rem));padding-left:calc(var(--abstand-6) + env(safe-area-inset-left));padding-right:calc(var(--abstand-6) + env(safe-area-inset-right));border-top:var(--rand) solid var(--linie);background:var(--f1)}
.privat-wartet>.ic{flex:none;width:var(--ic-20);height:var(--ic-20);margin-top:calc((var(--grad-3-zh-text) - var(--ic-20)) / 2);color:var(--zweit)}
.privat-wartet .pw-text{display:flex;flex-direction:column;gap:var(--abstand-1);flex:1 1 calc(100% - var(--ic-20) - var(--abstand-5));min-width:0;font-size:var(--grad-3);line-height:var(--grad-3-zh-text);color:var(--zweit)}
.privat-wartet .pw-text b{font-weight:var(--gewicht-halb);color:var(--text)}
.privat-wartet .pa-btn{flex:none;margin-inline-start:calc(var(--ic-20) + var(--abstand-5))}
@media(min-width:760px){.privat-wartet{flex-wrap:nowrap;align-items:center}.privat-wartet .pa-btn{margin-inline-start:auto}}
/* Scheibe 12a: „Was für ein Chat?“ als Auswahlkarten B17 (Fläche 1, Rand Linie 2, Radius --r-m; Zeichen in Zweittext, Titel halbfett,
   Erklärung in Zweittext). Jede Karte legt gleich an, darum ohne Haken. Das Schloss vor dem Titel einer Frequenz „Privat“ wie die
   Status-Zeichen (C8): 16 px in Zweittext. */
.art-wahl{display:flex;flex-direction:column;gap:var(--abstand-4)}
.art-wahl-knopf{display:flex;align-items:flex-start;gap:var(--abstand-5);box-sizing:border-box;width:100%;min-height:var(--zeile-tipp);padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.art-wahl-knopf:hover{background:var(--f3)}}
.art-wahl-knopf:active{background:var(--linie-2)}
.art-wahl-knopf>.ic{flex:none;width:var(--ic-20);height:var(--ic-20);margin-top:calc((var(--grad-4-zh) - var(--ic-20)) / 2);color:var(--zweit)}
.art-wahl-knopf .aw-text{display:flex;flex-direction:column;gap:var(--abstand-1);flex:1;min-width:0}
.art-wahl-knopf .aw-text b{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.art-wahl-knopf .aw-text span{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
@media(min-width:760px){.art-wahl-knopf{padding:var(--abstand-4) var(--abstand-6)}.art-wahl-knopf .aw-text b{font-size:var(--grad-3);line-height:var(--grad-3-zh)}}
.bt-schloss{flex:none;width:var(--ic-16);height:var(--ic-16);color:var(--zweit)}
/* Medien im Secret Chat (29.10.2026, App-Session). Scheibe 12b: nach dem Entschlüsseln dieselben Bausteine wie in 2b (.msg-bild,
   .audio-msg mit Wellenbild, .msg-video, .file-card), ohne eigene Regeln; hier nur der Platzhalter beim Entschlüsseln (C25 mit
   Schloss, das Zeichen pulsiert leise) und sein Fehler (ruhig). */
.bubble-body .e2e-lade .ic{animation:ki-puls calc(var(--dauer) * 8) ease-in-out infinite}
/* KI-Chat (29.10.2026, App-Session). Scheibe 12b: Modell-Leiste über dem Eingabefeld als leise Zeile (Wabe in Akzent-Text, Name
   halbfett, Pfeil nach unten, Richtpreis in Zweittext mit gleich breiten Ziffern; wird es eng, rückt er in eine zweite Zeile), Modellwahl mit Kapitälchen je Anbieter und Auswahlkarten B17
   mit Haken, Antwort als Blase von links mit der Wabe vor dem Namen des Modells, Markdown in den Werten der App (Code auf dem Grund
   mit Linie, Zitat mit Leiste am Anfang), Warteblase mit drei Punkten, Fehlerzeile mit Wabe und „Nochmal“. */
.ki-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--abstand-3);box-sizing:border-box;width:100%;min-height:var(--hoehe-ik);margin:0;padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);background:none;color:var(--zweit);font:inherit;font-size:var(--grad-2);line-height:var(--grad-2-zh);text-align:start;cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.ki-leiste:hover{background:var(--f3)}}
.ki-leiste:active{background:var(--linie-2)}
.ki-leiste>.ic{flex:none;width:var(--ic-16);height:var(--ic-16);color:var(--akzent-text)}
.ki-leiste>.kl-pfeil{color:var(--zweit);transform:rotate(180deg)}
.ki-leiste-name{flex:0 0 auto;max-width:60%;font-weight:var(--gewicht-halb);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ki-leiste-preis{flex:none;margin-inline-start:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.ki-wahl>.add-hint{margin:0 0 var(--abstand-4);padding:0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.ki-wahl h4{margin:var(--abstand-7) 0 var(--abstand-3);font-size:var(--grad-1);line-height:var(--grad-1-zh);font-weight:var(--gewicht-halb);letter-spacing:var(--lauf-versal);text-transform:uppercase;color:var(--zweit)}
.ki-wahl-zeile{display:flex;align-items:flex-start;gap:var(--abstand-5);box-sizing:border-box;width:100%;min-height:var(--zeile-tipp);margin:0 0 var(--abstand-3);padding:var(--abstand-5) var(--abstand-6);border:var(--rand) solid var(--linie-2);border-radius:var(--r-m);background:var(--f1);color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve)}
@media(hover:hover){.ki-wahl-zeile:hover{background:var(--f3)}}
.ki-wahl-zeile:active{background:var(--linie-2)}
.ki-wahl-zeile.an{background:var(--akzent-leise);border-color:var(--akzent-text)}
.ki-wahl-text{display:flex;flex-direction:column;gap:var(--abstand-1);flex:1;min-width:0}
.ki-wahl-text b{font-size:var(--grad-4);line-height:var(--grad-4-zh);font-weight:var(--gewicht-halb)}
.ki-wahl-zeile.an .ki-wahl-text b{color:var(--akzent-text)}
.ki-wahl-text span{font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
.ki-wahl-zeile .preis{flex:none;font-size:var(--grad-2);line-height:var(--grad-4-zh);font-variant-numeric:tabular-nums;color:var(--zweit);white-space:nowrap}
.ki-wahl-zeile .haken{flex:none;width:var(--ic-20);height:var(--ic-20);margin-top:calc((var(--grad-4-zh) - var(--ic-20)) / 2);color:var(--akzent-text);opacity:0}
.ki-wahl-zeile.an .haken{opacity:1}
@media(min-width:760px){.ki-wahl-zeile{padding:var(--abstand-4) var(--abstand-6)}.ki-wahl-text b{font-size:var(--grad-3);line-height:var(--grad-3-zh)}.ki-wahl-zeile .preis{line-height:var(--grad-3-zh)}}
.bubble-body>.ki-absender{display:inline-flex;align-items:center;gap:var(--abstand-2)}
.ki-absender>.ic{flex:none;width:var(--ic-14);height:var(--ic-14)}
.ki-md p{margin:0 0 var(--abstand-4)}
.ki-md .ki-liste{margin:0 0 var(--abstand-4);padding-inline-start:1.3em}
.ki-md .ki-liste li+li{margin-top:var(--abstand-1)}
.ki-md .ki-h{margin:var(--abstand-5) 0 var(--abstand-2);font-weight:var(--gewicht-halb)}
.ki-md .ki-h:first-child{margin-top:0}
.ki-md .ki-h1{font-size:var(--grad-5);line-height:var(--grad-5-zh)}
.ki-md :is(.ki-code,.ki-tab){max-width:100%;margin:0 0 var(--abstand-4);padding:var(--abstand-4) var(--abstand-5);border:var(--rand) solid var(--linie);border-radius:var(--r-s);background:var(--grund);overflow-x:auto;white-space:pre;font-family:var(--mono);font-size:var(--grad-2);line-height:var(--grad-2-zh)}
.ki-md :is(.ki-code,.ki-tab):focus-visible{outline-offset:calc(-1 * var(--fokus-breite))}
.ki-md code.ki-ic{padding:0 .3em;border-radius:var(--r-xs);background:var(--f3);font-family:var(--mono);font-size:.92em}
.ki-md .ki-zitat{margin:0 0 var(--abstand-4);padding-inline-start:var(--abstand-5);border-inline-start:var(--rand-stark) solid var(--linie-2);color:var(--zweit)}
.ki-md .ki-hr{margin:var(--abstand-5) 0;border:0;border-top:var(--rand) solid var(--linie)}
.ki-md>:last-child{margin-bottom:0}
.bubble.ki-wartet .body{display:inline-flex;align-items:center;gap:var(--abstand-3);color:var(--zweit)}
.ki-punkte{display:inline-flex;gap:var(--abstand-1)}
.ki-punkte i{width:.4em;height:.4em;border-radius:var(--r-voll);background:currentColor;animation:ki-puls calc(var(--dauer) * 8) ease-in-out infinite}
.ki-punkte i:nth-child(2){animation-delay:calc(var(--dauer) * 1.5)}
.ki-punkte i:nth-child(3){animation-delay:calc(var(--dauer) * 3)}
@keyframes ki-puls{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.ki-punkte i,.bubble-body .e2e-lade .ic{animation:none}}
.ki-fehler>.ic{flex:none;width:var(--ic-16);height:var(--ic-16)}
.ki-fehler>span{flex:1 1 12em;min-width:0}
.ki-fehler>.linkbtn{min-height:var(--hoehe-ik);margin-inline-start:calc(var(--ic-16) + var(--abstand-3) - var(--abstand-3));padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);background:none;color:var(--akzent-text);font:inherit;font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve)}
@media(hover:hover){.ki-fehler>.linkbtn:hover{background:var(--f3)}}
.ki-fehler>.linkbtn:active{background:var(--linie-2)}
.ki-fehler{display:flex;flex-wrap:wrap;align-items:center;align-self:flex-start;gap:0 var(--abstand-3);max-width:82%;padding:var(--abstand-2) 0;font-size:var(--grad-2);line-height:var(--grad-2-zh);color:var(--zweit)}
/* Leere Chats (29.10.2026, App-Session; Scheibe 12a): Umbenennen und Löschen unter den Frequenzen als leise Textknöpfe (B4) in
   der Zeile der Frequenzen, eingerückt wie die Titel; Löschen in Rot. Dazu die Zeilen unter „Neuer Chat“ (Zielliste C35). */
.leer-aktionen{display:flex;flex-wrap:wrap;gap:0 var(--abstand-6);padding-block:var(--abstand-1);padding-inline:calc(var(--polster-zeile) + 40px + var(--abstand-6) - var(--abstand-3)) var(--polster-zeile);border-top:var(--rand) dashed var(--linie)}
@media(min-width:760px){.leer-aktionen{padding-inline-start:calc(var(--polster-zeile) + 40px + var(--abstand-5) - var(--abstand-3))}}
.leer-akt{display:inline-flex;align-items:center;gap:var(--abstand-3);min-height:var(--hoehe-ik);padding:0 var(--abstand-3);border:0;border-radius:var(--r-s);background:none;color:var(--zweit);font:inherit;font-size:var(--grad-2);font-weight:var(--gewicht-halb);cursor:pointer;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
@media(hover:hover){.leer-akt:hover{background:var(--f3);color:var(--text)}.leer-akt.gefahr:hover{color:var(--rot)}}
.leer-akt:active{background:var(--linie-2)}
.leer-akt .ic{flex:none;width:var(--ic-16);height:var(--ic-16)}
.leer-akt.gefahr{color:var(--rot)}
.neu-wege{border-bottom:var(--rand) solid var(--linie)}
.neu-wege .bereich{text-align:start}
/* Video aus Video (28.10.2026, App-Session): gewaehlte Quelle, Ergebnis-Karten */
.ig-ref-bild.on{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
.ig-ref-bild video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ig-umbau-erg{display:flex;flex-direction:column;gap:var(--abstand-3)}
.ig-umbau-erg video{width:100%;max-height:60vh;border-radius:var(--r-s);background:var(--f2)}