/* Lirodo – Website. Keine fremden Schriften oder Dienste; JavaScript nur für den Rechner auf der Preisseite (rechner.js).

   Aussehen wie die Prüfoberfläche (docs/OBERFLAECHE.md, „Aussehen“): sehr seriös, ruhig, vertraut wie eine
   Warenwirtschaft. Dunkelblau nur für die Kopfzeile und EINEN Haupt-Knopf je Seite (dazu Verweise im Text).
   Tabellen und feine Linien statt Kacheln, 4 px Rundung, keine Schatten, keine Verläufe, keine Animationen.
   Status immer mit Farbe, Zeichen und Wort – dieselben Zeichen wie in der Prüfoberfläche.

   Schrift: Fließtext in der Standardschrift des Geräts, wie in der Prüfoberfläche. Überschriften in einer
   klassischen Serifenschrift, die schon auf dem Gerät ist (Charter auf Mac und iPhone, Sitka oder Cambria
   unter Windows, sonst Georgia). Geladen wird keine Schrift.

   Umbau auf allen Breiten (18.10.2026, gemeinsame Regeln aller Oberflächen): Rahmen bis 1400 px, Abstände nur aus der Reihe
   4/8/12/16/24/32 (große Abschnitte 48/64/96), Klickflächen mindestens 24 px hoch, am Handy Tabellen als Blöcke statt gequetschter
   Spalten, Kopfzeile am Handy mit einer rollenden Zeile für die Bereiche, dunkle Darstellung wie die Belegprüfung. */

:root {
  color-scheme: light;
  --blau: #1B3A5C;       /* Hauptfarbe: Kopfzeile und Haupt-Knopf (immer mit weißer Schrift) */
  --blau-tief: #13304D;  /* Haupt-Knopf, wenn die Maus darauf steht */
  --link: #1B3A5C;       /* Verweise, Fokusrahmen, Zeichen zum Aufklappen (dunkel: ein helles Blau) */
  --hell: #E8EEF4;
  --text: #1A2530;
  --flaeche: #F4F5F7;    /* Bühne, Seitenkopf, Anmeldung – die Fläche hinter den Kästen */
  --karte: #fff;         /* Seite, Tabellen, Kästen, Knöpfe, Eingabefelder */
  --linie: #C9D1DA;
  --grau: #56616D;       /* leise Schrift; Rand von Knöpfen und Eingabefeldern */
  --gruen: #1E6B3A;      /* Status wie in der Prüfoberfläche */
  --gelb: #8A5A00;
  --rot: #A4262C;
  --rund: 4px;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --randspalte: 200px;   /* linke Spalte mit dem Namen des Abschnitts */
  --spaltenabstand: 48px;
}
/* Dunkle Darstellung (seit 18.10.2026): dieselben Farben wie die Belegprüfung (oberflaeche/src/stil.css), damit lirodo.de und die
   Belegprüfung wie ein Produkt aussehen. Sie folgt der Einstellung des Geräts; einen Schalter gibt es auf der Website nicht (kein
   Skript) – die Angabe data-darstellung am html-Element ist dieselbe wie in der Belegprüfung und bleibt frei für später.
   Die Werte stehen zweimal (CSS kann sie nicht teilen). Alle Farben nur über die Variablen – kein festes #fff mehr außer der
   weißen Schrift auf Dunkelblau. */
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    --blau: #24476E; --blau-tief: #2C5680; --link: #9CC1EA; --hell: #26313D; --text: #E3E8EE; --flaeche: #14191F; --karte: #1C232B;
    --linie: #36414D; --gruen: #6CC48A; --gelb: #E0B04F; --rot: #F08A8A; --grau: #A0ACB8;
    color-scheme: dark;
  }
}
:root[data-darstellung="dunkel"] {
  --blau: #24476E; --blau-tief: #2C5680; --link: #9CC1EA; --hell: #26313D; --text: #E3E8EE; --flaeche: #14191F; --karte: #1C232B;
  --linie: #36414D; --gruen: #6CC48A; --gelb: #E0B04F; --rot: #F08A8A; --grau: #A0ACB8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Silbentrennung (wo eingeschaltet) nur für lange Wörter: „Warenwirtschaft“ ja, „Belege“ nein –
   unter 361 Pixeln reicht der Platz nur mit der normalen Trennung. Safari kennt hyphenate-limit-chars nicht und trennte „dar-über“
   und „Ant-wort“ – deshalb zusätzlich die alten WebKit-Angaben: mindestens 4 Buchstaben vor und nach dem Strich (18.10.2026). */
@media (min-width: 361px) {
  html { hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
}
body { margin: 0; background: var(--karte); color: var(--text); font: 17px/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--text); line-height: 1.15; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
h1 em, h2 em { font-style: italic; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p, dd, li { text-wrap: pretty; }
p, figure, dl, dd { margin: 0; }
/* „hidden“ gilt immer, auch bei Elementen mit eigener display-Angabe (z. B. .status) */
[hidden] { display: none !important; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
th { font-weight: 600; }
thead th { background: var(--hell); font-size: .9rem; }

/* Rahmen bis 1400 px (seit 18.10.2026, vorher 1160): am PC bleibt weniger Rand leer, breiter wäre schlechter zu lesen –
   Fließtexte halten ihre em-Grenzen (.einleitung, .abschnitt-kopf p, .fragen) */
.rahmen { width: min(1400px, 100% - 64px); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.klein { font-size: .9rem; color: var(--grau); }
.abstand-oben { margin-top: 24px; }
.springen {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  padding: 8px 12px; background: var(--karte); color: var(--link); border: 1px solid var(--link); border-radius: var(--rund);
}
.springen:focus { top: 12px; }

/* ---------- Kopfzeile: dunkelblau wie in der Prüfoberfläche ---------- */
.kopf { background: var(--blau); color: #fff; }
.kopf-innen { display: flex; align-items: center; gap: 8px 32px; min-height: 64px; }
.marke {
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; font: 400 1.55rem/1 var(--serif); letter-spacing: .01em;
}
.marke svg { width: 30px; height: 30px; flex: none; }
.hauptnavi { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto; }
/* Innenabstand 8 px, Zeilenhöhe 1,25: Klickfläche rund 36 px (vorher 23 px, 18.10.2026) */
.hauptnavi a { padding: 8px 0; color: #fff; text-decoration: none; font-size: .95rem; line-height: 1.25; border-bottom: 1px solid transparent; }
.hauptnavi a:hover, .hauptnavi a[aria-current] { border-bottom-color: #fff; }
.kopf-knopf {
  padding: 8px 12px; color: #fff; text-decoration: none; white-space: nowrap;
  font-size: .95rem; line-height: 1.25; font-weight: 600; border: 1px solid #fff; border-radius: var(--rund);
}
.kopf-knopf:hover, .kopf-knopf[aria-current] { background: #fff; color: var(--blau); }
.kopf :focus-visible { outline-color: #fff; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; font: 600 1rem/1.25 var(--sans); color: var(--text); text-align: center; text-decoration: none;
  background: var(--karte); border: 1px solid var(--grau); border-radius: var(--rund); cursor: pointer;
}
.knopf:hover { background: var(--hell); }
.knopf.haupt { color: #fff; background: var(--blau); border-color: var(--blau); }
.knopf.haupt:hover { background: var(--blau-tief); border-color: var(--blau-tief); }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Status: Farbe + Zeichen + Wort ---------- */
/* Zeichen und Wort im normalen Textfluss (seit 13.10.2026 – im Flex-Kasten stand das Wort in Safari einige Pixel höher als der Text
   daneben). Das Zeichen ist 1em groß und mit vertical-align auf die Mitte der Schrift gesetzt. */
.status { display: inline; font-weight: 600; white-space: nowrap; }
.status svg {
  display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -0.15em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.status-ok { color: var(--gruen); }
.status-unsicher { color: var(--gelb); }
.status-fehler { color: var(--rot); }
.regelnr { font-weight: 600; color: var(--text); }
.nebenzeile { display: block; margin-top: 2px; font-size: .88rem; font-weight: 400; color: var(--grau); }

/* ---------- Bühne: Überschrift, darunter der Bestelleingang als Tabelle ---------- */
.buehne { padding: 64px 0 48px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
/* Dachzeile: was Lirodo ist – die Überschrift direkt darunter sagt, was es tut */
.dachzeile { margin-bottom: 16px; font-size: .95rem; font-weight: 600; color: var(--grau); }
/* Überschrift links, Einleitung und Knöpfe rechts – auch der Seitenkopf der Preisseite (seit 18.10.2026) */
.buehne-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.buehne h1 { font-size: clamp(2.5rem, calc(5vw - .25rem), 3.75rem); line-height: 1.05; letter-spacing: -.012em; }
.buehne h1 em, .seitenkopf h1 em { display: block; }
.einleitung { font-size: 1.15rem; line-height: 1.55; color: var(--grau); max-width: 36em; }

.eingang { margin-top: 48px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.eingang figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--linie);
}
.eingang figcaption b { font-weight: 600; }
.eingang figcaption span { font-size: .85rem; color: var(--grau); }
.eingang td { padding-block: 12px; }
.eingang .zeit { width: 1%; white-space: nowrap; color: var(--grau); }
.eingang .firma { font-weight: 600; }
.eingang .betrag { width: 1%; text-align: right; white-space: nowrap; }
.eingang tbody tr:last-child td { border-bottom: 0; }
.eingang tfoot td { padding-block: 8px; font-size: .88rem; color: var(--grau); background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 0; }

.kurzdaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 32px; }
.kurzdaten div { padding-top: 16px; border-top: 1px solid var(--linie); }
.kurzdaten dt { font-size: .85rem; color: var(--grau); }
.kurzdaten dd { margin-top: 2px; font-weight: 600; hyphens: auto; -webkit-hyphens: auto; }
/* Sicherheit: vier Merkmale in einer Zeile, darunter die Punkte */
.kurzdaten.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 32px; }

/* ---------- Abschnitte: links der Name, rechts Überschrift und Inhalt ---------- */
.abschnitt { padding-top: 96px; }
.abschnitt-kopf {
  display: grid; grid-template-columns: var(--randspalte) minmax(0, 1fr); column-gap: var(--spaltenabstand);
  border-top: 1px solid var(--linie);
}
/* Der kurze dicke Strich liegt genau auf der feinen Linie über dem Abschnitt */
.rubrik { margin-top: -2px; padding-top: 16px; border-top: 3px solid var(--text); font-size: .95rem; font-weight: 600; }
.abschnitt-kopf > div { padding-top: 16px; }
.abschnitt-kopf h2 { max-width: 21em; font-size: clamp(1.85rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.008em; }
.abschnitt-kopf > div > p { max-width: 38em; margin-top: 16px; font-size: 1.1rem; color: var(--grau); }
.inhalt { margin: 48px 0 0 calc(var(--randspalte) + var(--spaltenabstand)); }

/* Spalten mit einer feinen Linie darüber (keine Kästen) */
.spalten { --anzahl: 3; display: grid; grid-template-columns: repeat(var(--anzahl), minmax(0, 1fr)); gap: 0 32px; padding: 0; list-style: none; }
ol.spalten { margin: 0; }
.spalten.vier { --anzahl: 4; }
.punkt { padding: 16px 0 32px; border-top: 1px solid var(--linie); }
.punkt p { margin-top: 8px; }
.abstand { margin-top: 32px; }

/* So funktioniert's: nummerierte Spalten */
.nummern { counter-reset: nummer; }
.nummern li { counter-increment: nummer; }
.nummern li::before { content: counter(nummer); display: block; margin-bottom: 8px; font: 400 2.2rem/1 var(--serif); color: var(--grau); }
.nummern p { margin-top: 8px; color: var(--grau); }

/* Was Sie sparen: drei große Zahlen aus dem Rechner der Preisseite */
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.zahlen div { padding: 16px 0 24px; border-top: 1px solid var(--linie); }
.zahlen dt { font-size: .95rem; font-weight: 600; }
.zahlen dd { margin-top: 8px; }
.zahlen .gross { display: block; font: 400 clamp(1.9rem, 3.2vw, 2.5rem)/1.1 var(--serif); white-space: nowrap; }
.zahlen .leise { display: block; margin-top: 4px; color: var(--grau); }

/* Prüfregeln in Kürze: Nummer und Frage, drei Spalten */
.regel-kurz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 16px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linie); }
.regel-kurz li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); }
.regel-kurz .nr { flex: none; width: 3rem; color: var(--grau); font-variant-numeric: tabular-nums; }
/* Kurze Notiz unter einem Inhalt („Lirodo liest: …“, „Neu: …“) */
.notiz { margin-top: 24px; color: var(--grau); }
.notiz b { margin-right: 8px; font-weight: 600; color: var(--text); }

/* Tabellen im Rahmen (Prüfregeln, Preise) */
.tabelle { overflow-x: auto; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
/* Spaltenbreiten nur an den Spaltenköpfen – so lässt sich die Tabelle am Handy leicht umbauen */
.tabellen-notiz { margin-top: 16px; font-size: .92rem; color: var(--grau); }
.tabellen-notiz b { font-weight: 600; color: var(--text); }


/* Prüfoberfläche als Beispielbild: Original links, erkannte Daten rechts – wie in oberflaeche/ */
.ansicht { overflow: hidden; font-size: .84rem; line-height: 1.45; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); }
.ansicht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 12px; color: #fff; background: var(--blau); }
.ansicht-kopf b { margin-right: auto; font-size: .92rem; font-weight: 600; }
.ansicht-titel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 12px 12px 0; }
.ansicht-titel b { font-size: 1.05rem; font-weight: 600; }
.ansicht-inhalt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; padding: 12px; }
.ansicht-original { padding: 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.brief-firma, .brief-titel { font-weight: 700; }
.brief-titel { margin-top: 12px; }
.brief-leise { font-size: .78rem; color: var(--grau); }
.brief-gruss { margin-top: 12px; font-size: .78rem; color: var(--grau); }
.ansicht-original table { margin-top: 8px; font-size: .8rem; }
.ansicht-original th, .ansicht-original td { padding: 4px 8px 4px 0; background: none; }
.ansicht-daten th, .ansicht-daten td { padding: 8px; }
.ansicht-daten thead th { font-size: .8rem; }
/* Statusspalte fest 8em (18.10.2026): Safari rechnet beim Mindestmaß der Spalte das Zeichen vor dem Wort nicht mit – „✕ Ausnahme“
   stand über den Rand, die Tabelle rollte bei 768 und 1024 um einige Pixel. */
.ansicht-daten thead th:last-child { width: 8em; }
.ansicht-daten tbody th { white-space: nowrap; }
.ansicht-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.knopf-bild { padding: 4px 12px; background: var(--karte); border: 1px solid var(--grau); border-radius: var(--rund); }
.knopf-bild.haupt { font-weight: 600; color: #fff; background: var(--blau); border-color: var(--blau); }
/* Seite „Beispiele“ (seit 03.11.2026, ENTSCHEIDUNGEN 145): dieselbe Ansicht wie auf der Startseite, je Beispiel ein Abschnitt; die Notiz
   „Was dann passiert“ darunter, der letzte Abschnitt mit Abstand zur Fußzeile */
.brief-text { margin-top: 12px; }
.ganz { white-space: nowrap; }   /* Nummern mit Bindestrich (Charge) nicht trennen */
.beispiele .abschnitt-schluss { padding-bottom: 96px; }


/* Fragen */
.fragen { max-width: 52rem; border-bottom: 1px solid var(--linie); }
.fragen details { border-top: 1px solid var(--linie); }
.fragen summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; font-size: 1.08rem; font-weight: 600; list-style: none; cursor: pointer;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font: 400 1.5rem/1 var(--serif); color: var(--link); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { max-width: 42em; padding-bottom: 24px; }
/* „So rechnen wir“ unter dem Rechner – zugeklappt (seit 13.10.2026; vorher ein kleiner Text, der immer da stand) */
.rechenweg { margin-top: 16px; }
.rechenweg summary { padding: 8px 0; color: var(--link); cursor: pointer; }
.rechenweg p { margin-top: 8px; max-width: 46em; }

/* Kontakt */
.kontakt { margin-top: 96px; padding: 64px 0 80px; background: var(--hell); border-top: 1px solid var(--linie); }
.kontakt .aktionen { margin-top: 24px; }
.abschnitt-kopf > div > .mail-zeile { margin-top: 24px; }

/* Fuß */
.fuss { padding: 24px 0 48px; font-size: .9rem; color: var(--grau); border-top: 1px solid var(--linie); }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
/* Innenabstand 8 px: Klickfläche rund 36 px (vorher 23 px, 18.10.2026) */
.fuss a { display: inline-block; padding: 8px 0; color: var(--grau); text-decoration: none; }
.fuss a:hover, .fuss a[aria-current] { color: var(--text); text-decoration: underline; }

/* ---------- Unterseiten ---------- */
/* Seitenkopf flacher (seit 18.10.2026, vorher 64/56 px): die Preistabelle beginnt am Laptop schon auf dem ersten Bildschirm */
.seitenkopf { padding: 48px 0; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.seitenkopf h1 { max-width: 16em; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em; }
.seitenkopf .einleitung { margin-top: 16px; }

/* Preise: eine Preisliste als Tabelle */
.preise { padding-top: 48px; }
/* Feste Spalten, alles bricht um: Die Tabelle wird nie breiter als der Bildschirm (vorher 1.548 Pixel, Angelos Bild vom 12.10.2026) */
.preisliste { table-layout: fixed; }
/* Namen oben auf einer Höhe, „empfohlen“ darunter (vertical-align: top seit 18.10.2026 – mit bottom standen Start und Pro tiefer) */
.preisliste thead th { padding-block: 16px 12px; vertical-align: top; font-size: 1rem; }
.preisliste thead th:not(:first-child) { width: 30%; }
.preisliste .status { white-space: normal; }
.paketname { display: block; font: 400 1.6rem/1.2 var(--serif); }
.preisliste tbody th { font-weight: 400; }
.preisliste .preiszeile > * { padding-block: 16px; vertical-align: baseline; }
.preisliste .preiszeile b { font: 400 2.1rem/1 var(--serif); }
/* Drei Abos (seit 14.10.2026): die Spalte „Leistung“ etwas schmaler, „empfohlen“ unter dem Namen in Blau */
.preisliste.drei thead th:not(:first-child) { width: 24%; }
.preisliste .empfohlen .nebenzeile { color: var(--link); font-weight: 600; }
/* ---------- Preiskarten (Preisseite, seit 20.10.2026) ----------
   Angelos Wunsch: die Knöpfe zum Bestellen deutlich besser ins Design. Die drei Abos nebeneinander in EINEM Rahmen mit feinen Linien
   (keine Kacheln, keine Schatten): oben Name und für wen, dann der Preis, gleich darunter die Bestell-Knöpfe – je Abo die Wahl der
   Einrichtung mit ihrem Preis –, darunter die wichtigsten Leistungen. Die vier Teile stehen in allen drei Spalten auf einer Höhe (subgrid).
   Monatlich oder jährlich: ein Umschalter aus zwei Optionsfeldern ohne Skript – :has() blendet Preise und Knöpfe der anderen Zahlweise
   aus. Ohne :has() (sehr alte Browser) stehen beide da, die jährlichen mit „im Jahr“. */
.preise-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.preise-kopf h2, .vergleich h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
/* Der Umschalter nach Angelos Vorlage (20.10.2026): eine Pille, die gewählte Seite gefüllt – hell dunkel, dunkel hell –, bei „Jährlich“ ein
   grünes Schild mit dem Rabatt (2 von 12 Monaten = 16,7 %, abgerundet, damit es nie mehr verspricht). Die einzige Stelle mit runden Enden
   statt 4 px – Angelos Wunsch. Jährlich ist vorgewählt (preise.html). */
.zahlweise {
  display: inline-flex; gap: 4px; min-width: 0; margin: 0; padding: 5px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px;
}
.zahlweise label {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 8px 28px; font-size: 1.05rem; font-weight: 700; border-radius: 999px; cursor: pointer;
}
/* Das Optionsfeld liegt unsichtbar über seiner Beschriftung: bedienbar mit Maus, Tastatur und Vorleser */
.zahlweise input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zahlweise label:has(input:checked) { color: var(--karte); background: var(--text); }
.zahlweise label:not(:has(input:checked)):hover { background: var(--hell); }
.zahlweise label:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.zahlweise-zusatz {
  padding: 2px 10px; font-size: .85rem; font-weight: 700; line-height: 1.4; white-space: nowrap; color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 14%, transparent); border-radius: 999px;
}
/* Auf der gefüllten Seite ein volles Grün (sonst zu wenig Kontrast) */
.zahlweise label:has(input:checked) .zahlweise-zusatz { color: var(--karte); background: var(--gruen); }
.preise:not(:has(.zahlweise input[value="jahr"]:checked)) .nur-jahr,
.preise:has(.zahlweise input[value="jahr"]:checked) .nur-monat { display: none; }

.pakete {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); margin-top: 24px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
}
.paket { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 24px; }
.paket + .paket { border-left: 1px solid var(--linie); }
/* Empfohlen: ein Strich oben über die ganze Spalte in der Farbe von „Empfohlen“ (hell: Dunkelblau, dunkel: helles Blau – Dunkelblau ging im Dunklen unter) */
.paket.empfohlen::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--link); }
.paket-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.paket-kopf h3 { font: 400 1.6rem/1.2 var(--serif); }
.empfohlen-zeichen { font-size: .9rem; font-weight: 600; color: var(--link); }
.paket-fuer { flex-basis: 100%; font-size: .95rem; color: var(--grau); }
.paket-preis { padding-top: 16px; color: var(--grau); }
.paket-preis .betrag { margin-right: 4px; font: 400 2.6rem/1.1 var(--serif); color: var(--text); }
.paket-bestellen { padding-top: 24px; }
.paket-frage { margin-bottom: 8px; font-size: .9rem; font-weight: 600; color: var(--grau); }
.wahl { display: grid; gap: 8px; }
/* Ein Knopf je Wahl: links was geschieht, rechts der Preis der Einrichtung */
.wahl .knopf { justify-content: space-between; width: 100%; text-align: left; }
.knopf .betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wahl .knopf:not(.haupt) .betrag { font-weight: 400; color: var(--grau); }
.paket-leistungen {
  display: grid; align-content: start; gap: 12px; margin: 24px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--linie);
}
.paket-leistungen li, .alle-abos li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
/* Haken in Leistungslisten: neutral grau – kein Status (der wäre grün und mit Wort) */
.haken {
  width: 16px; height: 16px; margin-top: .35em; fill: none; stroke: var(--grau); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pakete-notiz { max-width: 100ch; margin-top: 16px; font-size: .95rem; color: var(--grau); }
.pakete-notiz b { font-weight: 600; color: var(--text); }
.alle-abos { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linie); }
.alle-abos h3 { font: 400 1.4rem/1.2 var(--serif); }
.alle-abos ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 32px; margin: 16px 0 0; padding: 0; list-style: none; }
/* Darunter die Preistabelle mit allen Einzelheiten */
.vergleich { padding-top: 64px; }
.vergleich h2 { margin-bottom: 24px; }
/* Angebot für die ersten fünf Kunden: ein heller Kasten unter den Hinweisen */
.erste-kunden { margin-top: 32px; padding: 24px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); }
.erste-kunden h2 { font-size: 1.5rem; }
.erste-kunden p { margin-top: 8px; }
.erste-kunden ul { margin: 12px 0 0; padding-left: 1.2em; max-width: 80ch; }
.erste-kunden li + li { margin-top: 8px; }
.erste-kunden .aktionen { margin-top: 16px; }
/* Nummerierte Schritte auf kurzen Textseiten (Danke-Seite) */
.schrittliste { margin: 0; padding-left: 1.4em; }
.schrittliste li + li { margin-top: 8px; }
.schrittliste + p { margin-top: 16px; }
.preis-hinweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 32px; }
.preis-hinweise div { padding: 16px 0 24px; border-top: 1px solid var(--linie); }
.preis-hinweise dt { font-weight: 600; }
.preis-hinweise dd { margin-top: 4px; color: var(--grau); }

/* Rechner (Preisseite, rechner.js): Felder in Spalten, Ergebnis als Tabelle, Fazit in Worten */
.rechner-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.rechner-feld { display: grid; align-content: start; gap: 4px; min-width: 0; }
.rechner-feld label { font-weight: 600; }
.rechner-feld input { text-align: right; font-variant-numeric: tabular-nums; }
.feld-mit-endung:has(input[aria-invalid="true"]) { border-color: var(--rot); }
.feld-hilfe { font-size: .85rem; line-height: 1.45; color: var(--grau); }
.rechner-grundlage { margin: 32px 0 8px; color: var(--grau); }
.rechner-ergebnis thead th:first-child { width: 34%; }
.rechner-ergebnis thead th:not(:first-child), .rechner-ergebnis td { text-align: right; }
.rechner-ergebnis td { white-space: nowrap; }
.rechner-ergebnis .nebenzeile { white-space: normal; }
.rechner-ergebnis .summe > * { font-weight: 600; }
.rechner-ergebnis .ersparnis > * { font-weight: 600; background: var(--hell); }
.rechner-fazit { max-width: 46em; margin-top: 16px; font-size: 1.1rem; }
.rechner-fazit .status { margin-right: 8px; }

/* Kunden-Login */
.anmeldung { padding: 48px 0 64px; background: var(--flaeche); }
.anmelde-feld { max-width: 560px; margin: 0 auto; padding: 32px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.anmelde-feld h1 { font-size: 2.2rem; }
.anmelde-feld > p { margin-top: 12px; color: var(--grau); }
.anmelde-formular { display: grid; gap: 8px; margin-top: 24px; }
.anmelde-formular label { font-weight: 600; }
.feld-mit-endung { display: flex; background: var(--karte); border: 1px solid var(--grau); border-radius: var(--rund); }
.feld-mit-endung:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
/* Eingabefelder 48 px hoch (Innenabstand 8/12 px statt 11 px, 18.10.2026) */
.feld-mit-endung input { flex: 1; width: 0; min-width: 0; min-height: 46px; padding: 8px 12px; font: inherit; color: var(--text); background: transparent; border: 0; border-radius: var(--rund) 0 0 var(--rund); }
.feld-mit-endung input:focus { outline: none; }
.feld-mit-endung span {
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap; color: var(--grau);
  background: var(--flaeche); border-left: 1px solid var(--linie); border-radius: 0 var(--rund) var(--rund) 0;
}
.anmelde-formular .knopf { justify-self: start; margin-top: 16px; }
/* Nachricht an Lirodo (Startseite, Abschnitt „Kontakt“, seit 20.10.2026): wie die Anmeldung – E-Mail-Adresse und Nachricht, das Formular
   geht an lirodo.de/konto/nachricht. Die Falle für Programme liegt außerhalb des Bildschirms (nicht display: none – das übergehen manche). */
.nachricht-formular { display: grid; gap: 8px; max-width: 640px; margin-top: 24px; }
.nachricht-formular label { font-weight: 600; }
.nachricht-formular > input, .nachricht-formular > textarea {
  width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; color: var(--text); background: var(--karte);
  border: 1px solid var(--grau); border-radius: var(--rund);
}
.nachricht-formular > textarea { min-height: 160px; resize: vertical; }
.nachricht-formular > input:focus-visible, .nachricht-formular > textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.nachricht-formular > input + label { margin-top: 8px; }
.nachricht-formular .knopf { justify-self: start; margin-top: 8px; }
.formular-hinweis { font-size: .92rem; color: var(--grau); }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Kundenkonto: E-Mail-Adresse und Passwort (das Formular geht an lirodo.de/konto) */
.anmelde-formular > input { width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--grau); border-radius: var(--rund); }
.anmelde-formular > input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.anmelde-formular > input + label { margin-top: 8px; }
/* Passwortfeld mit Auge (auge.js, seit 09.10.2026): das Auge rechts im Feld, durchgestrichen, solange das Passwort zu sehen
   ist; ohne Skript unsichtbar. Das eigene Auge von Edge bleibt aus. */
.passwort-feld { position: relative; display: block; }
.passwort-feld + label { margin-top: 8px; }
.passwort-feld input { width: 100%; min-height: 48px; padding: 8px 48px 8px 12px; font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--grau); border-radius: var(--rund); }
.passwort-feld input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.auge { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 12px; color: var(--grau); background: none; border: 0; cursor: pointer; }
.auge[hidden] { display: none; }
.auge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.auge[aria-pressed="false"] .auge-strich { display: none; }
.auge:hover { color: var(--text); }
.auge:focus-visible { outline: 2px solid var(--link); outline-offset: -3px; border-radius: var(--rund); }
input::-ms-reveal { display: none; }
.anmelde-hinweis { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); }
/* Bis 21.10.2026 stand ab 960 px rechts daneben „Zur Belegprüfung“ (.anmelde-teil) – seitdem ein Anmeldefenster für alle (ENTSCHEIDUNGEN 100) */

/* Rechtstexte und Fehlerseite */
.rechtstext { padding: 64px 0 96px; }
.rechtstext .rahmen { width: min(760px, 100% - 64px); }
.rechtstext h1 { margin-bottom: 24px; font-size: clamp(2.2rem, 4.4vw, 3rem); line-height: 1.08; }
.rechtstext h2 { margin: 32px 0 8px; font-size: 1.4rem; }
.rechtstext p + p { margin-top: 12px; }
/* Platzhalter bleiben gelb mit dunkler Schrift – auch in der dunklen Darstellung lesbar */
.platzhalter { padding: 0 3px; font-weight: 600; color: #1A2530; background: #FCEFC2; border-radius: 2px; }
/* Verträge (AGB, Leistungsbeschreibung, AV-Vertrag – seit 19.10.2026, <main class="rechtstext vertrag">): Unterüberschriften, Listen,
   Inhalt, Kasten. Nur mit „vertrag“, damit die übrigen Seiten mit „rechtstext“ (z. B. die Schrittliste auf danke.html) bleiben, wie sie sind. */
.vertrag h3 { margin: 24px 0 6px; font-size: 1.1rem; }
.vertrag ol, .vertrag ul { margin: 8px 0 0; padding-left: 1.6em; }
.vertrag li + li { margin-top: 6px; }
.vertrag p + ol, .vertrag p + ul, .vertrag ol + p, .vertrag ul + p { margin-top: 8px; }
.vertrag .stand { margin-bottom: 24px; color: var(--grau); }
.vertrag .inhalt { margin: 0 0 32px; padding: 12px 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); }
.vertrag .inhalt ol { margin: 4px 0 0; }
.vertrag .kurz { margin: 0 0 32px; padding: 12px 16px; background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--blau, #1B3A5C); border-radius: var(--rund); }
.vertrag dl { margin: 8px 0 0; }
.vertrag dt { margin-top: 12px; font-weight: 600; }
.vertrag dd { margin: 2px 0 0; }
.entwurf { margin-bottom: 32px; padding: 12px 16px; background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--gelb); border-radius: var(--rund); }

/* Seite „Bald verfügbar“ (Vorschau-Modus: alle außer den Adressen in WEBSITE_IPS sehen nur diese Seite) */
.bald { display: flex; align-items: center; min-height: calc(100vh - 64px); padding: 64px 0; background: var(--flaeche); }
.bald h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.05; }
.bald p { margin-top: 16px; font-size: 1.15rem; color: var(--grau); }

/* ---------- Band und schmale Bildschirme ---------- */
/* Band mit den Warenwirtschaften (seit 10.10.2026): die einzige Bewegung auf der Website – Angelos ausdrücklicher Wunsch geht hier vor
   „keine Animationen“. Ruhig: langsam (rund 45 px je Sekunde), gleichmäßig, ohne Verläufe an den Rändern; Namen in der Schrift der
   Überschriften, getrennt durch feine Linien. Zwei gleiche Listen nebeneinander laufen je um ihre eigene Breite nach links – so
   schließt das Band nahtlos. Anhalten: Knopf darunter (ein Kontrollkästchen, kein Skript), Maus darauf oder Tabulator. */
.band-abschnitt { padding: 48px 0 0; }
.band-kopf { display: grid; grid-template-columns: var(--randspalte) minmax(0, 1fr); gap: 8px var(--spaltenabstand); align-items: baseline; }
.band-kopf h2 { font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.band-kopf p { max-width: 44em; color: var(--grau); }
.band { display: flex; overflow: hidden; margin-top: 16px; border-block: 1px solid var(--linie); background: var(--karte); }
.band-spur { display: flex; flex: none; margin: 0; padding: 0; list-style: none; animation: band-lauf 80s linear infinite; }
.band-spur li { flex: none; padding: 16px 32px; border-right: 1px solid var(--linie); font: 400 1.2rem/1.3 var(--serif); white-space: nowrap; }
@keyframes band-lauf { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.band:hover .band-spur, .band-schalter:checked ~ .band .band-spur { animation-play-state: paused; }
.band-fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 24px; margin-top: 4px; }
.band-knopf { display: inline-block; padding: 8px 0; color: var(--link); font-size: .9rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.band-knopf .weiter, .band-schalter:checked ~ .band-fuss .anhalten { display: none; }
.band-schalter:checked ~ .band-fuss .weiter { display: inline; }
.band-schalter:focus-visible ~ .band-fuss .band-knopf { outline: 2px solid var(--link); outline-offset: 3px; }
/* „Bewegung reduzieren“ am Gerät: eine stehende Liste, die umbricht – ohne Knopf */
@media (prefers-reduced-motion: reduce) {
  .band { overflow: visible; }
  .band-spur { flex: 1 1 auto; flex-wrap: wrap; animation: none; }
  .band-spur[aria-hidden="true"], .band-knopf { display: none; }
}

@media (max-width: 960px) {
  :root { --spaltenabstand: 32px; }
  .buehne-kopf, .abschnitt-kopf, .band-kopf { grid-template-columns: minmax(0, 1fr); }
  .pakete { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .paket { grid-row: auto; grid-template-rows: none; }
  .paket + .paket { border-left: 0; border-top: 1px solid var(--linie); }
  .alle-abos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubrik { justify-self: start; }
  .inhalt { margin-left: 0; }
  .spalten.vier { --anzahl: 2; }
  .kurzdaten.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regel-kurz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rechner-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .kopf-innen { flex-wrap: wrap; justify-content: space-between; min-height: 56px; padding-block: 8px 4px; }
  /* Die Bereiche als EINE Zeile unter dem Logo, die seitlich rollt – wie die Kopfzeile der Belegprüfung am Handy (18.10.2026; vorher
     brachen sie in zwei Zeilen um, die Kopfzeile war rund 150 px hoch, jetzt rund 95). Der Rollbalken bleibt unsichtbar, die Zeile
     reicht bis an den Bildschirmrand, damit man sieht, dass sie weitergeht. */
  .hauptnavi {
    order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 0 24px; margin: 0 -16px; padding: 0 16px;
    overflow-x: auto; scrollbar-width: none; border-top: 1px solid rgba(255, 255, 255, .3);
  }
  .hauptnavi::-webkit-scrollbar { display: none; }
  .hauptnavi a { flex: none; white-space: nowrap; }
}
@media (max-width: 720px) {
  .spalten, .spalten.vier { --anzahl: 1; }
  .zahlen, .regel-kurz { grid-template-columns: minmax(0, 1fr); }
  .kurzdaten, .kurzdaten.vier, .preis-hinweise { grid-template-columns: minmax(0, 1fr); }
  .ansicht-inhalt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .rahmen, .rechtstext .rahmen { width: calc(100% - 32px); }
  .buehne { padding: 48px 0 32px; }
  .abschnitt { padding-top: 64px; }
  .beispiele .abschnitt-schluss { padding-bottom: 64px; }
  .band-spur li { padding: 12px 24px; font-size: 1.05rem; }
  .kontakt { margin-top: 64px; padding: 48px 0 64px; }
  /* Knöpfe am Handy in voller Breite (wie in der Belegprüfung), auch „Anmelden“ und „Zur Startseite“ */
  .knopf { width: 100%; }
  .aktionen .knopf { flex: 1 1 auto; }
  .anmelde-formular .knopf { justify-self: stretch; }

  /* Bestelleingang (Startseite): je Bestellung ein Block statt vier gequetschter Spalten (18.10.2026) –
     oben Kunde und Uhrzeit, darunter der Dateiname, unten Ergebnis und Auftragswert */
  .eingang { margin-top: 32px; }
  .eingang table, .eingang tbody, .eingang tfoot, .eingang tfoot tr { display: block; }
  .eingang thead { display: none; }
  .eingang tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--linie); }
  .eingang tbody tr:last-child { border-bottom: 0; }
  .eingang td { display: block; width: auto; padding: 0; border: 0; }
  .eingang .zeit { grid-column: 2; grid-row: 1; font-size: .88rem; }
  .eingang td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .eingang td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .eingang .betrag { grid-column: 2; grid-row: 2; align-self: end; }
  .eingang .status { white-space: normal; }
  .eingang tfoot td { padding: 8px 12px; }

  /* Preisliste (18.10.2026): je Zeile ein Raster – die Beschriftung über drei gleich breiten Wertspalten. Vorher vier Spalten von je
     rund 80 px mit 13-px-Schrift und Trennstrichen in fast jedem zweiten Wort. */
  .preisliste.drei, .preisliste.drei thead, .preisliste.drei tbody { display: block; }
  .preisliste.drei tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
  .preisliste.drei tbody tr:last-child { border-bottom: 0; }
  .preisliste.drei thead th:first-child { display: none; }
  .preisliste.drei th, .preisliste.drei td { padding: 8px; border-bottom: 0; hyphens: auto; -webkit-hyphens: auto; }
  /* Die festen Spaltenbreiten (24 %) gelten im Raster nicht mehr – gleicher Selektor wie oben, damit die Regel gewinnt */
  .preisliste.drei thead th:not(:first-child), .preisliste.drei th, .preisliste.drei td { width: auto; }
  .preisliste.drei thead th { padding-block: 12px; }
  .preisliste.drei tbody th { grid-column: 1 / -1; padding: 12px 8px 0; font-size: .85rem; font-weight: 600; color: var(--grau); }
  .preisliste.drei tbody td, .preisliste.drei .preiszeile td { padding-block: 4px 12px; }
  .preisliste.drei .preiszeile b { font-size: 1.5rem; }
  .paketname { font-size: 1.3rem; }
  .preise-kopf { align-items: stretch; }
  .zahlweise { display: flex; width: 100%; }
  .zahlweise label { flex: 1 1 0; gap: 8px; padding-inline: 12px; }
  .paket { padding: 16px; }
  .paket-preis .betrag { font-size: 2.2rem; }
  .alle-abos ul { grid-template-columns: minmax(0, 1fr); }
  .erste-kunden { padding: 16px; }
  /* Lange Wörter in Überschriften (z. B. „Datenschutzerklärung“) trennen statt über den Rand zu laufen */
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; }

  /* Rechner: Felder untereinander, Ergebnis-Tabelle enger */
  .rechner-felder { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rechner-ergebnis { font-size: .86rem; }
  .rechner-ergebnis th, .rechner-ergebnis td { padding-inline: 8px; }
  .rechner-ergebnis thead th:first-child { width: auto; }
  .rechner-fazit { font-size: 1rem; }
  .anmelde-feld { padding: 24px 16px; }
  .anmeldung { padding: 32px 0 64px; }
  .rechtstext { padding: 48px 0 64px; }
}
@media (max-width: 480px) {
  .ansicht-original, .ansicht-kopf span { display: none; }
  /* … nur auf der Seite „Beispiele“ bleibt das Original sichtbar – um den Vergleich geht es dort (seit 03.11.2026) */
  .beispiele .ansicht-original { display: block; }
  /* Beispiel der Belegprüfung: kleiner und enger, nur die Spalte „Wert“ bricht um (Feldname und Status bleiben in einer Zeile –
     vorher „Be-stell-Nr.“ und „er-kannt“ mit Trennstrichen, 18.10.2026) */
  .ansicht { font-size: .78rem; }
  .ansicht-daten th, .ansicht-daten td { padding: 8px 4px; }
  /* Sehr kleine Handys: Preisliste und Ergebnis des Rechners noch etwas enger */
  .paketname { font-size: 1.15rem; }
  .rechner-ergebnis { font-size: .8rem; }
  .rechner-ergebnis th, .rechner-ergebnis td { padding-inline: 4px; }
  .rechner-ergebnis tbody th { hyphens: auto; -webkit-hyphens: auto; }
}

/* Knöpfe dürfen umbrechen (Preisseite: der Preis rutscht in schmalen Spalten unter die Beschriftung) */
.knopf { flex-wrap: wrap; }