/* AAOS 2.0 — Raum-Stylesheet (02.10.2026, Fassung 5: Market Intelligence; v32: Holo-Kopfzeile, Bubbles-Knopf; v33: Top-20-Laufliste links, Kopfzeile ohne Nummer; v34: Laufliste halb so groß, grün/rot, Schreibmaschine, zwei Durchläufe; v35: Laufliste scroll-/klickbar, Palette + Glow + Tempo-Regler; v36: Lauf per JS, Rad zusätzlich; v41: Calls-Kachel, Schriftwahl, Hintergrund, Schaufenster-Abzeichen). Baut auf
   styles.css auf; ändert dort nichts. Gleich große Kacheln (.panel) schweben
   als CSS3D-Objekte auf einem Ring um die Punkt-Erde (aaos2.js).
   Farbsprache: Grün = bullisch, Rot = bearisch (Erde, Balken, Indikatoren);
   Blau/Violett/Cyan sind Raum-Akzente (Glas, Knöpfe, Lichtkanten). */

:root {
  --bull: #22c55e;
  --bear: #ef4444;
  --raum-akzent: #3b82f6;
  --kachel-b: 440px;
  --kachel-h: 600px;
  --glas: linear-gradient(160deg, #0d1526e6, #0a1020dc);
  --glas-rand: #3b82f655;
  --glas-schein: 0 0 0 1px #0b1a3a inset, 0 0 42px #3b82f61c, 0 32px 70px #00000099;
}
:root[data-thema="hell"] {
  --glas: linear-gradient(160deg, #ffffffe0, #eef2fad0);
  --glas-rand: #b3c2de;
  --glas-schein: 0 0 0 1px #ffffff inset, 0 0 42px #3b82f618, 0 32px 70px #1f2a4433;
}

html, body.raum { height: 100%; overflow: hidden; }
body.raum { background: var(--raum-hintergrund, #05070f); }   /* Hintergrundfarbe aus dem Zahnrad-Menü (03.10. abends) */
:root[data-thema="hell"] body.raum { background: #e8edf8; }

/* Bühne und CSS3D-Ebene ───────────────────────────────────────────── */
#buehne { position: fixed; inset: 0; z-index: 0; }
#welt { display: block; width: 100%; height: 100%; }
#css3d { position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: none; }
#css3d > div { user-select: none; touch-action: none; }
body.dreid #panelquelle { display: none; }

/* Rückfall ohne WebGL: Kacheln bleiben als gestapelte Seite bedienbar */
#panelquelle { position: relative; z-index: 2; display: grid; gap: 16px;
  max-width: 1100px; margin: 0 auto; padding: 70px 16px 90px; overflow: auto;
  max-height: 100%; }
body:not(.dreid) .panel { width: auto !important; height: auto !important; }

/* Marke, fest oben links ─────────────────────────────────────────── */
#marke { position: fixed; left: 18px; top: 14px; z-index: 6; display: flex;
  align-items: center; gap: 10px; pointer-events: none; }
#marke .logo-mark { width: 36px; height: 36px; }
#marke .logo-name { font-size: 20px; font-weight: 800; }
#marke .logo-name .zwei { color: var(--hellblau); font-weight: 600; font-size: 14px; }
#marke .logo-sub { font-size: 8px; letter-spacing: .12em; color: var(--gedaempft); }

/* Kachel-Grundform: alle gleich groß ─────────────────────────────── */
.panel {
  box-sizing: border-box; width: var(--kachel-b); height: var(--kachel-h);
  display: flex; flex-direction: column;
  background: var(--glas); border: 1px solid var(--glas-rand);
  border-radius: 18px; padding: 14px 16px; color: var(--text);
  box-shadow: var(--glas-schein);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: visible; cursor: pointer;   /* visible seit 02.10. (Holo-Kopfzeile hängt über der Box); den Inhalt clippt .kachel-inhalt */
  transition: opacity .35s ease, box-shadow .35s ease;
}
.panel.aktiv { cursor: auto;
  box-shadow: var(--kachel-aktiv-schein, 0 0 0 1px #60a5fa inset, 0 0 60px #3b82f655, 0 32px 70px #00000099); }
body.gezoomt .panel:not(.aktiv):not(.panel-score) { opacity: .55; }
.panel.hinter-kamera { visibility: hidden; pointer-events: none; }   /* hinter der Kamera: kein Treffer-Fang */
.panel.vor-erde:not(.aktiv) { opacity: .07 !important; pointer-events: none; }   /* würde die Erde verdecken */
.panel.karte { background: var(--glas); border-color: var(--glas-rand); }
.panel::before {           /* feine Lichtkante oben */
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #93c5fd99, #c4b5fd99, transparent);
  pointer-events: none;
}
.kachel-titel { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 2px 2px 10px; min-height: 29px; box-sizing: border-box;
  border-bottom: 1px solid var(--rand); margin-bottom: 10px;
  color: var(--titel-farbe, #7dd3fc); text-shadow: var(--titel-schein, 0 0 6px #38bdf8cc, 0 0 16px #0ea5e988, 0 0 30px #0ea5e944); }   /* Neonblau; Farbe/Schein seit 03.10. über die Palette (aaos2.js farbenAnwenden, Kategorie „Kacheltitel") */
:root[data-thema="hell"] .kachel-titel { color: #0369a1; text-shadow: 0 0 8px #38bdf866; }
/* Schreibmaschine: die Kachel vor der Kugel tippt ihre Überschrift (aaos2.js) — beim Tippen neongelb, danach wieder blau */
.kachel-titel.tippt { color: #ffd60a !important; text-shadow: 0 0 6px #ffd60acc, 0 0 16px #facc1588, 0 0 30px #facc1544 !important; }
.kachel-titel.tippt::after { content: "▍"; margin-left: 1px; color: #ffd60a; animation: tipp-cursor .8s steps(1, end) infinite; }
@keyframes tipp-cursor { 50% { opacity: 0; } }
.kachel-inhalt { flex: 1; min-height: 0; overflow: auto; }

/* Holo-Kopfzeile ÜBER jeder Kachel (aaos2.js panelAnlegen) — Nutzer 02.10.: „zusätzlicher Header,
   links über jeder, in Computer-Holo-Schrift, weiß, leicht leuchtend". Oxanium (Gaming-HUD, variabel
   200–800, aus ~/Services/fonts), Laufnummer fett + Titel, feine Linie über die Kachelbreite.
   Hängt außerhalb der Kachelbox (bottom: 100 %), deshalb .panel overflow: visible. 26 px, weil die
   Kachel in der Übersicht nur ~0,26–0,36-fach erscheint (12-px-Titel wären dort 3–4 px). */
@font-face { font-family: "Oxanium"; src: url("vendor/fonts/Oxanium.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }
.kachel-holo { position: absolute; left: 2px; right: 2px; bottom: calc(100% + 10px); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  font-family: "Oxanium", "JetBrains Mono", ui-monospace, sans-serif; font-size: 26px; font-weight: 400;   /* 400 statt 500: „Schrift ein bisschen dünner" (02.10.); Nummer raus */
  letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--holo-farbe, #ffffff);   /* Farbe/Schein setzt aaos2.js farbenAnwenden (Palette + Glow) */
  text-shadow: var(--holo-schein, 0 0 5px #ffffffb3, 0 0 14px #bfe6ff80, 0 0 30px #7dd3fc44); opacity: .94; }
.kachel-holo::after { content: ""; display: block; height: 1px; margin-top: 8px;
  background: var(--holo-linie, linear-gradient(90deg, #ffffffcc, #ffffff33 55%, transparent)); }
body.anordnen .kachel-holo { opacity: .4; }
:root[data-thema="hell"] .kachel-holo { color: #17233c; text-shadow: 0 0 6px #ffffff; }
:root[data-thema="hell"] .kachel-holo::after { background: linear-gradient(90deg, #17233c99, transparent); }
.panel .ansicht { display: block; }
.panel.karte > .indi-liste, .panel.karte > .news-liste { flex: 1; min-height: 0; overflow: auto; }
.panel.karte .karten-titel { flex: 0 0 auto; }
.senti-fuss { margin-top: 14px; }

/* Paar-Kachel */
#view-analyse .suche { max-width: none; margin-bottom: 10px; }
#view-analyse .suche input { padding: 11px 48px 11px 42px; font-size: 14px; }
#view-analyse .such-los { top: 5px; right: 6px; height: 32px; }
#view-analyse .symbol-kopf { gap: 12px 18px; padding: 12px 14px; margin-bottom: 10px; }
#view-analyse .coin-icon { width: 48px; height: 48px; font-size: 20px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease; }
#view-analyse .coin-icon:hover { transform: scale(1.08); box-shadow: 0 0 18px #60a5fa88; }
#view-analyse .preis { font-size: 24px; }
.paar-hinweis { margin-top: 4px; }

/* KI-Kachel: die Chat-Einleitung („Analysiere … bitte." / „Hier ist meine aktuelle
   Analyse …" samt Zeit und Avataren) bleibt weg — nur die direkten Kinder von #chat;
   Fragen und Antworten in #antworten nutzen dieselben Klassen und bleiben. */
[data-panel="ki"] #chat > .nutzer-zeile,
[data-panel="ki"] #chat > .ki-zeile > .ki-avatar,
[data-panel="ki"] #chat > .ki-zeile > div > .ki-blase:first-child,
[data-panel="ki"] #chat > .ki-zeile > div > .ki-blase:first-child + .zeit { display: none; }
[data-panel="ki"] #chat > .ki-zeile > div > .setup-raster:first-of-type { margin-top: 0 !important; }

/* KI-Kachel: Chat rollt, Frage-Zeile bleibt unten */
.kachel-ki { display: flex; flex-direction: column; overflow: hidden; }
.kachel-ki .tab { flex: 1; min-height: 0; overflow: auto; }
.kachel-ki .eingabe-zeile { flex: 0 0 auto; margin-top: 10px; }
.panel .tab { padding: 12px 14px; }
.panel .setup-raster, .panel .liq-raster { grid-template-columns: 1fr; }

/* Score-Quelle: app.js schreibt hinein, aaos2.js liest aus — nie sichtbar.
   ([hidden] verliert gegen das display:flex von .panel, daher !important.) */
.panel-score { display: none !important; }

/* Market Intelligence: dunkle Luxus-Kachel, Violett/Cyan-Akzente, Glas und Licht ── */
.panel-mi {
  background: radial-gradient(130% 80% at 50% -10%, #a855f71a, transparent 55%),
              linear-gradient(165deg, #070910f4, #04060cf2);
  border-color: #a855f73d;
  box-shadow: 0 0 0 1px #0e1226 inset, 0 0 48px #a855f71c, 0 0 90px #22d3ee0f, 0 34px 70px #000000b8;
}
.panel-mi::before { background: linear-gradient(90deg, transparent, #22d3eeb3, #a855f7b3, transparent); }
.mi-inhalt { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.mi-hero {
  position: relative; flex: 0 0 auto; padding: 12px 14px 10px; border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, #22d3ee14, transparent 60%),
              linear-gradient(180deg, #0b0f1fd9, #06080fd9);
  box-shadow: 0 0 0 1px #ffffff0c inset, 0 12px 30px #00000066;
}
.mi-hero::after {       /* Glanzkante links oben */
  content: ""; position: absolute; left: 14px; top: 0; width: 42%; height: 1px;
  background: linear-gradient(90deg, #67e8f9aa, transparent); pointer-events: none;
}
.mi-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #67e8f9; display: flex; align-items: center; gap: 6px; }
.mi-wert { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.mi-coin { font-size: 22px; font-weight: 800; letter-spacing: .04em; color: #e9ecff; }
.mi-richtung { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gedaempft); }
.mi-richtung.long { color: var(--bull); } .mi-richtung.short { color: var(--bear); }
.mi-prozent { margin-left: auto; font-size: 42px; font-weight: 800; letter-spacing: -1px; line-height: 1;
  color: #fff; text-shadow: 0 0 16px #ffffff55, 0 0 40px #22d3ee4d; }
.panel-mi .senti-balken { margin-top: 10px; height: 8px; background: #ef44443a; }
.panel-mi .senti-fuellung { background: linear-gradient(90deg, #15803d, #22c55e); box-shadow: 0 0 12px #22c55e66; }
.panel-mi .senti-zeile { margin-top: 7px; font-size: 12.5px; }
.panel-mi .senti-zeile .bull { color: var(--bull); } .panel-mi .senti-zeile .bear { color: var(--bear); }
.mi-fuss { margin-top: 8px; font-size: 11px; line-height: 1.45; }
.panel-mi .score-info { margin-top: 10px; background: #0a0d1ae6; border: 1px solid #a855f733;
  border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--gedaempft); }
.mi-trenner { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; }
.mi-trenner::before, .mi-trenner::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #a855f766, transparent); }
.panel-mi .indi-liste { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr;
  gap: 0 18px; align-content: start; }
.panel-mi .indi-zeile { font-size: 12.5px; padding: 5px 2px; border-top-color: #ffffff0f; }
.panel-mi .indi-name { color: #aab7d6; }
@container (min-width: 560px) {
  .panel-mi .indi-liste { grid-template-columns: 1fr 1fr; }
  .panel-mi .indi-zeile:nth-child(2) { border-top: 0; }
}
:root[data-thema="hell"] .panel-mi { background: var(--glas); border-color: #a855f766;
  box-shadow: 0 0 0 1px #ffffff inset, 0 0 42px #a855f722, 0 32px 70px #1f2a4433; }
:root[data-thema="hell"] .mi-hero { background: linear-gradient(180deg, #ffffffd9, #eef2fad9);
  box-shadow: 0 0 0 1px #c7d2fe inset, 0 12px 30px #1f2a4422; }
:root[data-thema="hell"] .mi-coin, :root[data-thema="hell"] .mi-prozent { color: #17233c; text-shadow: none; }
:root[data-thema="hell"] .mi-label { color: #0e7490; }
:root[data-thema="hell"] .mi-trenner { color: #6d28d9; }
:root[data-thema="hell"] .panel-mi .score-info { background: #ffffffe6; }
:root[data-thema="hell"] .panel-mi .indi-zeile { border-top-color: var(--rand); }

/* Long- und Short-Kachel: grün bzw. violett gekennzeichnet ───────── */
.panel-long { border-color: #22c55e66; box-shadow: 0 0 0 1px #0b1a12 inset, 0 0 42px #22c55e22, 0 32px 70px #00000099;
  background: linear-gradient(165deg, #05070cf7, #020308f5); }   /* schwarze Füllung wie Market Intelligence */
.panel-long::before { background: linear-gradient(90deg, transparent, #22c55ecc, #86efacaa, transparent); }
.panel-long .kachel-titel { color: #4ade80; border-bottom-color: #22c55e44; text-shadow: 0 0 6px #4ade80cc, 0 0 16px #22c55e88; }
.panel-long .kachel-titel.tippt::after { color: #4ade80; }
.panel-short { border-color: #a855f766; box-shadow: 0 0 0 1px #160b26 inset, 0 0 42px #a855f722, 0 32px 70px #00000099;
  background: linear-gradient(165deg, #05070cf7, #020308f5); }
.panel-short::before { background: linear-gradient(90deg, transparent, #a855f7cc, #d8b4feaa, transparent); }
.panel-short .kachel-titel { color: #c084fc; border-bottom-color: #a855f744; text-shadow: 0 0 6px #c084fccc, 0 0 16px #a855f788; }
.panel-short .kachel-titel.tippt::after { color: #c084fc; }
.panel-long.aktiv { box-shadow: 0 0 0 1px #4ade80 inset, 0 0 60px #22c55e55, 0 32px 70px #00000099; }
.panel-short.aktiv { box-shadow: 0 0 0 1px #c084fc inset, 0 0 60px #a855f755, 0 32px 70px #00000099; }

/* ── Alarm: neue Meldung ab 40 % Auswirkung (aaos2.js alarmAktualisieren) ──
   Nachrichten-Kachel: bernsteinfarben aufleuchten (Rahmen, Schein, Titel) und
   blinken, bis sie angeklickt wird. Der Puls läuft über ein Pseudo-Element mit
   Innenschein, animiert wird nur dessen Opacity — der Blur-Hintergrund der
   Kachel muss so nicht je Frame neu gezeichnet werden. */
.panel.alarm { border-color: #ffd60a; box-shadow: 0 0 0 1px #ffd60a inset, 0 0 70px #ffd60a77, 0 32px 70px #00000099; }
.panel.alarm::before { background: linear-gradient(90deg, transparent, #ffd60a, #fff3b0, transparent); }
.panel.alarm .kachel-titel { color: #ffd60a; border-bottom-color: #ffd60a55; text-shadow: 0 0 6px #ffd60acc, 0 0 16px #facc1588, 0 0 30px #facc1544; }
.panel.alarm::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px #ffd60a inset, 0 0 48px #ffd60a99 inset;
  background: radial-gradient(ellipse at 50% 0%, #ffd60a33, transparent 60%);
  animation: kachel-alarm 1s ease-in-out infinite;
}
@keyframes kachel-alarm { 0%, 100% { opacity: 1; } 50% { opacity: .06; } }
:root[data-thema="hell"] .panel.alarm .kachel-titel { color: #b45309; text-shadow: 0 0 8px #f59e0b66; }
/* Long-/Short-Kachel: Schimmer — ein Lichtstreifen wandert von links nach rechts
   über die Kachel (grün bzw. violett), dazu ein etwas hellerer Schein; läuft,
   solange eine ungesehene Meldung ab 40 % in diese Richtung vorliegt. */
.panel.schimmer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(115deg, transparent 38%, #ffffff2e 48%, #ffffff55 50%, #ffffff2e 52%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 100% 0;
  animation: kachel-schimmer 2.8s ease-in-out infinite;
}
.panel-long.schimmer::after { background-image: linear-gradient(115deg, transparent 38%, #86efac33 48%, #bbf7d088 50%, #86efac33 52%, transparent 62%); }
.panel-short.schimmer::after { background-image: linear-gradient(115deg, transparent 38%, #d8b4fe33 48%, #ede9fe88 50%, #d8b4fe33 52%, transparent 62%); }
.panel-long.schimmer:not(.aktiv) { border-color: #22c55eaa; box-shadow: 0 0 0 1px #0b1a12 inset, 0 0 56px #22c55e44, 0 32px 70px #00000099; }
.panel-short.schimmer:not(.aktiv) { border-color: #a855f7aa; box-shadow: 0 0 0 1px #160b26 inset, 0 0 56px #a855f744, 0 32px 70px #00000099; }
/* Hintergrundbild 2,6-fach breit: Position 100 % = Streifen links außerhalb, 0 % = rechts außerhalb;
   die Pause am Ende ist Absicht (ein Streifen alle 2,8 s, nicht Dauerglanz) */
@keyframes kachel-schimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
/* ── Starker Trade (aaos2.js scoreLesen): ab 70 % Wahrscheinlichkeit leuchtet die Long-
   bzw. Short-Kachel dauerhaft — kräftiger Schein, heller Rahmen, hellerer Titel. Ein
   Zustand, kein Alarm: kein Blinken, kein Quittieren; gilt auch herangeflogen und
   zusammen mit dem Schimmer (dreifache Klassen-Spezifität, damit die Regel gegen
   `.schimmer:not(.aktiv)` und `.aktiv` gewinnt). */
.panel.panel-long.stark { border-color: #4ade80; box-shadow: 0 0 0 1px #4ade80 inset, 0 0 34px #22c55e88, 0 0 110px #22c55e66, 0 32px 70px #00000099; }
.panel.panel-short.stark { border-color: #c084fc; box-shadow: 0 0 0 1px #c084fc inset, 0 0 34px #a855f788, 0 0 110px #a855f766, 0 32px 70px #00000099; }
.panel-long.stark .kachel-titel { color: #86efac; text-shadow: 0 0 8px #4ade80, 0 0 22px #22c55ecc, 0 0 40px #22c55e88; }
.panel-short.stark .kachel-titel { color: #d8b4fe; text-shadow: 0 0 8px #c084fc, 0 0 22px #a855f7cc, 0 0 40px #a855f788; }
/* Die Karten darin folgen der Kachelfarbe (Klassik bleibt Blau/Magenta) */
.panel .richtung-karte.long { border-color: #22c55e88; box-shadow: 0 0 22px #22c55e22; }
.panel .richtung-karte.short { border-color: #a855f788; box-shadow: 0 0 22px #a855f722; }
.panel .long .richtung-icon { background: linear-gradient(135deg, #15803d, #4ade80); }
.panel .short .richtung-icon { background: linear-gradient(135deg, #6d28d9, #c084fc); }
.panel .long .richtung-name, .panel .long .richtung-wk b { color: #4ade80; }
.panel .short .richtung-name { color: #c084fc; }
.panel .short .richtung-wk b { color: #c084fc; }
.panel .long .tv-zeichnen:hover { color: #4ade80; border-color: #4ade80; }
.panel .short .tv-zeichnen:hover { color: #c084fc; border-color: #c084fc; }
.setup-ziel .richtung-karte { padding: 14px 16px; background: #05070cd9; }
.setup-ziel .setup-zeile { padding: 7px 0; }
.setup-ziel .marken { margin-top: 2px; border-top: 1px dashed #ffffff22; }
.setup-ziel .marken .setup-zeile span { color: #aab7d6; }
.setup-kachel { display: flex; flex-direction: column; gap: 10px; }
.setup-kachel .setup-ziel { flex: 0 0 auto; }
.news-kurz-block { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.news-kurz { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.news-kurz-zeile { display: flex; gap: 10px; align-items: baseline; padding: 6px 2px; border-top: 1px solid #ffffff0f;
  color: var(--text); text-decoration: none; font-size: 12px; line-height: 1.35; }
.news-kurz-zeile:first-child { border-top: 0; }
.news-kurz-zeile:hover span { color: var(--hellblau); }
.news-kurz-zeile b { flex: 0 0 44px; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.news-kurz-zeile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-kurz-zeile.r-bullish b { color: #4ade80; } .news-kurz-zeile.r-bearish b { color: #ef4444; }
.news-kurz-zeile.r-gemischt b { color: #facc15; } .news-kurz-zeile.r-neutral b { color: var(--gedaempft); }
/* X-Konten: Links untereinander */
[data-panel="x"] .x-liste { flex-direction: column; align-items: stretch; gap: 8px; }
.x-chip { display: flex; flex-direction: column; gap: 2px; text-decoration: none; text-align: left; padding: 8px 14px; }
.x-chip b { font-size: 13.5px; color: var(--text); }
.x-chip span { font-size: 11.5px; color: var(--gedaempft); font-weight: 500; }
.x-chip:hover b { color: var(--hellblau); }
[data-panel="x"] .karten-fuss { margin-top: 12px; }
[data-panel="reddit"] .reddit-reiter { margin: 0 0 10px; }
[data-panel="reddit"] .karten-fuss { margin-bottom: 8px; }
/* Watchlist: Paare untereinander */
[data-panel="watchlist"] .chip-reihe { flex-direction: column; align-items: stretch; gap: 8px; }
[data-panel="watchlist"] .chip { text-align: left; width: 100%; }
.setup-ziel .leer-hinweis { color: var(--gedaempft); font-size: 13px; }
/* Begründungs-Karten in ihren Kacheln: Farbe folgt der Kachel */
.setup-ziel .begruendung-karte { margin-top: 0; }
.panel .begruendung-karte.long { border-color: #22c55e66; }
.panel .begruendung-karte.short { border-color: #a855f766; }
.panel .long-haken { background: #22c55e33; color: #4ade80; }
.panel .short-haken { background: #a855f733; color: #c084fc; }

/* Coin links, Prozent rechts der Kugel (DOM im Raum, aaos2.js labelsBauen) ───
   Filigran und computerhaft: dünne Monospace (JetBrains Mono 200), kleine
   Kennzeile darüber, feine Linie darunter, Leuchten nur als Hauch. */
@font-face { font-family: "JetBrains Mono"; src: url("vendor/fonts/JetBrains_Mono.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap; }
.raum-label { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 92px; font-weight: 200;
  letter-spacing: .1em; line-height: 1; white-space: nowrap; text-align: center;
  color: #dbeafe; text-shadow: 0 0 8px #2ea8ff55; transition: opacity .35s ease, color .6s ease; }
.raum-label::before { content: attr(data-oben); display: block; font-size: 13px; font-weight: 400; letter-spacing: .34em;
  color: #67e8f9aa; margin-bottom: 14px; text-shadow: none; }
.raum-label::after { content: ""; display: block; height: 1px; margin: 14px auto 0; width: 70%;
  background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .55; }
#labelProzent { font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; }
body.gezoomt .raum-label, body.anordnen .raum-label { opacity: 0; }
:root[data-thema="hell"] .raum-label { color: #17233c; text-shadow: none; }
:root[data-thema="hell"] .raum-label::before { color: #0e7490; }

/* Einstellungen: Ausrichtung der Kacheln ─────────────────────────── */
.raum-karte { margin-bottom: 12px; padding: 14px 16px; }
.raum-karte .karten-titel { font-size: 13px; margin-bottom: 10px; }
.raum-karte .chip { padding: 6px 12px; font-size: 12.5px; }
.raum-karte .karten-fuss { margin-top: 10px; }

/* Einstellungen: Regler (Tempo, Glow) und Farbpalette (02.10. spät) ──────── */
.regler-zeile { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.regler-zeile input[type=range] { flex: 1; min-width: 0; accent-color: var(--raum-akzent); cursor: pointer; }
.regler-zeile output { flex: 0 0 60px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); }
.farb-zeile { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.farb-name { flex: 0 0 84px; font-size: 12px; color: var(--gedaempft); }
.farb-tupfen { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.farb-tupfe { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  background: var(--f); box-shadow: 0 0 6px color-mix(in srgb, var(--f) 60%, transparent); }
.farb-tupfe.aktiv { border-color: #ffffff; box-shadow: 0 0 0 2px #0b1a3a, 0 0 10px var(--f); }
.farb-zeile input[type=color] { flex: 0 0 28px; width: 28px; height: 22px; padding: 0; border: 1px solid var(--rand-hell);
  border-radius: 6px; background: transparent; cursor: pointer; }
#strahlenWahl { margin-top: 8px; }

/* Anordnen-Modus ─────────────────────────────────────────────────── */
body.anordnen .panel:not(.panel-score) { outline: 1px dashed #60a5fa; outline-offset: 3px;
  padding-top: 46px; cursor: default; }
.griff-leiste {
  display: none; position: absolute; left: 6px; right: 6px; top: 6px; height: 30px;
  align-items: center; gap: 6px; padding: 0 6px 0 10px; z-index: 40;
  background: #0f1a33f2; border: 1px solid var(--raum-akzent); border-radius: 10px;
  font-size: 12px; font-weight: 700; color: #dbeafe; cursor: grab;
  box-shadow: 0 6px 18px #0008;
}
.griff-leiste:active { cursor: grabbing; }
.griff-name { flex: 1; letter-spacing: .04em; }
.griff-leiste button {
  border: 1px solid #3b82f680; background: #1d4ed833; color: #dbeafe; font: inherit;
  font-size: 11px; font-weight: 700; border-radius: 7px; padding: 2px 7px; cursor: pointer;
}
.griff-leiste button:hover { background: #3b82f6; color: #fff; }
body.anordnen .griff-leiste { display: flex; }

/* Werkzeuge (fest am Bildschirm) ─────────────────────────────────── */
#werkzeuge {
  position: fixed; right: 18px; top: 14px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.wz-reihe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.wz-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 12px; cursor: pointer; text-decoration: none;
  background: #0d1526d9; border: 1px solid var(--rand-hell); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wz-knopf:hover { border-color: var(--raum-akzent); }
.wz-knopf.primaer { background: var(--raum-akzent); border-color: var(--raum-akzent); color: #fff; }
.wz-knopf.aktiv { border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633; }
.wz-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#werkzeuge .rund-knopf { width: 38px; height: 38px; }
/* Zahnrad (Raum-Einstellungen) neben dem Mond: offen = Akzentring */
#raumKnopf[aria-expanded="true"] { color: #bfe6ff; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633, 0 0 14px #3b82f655; }
/* Raum-Menü (03.10. nachmittags): fest unter der Werkzeugleiste, Glas wie die Knöpfe, scrollt bei wenig Höhe;
   z 7 über den Kacheln — ein Menü, das hinter den Ring rutscht, wäre nicht bedienbar */
#raumMenue { position: fixed; right: 18px; top: 92px; width: min(400px, calc(100vw - 36px)); max-height: calc(100vh - 110px);
  overflow: auto; z-index: 7; padding: 12px 14px 6px; border-radius: 16px;
  background: #0d1526e6; border: 1px solid var(--rand-hell); box-shadow: 0 24px 60px #000000aa;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#raumMenue[hidden] { display: none; }
#raumMenue .raum-menue-kopf { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #dbeafe; }
#raumMenue .raum-menue-zu { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--rand-hell); background: transparent;
  color: var(--gedaempft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#raumMenue .raum-menue-zu:hover { color: var(--text); border-color: var(--raum-akzent); }
#raumMenue .raum-menue-zu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#raumMenue .raum-karte { margin-bottom: 10px; }
:root[data-thema="hell"] #raumMenue { background: #ffffffe6; }
:root[data-thema="hell"] #raumMenue .raum-menue-kopf { color: #17233c; }
/* Top-20-Knopf neben dem Mond: gedrückt (an) = Akzentring und helles Symbol; aus = gedämpft mit Strich */
#top20Knopf .aus-strich { display: none; }
#top20Knopf[aria-pressed="true"] { color: #bfe6ff; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633, 0 0 14px #3b82f655; }
#top20Knopf[aria-pressed="false"] { opacity: .7; }
#top20Knopf[aria-pressed="false"] .aus-strich { display: block; }

/* Top-20-Laufliste links (aaos2.js toplisteLaden) — Nutzer 02.10.: „die Bubbles vorerst weg; die Top 20
   sollen links 25 % von oben bis 25 % von unten im Bild durchlaufen, wie Scrollen, nur von alleine, in
   derselben Schrift wie BTC und 75 % in der Mitte". Band 25–75 % der Höhe, fest links, Schrift wie
   .raum-label (JetBrains Mono 200), oben/unten weich ausgeblendet. Die Liste steht ZWEIMAL untereinander
   und wandert um ihre halbe Höhe → nahtlose Schleife. Seit 03.10. (Nutzer: „trotzdem von alleine den
   scroll-effekt, aber zusätzlich scrollen können") läuft sie per JS (aaos2.js topSchritt, 12 px/s = eine
   Zeile je 3 s, zwei Runden, dann Stillstand): das Rad verschiebt die Position sofort, der Lauf setzt nach
   2,5 s von dort weiter an; Position wird modulo Listenhöhe gewickelt → endlos in beide Richtungen. */
#topliste { position: fixed; left: 22px; top: 25%; height: 50%; width: 128px; z-index: 0; pointer-events: auto;   /* z 0 + später im DOM: über dem Canvas, UNTER den Kacheln (#css3d z 1) — der Ring zieht davor vorbei; 128 px enden vor der linkesten Kachel (gemessen 02.10. spät: Kachelrand je nach Ringstellung bis x ≈ 170 bei 1774 px Breite; bei 11 px Schrift reichen 128 px) */
  display: flex; flex-direction: column; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--top-farbe, #dbeafe);
  transition: opacity .35s ease; }
#topliste[hidden] { display: none; }
#topliste .top-kopf { font-size: 11px; font-weight: 400; letter-spacing: .24em; color: var(--top-kopf, #67e8f9aa); margin: 0 0 8px 2px; white-space: nowrap; }   /* .24em statt .34em: bei 128 px Breite brach der Kopf „TOP 20 · 24 H" sonst dreizeilig um (gemessen 02.10. spät) */
#topliste .top-fenster { flex: 1; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
#topliste .top-lauf { display: flex; flex-direction: column; will-change: transform; }   /* transform setzt aaos2.js topSchritt (keine CSS-Animation mehr seit 03.10.) */
/* 02.10. spät: halb so groß (22 → 11 px), der Zeilenabstand von 36 px bleibt; Gewicht 300 statt 200,
   weil die Hairline bei 11 px auf dunklem Grund zerfällt (Merker aus Teil 468: JetBrains Mono 200 klein = nur Schatten) */
#topliste .top-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  height: 36px; line-height: 36px; padding: 0 2px; font-size: 11px; font-weight: 300; letter-spacing: .08em; white-space: nowrap; }
#topliste .top-coin { text-shadow: 0 0 8px #2ea8ff33; }
#topliste .top-pct { font-size: 10px; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; }
#topliste .top-pct.bull { color: var(--bull, #4ade80); }      /* Grün für Plus (02.10. spät; vorher Neonblau); seit 03.10. Palette „Steigend" */
#topliste .top-pct.bear { color: var(--bear, #f87171); }      /* Rot für Minus (vorher Neonviolett); Palette „Fallend" */
#topliste .top-pct.neutral { color: #ffd60a; }
/* Schreibmaschine beim ersten Erscheinen (aaos2.js tippeZeile): die Zeile tippt Coin, dann Prozent,
   der Cursor „▍" hängt am getippten Text; während des Tippens leuchtet die Zeile leicht gelb wie die Kacheltitel */
#topliste .top-zeile.tippt .top-coin { color: #ffd60a; text-shadow: 0 0 6px #ffd60a88; }
#topliste .top-leer { font-size: 13px; color: var(--leise); }
/* Scrollen und Klicken (02.10. spät): die Liste liegt UNTER #css3d und bekommt selbst keine Ereignisse —
   pointer-events: auto macht sie nur für elementsFromPoint hit-testbar; #css3d reicht Rad und Klick durch
   (aaos2.js topZeileUnter). Zeiger darüber (Klasse ruht) hält den Lauf an, das Rad verschiebt die Liste
   zusätzlich zum Lauf, ein Klick auf eine Zeile lädt die Analyse des Coins. */
#topliste .top-zeile.gewaehlt .top-coin { color: #ffffff; text-shadow: 0 0 10px #ffffffaa; }
body.anordnen #topliste { opacity: .35; }
:root[data-thema="hell"] #topliste { color: #17233c; }
:root[data-thema="hell"] #topliste .top-coin { text-shadow: none; }
:root[data-thema="hell"] #topliste .top-kopf { color: #0e7490; }
:root[data-thema="hell"] #topliste .top-pct { text-shadow: none; }

/* Erklärvideo-Overlay (03.10.): ganz oben (z 30, über Menü und Hinweisen), schwarzer Grund, Video mittig bis 92 vw /
   78 vh, darunter die Leiste mit Ton-Knopf (nur bei geblocktem Autoplay), Merk-Haken und Überspringen. Ausblenden über
   .weg (Opacity, 450 ms), danach setzt aaos2.js hidden. */
#intro { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; background: #05070f; transition: opacity .45s ease; }
#intro[hidden] { display: none; }
#intro.weg { opacity: 0; pointer-events: none; }
#intro video { max-width: min(92vw, 1600px); max-height: 78vh; width: auto; height: auto; border-radius: 14px;
  box-shadow: 0 0 0 1px #3b82f655, 0 0 60px #3b82f633, 0 40px 90px #000000cc; background: #000; }
#intro .intro-leiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
html.kein-intro #intro { display: none; }   /* Head-Skript in aaos2.html: schon gesehen → nie sichtbar, kein Aufblitzen */
#intro .wz-knopf svg { width: 16px; height: 16px; }
#intro #introTon svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
:root[data-thema="hell"] #intro { background: #e8edf8; }

/* Kerzen-Knopf (Pixel-Kerzen rechts, 03.10.) — dieselben Zustände wie der Top-20-Knopf */
#kerzenKnopf .aus-strich { display: none; }
#kerzenKnopf[aria-pressed="true"] { color: #bfe6ff; border-color: var(--raum-akzent); box-shadow: 0 0 0 3px #3b82f633, 0 0 14px #3b82f655; }
#kerzenKnopf[aria-pressed="false"] { opacity: .7; }
#kerzenKnopf[aria-pressed="false"] .aus-strich { display: block; }

/* Pixel-Kerzen rechts (aaos2.js kerzenZeichnen) — Nutzer 03.10.: „futuristische, pixelbasierte Darstellung statt
   klassischer Candlesticks … rechts, zum Paar, ein- und ausschaltbar". Spiegelbild der Laufliste: fest rechts, Band
   25–75 %, z-index 0 = UNTER den Kacheln (der Ring zieht davor vorbei); kein Kasten, kein Rand — der Hintergrund
   bleibt der schwarze Raum. Breite 20 vw (240–420 px): bei der Startkamera (Abstand 8412, 03.10.) endet die
   rechteste Kachel bei ≈ 0,74 der Bildbreite, das Band beginnt bei ≈ 0,78. */
#kerzen { position: fixed; right: 22px; top: 25%; height: 50%; width: clamp(240px, 20vw, 420px); z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; color: #dbeafe;
  transition: opacity .35s ease; }
#kerzen[hidden] { display: none; }
#kerzen .kerzen-kopf, #kerzen .kerzen-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 11px; font-weight: 300; letter-spacing: .24em; color: #67e8f9aa; white-space: nowrap; }
#kerzen .kerzen-kopf { margin: 0 2px 8px; }
#kerzen .kerzen-fuss { margin: 8px 2px 0; letter-spacing: .08em; }
#kerzen canvas { flex: 1; min-height: 0; width: 100%; display: block; }
#kerzen .kerzen-kurs { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px currentColor; }
#kerzen .kerzen-chg { font-size: 10px; font-variant-numeric: tabular-nums; }
#kerzen .bull { color: var(--bull, #4ade80); }
#kerzen .bear { color: var(--bear, #f87171); }
/* Kopf rechts: Intervall + kleiner TradingView-Knopf. Der Knopf ist das EINZIGE hit-testbare Element der Leiste
   (pointer-events auto nur hier) — die Klicks landen auf #css3d und werden per elementsFromPoint durchgereicht,
   wenn keine Kachel davor liegt (aaos2.js kerzenTVUnter, Muster der Laufliste). */
#kerzen .kerzen-rechts { display: inline-flex; align-items: center; gap: 8px; }
#kerzen .kerzen-tv { pointer-events: auto; width: 20px; height: 20px; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid #67e8f966; background: #0d152699; color: #67e8f9cc; display: inline-flex; align-items: center; justify-content: center; }
#kerzen .kerzen-tv svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#kerzen .kerzen-tv.ruht { color: #fff; border-color: var(--raum-akzent); box-shadow: 0 0 10px #3b82f688; }
#kerzen .neutral { color: #ffd60a; }
body.anordnen #kerzen { opacity: .35; }
:root[data-thema="hell"] #kerzen { color: #17233c; }
:root[data-thema="hell"] #kerzen .kerzen-kopf, :root[data-thema="hell"] #kerzen .kerzen-fuss { color: #0e7490; }
:root[data-thema="hell"] #kerzen .kerzen-kurs { text-shadow: none; }
:root[data-thema="hell"] #kerzen .bull { color: #15803d; }
:root[data-thema="hell"] #kerzen .bear { color: #b91c1c; }
.wz-hinweis { font-size: 12px; color: var(--leise); text-shadow: 0 0 8px #000;
  background: #05070f99; padding: 4px 8px; border-radius: 8px; }
.wz-anordnen-hinweis { color: #dbeafe; }
:root[data-thema="hell"] .wz-hinweis { text-shadow: none; background: #ffffffaa; }
/* Herangeflogen reicht die Kachel bis an den oberen Bildrand; ihre Holo-Kopfzeile stand dort in der
   Hinweiszeile (gemessen 02.10.: Kopfzeile y 46–84, Hinweis y 56–70) — der Hinweis gilt der Übersicht,
   darum solange ausgeblendet, wie eine Kachel aktiv ist. */
body.gezoomt #wzHinweis { opacity: 0; }
:root[data-thema="hell"] .wz-knopf { background: #ffffffd9; color: #17233c; }
:root[data-thema="hell"] .wz-knopf.primaer { background: var(--raum-akzent); color: #fff; }
/* Umschalter „Normal | 3D" in der Werkzeugleiste (Grundregel in styles.css) */
#werkzeuge .ansicht-schalter { background: #0d1526d9; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#werkzeuge .ansicht-schalter > .aktiv { background: var(--raum-akzent); }
:root[data-thema="hell"] #werkzeuge .ansicht-schalter { background: #ffffffd9; }

.hinweis-box { z-index: 7; }

@media (prefers-reduced-motion: reduce) {
  .panel, .coin-icon { transition: none; }
  .panel.alarm::after { animation: none; opacity: .7; }                              /* leuchten statt blinken */
  .panel.schimmer::after { animation: none; background-position: 50% 0; opacity: .6; }   /* Streifen steht in der Mitte */
}

/* ── Schriftwahl (Nutzer 03.10. abends: „fünf verschiedene Schriftarten … die Originale bleibt derweil Standard"):
   html[data-schrift] setzt aaos2.js aus tm2.schrift (Head-Skript in aaos2.html vorab). font-size-adjust gleicht die
   x-Höhe an Inter (≈0,55) an, damit Schrift- und Serifenschriften nicht winzig wirken; Zahlen-Elemente (Raum-Labels,
   Laufliste, Kerzenkopf) behalten JetBrains Mono und ihre Größe. Dateien in vendor/fonts (HASHES.txt). ─────────── */
@font-face { font-family: "Pacifico"; src: url("vendor/fonts/Pacifico.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("vendor/fonts/Share_Tech_Mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("vendor/fonts/Cormorant_Garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("vendor/fonts/Space_Grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("vendor/fonts/Playfair_Display.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
html[data-schrift="brush"] { --schrift: "Pacifico", "Inter", cursive; --schrift-adjust: 0.5; }
html[data-schrift="computer"] { --schrift: "Share Tech Mono", ui-monospace, Menlo, monospace; --schrift-adjust: 0.5; }
html[data-schrift="filigran"] { --schrift: "Cormorant Garamond", Georgia, serif; --schrift-adjust: 0.5; }
html[data-schrift="modern"] { --schrift: "Space Grotesk", "Inter", sans-serif; --schrift-adjust: none; }
html[data-schrift="editorial"] { --schrift: "Playfair Display", Georgia, serif; --schrift-adjust: 0.5; }
html[data-schrift]:not([data-schrift="original"]) body.raum,
html[data-schrift]:not([data-schrift="original"]) body.raum :is(button, input, select, textarea, .kachel-holo) { font-family: var(--schrift); }
html[data-schrift]:not([data-schrift="original"]) body.raum { font-size-adjust: var(--schrift-adjust); }
html[data-schrift="filigran"] body.raum { font-weight: 300; }
html[data-schrift="filigran"] body.raum :is(b, strong, .kachel-titel, .karten-titel, th) { font-weight: 600; }
html[data-schrift] body.raum :is(.raum-label, #topliste, #kerzen) { font-size-adjust: none; }
.chip.schrift-brush { font-family: "Pacifico", cursive; }
.chip.schrift-computer { font-family: "Share Tech Mono", monospace; }
.chip.schrift-filigran { font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 14px; }
.chip.schrift-modern { font-family: "Space Grotesk", sans-serif; }
.chip.schrift-editorial { font-family: "Playfair Display", serif; }

/* ── Calls-Kachel (03.10. abends): bernsteinfarbene Kante wie ein Logbuch ── */
.panel-calls::before { background: linear-gradient(90deg, transparent, #fbbf24cc, #fde68aaa, transparent); }
.panel-calls .kachel-titel { color: #fbbf24; border-bottom-color: #f59e0b44; text-shadow: 0 0 6px #fbbf24aa, 0 0 16px #f59e0b66; }
.panel-calls .kachel-titel.tippt::after { color: #fbbf24; }
:root[data-thema="hell"] .panel-calls .kachel-titel { color: #b45309; text-shadow: none; }

/* ── Schaufenster (Cloudflare ohne Server, 03.10.): kleines Abzeichen unten, html.schaufenster setzt app.js ── */
html.schaufenster body.raum::after { content: "SCHAUFENSTER · Stand " attr(data-stand); position: fixed; left: 50%; bottom: 14px;
  transform: translateX(-50%); z-index: 8; padding: 4px 12px; border-radius: 999px; border: 1px solid #fbbf2466;
  background: #0b1020e6; color: #fbbf24; font: 600 11px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em;
  pointer-events: none; white-space: nowrap; }