/* Zählora — Website
 *
 * Eine Datei, kein Aufbauschritt, keine externe Ressource. Keine Schrift von
 * einem fremden Server, kein Analysewerkzeug, kein eingebettetes Video.
 *
 * **Das ist die Pointe und keine Sparsamkeit.** Ohne fremde Anfragen entstehen
 * keine Cookies und keine Übertragung an Dritte — und damit braucht diese
 * Seite kein Zustimmungsfenster. Die App verspricht „Keine Daten erfasst";
 * eine Website, die als Erstes ein Cookie-Fenster aufklappt, widerlegt dieses
 * Versprechen auf dem ersten Bildschirm.
 *
 * Die Farben sind dieselben wie in der App: Bernstein auf warmem Grund. Die
 * Kategorie ist blau und grau; ein warmer Ton fällt darin auf.
 */

:root {
  --ground:   #FBFAF8;
  --raised:   #F3F0EA;
  --surface:  #FFFFFF;
  --ink:      #17150F;
  --ink-2:    #57524A;
  --ink-3:    #8B8578;
  --line:     #E7E3DA;
  --line-2:   #D8D3C7;
  --tint:     #B06E08;
  --tint-ink: #8A5A08;
  --on-tint:  #FFFFFF;
  --good:     #2F7F52;

  --w-page:  1080px;
  --w-text:  62ch;
  --r-s:     10px;
  --r-m:     16px;
  --r-l:     26px;

  --shadow: 0 1px 2px rgba(23, 21, 15, .04), 0 10px 30px -12px rgba(23, 21, 15, .14);
  --shadow-lift: 0 2px 4px rgba(23, 21, 15, .05), 0 30px 60px -24px rgba(23, 21, 15, .30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:   #0F0E0C;
    --raised:   #171512;
    --surface:  #1B1917;
    --ink:      #F5F2EC;
    --ink-2:    #B3ADA1;
    --ink-3:    #837D71;
    --line:     #2B2822;
    --line-2:   #3A362E;
    --tint:     #E0A040;
    --tint-ink: #E8C070;
    --on-tint:  #1B1408;
    --good:     #5CBF85;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-lift: 0 30px 60px -24px rgba(0, 0, 0, .85);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Deutsch besteht aus langen zusammengesetzten Wörtern. Ohne diese zwei
     Zeilen steht „Datenschutz-Grundverordnung" auf einem schmalen Telefon
     über den Rand hinaus — sichtbar erst dort, wo es niemand ausprobiert. */
  overflow-wrap: break-word;
  /* Mit Präfix: Safari trennt vor iOS 17 nur mit `-webkit-hyphens`. Ohne
     die Zeile blieb „Zählerstandsübermittlung" auf einem älteren iPhone
     ungetrennt und wurde nur hart umbrochen. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

img { max-width: 100%; height: auto; display: block; }

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

:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Für Tastatur und Vorlesehilfen: der erste Halt auf jeder Seite.
 *
 * **Nach oben aus dem Bild, nicht nach links.** Das übliche `left: -9999px`
 * macht das Dokument um 9999 px breit; der Browser klammert das zwar weg,
 * aber jede Messung des horizontalen Überlaufs schlägt danach an — und genau
 * das ist beim ersten Lauf dieser Prüfung passiert. Oben liegt er ebenso
 * unsichtbar und kostet keine Breite. */
.sprung {
  position: absolute;
  left: 12px;
  top: 0;
  /* Um die eigene Höhe nach oben, nicht um feste 70 Pixel: Bei großer
     Textgröße bricht der Verweis in zwei Zeilen, wird 78 Pixel hoch und
     schaute unten als weißer Streifen über die Kopfleiste. */
  transform: translateY(calc(-100% - 8px));
  background: var(--surface);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--r-s);
  box-shadow: var(--shadow);
  z-index: 10;
}
.sprung:focus { top: 12px; transform: none; }

.bahn {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: 22px;
}

/* ---------------------------------------------------------------- Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Deckend zuerst: `color-mix()` kennt Safari erst ab iOS 16.2. Ohne diese
     Zeile war die Leiste auf einem iPhone 7 oder 8 durchsichtig, und der
     Text lief sichtbar darunter durch. */
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
}
.marke svg { width: 22px; height: 22px; display: block; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.kopf nav a { color: var(--ink-2); text-decoration: none; padding-block: 6px; }
.kopf nav a:hover { color: var(--ink); }
/* Wo man ist, steht in der Leiste. Ohne das sieht jede Unterseite gleich aus. */
.kopf nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Auf einem schmalen Telefon rutscht die Navigation in die zweite Zeile,
   statt aus dem Bild zu laufen. Sie zu verstecken wäre der bequemere Weg —
   aber auf den Rechtsseiten ist sie der einzige Weg zurück. */
@media (max-width: 560px) {
  .kopf-innen {
    flex-wrap: wrap;
    height: auto;
    padding-block: 10px 11px;
    gap: 6px 16px;
  }
  .kopf nav { gap: 0 18px; font-size: 14.5px; width: 100%; }
}

/* -------------------------------------------------------------- Anfang */

.anfang {
  padding: clamp(48px, 9vw, 104px) 0 clamp(36px, 6vw, 72px);
  position: relative;
  /* Der Schein unten ist breiter als die Seite. `clip` schneidet ihn ab,
     ohne einen Bildlaufbereich zu erzeugen — sonst wächst das Dokument nach
     rechts, und zwar unsichtbar: Kein einziges Element steht über, nur das
     erzeugte Pseudo-Element. Genau daran hat die Suche zuerst vorbeigemessen. */
  overflow: clip;
}
/* Ein warmer Schein hinter dem Kopf statt eines Farbblocks: Er gibt der
   Seite Tiefe, ohne dass irgendwo eine Kante entsteht, die man später bei
   jedem Abschnitt wiederholen müsste. */
.anfang::before {
  content: "";
  position: absolute;
  /* Einzeln statt `inset`: Das kürzere Wort kennt Safari erst ab iOS 14.5. */
  top: -20%; right: 0; bottom: auto; left: 50%;
  translate: -50% 0;
  width: min(900px, 120%);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(176, 110, 8, .13), transparent 70%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 13%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.anfang-gitter {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 860px) {
  .anfang-gitter { grid-template-columns: 1.05fr 0.95fr; }
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 6.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 640;
  text-wrap: balance;
}
.vorspann {
  margin: 0 0 30px;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
  text-wrap: pretty;
}

.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 560;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease;
}
.knopf:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .knopf:hover { transform: none; } }

.knopf-voll { background: var(--tint); color: var(--on-tint); }
.knopf-voll:hover { background: var(--tint-ink); background: color-mix(in srgb, var(--tint) 88%, var(--ink)); }
.knopf-rand { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.knopf-rand:hover { border-color: var(--ink-3); }

/* --------------------------------------------------- Abzeichen App Store
   Die Form, die jeder kennt: schwarz, abgerundet, Apfel links, zwei Zeilen
   rechts. Sie ist hier nachgebaut und nicht von Apple geladen — die Seite
   holt grundsätzlich nichts von fremden Servern, und das gilt auch für ein
   Bild, das bequem wäre. Vor der Veröffentlichung im Store gehört an diese
   Stelle das offizielle Abzeichen aus Apples Marketing-Werkzeugen. */
.apfel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px 9px 14px;
  border-radius: 11px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  text-decoration: none;
  line-height: 1.05;
  transition: transform .12s ease, opacity .12s ease;
}
.apfel svg { width: 25px; height: 25px; fill: currentColor; flex: none; }
.apfel-text { display: flex; flex-direction: column; }
.apfel small { font-size: 12px; letter-spacing: .01em; opacity: .92; }
.apfel b { font-size: 19px; font-weight: 550; letter-spacing: -0.01em; }
a.apfel:hover { transform: translateY(-1px); }

/* Wartezustand: dieselbe Form, aber ruhiger — eine Karte, kein schwarzes
   Abzeichen. Sie soll lesbar sein und nicht nach kaputt aussehen.

   **Hier stand `var(--bg)`, und die Variable gibt es nicht.** Die Datei kennt
   `--ground`, `--raised` und `--surface`. Ein `var()` auf einen unbekannten
   Namen ist keine Fehlermeldung, sondern ein Rückfall auf den geerbten Wert —
   im Dunkeln war das fast dasselbe Weiß wie der Grund. Ergebnis auf dem
   Telefon des Gründers: ein leerer grauer Kasten, kein Text, kein Apfel.

   Deshalb jetzt nur Variablen, die es gibt, und keine Deckkraft: Die dämpft
   auch die Schrift. */
.apfel-wartet {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--line-2);
  cursor: default;
}

@media (prefers-color-scheme: dark) {
  .apfel { background: #fff; color: #000; border-color: #fff; }
}

.notiz {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

/* Die drei Zusagen direkt unter den Knöpfen. Sie stehen dort, weil sie für
   viele der eigentliche Grund sind, diese App und nicht eine andere zu
   nehmen — weiter unten liest sie nur, wer ohnehin schon überzeugt ist. */
.zusagen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  font-weight: 520;
  color: var(--ink-2);
}
.zusagen li { display: flex; align-items: center; gap: 7px; }
.zusagen li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--tint);
  /* Häkchen als Maske statt als Zeichen: Ein „✓" aus der Schrift sitzt je
     nach Gerät anders auf der Grundlinie. */
  -webkit-mask: no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
          mask: no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- Geräte */

/* **Das Bild füllt den Rahmen, und der Rahmen ist ein Block.** `<picture>` ist
   von sich aus ein Inline-Element, und das Bild trägt `width="460"`. War die
   Spalte breiter als 460, blieb rechts ein weißer Streifen im Rahmen stehen,
   auf jedem Telefon der Seite. */
.geraet {
  display: block;
  border-radius: 34px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}
.geraet img { width: 100%; }
/* Neben einem Text ein Telefon in Telefongröße, nicht über die halbe Seite.
   In voller Spaltenbreite war es auf dem Desktop über tausend Punkte hoch;
   der Text daneben stand verloren in der Mitte, und die Seite war zehn
   Bildschirme lang. */
.paar > .geraet { max-width: 340px; width: 100%; justify-self: center; }
.geraet-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.geraet-reihe .geraet:nth-child(2) { transform: translateY(-14px); }
@media (max-width: 700px) {
  .geraet-reihe { grid-template-columns: 1fr 1fr; }
  .geraet-reihe > *:nth-child(3) { display: none; }
  .geraet-reihe .geraet:nth-child(2) { transform: none; }
}

/* ------------------------------------------------------------ Abschnitt */

section { padding: clamp(48px, 7vw, 92px) 0; }
.abschnitt-hell { background: var(--raised); }
/* **Der eine dunkle Abschnitt: dass wir deine Zählerstände nicht haben.**
   Vom Gründer am 26. September: „bringe noch stärker als Marketing raus,
   dass wir keine Daten der Zählerstände tracken oder besitzen". Bis dahin
   stand der Abschnitt als siebter von neun weit unten und sah aus wie die
   anderen. Jetzt steht er an zweiter Stelle und als einziger dunkel, in
   beiden Farbschemata. Die Farben werden hier neu gesetzt, damit alles darin
   (Karten, Überschriften, Zeichen) von selbst stimmt. */
.abschnitt-dunkel {
  --ground:  #1C1812;
  --raised:  #231E16;
  --surface: #262017;
  --ink:     #F5F2EC;
  --ink-2:   #CFC8BA;
  --ink-3:   #A39C8E;
  --line:    #3A332A;
  --line-2:  #4A4236;
  --tint:    #E0A040;
  --tint-ink: #E8C070;
  --shadow:  0 1px 2px rgba(0, 0, 0, .4);
  background: var(--ground);
  color: var(--ink);
}
.abschnitt-dunkel a { color: var(--tint-ink); }

h2 {
  margin: 0 0 14px;
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 620;
  text-wrap: balance;
}
h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.012em;
  font-weight: 600;
}
p { margin: 0 0 16px; max-width: var(--w-text); text-wrap: pretty; }
.blass { color: var(--ink-2); }

.marke-klein {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tint-ink);
}

.karten {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
}
.karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 24px;
  box-shadow: var(--shadow);
}
.karte p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
/* Text unter einem Kartenraster braucht Luft. Ohne den Abstand klebte der
   Absatz unter „Deine Daten" an der letzten Kartenreihe. */
.karten + p, .karten + .blass { margin-top: 34px; }

/* Eine Karte, die woanders hinführt, ist als Ganzes der Verweis. Nur die
   Überschrift anklickbar zu machen heißt, auf dem Telefon eine Zeile zu
   treffen statt einer Fläche. */
a.karte-verweis {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
a.karte-verweis:hover { border-color: var(--line-2); transform: translateY(-2px); }
a.karte-verweis:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.karte-verweis:hover { transform: none; } }
a.karte-verweis b { font-size: 17px; color: var(--ink); }
a.karte-verweis .weiter { margin-top: auto; padding-top: 6px; color: var(--tint-ink); font-weight: 600; font-size: 15px; }
.art {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tint-ink);
  background: var(--raised);
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
}

/* Der Pfad über einer Ratgeberseite. Google zeigt ihn in der Trefferliste,
   wenn er auf der Seite steht und im Markup dasselbe sagt; beides prüft
   `check-website.mjs`. */
.pfad { font-size: 14px; color: var(--ink-3); margin: 0 0 18px; }
.pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pfad li + li::before { content: "›"; margin-right: 8px; color: var(--ink-3); }
.pfad a { color: var(--ink-2); text-decoration: none; }
.pfad a:hover { color: var(--ink); text-decoration: underline; }

.weiterlesen { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); max-width: var(--w-text); }
.weiterlesen h2 { margin-top: 0; }
.weiterlesen .karten { margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.karte-zeichen {
  width: 34px; height: 34px;
  margin-bottom: 14px;
  color: var(--tint);
}

/* -------------------------------------------------------- Was neu ist */

/* Eine Zeitleiste, keine Liste: Der senkrechte Strich mit den Punkten daran
   zeigt auf einen Blick, dass hier regelmäßig etwas dazukommt. Das Datum
   steht deshalb vor der Überschrift und nicht klein darunter. */
.neuerungen {
  list-style: none;
  margin: 34px 0 0;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--line);
}
.neuerungen > li {
  position: relative;
  padding-bottom: 34px;
}
.neuerungen > li:last-child { padding-bottom: 0; }

/* Der Punkt sitzt auf dem Strich, nicht daneben: halbe Punktbreite nach
   links, plus die halbe Strichstärke. */
.neuerungen > li::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 5px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--tint);
  border: 3px solid var(--ground);
}
/* Der oberste Eintrag ist der neueste und bekommt einen Ring, damit das Auge
   dort anfängt. */
.neuerungen > li:first-child::before {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 22%, transparent);
}

.neuerung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.neuerung-kopf time {
  font-size: 14px;
  font-weight: 600;
  color: var(--tint-ink);
}
.fassung {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.neuerungen p { margin: 0 0 10px; color: var(--ink-2); font-size: 15.5px; }
.neuerungen p:last-child { margin-bottom: 0; }

.neuerungen-fuss { margin-top: 30px; font-size: 15.5px; }

.paar {
  display: grid;
  /* `minmax(0, 1fr)` statt der stillen Spalte `auto`: Die wird mindestens so
     breit wie ihr breitestes Wort. Mit der Textgröße 200 % in Safari lief die
     Startseite dadurch 27 Pixel über den Rand. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 820px) {
  .paar { grid-template-columns: 1fr 1fr; }
  .paar-gedreht > *:first-child { order: 2; }
}

.liste { margin: 0; padding: 0; list-style: none; }
.liste li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--ink-2);
  max-width: var(--w-text);
}
.liste li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tint);
}

/* --------------------------------------------------------------- Preis */

.preis-tafel {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  margin-top: 30px;
}
.preis {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 22px;
}
.preis-frei { border-color: var(--tint); }
/* Das Bündel ist der Kauf, der sich lohnt — sechs gleich aussehende Karten
   überlassen dem Leser die Rechnerei. Ein Rand statt einer Farbfläche: Es
   soll auffallen, nicht schreien. */
.preis-bundle { border-color: var(--tint); border-width: 2px; padding: 21px; }
.preis b { display: block; font-size: 15px; margin-bottom: 3px; }
.preis .betrag {
  font-size: 25px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
  display: block;
}
.preis p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------- Fragen */

.frage {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  max-width: var(--w-text);
}
.frage:last-of-type { border-bottom: 1px solid var(--line); }
.frage h3 { margin-bottom: 6px; }
.frage p { margin: 0; color: var(--ink-2); }

/* -------------------------------------------------------------- Rechtes */

.rechtstext { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.rechtstext h1 { font-size: clamp(31px, 4.4vw, 42px); margin-bottom: 26px; }
.rechtstext h2 { font-size: 21px; margin: 40px 0 10px; letter-spacing: -0.012em; }
.rechtstext p, .rechtstext li { color: var(--ink-2); }
.rechtstext ul { padding-left: 20px; max-width: var(--w-text); }
.rechtstext li { margin-bottom: 8px; }
.rechtstext .stand { color: var(--ink-3); font-size: 14px; }

.anschrift {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 22px 24px;
  max-width: var(--w-text);
  font-style: normal;
  line-height: 1.75;
}

/* ----------------------------------------------------------------- Fuß */

.fuss {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  color: var(--ink-3);
  font-size: 14.5px;
}
.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 20px; }
.fuss a { color: var(--ink-2); text-decoration: none; }
.fuss a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------- Stand-Tabelle */

/* Eine Tabelle und keine Kartenreihe: Die Zeilen sind gleichartig, und das
   Auge soll die Spalte „Stand" hinunterlaufen können. Oben die Zukunft, unten
   der Anfang, damit die Richtung der Arbeit sichtbar ist. */
.stand-tabelle {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 15.5px;
}
.stand-tabelle th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.stand-tabelle td {
  padding: 18px 20px;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
.stand-tabelle tbody tr:first-child td { border-top: 0; }
.stand-tabelle td:first-child { width: 150px; white-space: nowrap; }
.stand-tabelle td:last-child {
  width: 110px;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stand-tabelle td b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.stand-tabelle td span:not(.stand) { color: var(--ink-2); }
.stand-demnaechst td { background: var(--raised); }

.stand {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--surface);
}
.stand-test  { color: var(--tint-ink); border-color: var(--tint); }
.stand-laden { color: var(--good); border-color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.stand-bald  { color: var(--ink-2); border-style: dashed; }

/* Schmal steht jede Zeile als Block: Stand und Datum oben, Text darunter.
   Drei Spalten auf 320 Punkten lassen dem Text eine Handbreit. */
@media (max-width: 620px) {
  .stand-tabelle thead { display: none; }
  /* Als Tabelle bliebe sie so breit wie ihr Inhalt, auch wenn die Zeilen
     Raster sind. */
  .stand-tabelle, .stand-tabelle tbody { display: block; }
  .stand-tabelle td:first-child { white-space: normal; }
  .stand-tabelle tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 16px 18px;
    border-top: 1px solid var(--line);
  }
  .stand-tabelle tbody tr:first-child { border-top: 0; }
  .stand-tabelle td { padding: 0; border: 0; width: auto !important; }
  .stand-tabelle td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .stand-demnaechst { background: var(--raised); }
  .stand-demnaechst td { background: none; }
}

/* -------------------------------------------------------------- Rechner

   **Die Rechner rechnen im Browser, und nichts verlässt ihn.** Kein
   Formular wird abgeschickt, nichts gespeichert. Das ist dieselbe Pointe wie
   oben: Eine Seite, die „wir sehen nichts" sagt, schickt auch keine
   Eingaben weg.

   Die Felder sind so groß wie auf dem Telefon nötig. Wer mit der Rechnung in
   der einen Hand tippt, trifft sonst das Feld daneben. */

.rechner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 22px 24px 24px;
  max-width: var(--w-text);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.rechner-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px 18px;
}
.rechner label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  font-size: 15px;
  color: var(--ink-2);
  /* Oben anfangen. Sonst verteilt das Raster die Höhe eines zweizeiligen
     Hinweises nebenan auf die Zeilen, und die Felder einer Reihe stehen
     versetzt. */
  align-content: start;
}
.rechner label small { color: var(--ink-3); font-size: 13.5px; }
.rechner input, .rechner select {
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  padding: 11px 12px;
  min-height: 48px;
  width: 100%;
  /* Ein Feld hat von sich aus eine Breite für etwa zwanzig Zeichen und gibt
     sie ohne diese Zeile nicht her. */
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
/* Safari zeichnet das Innere eines Datumsfelds mit eigener Breite und lässt es
   über das Feld hinausragen: bei 300 % Textgröße 142 Pixel Inhalt in einem
   101 Pixel breiten Feld, und die Seite lief seitlich über. Chromium schneidet
   es ab, deshalb fiel es erst in der Prüfung mit WebKit auf. */
.rechner input[type="date"] {
  overflow: hidden;
}
.rechner input:focus-visible, .rechner select:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
}
.rechner-ergebnis {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-variant-numeric: tabular-nums;
}
.rechner-ergebnis strong { font-size: 26px; color: var(--ink); display: block; line-height: 1.3; }
.rechner-ergebnis p { margin: 6px 0 0; }

/* ----------------------------------------------------------- Protokoll */

.protokoll {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 15px;
}
.protokoll th, .protokoll td {
  border: 1px solid var(--line-2);
  padding: 10px 10px;
  text-align: left;
  vertical-align: top;
}
.protokoll th { background: var(--raised); font-weight: 600; color: var(--ink); }
/* Links die Beschriftung, rechts Platz zum Schreiben. Ohne feste Breite
   nimmt sich die Beschriftung die ganze Zeile. */
.protokoll th[scope="row"] { width: 30%; }
/* In der Zählertabelle wird in Nummer und Stand geschrieben, also bekommen
   die beiden den Platz und nicht die Beschriftung. */
.protokoll-zaehler th:nth-child(1) { width: 30%; }
.protokoll-zaehler th:nth-child(2), .protokoll-zaehler th:nth-child(3) { width: 29%; }
.protokoll-zaehler th:nth-child(4) { width: 12%; }
.protokoll td { height: 44px; }
.protokoll-rahmen { overflow-x: auto; max-width: 100%; }
.unterschriften {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 28px;
  max-width: 760px;
  margin-top: 26px;
}
.unterschriften div { border-top: 1px solid var(--ink-3); padding-top: 6px; font-size: 14px; color: var(--ink-3); }

/* Gedruckt wird nur das Protokoll. Kopf, Fuß, Erklärtext und Knöpfe bleiben
   auf dem Schirm; auf dem Blatt stehen die Tabelle und die Unterschriften,
   schwarz auf weiß, auch wenn der Schirm gerade dunkel ist. */
@media print {
  .kopf, .fuss, .sprung, .nicht-drucken, .pfad, .weiterlesen { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .rechtstext { padding: 0; }
  .druckbereich { display: block !important; }
  .protokoll, .protokoll th, .protokoll td { background: #fff; color: #000; border-color: #000; }
  .protokoll td { height: 34pt; }
  .unterschriften div { border-color: #000; color: #000; }
}

/* ------------------------------------------------------------- Kacheln

   **Ein Ergebnis ist eine Zahl mit einem Namen, kein Satz.** Vom Gründer am
   26. September: „auf einen Blick mit Daten erkennbar, was es bedeutet, mit
   klaren Benennungen". Bis dahin stand das Ergebnis der Rechner als zwei,
   drei Sätze da, und die Zahl, um die es ging, steckte mittendrin.

   Oben der Name, darunter groß die Zahl, darunter klein, worauf sie sich
   bezieht. Gerechnete Werte tragen ein ≈ vor der Zahl, gemessene nicht. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 10px;
}
.kachel {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 12px 14px;
  display: grid;
  gap: 2px;
  align-content: start;
  font-variant-numeric: tabular-nums;
}
.kachel-name { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.kachel-wert { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
.kachel-zusatz { font-size: 13px; color: var(--ink-2); }
.kachel-haupt {
  border-color: var(--tint);
  border-color: color-mix(in srgb, var(--tint) 45%, var(--line));
  background: var(--raised);
  background: color-mix(in srgb, var(--tint) 7%, var(--ground));
}
.kachel-gut .kachel-wert { color: var(--good); }
.kachel-achtung .kachel-wert { color: var(--tint-ink); }
.rechner-hinweis { margin: 0; color: var(--ink-2); font-size: 15px; }


/* ------------------------------------------------- Kleine und alte Geräte

   Gemessen am 26. September über 16 Gerätegrößen, vom iPhone SE der ersten
   Generation (320 × 568) bis zum iPad Pro quer (1366 × 1024):

   - **Die Kopfleiste stand auf schmalen iPhones 124 Punkte hoch**, weil die
     fünf Einträge in zwei Zeilen umbrechen, und blieb beim Scrollen stehen.
     Auf einem iPhone SE ist das ein Fünftel des Bildschirms. Dort scrollt sie
     jetzt mit weg; oben auf jeder Seite steht sie trotzdem.
   - **Verweise im Fuß waren 23 Punkte hoch**, die Mailadresse 19. Apple
     empfiehlt für einen Finger 44. Auf Geräten mit Fingerbedienung bekommen
     sie die Höhe; mit Maus bleibt das Bild, wie es war. */
@media (max-width: 560px) {
  .kopf { position: static; }
}
@media (pointer: coarse) {
  .kopf nav a, .fuss nav a, .pfad a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .kopf nav a { padding-block: 0; }
  /* Auch der letzte Eintrag im Pfad, der kein Verweis ist, bekommt die Höhe.
     Sonst stand er im Querformat eine halbe Zeile über den anderen. */
  .pfad ol { align-items: center; }
  .pfad li { display: inline-flex; align-items: center; min-height: 44px; }
  a[href^="mailto:"] {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* -------------------------------------------------- Sehr schmale Anzeige

   **Textgröße 300 % in Safari.** Über „aA" lässt sich jede Seite bis auf das
   Dreifache vergrößern, und Safari bricht sie dann um, als wäre der
   Bildschirm ein Drittel so breit: auf einem iPhone SE 125 Pixel. Wer das
   einstellt, braucht es. Dann gehen die Abstände zurück, Knöpfe und Schilder
   dürfen umbrechen, und der Rechner verliert seinen Rahmen, damit die Zahlen
   in die Kacheln passen. Eine Zahl bricht auch hier nicht um. */
@media (max-width: 260px) {
  .bahn { padding-inline: 12px; }
  .knopf { padding: 12px 16px; text-align: center; justify-content: center; max-width: 100%; }
  .rechner input, .rechner select { font-size: 16px; padding-inline: 8px; }
  .art { white-space: normal; }
  .rechner { padding: 0; border: 0; background: none; }
  .kachel { padding: 8px 10px; }
  .kachel-wert { font-size: 18px; }
  .karte { padding: 16px 14px; }
  .rechner select { padding-inline: 8px 4px; }
}