/* Strongwork — dieselben Gestaltungsmittel wie der Landungssteg:
   Logbuch mit durchgehenden Linien, Monospalte für Zahlen, Markergrün fürs
   Erledigte, Markerrot ausschließlich für Ausfälle. */

:root {
  --grund: #e2e2dc;      /* Seitenhintergrund — dunkler als die Karten */
  --paper: #f6f6f2;      /* Kartenfläche */
  --paper-2: #e5e5df;
  --ink: #171a1b;
  --muted: #5c6663;
  --rule: #d3d5cd;
  --rule-strong: #b9bcb2;
  --brand: #12352a;                       /* Tiefgrün — trägt auf hellem Grund */
  --brand-soft: rgba(18, 53, 42, 0.09);
  /* Limette hat auf Weiß nur 1,4:1 Kontrast und ist dort unlesbar.
     Sie wird ausschließlich auf dunklem Grund eingesetzt. */
  --akzent: #a8e05f;
  --flag: #a8412a;
  --flag-soft: rgba(168, 65, 42, 0.1);
  --on-brand: #f4f6f2;

  /* Muss mit landing/index.html übereinstimmen — die beiden Fassungen waren
     schon einmal verschieden, und dann sieht dieselbe Überschrift auf
     Startseite und App verschieden aus. Arial Narrow gibt es auf Android und
     auf Windows ohne Office nicht; die Ersatzschriften stehen deshalb
     ausdrücklich dahinter. */
  --display: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", "Liberation Sans Narrow", "sans-serif-condensed", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(1rem, 3.5vw, 2.2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0c0f0e;    /* Seitenhintergrund */
    --paper: #171b19;    /* Kartenfläche — hebt sich ab */
    --paper-2: #171b19;
    --ink: #e7eae5;
    --muted: #939e99;
    --rule: #262b29;
    --rule-strong: #39413d;
    --brand: #a8e05f;                     /* im Dunkelmodus trägt die Limette */
    --brand-soft: rgba(168, 224, 95, 0.13);
    --akzent: #a8e05f;
    --flag: #e0795d;
    --flag-soft: rgba(224, 121, 93, 0.13);
    --on-brand: #0b0f0d;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 0.98;
}
h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.05;
}
h3 {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}

p {
  margin: 0 0 0.7rem;
  max-width: 34rem;
}
p:last-child {
  margin-bottom: 0;
}

.sheet {
  max-width: 62rem;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 clamp(0.6rem, 2vw, 1.2rem) 3rem;
}

/* ── Karten statt Linien ───────────────────────────────────────────
   Vorher lagen alle Abschnitte randlos auf einer Fläche — nichts war
   voneinander abgegrenzt. Jetzt ist jeder Abschnitt eine eigene Karte
   mit Rand, Fläche und Abstand. */
.block {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: clamp(1rem, 3vw, 1.6rem);
  margin-bottom: clamp(0.9rem, 2.5vw, 1.4rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(0.8rem, 2.5vw, 1.4rem);
  margin: 0 0 clamp(0.9rem, 2.5vw, 1.4rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.3rem;
}
.wordmark > span { color: inherit; }
.nav {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav a {
  text-decoration: none;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--brand);
}

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Zeilen ---------- */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.entry:first-of-type {
  border-top: 1px solid var(--rule-strong);
}
.entry-main {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}
.entry-name {
  font-weight: 600;
}
.entry.is-done .entry-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}
.entry-when,
.reps,
.amount {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amount {
  min-width: 5.2rem;
  text-align: right;
  font-size: 0.9rem;
}
.entry-note {
  font-size: 0.85rem;
  color: var(--muted);
}
.entry-note b {
  color: var(--flag);
  font-weight: 600;
}
.entry-side {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-self: end;
}
.daybreak {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1rem 0 0.3rem;
}

/* ---------- Bedienelemente ---------- */
button,
.btn {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}
button:hover,
.btn:hover {
  border-color: var(--ink);
}
button:focus-visible,
.btn:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
button.primary,
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
button.primary:hover,
.btn.primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
button.done {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
button.flag {
  color: var(--flag);
  border-color: var(--flag);
}
button.flag.is-active {
  background: var(--flag);
  border-color: var(--flag);
  color: var(--on-brand);
}
.btn-group {
  display: flex;
  gap: 0.35rem;
}

input[type="email"],
input[type="text"],
input[type="datetime-local"],
input[type="number"],
select {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.55rem 0.7rem;
}

/* ---------- Kacheln ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.fact {
  background: var(--paper);
  padding: 0.9rem 1rem;
}
.fact dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.fact dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fact dd.brand {
  color: var(--brand);
}
.fact dd.flagged {
  color: var(--flag);
}
.fact dd small {
  display: block;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.2rem;
  text-transform: none;
}

.termin {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--brand);
  background: var(--paper-2);
  padding: 1rem 1.1rem;
  display: flex;
  gap: 1.1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.termin-when {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.termin-what {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.termin-frist {
  font-family: var(--mono);
  font-size: 0.73rem;
  color: var(--muted);
  margin-top: 0.45rem;
}
.termin-frist b {
  color: var(--ink);
}
.termin.late {
  border-left-color: var(--flag);
}
/* Der folgenreichste Satz der App stand im leisesten Stil: 11,7 px, grau,
   Schreibmaschinenschrift. Nach Fristablauf kostet eine Absage Geld — dann
   wird der Satz gelesen wie das, was er ist. Vor Fristablauf bleibt er
   leise, da ist er nur eine Auskunft. */
.termin.late .termin-frist {
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--flag);
  font-weight: 600;
}

.note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.8rem;
  max-width: 34rem;
}
.empty {
  color: var(--muted);
  font-size: 0.93rem;
  padding: 1.2rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid var(--rule-strong);
}
td {
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
td.num,
th.num {
  text-align: right;
  font-family: var(--mono);
  padding-right: 0;
}
.scroll-x {
  overflow-x: auto;
}

.pill {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
  color: var(--muted);
}
.pill.ok {
  color: var(--brand);
}
.pill.warn {
  color: var(--flag);
}

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

/* PHP-Fassung: Ergänzungen */
.mono { font-family: var(--mono); font-size: 0.82rem; }
button.klein { padding: 0.2rem 0.45rem; font-size: 0.65rem; }
.absage { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.nav form { margin: 0; }

/* Formulare (Kunde anlegen, Termin anlegen) */
.formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem 1.2rem;
  max-width: 46rem;
  margin-top: 1rem;
}
.formular label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.formular input,
.formular select { width: 100%; }
.formular > div { grid-column: 1 / -1; }

/* ── Wochenplan kompakt ─────────────────────────────────────────────
   Vorher eine lange Liste, in der man den Tag suchen musste. Jetzt:
   Wochenleiste zum Überblick, darunter Tagblöcke mit engen Zeilen. */

.wochenleiste {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 1.4rem;
}
.wochenleiste a,
.wochenleiste span {
  background: var(--paper);
  padding: 0.35rem 0.2rem 0.4rem;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  display: block;
}
.wochenleiste .tag-kurz {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
}
.wochenleiste .tag-zahl {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  display: block;
}
.wochenleiste .leer .tag-zahl { color: var(--rule-strong); }
.wochenleiste .fertig .tag-zahl { color: var(--brand); }
.wochenleiste .heute {
  background: var(--brand-soft);
  box-shadow: inset 0 -3px 0 var(--brand);
}

.tagblock { margin-bottom: 1.3rem; }
.tagblock-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule-strong);
}
.tagblock-kopf h3 {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin: 0;
}
.tagblock-kopf .zaehler {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.tagblock.ist-heute .tagblock-kopf h3 { color: var(--brand); }

.uebung-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem 0.7rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.uebung-zeile .titel { font-weight: 600; line-height: 1.25; }
.uebung-zeile .angabe {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.uebung-zeile .angabe b { color: var(--ink); font-weight: 600; }
.uebung-zeile .zusatz { font-size: 0.78rem; color: var(--muted); }
.uebung-zeile.erledigt .titel {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--brand);
}
.uebung-zeile .werkzeug { display: flex; gap: 0.3rem; align-items: center; }
.uebung-zeile .werkzeug .btn,
.uebung-zeile .werkzeug button {
  padding: 0.28rem 0.5rem;
  font-size: 0.63rem;
}

/* ── Grundmaße für die Hand ─────────────────────────────────────────
   Gemessen waren die Knöpfe 29 px hoch mit 5 px Abstand und einem
   Randkontrast von 1,64:1 — beides zu wenig, um im Studio sicher zu
   treffen. Empfehlung sind 44 px und 3:1. */
:root {
  --tap: 2.75rem;
  --tap-gross: 3.25rem;
  --luecke: 0.6rem;
  --rand: #7f8379;
}
@media (prefers-color-scheme: dark) { :root { --rand: #616b67; } }

button, .btn, .tat {
  min-height: var(--tap);
  border-color: var(--rand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
button:focus-visible, .btn:focus-visible, .tat:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
input, select { min-height: var(--tap); font-size: 16px; border-color: var(--rand); }

/* Formular als Layoutkind, nicht als Kasten drumherum */
form.knopf { display: contents; }

/* Lange Namen sprengen keine Spalte mehr */
.entry-name, .satz-name, h1, h2, h3 { overflow-wrap: anywhere; }

/* Rangfolge: grün ist der Normalweg, rot nur die Ausnahme.
   Hieß bis zum 29.08.2026 `.tat--geld` — der Name log: gesessen hat die Klasse
   an „Termin anlegen" und „Speichern", und um Geld geht es an keiner der
   beiden Stellen. Gemeint war immer der Hauptweg des Formulars, nicht der
   Betrag. Geld tragen `.tat--voll` und `.tat--warnung`. */
.tat--haupt { background: var(--brand); border-color: var(--brand); color: var(--on-brand);
             font-weight: 700; min-height: var(--tap-gross); }
.tat--still { border-color: transparent; color: var(--muted);
              text-decoration: underline; text-underline-offset: 3px; padding-inline: 0.5rem; }
.tat--flag { border-color: var(--flag); color: var(--flag); }

/* ── Planaufbau ─────────────────────────────────────────────────────
   Vorher: je Tag eine Überschrift plus „1 Übung" — Wiederholung ohne
   Wert. Jetzt: schmaler Tagesbalken, Übung antippen und ändern. */
.tag { margin-bottom: 1.6rem; }
.tagmarke {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 0.2rem;
  padding: 0.45rem 0 0.35rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rand);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
}

.satz { border-bottom: 1px solid var(--rule); }
.satz > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
  padding: 0.6rem 0;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
}
.satz > summary::-webkit-details-marker { display: none; }
.satz > summary::after { content: "▾"; grid-column: 2; grid-row: 1; color: var(--muted); font-size: 0.75rem; }
.satz[open] > summary::after { content: "▴"; }
.satz-name { grid-column: 1; font-weight: 600; }
.satz-zahl { grid-column: 1; font-family: var(--mono); font-size: 0.74rem;
             color: var(--muted); font-variant-numeric: tabular-nums; }

.satz-feld {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.7rem 0.9rem;
  padding: 0.6rem 0 0.9rem;
}
.satz-feld label { display: flex; flex-direction: column; gap: 0.25rem;
                   font-size: 0.76rem; color: var(--muted); }
.satz-feld label.breit { grid-column: 1 / -1; }
.satz-tat { grid-column: 1 / -1; }
.satz-tat .tat--haupt { width: 100%; }

.satz-nebentat { display: flex; gap: var(--luecke); align-items: center;
                 flex-wrap: wrap; padding-bottom: 0.8rem; }
.gefahr > summary { min-height: var(--tap); display: inline-flex; align-items: center;
                    font-size: 0.78rem; color: var(--muted);
                    text-decoration: underline; text-underline-offset: 3px;
                    cursor: pointer; list-style: none; }
.gefahr > summary::-webkit-details-marker { display: none; }

.tag-plus { display: flex; width: 100%; margin-top: 0.7rem;
            border-style: dashed; color: var(--muted); }

.planzeile { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
             text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
/* Aufklapp-Pfeil sichtbar machen — vorher ein grauer Punkt */
.satz > summary::after { font-size: 1rem; color: var(--ink); opacity: 0.55; }
.satz[open] { background: var(--paper-2); padding: 0 0.7rem; margin: 0 -0.7rem; }

/* ── Gruppen sichtbar trennen ───────────────────────────────────────
   Der Vorwurf war: „keine Abgrenzung, keine Trennung". Stimmt — alles
   lag als Linienliste auf einer Fläche. Jede Gruppe bekommt jetzt eine
   eigene Fläche mit Rand, Kopf und Abstand. */

/* Tage im Plan: eigener Kasten mit farbigem Kopf */
.tag {
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--paper);
}
.tagmarke {
  position: static;
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  color: var(--ink);
}
.tag .satz { padding: 0 0.9rem; border-bottom: 1px solid var(--rule); }
.tag .satz:last-of-type { border-bottom: 0; }
.tag .satz[open] { background: var(--brand-soft); margin: 0; padding: 0 0.9rem 0.2rem; }
.tag-plus {
  margin: 0;
  border: 0;
  border-top: 1px dashed var(--rule-strong);
  border-radius: 0;
  background: var(--paper-2);
}

/* Terminzeilen und Listen: Zebrastreifen statt Haarlinienbrei */
.entry {
  padding: 0.7rem 0.7rem;
  margin: 0 -0.7rem;
  border-bottom: 1px solid var(--rule);
}
.entry:nth-child(even) { background: var(--paper-2); }
.entry:first-of-type { border-top: 1px solid var(--rule-strong); }

/* Kennzahlen: echte Kacheln mit Rand statt Lücken im Hintergrund */
.facts { background: transparent; border: 0; gap: 0.6rem; }
.fact {
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
}

/* Formulare abgrenzen */
.formular {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.8rem;
}
.satz-feld {
  background: transparent;
  border-top: 1px dashed var(--rule-strong);
  margin-top: 0.2rem;
}

/* Tabellen: Kopf abgesetzt, Zeilen gestreift */
table { border-collapse: separate; border-spacing: 0; }
thead th { background: var(--paper-2); position: sticky; top: 0; }
tbody tr:nth-child(even) td { background: var(--paper-2); }
td, th { padding-left: 0.6rem; }
td:first-child, th:first-child { padding-left: 0; }

/* Tagesüberschriften in Terminlisten */
.daybreak {
  margin: 1.2rem -0.7rem 0;
  padding: 0.5rem 0.7rem 0.4rem;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-size: 0.72rem;
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════
   Typografie und Hierarchie
   Vorher: alles Versalien in schmaler Schrift, alles Monospace, alles
   im selben Grau — es las sich wie eine Konsolenausgabe. Jetzt:
   normale Schrift für Text, Monospace nur für Zahlen, klare Größen.
   ══════════════════════════════════════════════════════════════════ */

h1, h2, h3 {
  font-family: var(--body);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 650;
  color: var(--ink);
}
h1 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; }
h2 { font-size: clamp(1.15rem, 3vw, 1.4rem); line-height: 1.2; }
h3 { font-size: 1rem; letter-spacing: 0; }

/* ── Ein markantes Element je Seite ─────────────────────────────────
   Entschieden am 29.08.2026. Vorgeschichte in zwei Schritten:
   Anfangs stand in der App *alles* in schmalen Versalien und las sich wie
   eine Konsolenausgabe; am 14.08.2026 wurde das für h1, h2 und h3
   zurückgenommen. Richtig — nur ging dabei auch die letzte Verwandtschaft
   zur Startseite verloren, die mit „DEIN PLAN. IMMER DABEI." in genau
   dieser Schrift wirbt. Der Kunde kam aus der Werbung in eine Oberfläche,
   die aussah wie ein anderes Produkt.

   Deshalb bekommt **die h1 und nur sie** die schmale Schrift zurück. Es
   gibt genau eine je Seite (nachgezählt am 29.08.2026), also bleibt es bei
   einem lauten Element; h2 und h3 bleiben ruhig, und die Begründung von
   damals bleibt gewahrt. */
h1 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
}

.wordmark { font-family: var(--display); font-size: 1.2rem; }

/* Kleine Beschriftungen bleiben Monospace, aber leiser und kleiner */
.eyebrow, .planzeile, .tagmarke {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Mehr Kontrast im Text — vorher verschwand alles im Grau */
:root { --muted: #5a6360; }
@media (prefers-color-scheme: dark) { :root { --muted: #9fa9a4; } }

/* Zahlen bleiben tabellarisch und ruhig */
.satz-zahl, .amount, .reps, .entry-when, .angabe {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── Knöpfe: lesbar statt gesperrt ──────────────────────────────── */
button, .btn, .tat {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 7px;
  padding: 0.55rem 0.95rem;
}
button.primary, .btn.primary, .tat--haupt {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); }
.tat--still { font-weight: 500; }

/* ── Navigation: Reiter statt Textkette ─────────────────────────── */
.nav { gap: 0.15rem; font-family: var(--body); font-size: 0.85rem;
       letter-spacing: 0; text-transform: none; align-items: center; }
.nav a {
  padding: 0.45rem 0.7rem;
  border-radius: 7px;
  border-bottom: 0;
  color: var(--muted);
  font-weight: 500;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); border-color: transparent; }
.nav a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 650;
  border-color: transparent;
}

/* ── Übungszeilen: mehr Luft, klare Werte ───────────────────────── */
.satz > summary { padding: 0.75rem 0; gap: 0.2rem 0.9rem; }
.satz-name { font-size: 1rem; font-weight: 600; }
.satz-zahl { font-size: 0.8rem; color: var(--muted); }
.satz:hover > summary .satz-name { color: var(--brand); }

/* ── Tageskarten deutlicher ─────────────────────────────────────── */
.tag { border-color: var(--rule-strong); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tagmarke { font-size: 0.7rem; color: var(--muted); }

/* ---------------------------------------------------------------
   Kundenansicht: ein Tag zur Zeit
   --------------------------------------------------------------- */

.tagreiter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  margin: 0 0 1.4rem;
}

.tagreiter a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: var(--tap-gross);
  padding: .4rem .1rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}

.tagreiter .reiter-tag { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.tagreiter .reiter-zahl {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
}

.tagreiter a.leer { opacity: .5; }
.tagreiter a.fertig { border-color: var(--brand); }
.tagreiter a.fertig .reiter-zahl { color: var(--brand); }

.tagreiter a.aktiv {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.tagreiter a.aktiv .reiter-zahl { color: var(--paper); opacity: .8; }

.tagtitel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1rem;
}
.tagtitel h2 { margin: 0; }

/* Eine Übung — eine Karte. Alles, was dazugehört, steckt darin. */
.uebungskarte {
  border: 1px solid var(--rand);
  border-radius: 11px;
  background: var(--paper);
  padding: .95rem 1rem;
  margin-bottom: .7rem;
}

.uebungskarte.erledigt { background: var(--brand-soft); border-color: var(--brand); }

.uebungskarte-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.uebungskarte h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.uebungskarte .werte { margin: 0; font-family: var(--mono); font-size: .86rem; }
.uebungskarte .hinweis { margin: .35rem 0 0; font-size: .85rem; color: var(--muted); }
.uebungskarte .knopf button { white-space: nowrap; }

/* Timer */
.uhr {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--rand);
}

.uhr-anzeige {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  min-width: 3.6rem;
  color: var(--muted);
}

.uhr.laeuft .uhr-anzeige { color: var(--ink); font-weight: 700; }
.uhr.fertig .uhr-anzeige { color: var(--brand); }
.uhr.fertig { animation: blinken .5s ease-in-out 3; }

@keyframes blinken {
  50% { background: var(--brand-soft); }
}

.uhr .tat { font-size: .82rem; padding: .45rem .7rem; min-height: 2.4rem; }

/* Video */
.videofach { margin-top: .8rem; }
.videofach > summary {
  cursor: pointer;
  padding: .5rem 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.videofach video {
  width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  background: #000;
  margin-top: .3rem;
}
.videofach .note { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

@media (max-width: 30rem) {
  .uebungskarte-kopf { flex-direction: column; gap: .6rem; }
  .uebungskarte .knopf { align-self: stretch; }
  .uebungskarte .knopf button { width: 100%; }
}

/* [hidden] muss auch gegen display:flex gewinnen */
[hidden] { display: none !important; }

.tagreiter a.heute { box-shadow: inset 0 0 0 1px var(--rand); }
.tagreiter a.heute .reiter-tag::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  margin: .15rem auto 0;
}
.tagreiter a.heute.aktiv .reiter-tag::after { background: var(--paper); }

.videolink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
  min-height: var(--tap);
  font-size: .88rem;
}

/* Video im Fach — 16:9, füllt die Karte, auch am Handy */
.video-rahmen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  margin-top: .3rem;
}
.video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-hinweis { font-size: .74rem; margin: .35rem 0 0; }

/* Laufender Timer bleibt beim Scrollen greifbar */
#uhrleiste {
  position: fixed;
  left: .6rem;
  right: .6rem;
  bottom: .6rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border-radius: 11px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 22px rgb(0 0 0 / .3);
}
#uhrleiste .uhrleiste-name {
  flex: 1;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#uhrleiste .uhrleiste-zeit {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
#uhrleiste button {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  min-height: 2.4rem;
  padding: .4rem .8rem;
}

@media (max-width: 30rem) {
  .uhr .tat { min-height: var(--tap); flex: 1; }
  .uhr-anzeige { width: 100%; font-size: 2rem; }
  .videofach > summary { min-height: var(--tap-gross); }
}

body.uhr-laeuft { padding-bottom: 5rem; }

/* ---------------------------------------------------------------
   Trainer: Wochenansicht
   --------------------------------------------------------------- */

/* Was als Nächstes ansteht — der einzige Block, der beim Öffnen zählt */
.jetzt {
  border-color: var(--brand);
  border-width: 2px;
}
.jetzt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.jetzt-zeit {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
}
.jetzt-name { margin: .2rem 0 .1rem; font-size: 1.5rem; }
.jetzt-wo { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.jetzt-tasten { display: flex; gap: .5rem; flex-wrap: wrap; }
.jetzt-tasten button { flex: 1 1 10rem; min-height: var(--tap-gross); font-size: 1rem; }

/* Wochenwahl */
.wochenwahl {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 1.1rem;
  flex-wrap: wrap;
}
.wochenwahl .btn { min-width: 2.9rem; justify-content: center; }
.wochenwahl .btn.aktiv { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.wochenwahl-spanne {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
}

.fact--wartet { border-color: var(--flag); }
.fact .btn { margin-top: .5rem; align-self: start; }

/* Tageskarte im Wochenblatt */
.tag-kopf { display: flex; align-items: center; justify-content: space-between; }
.tag-kopf .tag-zahl { font-family: var(--mono); color: var(--muted); }

/* Ein Termin */
.termin {
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
}
.termin:last-of-type { border-bottom: 0; }
.termin--wartet { border-left-color: var(--flag); background: var(--flag-soft, transparent); }
.termin--fertig { border-left-color: var(--brand); }

.termin-zeile {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.termin-zeit {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  min-width: 3.2rem;
}
.termin-name { flex: 1; font-weight: 600; font-size: 1.02rem; }
.termin-geld { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.termin-meta { margin: .25rem 0 0 3.8rem; font-size: .82rem; color: var(--muted); }
.termin-tasten {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin: .65rem 0 0 3.8rem;
}

@media (max-width: 30rem) {
  /* „Deine Termine": Grunddaten links, Auswahlfeld und Absageknopf rechts —
     nebeneinander passt das auf 375 px nicht mehr, der Knopf wurde gequetscht.
     Am Handy also untereinander, und die Bedienelemente über die volle
     Breite. */
  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry-side { width: 100%; justify-self: stretch; }
  .entry-side > details { width: 100%; }
  .entry-side .absage { max-width: none; }
  .entry-side .absage select,
  .entry-side .absage button { min-height: var(--tap); }

  .jetzt-tasten button { flex-basis: 100%; }
  .termin-meta, .termin-tasten { margin-left: 0; }
  .termin-tasten .knopf, .termin-tasten .tat { flex: 1 1 8rem; }
  .termin-tasten button { width: 100%; min-height: var(--tap); }
  .wochenwahl-spanne { width: 100%; margin-left: 0; }
}

/* Navigation darf am Handy umbrechen — abgeschnittene Reiter sind
   nicht erreichbar, und „Abrechnung" ist der wichtigste davon.

   Entschieden am 29.08.2026, weil sich zwei Berichte widersprachen: Der
   Bedienbarkeitsbericht wollte den Umbruch, der Gestaltungsbericht wollte
   ihn weghaben, weil der Kopf dadurch 149 px hoch wird und dabei klebt.
   Der Umbruch bleibt. Seitliches Schieben würde die hinteren Reiter zwar
   erreichbar lassen, aber unsichtbar machen — und niemand wischt in einer
   Leiste, von der er nicht weiß, dass sie weitergeht. Erledigt ist damit
   nur die halbe Beschwerde; die andere Hälfte war nicht der Umbruch,
   sondern die Höhe im klebenden Zustand. Also klebt der Kopf am Handy
   nicht mehr: Er scrollt weg wie alles andere und nimmt dort keinen
   Dauerplatz mehr weg, wo der Bildschirm klein ist. Am großen Bildschirm
   passt die Leiste in eine Zeile und bleibt kleben. */
.nav { flex-wrap: wrap; row-gap: .3rem; }

@media (max-width: 30rem) {
  .nav a { padding: .5rem .55rem; font-size: .82rem; }
  .masthead { padding-bottom: .5rem; position: static; }
  /* Der Trainer weiß, wer er ist. Der Name kostet am Handy eine ganze
     Zeile im Kopf; „Abmelden" bleibt. (Hier stand vorher `.nav .name
     { order: 99 }` — eine Regel auf eine Klasse, die es im Markup gar
     nicht gab. Sichtbar gemacht, schob sie den Namen hinter „Abmelden";
     am Handy ist er jetzt weg, am großen Bildschirm steht er wieder da,
     wo er hingehört.) */
  .nav .name { display: none; }
}

/* ---------------------------------------------------------------
   Abrechnung
   --------------------------------------------------------------- */

.rechnungskarte { margin-bottom: 1rem; }

.posten {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--rule);
  font-size: .87rem;
}
.posten-datum { font-family: var(--mono); font-size: .8rem; color: var(--muted); min-width: 8.5rem; }
.posten-text { flex: 1; }
.posten-geld { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Festschreiben ist der teuerste Knopf der Anwendung — er bekommt einen
   eigenen Schritt, nicht nur eine andere Farbe. */
.rechnung-fold { padding: .7rem .9rem 1rem; }
.rechnung-fold > summary {
  font-size: .95rem;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.rechnung-fold > summary::before { content: '▸ '; }
.rechnung-fold[open] > summary::before { content: '▾ '; }
.rechnung-fold .note { margin: .4rem 0 .8rem; }
.rechnung-fold button { width: 100%; min-height: var(--tap-gross); }

@media (max-width: 40rem) {
  .posten { flex-wrap: wrap; }
  .posten-datum { min-width: 100%; }

  /* Tabelle wird zur Kartenliste — quer scrollen findet niemand */
  .rechnungen, .rechnungen tbody, .rechnungen tr, .rechnungen td { display: block; width: 100%; }
  .rechnungen thead { display: none; }
  .rechnungen tr {
    border: 1px solid var(--rand);
    border-radius: 9px;
    background: var(--paper);
    padding: .6rem .8rem;
    margin-bottom: .6rem;
  }
  .rechnungen td { border: 0; padding: .2rem 0; text-align: left; }
  .rechnungen td[data-titel]::before {
    content: attr(data-titel) ' ';
    display: inline-block;
    min-width: 5.2rem;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .rechnungen td.num { text-align: left; }
}

.btn-group { flex-wrap: wrap; }
@media (max-width: 30rem) {
  .btn-group { width: 100%; }
  .btn-group > .btn, .btn-group > .knopf > button { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   Kundenliste
   --------------------------------------------------------------- */

.kundenkarte {
  border: 1px solid var(--rand);
  border-radius: 11px;
  background: var(--paper);
  padding: .9rem 1rem;
  margin-bottom: .7rem;
}
.kundenkarte.still { opacity: .62; }

.kundenkarte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
}
.kundenkarte-name { font-size: 1.08rem; font-weight: 650; text-decoration: none; color: var(--ink); }
.kundenkarte-name:hover { color: var(--brand); }
.kundenkarte-preis { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kundenkarte-meta { margin: .2rem 0 0; font-size: .84rem; color: var(--muted); }
.kundenkarte-marken { margin: .5rem 0 0; display: flex; gap: .3rem; flex-wrap: wrap; }

.kundenkarte-tasten { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .75rem; }
.kundenkarte-tasten .tat { flex: 1 1 9rem; justify-content: center; }
.kundenkarte-tasten button { width: 100%; }
.kundenkarte > .gefahr { margin-top: .3rem; }

/* ---------------------------------------------------------------
   Fortschritt: was der Kunde abgehakt hat
   --------------------------------------------------------------- */

.fortschritt {
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--brand-soft);
  padding: .8rem .95rem;
  margin: 0 0 1.2rem;
}
.fortschritt--leer { border-color: var(--rand); background: var(--paper-2); }

.fortschritt-zahl { font-size: .92rem; }
.fortschritt-zahl b { font-family: var(--mono); font-size: 1.5rem; }
.fortschritt-zahl small { display: block; color: var(--muted); font-size: .8rem; }

.fortschritt-balken {
  height: 7px;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--rand);
  overflow: hidden;
  margin: .55rem 0 .4rem;
}
.fortschritt-balken span { display: block; height: 100%; background: var(--brand); }
.fortschritt-note { margin: 0; font-size: .8rem; color: var(--muted); }

.haken { color: var(--brand); font-weight: 700; margin-right: .15rem; }

.absageform { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; max-width: 22rem; }
.absageform input[type=text] { width: 100%; }
.absageform .muted { font-size: .76rem; }

/* Quittung nach einer Handlung mit Folgen */
.quittung {
  border: 1px solid var(--brand);
  border-left-width: 4px;
  border-radius: 9px;
  background: var(--brand-soft);
  padding: .8rem .95rem;
  margin: 0 0 1rem;
  font-size: .92rem;
}

.absage-fold { margin-top: .8rem; }
.absage-fold > summary { font-size: .9rem; color: var(--flag); font-weight: 600; text-decoration: none; }
.absage-fold > summary::before { content: '▸ '; }
.absage-fold[open] > summary::before { content: '▾ '; }
.absage-fold .absage { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; max-width: 24rem; }
.absage-fold .absage button { min-height: var(--tap-gross); }
.warnwort { color: var(--flag); font-weight: 600; }

/* Dranbleiben: die eine Zahl, um die es dem Bestandskunden geht.
   Bewusst nüchtern — keine Punkte, keine Abzeichen, keine Bestenliste. */
.dranbleiben { margin: 0 0 1.2rem; }
.dranbleiben-balken {
  height: 8px;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rand);
  overflow: hidden;
}
.dranbleiben-balken span { display: block; height: 100%; background: var(--brand); }
.dranbleiben-text { margin: .45rem 0 0; font-size: .86rem; color: var(--muted); }
.dranbleiben-text b { color: var(--ink); font-family: var(--mono); }
.besser { color: var(--brand); font-weight: 600; }

/* Trainer: Plan übernehmen / Tag kopieren */
.uebernehmen, .tag-kopieren {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.tag-kopieren {
  margin: 0;
  padding: .6rem .9rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: .85rem;
}
.tag-kopieren label, .uebernehmen label { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 12rem; }
.uebernehmen .note { flex-basis: 100%; margin: .2rem 0 0; }

/* Kunde: ganzer Tag auf einmal */
.tagabschluss { margin: .2rem 0 1rem; }
.tagabschluss button { width: 100%; min-height: var(--tap-gross); }

/* Hinweis, wie man wiederkommt */
.ablegen {
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--paper);
  margin: 0 0 1rem;
  padding: 0 .9rem;
}
.ablegen > summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand);
}
.ablegen > summary::before { content: '＋ '; margin-right: .2rem; }
.ablegen[open] > summary::before { content: '－ '; }
.ablegen-inhalt { padding-bottom: .9rem; font-size: .87rem; }
.ablegen-inhalt p { margin: 0 0 .5rem; }

/* Vorschau klein, Video groß erst beim Antippen */
.videofach > summary {
  gap: .6rem;
  padding: .5rem 0;
}
.videovorschau {
  width: 88px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--rand);
  flex: none;
}
.videofach[open] > summary .videovorschau { display: none; }

/* ---------------------------------------------------------------
   Übungen als Kacheln
   --------------------------------------------------------------- */

.kacheln {
  display: grid;
  /* min() statt fester Breite: Auch bei großer Systemschrift oder schmalem
     Gerät bleiben es zwei Spalten — mit 10rem allein kippt es je nach
     Schriftgröße des Telefons auf eine. */
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 46%), 1fr));
  gap: .7rem;
  /* gleich hohe Kacheln je Reihe — ein ausgefranstes Raster liest sich unruhig */
  align-items: stretch;
}

.kacheln .uebungskarte {
  margin: 0;
  padding: 0 0 .8rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kachelbild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--rand);
  background: var(--paper-2);
}

.kacheln .uebungskarte-kopf { display: block; padding: .7rem .75rem 0; }
.kacheln .uebungskarte h3 { font-size: .95rem; line-height: 1.25; }
.kacheln .uebungskarte .werte { font-size: .8rem; }
.kacheln .uebungskarte .hinweis { font-size: .78rem; }
.kacheln .uebungskarte .knopf { display: contents; }
.kacheln .uebungskarte-kopf .knopf button { width: 100%; margin-top: .55rem; }

.kacheln .uhr { margin: .6rem .75rem 0; padding-top: .6rem; gap: .3rem; }
.kacheln .uhr-anzeige { font-size: 1.15rem; min-width: 2.9rem; width: auto; }
.kacheln .uhr .tat { font-size: .74rem; padding: .35rem .5rem; min-height: 2.2rem; flex: 1 1 auto; }
.kacheln .videofach, .kacheln .videolink { margin: .4rem .75rem 0; }
.kacheln .videofach > summary { font-size: .8rem; min-height: 2.4rem; }

/* Aufgeklapptes Video sprengt die Kachel — es nimmt die ganze Zeile ein */
.kacheln .uebungskarte:has(.videofach[open]) { grid-column: 1 / -1; }

@media (max-width: 30rem) {
  .kacheln { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .kacheln .uebungskarte-kopf { flex-direction: column; gap: 0; }
  .kacheln .uebungskarte .knopf button { width: 100%; }
}

/* Gleiche Ordnung in jeder Kachel: oben der Inhalt, unten die Bedienung.
   Ohne den nach unten gedrückten Fuß säße „Geschafft" in jeder Kachel auf
   einer anderen Höhe, sobald eine davon einen Timer hat. */
.kachel-fuss {
  margin-top: auto;
  padding: .6rem .75rem 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.kacheln .kachel-fuss .uhr {
  margin: 0;
  padding-top: .55rem;
  border-top: 1px dashed var(--rand);
}
.kacheln .kachel-fuss .knopf button { width: 100%; margin: 0; }
.kacheln .kachel-fuss .videofach,
.kacheln .kachel-fuss .videolink { margin: 0; }

.werte--pause { color: var(--muted); font-size: .78rem; margin-top: .1rem; }
.kacheln .uebungskarte-kopf { padding: .7rem .75rem .2rem; }
.kacheln .uebungskarte h3 { margin-bottom: .3rem; }
.kacheln .uebungskarte .werte { margin: 0; }
.kacheln .kachel-fuss .kundenkarte-tasten { margin: 0; }
.kacheln .kachel-fuss .kundenkarte-tasten .tat { flex: 1 1 100%; }

/* Fuß der Tageskarte: Übung hinzufügen und ganzen Tag kopieren */
.tag-fuss { padding: .7rem .9rem .9rem; border-top: 1px solid var(--rule); }
.tag-fuss .tag-plus { margin-top: 0; }

.tag-kopieren-fach { margin-top: .5rem; }
.tag-kopieren-fach > summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: .82rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tag-kopieren-fach > summary::-webkit-details-marker { display: none; }
.tag-kopieren-fach .tag-kopieren {
  border: 0;
  background: transparent;
  padding: .2rem 0 0;
  margin: 0;
}
.uebernehmen-fach { margin: 0 0 1.2rem; }
.uebernehmen-fach .uebernehmen { margin-top: .4rem; }

.ankreuz { flex-direction: row !important; align-items: center; gap: .5rem; font-size: .9rem; }
.ankreuz input { width: auto; min-height: 0; }

/* ---------------------------------------------------------------
   Gewicht der Schaltflächen
   Fläche liest das Auge als Verbindlichkeit. Deshalb: gefüllt nur,
   wo etwas Geld kostet oder sich nicht zurücknehmen lässt.
   Alles Folgenlose bleibt umrandet.
   --------------------------------------------------------------- */

.tat--voll {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 650;
}
.tat--voll:hover { filter: brightness(1.08); }

.tat--warnung {
  background: var(--flag);
  border-color: var(--flag);
  color: #fff;
  font-weight: 650;
}
.tat--warnung:hover { filter: brightness(1.08); }

/* Bereits erledigt: bestätigt, aber nicht laut — der Zustand ist erreicht,
   der Knopf nimmt ihn nur noch zurück. */
.tat--erledigt {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}

/* Bildmarke in der Kopfleiste — dieselbe Form wie App-Symbol und Briefbogen */
.wordmark { display: inline-flex; align-items: center; gap: .5rem; }
.wordmark .marke { width: 1.6rem; height: 1.6rem; flex: none; display: block; }
.wordmark b { font-weight: inherit; color: var(--brand); }

/* ── Abmelden für den Kunden ────────────────────────────────────────
   Für den Trainer ist „Abmelden" in der Kopfleiste harmlos. Für den
   Kunden war es die einzige Handlung, die ihn aussperrt — und sie stand
   oben rechts, an der auffälligsten Stelle der App. Ein Passwort, mit
   dem er zurückkäme, gibt es nicht; er braucht einen neuen Anmeldelink.
   Deshalb steht es für ihn seit dem 21.09.2026 als leiser Textverweis
   am Seitenende, wo man es sucht, wenn man es will, und nicht trifft,
   wenn man es nicht will. */
.seitenfuss {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
button.textlink {
  background: none;
  border: 0;
  padding: 0.4rem 0.6rem;
  min-height: var(--tap);
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
button.textlink:hover { color: var(--ink); }

/* ── Der Trainer bekommt ein Gesicht ────────────────────────────────
   Der Grund, warum der Kunde zahlt, war das Kleinste auf der Seite:
   der Trainername als .eyebrow in 10,88 px, grau, in Versalien. Seit
   dem 21.09.2026 steht er als eigene Zeile über dem Termin, mit Bild.
   Ohne hinterlegtes Foto bleibt der Anfangsbuchstabe — ein leerer
   Kreis sähe nach Fehler aus. */
.trainerzeile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
}
.trainerfoto {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand-soft);
  border: 1px solid var(--rule);
}
.trainerfoto--leer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
}
.trainerzeile b { display: block; font-size: 1rem; font-weight: 600; }
.trainerzeile small { display: block; font-size: 0.78rem; }