/* AGENCY — Landing Page
 *
 * Baut auf tokens.css auf. Die Abschnittsfolge kommt aus dem Blueprint:
 * jede Sektion beantwortet die Frage, die nach der darüber entsteht.
 */

/* ── Abschnitte ─────────────────────────────────────────────────────────── */

section.band{padding:64px 0; border-top:1px solid var(--line)}
section.band:first-of-type{border-top:none}
.band-head{max-width:70ch; margin-bottom:28px}
.band-head h2{margin:8px 0 12px}
.band-head p{font-size:16px; color:var(--ink-2); margin:0}
.band.tint{background:var(--surface-2)}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero{padding:70px 0 46px}
.hero h1{font-size:clamp(38px,6.2vw,72px); line-height:1.02; margin:16px 0 20px; letter-spacing:-.028em}
.hero h1 .l3{color:var(--accent)}
.hero .sub{font-size:clamp(17px,2vw,21px); color:var(--ink-2); max-width:56ch; margin:0 0 26px}
.hero .cta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px}
.btn-lg{padding:11px 20px; font-size:15px}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:4px 11px; border-radius:99px;
  border:1px solid var(--line-2); background:var(--surface); font-family:var(--mono);
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
}
.badge .dot{width:6px; height:6px; border-radius:50%; background:var(--pos); flex:none}

/* ── 03 Live-Baukasten ──────────────────────────────────────────────────── */

.demo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:0}
@media (max-width:940px){ .demo{grid-template-columns:minmax(0,1fr)} }
.demo-left{border-right:1px solid var(--line); padding:18px 20px}
@media (max-width:940px){ .demo-left{border-right:none; border-bottom:1px solid var(--line)} }
.demo-right{padding:18px 20px}
.demo-rule{
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-2);
  padding:11px 13px; margin-bottom:9px;
}
.demo-rule .cap{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:600; margin-bottom:7px; display:block;
}
.demo-rule .line{display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13px}
.demo-rule input[type=range]{flex:1; min-width:110px; accent-color:var(--accent)}
.demo-rule .val{font-family:var(--mono); font-size:13px; font-weight:600; width:52px; text-align:right}
.demo-code{
  font-family:var(--mono); font-size:11.5px; line-height:1.6; white-space:pre; overflow-x:auto;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 14px; margin:0; color:var(--ink-2); max-height:330px;
}
.demo-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:12px}

/* ── 04 Kennzahlen ──────────────────────────────────────────────────────── */

.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line)}
.metric{background:var(--surface); padding:20px}
.metric .v{font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1}
.metric .k{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-top:8px}
.metric .s{font-size:12px; color:var(--ink-2); margin-top:5px; line-height:1.4}

/* ── 05 Kursleiste und Tape ─────────────────────────────────────────────── */

/* Die Leiste ist bewusst hoch statt gepolstert, und die Spur liegt absolut
   darin. Grund: eine Spur mit `width:max-content` im normalen Fluss schiebt
   ihre Eigenbreite an die Vorfahren weiter, auch wenn sie per overflow
   abgeschnitten ist — die ganze Seite ließ sich dadurch seitwärts scrollen,
   ohne dass dort etwas zu sehen war. Absolut positionierte Kinder zählen
   nicht in die Eigenbreite des Elternteils, und damit hört es auf. */
.ticker{
  border-block:1px solid var(--line); background:var(--surface); overflow:hidden;
  position:relative; height:38px;
}
.ticker-track{
  position:absolute; top:0; left:0; height:100%;
  display:flex; align-items:center; gap:0; width:max-content;
  animation:slide 70s linear infinite;
}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker:hover .ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker{overflow-x:auto}
}
.tick{
  display:inline-flex; align-items:baseline; gap:7px; padding:0 15px;
  border-right:1px solid var(--line); font-family:var(--mono); font-size:12px; white-space:nowrap;
}
.tick .s{font-weight:600}
.tape{max-height:290px; overflow-y:auto}
.tape-row{
  display:flex; align-items:baseline; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:12.5px;
}
.tape-row:last-child{border-bottom:none}
.tape-row .d{font-family:var(--mono); font-size:11px; color:var(--muted); width:34px; flex:none}
.tape-row .a{font-family:var(--mono); font-size:11.5px; font-weight:600; width:96px; flex:none}
.tape-row .legs{font-family:var(--mono); font-size:11.5px; flex:1; min-width:0}
.tape-row .why{color:var(--muted); font-size:11.5px; flex:none}

/* ── 06 Schritte ────────────────────────────────────────────────────────── */

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px}
.stepc .n{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent);
  border-bottom:2px solid var(--accent); display:inline-block; padding-bottom:3px; margin-bottom:11px;
}
.stepc h3{margin-bottom:6px}
.stepc p{font-size:13.5px; color:var(--ink-2); margin:0}

/* ── 07 Provision ───────────────────────────────────────────────────────── */

.states{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.state{border:1px solid var(--line-2); border-radius:var(--r); padding:18px; background:var(--surface)}
.state.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.state .lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px;
}
.state.on .lab{color:var(--accent-ink)}
.state h3{margin-bottom:8px}
.state p{font-size:13.5px; color:var(--ink-2); margin:0 0 12px}
.state .earn{
  font-family:var(--mono); font-size:13px; padding-top:11px; border-top:1px solid var(--line);
}

/* ── Zweispalter für Text + Tabelle ─────────────────────────────────────── */

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start}
@media (max-width:880px){ .split{grid-template-columns:minmax(0,1fr); gap:24px} }
.cols3{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.col-card{border:1px solid var(--line-2); border-radius:var(--r); padding:17px; background:var(--surface)}
.col-card h3{font-size:16px; margin-bottom:9px}
.col-card ul{margin:0; padding-left:17px; font-size:13.5px; color:var(--ink-2); line-height:1.65}
.col-card li{margin-bottom:4px}

/* ── Echt/Simuliert ─────────────────────────────────────────────────────── */

.rs-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}
.rs-row:last-child{border-bottom:none}
.rs-row .m{font-family:var(--mono); font-size:15px; width:20px; flex:none; text-align:center}
.rs-row .m.y{color:var(--pos)} .rs-row .m.n{color:var(--muted)}
.rs-row .t{font-size:13.5px}
.rs-row .n{margin-left:auto; font-size:12px; color:var(--muted); text-align:right}

.hashline{
  font-family:var(--mono); font-size:11.5px; word-break:break-all; line-height:1.7;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:10px 12px; color:var(--ink-2);
}
.hashline b{color:var(--ink)}

/* ── Tier-Leiter ────────────────────────────────────────────────────────── */

.ladder{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.rung{display:flex; align-items:center; gap:11px; padding:9px 13px; background:var(--surface); font-size:13px}
.rung .t{font-weight:600; width:104px; flex:none}
.rung .r{font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:auto}
.rung.here{background:var(--accent-wash)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:15px 34px 15px 0; list-style:none; position:relative;
  font-family:var(--serif); font-size:17px; font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:18px; color:var(--muted); font-weight:400;
}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{color:var(--accent-ink)}
.faq .ans{padding:0 44px 17px 0; font-size:14.5px; color:var(--ink-2); line-height:1.65; max-width:74ch}
.faq .ans p:last-child{margin-bottom:0}

/* ── Schluss ────────────────────────────────────────────────────────────── */

.finale{padding:74px 0; text-align:center; border-top:1px solid var(--line)}
.finale h2{font-size:clamp(28px,4.4vw,44px); margin-bottom:14px}
.finale p{font-size:16.5px; color:var(--ink-2); max-width:52ch; margin:0 auto 24px}

.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:22px; margin-bottom:26px}
.foot-grid h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:9px;
}
.foot-grid a, .foot-grid span{display:block; font-size:13px; color:var(--ink-2); text-decoration:none; padding:2px 0}
.foot-grid a:hover{color:var(--accent-ink)}
.foot-grid span{color:var(--muted)}

/* ── Hervorgehobener Kasten ─────────────────────────────────────────────── */

/* Liegt hier und nicht in docs.css, weil Startseite und Dokumentation ihn
   beide benutzen und die Startseite docs.css nicht lädt. Genau daran ist er
   auf der Startseite einmal unstyled erschienen. */
/* Kasten für einen Satz, auf den es ankommt. */
.callout{
  border-left:3px solid var(--accent); background:var(--accent-wash);
  padding:12px 15px; margin:15px 0; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.callout p{margin:0; color:var(--ink); max-width:72ch}
.callout .lab{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:5px; font-weight:600;
}


/* ── Abschnitte laufen ein ──────────────────────────────────────────────── */

/* Zurückhaltend: 14 px Versatz und eine halbe Sekunde. Es soll den Blick
   führen, nicht den Leser warten lassen. Ohne JavaScript oder bei
   reduzierter Bewegung ist alles sofort da — deshalb liegt der
   Ausgangszustand auf .reveal und nicht auf dem Abschnitt selbst. */
/* .reveal ist der alte Name; die Regeln stehen jetzt als .rv in
   assets/motion.css. Der alte Selektor bleibt als Weiche stehen, weil
   einzelne Seiten ihn im Markup noch tragen. */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
}

/* Zahlen wechseln mit einem kurzen Aufblitzen, damit man sieht, dass sie
   neu gerechnet wurden — statt hochzuzählen, was eine Zahl verkauft. */
@keyframes stat-flash{ 0%{background:var(--accent-wash)} 100%{background:transparent} }
.stat.changed{animation:stat-flash .45s ease-out}
@media (prefers-reduced-motion:reduce){ .stat.changed{animation:none} }

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* Zwei Spalten ab 1000 px: Text links, die drei Zahlen rechts.
 *
 * Vorher stand alles in einer Spalte und die rechte Hälfte war auf einem
 * breiten Schirm schlicht leer — der Text endete bei etwa der halben
 * Fensterbreite und daneben war nichts. Das liest sich nicht als großzügig,
 * sondern als unfertig.
 *
 * Die Zahlen gehören auch inhaltlich dorthin: sie sind der Beleg für den
 * Satz daneben. Nebeneinander gelesen stützen sie ihn, untereinander sind
 * sie eine Fußnote. */
.hero-grid{display:grid; gap:34px}
.hero-copy h1{
  font-size:clamp(2.5rem,5.4vw,4.2rem); line-height:1.04;
  letter-spacing:-.032em; margin:22px 0 20px;
}
.hero-copy h1 .l3{color:var(--accent)}
.hero-lede{
  font-size:17.5px; color:var(--ink-2); line-height:1.65;
  max-width:44ch; margin:0 0 28px;
}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}

@media (min-width:1000px){
  .hero-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
    column-gap:60px; align-items:center; gap:0;
  }
  .hero-fig{margin-top:0}
}
@media (max-width:999px){
  .hero-fig{margin-top:30px}
}

/* ── Konsole ────────────────────────────────────────────────────────────── */

/* Ein Rahmen, in dem ein Agent arbeitet. Er sieht bewusst aus wie ein
   Programmfenster und nicht wie ein Werbebild: Leiste oben, Umschalter,
   zwei Spalten. Wer das sieht, soll denken „das ist das Produkt", nicht
   „das ist eine Grafik über das Produkt". */
.con-head{max-width:64ch; margin-bottom:26px}
.con-head h2{font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.025em; margin:14px 0 10px}
.con-lede{font-size:15.5px; color:var(--ink-2); line-height:1.65; margin:0}

.console{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-lg);
}

.con-top{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2);
}

/* Agentenwähler */
.con-pick{position:relative}
.con-pick-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:99px; padding:4px 12px 4px 5px;
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600;
}
.con-pick-btn:hover{border-color:var(--accent)}
.con-pick-btn .car{color:var(--muted); font-size:11px}
.con-av{
  width:24px; height:24px; border-radius:50%; overflow:hidden; flex:none; display:block;
  border:1px solid var(--line-2);
}
.con-av.sm{width:20px; height:20px}
.con-menu{
  position:absolute; top:calc(100% + 7px); left:0; z-index:20;
  min-width:270px; max-height:320px; overflow-y:auto;
  border:1px solid var(--line-2); border-radius:12px; background:var(--surface);
  box-shadow:var(--shadow-lg); padding:5px;
}
.con-opt{
  display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
  padding:7px 8px; border:0; border-radius:8px; background:none;
  color:var(--ink); text-align:left;
}
.con-opt:hover{background:var(--surface-2)}
.con-opt.on{background:var(--accent-wash)}
.con-opt-main{display:flex; flex-direction:column; min-width:0; flex:1}
.con-opt-main b{font-size:13px}
.con-opt-main span{font-size:10.5px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.con-opt-r{font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

/* Reiter */
.con-seg{display:flex; gap:2px; background:var(--surface-3); border-radius:99px; padding:3px}
.con-tab{
  cursor:pointer; border:0; background:none; border-radius:99px;
  padding:5px 13px; font-size:12.5px; color:var(--muted);
}
.con-tab:hover{color:var(--ink)}
.con-tab[aria-selected="true"]{background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:var(--shadow)}
.con-right{margin-left:auto; display:flex; align-items:center; gap:10px}

/* Zwei Spalten */
.con-cols{display:grid; grid-template-columns:minmax(0,1fr) 268px}
/* Die drei Flächen liegen übereinander in einer Rasterzelle. Die Höhe des
   Fensters ergibt sich damit aus der größten und bleibt beim Umschalten
   stehen; vorher sprang sie bei jedem Klick. */
.con-body{padding:20px 22px 24px; min-width:0; display:grid; align-items:start}
.con-body > .con-pane{grid-area:1 / 1; min-width:0}
.con-pane.is-off{visibility:hidden; pointer-events:none}
@media (max-width:900px){
  .con-cols{grid-template-columns:minmax(0,1fr)}
  .con-agent{border-left:0 !important; border-top:1px solid var(--line)}
}

.con-label{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.03em}
.con-val{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:6px 0 18px}
.con-val .big{font-size:clamp(2rem,4vw,2.9rem); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1}
.con-val .delta{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums}

.con-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.con-kpis .kpi{background:var(--surface); padding:11px 13px; display:flex; flex-direction:column; gap:3px}
.con-kpis .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted)}
.con-kpis .v{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums}
.con-kpis .s{font-size:10.5px; color:var(--muted)}

.con-chart-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:22px 0 4px}
.ch-t{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted)}
.ch-legend{margin-left:auto; display:flex; gap:12px; font-size:11px; color:var(--ink-2)}
.ch-legend span{display:inline-flex; align-items:center; gap:5px}
.ch-legend i{width:9px; height:2.5px; border-radius:2px; display:block}
.con-plot{position:relative}

.con-alloc-head{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:18px 0 7px}
.alloc-bar{display:flex; height:9px; border-radius:99px; overflow:hidden; background:var(--surface-3)}
.alloc-bar i{display:block; height:100%}
.alloc-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:9px; font-size:11.5px;
  color:var(--ink-2)}
.alloc-legend span{display:inline-flex; align-items:center; gap:5px}
.alloc-legend i{width:8px; height:8px; border-radius:2px; display:block}

.con-sh{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 11px}
.con-note{font-size:11.5px; color:var(--muted); line-height:1.6; margin-top:11px}
.con-note code{font-family:var(--mono); font-size:10.5px; border:1px solid var(--line-2);
  border-radius:4px; padding:0 4px}

/* Rechte Spalte */
.con-agent{
  border-left:1px solid var(--line); padding:20px 18px;
  background:var(--surface-2); display:flex; flex-direction:column; gap:14px;
}
.ca-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:8px}
.ca-chip{border:1px solid var(--accent); color:var(--accent-ink); border-radius:99px;
  padding:1px 8px; font-size:9px; letter-spacing:.06em}
.ca-score{display:flex; align-items:baseline; gap:7px}
.ca-score b{font-size:38px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  line-height:1}
.ca-score small{font-size:11px; color:var(--muted)}
.ca-meter{position:relative; height:5px; border-radius:99px; background:var(--surface-3);
  overflow:visible}
.ca-meter > i{display:block; height:100%; border-radius:99px; background:var(--accent);
  transition:width .6s cubic-bezier(.22,.61,.36,1)}
/* Die Referenz sitzt bei 1500 — auf der Skala 1000..1800 sind das 62,5 %. */
.ca-ref{position:absolute; top:-3px; left:62.5%; width:1px; height:11px; background:var(--ink-2);
  opacity:.55}
.ca-rows{display:flex; flex-direction:column; gap:7px}
.ca-row{display:flex; align-items:baseline; gap:8px; font-size:11.5px}
.ca-row .m{width:14px; flex:none; font-weight:700}
.ca-row .m.yes{color:var(--pos)} .ca-row .m.no{color:var(--neg)}
.ca-row .l{color:var(--ink-2)}
.ca-row .d{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted);
  white-space:nowrap}
.ca-next{font-size:11.5px; color:var(--ink-2); line-height:1.6; border-top:1px solid var(--line);
  padding-top:12px; margin-top:auto}
.ca-next code{font-family:var(--mono); font-size:10.5px; color:var(--accent-ink)}

.con-foot{font-size:12px; color:var(--muted); line-height:1.6; margin:14px 0 0; max-width:80ch}

@media (prefers-reduced-motion:reduce){ .ca-meter > i{transition:none} }
.alloc-why{
  flex-basis:100%; margin-top:7px; font-size:11.5px; color:var(--muted);
  line-height:1.55;
}

/* Das Kursband trägt jetzt je Wert eine 30-Tage-Linie. */
.tk-spark{display:inline-flex; align-items:center; opacity:.75; flex:none}
.tk-spark svg{display:block}
.tk-px{font-variant-numeric:tabular-nums}
/* Der zweite Absatz im Hero trägt das Versprechen, nicht die Erklärung —
   deshalb kleiner und ruhiger als der erste. */
.hero-then{font-size:15px; color:var(--muted); margin-top:-10px}
.hero-then b{color:var(--ink-2)}