/* ============================================================
   system.css — Grundsystem der App „Training“
   Ein ruhiges Nacht-Logbuch: warmes Fast-Schwarz, warme Tinte,
   EIN Glut-Akzent. Dieses Blatt liefert Tokens und die geteilten
   Komponenten; die Ansichts-Blätter bauen NUR darauf auf.

   Geteilte Komponenten (Klassennamen sind Vertrag):
     .blatt / .blatt--ohne-tabs     Schirm-Container mit Safe-Areas
     .karte / .karte--hoch          Fläche mit großem Radius
     .knopf / --leise / --warnung / --schmal   Bedienziel ≥ 56px
     .zeile-fehlt (+ -wort, -rest, --erledigt) „fehlt noch“-Zeile
     .leiste + .leiste-fuellung     2px-Leiste, Füllstand über --anteil (0–1)
     .fortschritt-linie             dieselbe Leiste als Fortschritt oben
     .stepper (+ -knopf, -wert, -einheit)      große ±-Flächen
     .segmente (+ --senkrecht), .segment       Auswahlflächen
     .tab-leiste, .tab-ziel         drei Ziele, unten, Safe-Area
     .fehlerleiste                  schmale Warnleiste oben (ein Griff)
     .eingabe, .hinweis             Texteingabe + Kleingedrucktes
     .heat-leer, .heat-1 … .heat-6, .heat-kachel   Glut-Stufen
     .symbol                        24×24-Icon aus dem Sprite
     .titel, .titel-klein, .text-klein, .text-mini, .ziffer-gross
     .text-gedimmt, .text-leise, .stapel, .stapel--eng
   ============================================================ */

/* ---------- Tokens (Namen laut Bauplan, unverändert) ---------- */
:root {
  --grund: #12100E;         /* Seitenhintergrund, warmes Fast-Schwarz */
  --flaeche: #1C1916;       /* Karten */
  --flaeche-hoch: #262220;  /* angehobene Flächen, Eingaben */
  --linie: #2F2A26;         /* Trennlinien, Ränder */
  --tinte: #F2EDE5;         /* Haupttext */
  --tinte-gedimmt: #A89F93; /* Zweittext, aus dem warmen Braunton getönt */
  --tinte-leise: #6F675D;   /* Beiläufiges — nur groß oder dekorativ (Kontrast ~3.4:1) */
  --akzent: #E09A4C;        /* Glut-Bernstein: Aktionen, Heute, Füllstände */
  --akzent-tinte: #14100B;  /* Text AUF Akzentflächen */
  --warnung: #C96F5E;       /* zu schwer / abbrechen / Fehler */
  --radius: 16px; --radius-gross: 24px;
  --tab-hoehe: 76px;

  /* Zusätze des Gerüsts */
  --schrift: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --wechsel: 160ms ease-out;   /* der eine leise Übergang für alles Dezente */
}

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

html {
  background: var(--grund);
  color-scheme: dark;
  caret-color: var(--akzent);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  scrollbar-color: var(--tinte-leise) transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;  /* Ziffern überall tabellarisch */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

button {
  margin: 0; padding: 0;
  font: inherit; color: inherit;
  background: none; border: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

a { color: var(--akzent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Browser-Oberflächen tragen die Palette mit */
::selection { background: var(--akzent); color: var(--akzent-tinte); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 5px; border: 2px solid var(--grund); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Typografie (Stufen 34/28/22/17/15/13) ---------- */
.titel        { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.titel-klein  { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
.text-klein   { font-size: 15px; }
.text-mini    { font-size: 13px; }
.ziffer-gross { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.text-gedimmt { color: var(--tinte-gedimmt); }
.text-leise   { color: var(--tinte-leise); }  /* nur groß oder beiläufig einsetzen */

.stapel       { display: grid; gap: 16px; }
.stapel--eng  { gap: 8px; }

/* ---------- Blatt: ein Schirm ---------- */
/* Standard: rechnet die Tab-Leiste unten ein. Ansichten ohne Tab-Leiste
   (Start, Onboarding, laufendes Training) nehmen .blatt--ohne-tabs dazu. */
.blatt {
  max-width: 640px;
  margin-inline: auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom, 0px) + 24px);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
}
.blatt--ohne-tabs {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* ---------- Karte ---------- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 20px;
}
.karte--hoch { background: var(--flaeche-hoch); }

/* ---------- Knopf: ein Griff, ≥ 56px ---------- */
.knopf {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 14px 20px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--akzent); color: var(--akzent-tinte);
  font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;  /* falls als <a> gebaut */
  transition: background-color var(--wechsel), border-color var(--wechsel),
              color var(--wechsel), opacity var(--wechsel), transform 80ms ease-out;
}
.knopf:active { transform: scale(0.98); }
.knopf:disabled { opacity: 0.45; cursor: default; transform: none; }
.knopf--leise   { background: var(--flaeche-hoch); color: var(--tinte); border-color: var(--linie); }
.knopf--warnung { background: none; color: var(--warnung); border-color: var(--linie); }
.knopf--schmal  { width: auto; }
@media (hover: hover) {
  .knopf:hover:not(:disabled) { filter: brightness(1.08); }
  .knopf--leise:hover:not(:disabled),
  .knopf--warnung:hover:not(:disabled) { border-color: var(--tinte-leise); filter: none; }
}

/* ---------- „fehlt noch“-Zeile: Wort | 2px-Leiste | große Restzahl ---------- */
/* <button class="zeile-fehlt">
     <span class="zeile-fehlt-wort">Protein</span>
     <span class="leiste"><span class="leiste-fuellung" style="--anteil:.62"></span></span>
     <span class="zeile-fehlt-rest">noch 42 g</span>
   </button> */
.zeile-fehlt {
  display: grid; grid-template-columns: minmax(76px, auto) 1fr auto;
  align-items: center; gap: 14px;
  width: 100%; min-height: 56px; padding: 8px 10px;
  border-radius: var(--radius);
  text-align: left;
  transition: background-color var(--wechsel);
}
@media (hover: hover) { .zeile-fehlt:hover { background: var(--flaeche-hoch); } }
.zeile-fehlt-wort { font-size: 15px; color: var(--tinte-gedimmt); }
.zeile-fehlt-rest { font-size: 22px; font-weight: 600; letter-spacing: -0.005em; }
.zeile-fehlt--erledigt .zeile-fehlt-rest { font-size: 17px; font-weight: 500; color: var(--tinte-gedimmt); }

/* 2px-Leiste; Füllstand über --anteil (0–1) am inneren Element. */
.leiste, .fortschritt-linie {
  position: relative;
  height: 2px; border-radius: 1px;
  background: var(--linie);
  overflow: hidden;
}
.leiste-fuellung {
  position: absolute; inset: 0;
  width: calc(var(--anteil, 0) * 100%);
  background: var(--akzent);
  border-radius: inherit;
  transition: width var(--wechsel);
}

/* ---------- Stepper: große ±-Flächen, Wert in der Mitte ---------- */
/* <div class="stepper">
     <button class="stepper-knopf" type="button" aria-label="weniger">(icon-minus)</button>
     <div class="stepper-wert">82,4 <span class="stepper-einheit">kg</span></div>
     <button class="stepper-knopf" type="button" aria-label="mehr">(icon-plus)</button>
   </div> */
.stepper {
  display: grid; grid-template-columns: 60px 1fr 60px;
  align-items: stretch; gap: 10px;
}
.stepper-knopf {
  min-height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--tinte);
  transition: border-color var(--wechsel), background-color var(--wechsel), transform 80ms ease-out;
}
.stepper-knopf:active { transform: scale(0.95); border-color: var(--akzent); }
@media (hover: hover) { .stepper-knopf:hover { border-color: var(--tinte-leise); } }
.stepper-wert {
  align-self: center; min-width: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  font-size: 34px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap;
}
.stepper-einheit { font-size: 15px; font-weight: 500; color: var(--tinte-gedimmt); }

/* ---------- Segmente: große Auswahlflächen ---------- */
/* Gewählt über aria-pressed="true", aria-checked="true" oder .ist-gewaehlt */
.segmente { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.segmente--senkrecht { grid-auto-flow: row; grid-auto-columns: unset; }
.segment {
  min-height: 56px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--tinte); font-size: 15px; font-weight: 500;
  transition: background-color var(--wechsel), border-color var(--wechsel),
              color var(--wechsel), transform 80ms ease-out;
}
.segment:active { transform: scale(0.98); }
@media (hover: hover) { .segment:hover { border-color: var(--tinte-leise); } }
.segment[aria-pressed="true"], .segment[aria-checked="true"], .segment.ist-gewaehlt {
  background: var(--akzent); border-color: var(--akzent);
  color: var(--akzent-tinte); font-weight: 600;
}

/* ---------- Tab-Leiste: genau drei Ziele ---------- */
.tab-leiste {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tab-hoehe) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-inline: max(0px, calc((100vw - 640px) / 2));
  background: var(--grund);
  border-top: 1px solid var(--linie);
}
.tab-ziel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--tinte-gedimmt);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: color var(--wechsel);
}
.tab-ziel[aria-current="page"] { color: var(--akzent); }

/* ---------- Fehlerleiste: die ganze Leiste ist der Griff ---------- */
.fehlerleiste {
  position: fixed; inset-inline: 0; top: 0; z-index: 60;
  width: 100%; min-height: 56px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 20px 12px;
  background: var(--warnung); color: var(--akzent-tinte);
  font-size: 15px; font-weight: 600; text-align: center;
  border-radius: 0;
}
.fehlerleiste:not([hidden]) { animation: leiste-herein 160ms ease-out; }
@keyframes leiste-herein { from { transform: translateY(-100%); } }

/* ---------- Eingaben ---------- */
.eingabe {
  width: 100%; min-height: 56px; padding: 14px 16px;
  background: var(--flaeche-hoch); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--radius);
  font: inherit; font-size: 17px;
  appearance: none; -webkit-appearance: none;
}
.eingabe::placeholder { color: var(--tinte-gedimmt); }
.eingabe::-webkit-outer-spin-button, .eingabe::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hinweis { font-size: 13px; color: var(--tinte-gedimmt); }

/* ---------- Glut-Stufen (Heatmap) ---------- */
/* Tageswert w: leer | <40 | <55 | <70 | <80 | <90 | ≤100.
   Von kaum glimmend (#2A2118) bis volle Glut (--akzent);
   ab heat-5 dunkle Ziffern auf heller Glut. */
.heat-leer { background: var(--flaeche); color: var(--tinte-leise); }
.heat-1 { background: #2A2118; color: var(--tinte); }
.heat-2 { background: #4E3922; color: var(--tinte); }
.heat-3 { background: #73512D; color: var(--tinte); }
.heat-4 { background: #976A37; color: var(--tinte); }
.heat-5 { background: #BC8242; color: var(--akzent-tinte); }
.heat-6 { background: var(--akzent); color: var(--akzent-tinte); }

/* Einzelne Heat-Kachel (Heute-Abschluss, Tagesansicht).
   Der Kalender setzt seine Rastergröße selbst und nutzt nur die Stufen. */
.heat-kachel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; height: 56px; padding: 0 10px;
  border-radius: var(--radius);
  font-size: 17px; font-weight: 700;
}

/* ---------- Symbol aus dem Sprite ---------- */
.symbol { width: 24px; height: 24px; flex: none; }

/* ---------- Start-Ansicht (gerendert von app.js) ---------- */
.start { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.start-satz {
  margin: auto 0;
  font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em;
  max-width: 20ch; text-wrap: balance;
}
.start-knoepfe { display: grid; gap: 12px; }

/* ---------- Ruhe ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Abgleich-Knopf oben rechts ----------
   Holt die Daten neu und stößt auf dem iPhone den Health-Kurzbefehl an.
   Er schwebt über dem Blatt, damit ihn jede Ansicht bekommt, ohne dass jede
   ihn selbst einbauen muss. */
.abgleich {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 30;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 22px;
  color: var(--tinte-gedimmt);
  transition: color var(--wechsel), border-color var(--wechsel);
}
.abgleich:hover { color: var(--tinte); border-color: var(--tinte-leise); }
.abgleich:active { color: var(--akzent); }
.abgleich[hidden] { display: none; }

/* Während des Abgleichs dreht sich das Symbol — die einzige Dauerbewegung
   der App, und sie hört auf, sobald die Daten da sind. */
.abgleich--laeuft { color: var(--akzent); border-color: var(--akzent); }
.abgleich--laeuft .symbol { animation: abgleich-dreht 900ms linear infinite; }
@keyframes abgleich-dreht { to { transform: rotate(360deg); } }

/* Damit der Knopf keine Überschrift überdeckt, rückt die erste Kopfzeile
   eines Blattes nach links ein. */
.blatt > header:first-of-type,
.blatt > h1:first-of-type { padding-right: 52px; }

/* Fällig: Heute kam noch nichts aus Apple Health. Der Knopf glüht und pulst
   einmal je Sekunde — automatisch in die Kurzbefehle-App zu springen erlaubt
   iOS ohne Fingerberührung nicht, also fällt der Knopf eben auf. */
.abgleich--faellig {
  color: var(--akzent);
  border-color: var(--akzent);
  animation: abgleich-pulst 2s ease-in-out infinite;
}
@keyframes abgleich-pulst {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 154, 76, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(224, 154, 76, 0); }
}
.abgleich--laeuft.abgleich--faellig { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .abgleich--faellig { animation: none; }
}