/* AGENCY — Bauteile
 *
 * Diese Datei wird von JEDER Seite geladen, und das ist kein Zufall,
 * sondern die Behebung eines Fehlers: sie lag lange nur auf zwei Seiten.
 * Die Folge war unsichtbar, bis jemand hinsah — der Hinweis-Knopf im
 * Baukasten und ALLE Dialoge (Anmelden, Warteliste, Vorschau) hatten dort
 * keinerlei Stil und wurden als nackte Browser-Bauteile gezeichnet. Sie
 * funktionierten, sie sahen nur aus wie ein Formular von 1998.
 *
 * Merkregel: was mehr als eine Seite benutzt, gehört hierher, und diese
 * Datei gehört auf jede Seite. Ein Bauteil in einem seitenspezifischen
 * Stylesheet ist ein Bauteil, das irgendwann irgendwo nackt auftaucht.
 */
/* AGENCY — Interface- und Effektschicht
 *
 * Die Bauteile, die eine dichte Produktseite tragen: gefüllte Akzent-Pillen
 * statt grauer Labels, feines Raster als Sektionstextur, Kartenraster mit
 * einpoppenden Icons, Segmentbalken für Allokationen, dunkle Datenpanels,
 * Mono-Fußnoten. Grammatik des Genres, Ausführung und Farben unsere.
 *
 * Jede Bewegung ist unter prefers-reduced-motion abgeschaltet, und jeder
 * Ausgangszustand einer Animation wird per Skript gesetzt — ohne JavaScript
 * ist alles sichtbar statt unsichtbar.
 */

/* ── Sektionsmaße ───────────────────────────────────────────────────────── */

.band{padding:88px 0; position:relative}
@media (max-width:720px){ .band{padding:56px 0} }
.band-head h2{max-width:17em}
.band-head .lede{font-size:16.5px; color:var(--ink-2); max-width:38em; line-height:1.7; margin:16px 0 0}

/* ── Gefüllte Akzent-Pille ──────────────────────────────────────────────── */

/* Ein Label, das man sieht. Das vorherige graue Mono-Eyebrow verschwand
   neben allem anderen. */
.pill{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; background:var(--accent); color:var(--accent-on);
  border-radius:6px; padding:4px 10px; line-height:1.5;
}
.pill.ghost{background:transparent; color:var(--accent-ink); border:1px solid var(--accent)}
.pill.quiet{background:var(--surface-3); color:var(--muted); border:1px solid var(--line-2)}

/* ── Rastertextur ───────────────────────────────────────────────────────── */

/* Sehr leise: sie soll Fläche strukturieren, nicht auffallen. */
/* overflow:hidden ist hier nicht Kosmetik, sondern Pflicht: Die treibenden
   Formen sitzen mit Absicht ausserhalb des Bandes (left:-8%, right:-6%) und
   sind bis 46vw breit. Ohne Beschnitt zaehlt der Browser sie zur Breite des
   Dokuments, und die ganze Seite laesst sich seitlich scrollen. */
.grid-bg{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.grid-bg::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 100%);
}
.band > .wrap{position:relative; z-index:1}

/* ── Karten ─────────────────────────────────────────────────────────────── */

.cards{display:grid; gap:16px; margin-top:44px}
.cards.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards.c3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.cards.c4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card2{
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:24px; transition:box-shadow .2s, transform .2s, border-color .2s;
  box-shadow:var(--shadow); position:relative;
}
.card2:hover{transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow-lg)}
.card2 h3{font-size:16.5px; font-weight:700; letter-spacing:-.01em; margin:14px 0 8px}
.card2 p{font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:0}
.card2.mark{border-color:var(--accent)}

/* Mono-Fußnote, per Oberlinie abgesetzt. */
.mixnote{
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  margin-top:15px; padding-top:12px; border-top:1px solid var(--line);
}

/* ── Icons ──────────────────────────────────────────────────────────────── */

.ic{
  width:38px; height:38px; border-radius:10px; display:inline-flex;
  align-items:center; justify-content:center; flex:none;
  background:var(--accent-wash); border:1px solid var(--accent);
  color:var(--accent-ink);
}
.ic svg{width:19px; height:19px; display:block}
.ic.armed{opacity:0; transform:scale(.4) rotate(-14deg)}
.ic.pop{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ic-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(3.5deg)}}
.card2:hover .ic.pop{animation:ic-bob 4.2s ease-in-out infinite}

/* ── Segmentbalken ──────────────────────────────────────────────────────── */

.bands{
  display:flex; height:16px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line-2); margin-top:6px;
}
.bands > i{display:block; height:100%}
.band-key{display:flex; flex-wrap:wrap; gap:12px; font-size:11.5px; color:var(--muted); margin-top:9px}
.band-key span{display:inline-flex; align-items:center; gap:6px}
.band-key i{width:9px; height:9px; border-radius:2px; display:inline-block}

/* ── Datenpanel ─────────────────────────────────────────────────────────── */

.panel{
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-lg);
}
.panel-top{
  display:flex; align-items:center; gap:11px; padding:11px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.panel-top .dots{display:flex; gap:6px}
.panel-top .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2)}
.panel-top .dots i:first-child{background:var(--accent); opacity:.85}
.panel-top .t{font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted)}
.panel-top .right{margin-left:auto; display:flex; align-items:center; gap:10px}
.panel-foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--muted);
}

/* Puls für Live-Punkte, als aufgehender Ring statt bloßem Blinken. */
@keyframes dot-ring{
  0%{box-shadow:0 0 0 0 var(--pos-ring)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.live-chip{
  display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:99px;
  border:1px solid var(--pos); color:var(--pos); background:transparent;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
}
.live-chip i{width:7px; height:7px; border-radius:50%; background:var(--pos); flex:none;
  animation:dot-ring 1.8s infinite}

/* ── Schwebende Karten ──────────────────────────────────────────────────── */

@keyframes card-float{
  0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}
  50%{transform:translateY(-6px) rotate(var(--tilt,0deg))}
}
.floaty{animation:card-float 7s ease-in-out infinite}
.floaty.slow{animation-duration:9s}
.floaty.tilt{--tilt:1.2deg}

/* ── Die Rangliste im Hero ──────────────────────────────────────────────── */

.hero-fig{
  position:relative; margin:34px 0 0;
  border:1px solid var(--line-2); border-radius:14px; background:var(--surface);
  box-shadow:var(--shadow-lg); padding:14px 16px 12px;
}
.hero-fig-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:10px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.hero-fig-k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600;
}
.hero-fig-live{font-family:var(--mono); font-size:10px; color:var(--muted)}

.hero-lb{list-style:none; margin:0; padding:0; display:grid; gap:1px}
/* Sechs Spalten, feste Breiten für alles Numerische: Die Zahlen stehen so
   untereinander bündig, und die Reihenfolge liest sich als Rangfolge statt
   als Liste. */
.hlb-row{
  display:grid; grid-template-columns:14px 22px minmax(0,1fr) auto 44px 34px;
  align-items:center; gap:9px; padding:7px 6px; border-radius:8px;
  transition:background .16s ease;
}
.hlb-row:hover{background:var(--surface-2)}
.hlb-n{font-family:var(--mono); font-size:10.5px; color:var(--muted); text-align:right}
.hlb-av{
  width:22px; height:22px; border-radius:50%; overflow:hidden;
  border:1.5px solid var(--line-2); display:block;
}
.hlb-av svg, .hlb-av img{width:100%; height:100%; display:block; object-fit:cover}
.hlb-nm{
  font-weight:600; font-size:13px; color:var(--ink); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hlb-nm:hover{color:var(--accent)}
.hlb-div{font-size:10.5px; color:var(--muted); white-space:nowrap}
.hlb-r{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; text-align:right}
.hlb-d{font-family:var(--mono); font-size:10.5px; text-align:right; font-variant-numeric:tabular-nums}

.hero-lb-all{
  display:inline-block; margin-top:9px; padding:2px 0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--muted); text-decoration:none;
}
.hero-lb-all:hover{color:var(--accent)}

@media (max-width:520px){
  /* Die Division fällt zuerst — sie ist die einzige Spalte, die man auch
     eine Zeile später noch erfährt. */
  .hlb-div{display:none}
  .hlb-row{grid-template-columns:14px 22px minmax(0,1fr) 44px 34px}
}

/* ── Kennzahlenreihe mit linken Trennlinien ─────────────────────────────── */

/* ── Kennzahlenreihe mit linken Trennlinien ─────────────────────────────── */

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); margin-top:40px}
.statrow > div{padding:20px 22px; border-left:1px solid var(--line)}
.statrow > div:first-child{border-left:none; padding-left:0}
.statrow .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.statrow .v{font-family:var(--mono); font-size:27px; font-weight:600; margin-top:6px; letter-spacing:-.03em}
.statrow .s{font-size:12px; color:var(--ink-2); margin-top:4px; line-height:1.45}

/* ── Diagramm: an- und abschaltbare Serien ──────────────────────────────── */

.series-toggle{cursor:pointer; user-select:none; transition:opacity .15s}
.series-toggle[aria-pressed="false"]{opacity:.34}
.series-toggle[aria-pressed="false"] .swatch{background:var(--muted) !important}

@media (prefers-reduced-motion:reduce){
  .floaty, .live-chip i, .card2:hover .ic.pop{animation:none !important}
  .ic.armed{opacity:1 !important; transform:none !important}
  .card2:hover{transform:none}
}

/* ── Boardtabelle ───────────────────────────────────────────────────────── */

.cmp{width:100%; border-collapse:collapse; font-size:13px}
.cmp th{
  text-align:left; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:500; white-space:nowrap;
  padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.cmp th.r, .cmp td.r{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.cmp td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.cmp tr:last-child td{border-bottom:none}
.cmp tr.me{background:var(--accent-wash)}
.cmp tbody tr:hover{background:var(--surface-2)}
.cmp tbody tr.me:hover{background:var(--accent-wash)}
.cmp .swatch{width:12px; height:3px; border-radius:2px; display:inline-block;
  margin-right:8px; vertical-align:middle}
.cmp .nm{font-weight:600}
.cmp .nm a{text-decoration:none}
.cmp .nm a:hover{text-decoration:underline}
.cmp .sub{display:block; font-size:11px; color:var(--muted); margin-top:2px}
.cmp td.mute{color:var(--muted)}
.cmp svg{vertical-align:middle}

/* Wenn es eng wird, fällt zuerst die Sparkline, dann die Tagesbewegung.
   Das Rating bleibt bis zuletzt stehen — es ist der Grund, warum jemand auf
   ein Board schaut. Eine Tabelle, die man seitwärts schieben muss, liest
   dagegen niemand. */
@media (max-width:820px){
  .cmp th:nth-child(6), .cmp td:nth-child(6){display:none}
  .cmp th, .cmp td{padding:10px 9px}
}
@media (max-width:560px){
  .cmp th:nth-child(3), .cmp td:nth-child(3){display:none}
  .cmp th, .cmp td{padding:9px 7px; font-size:12.5px}
  .cmp .sub{font-size:10.5px}
}

/* ── Live-Panel ─────────────────────────────────────────────────────────── */

.live-chip.off{border-color:var(--line-2); color:var(--muted)}
.live-chip.off i{background:var(--muted); animation:none}

.lv-prices{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px; background:var(--line)}
.lv-px{background:var(--surface); padding:13px 15px; position:relative; overflow:hidden}
.lv-px .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted)}
.lv-px .v{font-family:var(--mono); font-size:22px; font-weight:600; margin-top:3px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.lv-px .s{font-size:11px; margin-top:2px; color:var(--muted)}

/* Ein kurzer Farbstoß bei jedem Tick — man soll sehen, dass etwas ankommt,
   ohne dass die Zahl springt oder hochzählt. */
@keyframes px-up{ from{background:var(--pos-wash)} to{background:transparent} }
@keyframes px-dn{ from{background:var(--neg-wash)} to{background:transparent} }
.lv-px.up{animation:px-up .55s ease-out}
.lv-px.dn{animation:px-dn .55s ease-out}

.lv-agents{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--line); border-top:1px solid var(--line)}
.lv-agent{background:var(--surface); padding:13px 15px}
.lv-agent-top{display:flex; align-items:center; gap:8px; font-size:13px}
.lv-agent-top .swatch{width:12px; height:3px; border-radius:2px; display:inline-block}
.lv-state{
  margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; padding:2px 7px; border-radius:3px;
  border:1px solid var(--accent); color:var(--accent-ink); background:var(--accent-wash);
}
.lv-state.quiet{border-color:var(--line-2); color:var(--muted); background:transparent}
.lv-mix{font-family:var(--mono); font-size:12px; margin-top:7px}
.lv-why{font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.45}

.lv-log{max-height:230px; overflow-y:auto; border-top:1px solid var(--line)}
.lv-line{display:flex; gap:11px; align-items:baseline; padding:8px 15px;
  border-bottom:1px solid var(--line); font-size:12.5px}
.lv-line:last-child{border-bottom:none}
.lv-line.first{background:var(--surface-2)}
.lv-line .t{font-family:var(--mono); font-size:11px; color:var(--muted); flex:none}
.lv-line .a{font-family:var(--mono); font-size:11.5px; font-weight:600; flex:none; width:78px}
.lv-line .d{flex:1; min-width:0}
.lv-line .w{display:block; font-size:11px; color:var(--muted); margin-top:2px}
.lv-empty{padding:24px 15px; text-align:center; color:var(--muted); font-size:12.5px; line-height:1.6}
.lv-spark{margin-top:7px; opacity:.85; height:22px}
.lv-spark svg{display:block}

/* ── Board: Agenten im Vordergrund ──────────────────────────────────────── */

.row-av{
  width:30px; height:30px; border-radius:8px; overflow:hidden; flex:none;
  border:1.5px solid var(--line-2); display:inline-block; vertical-align:middle;
}
.row-av.ghost{border-style:dashed; background:var(--surface-2)}
.row-main{display:inline-block; vertical-align:middle; margin-left:11px}
.cmp td .row-main .nm{display:block}
.cmp td .row-main .sub{margin-left:0}
.tick-d{font-size:10.5px; margin-left:7px; font-weight:500}

.cmp tr.sep td{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:9px 12px 6px; background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.cmp tr.ref-row td{opacity:.82}
.cmp tr.ghost-row td{opacity:.55}

.link-btn{
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
}
.link-btn:hover{color:var(--accent)}

/* Rangliste im Ausklapper */
.cmp.rank{border-top:1px solid var(--line)}
.rank-av{
  width:22px; height:22px; border-radius:5px; overflow:hidden; display:inline-block;
  vertical-align:middle; margin-right:9px; border:1px solid var(--line-2);
}
.cmp.rank .sub{margin-left:31px}

/* ── Live: was gehalten wird ────────────────────────────────────────────── */

.lv-av{width:24px; height:24px; border-radius:6px; overflow:hidden; flex:none;
  border:1px solid var(--line-2); display:inline-block}
.lv-bar{display:flex; height:9px; border-radius:5px; overflow:hidden; margin-top:11px;
  border:1px solid var(--line-2)}
.lv-bar > i{display:block; height:100%; transition:width .5s ease}
.lv-holds{display:flex; flex-wrap:wrap; gap:9px; margin-top:7px;
  font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.lv-holds span{display:inline-flex; align-items:center; gap:5px}
.lv-holds i{width:8px; height:8px; border-radius:2px; display:inline-block}
.lv-holds b{color:var(--ink); font-weight:600}
@media (prefers-reduced-motion:reduce){ .lv-bar > i{transition:none} }
.lv-line.server .t{color:var(--ink-2)}
.lv-line .sealed{color:var(--pos); font-size:7px; margin-left:5px; vertical-align:middle}

/* ── Rechner ────────────────────────────────────────────────────────────── */

/* Ein Regler statt einer festen Zahl. „7 % der Gewinne" überträgt niemand im
   Kopf auf den eigenen Fall; wer den Einsatz selbst schiebt, weiß nach drei
   Sekunden, ob es sich für ihn lohnt. */
.calc-row{display:flex; align-items:baseline; gap:12px}
.calc-lab{font-size:12.5px; color:var(--ink-2); letter-spacing:.01em}
.calc-out{
  margin-left:auto; font-family:var(--mono); font-size:17px; font-weight:600;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.rng{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; margin:9px 0 0; border-radius:99px;
  background:var(--line-2); cursor:pointer; outline-offset:4px;
}
.rng::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:17px; height:17px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:transform .12s ease;
}
.rng::-webkit-slider-thumb:hover{transform:scale(1.14)}
.rng::-webkit-slider-thumb:active{transform:scale(.96)}
.rng::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.rng:focus-visible{outline:2px solid var(--accent)}
@media (prefers-reduced-motion:reduce){
  .rng::-webkit-slider-thumb{transition:none}
  .rng::-webkit-slider-thumb:hover, .rng::-webkit-slider-thumb:active{transform:none}
}

/* ── Blatt ──────────────────────────────────────────────────────────────── */

/* <dialog> statt Eigenbau: Fokusfalle, Escape und das Abdunkeln dahinter
   bringt der Browser mit — und zwar richtiger, als man es nachbaut.
   
   Die erste Fassung sah aus wie ein Systemhinweis: enge Ränder, ein
   Schließkreuz oben rechts, Text bis an die Kante. Ein Blatt ist aber
   kein Fehlerdialog, sondern eine Karte, die vor die Seite tritt — also
   großer Radius, viel Innenabstand, eine eigene Kopfzeile, und ein
   Eintritt, der von unten kommt statt aufzublitzen. */
/* Das Polster sitzt am Dialog, nicht am Formular.
 *
 * Vorher trug nur `.sheet form` Polster. Ueberschrift, Fliesstext, Meldung
 * und Kleingedrucktes stehen im Markup daneben, nicht darin — die klebten
 * also am Rand, waehrend das Formular in der Mitte sass. Am Dialog gesetzt
 * gilt es fuer alles, was drin steht, auch fuer das, was spaeter dazukommt.
 *
 * max-height plus overflow:auto, weil overflow:hidden auf einem niedrigen
 * Fenster den Absendeknopf abgeschnitten hat: Der Dialog war hoeher als der
 * Schirm und liess sich nicht rollen. */
.sheet{
  border:1px solid var(--line-2); border-radius:20px;
  padding:20px 22px 22px;
  background:var(--surface); color:var(--ink);
  max-width:460px; width:calc(100% - 28px);
  max-height:calc(100dvh - 40px); overflow:auto;
  box-shadow:0 32px 70px -28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.14);
}
.sheet::backdrop{
  background:color-mix(in srgb, #06080c 62%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
@keyframes sheet-in{
  from{opacity:0; transform:translateY(16px) scale(.985)}
  to{opacity:1; transform:none}
}
.sheet[open]{animation:sheet-in .26s cubic-bezier(.22,.61,.36,1)}
.sheet::backdrop{animation:fade-in .26s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.sheet form, .sheet > .ac-body{padding:0}
.sheet-top{
  display:flex; align-items:center; gap:10px; margin:-4px -6px 14px 0;
}
.sheet-top .eyebrow{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:99px; padding:3px 10px;
}
.sheet-x{
  margin-left:auto; background:none; border:1px solid transparent;
  color:var(--muted); font-size:19px; line-height:1; cursor:pointer;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  transition:background .16s, color .16s;
}
.sheet-x:hover{background:var(--surface-2); color:var(--ink)}
.sheet h3{
  font-size:22px; margin:0 0 12px; letter-spacing:-.022em; line-height:1.2;
}
.sheet p{font-size:14px; color:var(--ink-2); line-height:1.68; margin:0 0 12px}
.sheet .btn{margin-top:8px}
.sheet .btn-primary{width:100%; justify-content:center}

/* Der Auslöser im Baukasten.
   
   Vorher eine graue Pille mit einem Pfeil, die neben den drei
   Vertrauens-Tags stand und aussah wie ein vierter davon — also wie eine
   Aussage, nicht wie ein Knopf. Jetzt hat sie eine eigene Zeile, einen
   Rahmen in Akzentfarbe und links einen pulsierenden Punkt: das liest sich
   als „hier ist etwas zu holen" und nicht als Etikett. */
.demo-badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  padding:9px 16px 9px 13px; cursor:pointer;
  border:1px solid var(--accent); border-radius:12px;
  background:var(--accent-wash); color:var(--ink);
  font-size:13px; text-align:left;
  transition:background .18s, transform .12s, box-shadow .18s;
}
.demo-badge:hover{
  background:color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow:0 6px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.demo-badge:active{transform:translateY(1px)}
.demo-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation:demo-pulse 2.4s ease-out infinite;
}
@keyframes demo-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)}
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.demo-more{
  color:var(--accent-ink); font-family:var(--mono); font-size:11px;
  letter-spacing:.04em; margin-left:2px;
}
@media (prefers-reduced-motion:reduce){
  .demo-badge{transition:none} .demo-badge:active{transform:none}
  .demo-dot{animation:none}
  .sheet[open], .sheet::backdrop{animation:none}
}

/* ── Konto ──────────────────────────────────────────────────────────────── */

.ac-lab{display:block; font-size:12px; color:var(--ink-2); margin-bottom:5px}
.ac-opt{color:var(--muted); font-weight:400}
.ac-form .inp{width:100%}
.ac-hint{
  display:block; font-family:var(--mono); font-size:11px;
  color:var(--muted); margin-top:5px;
}
.ac-hint.good{color:var(--pos)}
.ac-hint.bad{color:var(--neg)}
.ac-msg{margin-top:11px}
.ac-msg:empty{display:none}
.ac-row{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap}
.ac-fine{font-size:11.5px !important; color:var(--muted) !important; line-height:1.55; margin-top:12px !important}
.ac-tabs{margin:2px -20px 14px; padding-left:20px}

/* Der Schlüssel muss abschreibbar sein — Mono, umbrechend, mit Luft. */
.ac-key{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface-2); padding:9px 11px;
}
.ac-key code{
  font-family:var(--mono); font-size:12.5px; color:var(--ink);
  word-break:break-all; flex:1; min-width:180px; line-height:1.5;
}
.ac-key.big{border-color:var(--accent); background:var(--accent-wash)}
.ac-key.big code{font-size:14px; letter-spacing:.02em}

.who-chip{display:inline-flex; align-items:center; gap:6px}
.who-dot{width:6px; height:6px; border-radius:50%; background:var(--pos); flex:none}

/* ── Das Buch ───────────────────────────────────────────────────────────── */

/* Betrag groß, Prozent klein darunter. Zwei Zeilen in einer Zelle, weil
   beide etwas anderes leisten: der Betrag ist begreiflich, der Prozentsatz
   vergleichbar. Tabellenziffern, damit die Spalte an der Kommastelle
   ausgerichtet bleibt und nicht bei jedem Wert zappelt. */
.bk-v{display:block; font-variant-numeric:tabular-nums; line-height:1.25}
.bk-s{
  display:block; font-family:var(--mono); font-size:10.5px;
  font-variant-numeric:tabular-nums; opacity:.72; line-height:1.3; margin-top:1px;
}

/* Buchstand im Live-Panel. Mono und tabellarisch, damit die Ziffern beim
   Ticken nicht springen — eine Zahl, die bei jeder Änderung die Breite
   wechselt, liest sich als Flackern und nicht als Bewegung. */
.lv-book{
  margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; display:inline-flex; align-items:baseline; gap:6px;
}
.lv-book.quiet{color:var(--muted); font-weight:500}
.lv-book i{font-style:normal; font-size:10.5px; opacity:.8; font-weight:500}

/* Die Regel für Nebentext auf hervorgehobener Fläche ist nach build.css
   gewandert — ui.css laden nur zwei der acht Seiten, build.css alle acht,
   und der Baukasten braucht sie am dringendsten. */

/* ── Board-Steuerung ────────────────────────────────────────────────────── */

/* Erscheint erst, wenn genug Agenten da sind. Bei vier Einträgen ist ein
   Suchfeld Möblierung; bei vierzig ist seine Abwesenheit ein Fehler. */
.board-ctl{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding:11px 16px; border-top:1px solid var(--line);
}
.board-q{flex:1 1 200px; min-width:150px}
.board-ctl .sel{flex:0 0 auto}
.board-count{
  margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--muted); white-space:nowrap;
}
.board-more{padding:11px 16px 0; display:flex; justify-content:center}
@media (max-width:620px){
  .board-ctl{padding:10px 12px}
  .board-count{margin-left:0; width:100%}
}

/* ── Der eigene Agent im Live-Panel ─────────────────────────────────────── */

/* Abgesetzt, weil er etwas anderes tut als die drei daneben: die
   entscheiden, er wartet. Ihn gleich aussehen zu lassen würde genau das
   verwischen. */
.lv-mine{border-left:2px solid var(--accent)}
.lv-mine .lv-av img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}
.lv-mine .lv-why code{
  font-family:var(--mono); font-size:10.5px; color:var(--accent-ink);
  border:1px solid var(--line-2); border-radius:4px; padding:0 4px;
}
.lv-av.ghost{
  border:1px dashed var(--line-2); background:transparent;
}
.lv-empty-slot{opacity:.75}

/* ── Erklärgrafiken ─────────────────────────────────────────────────────── */

/* Sie stehen auf einer eigenen Fläche mit Rahmen, damit sie als Abbildung
   gelesen werden und nicht als Dekoration im Fließtext. Waagerecht
   scrollbar, weil eine Zeichnung mit fester Innengeometrie unter etwa
   560 px sonst zusammengedrückt und unlesbar würde — lieber schieben als
   quetschen. */
.fig-wrap{
  margin:24px 0 0; padding:20px 22px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface); overflow-x:auto;
}
.fig-wrap .fig{display:block; min-width:520px; max-width:760px}
/* Diese Regel stand hier und setzte font-family:inherit auf JEDEN Text in
   jeder Grafik. Eine CSS-Regel schlägt ein Präsentationsattribut, also hat
   sie figures.js überstimmt: Alle siebenundsechzig Beschriftungen liefen in
   der Proportionalschrift, auch die Zahlen. „1634" neben „1487" untereinander
   in einer Proportionalschrift steht nicht bündig, und genau daran sah die
   Rating-Grafik falsch aus. figures.js setzt selbst „inherit", wo es die
   Proportionale will — die Regel war überflüssig und schädlich zugleich. */
@media (max-width:620px){
  .fig-wrap{padding:14px}
}

/* ── Wertzeichen ────────────────────────────────────────────────────────── */

/* Die Scheibe bringt ihren eigenen Hintergrund mit, deshalb braucht sie
   hier weder Rahmen noch Anpassung ans Thema. Sie sitzt auf der Grundlinie
   des Textes daneben, nicht darüber. */
.ic-asset{border-radius:50%; flex:none}
.tk-ic{display:inline-flex; align-items:center; margin-right:2px}
.hold-name{display:inline-flex; align-items:center; gap:8px}
.chip.has-ic{display:inline-flex; align-items:center; gap:7px}

/* ── Board-Kopfzeile ────────────────────────────────────────────────────── */

/* Vorher standen dort drei graue Punkte, „agency · board" in Mono und zwei
   Chips. Das las sich wie eine Fensterdekoration und sagte nichts. Jetzt:
   ein Titel, das Datum, und rechts die eine Zahl, die jemand sucht. */
.board-top{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.bt-title{font-size:15px; font-weight:600; letter-spacing:-.01em}
.bt-sub{font-family:var(--mono); font-size:11px; color:var(--muted)}
.bt-right{
  margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--muted);
}
.bt-right b{color:var(--ink); font-weight:600}

/* Der Buchwert in der Konsolenleiste — an der Stelle, wo vorher
   „connecting…" stand. Eine Zahl ist dort mehr wert als ein Zustand. */
.con-book{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.con-book b{font-size:15px; font-weight:600}
.con-book span{font-size:11.5px}

/* ── Schwungrad ─────────────────────────────────────────────────────────── */

/* Die Ringe drehen sich, der Inhalt nicht. Verschiedene Dauern, damit es
   nicht wie ein einzelnes rotierendes Bild aussieht, sondern wie mehrere
   Ebenen, die sich unabhängig bewegen. */
@keyframes fw-spin{ to{ transform:rotate(360deg) } }
@keyframes fw-dash{ to{ stroke-dashoffset:-120 } }
.fw-ring{animation:fw-spin linear infinite}
.fw-slow{animation-duration:60s}
.fw-mid{animation-duration:38s; animation-direction:reverse}
/* Die wandernden Striche auf dem Bogen: das ist der Teil, der „hier fließt
   etwas" sagt — und deshalb liegt er nur auf den Schritten, die wirklich
   passiert sind. */
/* Ein Sechstel Versatz je Bogen: der Impuls wandert einmal herum, statt dass
   sechs Striche im Gleichtakt blinken. Negative Verzögerung, damit die
   Bewegung sofort läuft und nicht erst nach einem Umlauf einsetzt. */
.fw-flow{animation:fw-dash 2.4s linear infinite; animation-delay:calc(var(--i, 0) * -.4s)}
/* Der Knoten hebt sich, wenn der Impuls ihn erreicht. */
.fw-node{animation:fw-node 14.4s linear infinite; animation-delay:calc(var(--i, 0) * 2.4s)}
@keyframes fw-node{
  0%, 14%  {stroke-width:3.2; opacity:1}
  22%, 100%{stroke-width:1.6; opacity:.62}
}
@media (prefers-reduced-motion:reduce){
  .fw-ring, .fw-flow, .fw-node{animation:none}
}

/* Der Zeitraum steht klein unter dem Spaltennamen. „Rating 30d" neben
   „Worst fall 7d" macht in einem Blick klar, dass der Regler die Bewertung
   nicht anfasst — ohne dass irgendwo ein Satz dazu stehen muss. */
.cmp th .th-sub{
  display:block; font-family:var(--mono); font-size:8.5px; font-weight:400;
  letter-spacing:.09em; color:var(--muted); margin-top:2px;
}

/* ── Board: Zahlen zuerst ───────────────────────────────────────────────── */

/* Der Kopf ist kurz gehalten. Wer über den Anker hierher springt, will die
   Rangliste sehen und nicht drei Sätze darüber lesen. */
/* Kleiner als eine gewöhnliche Abschnittsüberschrift. In einem
   Datenabschnitt ist die Überschrift Beschriftung, nicht Auftritt — jede
   Zeile, die sie einspart, ist eine Zeile Rangliste über der Falz. */
.board-head{max-width:62ch}
.board-head h2{margin:11px 0 6px; font-size:clamp(23px,3vw,32px); line-height:1.12}
.board-head .lede{margin:0; font-size:14.5px}
.board-panel{margin-top:18px}

/* Dichter als der Rest der Seite: eine Rangliste liest man als Block, und
   dafür müssen die Zeilen näher zusammen stehen. */
.board-panel .cmp td{padding:7px 12px}
.board-panel .cmp th{padding-top:9px; padding-bottom:9px}
.board-panel .board-ctl{border-bottom:1px solid var(--line)}

/* Die Kurve steht unter der Tabelle und lässt sich zuklappen. Sie ist die
   Erläuterung zu den Zahlen, nicht der Grund, herzukommen. */
.board-chart{border-top:1px solid var(--line)}
.board-chart > summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:10px 14px; user-select:none;
}
.board-chart > summary::-webkit-details-marker{display:none}
.board-chart > summary::after{
  content:'▾'; margin-left:auto; color:var(--muted); font-size:11px;
  transition:transform .18s ease;
}
.board-chart[open] > summary::after{transform:rotate(180deg)}
.board-chart > summary:hover{background:var(--surface-2)}
.bc-t{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600;
}
.bc-h{font-family:var(--mono); font-size:10px; color:var(--muted)}

/* Der Abschnitt folgt jetzt direkt auf das dunkle Hero-Band und braucht
   oben weniger Luft. Und der Sprung über #board muss den festen Kopf
   einrechnen, sonst verschwindet die erste Zeile darunter. */
#board{padding-top:38px; scroll-margin-top:76px}