/* mypacing — type-tokens.css
 * DIE EINE QUELLE DER WAHRHEIT fuer Schriftgroesse, Zeilenhoehe, Schriftgewicht, Abstand
 * und Radius. Maschinenlesbares Gegenstueck: /assets/type-tokens.json (gleiche Namen,
 * gleiche Werte) -- daraus lassen sich iOS-Textstile und Android-dimens.xml ableiten,
 * ohne dass jemand Pixelwerte abtippt. Genau dieselbe Systematik wie
 * assets/design-tokens.css + assets/tokens.json fuer die Farbe (Arbeitspaket A).
 *
 * WARUM DIESE DATEI (10.08.2026, Arbeitspaket B "Typografische Hierarchie"):
 * In den Seiten-Stylesheets standen 1641 einzelne font-size-Angaben in 111 Dateien --
 * 9px neben 10.8px neben 12.5px neben 13px neben 13.5px neben 14px neben 14.5px. Es gab
 * keine Skala, sondern eine Sammlung von Einzelentscheidungen. Eine <h1> war auf der einen
 * Seite 21px, auf der naechsten clamp(26px,5vw,40px). Fuer Menschen mit ME/CFS und
 * Long COVID ist das kein Schoenheitsfehler: wer nur wenige Minuten Bildschirmzeit hat,
 * muss eine Seite ueberfliegen koennen. Ueberfliegen geht nur, wenn Groesse verlaesslich
 * Bedeutung traegt -- gross = wichtig, immer, ueberall gleich.
 *
 * DAS PRINZIP HIER: es gibt eine ABGESCHLOSSENE Leiter von Groessen, und jede Groesse hat
 * eine ROLLE. Keine Seite waehlt mehr eine eigene Zahl. Was wirklich ein Sonderfall ist
 * (Wortmarke, Kachelraster mit vielen Zahlen, eine einzelne Zahl, die den Bildschirm
 * traegt), steht als BENANNTE VARIANTE hier drin -- nicht als Einzelregel auf einer Seite.
 *
 * RICHTWERTE (Vorgabe Arbeitspaket B, hier eingehalten und in tests/gruppen/typografie.php
 * nachgerechnet):
 *   H1  28-32px fett      H2 22-24px fett      H3 18-20px halbfett
 *   Fliesstext 16px, Zeilenhoehe >= 1,5
 *   Beschriftung 13-14px halbfett, mit Abstand zur zugehoerigen Zahl
 *   Kennzahl 28-40px fett, in der Wertfarbe --text-value aus Arbeitspaket A
 *
 * REIHENFOLGE BEIM EINBINDEN: NACH assets/design-tokens.css, VOR dem Seiten-<style>.
 * Die Farbe kommt weiterhin ausschliesslich aus design-tokens.css -- hier steht kein
 * einziger Farbwert.
 */

:root{

  /* ================================================================= *
   * 1) DIE LEITER. Neun Stufen, mehr braucht diese Site nicht.
   *    Die Zwischenwerte, die frueher in den Seiten standen (13.5px,
   *    14.5px, 15px, 15.5px, 16.5px, 18.5px, 21px, 23px ...), rasten
   *    beim Umbau auf die naechste Stufe ein.
   * ================================================================= */
  --fs-mini:11.5px;                       /* Kalenderziffer, Zaehlmarke -- absolute Untergrenze */
  --fs-mikro:12.5px;                      /* Legende, Zeitstempel, Chip */
  --fs-label:13.5px;                      /* Beschriftung ueber/unter einer Zahl */
  --fs-fuss:14.5px;                       /* Fussnote, Hilfstext, Quellenangabe */
  --fs-body:16px;                         /* Fliesstext -- die Bezugsgroesse */
  --fs-lead:17.5px;                       /* kurzer Kontext direkt unter einem Titel */
  --fs-h3:19px;
  --fs-h2:clamp(22px, 2.6vw, 24px);
  --fs-h1:clamp(28px, 4vw, 32px);

  /* Kennzahlen. Eigene Reihe, weil eine Zahl anders gelesen wird als ein Satz:
     sie wird nicht gelesen, sondern erkannt. */
  --fs-wert-kachel:22px;                  /* BENANNTE VARIANTE: Raster mit vielen Zahlen nebeneinander */
  --fs-wert:clamp(28px, 4.4vw, 34px);     /* der Regelfall */
  --fs-wert-gross:clamp(32px, 5.6vw, 40px);
  --fs-wert-hero:clamp(40px, 10vw, 56px); /* BENANNTE VARIANTE: eine Zahl traegt den ganzen Bildschirm */

  /* Weitere benannte Varianten -- ausdrueckliche Ausnahmen, keine freien Werte. */
  --fs-marke:21px;                        /* Wortmarke "mypacing" im Kopf */
  --fs-nav:14px;                          /* Navigations- und Fusszeilenlinks */
  --fs-knopf:var(--fs-fuss);              /* Knopfbeschriftung -- eigene Rolle, gleiche Stufe */

  /* ================================================================= *
   * 2) ZEILENHOEHE. Fliesstext >= 1,5 ist Vorgabe, nicht Geschmack:
   *    zu enge Zeilen sind bei Brain Fog der haeufigste Grund, warum
   *    man in der Zeile verrutscht und von vorn anfangen muss.
   * ================================================================= */
  --lh-titel:1.18;
  --lh-eng:1.35;                          /* Kennzahlen, Chips, einzeilige Beschriftungen */
  --lh-text:1.6;                          /* Fliesstext */
  --lh-weit:1.75;                         /* lange Lesestrecken (Wissensbasis, Blog) */

  /* ================================================================= *
   * 3) SCHRIFTGEWICHT. "fett" und "halbfett" als Rolle, nicht als Zahl.
   *    Fraunces ist variabel bis 650 und klemmt 700 selbst ab.
   * ================================================================= */
  --fw-normal:400;
  --fw-halb:600;
  --fw-fett:700;

  /* ================================================================= *
   * 4) ABSTAND. Eine Leiter, keine Einzelwerte. Alles Vielfache von 4.
   * ================================================================= */
  --raum-1:4px;
  --raum-2:8px;
  --raum-3:12px;
  --raum-4:16px;
  --raum-5:24px;
  --raum-6:32px;
  --raum-7:48px;

  /* Karte: der Innenabstand und die Luft ZWISCHEN Karten sind eigene Rollen,
     damit "grosszuegig zwischen Karten" nicht heimlich den Inhalt auseinanderzieht. */
  --karte-innen:22px;
  --karte-luft:var(--raum-5);

  /* ================================================================= *
   * 5) RADIUS. --r aus design-tokens.css bleibt als Altname bestehen
   *    und zeigt auf denselben Wert.
   * ================================================================= */
  --radius-karte:20px;                    /* Karte, Kachel gross */
  --radius-kachel:14px;                   /* Kachel, Hinweiskasten */
  --radius-feld:12px;                     /* Eingabefeld, Knopf */
  --radius-klein:10px;                    /* Chip, Marke, kleine Flaeche */
  --radius-mini:6px;                      /* Haarlinien-Ecke, Fortschrittsbalken */
  --radius-rund:999px;                    /* Pille, Punkt */
}

/* ===================================================================== *
 * 6) GRUNDRASTER DER HIERARCHIE.
 *    Diese Regeln stehen bewusst auf den ELEMENTEN, nicht auf Klassen:
 *    eine <h2> soll auf jeder Seite gleich aussehen, ohne dass jemand
 *    daran denken muss.
 * ===================================================================== */
body{font-size:var(--fs-body);line-height:var(--lh-text)}

h1{font-size:var(--fs-h1);line-height:var(--lh-titel);font-weight:var(--fw-fett);
   margin:0 0 var(--raum-3)}
h2{font-size:var(--fs-h2);line-height:var(--lh-titel);font-weight:var(--fw-fett);
   margin:0 0 var(--raum-2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-titel);font-weight:var(--fw-halb);
   margin:0 0 var(--raum-2)}
h4,h5,h6{font-size:var(--fs-lead);line-height:var(--lh-titel);font-weight:var(--fw-halb);
   margin:0 0 var(--raum-2)}

/* Beschriftung: halbfett, und mit einem eigenen Abstand zur Zahl darunter.
   Genau dieser Abstand fehlte bisher -- Beschriftung und Wert klebten aneinander
   und wurden als ein Block gelesen. */
label,.mp-label{font-size:var(--fs-label);font-weight:var(--fw-halb);line-height:var(--lh-eng)}
.mp-label{display:block;margin:0 0 var(--raum-2);color:var(--text-secondary)}

/* Kennzahl: Groesse hier, Farbe aus design-tokens.css (--text-value). */
.mp-wert{font-size:var(--fs-wert);font-weight:var(--fw-fett);line-height:var(--lh-eng);
   font-variant-numeric:tabular-nums}
.mp-wert.klein{font-size:var(--fs-wert-kachel)}
.mp-wert.gross{font-size:var(--fs-wert-gross)}
.mp-wert.hero{font-size:var(--fs-wert-hero)}

/* ===================================================================== *
 * 7) KARTE — das Grundmuster aus Arbeitspaket B4.
 *    INNERHALB einer Karte gilt immer dieselbe Folge:
 *        Titel  ->  kurzer Kontext  ->  Werte/Elemente  ->  Fussnote
 *    Die bestehende .card-Struktur bleibt unveraendert gueltig; sie bekommt
 *    hier nur Abstaende und Radien aus Token statt aus Einzelwerten.
 * ===================================================================== */
.card,.list,.step,.pcard,.mp-karte{padding:var(--karte-innen);border-radius:var(--radius-karte)}

.mp-raster{display:grid;gap:var(--karte-luft)}          /* einheitliche Luft ZWISCHEN Karten */

.mp-karte-titel  {font-size:var(--fs-h2);line-height:var(--lh-titel);font-weight:var(--fw-fett);
                  margin:0 0 var(--raum-2)}
.mp-karte-kontext{font-size:var(--fs-fuss);line-height:var(--lh-text);color:var(--text-secondary);
                  margin:0 0 var(--raum-4)}
.mp-karte-werte  {display:flex;flex-wrap:wrap;gap:var(--raum-5);margin:0 0 var(--raum-4)}
.mp-karte-fuss   {font-size:var(--fs-mikro);line-height:var(--lh-text);color:var(--text-secondary);
                  margin:var(--raum-4) 0 0;padding-top:var(--raum-3);
                  border-top:1px solid var(--border)}

/* ===================================================================== *
 * 8) SPRUNGMARKE "Zum Inhalt springen".
 *    Sie ist im Ruhezustand aus dem Bild geschoben, aber NICHT display:none --
 *    sonst waere sie nicht fokussierbar und damit wirkungslos. Bei Tastaturfokus
 *    springt sie sichtbar in die linke obere Ecke.
 * ===================================================================== */
.mp-skip{position:fixed;left:var(--raum-4);top:var(--raum-4);z-index:9999;
  transform:translateY(-250%);
  background:var(--surface-card);color:var(--accent-ink);
  border:2px solid var(--focus);border-radius:var(--radius-klein);
  padding:var(--raum-3) var(--raum-5);
  font-family:Inter,system-ui,sans-serif;font-size:var(--fs-body);font-weight:var(--fw-halb);
  text-decoration:underline;box-shadow:var(--shadow)}
.mp-skip:focus,.mp-skip:focus-visible{transform:none;outline:3px solid var(--focus);outline-offset:2px}

/* main traegt tabindex="-1", damit der Sprung den Fokus wirklich mitnimmt. */
main:focus{outline:none}

/* Nur fuer die Vorlesesoftware: ein Seitentitel, den es sichtbar (noch) nicht gibt.
   Wird ausschliesslich dort eingesetzt, wo eine Seite ihren Titel im Kopfbereich
   oder erst zur Laufzeit zeigt -- vermerkt im Bericht zu Arbeitspaket B. */
.mp-nur-vorlesen{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ===================================================================== *
 * 9) BEDIENELEMENTE — Arbeitspaket B3 ("eine Funktion, ein Element").
 *
 *    Rueckmeldung von Betroffenen (08/2026): "Funktionen laufen in einer
 *    Art Fliesstext" -- Knoepfe und Links steckten mitten in Absaetzen,
 *    Seiten wirkten wie ein durchgehender Block. Wer bei ME/CFS oder
 *    Long COVID an einem schlechten Tag auf die Seite kommt, LIEST nicht
 *    erst; er sucht eine Flaeche, die nach Bedienung aussieht. Also
 *    bekommt jede Funktion, jede Einstellung und jede Aktion eine eigene
 *    Flaeche mit eigener Beschriftung -- und der Erklaertext steht
 *    DARUNTER, nicht davor und nicht drumherum.
 *
 *    Alle Werte stammen aus den Token oben bzw. aus design-tokens.css.
 *    Es kommt hier keine neue Farbe und keine neue Groesse hinzu.
 * ===================================================================== */

/* Listenzeile mit Chevron -- die ruhigste Form eines Bedienelements:
   eine Zeile, eine Handlung, ein sichtbarer Hinweis nach rechts. */
.mp-zeile{display:flex;align-items:center;gap:var(--raum-3);width:100%;box-sizing:border-box;
  margin:0 0 var(--raum-2);padding:var(--raum-4);
  background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-kachel);
  font-family:Inter,system-ui,sans-serif;font-size:var(--fs-body);font-weight:var(--fw-halb);
  line-height:var(--lh-eng);color:var(--accent-ink);text-align:left;text-decoration:none;cursor:pointer}
.mp-zeile:hover{border-color:var(--accent)}
.mp-zeile>span{flex:1 1 auto}
/* Chevron aus zwei Kanten statt aus einem Zeichen: so hat die Vorlesesoftware
   nichts vorzulesen, was niemand hoeren will. */
.mp-zeile::after{content:"";flex:0 0 auto;width:var(--raum-2);height:var(--raum-2);
  margin-right:var(--raum-1);transform:rotate(-45deg);
  border-right:2px solid var(--icon);border-bottom:2px solid var(--icon)}

/* Mehrere Zeilen als Gruppe -- ohne Aufzaehlungspunkte, damit die ZEILE die
   Flaeche ist und nicht der Punkt davor. */
.mp-zeilen{list-style:none;margin:0 0 var(--raum-4);padding:0}
.mp-zeilen>li{margin:0}

/* Der kurze Erklaertext GEHOERT UNTER sein Element und ist zwei bis drei Saetze
   lang. Alles Laengere gehoert in .mp-mehr. */
.mp-hinweis{font-size:var(--fs-fuss);line-height:var(--lh-text);color:var(--text-secondary);
  margin:0 0 var(--raum-5)}

/* "Mehr erfahren" -- das bestehende details/summary-Muster der Seiten, hier nur
   einheitlich benannt. Zugeklappt kostet es keine Aufmerksamkeit. */
.mp-mehr{margin:0 0 var(--raum-5);background:var(--surface-card);
  border:1px solid var(--border);border-radius:var(--radius-kachel)}
.mp-mehr>summary{cursor:pointer;padding:var(--raum-3) var(--raum-4);list-style:none;
  font-family:Inter,system-ui,sans-serif;font-size:var(--fs-fuss);font-weight:var(--fw-halb);
  color:var(--accent-ink)}
.mp-mehr>summary::-webkit-details-marker{display:none}
.mp-mehr>summary::before{content:"+ ";color:var(--icon)}
.mp-mehr[open]>summary::before{content:"\2212 "}
.mp-mehr>div{padding:0 var(--raum-4) var(--raum-4);
  font-size:var(--fs-fuss);line-height:var(--lh-text);color:var(--text-secondary)}
.mp-mehr>div>p{margin:0 0 var(--raum-3)}
.mp-mehr>div>p:last-child{margin:0}

/* Aktionsblock: Ueberschrift -> Bedienelement -> kurzer Hinweis darunter.
   Diese Reihenfolge ist die eigentliche Aussage von Arbeitspaket B3. */
.mp-aktion{margin:0 0 var(--raum-5)}
.mp-aktion>h2,.mp-aktion>h3{margin:0 0 var(--raum-3)}