:root {
  --bg: #08080b;
  --surface: #141419;
  --surface-2: #1e1e26;
  --border: #262630;
  --border-2: #363644;
  --text: #e2ddd6;
  /* 4,7:1 auf --surface. Traegt jedes Label, jede Meta-Zeile und die
     ruhende Navigation — bei 0,7rem ist das die Schwelle, ab der
     Kleintext lesbar bleibt. Der Vorgaenger #68687a lag bei 3,5:1. */
  --text-2: #7e7e90;
  --text-3: #a374f0;
  --text-4: #00ffe4;

  /* Wettkampf-Farbcode (IKSF) — fuer dunklen Grund aufgehellt */
  --bell-8:  #f06bb0;
  --bell-10: #bfbfbf;
  --bell-12: #4a90e2;
  --bell-16: #f2c230;
  --bell-20: #a374f0;
  --bell-24: #3ecf6e;
  --bell-28: #f59c48;
  --bell-32: #f0615a;
  --bell-36: #a3a9b4;
  --bell-40: #e8e4dc;

  /* Bandstufen stehen nicht auf der Kilo-Skala und haben im Wettkampfcode
     keine Entsprechung -- trotzdem sollen sie im Training genauso auffallen
     wie eine Bell-Farbe. Orange, weil Kettlebell (Standardgewicht 16 kg)
     gelb ist und beides nebeneinander klar unterscheidbar bleiben soll. */
  --band: #f0883f;

  /* Kurzes Band als Gruen -- aber nicht als das Gruen, das hier schon
     vergeben ist: #3ecf6e ist die 24er-Bell und zugleich Bandstufe 1, und
     genau die steht im Trainingsplan direkt neben diesem Badge. Mint
     (--accent) heisst "starten", Core hat sein Cyan. Bleibt Hue 79: zur
     Stufe-1-Farbe 61 Grad, zum Akzent 84, zu Core 113. Zum Kettlebell-Gelb
     sind es 34 Grad -- die beiden stehen in der Uebungsauswahl
     untereinander, dort trennt sie zusaetzlich die Beschriftung. */
  --band-short-equip: #9ed13f;

  /* Die Stufe eines Bandes traegt die Farbe des Bandes. Neue Toene braucht
     das nicht: alle fuenf stehen schon im Wettkampfcode, nur meinen sie
     hier kein Gewicht. Schwarz waere auf --bg unlesbar und erscheint als
     das aufgehellte Grau der 36er-Bell. */
  --band-green:  var(--bell-24);
  --band-blue:   var(--bell-12);
  --band-yellow: var(--bell-16);
  --band-red:    var(--bell-32);
  --band-black:  var(--bell-36);

  /* Core traegt kein Gewicht und darf deshalb keine Wettkampffarbe leihen.
     Hue 192 ist der einzige Ton, der in dieser Palette noch frei steht: zum
     12er-Blau 24 Grad, zum Accent 29 -- gegen den leuchtenden Mint-Akzent
     trennt ihn die Saettigung, gegen alles Warme (Rot, Band, Orange, Gelb)
     liegen ueber 145 Grad. Genau darauf kommt es an, denn im Geraete-Badge
     steht Core direkt neben Kettlebell-Gelb und Band-Orange. */
  --core: #38c6e0;

  /* Hue 163, gewaehlt. Gehoert bewusst keiner Bell -- steht aber naeher
     am 24-kg-Wettkampfgruen (23 Grad) als am 12-kg-Blau (49 Grad). Wo
     beide aufeinandertreffen, etwa am erledigten 24-kg-Satz neben der
     Markierung der laufenden Uebung, trennt sie die Form, nicht der
     Farbton: Flaeche und Haken gegen Balken und Rahmen. */
  --accent: #0cf5b3;
  --accent-ink: #05201d;
  --success: var(--bell-24);
  --danger: var(--bell-32);
  --radius-sm: 5px;
  --radius: 10px;
  --touch: 48px;
  --top: 58px;
  --nav: 64px;
}

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

/* Jede Klasse setzt --bell auf die Farbe ihrer Wettkampf-Bell; alles,
   was ein Gewicht zeigt, liest --bell aus. */
.bell-8  { --bell: var(--bell-8); }
.bell-10 { --bell: var(--bell-10); }
.bell-12 { --bell: var(--bell-12); }
.bell-16 { --bell: var(--bell-16); }
.bell-20 { --bell: var(--bell-20); }
.bell-24 { --bell: var(--bell-24); }
.bell-28 { --bell: var(--bell-28); }
.bell-32 { --bell: var(--bell-32); }
.bell-36 { --bell: var(--bell-36); }
.bell-40 { --bell: var(--bell-40); }
/* Nur die Stufe traegt Farbe. Die Zeile drumherum bleibt grau -- welches
   Band gemeint ist, steht schon am Badge, und zwei Farbtraeger nebeneinander
   wuerden nur um dieselbe Aussage konkurrieren. */
.band-long, .band-short { --bell: var(--text-2); }

/* Stufe 1-5 je Bandsorte. Lang und kurz laufen dieselbe Skala, aber nicht
   in derselben Reihenfolge -- deshalb haengt die Farbe am Geraet. */
.band-long-1,  .band-short-1 { --bell: var(--band-green); }
.band-long-2                 { --bell: var(--band-blue); }
.band-long-3                 { --bell: var(--band-yellow); }
.band-long-4                 { --bell: var(--band-red); }
.band-short-2                { --bell: var(--band-yellow); }
.band-short-3                { --bell: var(--band-red); }
.band-short-4                { --bell: var(--band-blue); }
.band-long-5,  .band-short-5 { --bell: var(--band-black); }
/* Core traegt kein Gewicht, also auch keine Wettkampffarbe. */
.core    { --bell: var(--band); }

.kg {
  color: var(--bell, var(--text));
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}

/* Eine Bandstufe ist kein Gewicht — das sagt hier die Form. Die Farbe sagt
   etwas anderes: welches Band in der Hand liegt. Der Rahmen haelt beides
   auseinander, auch wo eine Stufe denselben Ton trifft wie eine Bell. */
.kg.band-level {
  font-weight: 500;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.86em;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
  padding-top: var(--top);
  padding-bottom: var(--nav);
}

/* ── Top bar ── */
.top-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--top);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

/* Dieselbe Spalte wie main — sonst klebt die Wortmarke auf breiten
   Fenstern am Rand und verliert den Bezug zum Inhalt darunter. */
.top-bar-inner {
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Der Schriftzug ist eine freigestellte Bitmap aus dem Logo-Rendering
   (resources/logo/build_logo.py). Der schwarze Grund ist dort per
   Alpha-Rampe entfernt, die Leiste scheint also durch — deshalb liegt hier
   weder Flaeche noch Rahmen darunter. Er behaelt sein Seitenverhaeltnis
   ueber die Hoehe (HEWN: 5,13:1); die Datei liegt in dreifacher
   Aufloesung vor. */
.brand-wordmark {
  height: 19px;
  width: auto;
  flex-shrink: 0;
}

.logout-link {
  font-size: 0.78rem;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 0;
}
.logout-link:hover { color: var(--text); }

/* ── Bottom nav ── */
.site-nav {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--nav);
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 20;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 500;
}

.nav-item svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active { color: var(--accent); }

/* ── Main ── */
main {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 8px;
}

/* ── Typography ── */
h1 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 20px;
}

h2 {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
  margin: 28px 0 10px;
}

h3 {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 20px 0 8px;
  color: var(--text);
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  height: var(--touch);
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:active { opacity: 0.8; }

/* EMOM starten hebt sich vom generischen Mint-"starten" ab: eigener Block,
   eigene Farbe. Core-Cyan, weil hier kein Geraete-Badge danebensteht. */
.btn-emom-start { background: var(--core); color: var(--bg); }
.btn-emom-start:active { opacity: 0.8; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  height: var(--touch);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:active { background: var(--surface); }

.btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 0.82rem;
  width: auto;
  border-radius: var(--radius-sm);
}

.btn-danger-text { color: var(--danger) !important; border-color: transparent; }

/* Ein Knopf ohne Rahmen und ohne Flaeche: er traegt eine Entscheidung, die
   neben einer betonten steht und nicht mit ihr um den Blick streiten soll.
   Die Trefferflaeche bleibt die volle -- nur zu sehen ist sie erst beim
   Antippen. */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  height: var(--touch);
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
}
.btn-quiet:active { background: var(--surface-2); }
.btn-quiet-danger { color: var(--danger); font-weight: 400; }

/* Gefuellt rot statt mint: Mint heisst in dieser App "starten". Der Knopf,
   der etwas vernichtet, darf sie nicht tragen. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  height: var(--touch);
  background: var(--danger);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger:active { opacity: 0.8; }

/* ── Stack ── */
.stack > * + * { margin-top: 10px; }
.stack-lg > * + * { margin-top: 16px; }

/* Knoepfe, die etwas hinzufuegen (Uebung, EMOM-Block, Complex-Block):
   so viele wie noetig, jeder so breit wie sein Wort. Anders als
   `.actions`, das genau ein Paar gleich breiter Knoepfe nebeneinander
   erwartet, muss diese Reihe umbrechen koennen. */
.block-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Inputs ── */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="datetime-local"],
select {
  width: 100%;
  height: var(--touch);
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
/* Das Loeschkreuz im Suchfeld zeichnet der Browser -- in Chromium in einem
   Blau, das in dieser Palette nirgends vorkommt. appearance:none nimmt es
   ganz weg; es soll bleiben, nur gedaempft. */
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.5); }

/* Zeitfeld (Schmerz, Fahrt): der Browser zeichnet es nach eigenem Schema --
   hell und mittig, mit buntem Kalendersymbol. color-scheme:dark holt den
   dunklen Auswahldialog, display:block und text-align:left verhindern, dass
   iOS das Feld zusammenschiebt oder den Wert zentriert. */
input[type="datetime-local"] {
  color-scheme: dark;
  display: block;
  min-width: 0;
  text-align: left;
  font-feature-settings: "tnum" 1;
}
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }

input[type="number"] { font-feature-settings: "tnum" 1; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus { border-color: var(--accent); }

/* appearance:none nimmt dem <select> den nativen Pfeil komplett -- ohne
   Ersatz sieht es aus wie ein Textfeld, in dem nichts zum Antippen einlaedt. */
select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237e7e90' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 6px;
}

/* ── Card ── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* ── List items ── */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  gap: 12px;
}
.list-item:last-child { border-bottom: none; }
a.list-item:hover { background: var(--surface-2); }

/* ── Abschnitte einer Liste ──
   Zwei Haelften auf einer Seite, die nicht dasselbe sind: eigene Trainings
   und feste Vorlagen. Die globale h2-Stufe ist die leiseste der App und
   traegt diese Trennung nicht -- sie ist fuer die Unterordnung gedacht, hier
   also fuer die Dauergruppen innerhalb der Vorlagen. */
.section-head {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  /* Der Akzent ist sonst die Farbe der Bedienung. Hier traegt ihn Text ohne
     Flaeche, Rahmen oder Polsterung -- wie die Wortmarke und die laufende
     Pausenuhr, die beide ebenfalls nur gefaerbt und nicht antippbar sind. */
  color: var(--accent);
  margin: 0 0 4px;
}
.section-sub {
  font-size: 0.78rem;
  color: var(--text-2);
  margin: 0 0 12px;
}
/* Die Dauergruppe ordnet sich der Sektion unter. Das ist genau die leise
   Stufe, die h2 global traegt -- hier auf h3, damit die Gliederung
   h1 > h2 > h3 stimmt und nicht die Schriftgroesse die Ebene bestimmt. */
.group-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 20px 0 8px;
}
/* Der Abstand macht die Zweiteilung sichtbar, bevor irgendwer liest. */
.section-split {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 36px 0 20px;
}

/* ── Stat grid ── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-2);
  font-weight: 500;
}

/* Die Stats-Seite zeigt Eckdaten, keine Kennzahlen zum Weiterklicken: drei
   ruhige, zentrierte Kacheln statt zwei grosser. Stand frueher als zweite,
   globale Definition im <style> der Seite und hat das Dashboard mit
   ueberschrieben — als Modifier trifft es nur noch, was es treffen soll. */
.stat-grid.compact { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-grid.compact .stat-card { text-align: center; }
.stat-grid.compact .stat-value { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.stat-grid.compact .stat-label { font-size: 0.75rem; }

@media (max-width: 480px) {
  .stat-grid.compact { grid-template-columns: 1fr 1fr; }
}

/* ── Ziele ── */
.goal-current { font-size: 0.85rem; color: var(--text-2); margin-bottom: 12px; }

/* Wert und Zeitraum gehoeren zusammen ("10 pro Woche") und stehen deshalb
   in einer Zeile; select und number-input sahen bislang identisch aus und
   klebten ohne Abstand aneinander -- kaum als zwei getrennte Felder zu lesen. */
.goal-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goal-form-row input[type="number"] { flex: 0 0 auto; width: 88px; }
.goal-form-row select { flex: 0 0 auto; width: auto; }
.goal-form-unit { flex: 0 0 auto; font-size: 0.85rem; color: var(--text-2); }

/* Speichern und Loeschen sind zwei getrennte <form>-Elemente (eigene
   action/method), teilen sich hier aber optisch eine Zeile statt je die
   volle Breite zu beanspruchen -- dafuer je die Haelfte statt 100%. */
.goal-form-actions { display: flex; gap: 8px; margin-top: 10px; }
.goal-form-actions > * { flex: 1 1 0; }

/* Card-Inhalt braucht dieselbe seitliche Polsterung wie .list-item, sonst
   klebt die Ziele-Liste auf dem Start-Screen am Kartenrand. */
.goal-row { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.goal-row:last-child { border-bottom: none; }

.goal-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.goal-row-label { font-weight: 600; font-size: 0.9rem; }
.goal-row-value { font-size: 0.8rem; color: var(--text-2); font-feature-settings: "tnum" 1; white-space: nowrap; }

.goal-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 8px;
}

.goal-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.goal-bar-fill-done { background: var(--success); }

.goal-dots { display: flex; gap: 6px; }

.goal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: transparent;
}

.goal-dot-done { background: var(--success); border-color: var(--success); }

.goal-dots-caption { display: block; font-size: 0.75rem; color: var(--text-2); margin-top: 6px; }

/* ── Stats: Uebungskachel ── */
.ex-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.ex-stat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 4px;
}

.ex-stat-name { font-weight: 600; font-size: 1rem; margin: 0; }
.ex-stat-count { font-size: 0.8rem; color: var(--text-2); margin: 0; }

.ex-stat-prs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--text-2);
}
.ex-stat-prs strong { color: var(--text); }

/* ── Dashboard ── */
.greeting {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 24px;
}

/* Zweizeilig: oben Datum und Volumen an den Kanten, darunter die Meta-Zeile.
   Beim Ueberfliegen einer Liste vergleicht man Zahlen an einer Kante, nicht
   mitten im Text -- deshalb steht das Volumen rechts und nicht in der
   Meta-Zeile mit. */
.session-row {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  /* Der Balken traegt die Farbe der schwersten Bell der Einheit. Ueber eine
     Liste hinweg wird daraus ein Streifenbild: schwere Tage stechen heraus,
     ohne dass irgendwo eine Zahl gelesen werden muss. */
  box-shadow: inset 3px 0 0 var(--bell, var(--border-2));
}
/* Ohne Kettlebell gibt es kein Gewicht -- also auch keine Gewichtsfarbe.
   Der Bandton sagt stattdessen, worum es in der Einheit ging. */
.session-row-noweight { --bell: var(--band); }
.session-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.session-volume {
  font-size: 0.88rem;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  color: var(--bell, var(--text));
}

/* Die Zahlen in der Meta-Zeile sind die Aussage, die Woerter nur ihre
   Einheit. Beide auf derselben Stufe zu lassen macht die Zeile zu Grau. */
.session-meta b {
  color: var(--text);
  font-weight: 600;
}

.session-date { font-size: 0.88rem; }
.session-meta { font-size: 0.78rem; color: var(--text-2); font-feature-settings: "tnum" 1; }

/* ── Active session ── */

/* Jede Aktion im Training tauscht die ganze Uebungsliste aus (htmx-Ziel
   #exercises). Chromes Scroll-Anchoring sucht sich vorher einen Anker in
   genau diesem Teilbaum aus; nach dem Tausch gibt es den Knoten nicht
   mehr, und der Browser korrigiert die Scrollposition um einen Betrag,
   der ins Nichts zeigt -- die Seite sprang beim "Satz absolvieren" ans
   Ende. Der Teilbaum kommt deshalb als Anker nicht in Frage; der Rest der
   App behaelt das Anchoring. */
#exercises {
  overflow-anchor: none;
}

.session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.session-header h1 { margin-bottom: 0; }

.session-timer {
  font-size: 1.4rem;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* Die Uebung ist die Kapitelueberschrift ihres Blocks, kein weiterer Satz:
   eigene Flaeche, kraeftigere Trennlinie als die Hairlines der Satzzeilen
   darunter und ein Akzentstrich an der Kante. Ohne diese drei Signale
   laeuft im Training eine Uebung optisch in die naechste. */
.exercise-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 14px 16px 13px 19px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  /* Neutral, solange diese Uebung nicht dran ist. Die Akzentfarbe ist
     der laufenden vorbehalten -- traegt sie jede Zeile, sagt sie nichts. */
  box-shadow: inset 3px 0 0 var(--border-2);
  /* Beim Scrollen bleibt die Uebung unter der Top-Bar stehen, bis ihr
     letzter Satz durch ist — waehrend eines langen Blocks weiss man sonst
     nach drei Saetzen nicht mehr, worin man gerade steckt. Der Block
     begrenzt das Kleben von selbst: sein Rand ist der Containing Block,
     also schiebt die naechste Uebung die vorige heraus.
     Dazu muss .exercise-block clip statt hidden sein — hidden waere ein
     Scroll-Container und damit der Scrollport, an dem sticky misst. */
  position: sticky;
  top: var(--top);
  z-index: 2;
}
/* Der Name bekommt die Zeile fuer sich. Neben Pausenstepper und
   Skip-Knopf blieben ihm gut hundert Pixel, und "Clean & Press /
   Umsetzen und Stossen" brach darin auf vier Zeilen um. */
.exercise-title-row .exercise-title-main {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.exercise-title-text {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Freigestelltes 3D-Icon der Uebung. Es steht neben dem Namen, der seine
   Zeile fuer sich hat -- die Kachel darf deshalb Groesse haben, ohne dem
   Namen Platz wegzunehmen. */
.exercise-thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}
.rest-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 0.8rem;
}
.rest-adj {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rest-adj:active { background: var(--border); }
.rest-disp {
  min-width: 34px;
  text-align: center;
  font-feature-settings: "tnum" 1;
}

/* Vollbild statt Fussleiste: in Pause, Halte-Countdown wie EMOM ist
   ohnehin nichts ausserhalb zu bedienen, die Uhr darf den ganzen Schirm
   haben statt einer Randnotiz -- derselbe Aufbau wie .picker
   (margin/max-width auf 0 bzw. 100%, damit der globale Dialog-Reset nicht
   dazwischenfunkt). Alle drei Dialoge teilen sich das Geruest; nur die
   Zahlenfarbe unterscheidet sie -- Gruen heisst in der App "starten"/aktiv
   (siehe --accent weiter oben), Lila ist das Warten (Pause wie EMOM-Takt). */
.rest-countdown,
.hold-timer-dialog,
.emom-dialog {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
  border: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rest-countdown[open],
.hold-timer-dialog[open],
.emom-dialog[open] { display: flex; }
.rest-countdown::backdrop,
.hold-timer-dialog::backdrop,
.emom-dialog::backdrop { background: rgba(8, 8, 11, 0.72); }
.rest-countdown-time,
.hold-timer-dialog-time {
  font-weight: 700;
  letter-spacing: -0.05em;
  font-feature-settings: "tnum" 1;
  line-height: 1;
}
.rest-countdown-time { font-size: 7.5rem; color: var(--text-3); }
/* Groesser als die Pausenanzeige: waehrend des Haltens soll die verbleibende
   Zeit auch auf einen Blick von einem abgelegten Handy lesbar sein, ohne
   Wischen oder Annaehern -- die Karte hat sonst nur Label und
   Abbrechen-Knopf, also reichlich Platz nach oben. */
.hold-timer-dialog-time { font-size: clamp(8rem, 26vw, 11rem); color: var(--accent); }
.rest-countdown-label,
.hold-timer-dialog-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-2);
  margin-top: 14px;
}
/* Die naechste Runde eines Complex, waehrend die Pause laeuft (siehe
   rest_round_items in sessions.py) -- braucht mehr Abstand zur Pausen-
   Beschriftung als .upcoming-heading sonst mitbringt. */
.rest-countdown .upcoming-heading { margin-top: 28px; }
.rest-skip {
  margin-top: 36px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  padding: 10px 26px;
  border-radius: 24px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}
.rest-skip:active { background: var(--border); }

/* Der Abstand zwischen zwei Bloecken ist doppelt so gross wie der Rhythmus
   der Satzzeilen im Block — erst dadurch gruppieren die Saetze sichtbar
   unter ihrer Uebung statt als eine durchlaufende Liste. */
.exercise-block {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  /* clip, nicht hidden: schneidet genauso an der abgerundeten Kante ab,
     macht den Block aber nicht zum Scroll-Container — sonst haette die
     klebende Titelzeile keinen Scrollport ausser sich selbst. */
  overflow: clip;
  margin-bottom: 22px;
}

.exercise-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: none; }

.set-num {
  font-size: 0.7rem;
  color: var(--text-2);
  min-width: 40px;
  flex-shrink: 0;
}

.set-numbers {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.set-row-done {
  background: rgba(255, 255, 255, 0.025);
  background: color-mix(in srgb, var(--bell, #3ecf6e) 9%, transparent);
  border-left: 3px solid var(--bell, var(--success));
  padding-left: 13px;
  flex-wrap: wrap;
}

.set-done-indicator {
  font-size: 0.72rem;
  color: var(--success);
  font-weight: 600;
}

/* Live-Vergleich mit der Historie: nur bei einer Verbesserung sichtbar,
   deshalb eine eigene Zeile unter dem Satz statt ein weiteres Feld
   in der ohnehin vollen Kopfzeile. */
.set-best-badge {
  flex-basis: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  padding-left: 50px;
}

.rest-timer {
  font-size: 0.75rem;
  color: var(--text-2);
  font-feature-settings: "tnum" 1;
  min-width: 36px;
  text-align: right;
}

/* Set form — stepper layout */
.set-form-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.set-form-card:last-child { border-bottom: none; }

.set-form-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.block-progress-label {
  color: var(--text-3);
  font-size: 0.9em;
  font-weight: bold;
  margin: 4px 16px;
}
/* Alle Uebungen der aktuellen Complex-Runde zusammen -- dieselbe
   Dringlichkeit wie .block-current-exercise, nur fuer mehrere Zeilen
   statt einer: die Runde wird ohne Ablegen der Bell in einem Zug
   durchgemacht, also muss man sie vorher komplett im Blick haben. */
.block-round-exercises {
  list-style: none;
  margin: 16px 0;
  padding: 0 16px;
}
.block-round-thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}
.block-round-exercise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f06bb0;
  letter-spacing: -0.02em;
  text-align: center;
  padding: 6px 0;
}
/* EMOM: die Liste zeigt alle Uebungen der Runde nur zur Orientierung, ohne
   Hervorhebung -- sie laufen alle innerhalb derselben Minute. Bilder
   bleiben deshalb bei allen voll sichtbar, nur der Text ist ruhiger. */
.emom-round-exercises .block-round-exercise {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-3);
}
.emom-countdown {
  /* Bewusst kleiner als .hold-timer-dialog-time -- Runde/Uebungsliste
     brauchen darunter noch Platz -- aber deutlich groesser als vorher, damit
     die Restzeit im Minutentakt auch im Vorbeigehen lesbar bleibt. */
  font-size: clamp(5.5rem, 18vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  font-feature-settings: "tnum" 1;
  text-align: center;
  color: var(--accent);
  margin: 8px 0;
}


.stepper-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
/* Die Wiederholungszahl ist die Nebensache in EMOM/Complex -- die
   Uebung steht ja schon gross oben. Ohne Gegenzahl wuerde ein einzelner
   Stepper von `.stepper-group`s flex:1 auf die volle Kartenbreite
   gezogen und saehe wichtiger aus als der Uebungsname selbst. */
.stepper-row-compact {
  max-width: 150px;
}
.stepper-row-compact .stepper { height: 40px; }
.stepper-row-compact .stepper-input { font-size: 0.95rem; }
.stepper-row-compact .stepper-btn { width: 34px; font-size: 1.05rem; }

.stepper-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stepper-group label {
  font-size: 0.65rem;
  color: var(--text-2);
  margin-bottom: 0;
}

.stepper {
  display: flex;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 48px;
}

.stepper-btn {
  width: 44px;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper-btn:active { background: var(--border-2); }

.stepper-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  font-feature-settings: "tnum" 1;
  padding: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.add-exercise-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
/* Der Knopf steht allein in der Zeile und nimmt sie ganz ein: als
   schmaler Knopf neben einer leeren Flaeche saehe die Zeile halbfertig
   aus, und ein breites Ziel trifft sich mit muedem Daumen leichter. */
.add-exercise-btn { flex: 1; padding: 0 16px; height: 44px; }

/* ── Workout plan ── */
.exercise-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.exercise-plan-row:last-child { border-bottom: none; }
.exercise-plan-row .exercise-thumb { width: 44px; height: 44px; align-self: center; }
.exercise-plan-name { font-size: 0.88rem; }
.exercise-plan-detail { font-size: 0.8rem; color: var(--text-2); font-feature-settings: "tnum" 1; white-space: nowrap; }

/* ── New workout form ── */
.form-group { margin-bottom: 14px; }

.exercise-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 8px;
}

.exercise-row-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

/* Kleiner als in der laufenden Session: dort steht das Icon in einer Zeile
   fuer sich, hier teilt es sich die Breite mit dem Namen -- und der Name
   ist das, wonach man die Zeile sucht. */
.exercise-row-header .exercise-thumb { width: 40px; height: 40px; }

/* Der Uebungsname ist der Ausloeser der Auswahl und braucht dafuer die
   ganze Restbreite. Im <select> von frueher blieben ihm auf dem Handy gut
   200px -- lange Namen waren nach zwei Woertern abgeschnitten, und die Art
   der Uebung stand ueberhaupt nicht in der Karte. Der Rahmen bleibt, damit
   die Karte weiter wie ein Feld aussieht, das man antippen kann. */
.exercise-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.exercise-pick:active { border-color: var(--accent); }

.exercise-pick-name {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Zwei Zeilen darf ein Name brauchen, danach wird gekuerzt: sonst
     schoebe ein langer Name die Saetze aus dem Blick. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.set-specs-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.set-spec-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.set-spec-label {
  font-size: 0.7rem;
  color: var(--text-2);
  font-feature-settings: "tnum" 1;
  min-width: 26px;
  flex-shrink: 0;
}

.set-spec-inputs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.set-spec-input {
  width: 48px !important;
  height: 36px !important;
  text-align: center;
  padding: 0 6px !important;
  flex-shrink: 0;
}

/* Kompakter Zwilling des Satzformular-Steppers. Dort stehen 48px hohe
   Knoepfe -- hier liegen mehrere Satzzeilen untereinander, und in derselben
   Zeile stehen ausserdem noch Wiederholungen, Einheit und Loeschknopf: auf
   einem 360px-Handy passt das nur in der schmalen Fassung. */
.set-spec-stepper {
  display: flex;
  align-items: stretch;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
/* Ohne das gewinnt das display:flex oben, und der Stepper bliebe bei einer
   Core-Uebung sichtbar. */
.set-spec-stepper[hidden] { display: none; }

.set-spec-stepper .set-spec-input {
  width: 44px !important;
  height: 100% !important;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.set-spec-btn {
  width: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-spec-btn:active { background: var(--border-2); }

.set-spec-unit {
  font-size: 0.78rem;
  color: var(--text-2);
  flex-shrink: 0;
}

.set-remove-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
  margin-left: auto;
}
.set-remove-btn:hover { color: var(--danger); }

/* Umsortieren und entfernen -- rechts in der Namenszeile der Karte.

   Als eigene Gruppe, damit das gap:10px der Kopfzeile nur zwischen Name
   und Knoepfen wirkt und die drei Knoepfe eng beieinander stehen. */
.exercise-row-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* Das margin-left:auto des Loeschknopfes schoebe ihn hier von den Pfeilen
   weg -- in dieser Gruppe gehoert er direkt daneben. */
.exercise-row-controls .set-remove-btn { margin-left: 2px; }

.exercise-move-btn {
  /* Der Pfeil selbst ist klein, die Trefferflaeche darf es nicht sein --
     30px ist die Grenze, ab der dem Uebungsnamen daneben auf einem
     schmalen Handy zu wenig Platz bleibt. */
  width: 30px;
  height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.7rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.exercise-move-btn:hover:not(:disabled) { color: var(--text); }
/* Am Rand der Liste zeigt der Pfeil ins Leere: sichtbar bleiben, damit die
   Karten nicht unterschiedlich breit wirken, aber erkennbar tot. */
.exercise-move-btn:disabled { opacity: 0.3; cursor: default; }

/* ── Template detail — per-set chips ── */
.set-specs-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.set-spec-chip {
  font-size: 0.7rem;
  color: var(--bell, var(--text-2));
  font-feature-settings: "tnum" 1;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 3px;
}

.form-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

/* ── History exercise detail ── */
.history-exercise {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.history-exercise-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.history-exercise-name { font-size: 0.88rem; font-weight: 600; }
.history-exercise-vol { font-size: 0.78rem; color: var(--text-2); flex: 1; }
.delta { font-size: 0.75rem; font-weight: 600; }
.delta-pos { color: var(--success); }
.delta-neg { color: var(--danger); }

.history-sets {
  display: grid;
  grid-template-columns: 76px 1fr 1fr;
}
/* Ohne Gewichtsspalte bleiben zwei. */
.history-sets-2 { grid-template-columns: 76px 1fr; }

.history-set-cell {
  padding: 9px 16px;
  font-size: 0.82rem;
  font-feature-settings: "tnum" 1;
  border-bottom: 1px solid var(--border);
}
.history-set-cell.muted { color: var(--text-2); }
.history-set-last .history-set-cell { border-bottom: none; }

.side-volumes {
  display: flex;
  gap: 16px;
  padding: 8px 16px 10px;
  font-size: 0.78rem;
  color: var(--text-2);
  font-feature-settings: "tnum" 1;
}

/* ── Bild zur Session ──
   Steht ohne Ueberschrift da, wo vorher die Vorschau hing. Der Abstand ist
   deshalb der einer Ueberschrift: der Knopf faengt hier einen neuen
   Abschnitt an, er gehoert nicht mehr zur Uebungsliste darueber. */
.card-download { margin-top: 28px; }

/* ── PR list ── */
.pr-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.pr-item:last-child { border-bottom: none; }
.pr-name { font-size: 0.88rem; font-weight: 600; margin-bottom: 4px; }
.pr-stats { font-size: 0.78rem; color: var(--text-2); font-feature-settings: "tnum" 1; }

/* ── Chart section ──
   Chart.js rechnet seine Hoehe sonst aus dem Seitenverhaeltnis der
   Leinwand — auf einer breiten Flaeche wird aus einem Balkendiagramm
   dadurch eine Wand. Die Hoehe steht hier, das Diagramm fuellt sie
   (dazu maintainAspectRatio: false in den Vorlagen). */
.chart-wrap { margin-bottom: 24px; }
.chart-box { position: relative; height: 210px; }
.chart-box-flat { height: 150px; }
.chart-box-sm { height: 140px; }
.chart-title { font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }

/* ── Login (standalone) ── */
.login-page {
  background: var(--bg);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 15px;
  color: var(--text);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-tap-highlight-color: transparent;
}

.login-box { width: 100%; max-width: 340px; }

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
/* Der Kasten ist 340 px breit -- darin bleibt die Sperrung der Wortmarke
   das Mass: 30 px Hoehe ergeben 154 px Breite, knapp die halbe Kastenbreite. */
.login-logo .brand-wordmark { height: 30px; }

.login-box .form-group { margin-bottom: 10px; }
.error { font-size: 0.82rem; color: var(--danger); margin-bottom: 10px; }

/* ── Empty state ── */
.empty { color: var(--text-2); font-size: 0.88rem; padding: 28px 0; }

/* ── Htmx ── */
.htmx-swapping { opacity: 0; transition: opacity 0.1s ease-out; }
.htmx-settling { opacity: 1; transition: opacity 0.2s ease-in; }

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

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--border-2); }

.exercise-filter { margin-bottom: 16px; }

/* ── Uebungsliste: Stern, Name, Geraete-Badge ── */
.exercise-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.exercise-list-row:last-child { border-bottom: none; }
.exercise-list-row[hidden] { display: none; }

.exercise-list-name { flex: 1; min-width: 0; font-size: 0.88rem; }

.fav-star {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 1.25rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
  flex-shrink: 0;
}
.fav-star-on { color: var(--accent); }

.equip-badge {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--bell, var(--text-2));
  flex-shrink: 0;
  white-space: nowrap;
}
/* Geraete-Badges leihen sich ihre Farbe aus dem Wettkampfcode, ohne ein
   Gewicht zu meinen: Kettlebell traegt das 16er-Gelb, egal mit wieviel Kilo
   gearbeitet wird. Band nimmt sein Orange. Core dagegen leiht sich nichts
   mehr: das 32er-Rot von frueher war die Farbe einer Bell, die hier nie
   gemeint ist -- und dasselbe Rot traegt --danger. Core bekommt mit --core
   einen eigenen Ton ausserhalb des Codes. */
/* Dieselbe Zuordnung traegt die Gruppenueberschrift in der Uebungsauswahl:
   ein Geraet, eine Farbe, egal wo es auftaucht. Deshalb stehen beide
   Selektoren hier zusammen und nicht je einmal pro Bauteil. */
.equip-badge-kettlebell,
.picker-group-kettlebell { --bell: var(--bell-16); }
/* Lang und kurz sind zwei Geraete und tragen deshalb zwei Farben -- vorher
   lagen beide auf demselben Orange und waren nur am Text zu unterscheiden. */
.equip-badge-band_long,
.picker-group-band_long { --bell: var(--band); }
.equip-badge-band_short,
.picker-group-band_short { --bell: var(--band-short-equip); }
.equip-badge-core,
.picker-group-core { --bell: var(--core); }
/* Favoriten sind kein Geraet und leihen sich keine Geraetefarbe. Der Akzent
   markiert in dieser App das Eigene -- er steht schon am gesetzten Stern. */
.picker-group-favorites { --bell: var(--accent); }

/* Noch nicht drangekommener Satz: dieselbe Zeilenform wie ein fertiger,
   nur ohne Haken und gedaempft. Die ganze Zeile hoert auf Klicks, ohne
   wie ein Knopf auszusehen. */
.set-row-planned {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text-2);
}
.set-row-planned:last-child { border-bottom: none; }
.set-row-planned .set-numbers { font-weight: 400; color: var(--text-2); }
.set-row-planned .kg { color: inherit; font-weight: 500; }
.set-row-planned:hover { background: var(--surface-2); color: var(--text); }
.set-row-planned:active { background: var(--surface-2); }

/* Die Uebung, in der gerade gearbeitet wird -- derselbe Inset-Balken,
   mit dem eine uebersprungene Uebung markiert ist, nur im Akzent.
   Beim Absolvieren des letzten Satzes wandert er sichtbar nach unten. */
.exercise-block-current .exercise-title-row {
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}

/* Übersprungene Sätze und Übungen */
.set-row-skipped {
  border-left: 3px solid var(--border-2);
  padding-left: 13px;
  opacity: 0.55;
}
.set-row-skipped .set-numbers {
  font-size: 0.85rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-2);
}

/* Satz nachlegen. Sitzt als letzte Zeile in der Satzliste und nimmt
   deren Raster auf, bleibt aber zurueckhaltend: er gehoert zur Liste,
   ist aber nicht der Weg, den man ueblicherweise geht.
   Ohne eigene Linie oben: die Zeile darueber traegt sie schon. Ihr
   border-bottom faellt nur als :last-child weg -- und das ist sie,
   seit dieser Knopf existiert, nicht mehr. */
.add-set {
  display: block;
  width: 100%;
  border: none;
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.78rem;
  text-align: left;
  padding: 10px 16px;
  cursor: pointer;
}
.add-set:hover { background: var(--surface-2); color: var(--text); }
.add-set:active { background: var(--surface-2); }

.set-undo, .exercise-skip {
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.72rem;
  padding: 5px 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.set-undo:active, .exercise-skip:active { background: var(--border); }

.exercise-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hold-timer {
  margin-bottom: 12px;
}
.hold-timer-start {
  width: 100%;
  height: var(--touch);
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.hold-timer-start:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.set-form-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.set-complete-check {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--touch);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
}
.set-complete-check:active { opacity: 0.8; }
.set-complete-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-ink);
}
.btn-skip {
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-skip:active { background: var(--surface-2); }

.history-skipped {
  font-size: 0.65rem;
  color: var(--text-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ── Fortschritt: "Übung 2 / 4" ─────────────────────────────────────────
   Steht ueber der einen Uebung, die gerade zu sehen ist, und sagt, wo man
   im Training steht -- die einzige Stelle, die noch etwas ueber die
   Uebungen ausserhalb der aktiven Karte verraet. */
.session-progress {
  margin-bottom: 14px;
}
.session-progress-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.session-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--border-2);
  overflow: hidden;
}
.session-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.session-complete {
  text-align: center;
  color: var(--text-2);
  font-size: 0.95rem;
  padding: 32px 16px;
}

/* ── "Als Nächstes": Vorschau statt Detail ──────────────────────────────
   Nur Name und eine Kennzahl, keine Satzzeilen, keine Knoepfe -- wer
   dahin will, muss erst die aktive Uebung fertig machen. */
.upcoming-list {
  margin-top: 22px;
}
.upcoming-heading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 8px 2px;
}
.upcoming-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  opacity: 0.75;
}
.upcoming-thumb {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}
.upcoming-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upcoming-sub {
  font-size: 0.78rem;
  color: var(--text-2);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   Desktop — ab hier wird aus der Spalte eine Flaeche.

   Ein einziger Breakpoint. Alles darunter bleibt unangetastet: die
   Ansicht, mit der waehrend des Trainings geloggt wird, soll sich von
   dieser Datei nicht ueberraschen lassen.
   ════════════════════════════════════════════════════════════════════ */
/* ── Kalender ── */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cal-title { font-weight: 600; font-size: 1rem; }

.cal-nav {
  width: var(--touch);
  height: var(--touch);
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 1.4rem;
  font-family: inherit;
  cursor: pointer;
}
.cal-nav:active { color: var(--text); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-weekday {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-2);
  padding-bottom: 6px;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.cal-day.cal-out { color: var(--text-2); opacity: 0.45; }
.cal-day.cal-today { border-color: var(--border-2); }
.cal-day.cal-selected { background: var(--surface-2); border-color: var(--accent); }

/* Der Punkt liest seine Farbe aus --dot. Gesetzt wird --dot vom Status --
   am Tag im Raster ebenso wie am Punkt selbst in der Legende. */
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, transparent);
}
.cal-done { --dot: var(--accent); }
.cal-different, .cal-unplanned { --dot: var(--bell-28); }
.cal-open { --dot: var(--text-2); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 26px;
  font-size: 0.72rem;
  color: var(--text-2);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .cal-dot { flex: 0 0 auto; }

.cal-card-date { font-size: 0.95rem; margin-bottom: 10px; }

.cal-card { padding: 16px; }
.cal-card > * + * { margin-top: 12px; }

.cal-plan-name { font-size: 1.05rem; font-weight: 600; }

.cal-note { color: var(--text-2); font-size: 0.82rem; }
.cal-note-plan { padding: 12px 16px; border-top: 1px solid var(--border); }

.cal-remove .btn-secondary { height: 40px; font-size: 0.82rem; }


@media (min-width: 900px) {
  :root { --side: 208px; }

  body { padding-bottom: 0; padding-left: var(--side); }

  /* Die Leiste laeuft ueber die volle Breite; die Wortmarke steht damit
     ueber der Navigationsspalte und nicht irgendwo in der Mitte. */
  .top-bar-inner { max-width: none; padding: 0 20px; }

  /* ── Aus der Bottom-Nav wird die Seitenspalte ── */
  .site-nav {
    inset: var(--top) auto 0 0;
    width: var(--side);
    height: auto;
    flex-direction: column;
    padding: 14px 0;
    gap: 1px;
    border-top: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }

  .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    height: 42px;
    /* 17 + 3px Rahmen = 20px, dieselbe Kante wie die Wortmarke darueber */
    padding: 0 16px 0 17px;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
  }

  .nav-item:hover { color: var(--text); background: var(--surface); }

  /* Derselbe Balken, mit dem ein erledigter Satz markiert wird — die
     Oberflaeche kennt diese Geste schon, sie muss nichts Neues lernen. */
  .nav-item.active {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }

  .nav-item svg { width: 19px; height: 19px; }

  /* ── Inhaltsflaeche ── */
  main { max-width: 1100px; padding: 34px 32px 56px; }

  /* Formulare und die laufende Session werden breit nicht besser.
     Sie behalten eine Spalte, die man in einem Blick lesen kann. */
  body.page-narrow main { max-width: 760px; }

  h1 { font-size: 1.75rem; margin-bottom: 24px; }
  .greeting { font-size: 2.1rem; margin-bottom: 28px; }

  /* ── Zeiger statt Finger ── */
  .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
  .btn-emom-start:hover { background: color-mix(in srgb, var(--core) 88%, #fff); }
  .btn-secondary:hover { background: var(--surface); border-color: var(--border-2); }
  .btn-quiet:hover { background: var(--surface-2); }
  .exercise-list-row:hover { background: var(--surface-2); }
  .fav-star:hover { color: var(--accent); }

  /* Ein Knopf ueber 1100px ist kein Knopf mehr, sondern ein Balken. */
  .btn-primary, .btn-secondary { width: auto; min-width: 200px; }
  /* Am Desktop ist Platz da, und aus zwei Metern Abstand zum Bildschirm
     ist eine 52er-Kachel wieder klein. */
  .exercise-thumb { width: 64px; height: 64px; }

  /* Ein Stepper fuer eine zweistellige Zahl braucht keine halbe
     Bildschirmbreite -- er wuerde nur leerer aussehen. */
  .stepper-row { max-width: 470px; }

  /* Knoepfe, die in einer Zeile mitlaufen, bleiben so breit wie ihr Wort. */
  .btn-sm, .add-exercise-btn, .set-form-actions .btn-primary { min-width: 0; }
  .login-box .btn-primary { width: 100%; }

  /* Aktionspaare stehen nebeneinander, solange sie zusammengehoeren. */
  .actions {
    display: flex;
    gap: 12px;
    max-width: 480px;
  }
  .actions > * { flex: 1; margin-top: 0; }
  .actions .btn-primary, .actions .btn-secondary { width: 100%; min-width: 0; }

  /* Anders als `.actions`: hier steht nicht ein Paar gleich breiter
     Knoepfe, sondern beliebig viele "+ etwas hinzufuegen"-Knoepfe. Ein
     erzwungenes Gleichmass wuerde die Beschriftung aus dem Knopf
     drucken, darum bleibt jeder so breit wie sein eigenes Wort. */
  .block-toolbar .btn-secondary { width: auto; min-width: 0; }

  /* ── Dashboard ──
     Drei Bloecke, im Markup in der Reihenfolge des Handys. Hier werden
     sie gelegt: links Handeln und Zahlen, rechts die Kurve ueber beide
     Reihen, darunter links die Listen. */
  .dash-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: start;
  }
  .dash-main { grid-column: 1; grid-row: 1; }
  .dash-load { grid-column: 2; grid-row: 1; }
  .dash-load > h2:first-child { margin-top: 0; }

  /* Die Listen tragen keine zweite Spalte neben sich — sie legen sich
     unter beide und teilen die Breite untereinander auf. */
  .dash-lists {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 32px;
    align-items: start;
  }
  .dash-lists h2 { margin-top: 0; }

  /* ── Kennzahlen ──
     So viele Kacheln nebeneinander, wie die Spalte traegt — aber keine
     Kachel breiter, als ihre Zahl es rechtfertigt. */
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    max-width: 720px;
  }
  .stat-grid.compact { max-width: 720px; }
  .dash-main .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); max-width: none; }
  .dash-load .stat-grid { grid-template-columns: 1fr 1fr; max-width: none; }

  /* Eine Zahl bricht nicht um. */
  .list-item .session-meta { white-space: nowrap; }

  .chart-box { height: 300px; }
  .chart-box-flat { height: 260px; }
  .chart-box-sm { height: 165px; }

  /* ── Stats: Uebungskacheln ── */
  .ex-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
    align-items: start;
  }
  .ex-stat-card { margin-bottom: 0; }

  /* ── Verlauf: Uebungen einer Session ── */
  .history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
    align-items: start;
  }
  .history-exercise { margin-bottom: 0; }
  /* "Satz 1 L" braucht mehr als die 76px, die am Handy reichen. */
  .history-sets { grid-template-columns: 110px 1fr 1fr; }
  .history-exercise-vol { white-space: nowrap; }

  /* ── Uebungsliste: Gruppen nebeneinander ── */
  .exercise-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    align-items: start;
  }
  .exercise-group > h2 { margin-top: 0; }

  /* ── Trainingsplan: Aktionen links, Plan rechts ── */
  .detail-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px 32px;
    align-items: start;
    max-width: 980px;
  }
  .detail-head { grid-column: 1; grid-row: 1; }
  .detail-body { grid-column: 2; grid-row: 1; }
  /* Loeschen steht unter beidem, nicht neben dem Plan — sonst schwebt der
     Knopf mitten in der linken Spalte, als haette ihn jemand vergessen. */
  .detail-foot { grid-column: 1 / -1; grid-row: 2; margin-top: 0 !important; }
  .detail-body > h2:first-child { margin-top: 0; }
  .detail-head .btn-primary, .detail-head .btn-secondary { width: 100%; }

  /* Fuer die Maus greifbar — 3px sind eine Kante, kein Griff. */
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border: 3px solid var(--bg);
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-2); }
}

/* ── Rueckfrage vorm Loeschen ────────────────────────────────────────────
   Traegt die Ueberschriftenbehandlung der App, damit der Dialog zur Seite
   gehoert und nicht zum Betriebssystem. Der globale Reset nimmt <dialog>
   sein margin:auto -- ohne die Zeile unten klebt er in der Ecke. */
.confirm {
  margin: auto;
  width: min(400px, calc(100vw - 32px));
  padding: 24px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
}
.confirm::backdrop { background: rgba(8, 8, 11, 0.72); }

/* Name und Frage stehen untereinander: ein langer Trainingsname bekommt
   die Zeile fuer sich, und der Titel kommt ohne Anfuehrungszeichen aus. */
.confirm-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.confirm-subject,
.confirm-verb { display: block; }
.confirm-subject { overflow-wrap: anywhere; }
.confirm-verb { font-weight: 400; color: var(--text-2); }

.confirm-note {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--text-2);
}

.confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.confirm-actions > * { flex: 1; }
/* "Was soll damit passieren?" hat drei Antworten, aber keine drei
   gleichwertigen. Drei gleich grosse Kaesten uebereinander sagen genau das
   Falsche: sie behaupten Gleichrang. Also traegt nur der Abschluss Flaeche,
   die beiden anderen stehen als blosses Wort darunter -- und die Haarlinie
   setzt das Verwerfen ab, damit der Daumen es nicht im Vorbeigehen trifft. */
.leave-actions {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.leave-actions .btn-primary { margin-bottom: 10px; }
.leave-actions [data-leave-discard] {
  position: relative;
  margin-top: 10px;
  height: 44px;
  font-size: 0.85rem;
}
.leave-actions [data-leave-discard]::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 20px;
  right: 20px;
  border-top: 1px solid var(--border);
}

/* ── Uebungsauswahl ──────────────────────────────────────────────────────
   Auf dem Handy fuellt sie den Schirm. Die Auswahl war frueher ein natives
   <select>: dessen optgroup-Ueberschriften zeichnet das Betriebssystem, sie
   gehen im Picker unter, und lange Uebungsnamen brechen im schmalen Popup
   um. Beides ist von aussen nicht zu erreichen -- also gehoert die Liste
   jetzt der App. */
.picker {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 0;
  flex-direction: column;
}
.picker[open] { display: flex; }
.picker::backdrop { background: rgba(8, 8, 11, 0.72); }

.picker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.picker-head .picker-search { flex: 1; }

.picker-close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.picker-close:active { background: var(--surface); }

.picker-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
}
.picker-group[hidden] { display: none; }

/* Die Gliederung nach Geraet ist der Grund, warum die Auswahl kein natives
   Feld mehr ist. Deshalb bleibt die Ueberschrift beim Scrollen stehen: man
   sieht jederzeit, in welcher Art man gerade liest.
   Die Farbe kommt aus --bell und ist dieselbe, die das Geraet im Badge und
   in der Session traegt -- der Balken an der Kante macht sie auch dann noch
   lesbar, wenn die Zeile ueberflogen statt gelesen wird. */
.picker-group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 10px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 4px 0 0 var(--bell, var(--border-2));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bell, var(--text));
}

.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--touch);
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.picker-option[hidden] { display: none; }
.picker-option:active { background: var(--surface); }

/* Ohne Bild bleibt der Platz stehen -- sonst ruecken die Namen zeilenweise
   hin und her und die Liste verliert ihre Kante. */
.picker-thumb {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.picker-option-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Die getroffene Wahl traegt den Akzent an der Kante und scrollt beim
   Oeffnen in den Blick: man sieht sofort, wovon man ausgeht. */
.picker-option-active {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--accent);
}
.picker-option-active .picker-option-name { font-weight: 600; }

.picker-empty {
  padding: 24px 16px;
  color: var(--text-2);
  font-size: 0.88rem;
}

/* Am Rechner gibt es keinen Grund, den Schirm zu fuellen. */
@media (min-width: 900px) {
  .picker {
    margin: auto;
    width: min(520px, calc(100vw - 48px));
    height: min(640px, calc(100vh - 64px));
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .picker-option:hover { background: var(--surface); }
}

/* Der eine bewegte Moment: er beantwortet die Frage "was ist gerade
   passiert", statt eine Seite zu dekorieren. */
@media (prefers-reduced-motion: no-preference) {
  .confirm[open] { animation: confirm-in 120ms ease-out; }
  @keyframes confirm-in {
    from { opacity: 0; transform: scale(0.96); }
  }
}

/* Schmerztagebuch */
:root {
  /* Nicht --accent: das ist die Farbe der Schmerzkurve selbst, und eine
     senkrechte Linie in derselben Farbe liesse sich nicht von ihr trennen. */
  --marker-session: var(--bell-12);
  --marker-rehab: var(--bell-20);
  --marker-ride: var(--bell-28);
}
.pain-fields { display: flex; flex-direction: column; gap: 12px; }
.pain-region-toggle {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer;
}
.pain-region-toggle input { width: 22px; height: 22px; accent-color: var(--accent); }
.pain-regions { display: flex; flex-direction: column; gap: 8px; }
.pain-region-controls { display: none; flex-direction: column; gap: 10px; padding: 12px 14px 4px; }
.pain-region:has(.pain-region-toggle input:checked) .pain-region-controls { display: flex; }
.pain-label { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--text-2); }
.pain-row { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pain-row:last-child { border-bottom: 0; }
.pain-row-main { display: flex; align-items: baseline; gap: 10px; }
.pain-row-value { font-weight: 600; font-size: 1.1rem; }
.pain-kind { margin-left: auto; font-size: .7rem; color: var(--text-2); text-transform: uppercase; }
.pain-row-meta { margin: 4px 0 8px; font-size: .8rem; color: var(--text-2); }
/* Tap-Ziele in der Eintragsliste mindestens 48 px; .btn-sm (36 px) bleibt fuer andere Seiten. */
.pain-row .btn-sm { height: auto; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.pain-row .goal-form-actions { align-items: stretch; }
.pain-row .goal-form-actions form { display: flex; }
.pain-row .goal-form-actions form .btn-sm { flex: 1; }

.pain-choice { display: flex; gap: 8px; }
.pain-choice label { flex: 1; position: relative; }
.pain-choice input { position: absolute; opacity: 0; inset: 0; }
.pain-choice span {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.pain-choice input:checked + span { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.pain-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.rehab-toggle {
  min-height: 48px; padding: 0 10px; font-size: .7rem; border-radius: 999px;
  background: transparent; color: var(--text-2); border: 1px solid var(--border-2);
}
.rehab-toggle-on { background: var(--marker-rehab); color: var(--bg); border-color: var(--marker-rehab); }

.pain-filter { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.pain-filter select { flex: 1; min-width: 110px; min-height: 48px; }
.pain-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .75rem; color: var(--text-2); }
.pain-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.pain-disclaimer { margin: 20px 0 8px; font-size: .8rem; color: var(--text-2); }

/* Umschalter zwischen den zwei Ansichten eines Bereichs (Monat | Liste, Stats | Ziele) */
.section-tabs { display: flex; gap: 8px; margin: 12px 0 16px; }
.section-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-2); text-decoration: none;
}
.section-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.section-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }