/* ── Setlist ── Backline.
   Kein Neon: ein Roehrenamp glimmt, er strahlt nicht. Bernstein liegt auf
   Zahlen, Kanten und dem, was gerade dran ist — Flaechen bleiben matt und
   dunkel. Stahlblau traegt alles Zweitrangige: Rad, Jam, Nebenzahlen.
   Harte Rechtecke mit 2 px, keine abgeschnittenen Ecken — Road-Case,
   kein HUD.                                                               */

@font-face{
  font-family:'Oswald';
  /* Variabel, 400-700, nur Latin. Liegt im Repo statt bei Google:
     die App muss offline genauso aussehen wie online.                     */
  src:url('../assets/fonts/oswald-latin-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* Flightcase: Anton fuers Tageswort, Permanent Marker fuer die Edding-
   Schrift auf dem Gaffa. Beide nur Latin, beide im Repo (Lizenzen daneben). */
@font-face{
  font-family:'Anton';
  src:url('../assets/fonts/anton-latin-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Permanent Marker';
  src:url('../assets/fonts/permanent-marker-latin-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg:#0c0c0e; --bg2:#101014;
  --panel:#17161b; --panel2:#1e1c22;
  /* --dim traegt fast allen erklaerenden Text und stand auf #57535c: das
     sind 2,4:1 auf --panel, weit unter den 4,5:1, die kleine Schrift
     braucht. Jetzt 4,95:1 — und immer noch deutlich leiser als --muted
     (7,3:1), damit die Abstufung fg > muted > dim erhalten bleibt. */
  --fg:#f2f0ec; --muted:#a7a3ab; --dim:#8a848e;
  --line:#3a373f;

  --akzent:#e8a23d; --stahl:#6f93ad; --gruen:#7fa65c; --rost:#c8763f; --rot:#d2564e;

  --display:'Oswald',"Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Flightcase: Gaffa fuer die Ueberschriften, Metall fuer die Ecken */
  --tape:#e6dfcd; --corner:#57535c; --corner-hi:#a39fa8;
  --case-shadow:0 10px 22px rgba(0,0,0,.42);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  color-scheme:dark;

  /* Frueher Leuchtkanten. Jetzt Tiefe: Schatten nach unten, Glut nur als
     schwache Waerme hinter der Kopfzeile.                                 */
  --gt-akzent:none;
  --gt-stahl:none;
  --gb-akzent-stark:none;
  --gb-akzent:none;
  --gi-akzent:none;
  --gi-akzent-stark:none;
  --gi-gruen:none;
  --gb-leiste-akzent:0 -12px 34px rgba(0,0,0,.72);
  --gb-leiste-stahl:0 -12px 34px rgba(0,0,0,.72);
  --gb-fokus:0 0 0 2px rgba(232,162,61,.32);
  --gb-dialog:0 26px 64px rgba(0,0,0,.72);
  --gb-punkt-gruen:none;
  --gb-punkt-rot:none;
  --raster:rgba(255,255,255,.018);
  --scan:0;
  --halo:rgba(232,162,61,.05);
  --sunken:#0a090c;
  --leiste:linear-gradient(180deg,#16151a,#0c0c0e);
  --backdrop:rgba(8,8,10,.86);
  --tint-akzent:rgba(232,162,61,.10);
  --tint-akzent-stark:rgba(232,162,61,.22);
  --tint-gruen:rgba(127,166,92,.16);
  --tint-rost:rgba(200,118,63,.16);
  --tint-stahl:rgba(111,147,173,.06);
  --tint-invers:rgba(255,255,255,.2);
  --clip:none;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Muss vor allen Layoutregeln stehen: sonst sticht ein display:flex
   das hidden-Attribut aus und Elemente tauchen ungefragt auf. */
[hidden]{display:none!important}
/* ── Schriftgroesse ──────────────────────────────────────────
   Alle Schriftgroessen stehen in rem, damit sie an einer Stelle
   mitwachsen. Bei "normal" ist 1rem = 16px — die Darstellung ist damit
   pixelgleich zu der Zeit, als hier ueberall px stand.

   Gesetzt wird das Attribut in js/boot.js, vor dem ersten Bild. Wuerde es
   erst die App setzen, saehe man die Seite einmal in falscher Groesse
   aufblitzen.                                                            */
html{font-size:16px}
html[data-schrift="gross"]{font-size:17.6px}
html[data-schrift="sehr"]{font-size:19.2px}
html,body{margin:0;padding:0}
/* iPhone: Felder unter 16px loesen beim Antippen einen Zoom aus, der nicht
   zurueckspringt. Auswahllisten stehen sonst auf der Browservorgabe (~13px);
   auf Touch-Geraeten bekommt jedes Feld mindestens 16px. Ohne !important,
   damit groessere Felder und "Sehr gross" bleiben, wie sie sind. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
select{font-size:1rem;font-family:inherit}
@media (pointer:coarse){ input,textarea,select{font-size:max(16px,1rem)} }
body{
  background:var(--bg); color:var(--fg);
  font:1rem/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  background-image:
    radial-gradient(1000px 500px at 50% -10%, var(--halo), transparent 70%),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size:100% 100%, 44px 44px, 44px 44px;
  background-attachment:fixed;
}
/* Scanlines. Statisch — eine Animation, die im Satz flimmert, waere Selbstzweck. */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  opacity:var(--scan);
}
.view{max-width:640px;margin:0 auto;min-height:100vh;position:relative;z-index:1}
.pad{padding:0 16px 28px}

/* ── Typografie ───────────────────────────────────────────── */
h1{
  font-size:1.5625rem;margin:0;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  font-family:var(--display);line-height:1.05;
}
h1 .glow{color:var(--akzent)}
/* Der Pixel-Schriftzug (tools/pixel.mjs): doppelt gross, scharf, nie weich. */
h1.mit-logo{display:flex;align-items:center;gap:.4em;flex:0 0 auto}
#view-home .head h1.mit-logo{flex:1 0 auto}
h1 .logo{flex:none;width:110px;height:28px;image-rendering:pixelated}
/* Ueberschriften als Streifen Gaffa mit Edding drauf: leicht schief
   geklebt, die Enden gerissen. Die Tinte ist auf beiden Themen dunkel. */
h2{
  font-family:'Permanent Marker',var(--display);font-weight:400;font-size:1.0625rem;line-height:1.25;
  letter-spacing:.03em;text-transform:uppercase;color:var(--bg);
  display:flex;align-items:baseline;gap:8px;width:fit-content;max-width:100%;
  margin:30px 0 14px;padding:5px 16px 4px 14px;background:var(--tape);
  transform:rotate(-.8deg);overflow-wrap:anywhere;
  clip-path:polygon(0 8%,3% 0,97% 4%,100% 0,99% 52%,100% 100%,96% 94%,4% 100%,0 92%,1% 46%);
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}
h2:nth-of-type(even){transform:rotate(.6deg)}
:root[data-theme="light"] h2{color:var(--fg)}
.lead{color:var(--muted);margin:14px 0;font-size:0.9375rem}
.fine{color:var(--dim);font-size:0.78125rem;margin-top:14px;line-height:1.6}
.steps{color:var(--muted);font-size:0.875rem;padding-left:20px}
.steps li{margin:9px 0}
.steps b{color:var(--fg)}
code{background:var(--sunken);color:var(--akzent);padding:2px 6px;border-radius:3px;font-size:0.8125rem;font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.head{
  display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 16px) 16px 14px;
  position:sticky;top:0;z-index:6;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.head h1{flex:1}
.icon-btn{
  background:transparent;border:1px solid var(--line);color:var(--akzent);
  font-size:1.125rem;line-height:1;width:44px;height:44px;cursor:pointer;
  border-radius:2px;
}
.icon-btn:active{background:var(--tint-akzent)}
.icon-btn.text{width:auto;padding:0 12px;font-size:0.6875rem;letter-spacing:.1em;font-family:var(--mono)}
.icon-btn.platte{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0}
.icon-btn.platte svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.icon-btn.platte svg .mitte{fill:currentColor;stroke:none}

/* ── Flaechen ─────────────────────────────────────────────── */
.card{
  background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:2px;padding:18px;position:relative;
}
.card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--akzent);
}
.today{margin-top:18px}
.kicker{
  font-size:0.65625rem;color:var(--muted);text-transform:uppercase;letter-spacing:.22em;
  font-weight:700;font-family:var(--mono);
}
.name{
  font-size:2.375rem;font-weight:600;margin:4px 0 4px;letter-spacing:.01em;
  font-family:var(--display);color:var(--fg);text-transform:uppercase;line-height:1.05;
}
.name.neon{color:var(--akzent)}
.card ul{list-style:none;padding:0;margin:14px 0 4px}
.card li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.card li span:last-child{font-family:var(--mono);font-weight:700;color:var(--akzent);white-space:nowrap}

/* ── Ansage des Tages ─────────────────────────────────────── */
.directive{margin-top:16px;border-left:3px solid var(--akzent);background:var(--panel);padding:14px 16px}
.directive .tone{
  display:inline-block;font-family:var(--mono);font-size:0.65625rem;letter-spacing:.2em;
  padding:3px 9px;border:1px solid currentColor;margin-bottom:9px;
}
/* Technik ist kuehl und analytisch, hart ist heiss. Nach der Umstellung
   lagen die Farben genau andersherum.                                    */
.tone.technik{color:var(--stahl)} .tone.normal{color:var(--gruen)}
.tone.hart{color:var(--rost)}
.directive .txt{font-size:0.90625rem;color:var(--fg);margin:0}
.spruch{
  margin:14px 0 0;padding:14px 16px;border:1px dashed var(--line);
  color:var(--fg);font-size:0.9375rem;line-height:1.55;font-style:italic;background:var(--tint-stahl);
}
.spruch::before{content:'> ';color:var(--stahl);font-style:normal;font-family:var(--mono)}

/* ── Fortschrittsbalken ───────────────────────────────────── */
.prog{margin:10px 0 0}
.prog .row{display:flex;justify-content:space-between;font-size:0.78125rem;color:var(--muted);margin-bottom:5px}
.prog .row b{color:var(--fg);font-family:var(--mono)}
.bar{height:7px;background:var(--sunken);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--akzent),var(--stahl));box-shadow:var(--gb-akzent)}
.bar.gruen i{background:linear-gradient(90deg,var(--gruen),var(--akzent))}

/* ── Woche ────────────────────────────────────────────────── */
.woche-karte{background:var(--panel);border:1px solid var(--line);border-radius:2px}
.week{display:flex;flex-direction:column}
.tag{border-top:1px solid var(--line)}
.tag, .tag > summary{display:flex;gap:14px;align-items:baseline;padding:12px 15px 12px 12px;border-left:3px solid transparent}
details.tag{display:block;padding:0}
.tag > summary{cursor:pointer;list-style:none}
.tag > summary::-webkit-details-marker{display:none}
.tag > summary::after{content:'▸';margin-left:auto;color:var(--dim);font-size:0.75rem}
details.tag[open] > summary::after{content:'▾'}
.tag.heute, details.tag.heute > summary{border-left-color:var(--akzent);background:var(--tint-akzent)}
details.tag.heute{border-left:0;background:none}
.tag.erledigt{opacity:.45}
.tag .day{font-weight:800;width:32px;flex:none;font-family:var(--mono);color:var(--muted);font-size:0.8125rem;letter-spacing:.08em}
.tag.heute .day{color:var(--akzent)}
.tag .what{flex:1}
.tag .detail{display:block;color:var(--muted);font-size:0.8125rem;margin-top:2px}
.tag-info{padding:0 15px 14px 61px;font-size:0.875rem;color:var(--muted)}
.tag-info p{margin:0 0 8px}
.ride-done{color:var(--gruen);font-family:var(--mono);font-size:0.78125rem}

/* ── Gewichte ─────────────────────────────────────────────── */
/* Home: eine Liste in einer Karte. Der Strich unter einem Lift zeigt den
   Weg zurueck zur Referenz und verschwindet, sobald er gegangen ist.     */
.gewichte{background:var(--panel);border:1px solid var(--line);border-radius:2px}
.reunion-kopf{padding:13px 15px 12px;border-bottom:1px solid var(--line)}
.rk-zeile{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.rk-p{font-family:var(--display);font-weight:600;font-size:1.375rem;color:var(--gruen)}
.gw{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:baseline;padding:11px 15px;border-top:1px solid var(--line)}
.gw:first-child, .reunion-kopf + .gw{border-top:0}
.gn{color:var(--fg)}
.go{font-family:var(--mono);font-size:0.71875rem;color:var(--rost)}
/* Satzschema nach 5x5 (3×5, 3×3) — nur wenn es vom eigenen abweicht. */
.gsch{font-family:var(--mono);font-size:0.71875rem;color:var(--stahl);letter-spacing:.06em;white-space:nowrap}
.gv{grid-column:3;font-family:var(--mono);font-weight:700;color:var(--akzent);white-space:nowrap;text-align:right}
.gs{grid-column:1 / -1;display:block;height:3px;background:var(--sunken)}
.gs i{display:block;height:100%;background:var(--gruen);opacity:.75}
/* Max-Out: die Lift- und Pruefwert-Auswahl bleibt ein Kachelraster. */
.weights{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.w{
  background:var(--panel);border:1px solid var(--line);padding:12px 14px;
  border-radius:2px;
}
.w .n{font-size:0.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;font-family:var(--mono)}
.w .v{font-size:1.6875rem;font-weight:600;font-family:var(--display);color:var(--fg);margin-top:2px;font-variant-numeric:tabular-nums}
.w .f{font-size:0.71875rem;color:var(--rost);font-family:var(--mono);margin-top:2px}
.w .mini{height:4px;background:var(--sunken);margin-top:8px;border:1px solid var(--line)}
.w .mini i{display:block;height:100%;background:var(--akzent);opacity:.8}

/* ── Aufklappbares Wissen ─────────────────────────────────── */
details.info{border:1px solid var(--line);background:var(--panel);margin-top:10px}
details.info>summary{
  cursor:pointer;padding:12px 15px;font-family:var(--mono);font-size:0.71875rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--stahl);list-style:none;
}
details.info>summary::-webkit-details-marker{display:none}
details.info>summary::after{content:' ▸';color:var(--dim)}
details.info[open]>summary::after{content:' ▾'}
.info .body{padding:0 15px 15px;font-size:0.875rem;color:var(--muted);line-height:1.6}
.info .body p{margin:0 0 10px}
.info .body b{color:var(--fg)}
.info .body .tagline{color:var(--fg)}
.kv{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:0.84375rem}
.kv .k{font-family:var(--mono);color:var(--stahl);flex:none;min-width:74px;font-size:0.75rem;letter-spacing:.06em}
.kv .v{color:var(--muted)}
.kv.check{cursor:pointer;align-items:flex-start}
.kv.check input{flex:none;width:auto;margin:3px 0 0}
.kv.check.erledigt .k,.kv.check.erledigt .v{color:var(--dim);text-decoration:line-through}
.kv.check.erledigt .v b{color:var(--dim)}

/* ── Session ──────────────────────────────────────────────── */
.lift{margin-top:20px}
.lift .bar-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.lift .ln{font-size:0.8125rem;font-weight:700;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lift .lw{font-size:1.875rem;font-weight:600;font-family:var(--display);color:var(--akzent);letter-spacing:.01em}
.lift .cue{font-size:0.8125rem;color:var(--muted);margin:0 0 11px;border-left:2px solid var(--line);padding-left:10px}
.sets{display:flex;gap:9px;flex-wrap:wrap}
.set{
  flex:1 1 0;min-width:56px;height:66px;border:1px solid var(--line);background:var(--sunken);
  color:var(--dim);font-size:1.5rem;font-weight:600;font-family:var(--display);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:2px;
  transition:transform .07s;
}
.set:active{transform:scale(.94)}
.set.done{background:var(--tint-gruen);border-color:var(--gruen);color:var(--gruen);box-shadow:var(--gi-gruen)}
.set.partial{background:var(--tint-rost);border-color:var(--rost);color:var(--rost)}

.rest{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--leiste);border-top:1px solid var(--akzent);
  box-shadow:var(--gb-leiste-akzent);
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px calc(15px + env(safe-area-inset-bottom));
}
.rest .lbl{font-family:var(--mono);font-size:0.65625rem;letter-spacing:.22em;color:var(--muted);display:block}
.rest .t{font-size:2.125rem;font-weight:600;font-family:var(--display);color:var(--akzent);font-variant-numeric:tabular-nums}
.rest button{background:transparent;border:1px solid var(--akzent);color:var(--akzent);font-family:var(--mono);font-size:0.8125rem;letter-spacing:.14em;padding:11px 18px;cursor:pointer}

/* Warm-up-Timer: sitzt im Soundcheck ueber der Checkliste */
.wu-timer{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 12px}
.wu-timer .t{flex:1;min-width:5ch;font-size:1.75rem;font-weight:600;font-family:var(--display);color:var(--akzent);font-variant-numeric:tabular-nums}
.kv.check.halt{flex-wrap:wrap}
.kv.check.halt .v{flex:1 1 0;min-width:0}
.kv.check.halt::after{content:"";flex-basis:100%;height:0;order:1}
.wu-halt{order:2;margin:2px 0 4px 26px;background:transparent;border:1px solid var(--akzent);color:var(--akzent);font-family:var(--mono);font-size:0.75rem;letter-spacing:.12em;padding:8px 14px;cursor:pointer;white-space:nowrap}
.wu-timer button{background:transparent;border:1px solid var(--akzent);color:var(--akzent);font-family:var(--mono);font-size:0.8125rem;letter-spacing:.14em;padding:11px 18px;min-height:44px;cursor:pointer;white-space:nowrap}

/* ── Knoepfe ──────────────────────────────────────────────── */
.btn{
  width:100%;padding:17px;font-size:0.875rem;font-weight:800;border:1px solid var(--akzent);
  cursor:pointer;margin-top:14px;background:var(--tint-akzent);color:var(--akzent);
  font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;
  border-radius:2px;
}
.btn:active:not(:disabled){background:var(--tint-akzent-stark)}
.btn:disabled{opacity:.3;border-color:var(--line);color:var(--dim);background:transparent}
.btn.ghost{border-color:var(--line);color:var(--muted);background:transparent}
.btn.ghost.danger{border-color:rgba(255,77,94,.4);color:var(--rot)}

input[type=password],input[type=text],input[type=number],textarea{
  width:100%;padding:15px;font-size:1rem;border:1px solid var(--line);
  background:var(--sunken);color:var(--fg);margin:12px 0;font-family:var(--mono);
}
textarea{resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:none;border-color:var(--akzent);box-shadow:var(--gb-fokus)}

.banner{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:calc(env(safe-area-inset-top) + 11px) 16px 11px;
  background:#0b1119;border-bottom:1px solid var(--rost);color:var(--rost);
  font-size:0.8125rem;font-weight:700;text-align:center;font-family:var(--mono);letter-spacing:.06em;
}
.banner.err{border-color:var(--rot);color:var(--rot)}
body.has-banner .head{padding-top:calc(env(safe-area-inset-top) + 62px)}
.banner.ok{border-color:var(--gruen);color:var(--gruen)}

dialog{
  border:1px solid var(--akzent);background:var(--panel);color:var(--fg);padding:22px;
  box-shadow:var(--gb-dialog);max-width:320px;
}
dialog::backdrop{background:var(--backdrop)}
/* Die Pausenkarte ist breiter als die Auswahldialoge: sie traegt eine
   Tabelle und zwei Saetze Begruendung, und die muessen lesbar bleiben. */
#pause-dialog, #schema-dialog{max-width:min(380px,calc(100vw - 32px))}
#pause-title, #schema-title{margin:0 0 12px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--akzent);text-align:center}
.pause-kopf{margin:0 0 6px;font-size:1rem;color:var(--fg)}
.pause-vorschlag{margin:10px 0 6px;font-family:var(--display);font-size:1.375rem;color:var(--akzent)}
.pause-liste{margin:4px 0 10px}
.pause-knoepfe{display:grid;gap:8px;margin-top:14px}
.pause-knoepfe .btn{margin:0}
.platten.rueck{margin-top:-6px;color:var(--stahl)}

#picker-title,#ort-picker-title{margin:0 0 16px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent);text-align:center}
.picker-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.picker-opts button{
  padding:19px 0;font-size:1.5rem;font-weight:600;font-family:var(--display);
  border:1px solid var(--line);background:var(--sunken);color:var(--fg);cursor:pointer;
}
.picker-opts button:active{border-color:var(--akzent);color:var(--akzent)}

.hist{background:var(--panel);border:1px solid var(--line);padding:13px 15px;margin-bottom:8px}
.hist .d{font-weight:700;font-family:var(--mono);font-size:0.8125rem;color:var(--akzent);letter-spacing:.08em}
.hist .l{color:var(--muted);font-size:0.8125rem;margin-top:4px}

.opt{font-size:0.625rem;background:var(--sunken);color:var(--akzent);padding:3px 8px;margin-left:8px;letter-spacing:.14em;border:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} body::after{display:none} }

/* ── Aktionsleiste ────────────────────────────────────────── */
.actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.actions .btn{margin-top:0;flex:1 1 calc(50% - 5px)}
.btn.small{min-height:44px;padding:13px 8px;font-size:0.6875rem;letter-spacing:.14em}

/* ── Zufalls-WOD ──────────────────────────────────────────── */
.wod-format{font-size:1.875rem;font-weight:600;font-family:var(--display);color:var(--stahl);margin:4px 0 6px;text-transform:uppercase;letter-spacing:.02em}
.wod-teil{border-top:1px solid var(--line);padding:12px 0;display:flex;gap:13px;align-items:baseline}
.wod-teil .menge{font-family:var(--mono);font-weight:800;color:var(--akzent);min-width:74px;flex:none;font-size:1.0625rem}
.wod-teil .bez{flex:1}
.wod-teil .bez b{display:block;font-size:1rem;color:var(--fg);font-weight:600}
.wod-teil .bez .c{display:block;color:var(--muted);font-size:0.78125rem;margin-top:3px}
.wod-teil .last{font-family:var(--mono);color:var(--rost);font-size:0.8125rem}
#stopwatch{border-top-color:var(--stahl);box-shadow:var(--gb-leiste-stahl)}
#stopwatch .t{color:var(--stahl);text-shadow:var(--gt-stahl)}
#stopwatch button{border-color:var(--stahl);color:var(--stahl)}

/* ── Historie ─────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.stat{background:var(--panel);border:1px solid var(--line);padding:12px 14px;
  border-radius:2px;}
.stat .n{font-size:0.65625rem;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;font-family:var(--mono)}
.stat .v{font-size:1.75rem;font-weight:600;font-family:var(--display);color:var(--akzent);margin-top:2px;font-variant-numeric:tabular-nums}
.stat .s{font-size:0.71875rem;color:var(--dim);font-family:var(--mono)}
.chart{background:var(--panel);border:1px solid var(--line);padding:14px;margin-bottom:9px}
.chart .h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.chart .h .t{font-family:var(--mono);font-size:0.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chart .h .r{font-family:var(--mono);font-size:0.8125rem;color:var(--akzent);font-weight:700}
.chart svg{display:block;width:100%;height:60px;overflow:visible}
.hist.wod{border-left:2px solid var(--stahl)}
.hist.wod .d{color:var(--stahl)}

/* ── Verbindungsstatus ────────────────────────────────────── */
.conn{background:var(--panel);border:1px solid var(--line);padding:12px 14px;margin-bottom:8px;
  display:flex;gap:11px;align-items:flex-start;
  border-radius:2px;}
.conn .dot{width:9px;height:9px;flex:none;margin-top:6px;border-radius:50%}
.conn .dot.ok{background:var(--gruen);box-shadow:var(--gb-punkt-gruen)}
.conn .dot.aus{background:var(--dim)}
.conn .dot.fehler{background:var(--rot);box-shadow:var(--gb-punkt-rot)}
.conn .b{flex:1}
.conn .b .n{display:block;font-family:var(--mono);font-size:0.71875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg)}
.conn .b .s{display:block;color:var(--muted);font-size:0.8125rem;margin-top:3px}

/* ── Pausenuhr mit Feinjustierung ─────────────────────────── */
.rest .mitte{flex:1;text-align:center}
.rest .tick{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:0.875rem;padding:12px 10px;min-width:56px;cursor:pointer;
}
.rest .tick:active{border-color:var(--akzent);color:var(--akzent)}
.rest{gap:9px}
.rest button{white-space:nowrap}

/* ── Gewicht im Satz nachjustieren ────────────────────────── */
.wadj{display:flex;align-items:center;gap:8px}
.wadj button{
  width:44px;height:44px;flex:none;background:transparent;border:1px solid var(--line);
  color:var(--muted);font-family:var(--mono);font-size:1.0625rem;line-height:1;cursor:pointer;
}
.wadj button:active{border-color:var(--akzent);color:var(--akzent)}
.lift .cue.geaendert{border-left-color:var(--rost);color:var(--rost)}

/* ── Max-Out ──────────────────────────────────────────────── */
.mo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mo-grid label{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mo-grid input{margin:6px 0 0}
.w.gewaehlt{border-color:var(--akzent);background:var(--tint-akzent)}
.w.waehlbar{cursor:pointer}

/* ── Bestwerte ────────────────────────────────────────────── */
.pr{background:var(--panel);border:1px solid var(--line);padding:12px 14px;margin-bottom:8px;
  border-radius:2px;font-size:0.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.pr .reihe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin-top:6px;font-size:0.8125rem}
.pr .reihe .l{color:var(--muted)}
.pr .reihe .v{font-family:var(--mono);color:var(--akzent);font-weight:700;
  margin-left:auto;text-align:right;overflow-wrap:break-word}
.pr .reihe .v small{color:var(--dim);font-weight:400;margin-left:5px}

/* ── Analyse: Verhaeltnisse, Hochrechnung, Plateaus ───────── */
/* Baut auf .pr auf: dieselbe Karte, nur mit einer zweiten Zeile fuer die
   Zahlen. Die Diagnose steht bewusst darueber und traegt eine farbige
   Kante — sie ist die Aussage, die Paare darunter sind die Begruendung. */
.verh{background:var(--panel);border:1px solid var(--line);padding:10px 14px;margin-bottom:6px;border-radius:2px}
.verh .vk{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.verh .vn{font-size:0.78125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.verh .vd{font-family:var(--mono);font-weight:700;font-size:0.875rem;white-space:nowrap}
.verh .vz{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:4px;
  font-family:var(--mono);font-size:1rem;color:var(--akzent);font-weight:700}
.verh .vz .vs{color:var(--muted);font-weight:400;font-size:0.8125rem}
.verh .vz .vq{color:var(--dim);font-weight:400;font-size:0.65625rem;letter-spacing:.14em;
  text-transform:uppercase;margin-left:auto}
.verh .fine{margin:4px 0 0}

.diagnose{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--rost);
  padding:12px 14px;margin-bottom:10px;border-radius:2px}
.diagnose.vor{border-left-color:var(--stahl)}
.diagnose .dl{margin:6px 0 0;color:var(--fg);font-size:0.9375rem;line-height:1.5}
.diagnose .dn{margin:8px 0 0;color:var(--muted);font-size:0.84375rem;line-height:1.6}
.diagnose .dz{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.diagnose .btn{margin-top:10px}

/* .pr setzt Versalien — richtig fuer kurze Label, falsch fuer ganze
   Saetze: "STEHT GERADE. KEINE HOCHRECHNUNG" schreit, statt zu sagen. */
.hoch-text{margin:2px 0 10px;font-size:0.8125rem;line-height:1.5;color:var(--muted);
  text-transform:none;letter-spacing:normal}
.hoch-text:last-child{margin-bottom:0}
/* Kleiner Textknopf in einer Zeile: "Zurück auf 5×5". */
/* Ueber Setlist (Backstage) und die Fusszeile im Setup: Text in --muted,
   Links in Akzentfarbe und unterstrichen — erkennbar, ohne zu laermen. */
.ueber p{margin:0 0 10px;font-size:0.875rem;line-height:1.6;color:var(--muted)}
.ueber p:last-child{margin-bottom:0}
.ueber a, .fuss a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.fuss{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:0.8125rem;line-height:1.7;color:var(--muted);text-align:center}
.link{display:inline-block;margin-left:6px;padding:4px 0;background:none;border:0;color:var(--akzent);
  font:inherit;font-size:0.8125rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Zeile und Kurve als eine Einheit. Hat eine Uebung zu wenige Punkte fuer
   eine Kurve, sah die naechste sonst aus, als gehoere sie zur vorigen. */
.relz{padding-bottom:6px}
.relz + .relz{border-top:1px solid var(--line);padding-top:4px}
.spark{margin:2px 0 4px;line-height:0}
.spark svg{max-width:100%;height:auto}

/* ── Scheiben und Form ────────────────────────────────────── */
.platten{font-family:var(--mono);font-size:0.78125rem;color:var(--muted);margin:2px 0 10px;letter-spacing:.04em}
.platten b{color:var(--akzent)}
.platten.nicht{color:var(--rost)}
/* Die Alternative fuehrt nicht, sie steht daneben: leiser gesetzt, damit
   auf einen Blick klar bleibt, was der Plan ist und was das Ausweichen. */
.platten.alt{margin-top:-6px;color:var(--dim)}
.platten.alt b{color:var(--muted);font-weight:400}
.formzeile{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);display:block}
.formzeile .fw{font-family:var(--mono);font-weight:800;font-size:0.8125rem;letter-spacing:.1em;display:block}
.formzeile .ft{display:block;font-size:0.84375rem;color:var(--fg);margin-top:3px}
.formzeile .fd{display:block;font-family:var(--mono);font-size:0.6875rem;color:var(--dim);margin-top:4px;letter-spacing:.06em}
.schalter{display:flex;gap:9px;align-items:center;margin-top:10px;font-size:0.8125rem;color:var(--muted);cursor:pointer}
.schalter input{width:auto;margin:0}

/* ── Mehr als das Ziel ────────────────────────────────────── */
.set.plus{background:var(--tint-akzent-stark);border-color:var(--akzent);color:var(--akzent);
  box-shadow:var(--gi-akzent-stark)}
.picker-opts button.ziel{border-color:var(--gruen);color:var(--gruen)}
.picker-opts button.mehr{border-color:rgba(0,229,255,.35);color:var(--akzent)}
#picker{max-width:340px}
.picker-opts{grid-template-columns:repeat(4,1fr)}

/* ── Radfahrten ───────────────────────────────────────────── */
.radbar{background:var(--panel);border:1px solid var(--line);padding:14px;margin-bottom:9px}
.radbar svg{display:block;width:100%;height:64px;overflow:visible}
.radbar .h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.radbar .h .t{font-family:var(--mono);font-size:0.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.radbar .h .r{font-family:var(--mono);font-size:0.8125rem;color:var(--stahl);font-weight:700}
/* Korrekturblock. Setzt sich vom Erklaertext ab, weil er eine Aufforderung
   ist und keine Erlaeuterung — aber ohne Alarmfarbe: ein Fehlversuch ist
   Information, kein Fehler. */
.korrektur{margin-top:10px;padding:10px 12px;background:var(--sunken);
  border-left:2px solid var(--rost)}
.korrektur .kh{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rost);margin:0 0 6px}
.korrektur .kw{font-size:0.8125rem;color:var(--muted);margin:0 0 8px;line-height:1.5}
.korrektur .ks{font-size:0.8125rem;line-height:1.55;margin:0 0 10px;padding:8px 10px;
  background:var(--tint-rost);border:1px solid var(--line)}
.korrektur .ks b{color:var(--rost);font-family:var(--mono);font-size:0.6875rem;
  letter-spacing:.12em;text-transform:uppercase;margin-right:6px}
.korrektur .kn{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0 0 4px}
.korrektur .kv{margin:3px 0}
p.quelle{margin-top:10px;color:var(--dim);font-style:italic;line-height:1.5}

/* Intensität je Fahrt. Der Balken ist das Ist, das eingelegte Band die
   geplante Zone — nebeneinander sieht man sofort, ob die Fahrt daneben lag.
   Farben ausschließlich über Variablen, sonst bricht die helle Fassung. */
.isbars{display:flex;gap:4px;align-items:flex-end;height:88px;
  background:var(--sunken);border:1px solid var(--line);padding:5px}
.isbar{position:relative;flex:1;height:100%;display:flex;align-items:flex-end}
.isbar .fill{display:block;width:100%;opacity:.9}
/* Ohne Plan gibt es nichts zu beurteilen. Der Balken bleibt als Kontext
   stehen, tritt aber zurueck — sonst ist das Lauteste im Diagramm die
   Abwesenheit von Information. */
.isbar.ohnePlan .fill{opacity:.18}
/* Das Ziel liegt UEBER dem Ist, als Umriss. Als gefuellte Flaeche dahinter
   war es hinter dem Balken unsichtbar. */
.isbar .zielband{position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  border:1px dashed var(--stahl);border-left:none;border-right:none;
  background:linear-gradient(var(--tint-stahl),var(--tint-stahl))}
:root[data-theme="light"] .isbar .fill{opacity:1}
:root[data-theme="light"] .isbar.ohnePlan .fill{opacity:.3}

.fahrt{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--stahl);
  padding:11px 14px;margin-bottom:7px}
.fahrt .d{font-family:var(--mono);font-size:0.78125rem;color:var(--stahl);letter-spacing:.06em}
.fahrt .n{font-size:0.875rem;color:var(--fg);margin-top:3px}
.fahrt .m{font-family:var(--mono);font-size:0.75rem;color:var(--muted);margin-top:3px}
.fahrt .werte{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.fahrt .chip,.fahrt .zone{font-family:var(--mono);font-size:0.6875rem;line-height:1.4;padding:1px 6px;border:1px solid var(--line);
  border-radius:2px;color:var(--muted);white-space:nowrap}
.fahrt .zone{font-weight:700;border-color:currentColor}
.fahrt .zone.ruhig{color:var(--gruen)} .fahrt .zone.mittel{color:var(--stahl)} .fahrt .zone.hart{color:var(--rost)}
/* Kadenz: Punkte bleiben rund, also ohne Verzerrung */
.radbar svg.frei{height:auto}
.radbar .h .t.ziel{color:var(--gruen)}
.radbar .legende{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-family:var(--mono);font-size:0.71875rem;color:var(--muted)}
.radbar .legende i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.radbar .legende i.watt{background:var(--stahl)} .radbar .legende i.np{background:var(--akzent)}
.fahrt .chip.best{color:var(--akzent);border-color:var(--akzent)}
.bestliste{list-style:none;margin:0;padding:0}
.bestliste li{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-top:1px solid var(--line);min-width:0}
.bestliste li:first-child{border-top:0;padding-top:0}
.bestliste .best-wann{font-family:var(--mono);font-size:0.71875rem;color:var(--muted);overflow-wrap:anywhere}
.bestliste .best-was{font-size:0.875rem;color:var(--fg);overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════
   Helle Fassung. Keine Invertierung: Leuchten werden abgeschaltet
   statt abgeschwächt, und die Akzentfarben werden dunkler, weil
   Neon-Cyan auf Weiß schlicht nicht lesbar ist. Formen, Raster
   und Typografie bleiben — die tragen die Identität, nicht das Glühen.
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f1ea; --bg2:#faf8f3;
  --panel:#ffffff; --panel2:#faf8f4;
  --fg:#1a1815; --muted:#5d5852; --dim:#736d68;
  --line:#ddd7cc;

  --akzent:#8a5410; --stahl:#3f5f78; --gruen:#4a6b33; --rost:#9c4a1c; --rot:#a33028;
  --tape:#e2d6b6; --corner:#a99f90; --corner-hi:#d8d0c3;
  --case-shadow:0 6px 16px rgba(26,24,21,.10);

  --sunken:#efebe2;
  --leiste:linear-gradient(180deg,#ffffff,#f6f3ec);
  --backdrop:rgba(26,24,21,.45);

  --tint-akzent:rgba(138,84,16,.09);
  --tint-akzent-stark:rgba(138,84,16,.20);
  --tint-gruen:rgba(74,107,51,.18);
  --tint-rost:rgba(156,74,28,.18);
  --tint-stahl:rgba(63,95,120,.05);
  --tint-invers:rgba(138,84,16,.12);

  --gt-akzent:none; --gt-stahl:none;
  --gb-akzent-stark:none; --gb-akzent:none;
  --gi-akzent:none; --gi-akzent-stark:none; --gi-gruen:none;
  --gb-leiste-akzent:0 -6px 26px rgba(26,24,21,.13);
  --gb-leiste-stahl:0 -6px 26px rgba(26,24,21,.13);
  --gb-fokus:0 0 0 3px rgba(138,84,16,.18);
  --gb-dialog:0 18px 50px rgba(26,24,21,.22);
  --gb-punkt-gruen:none; --gb-punkt-rot:none;

  --raster:rgba(26,24,21,.035);
  --halo:rgba(138,84,16,.05);
  --scan:0;
}

/* Karten brauchen auf Hell eine Kante, die das Leuchten ersetzt. */
:root[data-theme="light"] .woche-karte,
:root[data-theme="light"] .gewichte,
:root[data-theme="light"] .card,
:root[data-theme="light"] .w,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .pr,
:root[data-theme="light"] .hist,
:root[data-theme="light"] .conn,
:root[data-theme="light"] .fahrt,
:root[data-theme="light"] .chart,
:root[data-theme="light"] .radbar,
:root[data-theme="light"] details.info{
  box-shadow:0 1px 2px rgba(26,24,21,.05), 0 6px 16px rgba(26,24,21,.05);
}
:root[data-theme="light"] .set:not(.done):not(.partial){border-color:#cdc5b8}
:root[data-theme="light"] .set{border-width:2px}
:root[data-theme="light"] .set.done{color:#3d5a29}
:root[data-theme="light"] .set.partial{color:#7d3a14}
:root[data-theme="light"] .set.plus{color:#6d4109}
:root[data-theme="light"] .rest,
:root[data-theme="light"] #stopwatch{border-top-width:2px}
:root[data-theme="light"] .spruch{background:var(--tint-stahl);border-color:#cfd8de}
:root[data-theme="light"] .banner{background:#fff}

/* ── Umschalter ───────────────────────────────────────────── */
.themen{display:flex;gap:8px;margin-top:10px}
.themen button{
  flex:1;padding:12px 6px;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;
  border-radius:2px;
}
.themen button.an{border-color:var(--akzent);color:var(--akzent);background:var(--tint-akzent)}

/* ── Skalierung im WOD ────────────────────────────────────── */
details.skal{margin-top:7px}
details.skal>summary{
  cursor:pointer;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--stahl);list-style:none;
}
details.skal>summary::-webkit-details-marker{display:none}
details.skal>summary::after{content:' ▸';color:var(--dim)}
details.skal[open]>summary::after{content:' ▾'}
details.skal ul{margin:7px 0 0;padding-left:17px;color:var(--muted);font-size:0.8125rem;line-height:1.6}
details.skal li{margin:2px 0}
button.raus{
  margin-top:9px;background:transparent;border:1px solid var(--line);color:var(--rost);
  font-family:var(--mono);font-size:0.65625rem;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 11px;cursor:pointer;
}
button.raus:active{border-color:var(--rost)}
.skal .erkl{margin:9px 0 0;color:var(--fg);font-size:0.84375rem;line-height:1.6}
.skal .std{margin:5px 0 0;color:var(--fg);font-size:0.84375rem;line-height:1.6}
.skal-titel{margin:12px 0 0;font-family:var(--mono);font-size:0.65625rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.hist.maxout{border-left:2px solid var(--gruen)}
.hist.maxout .d{color:var(--gruen)}
.hist.anpassung{border-left:2px solid var(--rost)}
.hist.anpassung .d{color:var(--rost)}

/* ── Meilenstein ──────────────────────────────────────────── */
.meilenstein{
  margin-top:14px;padding:14px 16px;border:1px solid var(--stahl);
  background:var(--tint-stahl);
  border-radius:2px;
}
.meilenstein .kicker{color:var(--stahl)}
.meilenstein p{margin:7px 0 0;font-size:0.90625rem;line-height:1.55;color:var(--fg)}

/* ── Abend-Check-in ───────────────────────────────────────── */
.checkin{
  margin-top:14px;padding:14px 16px;border:1px solid var(--stahl);
  background:var(--tint-stahl);
  border-radius:2px;
}
.checkin .kicker{color:var(--stahl)}
.checkin .frage{margin:7px 0 0;font-size:0.90625rem;line-height:1.55;color:var(--fg)}
.checkin .actions{margin-top:10px}
.checkin .fine{margin:8px 0 0}
.checkin .btn[aria-pressed="true"]{background:var(--tint-akzent-stark)}
.checkin .btn.ghost[aria-pressed="true"]{border-color:var(--fg);color:var(--fg);background:transparent}

/* ── Minierfolge ──────────────────────────────────────────── */
.erfolg-kopf{
  margin-top:18px;padding:18px;border:1px solid var(--gruen);background:var(--tint-gruen);
  border-radius:2px;
}
.erfolg-kopf .kicker{color:var(--gruen)}
.erfolg-kopf .gross{margin:8px 0 0;font-size:1.25rem;line-height:1.35;font-weight:650;color:var(--fg)}
.erfolge{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.erfolg{
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--gruen);
  padding:11px 14px;font-size:0.875rem;color:var(--fg);
}
.motto{
  margin:14px 0 0;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}

/* ═══════════════════════════════════════════════════════════
   Grosser Bildschirm. Auf dem Handy ist die schmale Spalte richtig;
   auf einem Mac wird daraus eine Handy-App in der Bildschirmmitte
   mit viel Leere daneben. Ab 900 px zwei Spalten — die Reihenfolge
   im Markup bleibt gleich, sie stapeln sich auf dem Handy einfach.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  #view-home { max-width: 1080px; }
  #view-history { max-width: 1080px; }
  #view-bibliothek { max-width: 1080px; }

  .zwei-spalten{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 26px;
    align-items:start;
  }
  .spalte > h2:first-child{margin-top:18px}
  .spalte > #today:first-child{margin-top:18px}   /* gleiche Luft unter dem Motto wie die Ueberschrift rechts */

  /* Kennzahlen und Bestwerte vertragen mehr Breite */
  #hist-summary .stats{grid-template-columns:repeat(4,1fr)}
  #hist-prs{display:grid;grid-template-columns:1fr 1fr;gap:0 9px;align-items:start}
  #hist-charts{display:grid;grid-template-columns:1fr 1fr;gap:0 9px;align-items:start}
  #hist-rad .fahrt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline}
  #hist-rad .fahrt .m{text-align:right}
  #mo-lifts, #mo-checks{grid-template-columns:repeat(3,1fr)}
}

@media (min-width: 1200px) {
  #view-history { max-width: 1240px; }
  #hist-charts{grid-template-columns:repeat(3,1fr)}
}

/* ── Trainingskalender ────────────────────────────────────── */
.kalender{background:var(--panel);border:1px solid var(--line);padding:14px}
.kalender .raster{
  display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;
  grid-auto-columns:1fr;gap:3px;
}
.kalender .zelle{
  aspect-ratio:1;background:var(--sunken);border:1px solid var(--line);border-radius:2px;
}
.kalender .zelle.kraft{background:var(--akzent);border-color:var(--akzent)}
.kalender .zelle.wod{background:var(--gruen);border-color:var(--gruen)}
.kalender .zelle.rad{background:var(--stahl);border-color:var(--stahl)}
.kalender .zelle.kraft.rad{background:linear-gradient(135deg,var(--akzent) 50%,var(--stahl) 50%)}
.kalender .zelle.wod.rad{background:linear-gradient(135deg,var(--gruen) 50%,var(--stahl) 50%)}
.kalender .zelle.zukunft{opacity:.25}
.kalender .zelle.heute{outline:1px solid var(--fg);outline-offset:1px}
.kalender .legende{
  display:flex;gap:14px;align-items:center;margin-top:11px;flex-wrap:wrap;
  font-family:var(--mono);font-size:0.65625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.kalender .legende i{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px;vertical-align:-1px}
.kalender .legende i.kraft{background:var(--akzent)}
.kalender .legende i.wod{background:var(--gruen)}
.kalender .legende i.rad{background:var(--stahl)}
.kalender .legende .rechts{margin-left:auto;color:var(--fg)}

/* ── Backstage ────────────────────────────────────────────────
   Trennt den Trainingsteil vom Maschinenraum. Zentriert statt links,
   damit es als Bruch liest und nicht als naechste Ueberschrift.        */
/* ── Reiter ──────────────────────────────────────────────────
   Tour und Backstage: eine feste Leiste unter dem Kopf, darunter immer
   nur ein Panel. Waagerecht scrollbar, falls die Schrift gross ist.  */
.head.mit-reiter{flex-wrap:wrap;padding-bottom:0}
.head > .reiter{
  flex:1 0 100%;order:9;margin:12px -16px 0;
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  padding:0 7px;border-top:1px solid var(--line);
}
.head > .reiter::-webkit-scrollbar{display:none}
.reiter.ueberlaeuft{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.reiter [role="tab"]{
  flex:1 0 auto;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:13px 9px 11px;margin-bottom:-1px;
  font-family:var(--mono);font-size:0.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.reiter [role="tab"][aria-selected="true"]{color:var(--akzent);border-bottom-color:var(--akzent)}
.reiter [role="tab"]:focus-visible{outline:none;box-shadow:inset var(--gb-fokus)}

/* ── Bibliothek ───────────────────────────────────────────────
   Wachsende Wissensschicht: Grundlifts, Technik, Mobility, Finisher
   und Jam-Bewegungen durchsuchbar, mit Platz fuer eigene Notizen. */
#view-bibliothek input[type=text]{margin-top:16px}
.chips{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.chips button{
  padding:9px 12px;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;border-radius:2px;
}
.chips button.an{border-color:var(--akzent);color:var(--akzent);background:var(--tint-akzent)}
.chips button:disabled{opacity:.35;cursor:default}
.gefuehl{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* ── Bibliothek als Songbook ──────────────────────────────────
   Gegliedert nach Kategorien, jede mit ihrer Farbe (--kf). Eine Zeile je
   Uebung: Name, Dosis rechts, der Cue leise darunter. Erst beim
   Aufklappen kommt der Rest, das Notizformular erst auf Wunsch.       */
#bib-kategorien button{display:inline-flex;align-items:center;gap:7px}
#bib-kategorien button .n{font-size:0.625rem;color:var(--dim);letter-spacing:0}
#bib-kategorien button.an{border-color:var(--kf,var(--akzent));color:var(--kf,var(--akzent));
  background:color-mix(in srgb,var(--kf,var(--akzent)) 12%,transparent)}

.bib-tag{
  margin-top:16px;padding:16px 16px 14px;border:1px solid var(--line);border-top:3px solid var(--kf);
  background:radial-gradient(120% 80% at 15% 0%,color-mix(in srgb,var(--kf) 14%,transparent),transparent 70%),var(--panel);
  border-radius:2px;
}
.bib-tag .kicker{color:var(--kf)}
.bt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}
.bt-kopf .u-dosis{flex:none}
.bt-kopf .name{font-size:1.75rem;margin:0;overflow-wrap:anywhere}
.bib-tag p{margin:8px 0 0;color:var(--muted);font-size:0.9375rem;line-height:1.5}
.bt-knoepfe{display:flex;gap:8px;margin-top:14px}
.bt-knoepfe .btn{margin-top:0;width:auto;padding:10px 18px}

.bib-gruppe h2{border-left:5px solid var(--kf)}
.bib-gruppe h2 .n{order:2;margin-left:2px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.05em}
.bib-karte{background:var(--panel);border:1px solid var(--line);border-radius:2px}
.uebung + .uebung{border-top:1px solid var(--line)}
.uebung{scroll-margin-top:96px}   /* nicht unter den klebenden Kopf scrollen */
.uebung > summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;
  padding:12px 15px;cursor:pointer;list-style:none;
}
.uebung > summary::-webkit-details-marker{display:none}
.uebung > summary::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--kf);align-self:center;
}
.u-name{color:var(--fg);font-size:0.9375rem}
.u-dosis{font-family:var(--mono);font-size:0.75rem;color:var(--dim);text-align:right;max-width:min(16ch,40vw)}
.u-kurz{grid-column:2 / -1;font-size:0.8125rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uebung[open] > summary{background:var(--panel2)}
.uebung[open] .u-name{color:var(--kf);font-weight:600}
.uebung[open] .u-kurz{display:none}
.u-body{padding:4px 15px 16px 32px;background:var(--panel2)}

.bib-aktuell{margin:6px 0 0;font-size:0.8125rem;color:var(--muted)}
.bib-aktuell b{font-family:var(--mono);color:var(--akzent)}
.bib-info{margin:8px 0 0;font-size:0.9375rem;line-height:1.55;color:var(--fg)}
.bib-fakten{margin-top:10px}
.bib-fakten .kv{display:grid;grid-template-columns:6.25rem minmax(0,1fr);gap:12px}
.bib-notiz-text{margin-top:12px;padding:10px 12px;border-left:2px solid var(--kf);background:var(--panel)}
.bib-notiz-text p{margin:4px 0 0;font-size:0.875rem;white-space:pre-wrap}
.bib-aktionen{display:flex;gap:16px;align-items:center;margin-top:14px;flex-wrap:wrap}
.bib-video, .bib-notiz-auf, .bib-mobility{
  font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;background:none;border:0;padding:4px 0;
  color:var(--akzent);text-decoration:none;border-bottom:1px solid currentColor;cursor:pointer;
}
.bib-notiz-auf{color:var(--muted)}
.bib-mobility.erledigt{color:var(--muted);border-bottom-style:dotted;cursor:default}
.bib-form{margin-top:10px}
.bib-notiz{min-height:70px;font-size:0.875rem}
.bib-eigenesvideo{font-size:0.8125rem;padding:12px}
.bib-form .bib-speichern{margin-top:2px;width:auto;padding:11px 18px}
.bib-detail .quelle{margin-top:12px}

/* ── Programm einrichten ──────────────────────────────────── */
/* Die Wochentage sollen als Reihe stehen und nicht je nach Sprache
   unterschiedlich breit werden — deshalb gleiche Anteile statt Inhalt. */
.chips.tage button{flex:1;min-width:0;padding:11px 4px;text-align:center}
.ein-lift{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.ein-lift .ein-name{flex:1;margin:0}
.ein-lift .ein-kg{display:flex;align-items:center;gap:6px;flex:0 0 108px}
.ein-lift .ein-kg input{margin:0;text-align:right}
.ein-lift .ein-kg span{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:.1em;color:var(--dim);
}
#ein-leer{margin-top:2px}
#ein-fehler{margin-top:14px}

/* ── Persoenliche Schicht ─────────────────────────────────── */
.feld{display:block;margin-top:12px}
.feld>span{
  display:block;font-family:var(--mono);font-size:0.65625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.pers-rekord{border:1px solid var(--line);background:var(--panel);padding:12px 14px;margin-bottom:8px;border-radius:2px}
.pers-rekord .n{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:0.9375rem;margin-bottom:8px}
/* Drei Felder nebeneinander, solange Platz ist — auf dem Handy untereinander,
   sonst wird das Datumsfeld unlesbar schmal. */
.pers-rekord .felder{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:420px){.pers-rekord .felder{grid-template-columns:1.3fr 1fr 1fr}}
.pers-rekord label{display:block}
.pers-rekord label>span{
  display:block;font-family:var(--mono);font-size:0.59375rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px;
}
.pers-rekord input{margin:0}
/* Pruefwerte: Gewicht und Wiederholungen sind schmale Zahlenfelder und
   passen auch auf dem Handy nebeneinander — nur das Datum braucht die
   volle Breite. Sieben Karten mit je drei gestapelten Feldern waeren
   sonst eine sehr lange Strecke fuer etwas, das man selten ausfuellt. */
.pers-rekord.chk .felder{grid-template-columns:1fr 1fr}
.pers-rekord.chk .felder label:last-child{grid-column:1 / -1}
@media (min-width:420px){
  .pers-rekord.chk .felder{grid-template-columns:1fr 1fr 1.3fr}
  .pers-rekord.chk .felder label:last-child{grid-column:auto}
}
.pers-rekord.chk .fine{margin:-4px 0 8px}

/* ── Injury Report ────────────────────────────────────────── */
.inj{border:1px solid var(--line);background:var(--panel);padding:12px 14px;
  margin-bottom:10px;border-radius:2px}
.inj label{display:block;margin-bottom:8px}
.inj label>span{display:block;font-family:var(--mono);font-size:0.59375rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.inj input,.inj textarea,.inj select{margin:0}
.inj .felder{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inj .felder label:last-child{grid-column:1 / -1}
@media (min-width:420px){
  .inj .felder{grid-template-columns:1fr 1fr 1fr}
  .inj .felder label:last-child{grid-column:auto}
}
.inj .fine{margin:-4px 0 10px}
.inj-sperre{margin:4px 0 8px}
.inj-sperre summary{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stahl);cursor:pointer}
.inj-gruppe{margin:10px 0 4px;font-family:var(--mono);font-size:0.59375rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
/* Die Auswahl ist lang — eine gesperrte Uebung muss man auf einen Blick
   von einer freien unterscheiden koennen, nicht durch Hinsehen. */
.inj-tog.an{border-color:var(--rot);color:var(--rot);background:var(--tint-rot,rgba(210,86,78,.12))}
.inj-weg{margin-top:4px}
.gefuehl.koerper{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
/* Drei Stufen sind keine Messwerte — ein Punktband sagt dasselbe wie eine
   Kurve, ohne eine Genauigkeit vorzutaeuschen, die es nicht gibt. */
.kband{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0 4px}
.kband .kp{width:10px;height:10px;border-radius:1px;flex:0 0 auto}
#pers-speichern{margin-top:14px}

/* ── Ort im Kopf ──────────────────────────────────────────── */
/* Der Name kann lang sein ("Crossfit Box Nord"). Er darf die Kopfzeile
   nicht sprengen, also bekommt er eine Obergrenze und wird beschnitten —
   die volle Auswahl steht ohnehin im Dialog. */
.icon-btn.ort{
  width:auto;max-width:38vw;padding:0 11px;font-family:var(--mono);
  font-size:0.65625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.icon-btn.ort.an{color:var(--akzent);border-color:var(--akzent);background:var(--tint-akzent)}
.ort-opts{display:flex;flex-direction:column;gap:8px}
.ort-opts button{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 15px;border:1px solid var(--line);background:var(--sunken);
  color:var(--fg);cursor:pointer;text-align:left;width:100%;
}
.ort-opts button.an{border-color:var(--akzent);background:var(--tint-akzent)}
.ort-opts .n{font-family:var(--display);font-size:1rem;letter-spacing:.03em;text-transform:uppercase}
.ort-opts button.an .n{color:var(--akzent)}
.ort-opts .z{font-family:var(--mono);font-size:0.6875rem;color:var(--dim);white-space:nowrap}

/* Ankreuzfelder in der Palette statt im Browser-Blau. */
input[type=checkbox]{accent-color:var(--akzent);width:16px;height:16px}

/* ── Unplugged: die Buehne ────────────────────────────────── */
/* Man liest das vom Boden aus, im Liegestütz, mit dem Handy irgendwo neben
   sich. Deshalb gross, ruhig und ohne alles, was man nicht sofort braucht. */
.buehne{
  text-align:center;padding:26px 12px 30px;border:1px solid var(--line);
  background:var(--panel);border-radius:2px;margin-top:16px;
}
.buehne.pause{background:var(--sunken);border-color:var(--stahl)}
.buehne .runde{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;
}
.buehne .was{
  font-family:var(--display);font-size:1.875rem;line-height:1.1;text-transform:uppercase;
  color:var(--akzent);margin:10px 0 4px;letter-spacing:.02em;
}
.buehne.pause .was{color:var(--stahl)}
.buehne .uhr{
  font-size:5.5rem;font-weight:700;line-height:1;margin:6px 0 8px;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.buehne .cue{color:var(--muted);font-size:0.90625rem;max-width:24em;margin:0 auto}
/* Kurs: Seite und Wiederholungen gross, die Uhr tritt zurueck, wo sie nicht zaehlt. */
.buehne .seite{
  font-family:var(--display);font-size:3rem;line-height:1;letter-spacing:.08em;
  color:var(--fg);margin:8px 0 2px;
}
.buehne .wdh .n{font-size:5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.buehne .wdh .x{display:block;font-size:0.9375rem;color:var(--muted);margin-top:2px}
.buehne .uhr.mittel{font-size:3rem;margin:10px 0 6px}
.buehne .uhr.klein{font-size:1.75rem;margin:10px 0 6px;color:var(--muted)}
.buehne .ku-lade{margin-top:8px}
.ku-hilfe{margin-top:18px}
.ku-hilfe h3{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.ku-hilfe .u{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:10px 12px;margin-top:8px}
.ku-hilfe .u b{display:block;margin-bottom:4px}
.ku-hilfe ol{margin:0 0 6px;padding-left:1.25em}
.ku-hilfe li{margin:2px 0}
.ku-hilfe .fig{display:flex;flex-wrap:wrap;gap:4px 10px;margin:2px 0 8px;--z:2}
.ku-hilfe .fig figure{margin:0}
.ku-hilfe .fig figcaption{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}
.fig-bild{display:block;width:calc(76px * var(--z));height:calc(82px * var(--z));background:url('../assets/pixel/figuren.png') no-repeat;
  background-size:calc(var(--n) * 76px * var(--z)) calc(82px * var(--z));background-position:calc(var(--i) * -76px * var(--z)) 0;image-rendering:pixelated}
@media (max-width:359px){ .ku-hilfe .fig{--z:1} }
.ku-hilfe .fig.viele{--z:2;flex-wrap:nowrap;gap:4px 8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
.ku-hilfe .fig.viele figure{flex:none;scroll-snap-align:start}
.ku-hilfe .fig.viele::-webkit-scrollbar{height:6px}
.ku-hilfe .fig.viele::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}
@media (min-width:720px){ .ku-hilfe .fig.viele{flex-wrap:wrap;overflow-x:visible} }
.ku-hilfe .fehler{font-size:0.8125rem;color:var(--muted);margin:0}
.buehne .danach{
  font-family:var(--mono);font-size:0.75rem;letter-spacing:.08em;color:var(--dim);margin-top:8px;
}
.up-steuer{display:flex;gap:8px;margin-top:14px}
.up-steuer .btn{flex:1;margin:0}
#up-abbruch{margin-top:10px}
#up-teile{margin-top:14px}
#up-start{margin-top:16px}
#ku-start,#ku-fertig{margin-top:16px}
#mp-body{padding-bottom:calc(128px + env(safe-area-inset-bottom))}
.mp-lift{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:12px;margin-top:12px}
.mp-lift .h{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.mp-lift .name{font-family:var(--display);text-transform:uppercase;font-size:1.25rem;color:var(--akzent)}
.mp-lift .zeile{display:flex;align-items:center;gap:8px;margin-top:10px}
.mp-lift .zeile .lbl{flex:1;color:var(--muted);font-size:0.8125rem}
.mp-lift .zeile button{width:40px;height:40px;padding:0}
.mp-lift .zeile input{width:64px;height:40px;text-align:center;font-family:var(--mono);background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:2px}
.mp-saetze{display:flex;gap:8px;margin-top:12px}
.mp-saetze button{flex:1;margin:0;padding:12px 0}
.mp-saetze button.an{border-color:var(--akzent);color:var(--akzent);background:var(--tint-akzent)}
#mp-fertig{margin-top:16px}
#ku-abbruch{margin-top:10px}
#ku-bloecke{margin-top:14px}
#ku-ende .up-steuer .btn{padding-left:6px;padding-right:6px}
#ku-geschafft .btn.an,.ku-bew .btn.an{border-color:var(--akzent);color:var(--akzent)}
.ku-bew{margin-top:14px}
.ku-bew .name{display:block;font-weight:600}
.ku-bew .up-steuer{margin-top:6px}
#ku-speichern{margin-top:18px}
.ku-tipp{flex-basis:100%;margin:2px 0 0}
/* Fortschritt im Kurs: 36 Einheiten, je drei pro Woche; ein Check hat einen Strich darunter. */
.leiste{display:flex;gap:2px;margin:8px 0}
.leiste i{flex:1;height:10px;background:var(--line);box-sizing:border-box}
.leiste i.wa{margin-left:5px}
.leiste i.wa:first-child{margin-left:0}
.leiste i.f{background:var(--akzent)}
.leiste i.j{outline:1px solid var(--akzent);outline-offset:-1px}
.leiste i.t{border-bottom:3px solid var(--stahl)}
.kurs-karte{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:10px 12px;margin-top:12px}
.kurs-karte b{display:block}
.kurs-karte .fine{display:block}
.ku-erfolg{margin-top:12px}
.ku-kugel{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.ku-kugel .name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:1.125rem;line-height:1.2}
.ku-kugel button{width:40px;height:40px;padding:0}
.ku-kugel input{width:86px;height:40px;text-align:center;font-family:var(--mono);background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:2px}
.ku-kugel .kg{color:var(--muted);font-size:0.8125rem}
.ku-kugel{flex-wrap:wrap}
.ku-kugel .ku-lade{flex-basis:100%}
.ku-kugel .ku-lade:empty{display:none}
.ku-kugel .ku-lade .platten{margin:0 0 2px}
.gym-gewichte{margin-top:6px}
/* Das Auf/Ab-Raedchen des Browsers frisst das "kg" und doppelt − und +. */
.ku-kugel input,.mp-lift .zeile input{-moz-appearance:textfield;appearance:textfield}
.ku-kugel input::-webkit-outer-spin-button,.ku-kugel input::-webkit-inner-spin-button,
.mp-lift .zeile input::-webkit-outer-spin-button,.mp-lift .zeile input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ku-test{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}

/* ═══════════════════════════════════════════════════════════
   Merch-Stand und Buehnenmomente. Spiel, aber im selben Road-Case:
   matte Flaechen, harte Kanten, Farbe nur dort, wo etwas verdient ist.
   ═══════════════════════════════════════════════════════════ */

.zum-merch{margin-top:12px}
#view-merch .pad > h2:first-of-type{margin-top:18px}

/* ── Rang ── */
.rang .name{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em}
/* Pixelbilder aus den Boegen in assets/pixel (tools/pixel.mjs): --i ist der
   Platz im Bogen, --n die Zahl der Bilder. Scharf vergroessert, nie weich. */
.szene{display:block;width:100%;aspect-ratio:2/1;border:1px solid var(--line);border-radius:2px;
  background:url('../assets/pixel/raenge.png') no-repeat;background-size:calc(var(--n) * 100%) 100%;
  background-position:calc(var(--i) / (var(--n) - 1) * 100%) 0;image-rendering:pixelated}
.rang .szene.gross{margin:12px 0 10px;max-width:576px}
.tour-leiste{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0 0 10px}
.tstop{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0}
/* Freigespielte Stationen sind Knoepfe: antippen zeigt die Szene gross. */
button.tstop{padding:3px 0;background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:center}
button.tstop:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
button.tstop:hover .szene{border-color:var(--muted)}
.tstop .tname{font-family:var(--mono);font-size:0.5625rem;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);text-align:center;overflow-wrap:anywhere}
.tstop.gewaehlt .szene{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.tstop.gewaehlt .tname, .tstop.jetzt .tname{color:var(--fg)}
.rang-wann{margin:-4px 0 10px;font-size:0.8125rem;color:var(--muted)}
.rang-wann:empty{display:none}
.tstop figcaption{font-family:var(--mono);font-size:0.5625rem;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);text-align:center;overflow-wrap:anywhere}
.tstop.kommt .szene{filter:grayscale(1) brightness(.45)}
.tstop.jetzt .szene{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
.tstop.jetzt figcaption{color:var(--fg)}
@media (max-width:539px){ .tstop figcaption, .tstop .tname{display:none} }
.pix{flex:none;width:40px;height:40px;background:url('../assets/pixel/aufnaeher.png') no-repeat;
  background-size:calc(var(--n) * 40px) 40px;background-position:calc(var(--i) * -40px) 0;image-rendering:pixelated;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}

/* ── Monats-Tour: der Endgegner aus assets/pixel/boss.png (lebendig | besiegt) ── */
.mt-kopf{display:flex;gap:14px;align-items:center}
.boss{flex:none;width:72px;height:72px;background:url('../assets/pixel/boss.png') no-repeat 0 0/400% 100%;
  image-rendering:pixelated;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.boss.kurs{background-position:66.667% 0}
.boss.tot{background-position:33.333% 0;filter:grayscale(.6) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.boss.kurs.tot{background-position:100% 0}
.kugelrang{margin:10px 0 0;font-size:0.9375rem}
.boss.schlaeft{filter:grayscale(1) brightness(.6);opacity:.6}
.mt-wer{min-width:0;flex:1}
.monatstour .name{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:1.125rem;
  line-height:1.2;overflow-wrap:anywhere}
.lp{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:8px;max-width:180px}
.lp i{display:block;height:9px;background:var(--rot);border:1px solid var(--line)}
.lp i.weg{background:var(--sunken)}
.mt-ziele{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.mt-ziel .h{display:flex;justify-content:space-between;gap:10px;font-size:0.875rem;margin-bottom:4px}
.mt-ziel .h b{font-family:var(--mono);font-weight:500;white-space:nowrap}
.mt-ziel.ok .h b{color:var(--gruen)}
.mt-stand{margin:12px 0 0;font-size:0.875rem;color:var(--fg)}
.monatstour.besiegt .mt-stand{color:var(--akzent);font-weight:600}
.mt-frueher{margin-top:12px}
.mt-frueher summary{cursor:pointer;font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mt-frueher .termine{columns:auto}
.mt-frueher .termine li{flex-direction:column;justify-content:flex-start;gap:2px;padding:7px 0}
.mt-frueher .termine li span.a{font-family:inherit;font-weight:400;white-space:normal;color:var(--muted);overflow-wrap:anywhere}
.mt-frueher .termine li.sieg span.a{font-weight:600;color:var(--fg)}

/* ── Die Kutte: Denim-Koeper als feine Diagonale, Aufnaeher mit Naht ── */
.kutte{
  background:
    repeating-linear-gradient(135deg,var(--raster) 0 2px,transparent 2px 6px),
    var(--panel);
  border:1px solid var(--line);padding:14px;border-radius:2px;
}
.kutte-teil + .kutte-teil{margin-top:16px}
.patches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:8px;margin-top:8px}
.patch{
  --pf:var(--akzent);
  position:relative;padding:10px 11px;min-height:64px;
  border:2px solid var(--pf);background:var(--panel2);border-radius:6px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.patch .pt{display:flex;flex-direction:column;gap:3px;min-width:0}
.patch::after{                         /* die Naht */
  content:'';position:absolute;inset:3px;border:1px dashed var(--pf);border-radius:4px;opacity:.55;pointer-events:none;
}
.patch b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:0.875rem;line-height:1.2;color:var(--fg);overflow-wrap:anywhere;hyphens:auto}
.patch span{font-size:0.75rem;line-height:1.35;color:var(--muted)}
.patch.k-kraft{--pf:var(--rost)}
.patch.k-comeback{--pf:var(--gruen)}
.patch.k-rad{--pf:var(--stahl)}
.patch.k-serie{--pf:var(--fg)}
.patch.offen{border:2px dashed var(--line);background:transparent}
.patch.offen::after{display:none}
.patch.offen b{color:var(--muted)}
.patch.offen span{color:var(--dim)}
.patch.offen .pix{filter:grayscale(1) brightness(.5);opacity:.6}

.aufnaeher-neu{
  margin-top:14px;padding:14px;border:1px solid var(--akzent);background:var(--tint-akzent);border-radius:2px;
}
.aufnaeher-neu .kicker{color:var(--akzent)}

/* ── Gold und Platin ── */
/* Die Studiowand: gerahmte Scheiben aus assets/pixel/platten.png
   (tools/pixel.mjs), Reihenfolge wie M.PLATTEN. Offene haengen schon
   da, nur dunkel — man sieht, was noch kommt. */
.platten-wand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;padding:18px 12px 14px;
  background:repeating-linear-gradient(90deg,var(--raster) 0 1px,transparent 1px 22px),var(--sunken);
  border:1px solid var(--line);border-radius:2px}
@media (min-width: 560px){ .platten-wand{grid-template-columns:repeat(4,minmax(0,1fr))} }
.scheibe{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.award{display:block;width:min(120px,100%);aspect-ratio:48/60;margin-bottom:6px;
  background:url('../assets/pixel/platten.png') no-repeat;background-size:calc(var(--n, 9) * 100%) 100%;
  background-position:calc(var(--i) * 100% / (var(--n, 9) - 1)) 0;image-rendering:pixelated;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.55))}
.scheibe b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:0.8125rem;line-height:1.2;color:var(--fg);overflow-wrap:break-word;hyphens:auto;max-width:100%}
.scheibe span:not(.award){font-size:0.6875rem;color:var(--muted);line-height:1.3}
.scheibe.offen .award{filter:grayscale(1) brightness(.42);opacity:.8}
.scheibe.offen b{color:var(--muted)}
#merch-platten .bar{margin-top:8px}

/* ── Tourshirts ──
   Pixel-Shirts aus assets/pixel/shirts.png (je Stoff vorne | hinten),
   das Emblem aus embleme.png. Der Druck waechst mit dem Shirt (cqw), die
   Tinte ist --tape: hell auf jedem der dunklen Stoffe, in beiden Themen. */
.shirt-wand{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px}
.tourshirt{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:16px 14px 10px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.shirt-buehne{container-type:inline-size;width:min(100%,320px);margin:0 auto;aspect-ratio:64/60;perspective:900px}
.shirt-dreh{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.tourshirt.gewendet .shirt-dreh{transform:rotateY(180deg)}
.shirt-seite{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:url('../assets/pixel/shirts.png') no-repeat;background-size:2400% 100%;
  background-position:calc(var(--f) * 200% / 23) 0;image-rendering:pixelated;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.shirt-seite.hinten{transform:rotateY(180deg);background-position:calc((var(--f) * 2 + 1) * 100% / 23) 0}
.druck{position:absolute;left:25%;right:25%;top:16%;bottom:11%;display:flex;flex-direction:column;align-items:center;
  text-align:center;color:var(--tape);overflow:hidden}
.druck .logo{font-family:'Anton',var(--display);font-size:9cqw;line-height:1;letter-spacing:.14em;margin-right:-.14em;text-transform:uppercase}
.druck .emblem{flex:none;width:31.25cqw;height:31.25cqw;margin:2.5cqw 0 2cqw;
  background:url('../assets/pixel/embleme.png') no-repeat;background-size:1200% 100%;
  background-position:calc(var(--m) * 100% / 11) 0;image-rendering:pixelated}
.druck .tname{font-family:'Permanent Marker',var(--display);font-size:6.2cqw;line-height:1.02;text-transform:uppercase;overflow-wrap:anywhere}
.druck .tzeit{margin-top:2cqw;font-family:var(--mono);font-size:3.4cqw;letter-spacing:.18em;text-transform:uppercase}
.hinten .druck{top:11%;bottom:8%;padding-top:1.2cqw}
.hinten .tkopf{font-family:'Permanent Marker',var(--display);font-size:5.6cqw;line-height:1.35;text-transform:uppercase;margin-bottom:2cqw}
.hinten .daten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);gap:.5cqw 2.4cqw;
  font-family:var(--mono);font-size:3.3cqw;line-height:1.3}
.hinten .mehr{margin-top:1.5cqw;font-family:var(--mono);font-size:3cqw}
.sticker{position:absolute;right:1%;top:13%;transform:rotate(14deg);padding:.8cqw 2.6cqw;background:var(--akzent);color:var(--bg);
  font-family:'Anton',var(--display);font-size:4.6cqw;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){ .shirt-dreh{transition:none} }
.shirt-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.shirt-info b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:1.0625rem;
  line-height:1.2;color:var(--fg);overflow-wrap:anywhere}
.shirt-info span{font-size:0.8125rem;color:var(--muted)}
.shirt-wenden{align-self:flex-start;margin-top:6px;padding:4px 0;background:none;border:0;border-bottom:1px solid currentColor;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;color:var(--akzent);cursor:pointer}
.shirt-wenden:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.shirt-termine summary{cursor:pointer;padding:6px 0;font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.termine{margin:8px 0 0;padding:0;list-style:none;columns:2 15ch;column-gap:18px}
.termine li{break-inside:avoid;display:flex;flex-wrap:wrap;gap:0 8px;padding:3px 0;font-size:0.8125rem;line-height:1.4}
.termine .d{font-family:var(--mono);color:var(--akzent)}
.termine .a{color:var(--fg)}
.termine .o{flex-basis:100%;color:var(--dim);font-size:0.75rem}

.bilanz-lifts{margin-top:9px}

/* ── Der Setlist-Zettel ──
   Papier ist in beiden Themen Papier: hell, mit dunkler Tinte. Kontrast
   #1d1a16 auf #f1ebdd liegt bei rund 15:1, der Stempel #a32a22 bei 6:1. */
.zettel{
  position:relative;margin:22px 6px 6px;padding:20px 18px 16px;
  background:#f1ebdd;color:#1d1a16;transform:rotate(-.6deg);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
:root[data-theme="light"] .zettel{box-shadow:0 6px 18px rgba(26,24,21,.18);border:1px solid #e0d8c6}
.zettel::before,.zettel::after{          /* Gaffa */
  content:'';position:absolute;top:-10px;width:62px;height:20px;
  background:rgba(52,50,48,.82);
}
.zettel::before{left:-8px;transform:rotate(-32deg)}
.zettel::after{right:-8px;transform:rotate(30deg)}
.z-kopf{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.18em;text-transform:uppercase;color:#5a5348}
.zettel ol{margin:10px 0 0;padding:0;list-style:none}
.zettel li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:5px 0;border-bottom:1px solid rgba(29,26,22,.12)}
.zettel li:last-child{border-bottom:0}
.zettel .song{font-family:var(--display);font-weight:600;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.zettel .z-w{font-family:var(--mono);font-size:0.8125rem;color:#3d372f}
.zettel li.gespielt .song{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#1d1a16}
.zettel .z-nochmal{font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#a32a22;border:2px solid #a32a22;padding:0 5px;transform:rotate(-3deg)}
.zettel li.zugabe .song{font-size:1rem;color:#3d372f}

/* Aftershow: Hilfsuebungen in der Einheit */
.hilfs-wahl{margin:10px 0 4px}
.hilfs-zeile{margin-top:16px}
.hz-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:8px}
.hz-kopf .ln{font-family:var(--display);font-weight:600;font-size:1.0625rem;text-transform:uppercase;letter-spacing:.04em;color:var(--fg)}
.hz-letzt{font-family:var(--mono);font-size:0.71875rem;color:var(--dim)}
.hilfs-zeile .set{flex:0 0 auto;min-width:56px;height:52px;font-size:1.25rem}
.hilfs-zeile .hz-plus{padding:0 14px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-style:dashed}
.zettel li.hilfs .song{font-size:1.0625rem}
/* Ansager: grosse Einblendung nach der Einheit, rot oder gold, auf einem
   dunklen Band, damit sie in beiden Themen lesbar bleibt. */
.ansager{position:fixed;left:0;right:0;top:26%;z-index:60;pointer-events:none;text-align:center;
  padding:14px 12px 16px;background:rgba(8,6,4,.86);
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1;
  font-size:clamp(2.125rem,9vw,5.25rem);color:#ff5a3a;
  text-shadow:0 0 1px #000,0 3px 0 #5a0d00,0 0 24px rgba(255,80,20,.55);overflow-wrap:anywhere}
.ansager.gold{color:#ffcf5a;text-shadow:0 0 1px #000,0 3px 0 #5a3c00,0 0 26px rgba(255,200,60,.55)}
.ansager small{display:block;margin-top:.45em;font-family:var(--mono);font-weight:700;font-size:max(.8125rem,.24em);
  letter-spacing:.18em;color:#ffe3a3;text-shadow:0 2px 0 #3a2400}
@media (prefers-reduced-motion:no-preference){
  .ansager.los{animation:ansage 2.2s ease-out forwards}
  @keyframes ansage{0%{opacity:0;transform:scale(1.3)}12%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(.98)}}
}
@media (prefers-reduced-motion:reduce){
  .ansager.los{animation:ansageRuhig 2.2s linear forwards}
  @keyframes ansageRuhig{0%,85%{opacity:1}100%{opacity:0}}
}
.feuerstoss{position:fixed;left:0;right:0;bottom:0;width:100vw;height:140px;z-index:55;pointer-events:none;image-rendering:pixelated}
/* Glut hinter dem Tageswort SCHWER */
.tageswort .tw{position:relative;display:inline-block;isolation:isolate;max-width:100%}
.tageswort .tw > span{position:relative;z-index:1}
.tageswort .glut{position:absolute;left:-8px;bottom:4%;width:calc(100% + 16px);height:92%;
  z-index:0;pointer-events:none;image-rendering:pixelated;opacity:.9;
  -webkit-mask-image:linear-gradient(to top,#000 40%,transparent 95%);mask-image:linear-gradient(to top,#000 40%,transparent 95%)}
.tageswort .tw:has(.glut) > span{text-shadow:0 0 2px #000,0 2px 0 rgba(0,0,0,.65),0 0 18px rgba(255,90,20,.45)}
.zugabe-check{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:0.9375rem;color:var(--fg);cursor:pointer}
.zugabe-check input{width:20px;height:20px;accent-color:var(--akzent)}

/* ── Goes to eleven: der Kopf der Wochenkarte ── */
.woche-kopf{display:flex;gap:12px;align-items:center;padding:12px 15px}
.woche-kopf .serie{margin:4px 0 0}
.amp svg{flex:0 0 auto;width:58px;height:58px}
.amp .strich{stroke:var(--line);stroke-width:2.5;stroke-linecap:round}
.amp .strich.an{stroke:var(--akzent)}
.amp .strich.elf.an{stroke:var(--rot);stroke-width:3.5}
.amp .knopf{fill:var(--panel2);stroke:var(--line);stroke-width:1.5}
.amp .zeiger{stroke:var(--fg);stroke-width:3;stroke-linecap:round}
.amp-txt{min-width:0}
.amp-zeile{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.amp-zahl{font-family:var(--display);font-size:1.75rem;font-weight:600;line-height:1;color:var(--akzent)}
.amp.elf .amp-zahl{color:var(--rot)}
.amp-was{font-size:0.8125rem;color:var(--muted)}
.amp .fine{margin:4px 0 0}
.serie{margin:0;font-size:0.8125rem;font-weight:600;color:var(--gruen)}
.serie.pausiert{color:var(--stahl)}
.serie.leer{font-weight:400;color:var(--muted)}
.serie.monat{font-weight:400;color:var(--muted)}
.serie.monat.sieg{font-weight:600;color:var(--akzent)}

/* ── Reunion und Verletzungspause ── */
.kalender .zelle.pause{background:repeating-linear-gradient(135deg,var(--stahl) 0 1.5px,transparent 1.5px 4px);border-color:var(--stahl)}
.kalender .legende i.pause{background:repeating-linear-gradient(135deg,var(--stahl) 0 1.5px,transparent 1.5px 3.5px);border:1px solid var(--stahl)}

@media (min-width: 900px) {
  #view-merch { max-width: 1080px; }
  .reiter [role="tab"]{flex:none;padding:13px 16px 11px}
}

/* ═══════════════════════════════════════════════════════════
   Home als Buehnenplakat. Ein Wort traegt den Tag, darunter nur, was
   heute etwas aendert, dann das Programm. Alles Normale steht als
   Instrument darunter: ein Punkt, ein Wert — wie die LEDs am Amp.
   ═══════════════════════════════════════════════════════════ */

.plakat{
  --ton:var(--akzent); --ton-tint:var(--tint-akzent);
  position:relative;margin-top:16px;padding:20px 18px 18px;
  border:1px solid var(--line);border-top:3px solid var(--ton);border-radius:2px;
  background:
    radial-gradient(120% 70% at 18% 0%,var(--ton-tint),transparent 70%),
    var(--panel);
}
.plakat.ton-technik{--ton:var(--stahl);--ton-tint:color-mix(in srgb,var(--stahl) 16%,transparent)}
.plakat.ton-normal{--ton:var(--gruen);--ton-tint:var(--tint-gruen)}
.plakat.ton-hart{--ton:var(--rost);--ton-tint:var(--tint-rost)}
.plakat > .kicker{color:var(--muted)}
.tageswort{
  font-family:'Anton',var(--display);font-weight:400;text-transform:uppercase;
  font-size:3.5rem;line-height:1;letter-spacing:.02em;color:var(--ton);
  margin:10px 0 8px;overflow-wrap:anywhere;
}
.tagessatz{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--fg);max-width:34ch}

.hinweise{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.hinweis{
  margin:0;padding-left:20px;position:relative;font-size:0.875rem;line-height:1.45;color:var(--muted);
}
.hinweis::before{
  content:'▲';position:absolute;left:0;top:.05em;font-size:0.6875rem;color:var(--hf);
}
.hinweis b{color:var(--fg);font-weight:600}

.programm{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.programm .name{font-size:1.75rem;margin:4px 0 6px;color:var(--fg)}
.programm ul{list-style:none;padding:0;margin:6px 0 4px}
.programm li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--line)}
.programm li:first-child{border-top:0}
.programm .ln{color:var(--fg)}
.programm .num{font-family:var(--mono);font-size:0.8125rem;color:var(--dim)}
.programm .kg{font-family:var(--mono);font-weight:700;color:var(--akzent);white-space:nowrap;text-align:right;min-width:6ch}
.programm .btn{margin-top:14px}

.instrumente{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.instr{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:.04em;color:var(--fg);
}
.instr i{width:8px;height:8px;border-radius:50%;background:var(--if);flex:none}
.instr.an{border-color:var(--if);background:var(--panel2)}
.instr:focus-visible{outline:none;box-shadow:var(--gb-fokus)}
.instr-detail{margin-top:2px}
.instr-detail .formzeile{margin-top:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-top-width:2px}

.zitat{margin:22px 0 0;padding:0 4px 0 30px;position:relative}
.zitat::before{
  content:'\201C';position:absolute;left:0;top:-.12em;font-family:var(--display);
  font-size:2.75rem;line-height:1;color:var(--akzent);
}
.zitat blockquote{margin:0;font-size:1.0625rem;line-height:1.5;font-style:italic;color:var(--fg)}
.zitat figcaption{margin-top:6px;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.zitat figcaption::before{content:'— '}
#zitat .meilenstein{margin-top:18px}

/* ── Wochen-Soundcheck ──
   Faellig: ein Knopf unter dem Wochenkopf. Danach die Vorsaetze an derselben Stelle. */
.sc-faellig{
  display:block;width:calc(100% - 30px);margin:0 15px 12px;padding:10px 12px;text-align:left;cursor:pointer;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
  color:var(--fg);background:var(--tint-akzent);border:1px solid var(--akzent);border-radius:2px;
}
.sc-faellig:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
/* Die Vorsaetze dieser Woche: ein kleiner Zettel im Wochenkopf */
.sc-vorsaetze{margin:4px 15px 14px}

/* Pult: ein Kanalzug je Zahl der Woche. Der Fader steht gegen die
   eigene Bestmarke der acht Wochen davor (soundcheck.js pegel). */
.scmixer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(6.5rem,100%),1fr));gap:12px 6px;
  margin-top:14px;padding:12px 8px;border:2px solid var(--line);border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--raster) 0 1px,transparent 1px 14px),var(--sunken)}
.scch{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.scch b{font-family:'Anton',var(--display);font-weight:400;font-size:clamp(1.25rem,6vw,1.75rem);line-height:1;
  color:var(--fg);font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere;text-align:center}
.scch span{font-family:var(--mono);font-size:0.6875rem;line-height:1.3;color:var(--muted);text-transform:uppercase;
  letter-spacing:.03em;text-align:center;max-width:100%;overflow-wrap:break-word;hyphens:auto}
.sctrack{position:relative;width:8px;height:84px;background:var(--bg);border:1px solid var(--line);border-radius:4px}
.sckn{position:absolute;left:50%;bottom:calc(var(--p,0) * (100% - 12px));width:30px;height:12px;margin-left:-15px;
  background:linear-gradient(180deg,var(--corner-hi),var(--corner));border:1px solid rgba(0,0,0,.6);border-radius:2px;
  box-shadow:0 2px 3px rgba(0,0,0,.45)}
.sckn::after{content:'';position:absolute;left:3px;right:3px;top:4px;height:2px;background:var(--akzent)}
@media (max-width:420px){ .sctrack{height:60px} }
/* Serie als Leuchten */
#sc-body .serie{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.scleds{display:inline-flex;gap:5px}
.scleds i{width:10px;height:10px;border-radius:50%;background:var(--sunken);border:1px solid var(--line)}
.scleds i.an{background:var(--akzent);border-color:var(--akzent);box-shadow:0 0 6px var(--akzent)}

/* Kleine Cases mit Gaffa-Titel, ueber die obere Kante geklebt */
.sc-case{--ton:var(--line);position:relative;display:block;margin:26px 0 0;padding:22px 14px 12px;min-width:0;
  border:2px solid var(--line);border-left:5px solid var(--ton);border-radius:2px;
  background:linear-gradient(180deg,var(--panel2),var(--panel) 40px) var(--panel);box-shadow:var(--case-shadow)}
.sc-case.gut{--ton:var(--gruen)} .sc-case.hakt{--ton:var(--rost)}
.gaffa{position:absolute;top:-13px;left:8px;z-index:3;margin:0;max-width:calc(100% - 16px);
  font-family:'Permanent Marker',var(--display);font-weight:400;font-size:0.9375rem;line-height:1.25;
  letter-spacing:.03em;text-transform:uppercase;color:var(--bg);background:var(--tape);padding:3px 12px 2px;
  transform:rotate(-1.2deg);overflow-wrap:anywhere;box-shadow:0 2px 3px rgba(0,0,0,.3);
  clip-path:polygon(0 8%,3% 0,97% 5%,100% 0,99% 92%,96% 100%,4% 95%,0 100%)}
.sc-case:nth-of-type(even) > .gaffa{transform:rotate(1deg)}
:root[data-theme="light"] .gaffa{color:var(--fg)}
#sc-body .sc-feld textarea{width:100%;margin:0}

/* Die Vorsaetze als Setlist auf Papier: Klebestreifen oben, Zahlen in
   Anton, Edding auf gestrichelter Linie. Die Tinte wie bei den Gaffa-Titeln. */
.scsetlist{--tinte:var(--bg);position:relative;margin:26px auto 0;padding:16px 18px 12px;max-width:560px;
  background:var(--tape);color:var(--tinte);border-radius:1px;box-shadow:0 8px 16px rgba(0,0,0,.35);transform:rotate(-.6deg)}
:root[data-theme="light"] .scsetlist{--tinte:var(--fg);box-shadow:0 6px 14px rgba(26,24,21,.16)}
.scsetlist::before{content:'';position:absolute;top:-9px;left:42%;width:84px;height:20px;background:rgba(255,255,255,.4);transform:rotate(-3deg)}
.scsetkopf{margin:0 0 4px;font-family:'Anton',var(--display);font-size:1.5rem;line-height:1.1;letter-spacing:.06em;
  text-transform:uppercase;overflow-wrap:anywhere}
.scsetlist .sc-feld{display:block;margin:0;padding:0;border:0;min-width:0}
.scsetlist .sc-feld > legend{display:block;padding:0;margin-bottom:6px;font-family:var(--mono);font-size:0.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinte)}
.scsetlist ol{margin:0;padding:0 0 0 30px;list-style:none;counter-reset:sc}
.scsetlist li{counter-increment:sc;position:relative;padding:2px 0;font-family:'Permanent Marker',var(--display);
  font-size:1.125rem;line-height:1.45;overflow-wrap:anywhere}
.scsetlist li::before{content:counter(sc);position:absolute;left:-30px;top:2px;font-family:'Anton',var(--display);font-size:1.25rem}
#sc-body .scsetlist .sc-vorsatz{display:block;width:100%;margin:0;padding:2px 0;background:transparent;color:var(--tinte);
  border:0;border-bottom:2px dashed color-mix(in srgb,var(--tinte) 45%,transparent);border-radius:0;
  font-family:'Permanent Marker',var(--display);font-size:1.125rem}
#sc-body .scsetlist .sc-vorsatz::placeholder{color:color-mix(in srgb,var(--tinte) 70%,var(--tape));opacity:1}
#sc-body .scsetlist .sc-vorsatz:focus{box-shadow:none;border-bottom-style:solid;border-bottom-color:var(--tinte);
  outline:2px solid var(--tinte);outline-offset:2px}
.scsetlist.klein{margin-top:14px;padding:12px 14px 8px;max-width:none}
.scsetlist.klein .scsetkopf{font-size:1.0625rem}
.scsetlist.klein li{font-size:1rem}
.scsetlist.klein::before{width:60px;height:16px;top:-7px}
#sc-speichern{margin-top:22px}

/* Archiv: jede Woche ein Case, gestempelt */
.sc-archiv .sc-case:first-child{margin-top:16px}
.sc-eintrag p{margin:4px 0;font-size:0.875rem;overflow-wrap:anywhere}
.sc-stempel{margin:12px 0 0 !important;text-align:right}
.scstamp{display:inline-block;padding:0 8px;font-family:'Anton',var(--display);font-size:1.125rem;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gruen);border:3px solid var(--gruen);border-radius:2px;transform:rotate(-6deg)}

/* ── Flightcase ──
   Kantenschutz aus Metall: an jeder Ecke ein Winkel, zwei Schenkel mit
   Lichtkante. Liegt ueber der Kante, faengt keine Klicks. Dazu ein Rand
   wie am Case und ein Schatten, der die Kiste vom Boden hebt. */
.card, .plakat, .woche-karte, .kutte, .monatstour{position:relative}
.card, .plakat, .woche-karte, .kutte{border-width:2px}
.plakat{border-top-width:3px}
.card::after, .plakat::after, .woche-karte::after, .kutte::after, .sc-case::after{
  content:'';position:absolute;inset:-4px;pointer-events:none;z-index:2;
  --k:linear-gradient(135deg,var(--corner-hi),var(--corner));
  background:
    var(--k) left top/16px 4px no-repeat, var(--k) left top/4px 16px no-repeat,
    var(--k) right top/16px 4px no-repeat, var(--k) right top/4px 16px no-repeat,
    var(--k) left bottom/16px 4px no-repeat, var(--k) left bottom/4px 16px no-repeat,
    var(--k) right bottom/16px 4px no-repeat, var(--k) right bottom/4px 16px no-repeat;
}
.card, .plakat, .woche-karte, .kutte{box-shadow:var(--case-shadow)}

/* Zusammen trainieren: nach dem Einchecken nur noch eine Zeile */
.zu-heute{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--gruen);background:var(--panel);font-size:0.9375rem;color:var(--fg)}
.zu-heute b{font-family:var(--mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px;font-weight:normal}
#session-zusammen .btn{margin-top:14px;width:100%}
#session-zusammen .zu-knoepfe{display:flex;gap:10px}
#session-zusammen .zu-knoepfe .btn{flex:1;width:auto}
#session-zusammen input{width:100%}

/* Jam zu zweit: wer dran ist, gross; die Zaehler klein darunter */
#wod-zweier-box .chips{margin:0 0 12px}
.wod-zweier{margin:0 0 14px;padding:14px 16px;background:var(--panel);border-left:3px solid var(--akzent)}
.wod-zweier.partner{border-left-color:var(--stahl)}
.wod-zweier .zw-dran{display:block;font-family:var(--display);font-size:1.75rem;font-weight:600;letter-spacing:.02em;color:var(--akzent)}
.wod-zweier.partner .zw-dran{color:var(--stahl)}
.wod-zweier .chips{margin:10px 0 0}
.wod-zweier .zw-zahl{margin:10px 0 0;font-family:var(--mono);font-size:0.8125rem;color:var(--fg)}
.wod-zweier .fine{margin:8px 0 0}
#stopwatch #sw-wechsel:disabled{opacity:.35;cursor:default}
/* Die Uhrleiste ist fest und rund 100 px hoch; ohne diesen Abstand liegt "Abschliessen" am Seitenende darunter. */
#wod-finish-pad{padding-bottom:calc(128px + env(safe-area-inset-bottom))}

/* ── Gitarrenrack ── */
/* Zehn Gitarren aus assets/pixel/gitarren.png (tools/pixel.mjs), je 24x56 am Boden ausgerichtet.
   Jede steht auf einem Stueck Schiene; die naechste, die fehlt, haengt dunkel daneben. */
.rack-zahl{margin:0 0 8px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;color:var(--muted)}
.rack{display:flex;flex-wrap:wrap;gap:20px 8px;align-items:flex-start;padding:18px 10px 12px;
  background:repeating-linear-gradient(90deg,var(--raster) 0 1px,transparent 1px 22px),var(--sunken);
  border:1px solid var(--line);border-radius:2px}
.gitarre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;width:88px;min-width:0}
.gtw{display:block;padding:0 6px;border-bottom:6px solid var(--corner)}
.gt{display:block;width:60px;aspect-ratio:24/56;background:url('../assets/pixel/gitarren.png') no-repeat;
  background-size:1000% 100%;background-position:calc(var(--i) * 100% / 9) 0;image-rendering:pixelated;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.gitarre b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:0.75rem;line-height:1.15;color:var(--fg)}
.gitarre > span:not(.gtw){font-size:0.6875rem;color:var(--muted);line-height:1.3}
.gitarre.offen .gt{filter:grayscale(1) brightness(.4);opacity:.8}
.gitarre.offen b{color:var(--muted)}
.rack-neu{margin-top:10px;background:none;border:0;padding:6px 0 0}
.gitarre-neu .gitarre b{color:var(--akzent)}

/* ============ Anlaesse: Banner unter dem Tageswort ============
   Das Motiv liegt als Bogen (assets/pixel/anlaesse.png): je Motiv zwei Bilder
   nebeneinander, --i waehlt das Motiv, steps(2) schaltet zwischen den Bildern.
   Gedenktage bleiben schlicht: kein Rahmen, keine Bewegung.                    */
.anlass{--s:3px;position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;
  margin-top:14px;padding:8px 40px 8px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.anlass[hidden]{display:none}
.anlass-szene{display:flex;align-items:flex-end;gap:2px;flex:none}
.apx{--i:0;display:inline-block;flex:none;width:calc(var(--s)*15);height:calc(var(--s)*15);
  background:url('../assets/pixel/anlaesse.png') no-repeat;background-size:auto 100%;
  background-position:calc(var(--i)*-30*var(--s)) 0;image-rendering:pixelated}
.apx.anim{animation:apx-flip .9s steps(2) infinite}
.apx.spaet{animation-delay:-.45s}
@keyframes apx-flip{
  from{background-position:calc(var(--i)*-30*var(--s)) 0}
  to{background-position:calc((var(--i)*-30 - 30)*var(--s)) 0}}
.anlass-text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;flex:1 1 180px}
.anlass-name{font-family:'Permanent Marker',var(--display);font-weight:400;font-size:0.9375rem;line-height:1.25;
  letter-spacing:.03em;text-transform:uppercase;color:var(--bg);background:var(--tape);padding:3px 12px 2px;
  transform:rotate(-1.2deg);overflow-wrap:anywhere}
:root[data-theme="light"] .anlass-name{color:var(--fg)}
.anlass-satz{font-size:0.9375rem;line-height:1.4;color:var(--fg);overflow-wrap:anywhere}
.anlass-x{position:absolute;top:0;right:0;width:44px;height:44px;border:0;border-radius:2px;
  background:transparent;color:var(--muted);font-size:0.875rem;cursor:pointer}
.anlass-x:hover,.anlass-x:focus-visible{color:var(--fg);background:var(--panel2)}
.anlass[data-typ="gedenk"]{background:transparent;border-color:transparent}
.anlass[data-typ="gedenk"] .anlass-name{background:transparent;color:var(--muted);padding-left:0;transform:none}
@media (min-width:600px){.anlass{--s:4px}}
@media (prefers-reduced-motion:reduce){.apx.anim{animation:none}}

/* Hell: zwei kleine Texte der Korrektur lagen knapp unter 4,5:1 (4,03 und 4,29). */
:root[data-theme="light"] .korrektur .ks b{color:#8a3f15}
:root[data-theme="light"] .korrektur .kn{color:var(--muted)}

/* Kleine Telefone: der Anlass-Banner schrumpft auf den Namen, damit der
   Knopf "Training starten" im ersten Bild bleibt. */
@media (max-height:700px){.anlass-szene,.anlass-satz{display:none}}