/* Der Bierdeckel-Rechner (/rechner) — Variante B „Der Deckel bleibt liegen".
   Farben ausschließlich über die --w1-*-Tokens aus welle1.css.
   Maße und Typo: docs/welle1/extrakt-rechner.md (360-px-Zeichnung).
   CSP: keine Inline-Styles — JS setzt nur Custom Properties (--r-fuell).
   Animiert werden ausschließlich transform und opacity. */

.r-page {
  /* Werte aus dem Extrakt, für die es kein --w1-Token gibt (Abschnitt 2.6). */
  --r-schatten-knopf: 0 1px 3px rgba(0, 0, 0, 0.25);
  --r-ring-ampel: 0 0 0 5px rgba(0, 0, 0, 0.06);
  /* Füllstand der Reglerspur, von rechner.js je Regler gesetzt. */
  --r-fuell: 0%;
  --r-akzent: var(--w1-terra);

  background: var(--w1-creme);
  color: var(--w1-tinte);
  font-family: var(--sans);
}

.r-page [hidden] { display: none !important; }

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

/* --r-kopf-top und --r-kopf-hoehe misst rechner.js: die Kopfleiste der Website
   bricht auf schmalen Geräten um, ihre Höhe steht in keiner Konstante. */
.r-kopf {
  position: sticky;
  top: var(--r-kopf-top, var(--header-h, 62px));
  z-index: 20;
  background: var(--w1-sand);
  border-bottom: 2px solid var(--w1-regler-spur);
}

.r-kopf-innen { padding: 16px 20px 14px; }

.r-kopf-zeile1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Terracotta auf Sand ergibt nur 3,88:1 — für 10-px-Versalien zu wenig.
   --w1-terra-dark auf --w1-sand: 4,94:1 (AA ab 4,5:1). Größe und Sperrung
   bleiben unverändert. */
.r-marke {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w1-terra-dark);
}

/* Rest-Pille: zeigt immer den aktuellen Rest des Biers. */
.r-rest {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--w1-gruen);
  color: var(--w1-creme);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.r-rest[data-zustand="minus"] { background: var(--w1-terra); }
.r-rest-label { font-weight: 400; }

/* Drei Pillen, immer nur eine sichtbar: Der Kopf zeigt die Zahl des Schritts,
   in dem man gerade steht. Schritt 4 zeigt keine — dort wird nicht mehr
   gerechnet. Ohne JavaScript fehlt data-schritt, dann bleibt die erste stehen. */
.r-kopfwert { display: none; }
.r-page:not([data-schritt]) .r-kopfwert--bier,
.r-page[data-schritt="1"] .r-kopfwert--bier,
.r-page[data-schritt="2"] .r-kopfwert--monat,
.r-page[data-schritt="3"] .r-kopfwert--ampel { display: inline-flex; }

/* Dieselben drei Farben wie die Ampel selbst (rechner.css weiter unten). */
.r-kopfwert--ampel[data-zustand="gruen"] { background: var(--w1-gruen); color: var(--w1-creme); }
.r-kopfwert--ampel[data-zustand="gelb"] { background: var(--w1-ampel-gelb); color: var(--w1-tinte); }
.r-kopfwert--ampel[data-zustand="rot"] { background: var(--w1-terra); color: var(--w1-creme); }

.r-kopf-mini {
  display: none;
  gap: 14px;
  align-items: center;
  animation: r-mini-ein 0.35s ease-out both;
}
.r-page[data-schritt="2"] .r-kopf-mini,
.r-page[data-schritt="3"] .r-kopf-mini,
.r-page[data-schritt="4"] .r-kopf-mini { display: flex; }

@keyframes r-mini-ein {
  from { transform: scale(0.35); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.r-mini-deckel { flex: none; width: 86px; display: block; }
.r-deckel-svg { display: block; width: 100%; height: auto; }

.r-kopf-regler { flex: 1 1 auto; min-width: 0; }
.r-kopf-regler .r-regler-label { font-size: 12px; }
.r-kopf-regler .r-skala { display: none; }

/* Fortschritt: vier Pillen + Zählung, doppelt kodiert. */
.r-fortschritt { margin-top: 12px; }

.r-pillen {
  display: flex;
  gap: 6px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.r-pille {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: var(--w1-step-dot);
}
.r-pille[aria-current="step"], .r-pille[data-erledigt="ja"] { background: var(--w1-terra); }

/* Gleicher Fall wie .r-marke: 11-px-Versalien auf Sand brauchen 4,5:1. */
.r-schritt-label {
  margin: 6px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w1-terra-dark);
}

/* ---------------------------------------------------------------- Inhalt */

.r-inhalt { padding: 22px 20px 32px; }

.r-schritt[hidden] { display: none; }

.r-titel {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 12px;
  /* Beim Schrittwechsel wandert der Fokus hierher — die Überschrift darf dabei
     nicht unter dem klebenden Kopf verschwinden. */
  scroll-margin-top: calc(var(--r-kopf-top, 62px) + var(--r-kopf-hoehe, 150px) + 14px);
}
.r-titel--gross { font-size: 30px; }
.r-titel:focus-visible { outline: 2px solid var(--w1-terra); outline-offset: 4px; }

.r-einleitung {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w1-text-grau);
}

/* ---------------------------------------------------------------- Regler */

.r-regler { margin-bottom: 14px; }
.r-regler--preis { --r-akzent: var(--w1-terra); }
.r-regler--gaeste, .r-regler--tage, .r-regler--bon { --r-akzent: var(--w1-gruen); }

.r-regler-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.r-regler-label {
  font-size: 13px;
  color: var(--w1-grau);
  line-height: 1.3;
}
.r-regler-eingabe { display: inline-flex; align-items: center; gap: 4px; flex: none; }

.r-zahl {
  width: 4.6em;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--w1-regler-spur);
  border-radius: 8px;
  background: var(--w1-papier);
  color: var(--w1-tinte);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}
.r-zahl:focus-visible { outline: 2px solid var(--r-akzent); outline-offset: 1px; }
.r-einheit { font-size: 14px; font-weight: 700; color: var(--w1-tinte); }

.r-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.r-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--r-akzent) 0 var(--r-fuell),
    var(--w1-regler-spur) var(--r-fuell) 100%);
}
.r-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--r-akzent) 0 var(--r-fuell),
    var(--w1-regler-spur) var(--r-fuell) 100%);
}
.r-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  border: 3px solid var(--r-akzent);
  background: var(--w1-creme);
  box-shadow: var(--r-schatten-knopf);
}
.r-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--r-akzent);
  background: var(--w1-creme);
  box-shadow: var(--r-schatten-knopf);
}
.r-range:focus-visible { outline: 2px solid var(--r-akzent); outline-offset: 2px; border-radius: 6px; }

.r-skala {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--w1-grau);
  margin-top: -4px;
}
.r-regler-hinweis {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--w1-grau);
}
/* Der Euro-Betrag je Gast — abgeleitet aus Menge mal Preis, nicht eingegeben.
   Etwas kräftiger als der Hinweis darüber: Er ist die Zahl, die man kennt. */
.r-regler-abgeleitet {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--w1-tinte);
}

/* ---------------------------------------------------------------- Schritt 1 */

.r-deckel-buehne { display: flex; justify-content: center; margin: 4px 0 6px; }

.r-deckel-gross {
  display: block;
  width: 190px;
  transition: transform 0.22s ease-in, opacity 0.22s ease-in;
  animation: r-deckel-ein 0.4s ease-out both;
}
.r-page.r-deckel-weg .r-deckel-gross {
  transform: scale(0.28) translateY(-60%);
  opacity: 0;
}
@keyframes r-deckel-ein {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Preis-Chips: fallen gestaffelt vom Deckel herunter. */
.r-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  list-style: none;
  margin: 10px 0 18px;
  padding: 0;
}
.r-chip {
  display: inline-flex;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--w1-creme);
  background: var(--w1-grau);
}
.r-chip-wert { font-weight: 700; }
.r-chip[data-posten="einkauf"] { background: var(--w1-terra-dark); }
.r-chip[data-posten="personal"] { background: var(--w1-gruen); }
.r-chip[data-posten="pacht"] { background: var(--w1-terra); }
.r-chip[data-posten="sonstiges"] { background: var(--w1-sand); color: var(--w1-tinte); }
.r-chip:nth-child(1) { transform: rotate(-3deg); }
.r-chip:nth-child(2) { transform: rotate(2deg); }
.r-chip:nth-child(3) { transform: rotate(-2deg); }
.r-chip:nth-child(4) { transform: rotate(3deg); }
.r-chip:nth-child(5) { transform: rotate(-1deg); }
.r-chip:nth-child(6) { transform: rotate(2deg); }

/* Keine :not()-Ketten: der Ausgangszustand ist eine eigene Klasse (r-chips--oben),
   die rechner.js eine Bildfolge lang setzt. Gleiche Spezifität wie die Drehungen
   oben — sie gewinnt allein durch die spätere Position im Stylesheet. */
.r-chips--bereit .r-chip {
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s ease-out;
}
.r-chips--oben .r-chip {
  opacity: 0;
  transform: translateY(-30px) scale(0.9);
}
.r-chips--bereit .r-chip:nth-child(1) { transition-delay: 0.02s; }
.r-chips--bereit .r-chip:nth-child(2) { transition-delay: 0.07s; }
.r-chips--bereit .r-chip:nth-child(3) { transition-delay: 0.12s; }
.r-chips--bereit .r-chip:nth-child(4) { transition-delay: 0.17s; }
.r-chips--bereit .r-chip:nth-child(5) { transition-delay: 0.22s; }
.r-chips--bereit .r-chip:nth-child(6) { transition-delay: 0.27s; }

.r-ergebnis { margin: 16px 0 8px; text-align: center; }
.r-satz {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 6px;
}
.r-ergebnis[data-zustand="plus"] .r-satz span { color: var(--w1-gruen); }
.r-ergebnis[data-zustand="minus"] .r-satz span { color: var(--w1-terra-dark); }
.r-satz-klein {
  margin: 0;
  font-size: 13px;
  color: var(--w1-grau);
}
/* Der Preis, ab dem überhaupt etwas übrig bleibt — steht unter dem Ergebnissatz
   und verschwindet, wenn der Kern keine Zahl liefert. */
.r-break-even {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--w1-text-grau);
}

.r-mikro {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--w1-grau);
}

/* Die Brücke zu Schritt 2: der Personal-Posten ist der Lohn der Wirtin. */
.r-ueberleitung {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--w1-regler-spur);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- Schritt 2 */

.r-aufklapper {
  border: 1px dashed var(--w1-grau);
  border-radius: 8px;
  padding: 0 12px;
  margin: 4px 0 16px;
}
.r-aufklapper > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--w1-grau);
  cursor: pointer;
  list-style: none;
}
.r-aufklapper > summary::-webkit-details-marker { display: none; }
/* Eigene Aufklapp-Marke, weil display:flex den Standardpfeil entfernt. */
.r-aufklapper > summary::before {
  content: "\25B8";
  display: inline-block;
  transition: transform 0.2s ease;
}
.r-aufklapper[open] > summary::before { transform: rotate(90deg); }
.r-aufklapper > summary:focus-visible { outline: 2px solid var(--w1-terra); outline-offset: 2px; }
.r-aufklapper-inhalt { padding-bottom: 4px; }

.r-rechnung {
  background: var(--w1-sand-sekundaer);
  border-radius: 12px;
  padding: 14px 16px 12px;
}
.r-rechnung-titel {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w1-grau);
}
.r-rechnung-liste { list-style: none; margin: 0; padding: 0; }
.r-rechnung-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--w1-regler-spur);
  color: var(--w1-text-grau);
}
.r-rechnung-zeile:last-child { border-bottom: 0; }
.r-rechnung-zeile[data-zeile="umsatz"] { color: var(--w1-tinte); font-weight: 700; }
.r-rechnung-wert { white-space: nowrap; }
.r-rechnung-fuss {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--w1-grau);
}

.r-residuum {
  background: var(--w1-peach);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}
.r-residuum-titel {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.3;
}
.r-residuum-text {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--w1-text-grau);
}
.r-residuum-zahl {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--w1-terra-dark);
}
.r-residuum[data-zustand="plus"] .r-residuum-zahl { color: var(--w1-tinte); }
/* Greift der Größen-Hinweis, führt er — der Betrag tritt in die Nebenrolle. */
.r-residuum[data-zustand="zu_gross"] .r-residuum-zahl {
  color: var(--w1-text-grau);
  font-size: 16px;
}
.r-residuum-stunde {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--w1-text-grau);
}

.r-hinweis {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--w1-terra);
  background: var(--w1-sand);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Führt die Anzeige, statt ihr zu folgen: steht über dem Betrag, nicht darunter. */
.r-hinweis--fuehrend { margin: 0 0 12px; }

/* ---------------------------------------------------------------- Schritt 3 */

.r-ampel {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--w1-sand);
  border-radius: 12px;
  padding: 16px;
}
.r-ampel-punkt {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--r-ring-ampel);
  background: var(--w1-ampel-gelb);
  color: var(--w1-tinte);
}
.r-ampel[data-zustand="gruen"] .r-ampel-punkt { background: var(--w1-gruen); color: var(--w1-creme); }
.r-ampel[data-zustand="gelb"] .r-ampel-punkt { background: var(--w1-ampel-gelb); color: var(--w1-tinte); }
.r-ampel[data-zustand="rot"] .r-ampel-punkt { background: var(--w1-terra); color: var(--w1-creme); }

.r-ampel-symbol { display: none; width: 24px; height: 24px; }
.r-ampel[data-zustand="gruen"] .r-ampel-symbol--gruen,
.r-ampel[data-zustand="gelb"] .r-ampel-symbol--gelb,
.r-ampel[data-zustand="rot"] .r-ampel-symbol--rot { display: block; }

.r-ampel-name {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w1-text-grau);
}
.r-ampel-satz {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.r-kacheln { display: flex; gap: 10px; margin: 12px 0; }
.r-kachel {
  flex: 1 1 0;
  background: var(--w1-papier);
  border: 1px solid var(--w1-sand);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.r-kachel-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w1-grau);
}
.r-kachel-zahl {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
}
.r-kachel-einheit { margin: 2px 0 0; font-size: 11px; color: var(--w1-text-grau); }
.r-kachel-hinweis { margin: 4px 0 0; font-size: 11px; color: var(--w1-grau); }

/* Was fehlen würde, um auf Grün zu kommen. Steht direkt unter der Ampel und
   trägt die Kernaussage, wenn der Standardfall nicht grün ist. */
.r-schwelle {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--w1-terra-dark);
}

.r-erklaerung {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.r-faustregel {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--w1-grau);
}
.r-wege { margin: 0; font-size: 13px; }
.r-wege a { color: var(--w1-terra); }

/* ---------------------------------------------------------------- Schritt 4 */

.r-page[data-schritt="4"] .r-inhalt {
  background: var(--w1-tinte);
  color: var(--w1-dunkel-text);
}
.r-schritt--dunkel { text-align: center; }
.r-schritt--dunkel .r-titel { color: var(--w1-peach); font-size: 22px; }

.r-flip {
  width: 170px;
  height: 170px;
  margin: 6px auto 18px;
  perspective: 900px;
}
.r-flip-innen {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.r-page[data-flip="an"] .r-flip-innen { transform: rotateY(180deg); }
.r-flip-seite {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  place-items: center;
}
.r-flip-seite svg { width: 100%; height: auto; display: block; }
.r-flip-hinten { transform: rotateY(180deg); }

.r-headline {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  margin: 0 0 12px;
  color: var(--w1-creme);
}
.r-dunkel-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--w1-dunkel-text-soft);
}
.r-schluss {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  margin: 0 0 18px;
  color: var(--w1-peach);
}
.r-schritt--dunkel .w1-fn-btn { color: var(--w1-peach); }
/* Der Terracotta-Fokusring aus welle1.css schafft auf dem dunklen Grund nur
   2,81:1 — hier wie bei den übrigen Knöpfen im dunklen Schritt auf Peach
   wechseln (11,02:1). */
.r-schritt--dunkel .w1-fn-btn:focus-visible::after { outline-color: var(--w1-peach); }

/* Auf den Preis-Chips schafft Terracotta keinen Kontrast (1,1–1,3:1 auf Grau,
   Terra und Grün). Creme wie der Chip-Text (4,6–5,8:1); der helle Sand-Chip
   („Sonstiges") braucht stattdessen Terra-Dark (4,9:1). Fokusring jeweils mit. */
.r-chip .w1-fn-btn { color: var(--w1-creme); }
.r-chip .w1-fn-btn:focus-visible::after { outline-color: var(--w1-creme); }
.r-chip[data-posten="sonstiges"] .w1-fn-btn { color: var(--w1-terra-dark); }
.r-chip[data-posten="sonstiges"] .w1-fn-btn:focus-visible::after { outline-color: var(--w1-terra-dark); }
/* Personal-Chip: [2] und [Annahme] stehen nebeneinander — das 5-px-Flex-Gap
   reicht nicht, die 24-px-Trefferflächen (welle1.css ::after) überlappen sonst.
   Dasselbe gilt seit dem belegten Wirtslohn für die „Nötig"-Kachel in Schritt 3. */
.r-chip .w1-fn + .w1-fn,
.r-kachel-hinweis .w1-fn + .w1-fn { margin-left: 8px; }

/* ---------------------------------------------------------------- Navigation */

.r-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.r-schritt[data-schritt="1"] .r-btn-zurueck { visibility: hidden; }

.r-btn-zurueck {
  min-height: 44px;
  padding: 10px 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--w1-grau);
  cursor: pointer;
}
.r-btn-weiter {
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--w1-terra);
  color: var(--w1-creme);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.r-btn-weiter:hover { background: var(--w1-terra-dark); }
.r-btn-sekundaer {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid var(--w1-grau);
  border-radius: 10px;
  background: none;
  color: var(--w1-dunkel-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.r-btn-sekundaer:hover { border-color: var(--w1-peach); }

.r-btn-zurueck:focus-visible,
.r-btn-weiter:focus-visible,
.r-btn-sekundaer:focus-visible {
  outline: 2px solid var(--w1-terra);
  outline-offset: 2px;
}
.r-schritt--dunkel .r-btn-zurueck { color: var(--w1-dunkel-text-soft); }
.r-schritt--dunkel .r-btn-zurueck:focus-visible,
.r-btn-sekundaer:focus-visible { outline-color: var(--w1-peach); }

/* ---------------------------------------------------------------- Abschluss */

/* Ohne JavaScript (kein data-schritt) bleibt der Abschluss sichtbar. */
.r-page[data-schritt] .r-abschluss { display: none; }
.r-page[data-schritt="4"] .r-abschluss { display: block; }
.r-abschluss { padding-top: 8px; }
#r-teilen:focus-visible { outline: 2px solid var(--w1-peach); outline-offset: 4px; }

/* Die CTA-Karten bleiben hell — ihre Schrift darf die helle Textfarbe des
   dunklen Abschnitts nicht erben. */
.r-page[data-schritt="4"] .w1-cta { color: var(--w1-tinte); }
.r-page[data-schritt="4"] .w1-share-status { color: var(--w1-dunkel-text-soft); }
.r-page[data-schritt="4"] .w1-methodik-hinweis { color: var(--w1-dunkel-text-soft); }
.r-page[data-schritt="4"] .w1-methodik-hinweis a { color: var(--w1-peach); }
.r-page[data-schritt="4"] .w1-share h2 { color: var(--w1-creme); }

/* ---------------------------------------------------------------- 600–899 px */

@media (min-width: 600px) {
  .r-kopf-innen, .r-inhalt { max-width: 560px; margin: 0 auto; }
  .r-inhalt { padding: 28px 20px 40px; }
  .r-titel { font-size: 30px; }
  .r-einleitung { font-size: 15.5px; }
  .r-satz { font-size: 21px; }
  .r-rechnung-zeile { font-size: 14px; }
  .r-ampel-satz { font-size: 16px; }
  .r-kachel-zahl { font-size: 32px; }
  .r-headline { font-size: 23px; }
  .r-dunkel-text { font-size: 15px; }
  .r-deckel-gross { width: 220px; }
}

/* ---------------------------------------------------------------- ab 900 px */

@media (min-width: 900px) {
  .r-layout {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 40px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    align-items: start;
  }
  .r-kopf {
    position: sticky;
    top: calc(var(--header-h, 62px) + 24px);
    background: none;
    border-bottom: 0;
    padding-top: 32px;
  }
  .r-kopf-innen {
    max-width: none;
    background: var(--w1-sand);
    border-radius: 14px;
    padding: 20px;
  }
  .r-kopf-zeile1 { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Der Kopf ist ab hier die linke Spalte: großer Deckel, Regler mit Skala. */
  .r-kopf-mini { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .r-mini-deckel { width: 260px; margin: 0 auto; }
  .r-kopf-regler .r-skala { display: flex; }
  .r-kopf-regler .r-regler-label { font-size: 14px; }
  .r-fortschritt { margin-top: 18px; }

  .r-inhalt { max-width: none; padding: 32px 0 56px; }
  .r-deckel-buehne, .r-schritt1-regler { display: none; }
  .r-titel { font-size: 34px; scroll-margin-top: calc(var(--r-kopf-top, 62px) + 16px); }
  .r-ergebnis { text-align: left; }
  .r-chips { justify-content: flex-start; }
  .r-schritt--dunkel { text-align: left; }
  .r-flip { margin-left: 0; }
  .r-btn-sekundaer { width: auto; }
  .r-page[data-schritt="4"] .r-inhalt { padding: 32px 28px 56px; border-radius: 14px; }
}

/* ---------------------------------------------------------------- ab 1200 px */

@media (min-width: 1200px) {
  .r-layout { gap: 56px; padding: 0 64px; }
  .r-inhalt { padding: 48px 0 72px; }
  .r-page[data-schritt="4"] .r-inhalt { padding: 48px 40px 72px; }
  /* Keine :not()-Ausnahmen: Grundregel niedrig, Sonderfall als eigene Klasse. */
  .r-titel { font-size: 28px; }
  .r-schritt--dunkel .r-titel { font-size: 26px; }
  .r-titel--gross { font-size: 52px; line-height: 1.08; }
  .r-satz { font-size: 26px; line-height: 1.35; }
  .r-einleitung { font-size: 16px; }
  .r-headline { font-size: 28px; line-height: 1.35; }
  .r-kachel-zahl { font-size: 34px; }
  .r-mikro { font-size: 14px; }
}

/* ---------------------------------------------------------------- Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {
  /* Chips erscheinen ohne Bewegung (rechner.js setzt r-chips--oben dann gar nicht),
     der Deckel wechselt hart, der Flip wird zum Umschalten. */
  .r-page.r-deckel-weg .r-deckel-gross { opacity: 1; transform: none; }
  .r-kopf-mini, .r-deckel-gross { animation: none; }
  .r-flip-innen { transition: none; }
}