/* =============================================================
   Pipeflow — Light Edition
   Papierweiss, Tinte-Schwarz, editoriale Typografie.
   Keine Bilder, keine Icons, keine Logos — nur Schrift und Bewegung.
   ============================================================= */

:root {
  --paper:      #ffffff;
  --wash:       #f6f6f4;
  --wash-2:     #efefec;
  --ink:        #0b0b0c;
  --ink-2:      #56565c;
  --ink-3:      #8d8d94;
  --rule:       #e4e4e1;
  --rule-soft:  #efefec;

  --shadow-sm:  0 1px 2px rgba(11,11,12,.04), 0 1px 1px rgba(11,11,12,.03);
  --shadow-md:  0 2px 4px rgba(11,11,12,.03), 0 14px 34px -18px rgba(11,11,12,.18);
  --shadow-lg:  0 4px 8px rgba(11,11,12,.03), 0 40px 80px -32px rgba(11,11,12,.28);

  --serif:  'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --max:    1240px;
  --gut:    clamp(20px, 4.5vw, 64px);

  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;      /* keine dunklen/blauen System-Controls */
  accent-color: var(--ink); /* keine blauen Checkboxen, Auswahlen, Regler */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* nicht hidden: sonst bricht position:sticky */
}

a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--ink); color: white; border-radius: 5px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
main:focus { outline: none; }
main [id] { scroll-margin-top: 100px; }
.contact-selection { padding: 20px; border: 1px solid var(--rule); border-radius: 8px; background: var(--wash); }
.contact-selection [data-contact-summary] { white-space: pre-line; }
.contact-selection a, .contact-fallback summary { text-decoration: underline; text-underline-offset: 4px; }
.contact-selection a { font-size: 14px; }
.contact-fallback summary { cursor: pointer; padding-block: 12px; font-size: 15px; }
.contact-fallback textarea { width: 100%; min-height: 220px; margin-top: 16px; padding: 12px; font: 14px/1.5 var(--mono); border: 1px solid var(--rule); resize: vertical; }
.form [hidden] { display: none !important; }
.form [data-contact-status]:empty { display: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* ---------- Grundraster ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: clamp(84px, 11vw, 160px); }
.band--tight { padding-block: clamp(60px, 8vw, 104px); }
.band--rule { border-top: 1px solid var(--rule); }
.band--wash { background: var(--wash); }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}
.display em { font-style: italic; }

h1.display { font-size: clamp(46px, 7.4vw, 104px); }
h2.display { font-size: clamp(36px, 5.4vw, 72px); }
h3.display { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.06; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 22px;
}

.body-lg { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.58; color: var(--ink-2); max-width: 58ch; }
.body    { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.small   { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
p { margin: 0; }

.head { max-width: 22ch; }
.head + .body-lg { margin-top: 26px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding-inline: 26px;
  border-radius: 100px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.012em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn--solid { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--line { border-color: var(--rule); background: var(--paper); }
.btn--line:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--sm { height: 42px; padding-inline: 20px; font-size: 14.5px; }
.btn--wide { width: 100%; }

.arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.arrow span { transition: transform .3s var(--ease); display: inline-block; }
.arrow:hover span { transform: translateX(5px); }

.cluster { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Kopfzeile ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transform: translateZ(0);   /* eigene Ebene, verhindert Repaint-Schlieren */
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.top.is-stuck { border-bottom-color: var(--rule); background: rgba(255,255,255,.88); }

.top__in { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  font-family: var(--serif);
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-block: 4px;
}

/* Die Wortmarke: das echte Icon (assets/logo-mark.png), breiter als hoch
   (1200x683) — deshalb nur die Hoehe in em setzen und die Breite dem
   Bild selbst ueberlassen. Etwas groesser als der Text, weil die feine
   Schwungspitze bei reiner Textgroesse sonst zu einem Fleck verschwimmt. */
.mark__icon {
  flex: none;
  height: 1.35em;
  width: auto;
  display: block;
}

/* Im kompakten Header etwas ruhiger; die groessere Footer-Wortmarke bleibt erhalten. */
.top .mark__icon { height: 1.15em; }

.menu { display: flex; align-items: center; gap: 34px; }
.menu a:not(.btn) { font-size: 15px; color: var(--ink-2); position: relative; transition: color .2s; }
.menu a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.menu a:not(.btn):hover { color: var(--ink); }
.menu a:not(.btn):hover::after,
.menu a[aria-current]::after { transform: scaleX(1); }
.menu a[aria-current] { color: var(--ink); }

/* Der einzige Handlungsaufruf in der Kopfzeile — er soll neben den
   blassen Textlinks sofort auffallen, nicht wie einer von ihnen wirken. */
.menu .btn--solid { box-shadow: 0 6px 18px -8px rgba(11,11,12,.55); }
.menu .btn--solid:hover { box-shadow: 0 10px 24px -8px rgba(11,11,12,.6); }

.burger {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 100px; padding: 9px 16px; font-size: 14px; cursor: pointer;
}

/* =============================================================
   BUEHNE — der Eintritt
   Eine Linie. Ein Wort. Dann die Konsole.
   ============================================================= */
.stage { padding: clamp(104px, 13vh, 160px) 0 clamp(72px, 9vw, 118px); }

.stage__intro { text-align: center; }

.stage__mark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 11.4vw, 152px);
  line-height: .94;
  letter-spacing: -0.045em;
  margin: 0;
  overflow: hidden;
  padding-bottom: .05em;
}
.stage__mark > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1.2s var(--ease) .52s;
}
.is-lit .stage__mark > span { transform: none; }

.stage__rule {
  height: 1px;
  background: var(--ink);
  width: min(620px, 100%);
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  transform: scaleX(0);
  transition: transform 1.3s var(--ease) .1s;
}
.is-lit .stage__rule { transform: scaleX(1); }

.stage__spec {
  margin: 24px auto 0;
  max-width: 64ch;
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s var(--ease) 1.2s, transform .9s var(--ease) 1.2s;
}
.is-lit .stage__spec { opacity: 1; transform: none; }

/* Kopfzeile faehrt erst nach dem Wort ein */
body.has-stage .top { opacity: 0; animation: topin .9s var(--ease) 1.45s forwards; }
@keyframes topin { to { opacity: 1; } }

/* =============================================================
   KONSOLE — ein Lauf in fuenf Stationen
   ============================================================= */
.console {
  margin-top: clamp(46px, 6.5vw, 82px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.15s var(--ease) 1.55s, transform 1.15s var(--ease) 1.55s;
}
.is-lit .console { opacity: 1; transform: none; }

.console__bar,
.console__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--wash);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.console__bar  { border-bottom: 1px solid var(--rule-soft); }
.console__foot { border-top: 1px solid var(--rule-soft); grid-template-columns: 1fr auto; }
.console__bar b, .console__foot b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.console__mid {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink);
}
.console__clock { justify-self: end; font-variant-numeric: tabular-nums; }
.console__foot > :last-child { justify-self: end; text-align: right; }

.blip { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; animation: blip 1.9s var(--ease-soft) infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* ---------- Schiene mit Laeufer ---------- */
.track { position: relative; height: 32px; margin: 0 clamp(18px, 2vw, 24px); }
.track__line { position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--rule); }
.track__fill { position: absolute; left: 0; top: 16px; height: 1px; width: 0; background: var(--ink); transition: width .8s var(--ease); }
.track__dot {
  position: absolute; top: 16px; left: 0;
  width: 9px; height: 9px; margin: -4px 0 0 -4.5px;
  border-radius: 50%; background: var(--ink);
  transition: left .8s var(--ease);
}
.track__dot::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 1px solid var(--ink);
  animation: halo 2.2s var(--ease-soft) infinite;
}
@keyframes halo {
  0%   { transform: scale(.5); opacity: .4; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Stationen ---------- */
.bays { display: grid; grid-template-columns: repeat(5, 1fr); }

.bay {
  position: relative;
  border-left: 1px solid var(--rule-soft);
  padding: 6px clamp(14px, 1.5vw, 20px) 50px;
  min-width: 0;
}
.bay:first-child { border-left: 0; }

.bay__head { display: flex; align-items: baseline; gap: 9px; padding-bottom: 15px; }
.bay__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--ink-3); transition: color .45s var(--ease);
}
.bay__t {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  transition: color .45s var(--ease);
}
.bay.is-live .bay__t, .bay.is-done .bay__t,
.bay.is-live .bay__n, .bay.is-done .bay__n { color: var(--ink); }

.bay__body { position: relative; min-height: 272px; }

/* Wartezustand: zeigt, worauf diese Station angewiesen ist */
.bay__wait {
  position: absolute; inset: 0 0 auto 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  transition: opacity .4s var(--ease);
}
.bay.is-live .bay__wait, .bay.is-done .bay__wait { opacity: 0; }

.bay__out { opacity: 0; transition: opacity .55s var(--ease); }
.bay.is-live .bay__out, .bay.is-done .bay__out { opacity: 1; }

/* Erklaerung beim Ueberfahren */
.bay__hint {
  position: absolute; left: clamp(14px, 1.5vw, 20px); right: clamp(14px, 1.5vw, 20px); bottom: 14px;
  font-size: 12px; line-height: 1.4; color: var(--ink-3);
  opacity: 0; transform: translateY(5px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.bay:hover .bay__hint { opacity: 1; transform: none; }

/* ---------- 01 Thema: Kandidaten werden verworfen ---------- */
.cand {
  position: relative;
  font-family: var(--serif);
  font-size: 16px; line-height: 1.22; letter-spacing: -0.012em;
  color: var(--ink);
  padding: 8px 0;
  opacity: 0; transform: translateY(7px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .6s var(--ease);
}
.cand.in { opacity: 1; transform: none; }
.cand.out { color: var(--ink-3); }
.cand.out::after {
  content: ''; position: absolute; left: 0; top: 50%;
  height: 1px; width: 0; background: var(--ink-3);
  transition: width .45s var(--ease);
}
.cand.out.cut::after { width: 100%; }
.cand.pick { color: var(--ink); }
.cand.pick::before {
  content: ''; position: absolute; left: -14px; top: 50%; margin-top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform .45s var(--ease);
}
.cand.pick.marked::before { transform: scale(1); }

/* ---------- 02 Motiv: aus Rauschen wird ein Bild ---------- */
.prompt {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  letter-spacing: .04em; color: var(--ink-2);
  min-height: 30px; margin-bottom: 10px;
}
.prompt::after {
  content: ''; display: inline-block;
  width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: var(--ink); opacity: 0;
}
.bay.is-drawing .prompt::after { opacity: 1; animation: caret .9s steps(1) infinite; }

.shot {
  display: block;
  width: 88%; height: auto;
  border-radius: 7px;
  background: var(--wash);
  opacity: 0;
  transition: opacity .45s var(--ease), filter .5s var(--ease);
}
.shot.on { opacity: 1; }

.gen__note {
  margin-top: 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- 03 Text: Caption schreibt sich ---------- */
.cap {
  font-size: 13.5px; line-height: 1.52; color: var(--ink);
  min-height: 104px;
}
.cap::after {
  content: ''; display: inline-block;
  width: 2px; height: 1.02em; margin-left: 2px; vertical-align: -3px;
  background: var(--ink); opacity: 0;
}
.bay.is-writing .cap::after { opacity: 1; animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.tags {
  margin-top: 12px; min-height: 36px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
  opacity: 0; transform: translateY(5px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.tags.in { opacity: 1; transform: none; }

.meter {
  margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- 04 Pruefung: Regeln haken ab ---------- */
.chk {
  display: grid; grid-template-columns: 15px 1fr auto;
  gap: 11px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--ink-3);
  transition: color .4s var(--ease);
}
.chk:last-child { border-bottom: 0; }
.chk i {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1px solid var(--rule); position: relative;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.chk i::after {
  content: ''; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--paper); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .3s var(--ease) .12s;
}
.chk b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  font-weight: 400; color: var(--ink-3);
  transition: color .4s var(--ease);
  font-variant-numeric: tabular-nums;
}
.chk.ok { color: var(--ink); }
.chk.ok b { color: var(--ink); }
.chk.ok i { background: var(--ink); border-color: var(--ink); }
.chk.ok i::after { transform: rotate(45deg) scale(1); }

/* ---------- 05 Live: Kanaele melden zurueck ---------- */
.tgt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 13.5px; color: var(--ink-3);
  transition: color .4s var(--ease);
}
.tgt:last-child { border-bottom: 0; }
.tgt b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  font-weight: 400; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: color .4s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.tgt.sent { color: var(--ink); }
.tgt.sent b { color: var(--ink); }
.tgt.flip b { opacity: 0; transform: translateY(-5px); }

/* =============================================================
   KONSOLE — schmale Ansicht: eine Station nach der anderen
   ============================================================= */
@media (max-width: 900px) {
  .bays { grid-template-columns: 1fr; position: relative; }
  .bay {
    grid-area: 1 / 1;
    border-left: 0;
    padding-inline: clamp(16px, 5vw, 24px);
    opacity: 0; pointer-events: none;
    transition: opacity .5s var(--ease);
  }
  .bay.is-live { opacity: 1; pointer-events: auto; }
  .console.is-static .bay { opacity: 1; pointer-events: auto; position: relative; grid-area: auto; border-top: 1px solid var(--rule-soft); }
  .bay__body { min-height: 288px; }
  .shot { max-width: 214px; }
  .bay__hint { position: static; opacity: 1; transform: none; margin-top: 16px; }
  .bay { padding-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__mark > span { transform: none !important; }
  .stage__rule { transform: scaleX(1) !important; }
  .stage__spec, .console { opacity: 1 !important; transform: none !important; }
  body.has-stage .top { opacity: 1; animation: none; }
  .shot { filter: none !important; opacity: 1; }
  .track__dot::after { animation: none; }
}

/* =============================================================
   SENDEPLAN — eine Woche, die sich selbst fuellt
   ============================================================= */
.sked {
  margin-top: clamp(42px, 5.5vw, 68px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sked__bar, .sked__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--wash);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.sked__bar  { border-bottom: 1px solid var(--rule-soft); }
.sked__foot { border-top: 1px solid var(--rule-soft); opacity: .3; transition: opacity .7s var(--ease); }
.sked.is-done .sked__foot { opacity: 1; }
.sked__bar b, .sked__foot b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.sked__mid { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }

/* Eine ruhige Pipeflow-Welle verbindet Statusleiste und Wochenplan.
   Der helle Impuls laeuft nur entlang der Linie; das Panel selbst bleibt stabil. */
.sked__wave {
  height: 42px;
  padding: 7px 0 5px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-soft);
  background: linear-gradient(90deg, var(--paper), var(--wash), var(--paper));
}
.sked__wave svg { display: block; width: 100%; height: 100%; }
.sked__wave path { fill: none; vector-effect: non-scaling-stroke; }
.sked__wave-base { stroke: var(--rule); stroke-width: 1; }
.sked__wave-live {
  stroke: var(--ink); stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 88 1112;
  animation: sked-wave-flow 5.8s linear infinite;
}
@keyframes sked-wave-flow { to { stroke-dashoffset: -1200; } }

/* Regelstreifen: dieselben Regeln, die in Station 04 pruefen */
.sked__rules {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.sked__rules span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 100px; padding: 5px 12px;
  white-space: nowrap;
}

.sked__scroll { overflow-x: auto; }

.sked__grid {
  display: grid;
  grid-template-columns: 112px repeat(7, minmax(84px, 1fr));
  min-width: 760px;
}

.sked__corner, .sked__day {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 13px 12px;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
  transition: color .35s var(--ease), background-color .35s var(--ease);
}
.sked__corner { border-left: 0; }
.sked__day.is-now { color: var(--ink); background: var(--wash); }

.sked__ch {
  display: flex; align-items: center;
  font-size: 13.5px; color: var(--ink-2);
  padding: 14px 14px 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.sked__ch.hit { color: var(--ink); }
.sked__ch small {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; margin-left: 8px; color: var(--ink-3);
}

.sked__cell {
  border-left: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: 12px 10px; min-height: 88px;
  transition: background-color .35s var(--ease);
}
.sked__cell.is-now { background: var(--wash); }
.sked__cell.flash { background: var(--wash-2); }

.sked__grid > :nth-last-child(-n + 8) { border-bottom: 0; }

/* Ein Eintrag im Protokoll: Zeit, Format, Thema.
   Wird von links hereingewischt, als wuerde er gestempelt. */
.ent {
  padding-top: 9px;
  border-top: 1px solid var(--ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s var(--ease), opacity .35s var(--ease), transform .4s var(--ease);
}
.ent.on { clip-path: inset(0 0 0 0); }

.ent__meta {
  display: flex; justify-content: space-between; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ent__meta span:first-child { color: var(--ink); }

.ent__t {
  margin-top: 5px;
  font-size: 13px; line-height: 1.35; letter-spacing: -.008em;
  color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Von einer Regel gestoppt */
.ent--stop { border-top-color: var(--rule); }
.ent--stop .ent__meta span:first-child,
.ent--stop .ent__t { color: var(--ink-3); text-decoration: line-through; }
.ent.gone { opacity: 0; transform: translateX(-7px); }

@media (max-width: 700px) {
  .sked__rules span:nth-child(n + 4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ent { clip-path: none !important; }
  .sked__foot { opacity: 1; }
}

/* =============================================================
   ZOOM — die Kamera faehrt in eine Zelle des Sendeplans
   Drei Ebenen: der Plan, der weggezoomt wird, das Dokument,
   das an seiner Stelle erscheint, und die Vignette, die aus
   der Buehne einen Sucher macht. Die Kamera haengt nicht
   direkt am Scrollbalken, sondern an einer Feder — sie zieht
   nach und kommt weich zum Stehen.
   ============================================================= */
.zoom { border-top: 1px solid var(--rule); }
.zoom__head { padding-block: clamp(84px, 11vw, 150px) 0; }

.zoom__track { position: relative; height: 145vh; }

.zoom__stage {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
}

/* Der Sucher: zu den Raendern hin loest sich der Plan in Papier
   auf. Ohne das klebt das Raster als Rechteck im Bild. */
.zoom__stage::after {
  content: ''; position: absolute; inset: -2px; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(112% 84% at 50% 50%,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,.5) 62%,
      var(--paper) 92%);
}

/* ---------- Ebene 1: der Plan ---------- */
.zoom__world {
  position: absolute;
  --fade: 1;
  /* Bewusst kein will-change: transform. Mit eigener Ebene rastert der
     Browser den Text einmal bei Faktor 1 und zieht ihn dann auf das
     Achtfache — die Schrift wuerde beim Hineinfahren matschig. So wird
     jede Stufe neu gerastert und bleibt scharf. */
}

.zplan { width: min(880px, 88vw, 78vh); }

.zplan__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 0 1px 7px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.zplan__key { display: flex; align-items: center; gap: 4px; }
.zplan__key .k {
  display: inline-block; width: 5px; height: 5px;
  border: 1px solid var(--ink-3); margin-left: 11px;
}
.zplan__key .k:first-child { margin-left: 0; }
.k--done { background: var(--ink); border-color: var(--ink); }
.k--next { border-radius: 50%; background: var(--ink); border-color: var(--ink); }

.zplan__days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  padding: 0 1px 5px;
}
.zday {
  display: flex; align-items: baseline; gap: 4px; padding-left: 7px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.zday b { font-weight: 400; color: var(--ink-2); }
.zday.is-now { color: var(--ink); }
.zday.is-now b { color: var(--ink); }
.zday.is-now::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink); align-self: center;
}

.zgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
}

/* Jede Zelle traegt einen echten Eintrag: Uhrzeit, Kanal, Thema.
   Winzig gesetzt — beim Hineinfahren wird daraus ein Post. */
.zcell {
  position: relative;
  background: var(--paper);
  aspect-ratio: 1.08;
  padding: 10px;
  display: grid; align-content: start; gap: 3px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.zgrid.is-in .zcell { opacity: 1; }
.zgrid.is-in .zcell:not(.is-target) { opacity: var(--fade); }
/* Nach dem Einlauf zaehlt nur noch die Kamera — keine Verzoegerung mehr. */
.zgrid.is-set .zcell { transition: opacity .18s linear; }

.zcell.is-now { background: var(--wash); }
.zcell.is-target { background: var(--paper); }

/* Im Grossformat ist diese Zelle der eigentliche Beitrag — das Thema
   muss vollstaendig dastehen, nicht an der Zellkante abreissen. */
.is-target .zcell__topic { -webkit-line-clamp: 3; }

.zcell__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px;
}
.zcell__time {
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px;
}
/* Der Zustand steckt im Punkt vor der Uhrzeit: gefuellt heisst raus,
   offen heisst geplant, der Ring heisst: der hier kommt als naechster. */
.zcell__time::before {
  content: ''; width: 4px; height: 4px;
  border: 1px solid var(--ink-3);
}
.is-done .zcell__time::before { background: var(--ink); border-color: var(--ink); }
.is-target .zcell__time::before {
  border-radius: 50%; background: var(--ink); border-color: var(--ink);
  animation: blip 1.8s var(--ease-soft) infinite;
}
.zcell__ch {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: var(--ink-3); border: 1px solid var(--rule);
  border-radius: 2px; padding: 0 3px; line-height: 1.6;
}
.zcell__topic {
  font-size: 12px; line-height: 1.35; color: var(--ink-2);
  /* Zwei Zeilen, dann Punkte — eine halb abgeschnittene dritte Zeile
     sieht nach Fehler aus, nicht nach Kalender. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Die Nachbarzellen bleiben Beiwerk — nur die Zielzelle traegt vollen Kontrast. */
.zcell:not(.is-target) .zcell__time  { color: var(--ink-2); }
.zcell:not(.is-target) .zcell__topic { color: var(--ink-3); }

/* Die Zielzelle: Rahmen und Fahne verschwinden, sobald die Kamera
   anzieht — im Grossformat waeren sie nur noch Balken im Bild. */
.zcell.is-target::after {
  content: ''; position: absolute; inset: -1px;
  border: 1px solid var(--ink);
  opacity: var(--fade);
  pointer-events: none;
}
.zcell__flag {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 6px; letter-spacing: .12em;
  text-transform: uppercase; padding: 2px 4px;
  opacity: var(--fade);
}

/* ---------- Ebene 2: das Dokument ---------- */
.zdoc {
  position: absolute; z-index: 2;
  width: min(980px, 92vw);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: scale(.94);
  will-change: transform, opacity;
  pointer-events: none;
}
.zdoc.is-live { pointer-events: auto; }

.zdoc__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.zdoc__state { display: inline-flex; align-items: center; gap: 8px; }
.zdoc__state::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper);
  animation: blip 1.6s var(--ease-soft) infinite;
}
.zdoc.is-done .zdoc__state::before { animation: none; }

.zdoc__body {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--rule-soft);
}
.zdoc__visual {
  background: var(--wash);
  min-height: 420px;
  overflow: hidden;
}
.zdoc__visual img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.zdoc__post {
  background: var(--paper);
  padding: clamp(20px, 2.4vw, 30px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.zdoc__checks {
  margin-top: 24px;
  border-top: 1px solid var(--rule-soft);
}

.zdoc__lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 10px;
}
.zdoc__lab + * + .zdoc__lab { margin-top: 22px; }

.zdoc__topic {
  font-family: var(--serif); font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
  min-height: 1.1em;
}
.zdoc__cap {
  margin-top: 18px;
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
  min-height: 96px;
}
.zdoc__topic::after, .zdoc__cap::after {
  content: ''; display: inline-block;
  width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: var(--ink); opacity: 0;
}
.zdoc.is-typing-topic .zdoc__topic::after,
.zdoc.is-typing-cap .zdoc__cap::after { opacity: 1; animation: caret .9s steps(1) infinite; }

.zdoc__tags {
  margin-top: 10px; font-size: 12.5px; color: var(--ink-3);
  opacity: 0; transition: opacity .45s var(--ease);
}
.zdoc__tags.on { opacity: 1; }

/* Pruefzeilen */
.zchk {
  display: grid; grid-template-columns: 15px 1fr auto;
  gap: 11px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--ink-3);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.zchk:first-of-type { border-top: 0; }
.zchk.in { opacity: 1; transform: none; }
.zchk.ok { color: var(--ink); }
.zchk i {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1px solid var(--rule); position: relative;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.zchk i::after {
  content: ''; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--paper); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .25s var(--ease) .08s;
}
.zchk.ok i { background: var(--ink); border-color: var(--ink); }
.zchk.ok i::after { transform: rotate(45deg) scale(1); }
.zchk b {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  font-weight: 400; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color .35s var(--ease);
}
.zchk.ok b { color: var(--ink); }

/* Protokollzeile */
.zdoc__log {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  padding: 13px clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.zdoc__log span {
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.zdoc__log span.on { opacity: 1; transform: none; }
.zdoc__log b { color: var(--ink); font-weight: 400; }

/* Fusszeile mit der Pointe */
.zdoc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 14px clamp(20px, 2.4vw, 30px);
  background: var(--wash); border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.zdoc__foot b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.zdoc__punch {
  font-family: var(--serif); font-size: clamp(16px, 1.7vw, 21px);
  letter-spacing: -.02em; text-transform: none; color: var(--ink);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.zdoc__punch.on { opacity: 1; transform: none; }

/* Fortschritt der Protokollierung */
.zdoc__rail { height: 2px; background: var(--rule-soft); }
.zdoc__rail i {
  display: block; height: 100%; width: 0; background: var(--ink);
  transition: width .25s linear;
}

/* Hinweis, dass es von selbst laeuft */
.zoom__hint {
  position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px);
  z-index: 2;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.zoom__hint.on { opacity: 1; }

@media (max-width: 820px) {
  .zoom__track { height: 138vh; }
  /* Sieben Spalten auf einem Telefon: Motiv und Uhrzeit bleiben,
     das Thema waere in 45 px ohnehin nur noch Grau. */
  .zplan { width: min(94vw, 66vh); }
  .zplan__bar { font-size: 6.5px; letter-spacing: .1em; }
  .zplan__key .k { margin-left: 6px; width: 4px; height: 4px; }
  .zday { font-size: 6px; padding-left: 3px; gap: 2px; }
  .zday.is-now::before { width: 3px; height: 3px; }
  .zcell { aspect-ratio: .92; padding: 6px; gap: 2px; }
  .zcell__time { font-size: 10px; letter-spacing: .01em; gap: 2px; }
  .zcell__time::before { width: 3px; height: 3px; }
  .zcell__ch { display: none; }
  .zcell:not(.is-target) .zcell__topic { display: none; }
  .is-target .zcell__topic { font-size: 10px; line-height: 1.3; }
  .zcell__flag { font-size: 4.5px; padding: 1px 2px; }
  .zdoc__body { grid-template-columns: 1fr; }
  /* Auf dem Telefon muss das ganze Dokument in eine Bildschirmhoehe
     passen — die Buehne schneidet ab, was darueber hinausgeht. */
  .zdoc__visual { min-height: 0; aspect-ratio: 4 / 3; }
  .zdoc__post { min-height: 0; padding: 17px 18px; }
  .zdoc__checks { padding: 0; }
  .zdoc__bar { padding: 11px 16px; font-size: 9.5px; letter-spacing: .12em; }
  .zdoc__cap { font-size: 12.5px; line-height: 1.5; min-height: 0; }
  .zdoc__lab { margin-bottom: 7px; }
  .zdoc__lab + * + .zdoc__lab { margin-top: 16px; }
  .zchk { padding: 5.5px 0; font-size: 12.5px; gap: 9px; }
  .zdoc__log { padding: 10px 18px; gap: 4px 18px; font-size: 9.5px; }
  .zdoc__foot {
    justify-content: flex-start; gap: 8px 14px;
    padding: 11px 18px; font-size: 9.5px;
  }
  .zdoc__punch { order: 3; width: 100%; }
  /* Im Hochformat steht das Dokument bis fast an den unteren Rand —
     der Hinweis haette keinen Platz mehr. */
  .zoom__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sked__wave-live { animation: none; stroke-dasharray: none; opacity: .55; }
  .zoom__track { height: auto; }
  .zoom__stage { position: static; height: auto; padding: 40px 0; display: block; }
  .zoom__stage::after { display: none; }
  .zoom__world { display: none; }
  .zdoc {
    position: static; opacity: 1; transform: none;
    margin: 0 auto; pointer-events: auto;
  }
  .zchk { opacity: 1; transform: none; }
  .zchk i { background: var(--ink); border-color: var(--ink); }
  .zchk i::after { transform: rotate(45deg) scale(1); }
  .zchk { color: var(--ink); }
  .zchk b { color: var(--ink); }
  .zdoc__log span, .zdoc__tags, .zdoc__punch { opacity: 1; transform: none; }
  .zdoc__rail i { width: 100% !important; }
  .zoom__hint { display: none; }
}

/* =============================================================
   SCROLL-PIPELINE
   ============================================================= */
.flow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.flow__side { position: sticky; top: 120px; }

.flow__steps { position: relative; padding-left: 34px; }
.flow__steps::before {
  content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--rule);
}
.flow__fill {
  position: absolute; left: 4px; top: 10px; width: 1px; height: 0;
  background: var(--ink);
  transition: height .12s linear;
}

.stp { padding-block: clamp(26px, 3.4vw, 40px); position: relative; }
.stp::before {
  content: ''; position: absolute; left: -34px; top: calc(clamp(26px, 3.4vw, 40px) + 11px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rule);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.stp.is-on::before { background: var(--ink); border-color: var(--ink); transform: scale(1.25); }

.stp__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3); }
.stp h3 { margin: 10px 0 12px; transition: color .4s; }
.stp p { color: var(--ink-3); max-width: 56ch; transition: color .5s var(--ease); }
.stp.is-on p { color: var(--ink-2); }

/* =============================================================
   RECHNER — was der heutige Weg kostet
   ============================================================= */
.calc {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.calc__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--wash);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}

.calc__in {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid var(--rule-soft);
}

.calc__field { display: grid; gap: 12px; }
.calc__lab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.calc__lab b {
  font-family: var(--serif); font-size: 26px; letter-spacing: -.02em;
  color: var(--ink); font-weight: 400; text-transform: none;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1px; background: var(--rule-soft);
  outline: none; cursor: pointer; margin: 10px 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink); border: 0; cursor: grab;
  transition: transform .2s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink); border: 0; cursor: grab;
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--rule-soft); }

/* Annahmen */
.calc__assume {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.calc__assume label {
  background: var(--paper);
  padding: 16px clamp(16px, 2vw, 22px);
  display: grid; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.calc__assume input {
  border: 0; border-bottom: 1px solid var(--rule);
  background: none; padding: 4px 0;
  font-family: var(--serif); font-size: 21px; letter-spacing: -.02em;
  color: var(--ink); width: 100%;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease);
}
.calc__assume input:focus { outline: none; border-bottom-color: var(--ink); }

/* Ergebnis */
.calc__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-soft); }
.calc__card { background: var(--paper); padding: clamp(24px, 3vw, 34px); display: grid; align-content: start; gap: 10px; }
.calc__card--pick { background: var(--ink); color: var(--paper); }
.calc__card--pick .calc__note, .calc__card--pick .calc__sub { color: rgba(255,255,255,.62); }

.calc__who {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.calc__card--pick .calc__who { color: rgba(255,255,255,.62); }

.calc__big {
  font-family: var(--serif); font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.calc__sub { font-size: 14px; color: var(--ink-2); }
.calc__note { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

.calc__foot {
  padding: 14px 20px; background: var(--wash); border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 820px) {
  .calc__in { grid-template-columns: 1fr; }
  .calc__assume { grid-template-columns: 1fr; }
  .calc__out { grid-template-columns: 1fr; }
}

/* =============================================================
   REGEL-PROBE — Regeln umlegen, Ergebnis sofort sehen
   ============================================================= */
.probe {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--paper); box-shadow: var(--shadow-lg); overflow: hidden;
}
.probe__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--wash); border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.probe__bar b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.probe__body { display: grid; grid-template-columns: 290px 1fr; }

.probe__rules { border-right: 1px solid var(--rule-soft); padding: 10px 0; }
.probe__rule {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 13px 20px; cursor: pointer;
  font-size: 14px; color: var(--ink-2);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.probe__rule:hover { background: var(--wash); }
.probe__rule small {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
.probe__rule input { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  width: 32px; height: 18px; border-radius: 100px;
  background: var(--rule); position: relative;
  transition: background-color .3s var(--ease);
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper);
  transition: transform .3s var(--ease);
}
.probe__rule input:checked + .switch { background: var(--ink); }
.probe__rule input:checked + .switch::after { transform: translateX(14px); }
.probe__rule input:checked ~ span { color: var(--ink); }

.probe__list { padding: 6px 0; }
.probe__post {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--rule-soft);
  transition: opacity .35s var(--ease), background-color .35s var(--ease);
}
/* Ohne das erzwingt der laengste Beitragstext zusammen mit dem
   nicht umbrechenden Zustands-Etikett eine Mindestbreite, die auf dem
   Telefon breiter ist als das Panel — und .probe schneidet sie ab. */
.probe__post > div { min-width: 0; }
.probe__post:last-child { border-bottom: 0; }
.probe__post p { font-size: 14.5px; color: var(--ink); }
.probe__post small {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 4px;
}
.probe__state {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 100px;
  border: 1px solid var(--rule); color: var(--ink-3); white-space: nowrap;
  transition: all .3s var(--ease);
}
.probe__post.pass .probe__state { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.probe__post.fail { background: var(--wash); }
.probe__post.fail p { color: var(--ink-3); text-decoration: line-through; }

@media (max-width: 820px) {
  /* minmax(0, …), nicht 1fr: sonst zieht der laengste Beitragstext die
     einzige Spalte breiter als das Panel, und .probe schneidet ab. */
  .probe__body { grid-template-columns: minmax(0, 1fr); }
  .probe__rules { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .calc__big, .probe__post, .switch, .switch::after { transition: none !important; }
}

/* =============================================================
   FASSUNGEN — ein Thema, fuenf Kanaele, zum Durchklicken
   ============================================================= */
.voices {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.voices__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px; background: var(--wash);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.voices__next {
  background: none; border: 1px solid var(--rule); border-radius: 100px;
  padding: 6px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.voices__next:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }

.voices__topic {
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 34px) 0;
}
.voices__topic span {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: -.025em; line-height: 1.04; display: block;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.voices.is-turning .voices__topic span { opacity: 0; transform: translateY(-8px); }

/* Kanalreiter */
.voices__tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid var(--rule-soft);
}
.voices__tabs button {
  background: none; border: 1px solid var(--rule); border-radius: 100px;
  padding: 8px 16px; cursor: pointer;
  font-size: 13.5px; letter-spacing: -.01em; color: var(--ink-2);
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.voices__tabs button:hover { border-color: var(--ink); color: var(--ink); }
.voices__tabs button.on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.voices__tabs button:active { transform: translateY(1px); }

/* Der Beitrag */
.voices__body { padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 34px); min-height: 268px; }

.voices__meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 18px;
}
.voices__meta b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.voices__text {
  font-size: clamp(15px, 1.45vw, 17px); line-height: 1.58; color: var(--ink);
  min-height: 122px; max-width: 62ch;
  white-space: pre-wrap;   /* Absaetze im laengeren LinkedIn-Text erhalten */
}
.voices__text::after {
  content: ''; display: inline-block;
  width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: var(--ink); opacity: 0;
}
.voices.is-typing .voices__text::after { opacity: 1; animation: caret .9s steps(1) infinite; }

.voices__tags {
  margin-top: 14px; min-height: 22px;
  font-size: 13.5px; color: var(--ink-3);
  opacity: 0; transition: opacity .4s var(--ease);
}
.voices__tags.in { opacity: 1; }

.voices__foot {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.voices__foot b { color: var(--ink-2); font-weight: 400; }

@media (max-width: 640px) {
  .voices__tabs { gap: 6px; }
  .voices__tabs button { padding: 7px 13px; font-size: 12.5px; }
  .voices__body { min-height: 310px; }
  .voices__text { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .voices__topic span, .voices__tags, .voices__text::after { transition: none !important; animation: none !important; }
}

/* =============================================================
   PAKET-FINDER — vier Fragen, eine Empfehlung
   ============================================================= */
.finder {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--paper); box-shadow: var(--shadow-lg); overflow: hidden;
}

.finder__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; background: var(--wash);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.finder__bar b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.finder__stage { position: relative; display: grid; min-height: 264px; }

.finder__q, .finder__result {
  padding: clamp(26px, 3.2vw, 40px) clamp(20px, 2.6vw, 34px);
  position: relative; grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .45s var(--ease);
}
.finder__q.on, .finder__result.on {
  visibility: visible; opacity: 1; transform: none;
}
.finder [hidden] { display: none !important; }
.finder__opts button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.finder__frage {
  font-family: var(--serif); font-size: clamp(23px, 2.6vw, 34px);
  letter-spacing: -.022em; line-height: 1.08; margin: 0 0 26px; max-width: 22ch;
}

.finder__opts { display: flex; flex-wrap: wrap; gap: 9px; }
.finder__opts button {
  background: none; border: 1px solid var(--rule); border-radius: 100px;
  padding: 11px 20px; cursor: pointer;
  font-size: 14.5px; letter-spacing: -.01em; color: var(--ink-2);
  transition: border-color .22s var(--ease), color .22s var(--ease),
              background-color .22s var(--ease), transform .22s var(--ease);
}
.finder__opts button:hover { border-color: var(--ink); color: var(--ink); }
.finder__opts button:active { transform: translateY(1px); }

.finder__zurueck {
  margin-top: 24px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule); transition: color .2s, border-color .2s;
}
.finder__zurueck:hover { color: var(--ink); border-color: var(--ink); }

/* Ergebnis */
.finder__result { display: grid; align-content: center; }
.finder__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.finder__paket {
  font-family: var(--serif); font-size: clamp(38px, 5vw, 62px);
  line-height: 1; letter-spacing: -.03em;
}
.finder__preis {
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.02em; color: var(--ink-2); margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
.finder__warum { font-size: 15px; color: var(--ink-2); margin-top: 18px; max-width: 54ch; }
.finder__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.finder__foot { height: 3px; background: var(--rule-soft); }
.finder__foot i { display: block; height: 100%; width: 0; background: var(--ink);
                  transition: width .45s var(--ease); }

@media (max-width: 640px) {
  .finder__stage { min-height: 324px; }
  .finder__opts button { padding: 10px 16px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .finder__q, .finder__result, .finder__foot i { transition: none !important; }
}

/* =============================================================
   BAUKASTEN — Kanäle anklicken, Preis läuft live mit
   ============================================================= */
.build {
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--paper); box-shadow: var(--shadow-lg); overflow: hidden;
}

.build__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; background: var(--wash);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.build__bar b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.build__rows { display: flex; flex-direction: column; }

.build__row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color .25s var(--ease);
}
.build__row:last-child { border-bottom: 0; }
.build__row.on { background: var(--wash); }

.build__toggle {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 15px; letter-spacing: -.01em; color: var(--ink-2);
  flex: 1 1 140px; text-align: left;
  transition: color .25s var(--ease);
}
.build__row.on .build__toggle { color: var(--ink); }

.build__check {
  flex: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--rule); position: relative;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.build__check::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px;
  border: solid var(--paper); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .25s var(--ease) .05s;
}
.build__row.on .build__check { background: var(--ink); border-color: var(--ink); }
.build__row.on .build__check::after { transform: rotate(45deg) scale(1); }

.build__tier { display: flex; gap: 6px; flex: none; }
.build__tier button {
  background: none; border: 1px solid var(--rule); border-radius: 100px;
  padding: 6px 13px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.build__tier button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.build__row:not(.on) .build__tier { opacity: .35; pointer-events: none; }

.build__price {
  flex: none; width: 64px; text-align: right;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease);
}
.build__row.on .build__price { color: var(--ink); }

.build__out {
  padding: 18px 20px; background: var(--wash); border-top: 1px solid var(--rule-soft);
  display: grid; gap: 9px;
}
.build__calc {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--ink-2);
}
.build__calc b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.build__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--rule-soft);
}
.build__total span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.build__total b {
  font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -.025em; font-weight: 400; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.build__setup { font-size: 12.5px; color: var(--ink-3); margin-top: -2px; }

.build__foot { padding: 16px 20px; border-top: 1px solid var(--rule-soft); }
.build__foot a[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }

@media (max-width: 560px) {
  .build__row { padding: 14px 16px; }
  .build__toggle { flex-basis: 100%; }
  .build__tier { margin-left: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .build__row, .build__check, .build__check::after, .build__tier button, .build__price {
    transition: none !important;
  }
}

/* =============================================================
   KACHELN / LISTEN
   ============================================================= */
.tiles { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tile { background: var(--paper); padding: clamp(24px, 2.8vw, 36px); display: grid; gap: 11px; align-content: start; transition: background .35s var(--ease); }
.tile:hover { background: var(--wash); }
.tile__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3); }
.tile h3 { font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: -0.018em; margin: 0; }
.tile p { color: var(--ink-2); font-size: 15.5px; }

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 210px 1fr auto; gap: clamp(16px, 3vw, 40px);
  align-items: center; padding-block: 26px; border-bottom: 1px solid var(--rule);
  transition: padding-left .4s var(--ease);
}
.row:hover { padding-left: 10px; }
.row__t { font-family: var(--serif); font-size: 27px; letter-spacing: -0.02em; }
.row__t a { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.row:hover .row__t a { border-bottom-color: var(--ink); }
.row__d { color: var(--ink-2); font-size: 15.5px; }
.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: 100px; color: var(--ink-3); white-space: nowrap;
}
.pill--now { border-color: var(--ink); color: var(--ink); }

/* ---------- Zahlen ---------- */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.num { background: var(--paper); padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.num__v { font-family: var(--serif); font-size: clamp(40px, 5vw, 66px); line-height: 1; letter-spacing: -0.03em; }
.num__l { font-size: 14.5px; color: var(--ink-2); margin-top: 12px; max-width: 22ch; }

/* =============================================================
   PREISE
   ============================================================= */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.plan { background: var(--paper); padding: clamp(26px, 2.6vw, 34px); display: flex; flex-direction: column; transition: background .35s var(--ease); }
.plan:hover { background: var(--wash); }
.plan--pick { background: var(--ink); color: var(--paper); }
.plan--pick:hover { background: var(--ink); }
.plan--pick .plan__tag, .plan--pick .plan__for, .plan--pick .plan__note { color: rgba(255,255,255,.6); }
.plan--pick .plan__list li { color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.16); }
.plan--pick .plan__list li strong { color: #fff; }
.plan--pick .plan__price { border-color: rgba(255,255,255,.18); }
.plan--pick .plan__list { border-color: rgba(255,255,255,.18); }

.plan__tag { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); }
.plan__name { font-family: var(--serif); font-size: 34px; letter-spacing: -0.025em; margin: 14px 0 0; line-height: 1; }
.plan__for { font-size: 14.5px; color: var(--ink-2); margin-top: 12px; min-height: 66px; }
.plan__price { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; gap: 6px; }
.plan__amt { font-family: var(--serif); font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.plan__per { font-size: 13px; color: var(--ink-3); }
.plan__note { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; }
.plan .btn { margin-top: 22px; }
.plan--pick .btn--line { background: #fff; border-color: #fff; color: var(--ink); }
.plan--pick .btn--line:hover { background: #e8e8e6; border-color: #e8e8e6; }
.plan__list { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--rule); display: grid; }
.plan__list li { font-size: 14.5px; color: var(--ink-2); padding-block: 11px; border-bottom: 1px solid var(--rule-soft); }
.plan__list li:last-child { border-bottom: 0; }
.plan__list li strong { color: var(--ink); font-weight: 500; }
.plan__list li.off { color: var(--ink-3); }

.tbl-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; }
table.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
table.cmp th, table.cmp td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--rule-soft); }
table.cmp thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; background: var(--wash); }
table.cmp td { color: var(--ink-2); }
table.cmp td:first-child { color: var(--ink); }
table.cmp tbody tr:hover td { background: var(--wash); }
table.cmp tr:last-child td { border-bottom: 0; }
.na { color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 26px 44px 26px 0; position: relative;
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 1px;
  background: var(--ink); transition: transform .35s var(--ease);
}
.faq summary::before {
  content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 1px;
  background: var(--ink); transform: rotate(90deg); transition: transform .35s var(--ease);
}
.faq details[open] summary::before { transform: rotate(0deg); }
.faq details p { color: var(--ink-2); font-size: 16px; max-width: 76ch; padding: 0 44px 28px 0; }

/* ---------- Formular ---------- */
.form { display: grid; gap: 20px; max-width: 540px; }
.fld { display: grid; gap: 9px; }
.fld label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.fld input, .fld select, .fld textarea {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
  font-family: var(--sans); font-size: 16px; color: var(--ink); padding: 14px 15px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11,11,12,.05);
}
.fld textarea { resize: vertical; min-height: 140px; }

/* ---------- Fuss ---------- */
.foot { border-top: 1px solid var(--rule); padding-block: 60px 36px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 34px; }
.foot__brand .mark { font-size: 28px; display: inline-block; }
.foot__brand p { color: var(--ink-2); font-size: 15px; margin-top: 14px; max-width: 32ch; }
.foot h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin: 0 0 16px; }
.foot li { margin-bottom: 11px; }
.foot li a { font-size: 15px; color: var(--ink-2); transition: color .2s; }
.foot li a:hover { color: var(--ink); }
.foot__end { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); }

/* ---------- Seitenkopf Unterseiten ---------- */
.phead { padding: 152px 0 clamp(50px, 7vw, 90px); }
.phead h1 { max-width: 15ch; }
.phead .body-lg { margin-top: 26px; }

/* =============================================================
   EINBLENDEN BEIM SCROLLEN
   ============================================================= */
[data-in] { opacity: 0; transform: translateY(22px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
[data-in].is-in { opacity: 1; transform: none; }
[data-in][data-delay="1"] { transition-delay: .08s; }
[data-in][data-delay="2"] { transition-delay: .16s; }
[data-in][data-delay="3"] { transition-delay: .24s; }
[data-in].keep { opacity: 1; transform: none; }

/* =============================================================
   RESPONSIV
   ============================================================= */
@media (max-width: 1080px) {
  .flow { grid-template-columns: 1fr; }
  .flow__side { position: static; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .nums { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  .menu {
    position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 6px var(--gut) 22px; display: none;
    /* Im Querformat ist unter der Kopfzeile kaum Platz — ohne das
       reicht die Liste ueber den Schirm hinaus und laesst sich
       nicht erreichen. */
    max-height: calc(100dvh - 70px); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu.is-open { display: flex; }
  .menu a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); font-size: 17px; }
  .menu .btn { margin-top: 18px; }
  .burger { display: block; }

  .tiles--2, .tiles--3, .tiles--4 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .nums { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
  .plan__for { min-height: 0; }
}

/* =============================================================
   SEITLICH SCROLLBARE BEREICHE
   Vergleichstabellen und Sendeplan sind breiter als ein Telefon.
   Die weiche Kante zeigt, auf welcher Seite noch etwas liegt, und
   verschwindet dort, wo nichts mehr kommt — app.js setzt die
   Klassen beim Scrollen.
   ============================================================= */
.tbl-scroll, .sked__scroll {
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l),
                                      #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l),
                                      #000 calc(100% - var(--fade-r)), transparent 100%);
}
.tbl-scroll.can-left,  .sked__scroll.can-left  { --fade-l: 30px; }
.tbl-scroll.can-right, .sked__scroll.can-right { --fade-r: 30px; }

/* =============================================================
   FINGERBEDIENUNG
   An die Zeigerart gekoppelt, nicht an die Fensterbreite: ein
   Tablet wird getippt, ein schmales Fenster am Rechner geklickt.
   Zielgroesse rund 44 px — darunter trifft der Daumen daneben.
   ============================================================= */
@media (pointer: coarse) {
  .foot li { margin-bottom: 0; }
  .foot li a { display: block; padding-block: 11px; }

  .arrow { padding-top: 11px; padding-bottom: 9px; }
  .row__t a { display: inline-block; padding-block: 5px; }
  .mark { padding-block: 8px; }

  .voices__tabs button { padding-block: 12px; }
  .voices__next { padding-block: 11px; }
  /* Steht ein Verweis allein in seinem Absatz, ist er in Wahrheit eine
     Schaltflaeche — anders als ein Wort mitten im Fliesstext. */
  .tile p > a:only-child { display: inline-block; padding-block: 10px; }
  .build__toggle { padding-block: 11px; }
  .build__tier button { padding-block: 12px; }
  .finder__opts button { padding-block: 13px; }
  .finder__zurueck { padding-block: 12px; }
  .btn--sm { height: 46px; }

  /* Der Regler war eine Linie von einem Pixel Hoehe — als Trefferflaeche
     unbrauchbar. Die Linie bleibt, der greifbare Bereich waechst. */
  input[type="range"] { height: 26px; background: transparent; }
  input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--rule-soft); }
  input[type="range"]::-webkit-slider-thumb { margin-top: -7px; }
  input[type="range"]::-moz-range-track { height: 1px; background: var(--rule-soft); }
}

/* =============================================================
   TELEFON
   Lesegroessen, Abstaende und die Stellen, an denen zwei Spalten
   auf einem Telefon keine zwei Spalten mehr sein duerfen.
   ============================================================= */
@media (max-width: 560px) {
  /* Unter 11 px werden die Mono-Etiketten geraten statt gelesen. */
  .console__bar, .console__foot, .sked__bar, .sked__foot, .calc__bar,
  .probe__bar, .voices__bar, .build__bar, .finder__bar, .zdoc__bar {
    font-size: 11px; letter-spacing: .1em;
  }
  .bay__n, .bay__t, .bay__wait, .prompt, .gen__note, .meter,
  .chk b, .tgt b, .sked__corner, .sked__day, .sked__rules span,
  .calc__foot, .calc__who, .calc__assume label, .voices__meta, .voices__foot,
  .build__tier button, .build__total span, .finder__label, .finder__zurueck,
  .plan__tag, .tile__n, .pill, .stp__n, .kicker, .fld label, .foot h4,
  .voices__next, .calc__lab, .zoom__hint {
    font-size: 11px;
  }
  .probe__rule small, .probe__post small, .probe__state,
  .sked__ch small, .probe__bar { font-size: 10.5px; }

  /* Text und Zustand nebeneinander lassen auf 375 px keinem von beiden
     Platz — der Zustand setzt sich unter den Beitrag. */
  .probe__post { grid-template-columns: 1fr; gap: 9px; }
  .probe__state { justify-self: start; }

  /* Weniger Rand je Zelle heisst mehr Tabelle je Bildschirm. */
  table.cmp { min-width: 580px; font-size: 14px; }
  table.cmp th, table.cmp td { padding: 13px 14px; }
  table.cmp thead th { font-size: 11px; letter-spacing: .08em; }

  /* 152 px Anlauf sind auf einem Telefon eine halbe Bildschirmhoehe. */
  .phead { padding-top: 112px; }
  .faq summary { padding-right: 38px; font-size: 20px; }
  .faq details p { padding-right: 8px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-in] { opacity: 1 !important; transform: none !important; }
}