@font-face { font-family: "Instrument"; src: url(/fonts/InstrumentSerif-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument"; font-style: italic; src: url(/fonts/InstrumentSerif-Italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Mono"; src: url(/fonts/JetBrainsMono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #0c0b0a;
  --ink-2: #151311;
  --paper: #ece6da;
  --paper-dim: #ece6da99;
  --paper-faint: #ece6da33;
  --line: #ece6da1f;
  --signal: #ff5a36;
  --serif: "Instrument", "Iowan Old Style", Georgia, serif;
  --mono: "Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; min-height: 100vh; overflow-x: hidden; }
::selection { background: var(--signal); color: var(--ink); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button { font: inherit; color: inherit; }

/* Papierkorn — kein Gradient-Blob, sondern Textur */
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 50; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} }

/* ---------- Kopfzeile ---------- */
.mast { position: sticky; top: 0; z-index: 20; display: flex; gap: 24px; align-items: center; justify-content: space-between;
  padding: 16px var(--pad); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(var(--ink) 60%, transparent); }
.mast__mark { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px #ff5a3622; }
.mast__meta { color: var(--paper-dim); }
.mast__live { display: inline-flex; gap: 8px; align-items: center; color: var(--paper-dim); min-width: 12ch; justify-content: flex-end; }
.mast__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-faint); transition: background .3s; }
.mast__live[data-state="thinking"] i { background: var(--signal); animation: pulse .7s ease-in-out infinite alternate; }
.mast__live[data-state="ok"] i { background: #9bd66b; }
.mast__live[data-state="error"] i { background: #ff3b1f; }
.mast__live[data-state="error"] { color: #ff8a6b; }
@keyframes pulse { to { transform: scale(1.8); opacity: .4; } }
@media (max-width: 720px) { .mast__meta { display: none; } }

/* ---------- Bühne ---------- */
.stage { padding: clamp(40px, 9vh, 110px) var(--pad) 40px; max-width: 1400px; margin: 0 auto; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin: 0 0 22px; }
.lede { font-weight: 400; font-size: clamp(40px, 7.4vw, 118px); line-height: .92; letter-spacing: -.025em; margin: 0 0 clamp(40px, 8vh, 90px); max-width: 14ch; }
.lede em { color: var(--paper-dim); }

.oracle { border-top: 1px solid var(--line); padding-top: 28px; min-height: 150px; }
.verdict { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.015em; margin: 0; transition: filter .6s var(--ease), opacity .4s; }
.verdict em { font-style: italic; }
.verdict .hot { color: var(--c, var(--signal)); font-style: italic; }
.verdict__pre { color: var(--paper-dim); }
.verdict__sub { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); margin: 16px 0 0; max-width: 70ch; letter-spacing: .01em; }
.verdict.unsure { filter: blur(1.2px); }

/* Zukünfte — Größe = Wahrscheinlichkeit, Unschärfe = Unsicherheit */
.futures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin: 34px 0 30px; min-height: 60px; }
.fut { --p: .1; --c: #999; position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  font-size: calc(15px + var(--p) * 58px); line-height: 1; color: var(--c);
  opacity: calc(.38 + var(--p) * .62); filter: blur(calc((1 - var(--p)) * 1.3px));
  transition: font-size .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease); font-style: italic; }
.fut sup { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--paper-dim); letter-spacing: .04em; filter: none; }
.fut.lead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--c); transform-origin: left; animation: draw .6s var(--ease); }
@keyframes draw { from { transform: scaleX(0); } }

/* ---------- Feder ---------- */
.writer { position: relative; border: 1px solid var(--line); background: var(--ink-2); padding: 22px 24px 14px; border-radius: 2px;
  transition: border-color .3s; }
.writer:focus-within { border-color: #ece6da55; }
.writer::before { content: "Dein Satz"; position: absolute; top: -9px; left: 18px; padding: 0 8px; background: var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.pen { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--paper); caret-color: var(--signal);
  font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); line-height: 1.2; min-height: 1.3em; overflow: hidden; }
.pen::placeholder { color: #ece6da40; font-style: italic; }
.writer__foot { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: .06em; min-height: 18px; }
.tremor { flex: 1; text-align: center; color: var(--signal); opacity: 0; transition: opacity .4s; }
.tremor.on { opacity: 1; }
.done { min-width: 15ch; text-align: right; }
@media (max-width: 560px) {
  .writer__foot { flex-wrap: wrap; }
  .tremor { order: 3; flex-basis: 100%; text-align: left; }
  .writer { padding: 20px 16px 12px; }
  .lede { font-size: clamp(38px, 11vw, 60px); }
  .fut { font-size: calc(14px + var(--p) * 36px); }
  .futures { gap: 4px 18px; }
}

.ghosts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.ghosts__label { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: .06em; margin-right: 6px; }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 100px; padding: 7px 15px; cursor: pointer; font-style: italic; font-size: 16px;
  transition: border-color .2s, background .2s, color .2s; }
.ghost:hover, .ghost:focus-visible { border-color: var(--paper); outline: 0; }
.ghost[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.error { margin-top: 26px; border-left: 3px solid #ff3b1f; padding: 14px 18px; background: #ff3b1f12; font-family: var(--mono); font-size: 13px; display: grid; gap: 4px; }
.error b { font-family: var(--serif); font-weight: 400; font-size: 24px; font-style: italic; color: #ff8a6b; }
.error__honest { color: var(--paper-dim); }

/* ---------- Fluss ---------- */
.river { padding: 70px var(--pad) 40px; max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--line); }
.river__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: end; margin-bottom: 30px; }
.river__head h2 { font-weight: 400; font-size: clamp(32px, 4.2vw, 60px); line-height: .95; margin: 0; letter-spacing: -.02em; }
.river__head p { font-family: var(--mono); font-size: 12.5px; color: var(--paper-dim); margin: 0; line-height: 1.6; }
@media (max-width: 820px) { .river__head { grid-template-columns: 1fr; gap: 14px; } }
.river__canvas { position: relative; height: clamp(260px, 42vh, 460px); }
#stream { width: 100%; height: 100%; display: block; }
.river__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--paper-faint); font-style: italic; font-size: 26px; pointer-events: none; }
.river__tip { position: absolute; pointer-events: none; background: var(--paper); color: var(--ink); padding: 10px 12px; font-family: var(--mono); font-size: 11px;
  line-height: 1.5; min-width: 180px; transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 10px 40px #0008; z-index: 5; }
.river__tip b { font-family: var(--serif); font-size: 16px; font-weight: 400; font-style: italic; display: block; margin-bottom: 4px; }
.river__tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.turns { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; counter-reset: t; }
.turns li { counter-increment: t; display: grid; grid-template-columns: 3ch 1fr; gap: 14px; align-items: baseline; font-size: 21px; animation: rise .6s var(--ease); }
.turns li > span.line { display: block; }
.turns li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--paper-dim); }
.turns q { font-style: italic; quotes: "»" "«"; color: var(--signal); }
.turns .from { color: var(--a); font-style: italic; } .turns .to { color: var(--b); font-style: italic; }
.turns small { display: block; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); margin-top: 2px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Instrumente ---------- */
.instruments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1400px; margin: 0 auto; padding: 30px var(--pad) 60px; gap: 0; }
.inst { padding: 22px 22px 22px 0; border-top: 1px solid var(--line); }
.inst + .inst { padding-left: 22px; border-left: 1px solid var(--line); }
@media (max-width: 980px) { .instruments { grid-template-columns: 1fr 1fr; } .inst:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .instruments { grid-template-columns: 1fr; } .inst, .inst + .inst { padding-left: 0; border-left: 0; } }
.inst h3 { margin: 0 0 18px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.inst__read { font-size: 19px; margin: 14px 0 0; min-height: 2.6em; line-height: 1.25; }
.inst__read small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--paper-dim); margin-top: 6px; letter-spacing: .04em; }

.bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; height: 96px; align-items: end; position: relative; }
.bars span { position: relative; background: var(--paper-faint); height: calc(4px + var(--p, 0) * 92px); transition: height .6s var(--ease), background .4s; }
.bars span.top { background: var(--paper); }
.bars span::after { content: attr(data-l); position: absolute; top: calc(100% + 6px); left: 0; font-family: var(--mono); font-size: 9px; color: var(--paper-dim); white-space: nowrap; }
.bars .needle { position: absolute; top: -6px; bottom: 0; width: 2px; background: var(--signal); left: calc(var(--x, 0) * 100%); transition: left .6s var(--ease); box-shadow: 0 0 12px var(--signal); }
.inst .bars { margin-bottom: 20px; }

.recips { display: grid; gap: 7px; }
.recips div { display: grid; grid-template-columns: 7.5ch 1fr 4ch; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--paper-dim); }
.recips b { height: 6px; background: var(--paper-faint); position: relative; overflow: hidden; }
.recips b::after { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: var(--paper); transition: width .6s var(--ease); }
.recips div.top { color: var(--paper); }

.dial { position: relative; width: 100%; max-width: 200px; }
.dial svg { width: 100%; display: block; overflow: visible; }
.dial path { fill: none; stroke-width: 9; stroke-linecap: butt; }
.dial__track { stroke: var(--paper-faint); }
.dial__fill { stroke: var(--signal); stroke-dasharray: 157.08; stroke-dashoffset: 157.08; transition: stroke-dashoffset .7s var(--ease); }
.dial__num { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 38px; font-style: italic; line-height: 1; }

/* ---------- Wie ---------- */
.how { max-width: 1400px; margin: 0 auto; padding: 70px var(--pad); border-top: 1px solid var(--line); }
.how h2 { font-weight: 400; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; margin: 0 0 36px; max-width: 22ch; letter-spacing: -.015em; }
.how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 820px) { .how__grid { grid-template-columns: 1fr; gap: 20px; } }
.how__grid p { margin: 0; font-size: 18px; color: #ece6dacc; }
.how .n { display: block; font-family: var(--mono); font-size: 11px; color: var(--signal); margin-bottom: 10px; letter-spacing: .1em; }
code { font-family: var(--mono); font-size: .78em; background: #ece6da14; padding: 1px 5px; border-radius: 2px; }
.raw { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 16px; }
.raw summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
.raw pre { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: #ece6dabb; background: var(--ink-2); padding: 18px; overflow: auto; max-height: 420px; border: 1px solid var(--line); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; padding: 26px var(--pad) 40px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: .03em; }
.telemetry { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}