/* Cafcalog im Netz — dieselbe Sprache wie die App: Papier, Tinte, Fira,
   Punktraster. Ein Stylesheet fuer alle Seiten, damit eine Aenderung an einer
   Stelle geschieht.

   Die Farbwerte sind die der App (DesignSystem.swift) und die der
   Figma-Variablen. Wer dort etwas aendert, aendert es hier mit. */

:root {
  --paper: #fafaf8;
  --ink: #161614;
  --ink-2: #72726a;
  --rule: #e2e2da;
  --matrix: #e8e7e3;
  --roast: #b4531f;
  --rand: 24px;
  --spalte: 640px;
}

/* Dunkel zweimal: einmal fuer die Systemwahl, einmal fuer eine ausdrueckliche
   Wahl am Wurzelelement. Sonst gewaenne das Betriebssystem gegen den Schalter
   einer Umgebung, die ihn setzt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --ink: #f0f0ea;
    --ink-2: #85857d;
    --rule: #2a2a27;
    --matrix: #222220;
    --roast: #e08a4e;
  }
}

:root[data-theme="dark"] {
    --paper: #121211;
    --ink: #f0f0ea;
    --ink-2: #85857d;
    --rule: #2a2a27;
    --matrix: #222220;
    --roast: #e08a4e;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--rand) 96px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { max-width: var(--spalte); margin: 0 auto; }

/* Das Punktband: dasselbe Raster wie der Zeitstrahl — Punkt 3, Teilung 4 —
   nur als Hintergrund gezeichnet statt als 1632 Elemente. */
.raster {
  height: 44px;
  margin: 0 calc(var(--rand) * -1);
  background-image: radial-gradient(var(--matrix) 1.4px, transparent 1.5px);
  background-size: 4px 4px;
  background-position: 1px 1px;
}

header { padding: 56px 0 0; }

.marke {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--ink-2);
  margin: 0 0 40px;
}

h1 {
  font-weight: 300;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.stand {
  font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 48px;
}

h2 {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  margin: 56px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

h3 {
  font-weight: 500;
  font-size: 17px;
  margin: 32px 0 4px;
}

p { margin: 0 0 16px; max-width: 62ch; }

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink-2); }

strong { font-weight: 500; }

ul { margin: 0 0 16px; padding-left: 0; list-style: none; }

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  max-width: 62ch;
}

/* Der Aufzaehlungspunkt ist ein Rasterpunkt, kein Bullet. */
li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 3px;
  height: 3px;
  background: var(--ink-2);
}

.leise { color: var(--ink-2); font-size: 15px; }

.zahl {
  font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

footer {
  margin-top: 72px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 14px;
}

footer a { color: var(--ink-2); }

@media (max-width: 480px) {
  h1 { font-size: 32px; }
  body { font-size: 16px; }
}

/* ——— Startseite ——————————————————————————————————————————————————
   Nur was die Promo-Seite zusätzlich braucht. Die Datenschutzseite kommt mit
   dem Satz darüber aus. */

.held { padding: 72px 0 8px; }

.held h1 {
  font-size: 56px;
  line-height: 1.05;
  margin-bottom: 24px;
}

.lead {
  font-size: 21px;
  line-height: 1.5;
  font-weight: 300;
  max-width: 30ch;
  margin-bottom: 32px;
}

/* Der Knopf ist eine Zeile mit Linie darunter, keine Schaltfläche mit
   Schlagschatten — dieselbe Machart wie die stillen Wege in der App. */
.laden {
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

.laden[aria-disabled="true"] {
  color: var(--ink-2);
  border-bottom-color: var(--rule);
  cursor: default;
}

.block { margin-top: 72px; }

/* Text und Bild nebeneinander, ab Tabletbreite. Darunter untereinander —
   ein Telefonbild neben zwei Zeilen Text wäre beides zu klein. */
.paar {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 720px) {
  :root { --spalte: 940px; }
  .paar { grid-template-columns: 1fr 320px; gap: 56px; }
  .paar.gedreht { grid-template-columns: 320px 1fr; }
  .paar.gedreht .bild { order: -1; }
  .held h1 { font-size: 72px; }
}

.bild {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.bild img { display: block; width: 100%; height: auto; }

.bild figcaption {
  font-size: 13px;
  color: var(--ink-2);
  padding: 8px 10px;
  border-top: 1px solid var(--rule);
}

.werte {
  display: grid;
  gap: 4px 24px;
  margin: 24px 0 0;
  padding: 0;
}

@media (min-width: 560px) {
  .werte { grid-template-columns: repeat(3, 1fr); }
}

.werte div { border-top: 1px solid var(--rule); padding-top: 10px; }

.werte dt {
  font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  margin: 0;
}

.werte dd {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* ——— Promo-Seite —————————————————————————————————————————————
   Die breite Buehne fuer die Bildergalerien: zwoelf Spalten, wie der
   Zeitstrahl Viertelstunden hat. Alles, was ein Bild traegt, rastet auf
   Spalten; die Spannen heissen nach ihrer Breite (.k-6 = halbe Buehne).
   Unter 720 px wird aus zwoelf Spalten deren Sechstel — zwei Schirme
   nebeneinander, wie im App Store. */

.promo { max-width: var(--spalte); }

@media (min-width: 720px) {
  .promo {
    --spalte: 1080px;
    --rand: 40px;
  }
  .galerie { grid-template-columns: repeat(12, 1fr); }
  .k-3 { grid-column: span 3; }
  .k-4 { grid-column: span 4; }
  .k-6 { grid-column: span 6; }
  .k-8 { grid-column: span 8; }
  .k-12 { grid-column: 1 / -1; }
}

@media (min-width: 1080px) {
  .promo { --spalte: 1280px; }
}

.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie li { padding: 0; max-width: none; }
.galerie li::before { display: none; }

/* Untereinander waere der Streifen endlos; die kleinen Schirme bleiben
   nebeneinander, die grossen nehmen die ganze Breite. */
.galerie .k-6, .galerie .k-8, .galerie .k-12 { grid-column: 1 / -1; }

/* Ein Schirm in der Galerie: derselbe Rahmen wie ueberall, nur ohne
   Bildunterschrift-Zwang — die steht wahlweise darunter. */
.galerie .bild { margin: 0; }

/* Die Textkachel im Mosaik: kein Bild, nur Satz auf Flaeche. */
.spruch {
  margin: 0;
  border: 1px solid var(--rule);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}

.spruch p {
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
}

.spruch footer {
  border: 0;
  margin: 16px 0 0;
  padding: 0;
  font-size: 13px;
  font-family: "Fira Mono", ui-monospace, monospace;
}

/* Das Punktband als Abschnittswechsel — auf der Promo oefters. */
.promo .raster { margin-top: 72px; margin-bottom: 72px; }

/* ——— Rundgang — Bewegung —————————————————————————————————————
   Der Hero ist eine Flaeche mit dem Tag-Band aus three.js dahinter;
   der Satz steht vor ihm, auf Papier. Ohne JavaScript bleibt der Hero
   eine schlichte Ueberschrift ueber viel Weissraum. */

.erlebnis .held {
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 72px 0 8px;
}

#tagband {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
}

#tagband canvas { display: block; width: 100%; height: 100%; }

/* Der Satz bleibt ueber dem Band und laesst sich weiter markieren. */
.erlebnis .held > *:not(#tagband) { position: relative; }

/* Weissraum: der Rundgang traegt weitere Abstaende als die Promo —
   die Sektionen sollen einzeln stehen, nicht aneinanderdrängen. */
.erlebnis .block { margin-top: 128px; }
.erlebnis .held { padding-top: 104px; }

/* ——— Der Zeitstrahl ———————————————————————————————————————————— */

.strahlhalter { margin: 0; border: 1px solid var(--rule); background: var(--paper); }

.strahlhalter svg { display: block; width: 100%; height: auto; }

.strahlhalter figcaption {
  font-size: 13px;
  color: var(--ink-2);
  font-family: "Fira Mono", ui-monospace, monospace;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--rule);
}

/* Die Legende unter dem Strahl: vier Fakten, je mit einer Linie. */
.legende {
  display: grid;
  gap: 12px 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 32px 0 0;
  padding: 0;
}

.legende div { border-top: 1px solid var(--rule); padding-top: 10px; }

.legende dt {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

.legende dd {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* ——— Die Anzeigen —————————————————————————————————————————————— */

.anzeige { padding: 40px 32px; margin: 0; align-items: center; }

.anzeige img { display: block; width: 100%; height: auto; }

/* Das Flipwerk im Katalog: weisse Karte mit Linie — Weiss auf Weiss,
   die Zeichnung traegt Linie und Ziffer, keine Flaeche. */
.flipwerk {
  display: flex;
  gap: 14px;
  justify-content: center;
  width: 100%;
}

.flipkarte {
  position: relative;
  width: 72px;
  height: 100px;
  border-radius: 5px;
  background: #ffffff;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flipkarte .ziffer {
  font-family: "Fira Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  transform: perspective(300px) rotateX(4deg);
}

.flipkarte .fuge {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--rule);
  transform: translateY(-0.5px);
}

.flipkarte::before, .flipkarte::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  width: 3px; height: 6px;
  border: 1px solid var(--rule);
}

.flipkarte::before { left: 2px; }
.flipkarte::after { right: 2px; }

/* ——— Das Laufband der Sorten ——————————————————————————————————
   Eine Reihe, die am Scrollen vorbeizieht. Der Rand geht bis an die
   Fensterkante — das Band ist ein Vorbeilaufen, kein Kasten. */

.laufband {
  overflow: hidden;
  margin: 40px calc(var(--rand) * -1) 0;
  padding: 4px var(--rand);
}

.laufstrecke {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}

.laufstrecke li::before { display: none; }

.sorte figure {
  margin: 0;
  width: 200px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.sorte.gross figure { width: 300px; }

.sorte img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.sorte figcaption { padding: 10px 12px 12px; }

.sortenname { font-size: 14px; font-weight: 500; margin: 0; }

.sortenwerte {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
  margin: 4px 0 0;
}

.sortenwerte .roast { color: var(--roast); }

.sortentext { font-size: 13px; line-height: 1.5; margin: 10px 0 0; }

.sortenort {
  font-size: 12px;
  color: var(--ink-2);
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

/* ——— Der Streifen des Tages ————————————————————————————————————
   Acht Schirme auf einem Lauf; darunter die Uhr, die mitschreitet.
   Unter 720 px entfällt der Lauf: die Schirme reihen sich zweispaltig. */

.streifen { margin-top: 40px; }

.streifen-track {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.streifen-track li::before { display: none; }

.streich { flex: none; }

.streich .bild { width: 280px; }

.fortschritt {
  position: relative;
  height: 28px;
  margin-top: 28px;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
}

.fortschritt-linie {
  position: absolute;
  left: 48px; right: 48px; top: 13px;
  height: 1px;
  background: var(--rule);
}

.fortschritt-punkt {
  position: absolute;
  top: 10px; left: 48px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.fortschritt-von { position: absolute; left: 0; top: 4px; }
.fortschritt-bis { position: absolute; right: 0; top: 4px; }

@media (max-width: 719px) {
  .laufband { margin-inline: 0; padding: 0; }
  .sorte figure, .sorte.gross figure { width: 164px; }
  .sorte.gross figure { width: calc(100vw - var(--rand) * 2 - 40px); }
  .streifen-track { flex-wrap: wrap; }
  .streich { width: calc(50% - 12px); }
  .streich .bild { width: 100%; }
  .fortschritt { display: none; }
}

/* ——— Der Katalog — weisse Fassung ——————————————————————————————
   Braun-Anleitung: reines Weiss, Tinte, Linien, nummerierte Kapitel.
   Ein Bestandteil je Kapitel, hervorgehoben wie ein Bauteil. */

.katalog {
  /* Farben nach den Figma-Frames. Ink3 wie die App auf AA angehoben:
     8a8a82 kam auf 3,33:1 gegen Papier (WCAG AA verlangt 4,5:1), jetzt
     4,56:1 — knapp darueber, damit moeglichst wenig von der Ruhe
     verlorengeht (dasselbe wie DesignSystem.swift zu ink2). Das Label
     der aktiven Pille auf Röstfarbe braucht 3:1 (Grossschrift):
     d8d8cf = 3,49:1 hell, 3a3a34 = 4,31:1 dunkel — beides punchSheet-
     Toene der App-Palette. */
  --paper: #fafaf8;
  --ink: #161614;
  --ink-2: #72726a;
  --ink-3: #73736d;
  --label-aktiv: #d8d8cf;
  --shade: color-mix(in srgb, var(--ink) 4%, transparent); /* Figma-Variable shade: 4 % Ink, je Modus */
  --rule: #e2e2da;
  --matrix: #f0f0ee;
  --roast: #b4531f;
  /* Vier Geraetegroessen nach den Layout-Frames (Small 274:318390,
     Medium 274:318321, Large 270:298843, XLarge 274:318344) und der
     Figma-Variablensammlung „Device": Rand, Titelachse (Spalte 2 des
     12er-Rasters) und Schriftgroessen je Groesse. Small ist der Grundwert,
     die anderen ueberschreiben ihn der Breite nach. */
  --rand: 12px;
  --achse: 32px;
  --gutter: 8px;
  --vgap: 8px;
  --reihe: calc((100svh - 7 * var(--vgap)) / 8);
  --h1: 32px;  --h1-zeile: 40px;  --titel-w: 216px;
  --h2: 24px;  --h2-zeile: 32px;
  --h3: 20px;  --h3-zeile: 28px;
  --p: 12px;   --p-zeile: 20px;
  /* Der Umschalter der Section 00: Kapselmasse je Groesse; Polster und
     Segmentschrift haengen an der Breite (3,22 % und 11,33 %, wie in
     der Figma-Komponente „Frame 3"). */
  --u-b: 248px;    --u-h: 80.6px;
  --u-wort: 7.59px;  --u-wort-zeile: 12.65px;
  --u-wort-w: 125.2px;  --u-wort-abstand: 5px;
  --u-polster: calc(var(--u-b) * 0.0322);
  max-width: 100%;
  padding-inline: var(--rand);
}

/* Die Buehne misst vom Fensterrand, nicht vom Seitenrand: der Koerper
   legt seinen Rand fuer Katalog-Seiten ab. */
body:has(main.katalog) { padding-inline: 0; }

@media (min-width: 768px) {
  .katalog {
    --rand: 20px;
    --achse: 61.3px;
    --h1: 40px;  --h1-zeile: 48px;  --titel-w: 421.3px;
    --u-b: 360px;    --u-h: 116.3px;
    --u-wort: 10.96px;  --u-wort-zeile: 18.26px;
    --u-wort-w: 180.8px;  --u-wort-abstand: 7.3px;
  }
}

@media (min-width: 1280px) {
  .katalog {
    --rand: 40px;
    --achse: 100.7px;
    --h1: 48px;  --h1-zeile: 56px;  --titel-w: 696.7px;
    --h2: 32px;  --h2-zeile: 40px;
    --h3: 24px;  --h3-zeile: 32px;
    --p: 14px;
    --u-b: 596px;    --u-h: 193.2px;
    --u-wort: 21.23px;  --u-wort-zeile: 30.33px;
    --u-wort-w: 300.3px;  --u-wort-abstand: 12.1px;
    max-width: 1280px;
  }
}

@media (min-width: 1440px) {
  .katalog {
    --achse: 114px;
    --h1: 64px;  --h1-zeile: 72px;  --titel-w: 790px;
    --u-b: 676px;    --u-h: 217.8px;
    --u-wort: 23.94px;  --u-wort-zeile: 34.2px;
    --u-wort-w: 338.6px;  --u-wort-abstand: 13.7px;
    max-width: 1440px;
  }
}

/* Der Dunkelmodus traegt dieselben Werte wie die App (DesignSystem.swift):
   Papier nachts, Tinte tags — nur die Rollen tauschen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .katalog,
  :root[data-theme="dark"] .katalog {
    --paper: #121211;
    --ink: #f0f0ea;
    --ink-2: #85857d;
    --ink-3: #85857d;
    --label-aktiv: #3a3a34;
    --rule: #2a2a27;
    --matrix: #222220;
    --roast: #e08a4e;
  }
}

/* Die Leselinie ganz oben: zwei Pixel in Röstfarbe, die den Weg durch
   die Seite nachziehen. (Heißt nicht .fortschritt — das ist die Uhr im
   Tagesstreifen des Rundgangs.) */
.leselinie {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--roast);
  z-index: 20;
}

/* Der Erscheinungsumschalter: hell, dunkel — dieselbe Machart wie die
   Ziffern der Kapitel (mono 12, Ink3, aktiv in Tinte mit Unterstrich).
   Er bleibt oben rechts stehen, der Inhalt laeuft dahinter weg. */
.erscheinung {
  position: fixed;
  top: 9px; right: var(--rand, 40px);
  display: flex; gap: 20px;
  margin: 0;
  padding: 6px 8px;
  background: var(--paper);
  z-index: 10;
}

.erscheinung button {
  all: unset; cursor: pointer;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px; line-height: 14px;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
}

.erscheinung button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Der Schalter am Fuss: drei Zustaende wie die App — auto, hell, dunkel. */
.modus {
  display: flex;
  gap: 20px;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
  margin: 24px 0 0;
}

.modus button {
  all: unset;
  cursor: pointer;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
}

.modus button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.katalog .raster { opacity: 0.55; }

.katalog .block { margin-top: max(80px, 20svh); }

.katalog .raster { margin-top: max(40px, 10svh); margin-bottom: max(40px, 10svh); }

.katalog .buehne { padding: clamp(32px, 5vw, 72px); }

.katalog footer { margin-top: max(60px, 15svh); }

@media (max-width: 719px) {
  .katalog .block { margin-top: 80px; }
  .katalog .raster { margin-top: 40px; margin-bottom: 40px; }
}

/* Grid-Items duerfen nicht auf ihre Inhaltsbreite wachsen (Bilder),
   sonst sprengt der Inhalt schmale Fenster. */
.k7 > * { min-width: 0; }

/* Section 00 nach den vier Layout-Frames (XLarge 274:318344, Large
   270:298843, Medium 274:318321, Small 274:318390): drei Bloecke ueber
   die Hoehe — der Titel oben auf der Titelachse, der Umschalter mittig,
   der Store-Hinweis unten. space-between verteilt sie so, wie es die
   Frames zeigen; alle Masse kommen aus den Geraete-Variablen. Keine
   Shade-Kasten mehr: die Sublines sind reine Typografie (Light, 8 px
   Einzug beim Lead), wie in den neuen Frames gezeichnet. */

.s00 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 0;
}

.s00 .kopf { display: flex; flex-direction: column; }

.s00 .digitzeile {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px var(--achse);
}

.s00 .quadrat {
  width: 24px; height: 24px;
  border: 1px solid var(--ink);
}

.s00 .ziffer {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 14px;
  color: var(--ink-3);
}

.s00 .titel {
  margin: 0 0 12px var(--achse);
  font-weight: 200; /* ExtraLight */
  font-size: var(--h1);
  line-height: var(--h1-zeile);
  letter-spacing: -0.01em;
  max-width: var(--titel-w);
}

.s00 .titel .akzent { color: var(--roast); font-style: normal; }

.s00 .subline {
  margin: 0 0 0 var(--achse);
  width: 200px;
  padding-left: 8px; /* wie die Subline-Komponente „left-line": 8 px Einzug */
  border-left: 1px solid var(--ink);
}

.s00 .subline .lead {
  font-weight: 300;
  font-size: var(--p);
  line-height: var(--p-zeile);
  color: var(--ink);
  margin: 0;
}

/* Der Mittelblock: Kapsel in der Fenstermitte, das Wort bündig unter
   ihrer linken Kante (Breite ~ halbe Kapsel, drei Zeilen). */
.s00 .mitte {
  align-self: center;
  display: flex;
  flex-direction: column;
  margin: 8px 0;
}

.s00 .umschalter {
  display: flex;
  gap: var(--u-polster);
  width: var(--u-b);
  height: var(--u-h);
  padding: var(--u-polster);
  background: var(--rule);
  border-radius: calc(var(--u-h) / 2);
  margin: 0;
}

.s00 .umschalter .segment {
  width: calc((var(--u-b) - 3 * var(--u-polster)) / 2);
  height: calc(var(--u-h) - 2 * var(--u-polster));
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--paper);
  font-family: "Fira Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: calc(var(--u-b) * 0.1133);
  line-height: 1.143;
  transition: background 0.35s ease, color 0.35s ease;
}

/* Die Zustaende nach der Figma-Komponente „Frame 3": inaktive Segmente
   sind Papier-Pillen (kcal in Tinte, mg in Roest), das aktive Segment
   versenkt sich — Ink- bzw. Roest-Pille mit Label in c9c9bd. */
.s00 .umschalter .segment.kcal { color: var(--ink); }
.s00 .umschalter .segment.mg { color: var(--roast); }

.s00 .umschalter[data-aktiv="kcal"] .segment.kcal {
  background: var(--ink);
  color: var(--label-aktiv);
}

.s00 .umschalter[data-aktiv="kcal"] .segment.mg {
  background: var(--paper);
  color: var(--roast);
}

.s00 .umschalter[data-aktiv="mg"] .segment.mg {
  background: var(--roast);
  color: var(--label-aktiv);
}

.s00 .umschalter[data-aktiv="mg"] .segment.kcal {
  background: var(--paper);
  color: var(--ink);
}

.s00 .umschalter-wort {
  margin: var(--u-wort-abstand) 0 0;
  width: var(--u-wort-w);
  font-weight: 300;
  font-size: var(--u-wort);
  line-height: var(--u-wort-zeile);
  color: var(--ink);
}

/* App-Store-Badge nach Apples Vorgaben: offizielle Grafik unveraendert,
   mindestens 40 px hoch, Freiraum ringsum ein Viertel der Hoehe (10 px).
   Je Sprache und Erscheinung liegt ein Bild im Link, gezeigt wird eines. */
.s00 .store,
.store-footer {
  display: inline-block;
  align-self: flex-start;
  padding: 10px;
  line-height: 0;
}

.s00 .store { margin: 0 0 0 calc(var(--achse) - 10px); }
.store-footer { margin: 0 0 12px -10px; }

.badge { display: none; height: 40px; width: auto; }
:root:not([lang="en"]) .badge.de.hell,
:root[lang="en"] .badge.en.hell { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.de.hell,
  :root:not([data-theme="light"]) .badge.en.hell { display: none; }
  :root:not([data-theme="light"]):not([lang="en"]) .badge.de.dunkel,
  :root:not([data-theme="light"])[lang="en"] .badge.en.dunkel { display: block; }
}

:root[data-theme="dark"] .badge.de.hell,
:root[data-theme="dark"] .badge.en.hell { display: none; }
:root[data-theme="dark"]:not([lang="en"]) .badge.de.dunkel,
:root[data-theme="dark"][lang="en"] .badge.en.dunkel { display: block; }

/* Die Kapitelnummer: ein Quadrat mit Ziffer, wie auf Braun-Papieren. */
.katalog .nummer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.katalog .nummer::before {
  content: "";
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink);
}

/* Die Buehne: weisse Flaeche mit Linie, das Bauteil darauf. */
.buehne {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(24px, 4vw, 56px);
  margin: 0;
}

/* Das Seitenlayout als Schema: ein Drahtgitter des Startschirms. */
.schema { aspect-ratio: 393 / 760; max-width: 340px; margin: 0 auto; }

.schema .feld {
  stroke: var(--ink-2);
  fill: none;
  stroke-width: 1;
}

.schema .heftig { stroke: var(--ink); }

.schema text {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 11px;
  fill: var(--ink-2);
}

/* Die Inhaltsseite: reine Typografie mit Linien. */
.inhalt { list-style: none; margin: 0; padding: 0; }

.inhalt li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  max-width: none;
}

.inhalt li::before { display: none; }

.inhalt .wann {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-2);
  min-width: 52px;
}

.inhalt .was { flex: 1; font-size: 16px; }

.inhalt .wieviel {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Die Detailseite eines Kaffees als Inhaltsseite: Bild oben rechts,
   darunter die Bestandteile als Zeilen. */
.detailkopf {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.detailbild {
  width: 96px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  display: block;
}

.wieviel.roast, .roast { color: var(--roast); }

/* Die Cafe-Galerie: Quadrate mit Linie, Weiss dazwischen. */
.cafe-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0; padding: 0;
}

.cafe-galerie li::before { display: none; }

.cafe-galerie figure {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.cafe-galerie img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.cafe-galerie figcaption {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
  padding: 8px 10px;
  border-top: 1px solid var(--rule);
}

/* Die Auswahlmaske: Kacheln mit Punktbalken, nachgebaut. Die Spalten
   duerfen schrumpfen (minmax 0), die Punkte umbrechen — sonst sprengt
   die Maske schmale Fenster. */
.maske {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0; padding: 0;
}

.maske li::before { display: none; }
.maske li { min-width: 0; }

.maske .kachel {
  border: 1px solid var(--rule);
  padding: 14px;
  margin: 0;
}

.maske .kachelname { font-size: 14px; margin: 10px 0 0; }

.maske .kachelwerte {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
  margin: 2px 0 0;
}

/* Ein Punktbalken: Punkte in einer Reihe, an/aus nach Fortschritt. */
.balken { display: flex; flex-wrap: wrap; gap: 4px; }

.balken i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--matrix);
  display: block;
}

.balken i.an { background: var(--ink); }
.balken.mg i.an { background: var(--roast); }

/* Links-rechts: beide Fassungen NEBENEINANDER — links die Linkshänder-
   Ansicht, rechts die Rechtshänder-Ansicht. Jede Karte traegt zwei
   Seiten: den Startscreen vorn, die Detailansicht des Cafés hinten;
   beim Scrollen drehen sich beide gemeinsam um die Y-Achse. */
.wechsel-paar {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

.wechsel-paar > * { min-width: 0; }

.wechsel { perspective: 1400px; }

.wechsel-duo {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.wechsel-duo .wechsel-karte {
  flex: 0 1 300px;
  min-width: 0;
  margin: 0;
  position: relative;
  transform-style: preserve-3d;
}

.wechsel-karte img {
  display: block;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
}

.wechsel-karte img.rueck {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

/* Am Tag nur die hellen Fassungen, nachts die dunkeln — wie bei der
   Erfassung. Ohne diese Regel stehen beide untereinander. */
.wechsel-karte img.dunkel { display: none; }

.wechsel-hinweis {
  text-align: left;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
  margin: 8px 0 0;
}

/* Die Wechsel-Gruppe: Buehne und Beschreibung gehoeren zusammen —
   gemeinsam so breit wie die Bilder, horizontal mittig in der Sektion;
   die Beschreibung laeuft linksbuendig mit dem Bildanfang mit. */
.wechsel-gruppe {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Die Wechsel-Buehne umschliesst nur die Bilder — Umrisslinie wie die
   Erfassungs-Karten, kein Polster. */
.buehne.wechsel {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--label-aktiv, #d8d8cf);
}


/* ——— Kapitel 01 · Die Zeitleiste (Frames 262:95738 ff., ueberarbeitet) —
   Drei Bloecke wie in Section 00: das Titelcluster oben (Digitzeile,
   Titel, Lead), das Band fensterzentriert, das Wort des aktuellen
   Zugangs darunter, die Subline unten an der linken Bandkante.
   Keine Shade-Kasten — reine Typografie, wie die neuen Frames.
   Kapitel 02 folgt demselben Flussbild; beide Sektionen pinnen und
   nehmen sich die ganze Fensterhoehe (min-height). */

.abschnitt {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.abschnitt .titel-k {
  margin: 0;
  border-top: 0;        /* keine Erbstrecke der Inhaltsseiten-h2 */
  padding-top: 0;
  font-weight: 300;
  font-size: var(--h2);
  line-height: var(--h2-zeile);
  color: var(--ink);
}

/* Die Digitzeile der Kapitel — dieselbe Machart wie in Section 00. */
.abschnitt .digitzeile {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px var(--achse, 100.7px);
}

.abschnitt .quadrat {
  width: 24px; height: 24px;
  border: 1px solid var(--ink);
}

.abschnitt .ziffer {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 14px;
  color: var(--ink-3);
}

/* Die Sublinien der Kapitel: der Lead traegt seine Linie links (die
   Komponente heißt left-line), der Hinweis unten (bottom-line) — je
   ein Pixel in voller Tinte, wie die Figma-Strokes. */
.k1 .subline.k1-lead,
.k2 .subline.k2-lead,
.k3 .subline.k3-lead,
.k4 .subline.k4-lead,
.k7 .subline.k7-lead {
  border-left: 1px solid var(--ink);
}

.k1 .k1-unten,
.k2 .subline.k2-hinweis,
.k3 .subline.k3-hinweis,
.k4 .subline.k4-hinweis {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}

.k1 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  margin-top: 80px;
}

.k1 .titel-k {
  position: static;
  margin: 0 0 0 var(--achse);
}

.k1 .subline.k1-lead {
  margin: 0 0 0 var(--achse);
  width: 200px;
  padding-left: 8px;      /* Subline-Komponente „left-line": 8 px Einzug.
                             Ohne min-height: Die Linie folgt dem Text. */
}

.k1 .k1-lead .lead {
  font-weight: 300;
  font-size: var(--p);
  line-height: var(--p-zeile);
  color: var(--ink);
  margin: 0;
}

.k1 .timeline {
  width: min(596px, 100%);
  margin: 17px auto 0;    /* fensterzentriert (im Frame x 302 von 1200) */
}

.k1 .timeline svg { display: block; width: 100%; height: auto; }

/* Die Fuellungen des Zeitstrahls als CSS-Regeln — var() gehoert in
   Deklarationen, nicht in SVG-Attribute, sonst wirft sie Safari weg. */
#strahl rect.pm-matrix { fill: var(--matrix); }
#strahl rect.pm-ink { fill: var(--ink); }
#strahl rect.pm-roast { fill: var(--roast); }
#strahl .zb { fill: var(--ink-3); }
#strahl .zl { fill: var(--paper); }
#strahl .lm { fill: var(--ink-3); }  /* Laufmarke in Ink3, wie die Frames */

.k1 .slot-wort {
  margin: 8px 0 0;        /* 7,3 im Frame: knapp unter dem Band */
  font-size: var(--p);
  line-height: var(--p-zeile);
  color: var(--ink-3);    /* Regular in Ink3, ueber die ganze Bandbreite */
  min-height: var(--p-zeile);
}

.k1-fuss {
  width: min(596px, 100%);
  margin: auto auto 0;    /* unten verankert, in der Spalte des Bandes */
}

.k1 .k1-unten {
  width: 179px;
  margin: 0;
}

.k1 .k1-unten .lead {
  font-size: var(--p);
  line-height: var(--p-zeile);
  font-weight: 400;       /* Regular in Ink3, wie die untere Subline */
  color: var(--ink-3);
  margin: 0;
}

/* ——— Kapitel 02 · Die Ziffernwerke (Frames 262:166118 ff., ueberarbeitet) —
   Wie Kapitel 01 ein Flussbild: Titelcluster, dann drei Werke in
   unmittelbar aufeinanderfolgenden Reihen — Dot auf Spalte 2 (Achse),
   Flip auf Spalte 6, Segment auf Spalte 7 —, darunter die Hinweis-
   Subline. Alle drei Kaesten tragen shade (4 % Ink, wie die Frames);
   Karten und blinde Punkte/Segmente in #ebebe2, die leuchtenden in
   voller Tinte. */

.k2 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  margin-top: 80px;
}

.k2 .titel-k {
  position: static;
  margin: 0 0 0 var(--achse);
}

.k2 .subline.k2-lead {
  margin: 0 0 0 var(--achse);
  width: 200px;
  padding-left: 8px;      /* Subline-Komponente „left-line": 8 px Einzug */
}

.k2 .k2-lead .lead {
  font-weight: 300; font-size: var(--p); line-height: var(--p-zeile);
  color: var(--ink); margin: 0;
}

.k2 .subline.k2-hinweis {
  margin: 49px 0 0 var(--achse);
  width: min(394.7px, calc(100% - var(--achse)));
}

.k2 .k2-hinweis .lead {
  font-weight: 300; font-size: var(--p); line-height: var(--p-zeile);
  color: var(--ink-3); margin: 0;
}

/* Die Werke: kein Grund, nur Weiss — im Dunkeln der hauch shade, wie
   die Textkasten. Zwischen den Werken 16 px Luft; die Spalten-
   Abstufung laeuft ueber die Titelachse (Achse = Spalte 2, Flip Spalte 6
   = 5·Achse, Segment Spalte 7 = 6·Achse). Die Stufe zaehlt zur Breite
   mit rein (Prozentbreite kennt ihr Margin nicht), unter Large entfaellt
   sie: alle Werke haengen an der Achse. */
.werk {
  width: min(394.7px, calc(100% - var(--werk-stufe, 0px)));
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  overflow: visible;
  margin-top: 8px;
}

.werk + .werk { margin-top: 16px; }

/* Erste Werk links (auf der Titelachse), zweites mittig, drittes rechts. */
.werk.flip { height: 112px; gap: 7px; --werk-stufe: var(--achse); margin-left: var(--werk-stufe); }
.werk.dot  { height: 112px; --werk-stufe: 0px; margin-left: auto; margin-right: auto; }
.werk.seg  { height: 116px; gap: 8px; --werk-stufe: 0px; margin-left: auto; margin-right: var(--achse); }

/* Die Flipkarte: Komponente „Ziffer" — Karte 80 x 112 auf #ebebe2,
   beide Haelften 55 px hoch auf #e2e2da (die 2er-Mitte bleibt Karte),
   Nocken 2 x 10 in c9c9bd ueber der Fuge, Ziffer Regular 96. */
.werk.flip .karte {
  position: relative;
  width: 80px; height: 112px;
  background: var(--werk-karte, #ebebe2);
  border-radius: 4px;
  perspective: 260px;
}

.werk.flip .socke, .werk.flip .klappe {
  position: absolute; left: 0; width: 80px; height: 55px;
  overflow: hidden;
  background: var(--werk-haelfte, #e2e2da);
}

.werk.flip .socke { top: 57px; }        /* untere Haelfte, bleibt liegen */
.werk.flip .klappe { top: 0; transform-origin: 50% 100%; backface-visibility: hidden; }

.werk.flip .zahl {
  position: absolute; left: 0; width: 80px; height: 112px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-weight: 400; font-size: 96px; line-height: 112px;
  color: var(--ink);
}

.werk.flip .socke .zahl { top: -57px; }  /* zeigt nur die untere Zifferhaelfte */
.werk.flip .klappe .zahl { top: 0; }     /* zeigt nur die obere Zifferhaelfte */

.werk.flip .nocke {
  position: absolute; top: 51px;
  width: 2px; height: 10px;
  background: var(--label-aktiv, #d8d8cf);
}
.werk.flip .nocke.l { left: 7px; }
.werk.flip .nocke.r { right: 7px; }

/* Das Punktfeld ist 131 hoch und steht 9,5 ueber den 112er-Kasten
   hinaus, wie im Frame; die Hoehe fuehrt das CSS. */
.werk.dot svg { display: block; height: 131px; width: auto; max-width: 100%; }

/* Die Segmentstellen: alle Zustaende liegen auf einem Fleck — der
   Wechsel ist eine weiche Uberblendung, kein Umblaettern. */
.werk.seg .stelle {
  position: relative;
  display: block;
  width: 74px; height: 116px;
}
.werk.seg .stelle svg { position: absolute; left: 0; top: 0; }

/* Blinde Punkte und Segmente tragen die Kartenfarbe #ebebe2, die
   leuchtenden volle Tinte — im Dunkeln drehen beide ueber die Variablen. */
.werk.dot rect { fill: var(--werk-karte, #ebebe2); }
.werk.dot rect.an { fill: var(--ink); }

.werk.seg polygon { fill: var(--werk-karte, #ebebe2); }
.werk.seg polygon.an { fill: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .katalog {
    --werk-karte: #262622;
    --werk-haelfte: #2a2a27;
  }
}
:root[data-theme="dark"] .katalog {
  --werk-karte: #262622;
  --werk-haelfte: #2a2a27;
}

/* ——— Kapitel 03 · Die Erfassung (Frames 277:372810 ff.) ————————————
   Titelcluster, dann die Buehne mit den Erfassungs-Karten: Schirm im
   Haarlinien-Rahmen, darunter die Caption-Zeile — die Karte auf 4 % Ink.
   Die Choreo faehrt katalog.js als gescrubpte Timeline mit Pausen; die
   Positionen sind Rasterspalten: 3 · 6 · 7 · 10-mal die Titelachse.
   Unter 768 bleibt eine Karte stehen und die Schirme wechseln darin. */

.k3 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  margin-top: 80px;
}

.k3 .titel-k {
  position: static;
  margin: 0 0 0 var(--achse);
}

.k3 .subline.k3-lead {
  margin: 0 0 0 var(--achse);
  width: 200px;
  padding-left: 8px;
}

.k3 .k3-lead .lead {
  font-weight: 300; font-size: var(--p); line-height: var(--p-zeile);
  color: var(--ink); margin: 0;
}

.k3-buehne {
  position: relative;
  margin: 0;
  /* Drei Karten in fester Groesse auf den Spalten 1, 3, 5 — sie
     ueberlappen einander um gut eine Spalte; nichts verschiebt oder
     schrumpft. Der Text steht daneben auf Spalte 8, unten. */
  --k3w: min(294px, calc((100svh - 356px) / 2.1727 - 6px));
  height: calc((var(--k3w) - 2px) * 2.1727 + 25px);
  perspective: 1800px;
}

/* Die Karte: kein Grund, kein Schatten — ein einziger 1-px-Umriss in
   c9c9bd laeuft um Schirm UND Caption: Der Screen liegt bündig in der
   Kartenform, die Trennlinie darunter ist dieselbe Linie. Ohne
   JavaScript steht die Endpose: drei Karten auf Spalte 1, 3, 5. */
.erfassung {
  position: absolute;
  top: 0;
  width: var(--k3w);
  height: calc((var(--k3w) - 2px) * 2.1727 + 25px);
  margin: 0;
  background: transparent;
  border: 1px solid var(--label-aktiv, #d8d8cf);
  box-sizing: border-box;
}

#erfassung-kaffee { left: var(--achse); z-index: 1; }
#erfassung-mahlzeit { left: calc(var(--achse) * 3); z-index: 2; }
#erfassung-diktat { left: calc(var(--achse) * 5); z-index: 3; }

/* Der Schirm fuellt die Kartenform bündig aus — derselbe Umriss, keine
   eigene Linie, kein Überstand mehr. */
.erfassung .screen {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(100% - 25px);
  overflow: hidden;
  background: var(--paper);
}

.erfassung .screen img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;   /* Statusleiste und Kopf fallen oben weg */
}

/* Die Screens der App gibt es hell und dunkel: Am Tag steht die helle
   Fassung auf der Karte, nachts die dunkle — wie die App selbst. */
.erfassung .screen img.dunkel { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .erfassung .screen img:not(.dunkel),
  :root:not([data-theme="light"]) .wechsel-karte img:not(.dunkel) { display: none; }
  :root:not([data-theme="light"]) .erfassung .screen img.dunkel,
  :root:not([data-theme="light"]) .wechsel-karte img.dunkel { display: block; }
}
:root[data-theme="dark"] .erfassung .screen img:not(.dunkel),
:root[data-theme="dark"] .wechsel-karte img:not(.dunkel) { display: none; }
:root[data-theme="dark"] .erfassung .screen img.dunkel,
:root[data-theme="dark"] .wechsel-karte img.dunkel { display: block; }

/* Die Captionzeile: Trennlinie OBEN (Frame 17, Stroke c9c9bd), gefuellt
   mit Papier — bei der Überlagerung legt sich sonst die Umrisslinie der
   nachfolgenden Karte über den Text. */
.erfassung figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 25px;
  border-top: 1px solid var(--label-aktiv, #d8d8cf);
  padding: 4.5px 8px 0;
  box-sizing: border-box;
  background: var(--paper);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--ink-3);
}

/* Die Health-Subline: die VIERTE Einblendung — eigene Rasterzelle
   rechts NEBEN dem letzten Bild (Spalte 8, wie im Text-Frame), der
   Text unten darin, vollstaendig lesbar. */
/* Der Hinweis steht UNTER dem Fächer, in der Spalte des ersten Bildes —
   nicht mehr rechts daneben (dort kollidierte er mit dem dritten Bild,
   seit die Karten breit geclampt sind). */
.k3 .subline.k3-hinweis {
  margin: 0 0 0 var(--achse);
  width: 193.3px;
}

.k3 .k3-hinweis .lead {
  font-weight: 300; font-size: var(--p); line-height: var(--p-zeile);
  color: var(--ink-3); margin: 0;
}

/* Unter 768: eine Karte in der Mitte (katalog.js zentriert sie und
   wechselt die Schirme darin). */
@media (max-width: 767px) {
  #erfassung-kaffee, #erfassung-mahlzeit, #erfassung-diktat { left: 50%; }
  .k3 .subline.k3-hinweis { position: static; margin: 24px 0 0 var(--achse); width: auto; max-width: none; }
}

/* ——— Kapitel 04 · Die Kaffeegetränke (Frames 294:480060 / 303:487853) —
   Titelcluster, dann ein 4-spaltiges Kartenraster (die vierte Spalte
   trägt nur den Hinweis in der letzten Reihe): Karten 193.3 breit auf
   shade, Bild im Seitenverhältnis, Caption-Zeile darunter. Der Text
   liegt als Frostscheibe darüber — Papier zu 40 % mit Hintergrund-Blur
   80, wie das Figma-Panel — und klappt auf Klick von oben auf. */

.k4 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  margin-top: 80px;
}

/* Kapitel 07 · Links, rechts — derselbe Abschnitts-Bauplan wie die
   Kapitel 01–04: Digitzeile, Titel, Lead-Subline, darunter das Visual.
   (Steht hier NACH der .abschnitt .titel-k-Kernregel — bei gleicher
   Spezialitaet gewinnt bei Kaskade der spaetere Block.) */
.k7 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  margin-top: 80px;
}

.k7 .titel-k {
  position: static;
  margin: 0 0 0 var(--achse);
}

.k7 .subline.k7-lead {
  margin: 0 0 0 var(--achse);
  width: 200px;
  padding-left: 8px;
}

.k7 .k7-lead .lead {
  font-weight: 300; font-size: var(--p); line-height: var(--p-zeile);
  color: var(--ink); margin: 0;
}

.k4 .titel-k {
  position: static;
  margin: 0 0 0 var(--achse);
}

.k4 .subline.k4-lead {
  margin: 0 0 0 var(--achse);
  width: 200px;
  padding-left: 8px;
}

.k4 .k4-lead .lead {
  font-weight: 300; font-size: var(--p); line-height: var(--p-zeile);
  color: var(--ink); margin: 0;
}

.k4-raster {
  display: grid;
  grid-template-columns: repeat(4, 193.3px);
  gap: 8px;
  align-content: start;
  margin: 0 0 0 calc(var(--achse) * 3);
}

/* Drei Karten je Reihe, die vierte Spalte bleibt frei — nur der
   Hinweis steht unten rechts, wie im Frame. */
.k4-raster .kaffee:nth-of-type(3n+1) { grid-column: 1; }
.k4-raster .kaffee:nth-of-type(3n+2) { grid-column: 2; }
.k4-raster .kaffee:nth-of-type(3n) { grid-column: 3; }
.k4-raster .k4-hinweis { grid-area: 3 / 4; }

/* Die Kachel als Knopf: Bild oben, Caption unten, Text-Ebene darüber.
   Kein grauer Grund — ein 1-px-Umriss, die Caption mit Trennlinie
   oben, wie die Erfassungskarten. */
.kaffee {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--label-aktiv, #d8d8cf);
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.kaffee .k4-bild {
  position: relative;
  display: block;
  aspect-ratio: 193.3 / 175;
  overflow: hidden;
}

.kaffee .k4-bild img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.kaffee .k4-caption {
  display: block;
  min-height: 25px;
  border-top: 1px solid var(--label-aktiv, #d8d8cf);
  padding: 4.5px 8px 0;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--ink-3);
}

/* Die Frostscheibe: Papier zu 40 % ueber dem Bild, dahinter 80 px Blur
   (BACKGROUND_BLUR r80 im Figma). Klappt von oben auf das Bild. Längere
   Fakten scrollen IN der Scheibe — die Kachel bleibt, was sie ist. */
.kaffee .kaffee-text {
  position: absolute;
  left: 0; right: 0; top: 0;
  aspect-ratio: 193.3 / 175;
  padding: 8px;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(250, 250, 248, 0.4);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--ink);
  transform-origin: 50% 0;
  scrollbar-width: thin;
  scrollbar-color: var(--label-aktiv, #d8d8cf) transparent;
  /* Sichtbarkeit haengt am aria-Zustand der Kachel, nicht an GSAP:
     ohne JavaScript (oder bei CDN-Ausfall) bleiben die Scheiben zu,
     und der Inhalt bleibt fuer Screenreader lesbar, sobald offen.
     transform dreht GSAP — die Transition fasst nur Opazitaet. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.kaffee[aria-expanded="true"] .kaffee-text {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .kaffee .kaffee-text { transition: none; }
}

.kaffee .kaffee-text::-webkit-scrollbar { width: 4px; }
.kaffee .kaffee-text::-webkit-scrollbar-thumb { background: var(--label-aktiv, #d8d8cf); }
.kaffee .kaffee-text::-webkit-scrollbar-track { background: transparent; }

.kaffee .kaffee-text span {
  display: block;
  margin: 0 0 8px;
}

.kaffee .kaffee-text span:last-child { margin-bottom: 0; }

/* Nachts verdunkelt die Frostscheibe mit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kaffee .kaffee-text { background: rgba(18, 18, 17, 0.45); }
}
:root[data-theme="dark"] .kaffee .kaffee-text { background: rgba(18, 18, 17, 0.45); }

/* Der Hinweis an der zehnten Stelle, unten bündig mit der Reihe. */
.k4 .subline.k4-hinweis {
  align-self: end;
  width: 193.3px;
  padding-bottom: 9px;
}

.k4 .k4-hinweis .lead {
  font-weight: 300; font-size: var(--p); line-height: var(--p-zeile);
  color: var(--ink-3); margin: 0;
}

/* Mittel: die vier Spalten duerfen schmaeler werden, das Raster haengt
   an der Titelachse. Klein: zwei Spalten, der Hinweis darunter. */
@media (max-width: 1279px) {
  .k4-raster {
    grid-template-columns: repeat(4, minmax(150px, 193.3px));
    margin-left: var(--achse);
  }
}

@media (max-width: 767px) {
  .k4-raster { grid-template-columns: repeat(2, 1fr); }
  .k4-raster .kaffee:nth-of-type(n) { grid-area: auto; }
  .k4 .subline.k4-hinweis {
    grid-area: auto / 1 / auto / -1;
    width: auto;
    max-width: 360px;
  }
}

/* Der Sprachumschalter oben LINKS: de · en — dieselbe Machart wie
   der Erscheinungsschalter rechts. */
.sprache {
  position: fixed;
  top: 9px; left: var(--rand, 40px);
  display: flex; gap: 20px;
  margin: 0;
  padding: 6px 8px;
  background: var(--paper);
  z-index: 10;
}

.sprache button {
  all: unset; cursor: pointer;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px; line-height: 14px;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
}

.sprache button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Trefferflaeche: die Knoepfe beider Schalter bleiben optisch fein,
   sollen sich aber wie eine Flaeche anfassen lassen, die ein Finger
   erwartet (44 px hoch; 24 px reichen fuer WCAG 2.5.8). Die Erweiterung
   liegt unsichtbar ueber der Umgebung — horizontal je 10 px, damit die
   Flaechen der 20 px auseinanderliegenden Knoepfe sich nicht ueberlappen. */
.sprache button,
.erscheinung button {
  position: relative;
}

.sprache button::after,
.erscheinung button::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

/* Tastatur-Fokus: ein Ring aus der Palette, nur bei Tastaturbedienung
   (:focus-visible loest beim Klicken nicht aus). Die Knopf-Familien mit
   all:unset brauchen die eigene Regel — ihr unset (0,1,1) fraesse dem
   globalen Pseudo (0,1,0) den Ring weg. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.sprache button:focus-visible,
.erscheinung button:focus-visible,
.modus button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ——— FAQ · Kapitel 06 nach den Frames 342:144357 / 342:144514 ————
   Abschnitt mit Digitzeile und Titel auf der Achse; jeder Eintrag
   ist eine Subline mit Trennlinie OBEN in voller Tinte. */
.faq {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  margin-top: 80px;
}

.faq .titel-k {
  position: static;
  margin: 0 0 0 var(--achse);
}

.faq-liste { margin: 0 0 0 var(--achse); }

.faq-liste details {
  border-top: 1px solid var(--ink);
  width: 100%;
  max-width: 620px;
}

.faq-liste summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 32px 16px 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  position: relative;
}

.faq-liste summary::-webkit-details-marker { display: none; }

.faq-liste summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 14px;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 18px;
  color: var(--ink-3);
}

.faq-liste details[open] summary::after { content: "–"; }

.faq-liste details p {
  margin: 0 0 20px;
  max-width: 60ch;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* ——— Was mitzählt · Abschnitt mit Subline-Linien ————————————— */
.werte-sektion {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  margin-top: 80px;
}

.werte-sektion .titel-k {
  position: static;
  margin: 0 0 0 var(--achse);
}

.werte-sektion .subline {
  margin: 0 0 0 var(--achse);
  padding-left: 8px;
  max-width: 620px;
}

.werte-sektion .werte { gap: 4px 48px; }

.werte-sektion .werte div {
  border-top: 1px solid var(--ink);
  padding-top: 8px;
}

/* Die Kopfzeile: eine feste Leiste über allem — links Burger und
   Sprachschalter, rechts der Erscheinungsschalter. Die Leiste selbst
   trifft keine Klicks (pointer-events), nur ihre Kinder. */
.kopfzeile {
  position: fixed;
  top: 9px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 var(--rand, 40px);
  z-index: 10;
  pointer-events: none;
}

.kopfzeile > * { pointer-events: auto; }

.kopf-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* In der Kopfzeile sind die Schalter keine eigenen fixed-Elemente
   mehr — die Leiste trägt sie. (Ohne .kopfzeile, etwa auf den
   Rechtsseiten, bleiben die fixed-Regeln weiter in Kraft.) */
.kopfzeile .sprache,
.kopfzeile .erscheinung {
  position: static;
}

/* Der Burger: drei Haarlinien auf Papier, dieselbe Chip-Machart wie
   die Schalter. Offen wird er zum ×, ohne ein Icon zu brauchen. */
.buerger {
  all: unset; cursor: pointer;
  display: flex; flex-direction: column;
  justify-content: center; gap: 3px;
  width: 40px; height: 28px;
  padding: 6px 8px;
  box-sizing: border-box;
  background: var(--paper);
  position: relative;
}

.buerger span {
  display: block;
  height: 1px; width: 100%;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.buerger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.buerger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.buerger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Das Menü: klappt unter die Leiste, CSS-zustandsgetrieben über die
   offene Kopfzeile ( dieselbe Mechanik wie die Frostscheiben). */
.inhalt {
  position: absolute;
  top: calc(100% + 8px);
  left: var(--rand, 40px);
  width: min(320px, calc(100vw - 2 * var(--rand, 40px)));
  box-sizing: border-box;
  padding: 16px 20px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: "Fira Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.kopfzeile.offen .inhalt {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.inhalt .inhalt-wort {
  display: block;
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 8px;
}

.inhalt a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.inhalt a:first-of-type { border-top: 1px solid var(--rule); }
.inhalt a:hover .nr,
.inhalt a:focus-visible .nr { color: var(--ink); }
.inhalt .nr {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-3);
  min-width: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .inhalt { transition: none; }
  .buerger span { transition: none; }
}

/* Die Einheit am Ziffernwerk: ein Messetikett, rechts unter dem
   letzten Werk — die Werte zählen Kilokalorien, nicht Milligramm. */
.werk-einheit {
  font-family: "Fira Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
  text-align: right;
  margin: 8px var(--achse) 0 0;
}

/* Mobil: innerhalb der Sektionen 20 px Abstand statt 40 — die
   Blöcke ruecken auf schmalen Schirmen enger zusammen. */
@media (max-width: 767px) {
  .k7,
  .k1, .k2, .k3, .k4,
  .faq, .werte-sektion {
    gap: 20px;
  }
}