/* Schriften liegen im Repo, damit keine Besucher-IP an einen fremden
   Server geht. Beides sind Variable Fonts, ein File deckt 400–600 ab. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/IBMPlexSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/IBMPlexSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/Newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/Newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #edefe8;
  --card: #fbfbf7;
  --ink: #14201a;
  --muted: #5d6a60;
  --pine: #2c6a4f;
  --rule: #c6cdc1;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --step: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
}

* { box-sizing: border-box; }

/* Die Regel des Browsers für [hidden] ist eine Herkunftsstufe tiefer als
   alles hier und verliert deshalb gegen jedes display aus dieser Datei.
   Ohne diese Zeile blieb ein per JavaScript verstecktes Feld sichtbar,
   sobald eine Layoutregel ihm ein display gab. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  padding: clamp(1.5rem, 1rem + 3vw, 4rem) var(--step) 3rem;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
}

/* Eine Regel für alle Verweise. Vorher stand dieselbe Zeile dreimal, je
   einmal für Formel, Hinweis und Fußzeile – und jeder Abschnitt, der
   später dazukam, brauchte eine vierte. Die Verweise im erklärenden
   Abschnitt und auf der Datenschutzseite waren deshalb browserblau
   geblieben. */
a { color: var(--pine); }

/* ---------- Kopfzeile ---------- */

.masthead {
  max-width: 62rem;
  margin: 0 auto clamp(2rem, 1rem + 3vw, 3.25rem);
}

/* Der Name steht als Zeile über der Überschrift, nicht als Überschrift:
   gesucht wird nach der Frage, nicht nach dem Namen. */
.wortmarke {
  margin: 0 0 0.5rem;
  color: var(--pine);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wortmarke span {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.wortmarke span::before {
  content: "· ";
}

.masthead h1 {
  margin: 0 0 0.6rem;
  max-width: 18ch;
  font: 500 clamp(1.9rem, 1.2rem + 3.6vw, 3.6rem)/1.06 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
  /* „bezahlen“?“ passt bei 320 px sonst nicht in eine Zeile. */
  hyphens: auto;
}

.standfirst {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* ---------- Raster ---------- */

.sheet {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  /* minmax(0, 1fr) überall, wo Spuren schrumpfen können müssen: 1fr ist
     minmax(auto, 1fr) und lässt die Spur nie unter ihren Mindestinhalt. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.texts { grid-column: 1 / -1; }

/* Über die ganze Breite wie die Textkarten. Ohne die Angabe landet der
   Abschnitt in einer Spalte, sobald die Belege daneben ausgeblendet sind –
   dann stand er auf halber Breite neben einem Loch. Die Zeilenlänge deckelt
   .prosa p, nicht die Spur. */
.erklaerung { grid-column: 1 / -1; }

.panel-title {
  margin: 0 0 1.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  font: 500 0.9375rem/1 var(--sans);
  color: var(--muted);
}

/* ---------- Eingabe ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 1.9rem);
}

.field + .field { margin-top: 1.5rem; }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.money-input {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--rule);
}

.money-input:focus-within {
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(44, 106, 79, 0.22);
}

.money-input input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.3rem 0.7rem 0.85rem;
  border: 0;
  background: none;
  color: inherit;
  font: 500 1.25rem/1.2 var(--serif);
  font-variant-numeric: tabular-nums;
}

.money-input input:focus { outline: none; }
.money-input input::placeholder { color: #9aa79d; font-weight: 400; }

.unit {
  padding-right: 0.85rem;
  font: 400 1.25rem/1.2 var(--serif);
  color: var(--muted);
}

.hint, .error {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.error { color: #9c2b16; }

.schalter {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  cursor: pointer;
}

.schalter input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--pine);
  cursor: pointer;
}

.schalter span { font-size: 0.9375rem; }

.formula {
  margin: 1.75rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--muted);
}

.formula b { color: var(--ink); font-weight: 600; }
.formula + .formula { margin-top: 0.8rem; padding-top: 0; border-top: 0; }

/* ---------- Combobox ---------- */

.combo { position: relative; }

.combo-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;   /* 44 px, das Mindestmaß für ein Touchziel */
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--rule);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.combo-toggle:hover { color: var(--pine); }
.combo[data-open="true"] .combo-toggle svg { transform: rotate(180deg); }

/* Der Rahmen sitzt am Behälter, nicht mehr an der Liste: über der Liste
   steht das Suchfeld, und beide sollen in einem Kasten stecken. */
.combo-popup {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--pine);
  box-shadow: 0 10px 24px rgba(20, 32, 26, 0.13);
}

.combo-suche {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  /* Nicht kleiner: Unter 16 px zoomt iOS Safari beim Hineintippen in das
     Feld und bleibt danach gezoomt. */
  font-size: 1rem;
}

.combo-suche:focus { outline: 2px solid var(--pine); outline-offset: -2px; }

/* Nur die Liste scrollt. Stünde das Suchfeld im Scrollbereich, schöbe
   scrollIntoView den markierten Eintrag darunter. */
.combo-list {
  margin: 0;
  padding: 0.3rem 0;
  max-height: 17rem;
  overflow-y: auto;
  list-style: none;
}

/* Steht immer im Baum und wechselt nur seinen Text: Ein Element, das von
   hidden auf sichtbar springt, liest kaum ein Screenreader vor. */
.combo-leer:empty { display: none; }

.combo-leer {
  margin: 0;
  padding: 0.75rem 0.85rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.combo-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 0.75rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

.combo-list .opt-name { grid-area: 1 / 1; }

.combo-list .opt-value { grid-area: 1 / 2; text-align: right; }

/* Zwei Zeilen unter dem Namen: erst die Sendung (Größe, Maß, Gewicht,
   Haftung), dann der Hinweis zur Buchung. */
.opt-sendung {
  grid-area: 2 / 1 / 3 / 3;
  font-size: 0.8125rem;
  color: var(--muted);
}

.opt-hinweis {
  grid-area: 3 / 1 / 4 / 3;
  font-size: 0.8125rem;
  color: var(--muted);
}

.opt-sendung:empty, .opt-hinweis:empty { display: none; }

.combo-list li[aria-selected="true"],
.combo-list li:hover {
  background: #e8f0ea;
}

.combo-list .opt-value {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--muted);
}

.combo-list li[aria-selected="true"] .opt-value { color: var(--pine); }

/* ---------- Beleg ---------- */

.receipt {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-bottom: 0;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 1.9rem);
  padding-bottom: clamp(1.6rem, 1rem + 2vw, 2.4rem);
}

.rows { display: grid; gap: 0.7rem; }

.row {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
}

.row-note {
  grid-column: 1 / -1;
  margin-top: -0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.row-note:empty { display: none; }

.row-dots {
  transform: translateY(-0.3em);
  border-bottom: 1px dotted var(--rule);
}

/* Ohne Betrag liefe die Punktlinie ins Leere. */
.row-ohne-betrag .row-dots { border-bottom: 0; }

.row-amount {
  font: 400 1.125rem/1.2 var(--serif);
  font-variant-numeric: tabular-nums;
}

.total {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.total-label { font-weight: 500; white-space: nowrap; }

.total-amount {
  font: 500 clamp(2.2rem, 1.4rem + 3vw, 3.25rem)/1 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--pine);
}

.seller {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.seller b { color: var(--ink); font-weight: 600; font-family: var(--serif); font-size: 1.0625rem; }

.receipt-actions { margin-top: 1.4rem; }

/* Seitenweite Aktionen stehen außerhalb der Belege: sie wirken auf den
   gesamten Stand, nicht auf eine einzelne Aufstellung. */
.weitergeben {
  grid-column: 1 / -1;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 1.9rem);
}

.weitergeben .hint { margin: 0 0 1rem; }

/* Flex statt Grid, damit ein ausgeblendeter Teilen-Knopf keine Lücke lässt. */
.neben-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.neben-reihe .neben { flex: 1 1 8rem; }

.copy-total { width: 100%; }

/* Abrisskante am Belegfuß: Dreiecke in Papierfarbe (--card, hier literal,
   weil eine CSS-Variable nicht in die Data-URI eingesetzt werden kann). */
.tear {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M0 0 L7 12 L14 0 Z' fill='%23fbfbf7' stroke='%23c6cdc1' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left top;
}

/* ---------- Textbausteine ---------- */

.texts {
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 52rem) {
  .sheet:not(.blatt) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 58rem) {
  .texts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.texts { padding-top: 0.5rem; }

.texts .panel-title { grid-column: 1 / -1; margin-bottom: 0; }

.text-card {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
}

.text-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.text-head h3 {
  margin: 0;
  font: 500 1.0625rem/1 var(--sans);
}

.text-head .copy { white-space: nowrap; }

.text-body {
  margin: 0;
  max-width: 46ch;
  white-space: pre-line;
  font: 400 1.0625rem/1.65 var(--serif);
  color: var(--ink);
}

.text-body[data-empty="true"] { color: var(--muted); }

/* ---------- Knöpfe ---------- */

.copy {
  padding: 0.55rem 1rem;
  border: 1px solid var(--pine);
  background: none;
  color: var(--pine);
  font: 500 0.9375rem/1.2 var(--sans);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.copy:hover { background: var(--pine); color: var(--card); }

.copy-total {
  padding: 0.8rem 1rem;
  background: var(--pine);
  color: var(--card);
  font-size: 1rem;
}

.copy-total:hover { background: #235640; }

.copy[data-done="true"],
.copy-total[data-done="true"] { background: var(--pine); color: var(--card); }

.copy:disabled {
  border-color: var(--rule);
  background: none;
  color: #9aa79d;
  cursor: not-allowed;
}

.neben {
  padding: 0.65rem 1rem;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font: 500 0.9375rem/1.2 var(--sans);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.neben:hover { border-color: var(--pine); color: var(--pine); }

.neben:disabled {
  color: #9aa79d;
  cursor: not-allowed;
}

.neben:disabled:hover { border-color: var(--rule); color: #9aa79d; }

.colophon code {
  font-family: var(--sans);
  font-size: 0.8125rem;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 0.05rem 0.3rem;
}

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}

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

.colophon {
  max-width: 62rem;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Kein Zeilendeckel: der Fuß ist Kleingedrucktes, das man überfliegt, kein
   Fließtext, den man Zeile für Zeile liest. Auf 62ch gedeckelt stand er auf
   halber Breite und ließ rechts daneben ein Loch. */
.colophon p { margin: 0 0 0.4rem; }

.marken {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.mit-zeichen {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.github-zeichen { flex: 0 0 auto; }

/* ---------- Rückmeldung ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  padding: 0.6rem 1.1rem;
  background: var(--ink);
  color: var(--card);
  font-size: 0.9375rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.toast[data-show="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Vergleichsmodus ---------- */

/* Die beiden Pole des Balkens. Geprüft mit dem Palettenvalidator:
   ΔE 13,2 (deutan), 18,7 (tritan), 25,5 (normal), Kontrast über 3:1.
   Das Seiten-Pine --pine fällt als Markenfarbe durch den Chroma-Floor,
   es liest sich in der Fläche als Grau. */
:root {
  --pol-ka: #1b7f51;
  --pol-direkt: #7b3b86;
  /* Der Rotstift. Heller als das Rostrot der Fehlermeldungen (#9c2b16),
     damit er als Anstreichung gelesen wird und nicht als Warnung. */
  --kringel: #d6372b;
}

.schalter-vergleich {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.breakeven { grid-column: 1 / -1; }

@media (min-width: 52rem) {
  /* Nur das Eingabefeld-Panel, nicht jedes: `:not(.prosa)` hält den
     erklärenden Abschnitt heraus. Ohne den Ausschluss wurden auch seine
     Absätze zu Rasterzellen – Überschrift und zugehöriger Text standen
     dann in verschiedenen Spalten, aber nur bei eingeschaltetem Vergleich. */
  .sheet[data-vergleich="an"] > .panel:not(.prosa) {
    grid-column: 1 / -1;
    display: grid;
    /* minmax(0, 1fr), nicht 1fr: 1fr ist minmax(auto, 1fr) und lässt die
       Spur nie unter ihren Mindestinhalt schrumpfen. Die Combobox und die
       Hinweistexte trieben die Spalten damit über den Rand hinaus. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2rem;
    align-items: start;
  }

  .sheet[data-vergleich="an"] > .panel > .panel-title,
  .sheet[data-vergleich="an"] > .panel > .schalter-vergleich,
  .sheet[data-vergleich="an"] > .panel > .hint,
  .sheet[data-vergleich="an"] > .panel > .formula {
    grid-column: 1 / -1;
  }

  .sheet[data-vergleich="an"] > .panel > .field + .field { margin-top: 0; }

  /* Die Eingabefelder sollen nebeneinander auf einer Höhe stehen, auch wenn
     eine Beschriftung zweizeilig wird. subgrid teilt jedem Feld dieselben
     drei Zeilen des Panels zu – Beschriftung, Eingabe, Fuß – statt jede
     Spalte für sich stapeln zu lassen. */
  .sheet[data-vergleich="an"] > .panel > .field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    /* Die eine Spalte muss ausdrücklich schrumpfbar sein. Implizit wäre sie
       auto und damit so breit wie ihr breitester Inhalt - die Kinder ragten
       dann aus dem Feld heraus. */
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-width: 0;
  }

  /* Oben ausrichten, nicht unten: so beginnt jede Beschriftung auf
     derselben Zeile. Die Eingaben fluchten trotzdem, weil subgrid die
     Zeile so hoch macht wie die höchste Beschriftung. */
  .sheet[data-vergleich="an"] > .panel > .field > label { align-self: start; }
}

/* ---------- Zahlweg ---------- */

.zahlweg, .traeger {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.zahlweg legend, .traeger legend {
  padding: 0 0 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
}

.zahlweg label, .traeger label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
  cursor: pointer;
}

.zahlweg input, .traeger input {
  accent-color: var(--pine);
  cursor: pointer;
}

.zahlweg .zw-name { font-size: 0.9375rem; }

.traeger {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.warnung {
  margin: 0.5rem 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid #9c2b16;
  font-size: 0.8125rem;
  color: #9c2b16;
}

/* ---------- Fließtext (Datenschutzseite) ---------- */

/* Der Rechner besteht aus Feldern und Beträgen, diese Seite aus Sätzen.
   Ein eigener Block, damit die Absatzmaße nicht in den Rechner wirken. */

/* Eine Spalte, auch auf breiten Schirmen: das zweispaltige Raster des
   Rechners setzt die Abschnitte sonst nebeneinander, und ein Text, den man
   von links nach rechts und wieder zurück lesen muss, ist keiner. */
.blatt, .masthead.blatt-kopf {
  max-width: 46rem;
}

.blatt { grid-template-columns: minmax(0, 1fr); }

.prosa p, .prosa ul { margin: 0 0 1rem; max-width: 68ch; }

.prosa p:last-child, .prosa ul:last-child { margin-bottom: 0; }

.prosa h3 {
  margin: 1.6rem 0 0.5rem;
  font: 500 1.0625rem/1.3 var(--sans);
}

.prosa h3:first-of-type { margin-top: 0; }

.prosa ul { padding-left: 1.2rem; }

.prosa li { margin-bottom: 0.4rem; }

.prosa code {
  font-size: 0.875em;
  word-break: break-word;
}

/* ---------- Beleg-Ergänzungen ---------- */

.behaelt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.behaelt b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Was unter dem Strich steht: die Gebühr, die der Verkäufer trägt. */
.fussnoten {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.fussnoten:empty { display: none; }

.schutz {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.schutz::before {
  content: '○ ';
  font-size: 0.9em;
}

.schutz-ja { color: var(--pol-ka); }
.schutz-ja::before { content: '✓ '; }

/* ---------- Breakeven ---------- */

.breakeven {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 1.9rem);
}

.skala-koepfe {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-wrap: balance;
}

.skala-kopf-links { color: var(--pol-ka); }
.skala-kopf-rechts { color: var(--pol-direkt); }

/* Der Kringel umfasst die Beschriftung, die bei schmalen Schirmen zweizeilig
   umbricht - deshalb spannt sich das SVG über den Kasten statt sein
   Seitenverhältnis zu halten. Damit die Verzerrung nicht den Strich trifft,
   bleibt er über vector-effect gleich dick. Der Zustand hängt an
   data-guenstiger auf dem Elternteil, das JavaScript setzt sonst nichts. */
.skala-kopf {
  position: relative;
  /* Luft für den Kringel. Die waagerechte nimmt die Polsterung des Feldes
     wieder heraus, damit die Beschriftungen stehen bleiben, wo sie standen;
     senkrecht ist darunter Platz. */
  padding: 0.45rem 0.7rem;
  margin: -0.45rem -0.7rem;
}

/* Breite und Höhe ausdrücklich: Ein SVG ist ein ersetztes Element mit
   eigenem Seitenverhältnis und zöge sich aus dem viewBox eine Höhe, statt
   sie aus inset zu nehmen - der Kringel stand dann unter der Beschriftung. */
.kringel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: visible;
  color: var(--kringel);
  pointer-events: none;
}

.skala-koepfe[data-guenstiger="links"] .skala-kopf-links .kringel,
.skala-koepfe[data-guenstiger="rechts"] .skala-kopf-rechts .kringel {
  display: block;
}

/* Luft nach oben, damit die Marke nicht in die Kopfzeilen ragt. */
.skala-bahn {
  position: relative;
  display: flex;
  height: 14px;
  margin-top: 1.7rem;
  background: var(--paper);
}

.skala-links { background: var(--pol-ka); }
.skala-rechts { background: var(--pol-direkt); flex: 1 1 auto; }

.skala-marke {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  margin-left: -1.5px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--card);   /* Ring, damit die Marke auf der Grenze sichtbar bleibt */
}

/* Zwei Beschriftungen über der Bahn, untereinander statt nebeneinander:
   die Schwelle oben, der aktuelle Preis unten an seiner Marke. Nebeneinander
   überlappten sie sich, sobald beide Werte nah beieinander lagen; unter der
   Bahn traf die Schwelle bei kleinen Werten auf „0,00 €“.

   Ohne Schwelle - der Direktkauf ist dann durchweg günstiger oder durchweg
   teurer - bleibt die obere Zeile weg statt leer zu stehen. */
.skala-marken {
  position: relative;
  height: 1.5rem;
}

.skala-marken[data-schwelle="ja"] { height: 3rem; }

.skala-schwelle, .skala-marke-wert {
  position: absolute;
  translate: -50% 0;
  white-space: nowrap;
}

/* Am Rand der Skala hinge die mittig gesetzte Beschriftung heraus. */
.skala-marken [data-seite="links"] { left: 0; translate: 0 0; }
.skala-marken [data-seite="rechts"] { right: 0; translate: 0 0; }

.skala-schwelle {
  top: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}

.skala-marke-wert {
  bottom: 0;
  font-family: var(--serif);
  font-size: 0.9375rem;
}

.skala-fuss {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.befund {
  margin: 1.2rem 0 0;
  max-width: 62ch;
}

@media (max-width: 32rem) {
  /* 0,8125rem sind 13 px und damit so klein wie der kleinste Text
     sonst auf der Seite. Darunter wird es auf dem Handy mühsam. */
  /* .skala-fuss steht schon in der Grundregel auf diesem Wert. */
  .skala-koepfe { font-size: 0.8125rem; }
  .skala-marke-wert { font-size: 0.875rem; }
}

.befund b { font-family: var(--serif); font-size: 1.0625rem; }

#befund-hinweis { margin-top: 0.8rem; }

/* ---------- JSON-Ansicht ---------- */

.json-ansicht {
  grid-column: 1 / -1;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 1.9rem);
}

.json-ansicht pre {
  margin: 0;
  overflow-x: auto;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
}


/* ---------- Fingerbedienung ---------- */

/* Gebunden an den Zeiger, nicht an die Fensterbreite: entscheidend ist,
   ob jemand mit dem Finger trifft, nicht wie breit sein Fenster ist.
   44 px ist das Mindestmaß, unter dem Treffer unzuverlässig werden. */
@media (pointer: coarse) {
  /* .schalter ist schon zentriert, die beiden anderen stehen auf
     baseline und brauchen die Angabe. */
  .schalter { min-height: 44px; }

  .zahlweg label,
  .traeger label {
    min-height: 44px;
    align-items: center;
  }

  .copy,
  .neben {
    min-height: 44px;
  }

  .combo-list li {
    min-height: 44px;
    align-content: center;
  }
}