/* Farbschema nach dem adidas Adizero Evo SL: schwarzes Obermaterial, orange
   Akzente mit Verlauf, weisse Sohlenrillen.

   Bewusst einfarbig dunkel, kein Wechsel nach Helligkeit: die Seite wird
   frueh morgens und abends angesehen, und ein Trainingsdashboard darf so
   aussehen wie das Geraet, das die Daten liefert. */

:root {
  --schwarz:      #0b0b0d;
  --kohle:        #16161a;
  --kohle-hell:   #1e1e24;
  --rille:        #2a2a31;   /* die hellen Rillen der Sohle */
  --weiss:        #f5f5f2;
  --grau:         #9a9aa4;
  --grau-dunkel:  #6a6a74;

  --orange:       #ff5a1f;
  --orange-hell:  #ff8a3d;
  --verlauf:      linear-gradient(100deg, #ff5a1f 0%, #ff8a3d 100%);

  --gut:          #3ddc84;
  --warnung:      #ffc046;
  --schlecht:     #ff4d4d;

  --radius:       10px;
  --spalte:       1120px;
}

/* Zonen: Anthrazit bis Hellorange. Das ist zugleich die Legende der
   Intervallbalken -- je weiter rechts, desto haerter. */
.z1 { background: #34343d; }
.z2 { background: #4a4a56; }
.z3 { background: #7a5340; }
.z4 { background: #b4562a; }
.z5 { background: var(--orange); }
.z6 { background: #ff7333; }
.z7 { background: var(--orange-hell); }
.zx { background: #2a2a31; }   /* ohne Zonenangabe */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.rahmen { max-width: var(--spalte); margin: 0 auto; padding: 0 16px 64px; }

/* --- Kopf --------------------------------------------------------------- */

header.kopf {
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--rille);
  margin-bottom: 24px;
}
header.kopf h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
header.kopf .datum { color: var(--grau); font-size: 0.95rem; margin-top: 2px; }

nav.sprung {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
nav.sprung a {
  color: var(--grau);
  text-decoration: none;
  font-size: 0.82rem;
  padding: 8px 12px;          /* mindestens 44 px Tippziel mit dem Text */
  border: 1px solid var(--rille);
  border-radius: 999px;
  white-space: nowrap;
}
nav.sprung a:hover, nav.sprung a:focus { color: var(--weiss); border-color: var(--orange); }

/* --- Abschnitte --------------------------------------------------------- */

section { margin-bottom: 36px; scroll-margin-top: 16px; }
section > h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grau-dunkel);
  margin: 0 0 12px;
  font-weight: 600;
}

.karte {
  background: var(--kohle);
  border: 1px solid var(--rille);
  border-radius: var(--radius);
  padding: 18px;
}

.gitter { display: grid; gap: 12px; }
.gitter.zwei { grid-template-columns: 1.4fr 1fr; }
.gitter.drei { grid-template-columns: repeat(3, 1fr); }
.gitter.vier { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 760px) {
  .gitter.zwei, .gitter.drei, .gitter.vier { grid-template-columns: 1fr; }
}

/* --- Kennzahlen --------------------------------------------------------- */

.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .kennzahlen { grid-template-columns: repeat(2, 1fr); } }

.kennzahl {
  background: var(--kohle);
  border: 1px solid var(--rille);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kennzahl .marke {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grau-dunkel);
}
.kennzahl .wert {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kennzahl .wert.betont {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kennzahl .zusatz { font-size: 0.82rem; color: var(--grau); margin-top: 2px; }
.pfeil-hoch  { color: var(--gut); }
.pfeil-runter { color: var(--schlecht); }
.pfeil-gleich { color: var(--grau-dunkel); }

/* --- Warnstreifen ------------------------------------------------------- */

.warnung {
  background: #2a2214;
  border: 1px solid var(--warnung);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.92rem;
}
.warnung strong { color: var(--warnung); }

/* --- Einheit ------------------------------------------------------------ */

.einheit .name { font-size: 1.15rem; font-weight: 600; }
.einheit .sport {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--kohle-hell);
  color: var(--grau);
  margin-right: 8px;
  vertical-align: 2px;
}
.einheit .sport.Run  { color: var(--orange-hell); }
.einheit .sport.Ride { color: #ffc046; }
.einheit .sport.Swim { color: #4db8ff; }

.schritte { margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.92rem; }
.schritte li { padding: 4px 0; border-bottom: 1px solid var(--rille); color: var(--grau); }
.schritte li:last-child { border-bottom: none; }
.schritte li .wdh { color: var(--orange); font-weight: 600; }

.balken { display: flex; height: 26px; border-radius: 5px; overflow: hidden; margin-top: 12px; }
.balken div { min-width: 2px; }
.balken.mini { height: 6px; margin-top: 6px; border-radius: 3px; }

/* --- Abzeichen ---------------------------------------------------------- */

.abzeichen {
  display: inline-block;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--rille);
  color: var(--grau);
}
.abzeichen.erfuellt { border-color: var(--gut); color: var(--gut); }
.abzeichen.abweichend { border-color: var(--warnung); color: var(--warnung); }
.abzeichen.offen { border-color: var(--rille); color: var(--grau-dunkel); }
.abzeichen.ungeplant { border-color: var(--orange); color: var(--orange); }

/* --- Tabelle ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grau-dunkel);
  font-weight: 600;
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--rille);
}
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rille); color: var(--grau); }
td.zahl { font-variant-numeric: tabular-nums; text-align: right; padding-right: 14px; }
td.haupt { color: var(--weiss); }
tr:last-child td { border-bottom: none; }
.tabelle-scroll { overflow-x: auto; }

/* --- Knopf -------------------------------------------------------------- */

.knopf-form { display: inline-block; margin: 0; }
button.knopf {
  background: var(--verlauf);
  color: #1a0d05;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;        /* 44 px Tippziel */
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
button.knopf:hover { filter: brightness(1.1); }
button.knopf:active { transform: translateY(1px); }

/* --- Fuss --------------------------------------------------------------- */

footer.fuss {
  border-top: 1px solid var(--rille);
  padding-top: 16px;
  margin-top: 32px;
  font-size: 0.8rem;
  color: var(--grau-dunkel);
}
footer.fuss .zeile { margin-bottom: 4px; }

.leer { color: var(--grau-dunkel); font-style: italic; }
.fussnote { font-size: 0.76rem; color: var(--grau-dunkel); margin-top: 8px; }

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

/* ======================================================================
   Bausteine der uebrigen Ansichten
   ====================================================================== */

/* --- Wochenstreifen ------------------------------------------------------ */

.wochenstreifen {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
@media (max-width: 900px) {
  .wochenstreifen { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .wochenstreifen { grid-template-columns: repeat(2, 1fr); }
}
.tag-spalte {
  background: var(--kohle);
  border: 1px solid var(--rille);
  border-radius: 8px;
  padding: 10px;
  min-height: 96px;
  font-size: 0.8rem;
  /* Ohne das waechst die Spalte an ihrem breitesten Kind statt an `1fr`:
     Rasterelemente haben `min-width: auto`, und dann schiebt die
     Vorgabentabelle die ganze Seite waagerecht auf, statt in ihrem eigenen
     Rahmen zu scrollen. */
  min-width: 0;
}
.tag-spalte.heute { border-color: var(--orange); }
.tag-spalte.vergangen { opacity: 0.62; }
.tag-marke { color: var(--grau-dunkel); font-size: 0.7rem; letter-spacing: 0.06em; }
.tag-name { color: var(--weiss); margin-top: 6px; font-weight: 600; line-height: 1.25; }
.tag-dauer { color: var(--grau); }
.tag-frei { color: var(--grau-dunkel); margin-top: 8px; font-style: italic; }
.tag-ist { margin-top: 6px; }

/* --- Diagramme ----------------------------------------------------------- */

.diagramm svg.verlauf { width: 100%; height: 220px; display: block; }
svg.sparkline { width: 100%; height: 48px; display: block; }

.linie { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.flaeche { stroke: none; }

.linie.ctl { stroke: var(--orange); }
.flaeche.ctl { fill: rgba(255, 90, 31, 0.16); }
.linie.atl { stroke: var(--grau); stroke-width: 1.5; }
.linie.tsb { stroke: #4db8ff; stroke-width: 1.5; }
.linie.hrv { stroke: var(--orange); }
.linie.rhr { stroke: #4db8ff; }
.linie.schlaf { stroke: #b18aff; }
.linie.mittel { stroke: var(--weiss); stroke-width: 1; opacity: 0.45; }
.linie.orange { stroke: var(--orange); }
.nulllinie { stroke: var(--rille); stroke-width: 1; stroke-dasharray: 4 4; }

.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 0.76rem; color: var(--grau); }
.legende-teil { display: inline-flex; align-items: center; gap: 6px; }
.legende i.punkt { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
i.punkt.ctl { background: var(--orange); }
i.punkt.atl { background: var(--grau); }
i.punkt.tsb { background: #4db8ff; }

.achse { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--grau-dunkel); margin-top: 4px; }

.kennwerte { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 0.85rem; color: var(--grau); }
.kennwert b { color: var(--weiss); font-variant-numeric: tabular-nums; }

/* --- Balkengruppen ------------------------------------------------------- */

.balken-gruppe { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.balken-zeile { display: grid; grid-template-columns: 56px 1fr 60px; gap: 10px; align-items: center; }
.balken-marke { font-size: 0.72rem; color: var(--grau-dunkel); font-variant-numeric: tabular-nums; }
.balken-spur { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--kohle-hell); }
.balken-wert { font-size: 0.72rem; color: var(--grau); text-align: right; font-variant-numeric: tabular-nums; }

.sp-swim  { background: #2d7fb8; }
.sp-ride  { background: #c08a2e; }
.sp-run   { background: var(--orange); }
.sp-other { background: #4a4a56; }
i.punkt.sp-swim { background: #2d7fb8; }
i.punkt.sp-ride { background: #c08a2e; }
i.punkt.sp-run { background: var(--orange); }
i.punkt.sp-other { background: #4a4a56; }

h3.untertitel {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grau-dunkel);
  margin: 16px 0 8px;
  font-weight: 600;
}
h3.untertitel:first-child { margin-top: 0; }

/* --- Erholung ------------------------------------------------------------ */

.erholung-block {
  background: var(--kohle-hell);
  border-radius: 8px;
  padding: 12px 14px;
}
.erholung-block .marke {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grau-dunkel);
  margin-bottom: 6px;
}
.erholung-block .zusatz { font-size: 0.78rem; color: var(--grau); margin-top: 6px; }

/* --- Plan ---------------------------------------------------------------- */

.plan-titel { font-size: 1.05rem; font-weight: 600; }
details {
  border-top: 1px solid var(--rille);
  padding: 10px 0;
}
details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--grau);
  padding: 6px 0;          /* Tippziel */
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; color: var(--orange); }
details[open] summary::before { content: "▾ "; }
details[open] summary { color: var(--weiss); }

.plan-einheit { padding: 10px 0 10px 18px; border-bottom: 1px solid var(--rille); }
.plan-einheit:last-child { border-bottom: none; }
.plan-tag { color: var(--grau-dunkel); font-size: 0.76rem; margin-right: 4px; }
.plan-name { color: var(--weiss); font-weight: 600; }
.plan-dauer { color: var(--grau); font-size: 0.82rem; margin-left: 4px; }

/* --- Vorgaben je Schritt -------------------------------------------------
   Der aufklappbare Block unter einer geplanten Einheit. Er steckt in drei
   Umgebungen -- Karte bei "Heute", schmale Spalte im Wochenstreifen, Liste
   im Plan -- und muss in allen dreien zugeklappt eine Zeile hoch sein. */

.details-einheit { border-top: 1px solid var(--rille); margin-top: 10px; padding: 6px 0 0; }
.details-einheit summary { font-size: 0.78rem; }

table.vorgaben { font-size: 0.8rem; margin-top: 6px; }
table.vorgaben th { font-size: 0.62rem; padding-bottom: 6px; }
table.vorgaben td { padding: 6px 8px 6px 0; }
table.vorgaben td.zweck { color: var(--weiss); }
/* Die eingerueckten Zeilen gehoeren zum Wiederholungsblock darueber. Ohne
   diese Stufe liest sich "3 x" als eigene Zeile und nicht als Klammer. */
table.vorgaben td.zweck.eingerueckt { padding-left: 16px; }
table.vorgaben tr.wdh-kopf td { border-bottom: none; padding-bottom: 0; color: var(--orange); }

.zonenmarke {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  border-radius: 4px;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 1px 4px;
  color: var(--weiss);
  vertical-align: 1px;
}

/* Der Rahmen hinter der Ansage: leiser als das geforderte Tempo selbst. */
.band { color: var(--grau-dunkel); font-size: 0.92em; }
/* Die Tilde sagt: abgeleitet, nicht vorgegeben. Sie darf nicht uebersehen
   werden -- ein erfundener Pulsbereich wird sonst befolgt. */
.geschaetzt { color: var(--grau-dunkel); border-bottom: 1px dotted var(--grau-dunkel); cursor: help; }

/* Im Wochenstreifen ist kein Platz fuer vier Spalten nebeneinander. */
.tag-spalte .details-einheit summary { font-size: 0.72rem; }
.tag-spalte table.vorgaben { font-size: 0.72rem; }
.tag-spalte table.vorgaben td { padding: 4px 4px 4px 0; }
/* Ein Pulsbereich darf nicht umbrechen -- "~152-" auf der einen und "160" auf
   der naechsten Zeile liest sich als zwei Zahlen. */
table.vorgaben td.puls { white-space: nowrap; }
/* Die kompakte Fassung fuer schmale Spalten: dieselben Zahlen untereinander
   statt in vier Spalten nebeneinander. */
ul.vorgaben-kompakt { list-style: none; margin: 6px 0 0; padding: 0; }
ul.vorgaben-kompakt li {
  padding: 5px 0;
  border-bottom: 1px solid var(--rille);
}
ul.vorgaben-kompakt li:last-child { border-bottom: none; }
ul.vorgaben-kompakt .zweck { color: var(--weiss); }
ul.vorgaben-kompakt .mass { color: var(--grau-dunkel); }
ul.vorgaben-kompakt .kompakt-werte {
  color: var(--grau);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
ul.vorgaben-kompakt .band { display: none; }   /* kein Platz fuer den Rahmen */

/* --- Zeitraum umschalten -------------------------------------------------
   Radioknoepfe statt JavaScript. Die Knoepfe sind unsichtbar, sichtbar sind
   ihre Marken; der angehakte Knopf zeigt ueber `~` seine Fassung.

   Die vier Regeln unten muessen zu `diagramme.ZEITRAEUME` passen. Kommt dort
   ein Kuerzel hinzu, bleibt seine Fassung sonst dauerhaft verborgen -- der
   Knopf erscheint, und nichts passiert. */

.zeitraum { position: relative; }

.zr-wahl {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.zr-marke {
  display: inline-block;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--grau-dunkel);
  border: 1px solid var(--rille);
  border-radius: 999px;
  padding: 4px 12px;          /* Tippziel */
  margin: 0 6px 10px 0;
  user-select: none;
}
.zr-marke:hover { color: var(--grau); }
.zr-wahl:checked + .zr-marke {
  color: var(--schwarz);
  background: var(--orange);
  border-color: var(--orange);
  font-weight: 600;
}
/* Mit der Tastatur bedienbar bleiben: ohne das ist der Fokus unsichtbar,
   weil der Knopf selbst es ist. */
.zr-wahl:focus-visible + .zr-marke { outline: 2px solid var(--orange-hell); outline-offset: 2px; }

.zr-panel { display: none; }
.zr-wahl.zr-4w:checked  ~ .zr-panel[data-zr="4w"]  { display: block; }
.zr-wahl.zr-3m:checked  ~ .zr-panel[data-zr="3m"]  { display: block; }
.zr-wahl.zr-6m:checked  ~ .zr-panel[data-zr="6m"]  { display: block; }
.zr-wahl.zr-all:checked ~ .zr-panel[data-zr="all"] { display: block; }

/* --- Ablesung am Mauszeiger ----------------------------------------------
   Fadenkreuz, Punkte und Werteanzeige legt das Skript als HTML ueber die
   Flaeche -- nicht als SVG-Elemente. `svg.verlauf` traegt
   `preserveAspectRatio="none"` und wird waagerecht gestaucht; ein `<circle>`
   darin waere auf dem Telefon eine senkrechte Scherbe.

   Alles hier ist verborgen, solange die Karte nicht `.liest` traegt. Ohne
   Skript entstehen die Elemente gar nicht erst. */

.diagramm { position: relative; }
.diagramm-flaeche { position: relative; }

/* Waagerecht scrollen soll die Seite weiterhin koennen; senkrecht wischen
   auch. Deshalb kein `touch-action: none`. */
.diagramm[data-ablesbar] svg.verlauf { cursor: crosshair; }
/* Der JSON-Traeger ist Daten, keine Anzeige. */
script.diagramm-daten { display: none; }

.fadenkreuz-linie,
.fadenkreuz-punkt,
.ablesung { opacity: 0; transition: opacity 0.08s linear; pointer-events: none; }
.liest .fadenkreuz-linie,
.liest .fadenkreuz-punkt,
.liest .ablesung { opacity: 1; }

.fadenkreuz-linie {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grau-dunkel);
  transform: translateX(-0.5px);
}

.fadenkreuz-punkt {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--schwarz);
  transform: translate(-50%, -50%);
  display: none;
}
.fadenkreuz-punkt.ctl { background: var(--orange); }
.fadenkreuz-punkt.atl { background: var(--grau); }
.fadenkreuz-punkt.tsb { background: #4db8ff; }
.fadenkreuz-punkt.hrv { background: var(--orange); }
.fadenkreuz-punkt.rhr { background: #4db8ff; }
.fadenkreuz-punkt.schlaf { background: #8a7ae0; }
.fadenkreuz-punkt.mittel { background: var(--grau-dunkel); }

.ablesung {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 140px;
  background: rgba(11, 11, 13, 0.92);
  border: 1px solid var(--rille);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 0.74rem;
  color: var(--grau);
}
/* Steht der Zeiger rechts, wandert die Anzeige nach links -- sonst deckt sie
   genau die Stelle zu, die man ansieht. */
.ablesung.links { right: auto; left: 6px; }
.ablesung-marke { color: var(--weiss); font-weight: 600; margin-bottom: 3px; }
.ablesung-zeile { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ablesung-zeile b { color: var(--weiss); margin-left: auto; font-variant-numeric: tabular-nums; }
.ablesung-zeile i.punkt { width: 10px; height: 3px; border-radius: 2px; flex: none; }
i.punkt.hrv { background: var(--orange); }
i.punkt.rhr { background: #4db8ff; }
i.punkt.schlaf { background: #8a7ae0; }
i.punkt.mittel { background: var(--grau-dunkel); }

/* --- Gross anzeigen ------------------------------------------------------ */

.erholung-block.anklickbar { cursor: default; }
.erholung-block .lupe { display: none; }
/* Der Zeigefinger erscheint erst, wenn das Skript laeuft. Ein Knopf, der
   nichts tut, ist schlimmer als keiner -- dieselbe Regel wie beim
   Aktualisieren-Knopf auf der Dienst-Karte. */
.mit-skript .erholung-block.anklickbar { cursor: pointer; }
.mit-skript .erholung-block.anklickbar:hover { border-color: var(--orange); }
.mit-skript .erholung-block.anklickbar:focus-visible {
  outline: 2px solid var(--orange-hell);
  outline-offset: 2px;
}
.mit-skript .erholung-block .lupe {
  display: block;
  font-size: 0.66rem;
  color: var(--grau-dunkel);
  margin-top: 6px;
}

dialog.gross {
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--kohle);
  color: var(--weiss);
  border: 1px solid var(--rille);
  border-radius: var(--radius);
  padding: 18px;
}
dialog.gross::backdrop { background: rgba(0, 0, 0, 0.72); }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-kopf h3.untertitel { margin: 0; }
.dialog-schliessen {
  background: none;
  border: 1px solid var(--rille);
  border-radius: 999px;
  color: var(--grau);
  font-size: 0.72rem;
  padding: 5px 14px;
  cursor: pointer;
}
.dialog-schliessen:hover { color: var(--weiss); border-color: var(--grau-dunkel); }
dialog.gross svg.verlauf { height: 260px; }

/* --- Plan gegen Ist ------------------------------------------------------
   Das Sollband liegt hinter der Kurve: es ist der Hintergrund, gegen den man
   sie liest, nicht eine weitere Linie. Deshalb gedeckt und ohne Rand. */

.sollband { fill: rgba(255, 90, 31, 0.13); }
.sollband.locker { fill: rgba(154, 154, 164, 0.10); }
.sollband.puls { fill: rgba(77, 184, 255, 0.12); }

.linie.ist-tempo { stroke: var(--orange); stroke-width: 1.6; }
.linie.ist-puls { stroke: #4db8ff; stroke-width: 1.6; }
i.punkt.ist-tempo { background: var(--orange); }
i.punkt.ist-puls { background: #4db8ff; }
.fadenkreuz-punkt.ist-tempo { background: var(--orange); }
.fadenkreuz-punkt.ist-puls { background: #4db8ff; }

.vergleich-satz {
  font-size: 0.86rem;
  color: var(--weiss);
  margin: 10px 0 12px;
  padding-left: 10px;
  border-left: 2px solid var(--orange);
}

table.vergleich { font-size: 0.8rem; margin-top: 6px; }
table.vergleich th { font-size: 0.62rem; padding-bottom: 6px; }
table.vergleich td { padding: 6px 8px 6px 0; white-space: nowrap; }
table.vergleich td.zweck { color: var(--weiss); }
/* Die Abweichung ist die Spalte, auf die man schaut. */
td.abweichung { font-variant-numeric: tabular-nums; }
td.abweichung.langsam { color: var(--warnung); }
td.abweichung.schnell { color: #4db8ff; }
td.abweichung.passt { color: var(--gut); }

/* --- Tagesreiter ---------------------------------------------------------
   Sechs Stellungen des Umschalters aus Phase B: heute und fuenf Tage zurueck.
   Die Kuerzel stehen in `ansichten/heute.py:TAGE_KUERZEL`; kommt dort eines
   hinzu, braucht es hier eine Regel -- sonst laesst sich der Reiter druecken
   und nichts passiert. Ein Test haelt das fest. */

.zr-wahl.zr-t0:checked ~ .zr-panel[data-zr="t0"] { display: block; }
.zr-wahl.zr-t1:checked ~ .zr-panel[data-zr="t1"] { display: block; }
.zr-wahl.zr-t2:checked ~ .zr-panel[data-zr="t2"] { display: block; }
.zr-wahl.zr-t3:checked ~ .zr-panel[data-zr="t3"] { display: block; }
.zr-wahl.zr-t4:checked ~ .zr-panel[data-zr="t4"] { display: block; }
.zr-wahl.zr-t5:checked ~ .zr-panel[data-zr="t5"] { display: block; }

/* Der Punkt sagt, an welchem Tag ueberhaupt etwas war. Ohne ihn klickt man
   sechs Reiter durch, um den Tag mit dem Lauf zu finden. */
.reiter-punkt {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: 2px;
}
.reiter-punkt.gelaufen { background: var(--orange); }
.reiter-punkt.offen { background: var(--grau-dunkel); }
/* Auf dem angehakten Reiter ist der Hintergrund selbst orange. */
.zr-wahl:checked + .zr-marke .reiter-punkt.gelaufen { background: var(--schwarz); }
.zr-wahl:checked + .zr-marke .reiter-punkt.offen { background: rgba(11, 11, 13, 0.45); }

/* Welcher Tag gerade gezeigt wird -- beim heutigen entfaellt die Zeile. */
.tag-kopf {
  font-size: 0.76rem;
  color: var(--grau-dunkel);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

/* Die Vergleichstabelle steht linksbuendig und so breit wie ihr Inhalt.
   Mit `width: 100%` und rechtsbuendigen Zahlenspalten zieht sie die Werte an
   den rechten Rand auseinander -- zwischen "8 min / 7 min" und "+6 s/km"
   klafft dann die halbe Karte, und die Zeilen sind nicht mehr zu verfolgen. */
/* Dasselbe gilt fuer die Vorgaben je Schritt. */
table.vergleich,
table.vorgaben { width: auto; }
table.vergleich th, table.vergleich td, table.vergleich td.zahl,
table.vorgaben th, table.vorgaben td, table.vorgaben td.zahl {
  text-align: left;
  padding-right: 22px;
}
table.vergleich tr > *:last-child,
table.vorgaben tr > *:last-child { padding-right: 0; }

/* --- Zonenstreifen hinter einem Verlauf ----------------------------------
   Bei einer ungeplanten Aktivitaet gibt es kein Soll. Hinter der Kurve liegen
   deshalb die Zonen selbst -- ein Massstab, keine Vorgabe. Dieselbe Palette
   wie die Intervallbalken, nur durchscheinend. */

.zonenband.z1 { fill: rgba(52, 52, 61, 0.55); }
.zonenband.z2 { fill: rgba(74, 74, 86, 0.55); }
.zonenband.z3 { fill: rgba(122, 83, 64, 0.45); }
.zonenband.z4 { fill: rgba(180, 86, 42, 0.40); }
.zonenband.z5 { fill: rgba(255, 90, 31, 0.32); }
.zonenband.z6 { fill: rgba(255, 115, 51, 0.32); }
.zonenband.z7 { fill: rgba(255, 138, 61, 0.32); }

.linie.ist-watt { stroke: #c08a2e; stroke-width: 1.6; }
i.punkt.ist-watt { background: #c08a2e; }
.fadenkreuz-punkt.ist-watt { background: #c08a2e; }

/* Die Beschriftung eines Zonenstreifens. Als HTML ueber der Flaeche und nicht
   als `<text>` im SVG: `svg.verlauf` traegt `preserveAspectRatio="none"` und
   wuerde die Schrift waagerecht mitstauchen -- auf dem Telefon bis zur
   Unlesbarkeit. */
.bandmarke {
  position: absolute;
  left: 6px;
  transform: translateY(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--weiss);
  opacity: 0.55;
  white-space: nowrap;
  pointer-events: none;   /* das Fadenkreuz soll darunter weiterarbeiten */
}

/* Die Traineruebersicht. Eigene Regel, weil ihre Tabelle die einzige ist,
   deren erste Spalte verlinkt -- sonst traege der Athletenname die
   Browservorgabe in Blau und stuende als einziges Element ausserhalb des
   Farbschemas. Kein Dollarzeichen hier: seite.py setzt diese Datei ueber
   string.Template.substitute ein (siehe test_web_skript.py). */
td.haupt a {
  color: var(--weiss);
  text-decoration: none;
  border-bottom: 1px solid var(--rille);
}
td.haupt a:hover, td.haupt a:focus {
  color: var(--orange-hell);
  border-color: var(--orange);
}

/* ======================================================================
   Kalender -- die zweite Seite je Athlet (`web/kalender.py`)
   ====================================================================== */

/* Der Link von der Auswertung zum Kalender ist ein Seitenwechsel, kein
   Sprung innerhalb der Seite. Er soll sich von den Ankern abheben. */
nav.sprung a.sprung-seite { color: var(--orange-hell); border-color: var(--orange); }

/* Der Kalender-Link neben dem Namen in der Traineruebersicht. */
td.haupt a.neben-link {
  font-size: 0.74rem;
  color: var(--grau);
  margin-left: 8px;
}

/* --- Ein Monat auf einmal ------------------------------------------------
   Ein Radioknopf je Monat, **vor** dem Kopf (Platzhalter `vorspann`). Die
   Regeln, die je Monat Raster und Kopfzeile zeigen, erzeugt `kalender.py`
   -- welche Monate es gibt, haengt an den Daten. Hier steht nur, was fuer
   alle gilt. */

.kal-wahl {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.kal-monat { display: none; }
.kal-leiste { display: none; }

/* Der Kopf bleibt stehen -- nur auf dieser Seite. Erkannt wird sie an den
   Knoepfen davor; die Auswertung hat keine und behaelt ihren Kopf, der
   mitscrollt. */
.kal-wahl ~ header.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--schwarz);
  padding: 14px 0 12px;
  margin-bottom: 14px;
}
.kal-wahl ~ header.kopf h1 { font-size: 1.15rem; }
.kal-wahl ~ header.kopf .datum { font-size: 0.82rem; }
.kal-wahl ~ header.kopf nav.sprung { align-items: center; margin-top: 10px; }

.kal-leiste {
  align-items: center;
  gap: 8px;
  margin-right: auto;        /* die Seitenlinks rutschen nach rechts */
}
.kal-monatsname {
  margin: 0;
  /* Feste Breite: sonst springen die Pfeile beim Blaettern, weil "Mai" und
     "September" verschieden lang sind -- und der Daumen trifft daneben. */
  min-width: 9.5em;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--weiss);
}
.kal-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;               /* Tippziel */
  height: 44px;
  border: 1px solid var(--rille);
  border-radius: 999px;
  font-size: 1.7rem;
  line-height: 1;
  padding-bottom: 3px;       /* das Zeichen sitzt optisch zu tief */
  color: var(--weiss);
  cursor: pointer;
  user-select: none;
}
.kal-pfeil:hover { border-color: var(--orange); color: var(--orange-hell); }
.kal-pfeil.aus { opacity: 0.2; cursor: default; }
.kal-pfeil.aus:hover { border-color: var(--rille); color: var(--weiss); }
/* Mit der Tastatur: der Fokus liegt auf dem unsichtbaren Knopf, also zeigt
   ihn der Name. Pfeiltasten blaettern dann von selbst. */
.kal-wahl:focus-visible ~ header .kal-monatsname { color: var(--orange-hell); }

nav.sprung label.kal-heute {
  color: var(--grau);
  font-size: 0.82rem;
  padding: 8px 12px;
  border: 1px solid var(--rille);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
nav.sprung label.kal-heute:hover { color: var(--weiss); border-color: var(--orange); }

.kal-raster {
  display: grid;
  /* Sieben Tage und eine schmale Wochenspalte. `minmax(0, 1fr)` statt
     `1fr`: sonst waechst eine Spalte an einem langen Einheitsnamen, und die
     Tage stehen nicht mehr untereinander. */
  grid-template-columns: repeat(7, minmax(0, 1fr)) 76px;
  gap: 4px;
}

.kal-kopf {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grau-dunkel);
  padding: 0 4px 2px;
}

.kal-tag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 86px;
  min-width: 0;
  padding: 6px;
  background: var(--kohle);
  border: 1px solid var(--rille);
  border-radius: 6px;
  color: var(--weiss);
  text-decoration: none;
  font-size: 0.74rem;
}
a.kal-tag:hover, a.kal-tag:focus-visible { border-color: var(--orange); outline: none; }
.kal-tag.frei { background: transparent; }
.kal-tag.aussen { background: transparent; border-color: transparent; }
.kal-tag.vergangen { opacity: 0.7; }
.kal-tag.heute { border-color: var(--orange); opacity: 1; box-shadow: inset 0 0 0 1px var(--orange); }
.kal-tag.wettkampf { border-color: var(--orange-hell); background: #2a1810; }

.kal-zahl { color: var(--grau-dunkel); font-variant-numeric: tabular-nums; font-size: 0.72rem; }
.kal-tag.heute .kal-zahl { color: var(--orange-hell); font-weight: 700; }

/* Ein Eintrag: Sportfarbe links, Dauer, Zustand. Die `sp-*`-Klassen setzen
   sonst eine volle Hintergrundfarbe; hier gilt die gedeckte Fassung. */
.kal-chip {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2px 5px;
  border-radius: 3px;
  border-left: 3px solid var(--grau-dunkel);
  background: var(--kohle-hell);
  line-height: 1.3;
}
.kal-chip.sp-swim  { border-left-color: #2d7fb8; background: rgba(45, 127, 184, 0.16); }
.kal-chip.sp-ride  { border-left-color: #c08a2e; background: rgba(192, 138, 46, 0.16); }
.kal-chip.sp-run   { border-left-color: var(--orange); background: rgba(255, 90, 31, 0.14); }
.kal-chip.sp-other { border-left-color: #6a6a74; background: rgba(106, 106, 116, 0.18); }
.kal-chip-name {
  color: var(--weiss);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kal-chip-dauer { color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kal-chip.erledigt .kal-chip-dauer,
.kal-chip.frueher .kal-chip-dauer { color: var(--gut); }
.kal-chip.ungeplant .kal-chip-dauer { color: var(--orange-hell); }
.kal-chip.ausgefallen { opacity: 0.55; }
.kal-chip.ausgefallen .kal-chip-name { text-decoration: line-through; }

.kal-wettkampf {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange-hell);
}

.kal-woche {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px 4px 6px;
  border-left: 1px solid var(--rille);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kal-kw { color: var(--grau-dunkel); }
.kal-soll { color: var(--grau); }
.kal-ist { color: var(--gut); }

/* Zwischengroesse: die Namen haben keinen Platz mehr, die Dauer schon. */
@media (max-width: 900px) {
  .kal-chip-name { display: none; }
  .kal-tag { min-height: 64px; }
}

/* Telefon: sieben Spalten zu je gut 45 px. Die Wochenspalte faellt weg, aus
   jedem Eintrag wird ein farbiger Strich -- was er war, steht im Detail. */
@media (max-width: 520px) {
  .kal-raster { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .kal-woche, .kal-kopf-woche { display: none; }
  .kal-tag { min-height: 52px; padding: 4px; gap: 2px; }
  .kal-chip { padding: 0; height: 5px; border-left-width: 0; border-radius: 2px; }
  .kal-chip.sp-swim  { background: #2d7fb8; }
  .kal-chip.sp-ride  { background: #c08a2e; }
  .kal-chip.sp-run   { background: var(--orange); }
  .kal-chip.sp-other { background: #6a6a74; }
  .kal-chip-dauer { display: none; }
  .kal-wettkampf { font-size: 0.55rem; letter-spacing: 0; }
  /* Die Monatszeile bekommt die ganze Breite, die Pfeile stehen an den
     Raendern -- dort, wo der Daumen ist. */
  .kal-leiste { flex-basis: 100%; justify-content: space-between; margin-right: 0; order: 1; }
  .kal-monatsname { min-width: 0; font-size: 1.15rem; }
  .kal-wahl ~ header.kopf { padding-top: 10px; }
  .kal-wahl ~ header.kopf nav.sprung { margin-top: 6px; }
}

/* --- Das Detail eines Tages ----------------------------------------------
   Ueber `:target` eingeblendet, ohne Skript. Die Flaeche dahinter ist selbst
   ein Link auf `#zu` und schliesst bei einem Tipp daneben. */

.kal-detail { display: none; }
.kal-detail:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
.kal-detail-hinter {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.kal-detail-inhalt {
  position: relative;          /* ueber der Flaeche dahinter */
  width: min(1000px, 100%);
  background: var(--schwarz);
  border: 1px solid var(--rille);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kal-detail-datum { font-size: 1.1rem; font-weight: 700; }
a.kal-schliessen { text-decoration: none; }
.kal-marken { margin-bottom: -6px; }
.kal-wettkampf-zeile { color: var(--orange-hell); }
.kal-wettkampf-zeile strong { color: var(--orange); }
/* Die Seite darunter soll nicht mitscrollen, solange ein Tag offen ist. */
body:has(.kal-detail:target) { overflow: hidden; }

@media (max-width: 520px) {
  .kal-detail:target { padding: 0; }
  .kal-detail-inhalt { border-radius: 0; min-height: 100%; padding: 14px; }
}

/* ======================================================================
   Plan hochladen (seit 0.12) -- Formular im Plan-Abschnitt, Vorschau- und
   Ergebnisseite vom Endpunkt (`web/plan_seiten.py`)
   ====================================================================== */

.upload { margin: 12px 0 4px; }
.upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
input.upload-datei {
  color: var(--grau);
  font-family: inherit;
  font-size: 0.85rem;
  max-width: 100%;
}
input.upload-datei::file-selector-button {
  background: var(--kohle-hell);
  color: var(--weiss);
  border: 1px solid var(--rille);
  border-radius: 8px;
  padding: 10px 14px;          /* Tippziel */
  margin-right: 10px;
  font-family: inherit;
  cursor: pointer;
}
input.upload-datei::file-selector-button:hover { border-color: var(--orange); }

/* Entfaellt ist rot: das ist die Zeile, ueber die man stolpern soll. */
.abzeichen.entfaellt { border-color: var(--schlecht); color: var(--schlecht); }

ul.upload-liste { list-style: none; margin: 6px 0 12px; padding: 0; font-size: 0.88rem; }
li.upload-zeile { padding: 7px 0; border-bottom: 1px solid var(--rille); }
li.upload-zeile:last-child { border-bottom: none; }
li.upload-zeile .abzeichen { min-width: 74px; text-align: center; margin-right: 4px; }
li.upload-zeile .sport {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grau);
}
li.upload-zeile.entfaellt .plan-name { text-decoration: line-through; color: var(--grau); }
li.upload-zeile .zusatz { font-size: 0.78rem; color: var(--grau); margin: 3px 0 0 82px; }

.upload-knoepfe { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
a.upload-abbrechen { color: var(--grau); font-size: 0.9rem; }
a.upload-abbrechen:hover { color: var(--weiss); }

@media (max-width: 520px) {
  li.upload-zeile .zusatz { margin-left: 0; }
}

/* Das Tagebuch -- auf `stil.css` aufgesetzt, damit die Trainingskarten
   (Schritte, Intervallbalken, Plan gegen Ist) genauso aussehen wie in der
   Auswertung. Was hier steht, gilt nur unter `body.tagebuch`.

   Fuer Leser am Telefon geschrieben: groessere Schrift im Fliesstext, die
   Kacheln als ganze Flaeche antippbar, nichts, was nur mit Maus geht.

   Kein Dollarzeichen -- die Regel aus stil.css gilt hier aus Gewohnheit mit,
   auch wenn diese Datei nicht durch `Template` geht. */

body.tagebuch { --kraft: #b07cff; --schwimm: #4db8ff; --rad: #ffc046; --lauf: var(--orange-hell); }

.tb-kopf h1 {
  font-size: 2.1rem;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tb-unterzeile { color: var(--grau); margin-top: 2px; }
.tb-countdown {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--weiss);
  border: 1px solid var(--rille);
  border-radius: 999px;
  padding: 4px 12px;
}

/* --- Zaehler ------------------------------------------------------------ */

.tb-zaehler {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.tb-zaehler-kachel {
  background: var(--kohle);
  border: 1px solid var(--rille);
  border-top: 3px solid var(--grau-dunkel);
  border-radius: var(--radius);
  padding: 12px 10px 10px;
  text-align: center;
}
.tb-zahl { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tb-zahl-marke { font-size: 0.75rem; color: var(--grau); text-transform: uppercase; letter-spacing: 0.08em; }
.tb-zaehler-kachel.tb-swim  { border-top-color: var(--schwimm); }
.tb-zaehler-kachel.tb-ride  { border-top-color: var(--rad); }
.tb-zaehler-kachel.tb-run   { border-top-color: var(--lauf); }
.tb-zaehler-kachel.tb-kraft { border-top-color: var(--kraft); }
.tb-zaehler-kachel.tb-gesamt { border-top-color: var(--orange); background: var(--kohle-hell); }
.tb-gesamt .tb-zahl { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 560px) {
  .tb-zaehler { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tb-zaehler-kachel.tb-gesamt { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
  .tb-zahl { font-size: 1.6rem; }
  .tb-zahl-marke { font-size: 0.68rem; letter-spacing: 0.04em; }
}

/* --- Liste --------------------------------------------------------------- */

h2.tb-woche {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grau);
  margin: 28px 0 10px;
}
.tb-liste { display: grid; gap: 12px; }

a.tb-kachel {
  display: flex;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  background: var(--kohle);
  border: 1px solid var(--rille);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.15s;
}
a.tb-kachel:hover, a.tb-kachel:focus-visible { border-color: var(--orange); }
.tb-kachel-text { flex: 1; min-width: 0; }
.tb-kachel-kopf { font-size: 0.85rem; color: var(--grau); }
h3.tb-name { margin: 4px 0 2px; font-size: 1.15rem; line-height: 1.3; }
.tb-geplant { font-size: 0.85rem; color: var(--grau); }
.tb-anriss { margin: 8px 0 0; color: var(--weiss); font-size: 0.98rem; line-height: 1.5; }

.tb-werte { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; }
.tb-werte div { min-width: 0; }
.tb-werte dt { font-size: 0.68rem; color: var(--grau-dunkel); text-transform: uppercase; letter-spacing: 0.08em; }
.tb-werte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.tb-kachel-bild { position: relative; flex: 0 0 112px; }
.tb-kachel-bild img { width: 112px; height: 112px; object-fit: cover; border-radius: 8px; display: block; }
.tb-mehr {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(11, 11, 13, 0.8); color: var(--weiss);
  font-size: 0.75rem; padding: 1px 7px; border-radius: 999px;
}
@media (max-width: 480px) {
  .tb-kachel-bild { flex-basis: 84px; }
  .tb-kachel-bild img { width: 84px; height: 84px; }
}

.tb-art {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--kohle-hell);
  margin-right: 6px;
  vertical-align: 1px;
}
.tb-art.tb-swim  { color: var(--schwimm); }
.tb-art.tb-ride  { color: var(--rad); }
.tb-art.tb-run   { color: var(--lauf); }
.tb-art.tb-kraft { color: var(--kraft); }

/* --- Detail -------------------------------------------------------------- */

a.tb-zurueck {
  display: inline-block;
  color: var(--grau);
  text-decoration: none;
  padding: 8px 0;
  margin-bottom: 8px;
}
a.tb-zurueck:hover { color: var(--weiss); }
.tb-kopf .tb-wann { color: var(--grau); font-size: 0.95rem; }
.tb-kopf h1 { margin-top: 6px; }

.tb-kennzahlen { margin-bottom: 8px; }
.tb-kennzahlen .wert { font-size: 1.5rem; }

.tb-abschnitt { margin-top: 28px; }
.tb-abschnitt > h2 { font-size: 1.1rem; margin: 0 0 12px; }

.tb-text p { font-size: 1.08rem; line-height: 1.65; margin: 0 0 14px; max-width: 68ch; }

.tb-bilder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.tb-bilder.einzeln { grid-template-columns: 1fr; max-width: 720px; }
.tb-bilder figure { margin: 0; }
.tb-bilder img { width: 100%; height: auto; border-radius: 8px; display: block; background: var(--kohle); }
.tb-bilder figcaption { font-size: 0.85rem; color: var(--grau); margin-top: 4px; }
@media (max-width: 560px) { .tb-bilder { grid-template-columns: 1fr; } }

.tb-karte {
  height: 340px;
  border-radius: var(--radius);
  border: 1px solid var(--rille);
  background: var(--kohle);
  overflow: hidden;
}
@media (max-width: 560px) { .tb-karte { height: 260px; } }
/* Die Kacheln sind hell; ein leichter Daempfer, damit die Karte nicht aus
   der dunklen Seite herausleuchtet. Die Spur selbst bleibt unberuehrt. */
.tb-karte .leaflet-tile-pane { filter: brightness(0.82) saturate(0.85); }
.tb-karte .leaflet-control-attribution { font-size: 10px; }

.tb-ziel {
  background: var(--kohle-hell);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 1rem;
}
.tb-ziel strong { color: var(--orange-hell); }

.tagebuch main .leer { color: var(--grau); }