/* w/e gymbr — Bausteine
   Jeder Baustein ist im Komponenten-Register (design-system.md 3) eingetragen.
   Hier steht KEIN Hex-Wert, KEINE nackte Pixelzahl, KEINE Schriftgroesse —
   alles kommt aus tokens.css. Geprueft von pruef/tokens_pruef.py. */

/* ---------- Grundlage ---------- */

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

html{
  background:var(--n-0);
  /* iOS: keine Textvergroesserung beim Drehen, sonst springt das Raster */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--n-0);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  /* Der Daumen scrollt, die Seite wippt nicht. Im Homescreen-Modus gibt es die
     Pull-to-refresh-Geste ohnehin nicht — das hier faengt den Browser-Fall. */
  overscroll-behavior-y:contain;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* Auswahl unterdruecken: nasse Finger loesen sonst staendig die Textmarkierung
   aus, wenn ein Tap zum Wisch wird. Nur auf Bedienelementen, nicht auf Text. */
.knopf,.pille,.stapel,.block,.skala,.satz{
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* Ein Fokusring fuer alles. Nie gelb — CI 4.5. */
:focus-visible{
  outline:var(--fokus) solid var(--ink);
  outline-offset:var(--fokus-abstand);
}

h1,h2,h3{
  font-family:var(--font-display);
  font-variation-settings:var(--display-wdth);
  font-weight:600;
  text-transform:lowercase;
  letter-spacing:normal;   /* CI 5.4: kein letter-spacing auf Display */
  margin:0;
}
h1{ font-size:var(--fs-display-m); line-height:var(--lh-display-m); }
h2{ font-size:var(--fs-display-s); line-height:var(--lh-display-s); }
h3{ font-size:var(--fs-title);     line-height:var(--lh-title); }

p{ margin:0; }

/* Die Maschinenstimme. Alle Zahlen, alle Meta-Zeilen. */
.meta{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  line-height:var(--lh-meta);
  text-transform:uppercase;
  letter-spacing:var(--spur-mono);
  font-variant-numeric:tabular-nums;
  color:var(--text-3);
}
.meta--klein{ font-size:var(--fs-micro); letter-spacing:var(--spur-micro); }
.zahl{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* Japano. Nur an Mono-Stellen, CI 6.2. */
.jp{ font-family:var(--font-jp); text-transform:none; letter-spacing:normal; }

/* ---------- .kopf / .fuss ---------- */

.kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--seitenrand) var(--sp-3);
  padding-top:calc(var(--sp-4) + env(safe-area-inset-top));
  border-bottom:var(--kante) solid var(--border);
  background:var(--n-0);
}
.wortmarke{
  font-family:var(--font-display);
  font-variation-settings:var(--display-wdth);
  font-weight:600; font-size:var(--fs-title); line-height:var(--lh-title);
  text-transform:lowercase; color:var(--text);
}
.fuss{
  padding:var(--sp-5) var(--seitenrand);
  padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));
  text-align:center;
}

/* ---------- .blatt ---------- */

.blatt{
  width:100%;
  max-width:var(--spalte-max);
  margin-inline:auto;
  padding:var(--sp-5) var(--seitenrand);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
/* Wenn unten eine Leiste schwebt, darf sie nichts verdecken. */
.blatt--mit-leiste{ padding-bottom:calc(var(--daumen) + var(--sp-5)); }

/* ---------- .zone ---------- */

.zone{
  background:var(--n-1);
  border:var(--kante) solid var(--border);
  border-radius:var(--r-0);
  padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.zone--still{ background:none; border:0; padding:0; }

.zonenkopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:var(--kante) solid var(--border);
}

/* ---------- .karte ---------- */

.karte{
  background:var(--n-1);
  border:var(--kante) solid var(--border);
  border-radius:var(--r-0);
  padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2);
  /* Karten tragen keinen Schatten — CI 7.2 */
}
.karte--aktiv{ border-color:var(--border-strong); background:var(--n-2); }

/* ---------- .reihe — Spalten am Container, nie an der Zelle ---------- */

.reihe{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--sp-3);
  padding-block:var(--sp-2);
}
.reihe--kopf{ border-bottom:var(--kante) solid var(--border); }

/* ---------- .knopf ---------- */

.knopf{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  min-height:var(--tap);
  padding-inline:var(--sp-4);
  border-radius:var(--r-0);
  border:var(--kante) solid transparent;
  font-family:var(--font-sans);
  font-size:var(--fs-ui); line-height:var(--lh-ui); font-weight:500;
  text-transform:lowercase;
  background:none; color:var(--text);
  cursor:pointer;
  transition:background var(--dauer-aus) var(--ease);
}
.knopf--gross{ min-height:var(--tap-haupt); font-size:var(--fs-body); }
.knopf--breit{ width:100%; }

/* primaer — auf --ink, nicht auf --signal. CI 9.1: Gelb ist keine Buttonflaeche.
   Siehe design-system.md, Abweichung A7. */
.knopf--haupt{ background:var(--ink); color:var(--on-ink); }
.knopf--haupt:hover{ background:var(--solid-hover); }
.knopf--haupt:active{ background:var(--solid); }

.knopf--zweit{ background:var(--n-1); color:var(--text); border-color:var(--border); }
.knopf--zweit:hover{ background:var(--n-2); }
.knopf--zweit:active{ background:var(--n-3); }

.knopf--geist{ color:var(--text-2); }
.knopf--geist:hover{ background:var(--n-2); color:var(--text); }

.knopf--gefahr{ color:var(--danger); border-color:var(--danger-kante); }
.knopf--gefahr:hover{ background:var(--danger-ton); }

.knopf[disabled]{
  background:var(--n-2); color:var(--text-3); border-color:var(--border);
  cursor:not-allowed;
  /* nie opacity — CI 9.1 */
}

/* ---------- .pille — rund, eine der vier Radius-Ausnahmen ---------- */

.pille{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); min-width:var(--tap);
  padding-inline:var(--sp-4);
  border-radius:var(--r-voll);
  border:var(--kante) solid var(--border);
  background:var(--n-1); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-ui); font-weight:500;
  text-transform:lowercase;
  cursor:pointer;
  transition:background var(--dauer-aus) var(--ease);
}
.pille:hover{ background:var(--n-2); }
.pille--an{ background:var(--signal); color:var(--on-accent); border-color:transparent; }
.pille--an:hover{ background:var(--signal-hover); }

/* ---------- .marke — eckig, nicht anklickbar ---------- */

.marke{
  display:inline-flex; align-items:center;
  padding-inline:var(--sp-2);
  min-height:var(--sp-5);
  background:var(--n-2);
  border-radius:var(--r-0);
  font-family:var(--font-mono); font-size:var(--fs-meta);
  text-transform:uppercase; letter-spacing:var(--spur-mono);
  color:var(--text-2);
}
.marke--still{ background:none; color:var(--text-3); padding-inline:0; }

/* ---------- .stapel — der Stack-Raster-Stepper ----------
   Drei Spuren am Container: minus, Wert, plus. Die Zellen tragen keine Breite.
   Der Wert ist ein Knopf: langer Druck oeffnet den Ziffernblock (Notausgang). */

.stapel{
  display:grid;
  grid-template-columns:var(--tap-haupt) 1fr var(--tap-haupt);
  align-items:stretch;
  border:var(--kante) solid var(--border);
  border-radius:var(--r-0);
  background:var(--n-1);
  overflow:hidden;
}
.stapel__taste{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--tap-haupt);
  border:0; background:var(--n-2); color:var(--text);
  font-family:var(--font-mono); font-size:var(--fs-display-s);
  line-height:1; cursor:pointer;
  transition:background var(--dauer-aus) var(--ease);
}
.stapel__taste:hover{ background:var(--n-3); }
.stapel__taste:active{ background:var(--n-4); }
.stapel__taste[disabled]{ background:var(--n-1); color:var(--text-3); cursor:not-allowed; }

.stapel__wert{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0;
  border:0; background:none; color:var(--text);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-display-s); line-height:var(--lh-display-s);
  cursor:pointer;
}
.stapel__einheit{
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:var(--spur-micro); text-transform:uppercase; color:var(--text-3);
}
/* leerer Wert = Kaltstart, es gibt keine Historie. Kein Nullwert vortaeuschen. */
.stapel__wert[data-leer="ja"]{ color:var(--text-3); }

/* ---------- .block — eigener Ziffernblock, ersetzt die Systemtastatur ---------- */

.block{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-1);
}
.block__taste{
  min-height:var(--tap-haupt);
  border:var(--kante) solid var(--border);
  border-radius:var(--r-0);
  background:var(--n-1); color:var(--text);
  font-family:var(--font-mono); font-size:var(--fs-display-s);
  cursor:pointer;
}
.block__taste:active{ background:var(--n-3); }

/* ---------- .satz — eine Satzzeile ----------
   Spalten am Container. Alle Zeilen fangen an derselben Stelle an.

   EINE Spur, nicht drei. Warum das keine Geschmacksfrage ist:
   Ein `.stapel` traegt zwei Tasten zu je --tap-haupt, also 112px, die nicht
   schrumpfen duerfen — darunter ist die Taste nicht mehr blind treffbar.
   Zwei Stapel plus Bestaetigung nebeneinander brauchen mit Abstaenden rund
   432px. Ein 390px-Telefon stellt der Karte 324px zur Verfuegung.

   Was daraus wurde, ist subtiler als reines Ueberlaufen — und deshalb steht
   es hier: `.stapel` traegt `overflow:hidden`. Damit ist es ein Scroll-
   Container, und dessen automatische Mindestgroesse ist 0. Die `1fr`-Spur
   durfte also unter die 112px schrumpfen, und der Stapel hat seine eigene
   Plus-Taste **abgeschnitten**, statt die Zeile aus der Karte zu schieben.
   Sichtbar blieben Minus und Wert. Belegt durch einen Screenshot vom Geraet
   am 10.08.2026; die reine Breitenrechnung haette das Symptom falsch
   vorhergesagt.

   Jetzt stehen Gewicht und Wiederholungen untereinander und bekommen je die
   volle Kartenbreite. Die Bestaetigung sitzt im Kopf der Zeile — konstante
   x-Position ueber alle Saetze, damit sie blind treffbar bleibt. */

.satz{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
  padding-block:var(--sp-3);
  border-top:var(--kante) solid var(--border);
}
.satz:first-of-type{ border-top:0; }
.satz__kopf{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--sp-3);
  align-items:center;
}
.satz__nr{
  font-family:var(--font-mono); font-size:var(--fs-meta);
  letter-spacing:var(--spur-mono); color:var(--text-3);
  min-width:var(--sp-5);
  text-align:left;
}
/* Modifier, kein zweiter Baustein: dieselbe Zeile, nur antippbar. Dahinter
   liegt die Wertung des Satzes. */
.satz__nr--taste{
  background:none; border:0; padding:0;
  min-height:var(--tap); cursor:pointer;
}
/* Ein Satz, der NICHT fuer die Progression zaehlt — Aufwaermen, Tasten,
   Eichen. Zurueckgenommen, nicht ausgegraut: er ist erfasst und gueltig,
   er steuert nur nichts. */
.satz--nebenbei .stapel{ opacity:.72; }
.satz--nebenbei .satz__nr{ color:var(--text-2); }
.satz__werte{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
  align-items:stretch;
}
.satz__ok{
  display:flex; align-items:center; justify-content:center;
  min-width:var(--tap-haupt); min-height:var(--tap-haupt);
  border:var(--kante) solid var(--border);
  border-radius:var(--r-0);
  background:var(--n-1); color:var(--text-2);
  font-family:var(--font-sans); font-size:var(--fs-ui); font-weight:500;
  text-transform:lowercase; cursor:pointer;
}
/* Bestaetigt: Auszeichnungskante ab 3px ist der erlaubte Gelb-Einsatz (CI 4.5).
   Keine gelbe Schrift, keine gelbe Haarlinie. */
.satz--fertig .satz__ok{
  background:var(--signal); color:var(--on-accent); border-color:transparent;
}
.satz--fertig .stapel{ border-left:var(--sig-min) solid var(--signal); }

/* ---------- .leiste — schwebende Aktionsleiste, rund, mit Lift ---------- */

.leiste{
  position:fixed; z-index:10;
  left:var(--seitenrand); right:var(--seitenrand);
  bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));
  margin-inline:auto; max-width:var(--spalte-max);
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2);
  border-radius:var(--r-voll);
  background:var(--glass-float-bg);
  -webkit-backdrop-filter:var(--glass-float);
  backdrop-filter:var(--glass-float);
  box-shadow:var(--lift-2);
}
/* Glas traegt Licht, nicht Kontur — CI 7.1 */
.leiste::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 var(--kante) 0 var(--glass-kante-oben),
             inset 0 calc(-1 * var(--kante)) 0 var(--glass-kante-unten);
}
.leiste .knopf{ border-radius:var(--r-voll); flex:1; }

@media print{
  .leiste{ position:static; background:var(--n-1); box-shadow:none;
           border:var(--kante) solid var(--border); }
}

/* ---------- .feld — Text. NIE type="number". ---------- */

.feld{
  width:100%;
  min-height:var(--tap);
  padding:var(--sp-3);
  background:var(--n-1);
  border:var(--kante) solid var(--border);
  border-radius:var(--r-0);
  color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-ui); line-height:var(--lh-ui);
  resize:vertical;
}
.feld::placeholder{ color:var(--text-3); }
.feld:focus-visible{ border-color:var(--border-strong); }
/* Einzeiliger Modifier — kein zweiter Baustein fuer dasselbe Feld.
   Mono, weil hier Zeichenketten stehen, die man Zeichen fuer Zeichen prueft. */
.feld--zeile{ resize:none; font-family:var(--font-mono); }
.feldlabel{
  display:block;
  font-family:var(--font-sans); font-size:var(--fs-label); line-height:var(--lh-label);
  font-weight:500; color:var(--text-2);
  margin-bottom:var(--sp-2);
}

/* ---------- .skala — wenige Stufen ---------- */

.skala{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.skala .pille{ flex:1; min-width:var(--tap); padding-inline:var(--sp-2); }

/* ---------- .leer — Leerzustand, CI 10 ---------- */

.leer{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3);
  padding-block:var(--sp-6);
}
.leer__satz{ color:var(--text-2); font-size:var(--fs-body); }

/* ---------- .hinweis — Farbe an der Kante, nie als Flaeche ---------- */

.hinweis{
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-3);
  background:var(--n-2);
  border:var(--kante) solid var(--border);
  border-left:var(--sig-min) solid var(--border-strong);
  border-radius:var(--r-0);
  font-size:var(--fs-ui); line-height:var(--lh-ui); color:var(--text-2);
}
.hinweis--ok{ border-left-color:var(--ok-fill); }
.hinweis--warn{ border-left-color:var(--warn-fill); }
.hinweis--gefahr{ border-left-color:var(--danger-fill); }

/* ---------- .ueberlage — Vollflaechen-Overlay, CI 9.8 ----------
   Traegt den Ziffernblock. Scrim ohne Blur, Blatt mit --lift-3, Radius 0,
   ein Overlay fragt genau eine Sache, kein Overlay ueber Overlay. */

.ueberlage{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--scrim);
  padding:var(--seitenrand);
  padding-bottom:calc(var(--seitenrand) + env(safe-area-inset-bottom));
}
.ueberlage__blatt{
  width:100%; max-width:var(--spalte-max);
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5);
  background:var(--n-1);
  border:var(--kante) solid var(--border);
  border-radius:var(--r-0);
  box-shadow:var(--lift-3);
  /* CI 7.5: Exit kuerzer als Enter. Eine inszenierte Bewegung pro Kontext. */
  animation:faehrt-ein var(--dauer-ein) var(--ease);
}
@keyframes faehrt-ein{
  from{ transform:translateY(var(--sp-5)); }
  to  { transform:none; }
}

/* ---------- .aufklapp — „ausführung" und „geräteeinstellung" ----------
   Sektionskopf-Muster aus CI 9.11: Mono CAPS in --text-3, Haarlinie darueber.
   Offen ist genau einer noetig, deshalb kein Zwang zur Exklusivitaet. */

details{
  border-top:var(--kante) solid var(--border);
  padding-top:var(--sp-3);
}
summary{
  min-height:var(--tap);
  display:flex; align-items:center;
  cursor:pointer;
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; margin-left:auto;
  font-family:var(--font-mono); color:var(--text-3);
}
details[open] > summary::after{ content:"–"; }
details > *:not(summary){ padding-top:var(--sp-3); color:var(--text-2); }
details b{ color:var(--text); font-weight:500; }

/* Der Berichtstext steht in einem <pre> und benutzt den Feld-Baustein. */
pre.feld{
  font-family:var(--font-mono);
  font-size:var(--fs-ui);
  line-height:var(--lh-ui);
  overflow-x:auto;
  margin:0;
}

/* ---------- Werkzeuge fuer den Fluss, keine eigenen Komponenten ---------- */

.stapelt{ display:flex; flex-direction:column; gap:var(--sp-3); }
.stapelt--eng{ gap:var(--sp-2); }
.reiht{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.schiebt{ margin-left:auto; }
.versteckt{ display:none !important; }