/* AGENCY — Token-Seite
 *
 * Baut auf tokens.css und site.css auf. Zurückhaltender als eine übliche
 * Token-Seite: keine Kursanzeige, keine Countdown-Uhr, keine Prozentzahl in
 * Großformat. Die Seite erklärt einen Kreislauf, sie bewirbt keine Rendite.
 */

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

.tk-hero{padding:66px 0 40px}
.tk-ticker{
  font-family:var(--mono); font-size:clamp(46px,8vw,86px); font-weight:600;
  letter-spacing:-.045em; line-height:1; margin:14px 0 18px;
}
.tk-ticker .s{color:var(--accent)}
.tk-lede{font-size:clamp(17px,2vw,21px); color:var(--ink-2); max-width:58ch; margin:0 0 24px}
.tk-facts{display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px}
.tk-fact{background:var(--surface); padding:13px 17px; flex:1 1 150px}
.tk-fact .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.tk-fact .v{font-family:var(--mono); font-size:17px; font-weight:600; margin-top:3px}
.tk-fact .v.pending{color:var(--muted); font-weight:400; font-size:13px}

/* ── Kreislauf ──────────────────────────────────────────────────────────── */

.cycle{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line)}
.cyc{background:var(--surface); padding:17px 16px; position:relative}
.cyc .n{font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--accent); margin-bottom:8px}
.cyc h3{font-size:15px; margin-bottom:6px}
.cyc p{font-size:12.5px; color:var(--ink-2); margin:0; line-height:1.5}
.cyc.dim{background:var(--surface-2)}
.cyc.dim h3, .cyc.dim p{color:var(--muted)}

/* ── Zwei Seiten ────────────────────────────────────────────────────────── */

.sides{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.side{border:1px solid var(--line-2); border-radius:var(--r); padding:20px; background:var(--surface)}
.side.mark{border-color:var(--accent)}
.side .lab{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px}
.side.mark .lab{color:var(--accent-ink)}
.side h3{margin-bottom:11px}
.side ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-2); line-height:1.65}
.side li{margin-bottom:6px}

/* ── Verteilung ─────────────────────────────────────────────────────────── */

.alloc-bar{display:flex; height:26px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line-2); margin-bottom:15px}
.alloc-seg{position:relative}
.alloc-seg span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--accent-on);
}

/* ── Was er nicht ist ───────────────────────────────────────────────────── */

.isnot{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.isnot-card{border:1px dashed var(--line-2); border-radius:var(--r); padding:16px}
.isnot-card h3{font-size:15px; margin-bottom:6px; color:var(--muted)}
.isnot-card h3::before{content:'✕'; color:var(--neg); margin-right:7px; font-size:13px}
.isnot-card p{font-size:13px; color:var(--ink-2); margin:0; line-height:1.55}

/* ── Warnkasten ─────────────────────────────────────────────────────────── */

.warn{
  border:1px solid var(--neg); border-radius:var(--r); padding:17px 19px;
  background:var(--neg-wash); margin:20px 0;
}
.warn .lab{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--neg); font-weight:600; margin-bottom:7px; display:block}
.warn p{margin:0 0 .6em; font-size:14px; color:var(--ink); max-width:74ch; line-height:1.6}
.warn p:last-child{margin-bottom:0}

.legal{font-size:12.5px; color:var(--muted); line-height:1.7; max-width:84ch}
.legal h3{font-size:14px; margin:18px 0 6px; color:var(--ink-2)}

/* Das Kleingedruckte vollstaendig, aber zugeklappt. Es zu kuerzen waere
   falsch — es soll nur nicht die halbe Seite fuellen. */
.legal-fold{border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.legal-fold > summary{
  display:flex; align-items:baseline; gap:12px; cursor:pointer; list-style:none;
  padding:16px 20px; user-select:none;
}
.legal-fold > summary::-webkit-details-marker{display:none}
.legal-fold > summary::after{
  content:'▾'; margin-left:auto; color:var(--muted); transition:transform .18s ease;
}
.legal-fold[open] > summary::after{transform:rotate(180deg)}
.legal-fold > summary:hover{background:var(--surface-2)}
.lf-h{font-size:13.5px; color:var(--muted)}
.legal-fold .legal{padding:0 20px 20px; max-width:74ch}
.legal-fold .legal h3{font-size:14px; margin:16px 0 5px}
.legal-fold .legal p{font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:0}