/* Friday HUD — Blau und Hell (Max, 04.10.2026, nach dem Entwurf auf dem
   Canvas „Friday HUD").

   Blau ist die Vorgabe: dieselbe Dämmerung wie vorher, aber heller und
   lebendiger (Max: „das Blau ist mir zu dunkel, monoton, statisch") — ein
   Verlauf von Schieferblau nach Nachtblau, darüber zwei Lichter, die langsam
   wandern. Das eine Licht ist Türkis statt Kupfer (Max: „Türkis ist am besten,
   mach es noch etwas herausstechender"). Bernstein bleibt, wo eine
   Entscheidung wartet, Salbei für „in Ordnung", Wein für Fehler. Felder sind
   Flächen ohne Rahmen — was zusammengehört, hält der Abstand zusammen.

   Hell ist die zweite Haut (Lage → „Hell"): Creme und Gold, königlich statt
   grau, und dazu das cremeweiße Gesicht mit goldenen Ringen. Das weiße
   Gesicht gehört NUR zu Hell; Blau behält die blaue Maske (Max: „das weiße
   Gesicht gehört zum hellen Modus").

   Dieselben Namen, andere Werte. Alles, was eine Farbe braucht, nimmt sie
   von hier — nie aus einer Zahl im Skript. */
:root{
  --grund:#223052; --grund-oben:#2f3d66; --grund-unten:#182238;
  --flaeche:rgba(51,64,101,.85); --flaeche2:rgba(68,84,128,.85); --flaeche3:rgba(255,255,255,.16);
  --linie:rgba(255,255,255,.10);
  --akzent:#2ee6d0; --akzent-hell:#8ff5e9; --akzent-glas:rgba(46,230,208,.16); --akzent-glut:rgba(46,230,208,.5);
  --bernstein:#f0d36a; --bernstein-glas:rgba(240,211,106,.16);
  --gut:#7fc9a0; --rot:#ef6f7b;
  --text:#f1f3f8; --neben:#b3bfd8; --leise:#a2aecb; --auf-akzent:#14202a;
  --zahl:var(--akzent-hell); --hof:10,14,28; --nacht:transparent; --warm:rgba(90,160,255,.12);
  --licht-a:rgba(90,160,255,.45); --licht-b:rgba(46,230,208,.26);
  --blatt:rgba(34,44,74,.97); --schleier:rgba(10,14,28,.55); --denken:#9ccbff; --masken-schatten:rgba(0,0,0,.45);
  --ui:"Manrope",-apple-system,system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --oben:env(safe-area-inset-top,0px); --unten:env(safe-area-inset-bottom,0px);
}
/* Hell — Creme und Gold. Der Graph ist hier ein Nachtfenster (--nacht
   dunkel); der Hof hinter der Maske ist Creme, weil das helle Gesicht auf
   Creme gerendert ist. Keine wandernden Lichter: Hell bleibt ruhig. */
:root[data-theme="hell"]{
  --grund:#f3eee2; --grund-oben:#f7f3ea; --grund-unten:#ece5d6;
  --flaeche:#e9e2d2; --flaeche2:#e1d8c4; --flaeche3:rgba(31,27,20,.14);
  --linie:rgba(0,0,0,.08);
  --akzent:#b8862a; --akzent-hell:#cf9c3c; --akzent-glas:rgba(184,134,42,.12); --akzent-glut:rgba(184,134,42,.45);
  --bernstein:#9a3f12; --bernstein-glas:rgba(154,63,18,.12);
  --gut:#3f9a6a; --rot:#c8404e;
  --text:#1f1b14; --neben:#5f584a; --leise:#6b6354; --auf-akzent:#f3eee2;
  --zahl:#7d5a14; --hof:243,238,226; --nacht:#1b2130; --warm:rgba(184,134,42,.08);
  --licht-a:transparent; --licht-b:transparent;
  --blatt:#f3eee2; --schleier:rgba(40,30,10,.35); --denken:#4a6a96; --masken-schatten:rgba(60,40,10,.18);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--grund);color:var(--text);font-family:var(--ui);-webkit-text-size-adjust:100%}
body{background:
  radial-gradient(70% 45% at 50% 0%, var(--warm), transparent 70%),
  linear-gradient(170deg, var(--grund-oben) 0%, var(--grund) 45%, var(--grund-unten) 100%)}
/* Die zwei Lichter: weich, groß, langsam — der Schirm atmet, statt still zu
   stehen. Sie liegen hinter dem Schirm (z-index 0) und nehmen nie einen Tipp. */
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
body::before{width:420px;height:420px;left:-60px;top:40px;background:radial-gradient(circle,var(--licht-a),transparent 70%);animation:licht-a 14s ease-in-out infinite}
body::after{width:360px;height:360px;right:-80px;top:260px;background:radial-gradient(circle,var(--licht-b),transparent 70%);animation:licht-b 18s ease-in-out infinite}
@keyframes licht-a{0%,100%{transform:translate(-40px,-30px) scale(1)}50%{transform:translate(50px,40px) scale(1.15)}}
@keyframes licht-b{0%,100%{transform:translate(60px,80px) scale(1.1)}50%{transform:translate(-50px,-20px) scale(.9)}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.hidden{display:none!important}

/* Felder: eine Definition, viele Träger — Fläche, kein Rahmen. */
.karte,.fakt,.n.friday,.eingabe input,.chips button,.gate-karte,.kosten-summe,.kosten-position,.bild{
  background:var(--flaeche);border:0;box-shadow:none}

/* ---------- Anmeldung ---------- */
.gate{position:fixed;inset:0;z-index:20;background:linear-gradient(180deg,var(--grund-oben),var(--grund-unten));display:grid;place-items:center;padding:24px}
.gate-karte{width:min(360px,100%);text-align:center;display:flex;flex-direction:column;gap:12px;padding:28px 22px;border-radius:26px}
.gate-iris{width:72px;height:72px;border-radius:50%;margin:0 auto 6px;background:radial-gradient(circle at 40% 35%, #e6fffb 0, var(--akzent) 32%, #0f4a52 68%, #081a20 100%);box-shadow:0 0 40px var(--akzent-glut)}
.gate h1{font:600 22px/1 var(--ui);letter-spacing:.08em;margin:0;color:var(--text)}
.gate-sub{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--neben);margin:0}
.gate input{background:var(--flaeche2);border:0;border-radius:999px;padding:12px 18px;color:var(--text);font:inherit;font-size:16px;text-align:center}
.gate button{background:var(--akzent);color:var(--auf-akzent);border-radius:999px;padding:12px;font-weight:600}
.gate-fehler{min-height:1.2em;font:400 12px/1.2 var(--ui);color:var(--bernstein);margin:0}
.gate-hinweis{font-size:12px;line-height:1.5;color:var(--leise);margin:0}
.gate .gate-demo{background:none;color:var(--neben);font-size:12px;padding:6px;font-weight:400;text-decoration:underline;text-underline-offset:3px}

/* ---------- Der Schirm ---------- */
/* minmax(0,1fr): Ohne die Deckelung bestimmt der breiteste Inhalt die
   Spalte — bei 375 px waren das die fuenf Reiter mit 385 px, und die
   ganze HUD stand 30 px zu weit rechts. Sichtbar war es am rechten
   Rand: "vollstaendig" wurde zu "vollstaendi", der Senden-Knopf halb
   abgeschnitten. Ein Grid-Element hat von sich aus min-width:auto. */
.schirm{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;position:relative;z-index:1}
/* Der Kopf (HUD neu 2): kleines Gesicht, Name mit Tag und Uhrzeit, darunter
   was wartet, rechts ··· für das Mehr-Blatt. Ein Strich darunter, kein Kasten. */
.kopf{display:flex;align-items:center;gap:12px;padding:calc(12px + var(--oben)) 16px 10px 20px;box-shadow:inset 0 -1px 0 var(--linie);position:relative;z-index:2}
.kopf-gesicht{width:40px;height:40px;border-radius:50%;flex:none;background:#05070d url(/static/gesicht-ruhe.webp) 50% 40%/150% no-repeat;box-shadow:0 0 0 1px var(--linie);transition:box-shadow .3s}
:root[data-theme="hell"] .kopf-gesicht{background-color:var(--grund);background-image:url(/static/gesicht-ruhe-hell.webp),url(/static/gesicht-ruhe.webp)}
.kopf-gesicht[data-zustand="hoert"],.kopf-gesicht[data-zustand="lauscht"],.kopf-gesicht[data-zustand="denkt"],.kopf-gesicht[data-zustand="spricht"]{box-shadow:0 0 0 2px var(--akzent),0 0 14px var(--akzent-glut)}
.kopf-gesicht[data-zustand="wartet"]{box-shadow:0 0 0 2px var(--bernstein)}
.kopf-gesicht[data-zustand="aus"]{filter:grayscale(.7) brightness(.6)}
.kopf-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kopf-zeile{display:flex;align-items:center;gap:8px;font:700 13px/1.2 var(--ui);letter-spacing:.08em;color:var(--text);white-space:nowrap}
.kopf-zeit{font:600 12px/1.2 var(--ui);letter-spacing:0;color:var(--neben);margin-left:4px;overflow:hidden;text-overflow:ellipsis}
#uhr{font:inherit;font-variant-numeric:tabular-nums;color:inherit}
.kopf-wartet{align-self:flex-start;font:600 12px/1.3 var(--ui);color:var(--akzent);text-align:left}
.kopf-wartet[hidden]{display:none}
.kopf-mehr{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--neben);box-shadow:inset 0 0 0 1px var(--linie)}
.kopf-mehr[aria-expanded="true"]{color:var(--akzent)}
.punkt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--leise);flex:none;transition:background .3s,box-shadow .3s}
.punkt.online{background:var(--gut);box-shadow:0 0 8px var(--gut)}

/* Das Gesicht: vier Bilder übereinander, Licht davor, Zustandszeile darunter.
   Über dem Inhalt klein und ganz (Max: „deutlich kleiner, nicht abgeschnitten");
   auf der Stimme-Seite füllt es den Schirm. Die Bilder haben schwarzen Grund:
   Hinter ihnen liegt ein dunkler Hof, der in die Dämmerung ausläuft — so
   steht die Maske im Licht, statt als schwarze Scheibe auf dem Schirm. */
.gesicht{position:relative;height:150px;overflow:hidden;--glut:.55;--pegel:0;transition:height .35s ease;cursor:pointer}
/* Die Maske hält Bilder und Licht zusammen (HUD neu 3). Hier liegt sie über
   der ganzen Fläche; auf der Friday-Seite am Handy wird sie der runde Kopf. */
.maske{position:absolute;inset:0;pointer-events:none}
/* Die Freigabe-Pille gibt es nur auf der Friday-Seite am Handy. */
.freigabe-pille{display:none;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:var(--akzent-glas);box-shadow:inset 0 0 0 1.5px var(--akzent-glut),0 0 18px var(--akzent-glas);color:var(--akzent);font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.pille-punkt{width:8px;height:8px;border-radius:50%;background:var(--akzent);flex:none}
/* Der Hof passt IN den Kasten (150 px hoch = Radius 75): ein groesserer
   Kreis wuerde oben und unten abgeschnitten und zum Band. */
.gesicht::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 76px at 50% 50%, rgba(var(--hof),.92), rgba(var(--hof),.7) 55%, transparent 100%)}
.gesicht .bild{position:absolute;left:50%;top:50%;height:100%;max-height:100%;aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(1 + var(--pegel) * .015));opacity:0;transition:opacity .7s ease;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 62%, transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%, #000 62%, transparent 100%)}
.gesicht .bild.an{opacity:1}
/* Der Mund: beim Sprechen liegt das ruhige Bild nur im Bereich der Lippen
   über dem sprechenden — und wird durchsichtig, wenn die Stimme laut ist.
   Zwei echte Bilder, kein Verzerren; die Bilder sind deckungsgleich. */
.gesicht .bild.mund{clip-path:inset(55% 41% 34% 41% round 40px);transition:none;-webkit-mask-image:none;mask-image:none}
.gesicht[data-zustand="spricht"] .bild.mund{opacity:calc(1 - var(--pegel) * 1.15)}
.gesicht .glut{position:absolute;left:50%;top:50%;height:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(200,222,255,calc(.35 * var(--glut))) 0, rgba(200,222,255,calc(.12 * var(--glut))) 35%, transparent 70%);
  filter:blur(6px);transition:background .6s}
.gesicht[data-zustand="wartet"] .glut{background:radial-gradient(circle, rgba(243,207,110,calc(.35 * var(--glut))) 0, rgba(243,207,110,calc(.12 * var(--glut))) 35%, transparent 70%)}
/* Hell: das goldene Licht zur goldenen Maske. */
:root[data-theme="hell"] .gesicht .glut{background:radial-gradient(circle, rgba(214,170,80,calc(.35 * var(--glut))) 0, rgba(214,170,80,calc(.12 * var(--glut))) 35%, transparent 70%)}
.gesicht[data-zustand="aus"] .bild{filter:grayscale(.7) brightness(.5)}
.zustand{position:absolute;bottom:2px;left:0;right:0;text-align:center;font:500 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--neben);z-index:2;text-shadow:0 0 12px var(--grund)}
.zustand.bernstein{color:var(--bernstein)}

/* Die Stimme-Seite: das Gesicht füllt den Schirm, kein Inhalt, keine Textzeile */
.schirm.stimme{grid-template-rows:auto 1fr auto}
.schirm.stimme .gesicht{height:auto;min-height:0}
.schirm.stimme .gesicht::before{background:radial-gradient(circle closest-side at 50% 46%, rgba(var(--hof),.92), rgba(var(--hof),.7) 60%, transparent 100%)}
.schirm.stimme .gesicht .bild{height:auto;width:min(100%,calc(100vh - 260px));max-width:100%;top:46%}
.schirm.stimme .inhalt{display:none}
.schirm.stimme .eingabe,.schirm.stimme .korb{display:none}
.schirm.stimme .zustand{bottom:162px;font-size:11px}
.stimme-knoepfe{position:absolute;left:0;right:0;bottom:12px;display:none;flex-direction:column;align-items:center;gap:10px;z-index:3}
.schirm.stimme .stimme-knoepfe{display:flex}
.mik-gross{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:var(--akzent);background:var(--flaeche2);box-shadow:0 0 30px var(--akzent-glas)}
.mik-gross.an{background:var(--akzent);color:var(--auf-akzent);box-shadow:0 0 34px var(--akzent-glut)}
.lauschen-chip{padding:7px 14px;border-radius:999px;background:var(--flaeche2);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--neben)}
.lauschen-chip[aria-pressed="true"]{color:var(--akzent);background:var(--akzent-glas)}
.stimme-hinweis{font:400 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}

.inhalt{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 16px 16px;scrollbar-width:thin;scrollbar-color:var(--linie) transparent;position:relative;z-index:1}
.ansicht{display:none;flex-direction:column;gap:10px}
.ansicht.aktiv{display:flex}
/* 11b, Stufe A (03.10.2026): Ansichten liegen auf Ebenen. Beim Wechsel tritt
   die alte zurueck und wird blass, die neue kommt von hinten nach vorn — kurz
   genug, dass es Tiefe gibt und keine Wartezeit. Die alte bleibt dafuer einen
   Moment als Ebene dahinter (.geht, absolut ueber dem Inhalt — .inhalt ist
   schon position:relative — und nicht antippbar). */
.ansicht.aktiv{animation:ansicht-kommt .26s cubic-bezier(.2,.7,.2,1)}
.ansicht.geht{display:flex;position:absolute;top:0;left:0;right:0;padding:inherit;pointer-events:none;animation:ansicht-geht .22s ease forwards}
@keyframes ansicht-kommt{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ansicht-geht{to{opacity:0;transform:translateY(-6px) scale(.965)}}
@media (prefers-reduced-motion:reduce){.ansicht.aktiv{animation:none}.ansicht.geht{display:none}}
.augenbraue{font:600 11px/1.2 var(--ui);letter-spacing:.02em;color:var(--leise);margin:12px 4px 0}
.leer{color:var(--leise);font-size:14px;margin:6px 4px}
.leer.fehler{color:var(--bernstein)}

/* Gespräch */
.nachrichten{display:flex;flex-direction:column;gap:8px}
.tag{align-self:center;font:600 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);margin:8px 0 2px}
.n{max-width:84%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.n.max{align-self:flex-end;background:var(--akzent-glas);border-bottom-right-radius:6px}
.n.friday{align-self:flex-start;border-bottom-left-radius:6px}
.n.friday.wartet{color:var(--neben)}
.n.friday.meldung{background:var(--bernstein-glas);max-width:92%}
.n .art{display:block;margin-bottom:6px;font:600 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--bernstein)}
.n.wartet{position:relative;padding-right:34px}
.n .abbruch{position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;font:400 12px/22px var(--mono);text-align:center;color:var(--leise);background:transparent}
.n .abbruch:active{color:var(--text);background:var(--flaeche2)}
.n .abbruch:disabled{opacity:.4}
.n .verweis{display:block;margin-top:6px;font:400 11px/1.4 var(--ui);color:var(--leise);white-space:normal}
.n .verweis b{color:var(--akzent);font-weight:500}
.n .kanal{display:inline-block;margin-left:6px;font:400 10px/1 var(--ui);letter-spacing:.06em;color:var(--leise)}

/* Karten */
.karte{border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.karte.freigabe{background:var(--bernstein-glas)}
.karte.erledigt{opacity:.45}
.karte .art{display:flex;justify-content:space-between;gap:10px;font:600 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.karte.freigabe .art{color:var(--bernstein)}
.karte .satz{font-size:16px;line-height:1.35;word-break:break-word}
.karte .satz em{font-style:normal;color:var(--akzent)}
.karte .quelle{font:400 12px/1.5 var(--ui);color:var(--neben);word-break:break-word}
.karte .quelle b{font-weight:500;color:var(--text)}
.karte .wortlaut{font-size:13px;line-height:1.45;color:var(--neben);border-left:2px solid var(--linie);padding-left:10px;white-space:pre-wrap;max-height:9em;overflow:auto}
/* Das Bild des Beitrags auf der Freigabekarte (13.10.2026). Hoehe begrenzt:
   Ein Hochformat-Foto soll die Knoepfe nicht aus dem Bild schieben — die
   Entscheidung muss mit dem Beitrag zusammen sichtbar bleiben. */
.karte .post-bild{display:block;width:100%;height:auto;max-height:46vh;object-fit:cover;border-radius:14px;background:var(--flaeche)}
.knoepfe{display:flex;gap:8px;margin-top:2px}
.knoepfe button{flex:1;padding:11px 8px;border-radius:14px;font-size:14px;font-weight:500;color:var(--text);background:var(--flaeche2)}
.knoepfe button.ja{background:var(--akzent);color:var(--auf-akzent)}
.knoepfe button.frei{background:var(--bernstein);color:var(--auf-akzent)}
.knoepfe button.leise{flex:0 0 auto;color:var(--neben)}
.knoepfe button:disabled{opacity:.5;cursor:default}
.karte .ergebnis{font:400 12px/1.4 var(--ui);color:var(--gut)}
.karte .ergebnis.fehler{color:var(--bernstein)}
.fliess{font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}

/* Graph: die Lichter liegen direkt auf dem Grund — kein Kasten darum. Die
   Flaeche ist ein Stueck Schirm, das man drehen kann, kein Bild in einem
   Rahmen. */
.graph{display:flex;flex-direction:column}
/* Hochkant fast quadratisch: der Ball fuellt die kuerzere Seite, und ein
   hoher Kasten haette oben und unten nur leeren Grund. */
/* Der Graph liegt in der Dämmerung direkt auf dem Grund (--nacht durchsichtig);
   auf Weiß ist er ein Nachtfenster, ein dunkles Stück Himmel. */
.graph3d{position:relative;width:calc(100% + 32px);margin:0 -16px;height:min(100vw,62vh,560px);overflow:hidden;background:var(--nacht)}
.graph3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.graph3d .raum-marke.anker{color:var(--bernstein)}
.graph3d .raum-marke.mitte{color:var(--text);background:rgba(16,20,30,.92)}
.graph-fuss{display:flex;flex-direction:column;gap:2px;padding:6px 4px 0;font:400 12px/1.4 var(--ui);color:var(--neben)}
.graph-fuss b{font-weight:500;color:var(--text)}
/* Die Legende: welche Farbe welches Feld ist. Die Farben stehen HIER und in
   graph3d.js (TYP_FARBE) — ein Test haelt beide gleich. */
.legende{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 4px 0;font:400 11px/1.4 var(--ui);color:var(--neben)}
.legende:empty{display:none}
.lg::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:-1px;background:var(--f);box-shadow:0 0 6px var(--f)}
.lg-person{--f:#7fc4ff}.lg-org{--f:#f2c25e}.lg-project{--f:#7fe0a8}.lg-event{--f:#f29e7a}.lg-place{--f:#5fd4d0}
.lg-doc{--f:#c9b8ff}.lg-task{--f:#ffd36b}.lg-decision{--f:#ff8fb1}.lg-product{--f:#ffb27a}.lg-topic{--f:#e8ecf4}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips:empty{display:none}
.chips button{padding:7px 12px;border-radius:999px;font-size:13px;color:var(--akzent)}
.chips .hinweis{width:100%;font-size:13px;color:var(--neben)}
.fakten{display:flex;flex-direction:column;gap:4px}
.fakt{display:grid;grid-template-columns:1fr auto;gap:10px;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.35;word-break:break-word}
.fakt.ebene2{margin-left:14px;color:var(--neben)}
.fakt small{font:400 10px/1.6 var(--ui);color:var(--leise);white-space:nowrap}
.fakt.treffer{display:block}
.fakt.treffer b{display:block;font-weight:500}
.fakt.treffer span{color:var(--neben);font-size:13px}

/* Lage, Heute: Zeilen ohne Kasten — Text auf dem Schirm, der Abstand ordnet.
   Was sich antippen laesst, traegt den Pfeil; beim Druecken hellt es auf. */
.lage,.liste{display:flex;flex-direction:column;gap:0}
.zeile{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 4px;border-radius:12px;text-align:left;width:100%}
.zeile.knopf:active{background:var(--flaeche2)}
/* Team (die Pforte): Zugangsfelder und das Antwortfeld. */
.ansicht[data-a="team"] input,.ansicht[data-a="team"] textarea{width:100%;min-width:0;padding:10px 12px;border:0;border-radius:12px;background:var(--flaeche2);color:var(--text);font:inherit;font-size:14.5px}
.ansicht[data-a="team"] textarea{resize:vertical;line-height:1.45}
.ansicht[data-a="team"] .zeile .w{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.zeile .l{font-size:14.5px;min-width:0}
.zeile .l small{display:block;margin-top:1px;font:400 11.5px/1.45 var(--ui);color:var(--leise);word-break:break-word}
.zeile .w{font:400 13px/1.3 var(--mono);color:var(--neben);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.zeile .w.gut{color:var(--gut)}
.zeile .w.warn{color:var(--bernstein)}
.zeile .w.schlecht{color:var(--rot)}
.zeile.ueberfaellig .l{color:var(--bernstein)}
/* Der Abhak-Knopf an einer Aufgabe (11.10.2026). Gross genug fuer einen
   Daumen zwischen zwei Tischen: 44px ist das Mass, unter dem auf dem Telefon
   danebengetippt wird.
   NICHT '.haken' nennen — die Klasse gehoert seit jeher den Umschaltern
   (34x20-Pille, weiter unten). Zwei Regeln mit demselben Namen, und die
   spaetere gewinnt je Eigenschaft: Der Knopf wurde zur Pille, und auffallen
   konnte das nur im Auge. */
#aufgaben .zeile{grid-template-columns:auto 1fr auto;gap:10px}
.abhaken{width:44px;height:44px;min-width:44px;border-radius:50%;border:0;
  box-shadow:inset 0 0 0 1px var(--linie);background:transparent;color:var(--neben);
  font-size:17px;line-height:1;cursor:pointer}
.abhaken:active{background:var(--flaeche2)}
.abhaken:disabled{opacity:.5}
#aufgabe-neu{display:flex;gap:8px;margin:8px 0 2px}
#aufgabe-neu input{flex:1;min-width:0}

/* Kosten: einspaltig und daumentauglich; Geld und Herkunft bleiben zusammen. */
.kosten-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}.kosten-kopf small{color:var(--leise);font:400 11px/1.4 var(--ui)}
.kompakt{padding:9px 12px;border-radius:14px;background:var(--flaeche2);color:var(--text)}
.kosten-filter{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kosten-filter label{display:flex;flex-direction:column;gap:5px;font:500 11px/1 var(--ui);color:var(--leise)}
/* Trägt der Cache? Eine Zeile über den Positionen, mit Vorzeichen:
   grün, wenn er spart, bernstein, wenn er draufzahlt. */
#kosten-cache{font:400 14px/1.45 var(--ui);color:var(--neben);padding:10px 12px;border-radius:12px;background:var(--flaeche2);margin:4px 0 10px}
#kosten-cache.gut{color:var(--gut);box-shadow:inset 0 0 0 1px var(--gut)}
#kosten-cache.warn{color:var(--bernstein);box-shadow:inset 0 0 0 1px var(--bernstein)}
.kosten-filter input,.kosten-pflege input,.kosten-pflege select{width:100%;min-width:0;padding:10px;border:0;border-radius:12px;background:var(--flaeche2);color:var(--text);font:inherit}
.kosten-summen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kosten-summe{padding:13px;border-radius:16px}.kosten-summe small{display:block;color:var(--leise);font:500 10px/1.4 var(--ui);letter-spacing:.04em;text-transform:uppercase}.kosten-summe b{display:block;margin-top:6px;font:500 20px/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--zahl)}.kosten-summe b.warn{color:var(--bernstein)}.kosten-summe b.schlecht{color:var(--rot)}
.kosten-positionen{display:flex;flex-direction:column;gap:6px}.kosten-position{padding:13px;border-radius:16px}.kosten-position.luecke{background:var(--bernstein-glas)}.kosten-position header{display:flex;justify-content:space-between;gap:12px}.kosten-position header div{min-width:0}.kosten-position header b,.kosten-position header span{display:block}.kosten-position header span{color:var(--neben);font-size:13px}.kosten-position header strong{font:500 14px/1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}.kosten-meta{margin-top:6px;color:var(--leise);font:400 11px/1.45 var(--ui);word-break:break-word}
/* Das Formular (24.09.2026): Beschriftungen ueber dem Feld statt Platzhalter
   im Feld — ein Platzhalter verschwindet beim Tippen, und dann weiss niemand
   mehr, was er da ausfuellt. Das Seltene liegt eingeklappt darunter. */
.kosten-pflege form>label{display:flex;flex-direction:column;gap:5px;font:500 11px/1.3 var(--ui);color:var(--leise)}
.kosten-pflege form>label input,.kosten-pflege form>label select{font:inherit;font-size:14px;color:var(--text)}
.kosten-pflege .kosten-schalter{flex-direction:row;align-items:center;gap:9px;font-size:12px;padding:2px 0}
.kosten-pflege .kosten-schalter input{width:auto;padding:0}
.kosten-genauer{border-radius:14px;padding:10px 12px;background:var(--flaeche)}
.kosten-genauer summary{cursor:pointer;color:var(--neben);font:400 12px/1 var(--ui)}
.kosten-genauer label{display:flex;flex-direction:column;gap:5px;margin-top:10px;font:500 11px/1.3 var(--ui);color:var(--leise)}
.kosten-genauer select{width:100%;padding:10px;border:0;border-radius:12px;background:var(--flaeche2);color:var(--text);font-size:14px}
.kosten-weg{margin-top:10px;padding:7px 12px;border-radius:11px;background:var(--flaeche2);color:var(--leise);font:400 12px/1 var(--ui);cursor:pointer}
.kosten-weg:hover,.kosten-weg:disabled{color:var(--bernstein)}
.kosten-pflege{margin-top:8px;border-radius:16px;padding:12px;background:var(--flaeche)}.kosten-pflege summary{cursor:pointer;color:var(--akzent);font-size:14px}.kosten-pflege form{display:flex;flex-direction:column;gap:8px;margin-top:12px}.kosten-pflege form>button{padding:11px;border-radius:14px;background:var(--akzent);color:var(--auf-akzent);font-weight:600}
@media(max-width:380px){.kosten-summen{grid-template-columns:1fr}.kosten-position header{flex-direction:column}.kosten-position header strong{white-space:normal}}
.schalter{display:inline-flex;align-items:center;gap:8px;font:400 11px/1 var(--ui);color:var(--neben)}
.schalter .s,.haken{width:34px;height:20px;border-radius:999px;position:relative;background:var(--flaeche3);transition:background .15s}
.schalter .s::after,.haken::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--neben);transition:left .15s,background .15s}
.schalter .s.an,.haken:checked{background:var(--akzent)}
.schalter .s.an::after,.haken:checked::after{left:17px;background:#fff}
.haken{appearance:none;margin:0;cursor:pointer}
.schloss{font-size:11px;color:var(--leise)}

/* Fußleiste: liegt auf dem Grund, die Leiste ist Schrift und ein Strich */
.fuss{padding:0 10px calc(6px + var(--unten));position:relative;z-index:2}
.fuss::before{content:"";position:absolute;inset:-30px 0 0;background:linear-gradient(transparent, var(--grund-unten) 70%);pointer-events:none;z-index:-1}
.eingabe{display:flex;gap:8px;padding:8px 4px 0}
/* Korb: die Anhaenge, die noch nicht unterwegs sind. */
.korb{display:flex;gap:8px;padding:8px 4px 0;overflow-x:auto;scrollbar-width:none}
.korb::-webkit-scrollbar{display:none}
.korb .stueck{position:relative;flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--flaeche2)}
.korb .stueck img{width:100%;height:100%;object-fit:cover;display:block}
.korb .stueck.datei{display:grid;place-items:center;width:auto;min-width:56px;max-width:110px;padding:6px 20px 6px 8px;font:400 10px/1.3 var(--ui);color:var(--leise);text-align:center;word-break:break-all;overflow:hidden}
.korb .stueck .weg{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.62);color:#fff;font:400 12px/1 var(--mono);padding:0}
/* Mitgeschickte Bilder in der eigenen Nachricht. */
.n .bildchen{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.n .bildchen img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.eingabe input{flex:1;min-width:0;border-radius:999px;padding:11px 16px;color:var(--text);font:inherit;font-size:16px;background:var(--flaeche2)}
.eingabe input::placeholder{color:var(--leise)}
.eingabe button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--flaeche2)}
.eingabe .mik{color:var(--akzent)}
.eingabe .mik.an{background:var(--akzent);color:var(--auf-akzent);box-shadow:0 0 22px var(--akzent-glut)}
.eingabe .mik.lauscht{box-shadow:0 0 14px var(--akzent-glas)}
.eingabe .senden{color:var(--text)}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);margin-top:6px;padding:2px 0 0}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 10px;font:700 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);position:relative;transition:color .2s}
.tabs button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-selected="true"]{color:var(--akzent)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:3px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:var(--akzent);box-shadow:0 0 10px var(--akzent-glut)}
.tabs .zahl{position:absolute;top:2px;right:calc(50% - 26px);min-width:18px;height:18px;border-radius:9px;background:var(--akzent);color:var(--auf-akzent);font:700 11px/18px var(--ui);letter-spacing:0;text-align:center;padding:0 5px}
.tabs .zahl:empty{display:none}

/* Demo: ein Rand, damit es keiner für echt hält */
body.demo .schirm{box-shadow:inset 0 0 0 2px var(--bernstein)}
body.demo .kopf-zeile::after{content:"Demo";margin-left:auto;color:var(--akzent);letter-spacing:.08em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){.gesicht .bild{transition:none}.eingabe .mik.an{box-shadow:none}}

/* Nach unten im Gespraech (Max, 22.09.2026). Sitzt ueber dem Inhalt dicht
   ueber der Eingabe und traegt einen Punkt in Bernstein, wenn waehrend des
   Lesens etwas Neues gekommen ist. */
.runter{position:absolute;right:14px;bottom:calc(118px + var(--unten));z-index:3;
  width:40px;height:40px;border-radius:50%;
  background:var(--flaeche3);color:var(--text);
  display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.runter[hidden]{display:none}
.runter:active{transform:translateY(1px)}
.runter.neu::after{content:"";position:absolute;top:-1px;right:-1px;width:10px;height:10px;
  border-radius:50%;background:var(--bernstein);box-shadow:0 0 8px var(--bernstein);border:2px solid var(--grund)}

/* Arbeitslage: der Akteur traegt die Zeile, nicht der Text. */
.akteur{font:600 10px/1.4 var(--ui);letter-spacing:.06em;color:var(--akzent);text-transform:uppercase}
.akteur.rolle{color:var(--gut)}
.akteur.job{color:var(--bernstein)}
.akteur.ohne{color:var(--leise)}
.n .verweis + .verweis{margin-top:2px}
/* Die Abwesenheit eines Werkzeugs ist eine Aussage, nicht ein Werkzeugname:
   kursiv und leiser, damit sie nicht wie ein Befund schreit — aber da. */
.n .verweis.ohne{font-style:italic;opacity:.65}
/* Was nachweislich nicht durchkam — am einzelnen Werkzeug, nicht als eigene
   Zeile: Es ist eine Einschraenkung zu dem, was dasteht, kein zweiter Befund.
   Bernstein wie ueberall fuer "sieh hin", nicht Rot: Ein unbestaetigter
   Aufruf ist kein Absturz, und bei einer Zeitgrenze kann er sogar geklappt
   haben. */
.n .verweis .offen{font-style:normal;color:var(--bernstein)}
.grenze{margin:14px 4px 0;font:400 12px/1.6 var(--ui);color:var(--leise);border-left:2px solid var(--linie);padding-left:10px}
.laeuft-punkt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--akzent);margin-right:6px;vertical-align:middle;animation:pulsen 1.6s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.laeuft-punkt{animation:none;opacity:.8}}

/* Ehemals style="…" im HTML und in app.js. Steht hier, weil die CSP kein
   'unsafe-inline' erlaubt (server.py, CSP) — ein Attribut style="…" wird vom
   Browser still verworfen, und das Ergebnis waere ein Layout, das niemand
   mehr erklaeren kann. */
.abstand{margin-top:18px}
.grenze.breit{grid-column:1/-1}
.vorformatiert{white-space:pre-wrap}
.bild-fertig{width:100%;border-radius:10px}
.knopf-link{text-align:center;padding:9px 14px;border-radius:999px}

/* ---------------------------------------------------------------- Zeigen
   Fridays Antwort im Gespraechsfeld, formatiert (Max, 01.10.2026: "ich will
   es einfach visueller: Friday zeigt anstatt nur zu sagen, auch im
   Gespraechsfeld, ohne dass ich mich zwangslaeufig durchklicken muss").

   Die Blase traegt sonst white-space:pre-wrap — fuer rohen Text richtig, fuer
   Absaetze und Listen falsch: Jeder Umbruch zaehlte dann doppelt. Darum
   schaltet .formatiert darauf um, und die Abstaende kommen von den Bloecken.
   Wer nicht formatiert wird (Max' eigener Text), behaelt pre-wrap. */
.formatiert{white-space:normal}
.formatiert > :first-child{margin-top:0}
.n.formatiert > .art + *{margin-top:0}
.formatiert > :last-child{margin-bottom:0}
.formatiert p{margin:0 0 .6em}
.formatiert h3,.formatiert h4,.formatiert h5{
  margin:1em 0 .35em;font-family:var(--ui);line-height:1.25;color:var(--text)}
.formatiert h3{font-size:16px;font-weight:600}
.formatiert h4{font-size:15px;font-weight:600}
.formatiert h5{font:600 11px/1.3 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--akzent)}
.formatiert ul,.formatiert ol{margin:0 0 .6em;padding-left:1.25em}
.formatiert li{margin:.18em 0}
.formatiert li > ul,.formatiert li > ol{margin:.18em 0 .18em}
.formatiert strong{font-weight:600;color:var(--text)}
.formatiert em{font-style:italic;color:var(--neben)}
.formatiert code{font:400 12.5px/1.45 var(--mono);background:var(--flaeche2);
  border-radius:5px;padding:.1em .34em}
/* Breites bleibt breit und scrollt in SICH — nicht die Seite. Ein Codeblock
   oder eine Tabelle, die den Rumpf seitwaerts schiebt, macht die ganze HUD
   unbenutzbar. */
.formatiert pre{margin:0 0 .6em;padding:9px 11px;overflow-x:auto;
  background:var(--flaeche2);border-radius:10px}
.formatiert pre code{background:none;padding:0;white-space:pre}
.formatiert .tabelle{overflow-x:auto;margin:0 0 .6em;
  background:var(--flaeche);border-radius:10px}
.formatiert table{border-collapse:collapse;width:100%;font-size:13.5px}
.formatiert th,.formatiert td{padding:6px 9px;text-align:left;
  border-bottom:1px solid var(--linie);white-space:nowrap}
.formatiert thead th{font:600 10px/1.3 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--leise)}
.formatiert tbody tr:last-child td{border-bottom:0}
/* Rechtsbuendig macht aus einer Spalte erst eine Spalte; tabular-nums stellt
   die Ziffern untereinander. Bewusst OHNE Mono: Darin bekaeme das deutsche
   Dezimalkomma eine volle Zelle, und aus 6,5 wuerde sichtbar "6 , 5". */
.formatiert td.zahl,.formatiert th.zahl{text-align:right}
.formatiert td.zahl{font-variant-numeric:tabular-nums}
.formatiert blockquote{margin:0 0 .6em;padding-left:10px;
  border-left:2px solid var(--linie);color:var(--neben)}
.formatiert hr{border:0;border-top:1px solid var(--linie);margin:.9em 0}
.formatiert a{color:var(--akzent);text-decoration:underline;
  text-underline-offset:2px;overflow-wrap:anywhere}
/* Das gezeigte Bild aus dem Vault. Keine festen 64 Pixel wie bei den
   Anhaengen (.bildchen): Ein Personalplan, auf Daumennagelgroesse gebracht,
   ist genau das, was Max sich nicht mehr ansehen wollte. */
.formatiert figure{margin:0 0 .6em}
.formatiert .zeigebild{display:block;width:100%;height:auto;border-radius:10px;background:var(--flaeche)}
.formatiert figcaption{margin-top:4px;font:400 11px/1.4 var(--ui);color:var(--leise)}
.formatiert .fehlt{font:400 12px/1.5 var(--ui);color:var(--leise)}

/* ---------------------------------------------------------------- Bühne
   Max, 02.10.2026: „Friday-Gesicht ist so wie es ist … wenn ich aber eine
   visuelle Darstellung fordere, wird das Gesicht durch die Visualisierung
   ausgetauscht, aber redet weiter mit mir. Wenn die Darstellung nicht mehr
   gebraucht wird, wird sie wieder durch das Gesicht ersetzt."

   Sie liegt IM Gesicht und nimmt genau dessen Platz — die Zustandszeile und
   der große Sprechknopf liegen darüber und bleiben stehen. Darum kein
   Seitenwechsel: Wer gerade spricht, behält den Knopf für die nächste Frage.

   Nur auf Seite 1. Auf den anderen Seiten steht die Antwort ohnehin im
   Gesprächsfeld, und das Gesicht ist dort nur 150 Pixel hoch. */
.buehne{position:absolute;inset:0 0 150px;display:flex;z-index:2}
.buehne[hidden]{display:none}
.buehne-inhalt{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:14px 16px;font-size:14.5px;line-height:1.45;
  mask-image:linear-gradient(#000 88%,transparent 100%)}
/* Das Gesicht geht, die Bühne kommt — dieselbe Blende wie zwischen zwei
   Zuständen (.bild hat opacity .7s), damit es ein Wechsel ist und kein Ruck. */
.gesicht.zeigt .bild{opacity:0!important}
.gesicht.zeigt::before{opacity:0}
.gesicht.zeigt .glut{opacity:.25}
.buehne-inhalt > :first-child{padding-right:38px}
.buehne-zu{position:absolute;top:6px;right:8px;width:28px;height:28px;border-radius:50%;
  font:300 16px/28px var(--mono);text-align:center;color:var(--neben);
  background:var(--flaeche3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3}
.buehne-zu:active{color:var(--text)}
/* Auf Seite 1 reicht die Bühne bis über die Knöpfe hinunter; sonst gibt es
   sie nicht. */
.schirm:not(.stimme) .buehne{display:none}

/* Die Zeit je Aufruf (Max, 02.10.2026: „will ich den log für die aufrufe mit
   vermerk auf die zeit"). Zahlen gleich breit, damit sie untereinander
   stehen, und leiser als der Werkzeugname: Die Zeit ist der Nachsatz. */
.n .verweis .dauer{font-style:normal;font-variant-numeric:tabular-nums;color:var(--leise);opacity:.75}
.n .verweis.gesamt{color:var(--akzent);font-variant-numeric:tabular-nums}
/* In der Aufrufliste dieselbe Schreibweise wie unter der Antwort. Ein
   gescheiterter Lauf hebt sich ab — er ist der Grund, warum man hier
   nachsieht. */
.karte .quelle .dauer{font-style:italic;font-variant-numeric:tabular-nums;color:var(--neben)}
.karte .quelle.fehler{color:var(--rot)}

/* ---------- Die Raumschicht (Bauweg 17, mit 11) ---------- */
/* Max, 02.10.2026: „räumliche Darstellung von allen möglichen Dingen".
   Die Fläche zeichnet WebGL, die Beschriftung liegt als HTML darüber: Text in
   WebGL kostet eine Schriftgrafik und wird unscharf, HTML bleibt scharf und
   erbt die Typografie der HUD. */
.raum{margin:10px 0;display:flex;flex-direction:column;gap:8px}
.raum-bild{position:relative;width:100%;aspect-ratio:4/3;max-height:52vh;border-radius:16px;overflow:hidden;
  background:var(--flaeche2)}
/* touch-action: none — ohne das wird jedes Ziehen zum Scrollen der Seite,
   und das Modell lässt sich am Handy nicht drehen. */
.raum-flaeche{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.raum-flaeche:active{cursor:grabbing}
/* Die Markenschicht darf das Drehen nicht abfangen — nur die Anker selbst
   nehmen Berührungen an. */
.raum-marken{position:absolute;inset:0;pointer-events:none}
.raum-marke{position:absolute;left:0;top:0;white-space:nowrap;padding:3px 8px;border-radius:999px;
  font:500 10.5px/1.5 var(--ui);letter-spacing:.02em;color:var(--text);
  background:rgba(16,20,30,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.raum-marke.anker{pointer-events:auto;color:var(--akzent-hell);cursor:pointer}
.raum-marke.anker::after{content:" ›";opacity:.7}
.raum-knoepfe{margin:0}
.raum figcaption{font:400 12px/1.5 var(--ui);color:var(--leise)}
/* In der Bühne füllt die Darstellung die Fläche, die vorher das Gesicht war
   (PR 207). Dort gibt es keinen Platz für ein 4:3-Kästchen. */
.buehne .raum{height:100%;margin:0}
.buehne .raum-bild{flex:1;aspect-ratio:auto;max-height:none}

/* Der Rückweg aus dem Graphen in die Zeichnung (Bauweg 17b) */
#graph-raum-hinweis{margin-top:8px}
#graph-raum:not(:empty){margin-top:10px}

/* Diagramme (diagramm.js, 11b Stufe 1): die Farben der HUD an EINER Stelle.
   Das Skript setzt Klassen, nie Farben — sonst liefe die Palette auseinander. */
.bild{padding:10px 12px 8px;border-radius:16px;margin:0 0 8px}
.diagramm{display:block;width:100%;height:auto;overflow:visible}
.dg-text{font:500 9px var(--ui);fill:var(--text);letter-spacing:.02em}.dg-leise{fill:var(--leise)}.dg-wert{fill:var(--zahl);font-weight:600}.dg-leer{fill:var(--leise)}
.dg-achse{stroke:var(--linie);stroke-width:1}.dg-raster{stroke:var(--linie);stroke-width:.6}
.dg-flaeche{fill:var(--akzent-glas)}.dg-linie{fill:none;stroke:var(--akzent);stroke-width:1.6;stroke-linejoin:round}
.dg-punkt{fill:var(--akzent)}.dg-punkt.dg-warn{fill:var(--bernstein)}.dg-punkt.dg-schlecht{fill:var(--rot)}.dg-stiel{stroke:var(--linie);stroke-width:1}
.dg-schiene{fill:var(--flaeche2)}.dg-balken{fill:var(--akzent)}.dg-balken.dg-warn{fill:var(--bernstein)}.dg-balken.dg-schlecht{fill:var(--rot)}
.dg-ring-hinten{fill:none;stroke:var(--flaeche3);stroke-width:6}.dg-ring-vorn{fill:none;stroke:var(--akzent);stroke-width:6;stroke-linecap:round}
.dg-ring-vorn.dg-gut{stroke:var(--gut)}.dg-ring-vorn.dg-warn{stroke:var(--bernstein)}.dg-ring-vorn.dg-schlecht{stroke:var(--rot)}
.dg-ring-text{font-size:11px;fill:var(--text)}
.dg-band{fill:var(--bernstein-glas)}.dg-jetzt{stroke:var(--bernstein);stroke-width:1;stroke-dasharray:2 2}
.dg-legende{display:block;margin-top:4px;color:var(--leise);font:500 9.5px/1.4 var(--ui);letter-spacing:.04em;text-transform:uppercase}
.ringe{display:flex;gap:10px;justify-content:space-around;align-items:center}.ringe .diagramm{width:72px;height:72px;flex:0 0 72px}

/* ---------------------------------------------------------------- Seiten
   HUD neu 4 (Entwurf: Gespräch, Karten, Lage, Heute, Kosten, Aufrufe,
   Arbeitslage). Dieselben Bausteine wie bisher — app.js baut sie —, nur
   gefasst wie im Entwurf: Überschriften als ruhige Großbuchstaben, Listen
   in einer Fläche statt lose auf dem Grund, Knöpfe 48 px hoch, die eine
   Antwort im Akzent, die andere als Ring. Eine Freigabe trägt den Akzent
   als Ring und Schein: Sie ist das Einzige, was wirklich wartet. */
.augenbraue{font:700 12px/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--neben);margin:16px 4px 2px}
.ansicht > .augenbraue:first-child,.kosten-kopf .augenbraue{margin-top:4px}
.lage,.liste{background:var(--flaeche);border-radius:18px;padding:2px 14px}
.lage:empty,.liste:empty{display:none}
.lage .zeile,.liste .zeile{border-radius:0;padding:12px 2px}
.lage .zeile + .zeile,.liste .zeile + .zeile,.liste > * + *{box-shadow:inset 0 1px 0 var(--linie)}
.lage .zeile.knopf:active{background:transparent;opacity:.7}
.zeile .l{font-size:15px}
.liste > .leer,.lage > .leer{padding:10px 0;margin:0}
.karte{border-radius:18px;padding:16px;gap:10px}
.karte .art{font:700 11px/1.2 var(--ui);letter-spacing:.1em}
.karte .satz{font-size:17px;font-weight:600;line-height:1.35}
.karte.freigabe{background:var(--flaeche);box-shadow:inset 0 0 0 1.5px var(--akzent-glut),0 0 18px var(--akzent-glas)}
.karte.freigabe .art{color:var(--akzent)}
.karte .wortlaut{border-left-color:var(--akzent-glut)}
.knoepfe{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:4px}
.knoepfe button,.knoepfe .knopf-link{min-height:48px;padding:6px 8px;border-radius:12px;font:600 14px/1.15 var(--ui);text-align:center;color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--akzent-glut);display:flex;align-items:center;justify-content:center}
.knoepfe button.ja,.knoepfe button.frei,.knoepfe .ja{background:var(--akzent);color:var(--auf-akzent);font-weight:700;box-shadow:none}
.knoepfe button.leise{color:var(--neben);box-shadow:inset 0 0 0 1px var(--linie)}
.chips button{box-shadow:inset 0 0 0 1px var(--akzent-glut)}
.chips button.an{background:var(--akzent);color:var(--auf-akzent);box-shadow:none;font-weight:600}
.kompakt{padding:9px 14px;border-radius:999px;color:var(--akzent);background:transparent;box-shadow:inset 0 0 0 1px var(--akzent-glut);font-weight:600}
.kosten-summe{border-radius:16px;padding:14px}
.kosten-summe b{font-size:22px}
.n{font-size:15.5px;line-height:1.45}
.n.friday{border-radius:18px;border-bottom-left-radius:6px;padding:12px 14px}
.n .verweis b{font:500 11px/1.4 var(--mono)}
#bild-datei,#bild-frage{width:100%;min-width:0;padding:11px 14px;border:0;border-radius:12px;background:var(--flaeche2);color:var(--text);font:inherit;font-size:15px}

/* Die Übersicht (HUD neu 5): Status oben, was wartet, dann die Kacheln — je
   Bereich eine Zahl. Schmal zwei Spalten, breit so viele, wie passen. */
.ue-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:4px 4px 0}
.ue-titel{margin:0;font:700 22px/1.2 var(--ui);color:var(--text)}
.ue-kopf small{font:400 12px/1.4 var(--ui);color:var(--neben)}
.ue-status{display:flex;gap:8px;flex-wrap:wrap}
.ue-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font:500 12.5px/1.2 var(--ui);color:var(--neben);box-shadow:inset 0 0 0 1px var(--linie)}
.ue-chip.an{color:var(--text);background:var(--akzent-glas);box-shadow:inset 0 0 0 1px var(--akzent-glut)}
.ue-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;margin-right:10px;vertical-align:1px;background:var(--leise)}
.ue-punkt.gut{background:var(--gut);margin-right:0}.ue-punkt.akzent{background:var(--akzent)}.ue-punkt.warn{background:var(--bernstein)}
.ue-chip .ue-punkt{margin-right:0}
.ue-zeile .w.akzent{color:var(--akzent)}
.ue-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ue-kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:116px;padding:14px;border-radius:18px;background:var(--flaeche);text-align:left;color:var(--text)}
.ue-kachel:active{opacity:.75}
.ue-name{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--neben)}
.ue-name svg{width:16px;height:16px;stroke:var(--akzent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ue-gross{font:700 19px/1.2 var(--ui);overflow-wrap:anywhere}
.ue-klein{font:400 12.5px/1.4 var(--ui);color:var(--neben)}
.ue-kachel.satz .ue-gross{font:600 14.5px/1.35 var(--ui);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ue-abz{position:absolute;top:12px;right:12px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--akzent);color:var(--auf-akzent);font:700 11px/20px var(--ui);text-align:center}

/* ---------------------------------------------------------------- Mehr
   HUD neu 2 (Max, 04.10.2026): „Können wir es so machen, dass ich die
   Zusatzansichten hochziehen kann?" — „es sollte gar nicht zu sehen sein,
   nur wenn man hochzieht". Geschlossen liegt das Blatt ganz unter dem Rand,
   ohne Schatten und unsichtbar; die Zone am unteren Rand nimmt das Ziehen
   an und reicht einen Tipp an die Reiter darunter weiter (hud.js). */
.mehr-schleier{position:fixed;inset:0;z-index:30;background:var(--schleier);opacity:0;pointer-events:none;transition:opacity .3s}
.mehr-schleier.offen{opacity:1;pointer-events:auto}
.mehr{position:fixed;left:0;right:0;bottom:0;z-index:31;max-width:560px;margin:0 auto;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--blatt);border-radius:24px 24px 0 0;padding:4px 16px calc(20px + var(--unten));display:flex;flex-direction:column;gap:2px;
  transform:translateY(100%);visibility:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s}
.mehr.offen,.mehr.zieht{visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mehr.offen{transform:none;box-shadow:0 -20px 60px rgba(0,0,0,.3)}
.mehr.zieht{transition:none}
.mehr-griff{width:100%;height:28px;flex:none;display:grid;place-items:center;touch-action:none;cursor:grab}
.mehr-griff span{width:44px;height:5px;border-radius:3px;background:var(--flaeche3)}
.mehr-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 6px 8px;font:400 12px/1.3 var(--ui);color:var(--neben)}
.mehr-kopf b{font-weight:700;letter-spacing:.1em}
.mehr-liste{display:flex;flex-direction:column}
.mehr-eintrag{display:flex;align-items:center;gap:14px;width:100%;padding:11px 6px;border-radius:12px;text-align:left;box-shadow:inset 0 -1px 0 var(--linie)}
.mehr-eintrag:active{background:var(--flaeche2)}
.mehr-icon{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--akzent-glas);color:var(--akzent)}
.mehr-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mehr-eintrag .l{flex:1;min-width:0;font:600 16px/1.3 var(--ui);color:var(--text)}
.mehr-eintrag .l small{display:block;margin-top:2px;font:400 12px/1.4 var(--ui);color:var(--neben)}
.mehr-eintrag .w{color:var(--neben)}
.mehr-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 6px 0;font:400 13px/1.3 var(--ui);color:var(--neben)}
#logout{color:var(--akzent);font-weight:600;padding:8px 0}
.mehr-zone{position:fixed;left:60px;right:60px;bottom:0;height:calc(14px + var(--unten));z-index:5;touch-action:none}
@media (prefers-reduced-motion:reduce){.mehr,.mehr.offen,.mehr-schleier{transition:none}}

/* Schmal steht Friday nur auf der eigenen Seite groß; auf allen anderen
   sitzt das Gesicht klein im Kopf (Entwurf: Gespräch, Karten, Lage …). */
@media (max-width:759px){
  .schirm:not(.stimme){grid-template-rows:auto minmax(0,1fr) auto}
  .schirm:not(.stimme) .gesicht{display:none}
  .schirm.stimme .kopf-gesicht,.schirm.stimme .kopf-wartet{display:none}

  /* Die Friday-Seite (HUD neu 3, Entwurf „Friday"): oben der runde Kopf,
     darunter das Wort für das, was Friday gerade tut, darunter klein die
     Freigabe — und unten das Mikro. Kein Textfeld (Max: „kein Feld zum
     Tippen bei Friday, dafür habe ich extra das Gesprächsfeld"). Zuhören
     wandert ins Mikro: es leuchtet und pulst, solange Friday zuhört.
     Ein Fluss statt fester Abstände, damit auf kleinen Handys nichts
     übereinanderliegt — der Kopf gibt nach, nicht das Mikro. */
  .schirm.stimme .gesicht{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 24px 14px}
  .schirm.stimme .gesicht::before{display:none}
  .schirm.stimme .maske{position:relative;inset:auto;margin:auto 0 12px;flex:0 1 auto;height:min(78vw,330px);min-height:140px;max-width:100%;aspect-ratio:1;border-radius:50%;
    box-shadow:0 0 0 1px var(--linie),0 30px 80px var(--masken-schatten);transition:opacity .4s ease}
  .schirm.stimme .gesicht .bild{width:100%;height:100%;top:50%;max-width:none;border-radius:50%;-webkit-mask-image:none;mask-image:none}
  .schirm.stimme .gesicht.zeigt .maske{opacity:0}
  .schirm.stimme .zustand{position:static;font:700 12px/1.2 var(--ui);letter-spacing:.18em;text-shadow:none;text-align:center}
  .schirm.stimme .gesicht[data-zustand="hoert"] .zustand,.schirm.stimme .gesicht[data-zustand="lauscht"] .zustand,.schirm.stimme .gesicht[data-zustand="spricht"] .zustand{color:var(--akzent)}
  .schirm.stimme .gesicht[data-zustand="denkt"] .zustand{color:var(--denken)}
  .schirm.stimme .freigabe-pille:not([hidden]){display:flex}
  .schirm.stimme .stimme-knoepfe{position:static;margin-top:auto;gap:12px}
  .schirm.stimme .stimme-hinweis{order:-1;font:700 11px/1 var(--ui);letter-spacing:.14em;color:var(--neben)}
  .schirm.stimme .stimme-hinweis.an{color:var(--akzent)}
  .schirm.stimme .lauschen-chip{order:2}
  .schirm.stimme .mik-gross{width:88px;height:88px;background:var(--flaeche);box-shadow:inset 0 0 0 1.5px var(--akzent-glut)}
  .schirm.stimme .mik-gross svg{width:34px;height:34px}
  .schirm.stimme .mik-gross.an{background:var(--akzent);color:var(--auf-akzent);animation:puls 1.4s ease-out infinite}
  .schirm.stimme .gesicht[data-zustand="hoert"] .maske,.schirm.stimme .gesicht[data-zustand="lauscht"] .maske{animation:puls 1.6s ease-out infinite}
  .schirm.stimme .gesicht[data-zustand="denkt"] .maske{animation:atmen 2.4s ease-in-out infinite}
  .schirm.stimme .gesicht[data-zustand="denkt"] .maske::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid transparent;border-top-color:var(--denken);animation:kreisen 1.8s linear infinite}
  .schirm.stimme .buehne{inset:0 0 170px}
  .schirm.stimme .buehne-inhalt{font-size:18px;line-height:1.5}
}
/* Puls: ein Ring, der sich vom Rand löst und verblasst — Zuhören. Atmen und
   Kreisen: Denken. Wer weniger Bewegung will, bekommt das Wort ohne Bewegung. */
@keyframes puls{0%{box-shadow:0 0 0 0 var(--akzent-glut)}100%{box-shadow:0 0 0 22px transparent}}
@keyframes atmen{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes kreisen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.maske,.maske::after,.mik-gross.an{animation:none!important}}

/* ---------------------------------------------------------------- Breit
   Max, 03.10.2026: "Hud füllt nicht den gesamten Bildschirm aus und verliert
   damit Platz" und "hud muss auch drehbar sein, wenn ich den bildschirm
   drehe". Ab 760 px Breite — der Mac, das Tablet, das gedrehte Handy —
   wird der Schirm zwei Spalten: links Gesicht, Gespraech und Eingabe (das
   bleibt immer da), rechts die Reiter und die Ansicht. Die Reiter "Friday"
   und "Gespraech" verschwinden dort, weil beides ohnehin links steht;
   app.js leitet sie auf die rechte Spalte um.

   .inhalt und .fuss werden zu display:contents — ihre Kinder sind dann
   direkt Zellen des Schirm-Rasters, ohne dass index.html umgebaut wird.
   Ein Handy im Querformat ist breit, aber niedrig: unter 480 px Hoehe
   steht die linke Spalte in einer Reihe (siehe den Block darunter). */
@media (min-width:760px){
  .schirm{max-width:none;grid-template-columns:min(380px,38%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto}
  .kopf{grid-column:1;grid-row:1;padding-right:20px}
  /* Die linke Spalte steht immer: Kopf, Wort, Sprechen. Sie bekommt Luft
     statt fester Abstaende — vorher klebten Wort, Zuhoeren und Mikro unter
     dem Bild aneinander (Max, 05.10.2026: „aufraeumen"). Derselbe runde Kopf
     wie auf der Friday-Seite, nur kleiner; Hochkant bleibt unberuehrt. */
  .gesicht{grid-column:1;grid-row:2;height:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 20px 16px}
  .gesicht::before{display:none}
  .maske{position:relative;inset:auto;width:min(190px,52%);aspect-ratio:1;border-radius:50%;overflow:hidden;
    box-shadow:0 0 0 1px var(--linie),0 18px 44px var(--masken-schatten)}
  .gesicht .bild{width:100%;height:100%;top:50%;max-width:none;border-radius:50%;-webkit-mask-image:none;mask-image:none}
  .zustand{position:static;font:700 11px/1.2 var(--ui);letter-spacing:.16em;text-shadow:none;text-align:center}
  .stimme-knoepfe{position:static;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px}
  .stimme-knoepfe .mik-gross{width:52px;height:52px}
  .stimme-knoepfe .mik-gross svg{width:22px;height:22px}
  .stimme-hinweis{display:none}
  .buehne{inset:0 0 86px}
  .inhalt,.fuss{display:contents}
  .schirm.stimme .inhalt{display:contents}
  .fuss::before{display:none}
  .ansicht[data-a="gespraech"]{display:flex;grid-column:1;grid-row:3;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 8px;scrollbar-width:thin;scrollbar-color:var(--linie) transparent}
  .ansicht.aktiv:not([data-a="gespraech"]){grid-column:2;grid-row:2/6;overflow-y:auto;overscroll-behavior:contain;padding:6px 28px 24px;scrollbar-width:thin;scrollbar-color:var(--linie) transparent}
  .ansicht.geht{display:none}
  .korb{grid-column:1;grid-row:4;padding:8px 14px 0}
  .eingabe{grid-column:1;grid-row:5;padding:8px 14px calc(10px + var(--unten))}
  .tabs{grid-column:2;grid-row:1;grid-template-columns:repeat(5,auto);justify-content:end;gap:6px;margin:0;padding:calc(10px + var(--oben)) 20px 0}
  .tabs button{padding:8px 10px 10px}
  .tabs button[data-a="stimme"],.tabs button[data-a="gespraech"]{display:none}
  .runter{right:auto;left:calc(min(380px,38%) - 54px);bottom:calc(78px + var(--unten))}
  .n{max-width:92%}
  .graph3d{width:calc(100% + 56px);margin:0 -28px;height:min(72vh,680px)}
  .kosten-summen{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Breit steht das große Gesicht links ohnehin; das Mehr-Blatt wird ein
     Aufklappmenü unter ···, ohne Ziehen. */
  .kopf-gesicht,.mehr-zone,.mehr-griff{display:none}
  .mehr{left:16px;right:auto;top:calc(64px + var(--oben));bottom:auto;width:340px;max-height:calc(100vh - 96px);margin:0;border-radius:18px;
    padding:10px 10px 14px;transform:translateY(-8px);opacity:0;transition:opacity .2s,transform .2s,visibility 0s linear .2s}
  .mehr.offen{transform:none;opacity:1;transition:opacity .2s,transform .2s;box-shadow:0 18px 50px rgba(0,0,0,.35)}
  .mehr-schleier{background:transparent}
}
/* Das gedrehte Handy: breit, aber niedrig. Hier steht die linke Spalte in
   EINER Reihe — Kopf, Wort, Mikro —, damit das Sprechen sichtbar bleibt
   (Max, 05.10.2026: „ist dir quer das Sprechen wichtig?" — ja). Vorher war
   es dort ganz ausgeblendet, und es blieb nur das kleine Mikro in der
   Eingabezeile. Das Zuhoeren bleibt weg: ein Dauerzustand, kein Handgriff —
   er steht in der Lage. */
@media (min-width:760px) and (max-height:480px){
  .gesicht{height:auto;flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:8px 14px}
  .maske{width:96px;flex:0 0 auto}
  .zustand{flex:1 1 auto;text-align:left;font-size:10.5px}
  .stimme-knoepfe{flex:0 0 auto;flex-direction:row;gap:8px}
  .stimme-knoepfe .mik-gross{width:46px;height:46px}
  .stimme-knoepfe .mik-gross svg{width:20px;height:20px}
  .stimme-knoepfe .lauschen-chip{display:none}
  .buehne{inset:0 0 56px}
  .graph3d{height:calc(100vh - 120px)}
}

/* ---------------------------------------------------------------- Stellwerk
   Max, 05.10.2026: Verlauf täglich und Web-Suche lassen sich in der Lage
   umlegen — nur nach unten, die .env bleibt die Obergrenze (stellwerk.py).
   Der Schalter ist ein echter Knopf (role=switch), die Wahl der Suche drei
   Knöpfe in einer Fläche; die gewählte trägt den Akzent. */
.sw-knopf{background:transparent;padding:0;min-height:44px;color:var(--neben);font:600 12px/1 var(--ui);cursor:pointer}
.sw-knopf:disabled{cursor:default;opacity:.55}
.sw-wahl{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--flaeche3)}
.sw-wahl button{min-height:38px;min-width:58px;padding:0 10px;border-radius:9px;background:transparent;color:var(--neben);font:600 13px/1 var(--ui);cursor:pointer}
.sw-wahl button[aria-pressed="true"]{background:var(--akzent);color:var(--auf-akzent);font-weight:700}
.sw-wahl button:disabled:not([aria-pressed="true"]){opacity:.4;cursor:default}
/* Die Wahl der Suche steht unter dem Namen, über die ganze Breite — neben
   dem Namen bliebe für den Stand darunter nur ein Streifen. */
.zeile.sw-breit{grid-template-columns:1fr}
.zeile.sw-breit .w{text-align:left}
.zeile.sw-breit .sw-wahl{display:flex}
.zeile.sw-breit .sw-wahl button{flex:1 1 0}
.sw-zurueck{background:transparent;padding:0;color:var(--akzent);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* --- Der Tresor (static/tresor.js) ------------------------------------- */
.tresor-papier{font:600 17px/1.7 var(--mono);letter-spacing:.06em;word-break:break-all;padding:12px 14px;border-radius:14px;background:var(--flaeche2);color:var(--text);user-select:all;-webkit-user-select:all}
.tresor-meter{font:400 12px/1.4 var(--ui);color:var(--neben);margin:2px 6px}
.tresor-balken{height:6px;border-radius:999px;background:var(--flaeche2);overflow:hidden}
.tresor-balken span{display:block;height:100%;width:0;background:var(--akzent);transition:width .2s}
.tresor-klein{font:500 12px/1 var(--ui);padding:6px 10px;border-radius:999px}
#tresor textarea{width:100%;border-radius:14px;padding:11px 14px;background:var(--flaeche2);color:var(--text);border:0;font:inherit;resize:vertical}
#tresor input[type="file"]{font:400 13px/1.4 var(--ui);color:var(--neben)}
#tresor img,#tresor video{max-width:100%;border-radius:14px;display:block}
#tresor input:not([type="file"]){width:100%;border-radius:14px;padding:11px 14px;background:var(--flaeche2);color:var(--text);border:0;font:inherit}
#tresor input::placeholder,#tresor textarea::placeholder{color:var(--leise)}
#tresor .karte .art button{margin-left:auto}

/* Der Code eines neuen Zugangs (docs/pforte.md): gross genug zum Vorlesen
   und Abtippen, und er steht nur einmal da. */
.code-gross { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 26px;
  letter-spacing: 3px; margin: 10px 0; user-select: all; }