/* ==========================================================================
   Psymora — Bestellstrecke (signup.psymora.at)
   ==========================================================================

   Die Gestaltung der öffentlichen Bestellstrecke. Sie baut ausschliesslich
   auf den Variablen aus `css/marke.css` auf — dort stehen Farben, Radien,
   Schatten und Schriftfamilien, und zwar als geprüfte Kopie der Website
   (Begründung im Kopf jener Datei). Hier steht nichts, was eine Farbe oder
   einen Radius neu erfindet: Wo `var(--…)` reicht, wird `var(--…)`
   verwendet, damit eine Änderung an der Marke hier von selbst ankommt.

   Reihenfolge der Stylesheets im Layout:
     1. css/fonts.css          — @font-face, lokal ausgeliefert
     2. css/marke.css          — die Variablen
     3. css/bestellstrecke.css — diese Datei

   Kein Build-Schritt, kein Framework: Die Anwendung soll sich weiterhin
   ohne npm ausrollen lassen (dieselbe Entscheidung wie im internen Layout,
   components/layout.blade.php).

   Die Klassennamen sind dieselben wie vorher im <style>-Block des Layouts
   (.karte, .feld, .hilfe, .zwei-spalten, .bestaetigung, .preis, .hinweis,
   .fehler, dl.uebersicht …). Alle sechs Seiten der Strecke nutzen sie; wer
   einen Namen umbenennt, muss sie alle durchsehen.
   ========================================================================== */

:root {
    /* Eigene Abstandsstufe für DIESE Strecke — nicht aus marke.css: Dort
       skaliert `--space-section`/`--space-head`/`--space-card` die grossen
       Blöcke einer Marketingseite, keine Formularabstände. Eine
       Stufenleiter statt Einzelwerte pro Element (Auftrag Robert,
       2026-09-17: „das kommt mir alles mit sehr viel abstand vor, mach
       die abstände ein bisschen kleiner") — wer künftig „noch etwas
       enger" will, ändert es an einer Stelle, nicht an zwanzig. */
    --f-2xs: 4px;
    --f-xs: 6px;
    --f-sm: 10px;
    --f-md: 14px;
    --f-lg: 18px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Derselbe warme Lichtschein wie im Hero der Startseite, nur ruhiger:
       Er liegt oben und läuft aus, bevor die Formularfelder beginnen. */
    background:
        radial-gradient(900px 420px at 88% -12%, var(--gold-soft) 0%, transparent 58%),
        radial-gradient(760px 380px at 0% -6%, var(--bordeaux-soft) 0%, transparent 52%),
        var(--bg-warm);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--ink);
}

a { color: var(--bordeaux); }

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

.kopf {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
}
.kopf .innen {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke img { height: 30px; width: auto; display: block; }
.zurueck-website {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    /* 44 px Trefferfläche auch dann, wenn der Text nur 20 px hoch ist. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
}
.zurueck-website:hover { color: var(--bordeaux); }

/* ---------- Vertrauenszeile (wie auf der Startseite) ---------- */

.vertrauensband {
    background: rgba(255, 255, 255, .55);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px;
}
.vertrauensband .innen {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    color: var(--muted);
    font-size: 14px;
}
.vertrauensband span { display: inline-flex; align-items: center; gap: 7px; }
.vertrauensband svg { color: var(--bordeaux); flex-shrink: 0; }

/* ---------- Grundgerüst ---------- */

/* 760px → 1040px (Auftrag Robert, 2026-09-17: „du kannst mehr breite von
   dem ganzen verwenden … dass es dann auch bei den ganzen paketen sich
   das in einer zeile ausgeht"). Dieselbe Breite wie `.kopf .innen` und
   `.vertrauensband .innen` oben, damit Kopf, Vertrauenszeile und Karte
   weiterhin an derselben Kante enden. Am Handy ändert sich dadurch nichts
   — `max-width` greift erst, wenn der Bildschirm breiter ist. */
main {
    max-width: 1040px;
    margin: var(--f-lg) auto 48px;
    padding: 0 24px;
}

.karte {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow);
}

h1 { font-size: clamp(1.6rem, 4.4vw, 2rem); margin: 0 0 8px; }
h2 {
    font-size: 1.06rem;
    margin: var(--f-lg) 0 var(--f-sm);
    padding-top: var(--f-md);
    border-top: 1px solid var(--line);
}
/* Die Trennlinie steht zwischen zwei Abschnitten. Über der ersten
   Überschrift einer Karte steht keiner — dort wäre sie ein Strich ins Leere. */
.karte > h2:first-of-type,
h2.ohne-linie { border-top: 0; padding-top: 0; }

.sub { color: var(--muted); font-size: 15px; margin: 0 0 var(--f-lg); }
.fuss { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 40px; padding: 0 24px; }

/* ---------- Fortschritt: „Schritt 1 von 2" ---------- */

.fortschritt { margin: 0 0 20px; }
.schritt-zaehler {
    display: inline-block;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bordeaux);
    background: var(--bordeaux-soft);
    padding: 6px 14px;
    border-radius: 999px;
    margin: 0 0 12px;
}
.schritte {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--muted);
}
.schritte li { display: inline-flex; align-items: center; gap: 8px; }
.schritte .nr {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    flex-shrink: 0;
}
.schritte li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.schritte li[aria-current="step"] .nr { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.schritte li.erledigt .nr { background: var(--bordeaux-soft); border-color: var(--bordeaux-soft); color: var(--bordeaux); }

/* ---------- Tarifleiste: was es kostet, während man ausfüllt ---------- */

.tarifleiste {
    position: sticky;
    top: 12px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 16px;
    margin-bottom: var(--f-lg);
}
.tarifleiste .titel {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
}
.tarifleiste .paket { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.tarifleiste .betrag { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--bordeaux); letter-spacing: -.02em; }
.tarifleiste .brutto { font-size: 13px; color: var(--muted); }
.tarifleiste .rechts { text-align: right; }
.tarifleiste a { font-size: 14px; font-weight: 600; }
.tarifleiste[data-gewaehlt="nein"] .betrag { color: var(--muted); font-size: 1.05rem; }

/* Die gewählten Zusatzleistungen, unter dem Betrag (Auftrag Robert,
   2026-09-17). `flex: 0 0 100%` nutzt denselben `flex-wrap` der Leiste,
   den es schon für den Umbruch am Handy gibt — eine eigene Zeile über die
   volle Breite, ohne eigenes Layout-System.

   🔴 BEWUSST KLEINER UND STILLER ALS `.betrag`: Diese Zeile ist eine
   unverbindliche Anfrage, kein Preis — sie soll aussehen wie eine Notiz,
   nicht wie ein zweiter Betrag. Der Trennstrich („— unverbindlich …")
   trägt denselben Gedanken wie `.zusatz-hinweis` weiter unten im
   Formular, nur auf eine Zeile gekürzt. */
.tarifleiste-zusatz {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: 12.5px;
    color: var(--muted);
    border-top: 1px dashed var(--line);
    margin-top: var(--f-2xs);
    padding-top: var(--f-xs);
}
.tarifleiste-zusatz .unverbindlich { font-style: italic; }

/* Die Leiste klebt oben — ein Sprung auf einen Anker landete deshalb
   bisher genau darunter, und die Überschrift, zu der gesprungen wurde, war
   verdeckt. Betrifft „Tarif wählen ↓" in der Leiste selbst ebenso wie den
   Abschnitt Zusatzleistungen. Der Wert ist die Höhe der Leiste plus ihr
   Abstand nach oben. */
h2[id] { scroll-margin-top: 92px; }

/* ---------- Formularfelder ---------- */

.feld { margin-bottom: var(--f-md); }

label { display: block; font-weight: 600; font-size: 14px; margin-bottom: var(--f-2xs); }

.hilfe { color: var(--muted); font-size: 13px; margin-top: var(--f-2xs); }

/* Das Freitextfeld „Empfehlung durch wen?" nur bei „Empfehlung" gewählt
   (Auftrag Robert, 2026-09-17). Greift ausschliesslich unter `html.js`
   (siehe components/signup-layout.blade.php, dasselbe Muster wie
   website/js/main.js) — ohne JavaScript steht das Feld immer da, weil
   diese Regel dann gar nicht zutrifft. `data-sichtbar` setzt
   resources/views/signup/formular.blade.php serverseitig als
   Ausgangswert und hält es per JavaScript aktuell. */
html.js #empfehlung-von-feld:not([data-sichtbar="ja"]) { display: none; }

/* Die Modulauswahl von „individuell" (Basis + Module), nur sichtbar, wenn
   dieses Paket gewählt ist — dasselbe Muster und derselbe Grund wie bei
   `#empfehlung-von-feld` direkt darüber: Ohne JavaScript (kein `html.js`)
   greift diese Regel nicht, und die Auswahl steht immer da. */
html.js #individuell-module:not([data-sichtbar="ja"]) { display: none; }

input[type=text], input[type=email], select, textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font: inherit;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: #ddd3d8; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--bordeaux);
    outline-offset: 1px;
    border-color: var(--bordeaux);
}
textarea { resize: vertical; min-height: 96px; }

/* Feldbreiten nach Inhalt statt stur halbe-halbe: Eine Hausnummer ist kurz,
   eine Postleitzahl auch. Unter 640 px bleiben beide Paare nebeneinander —
   zwei kurze Felder in einer Zeile sind auf dem Handy weniger Scrollweg,
   ohne dass eines davon zu schmal würde. */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* Bewusst OHNE `align-items: end`: Am Zeilenende ausgerichtet rutscht das
   Feld mit der kürzeren Fehlermeldung nach unten, und die beiden
   Beschriftungen stehen nicht mehr auf einer Höhe. Die Spalten sind stattdessen
   so breit, dass keine Beschriftung umbricht — dann stehen die Felder von
   selbst auf einer Linie. */
.strasse-hausnummer,
.plz-ort { display: grid; gap: 0 16px; }
.strasse-hausnummer { grid-template-columns: minmax(0, 1fr) 7.5rem; }
.plz-ort { grid-template-columns: 7.5rem minmax(0, 1fr); }

@media (max-width: 640px) {
    .zwei-spalten { grid-template-columns: 1fr; }
    /* Etwas breiter als am Schreibtisch, damit „Hausnummer *" in eine Zeile
       passt — ein umbrechendes Wort über einem 5 rem breiten Feld sieht aus
       wie ein Fehler. */
    .strasse-hausnummer { grid-template-columns: minmax(0, 1fr) 6.6rem; }
    .plz-ort { grid-template-columns: 6.6rem minmax(0, 1fr); }
}

/* Fehler am Feld, nicht nur oben in der Sammelmeldung. */
.feld-fehler {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    color: #991b1b;
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
}
/* Die Meldungen einer zweispaltigen Zeile stehen über beide Spalten. Leer
   nimmt der Block keinen Platz — `:empty` greift nicht, weil Blade
   Leerzeichen hinterlässt, deshalb über die Kinder gerechnet. */
.zeilen-fehler { grid-column: 1 / -1; display: grid; gap: 4px; }
.zeilen-fehler .feld-fehler { margin-top: 0; }
.zeilen-fehler:has(.feld-fehler) { margin: -12px 0 14px; }

input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #dc2626; }
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { outline-color: #dc2626; }

/* Wunschadresse: die fertige Adresse steht mit, während getippt wird. */
.domain-eingabe { display: flex; align-items: center; gap: 8px; }
.domain-eingabe input { max-width: 280px; min-width: 0; }
.domain-eingabe .endung { color: var(--muted); white-space: nowrap; }
.domain-vorschau {
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
    background: var(--bg-warm);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    overflow-wrap: anywhere;
}
.domain-vorschau strong { color: var(--ink); font-weight: 700; }

@media (max-width: 480px) {
    /* Eingabefeld und Endung bleiben in einer Zeile: „.psymora.at" allein auf
       der nächsten sähe aus wie ein zweites Feld. */
    .domain-eingabe input { max-width: none; flex: 1 1 auto; }
}

/* ---------- Auswahlzeilen: Tarif, Zahlweise, Bestätigungen ---------- */

/* Eine Zeile zum Anklicken — mindestens 44 px hoch, damit sie auf dem Handy
   sicher zu treffen ist. */
.bestaetigung {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: var(--f-sm) 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    /* Nicht kleiner: Die 44 px sind die Grenze zur Unbedienbarkeit am
       Handy (Auftrag Robert, 2026-09-17) und bleiben deshalb unangetastet,
       während drumherum enger wird — `min-height` erzwingt die Höhe
       unabhängig vom (kleineren) `padding` oben. */
    min-height: 44px;
    cursor: pointer;
    margin-bottom: 0;
}
.bestaetigung:first-of-type { border-top: 0; }
.bestaetigung input { margin: 2px 0 0; width: 20px; height: 20px; accent-color: var(--bordeaux); flex-shrink: 0; }
.bestaetigung:hover { color: var(--bordeaux-dark); }
.bestaetigung.betont {
    background: var(--gold-soft);
    border-radius: var(--radius-sm);
    padding: var(--f-md) var(--f-lg);
    border-top: 0;
    margin: var(--f-sm) 0;
}

/* Tarife als Karten: Name, Preis und Module lassen sich so unterscheiden,
   statt in einer Zeile ineinanderzulaufen. */
.tarif-liste { display: grid; gap: var(--f-sm); }
.tarif {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--f-md) var(--f-lg);
    background: #fff;
    cursor: pointer;
    font-weight: 400;
    margin-bottom: 0;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tarif:hover { border-color: var(--bordeaux-soft); box-shadow: var(--shadow); }
.tarif input { margin: 3px 0 0; width: 20px; height: 20px; accent-color: var(--bordeaux); flex-shrink: 0; }
.tarif:has(input:checked) { border-color: var(--bordeaux); background: #fffdfd; box-shadow: var(--shadow); }
.tarif:has(input:focus-visible) { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.tarif .name { display: block; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.tarif .preis-zeile { display: block; margin-top: 3px; font-size: 14px; }
.tarif .preis-zeile b { font-size: 1.05rem; color: var(--bordeaux); }
.tarif .module { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.45; }

/* ---------- Eigener Auswahl-Indikator statt der Browser-Knöpfe ----------

   Nachbesserung zu PR #222 (Robert, 2026-09-16: „nicht so veraltete radio
   buttons"). Die Karten sahen gestaltet aus, der Auswahlknopf darin war
   der graue Systemknopf von 2003.

   🔴 WAS HIER NICHT PASSIERT: das <input> verstecken und durch ein <span>
   ersetzen. Es bleibt im Markup, bleibt fokussierbar, bleibt im
   Formular — nur sein Aussehen kommt von hier statt vom Betriebssystem.
   Damit bleiben die Pfeiltasten (eine Radiogruppe wandert mit ↑/↓), die
   Leertaste, `:checked`, `required` und jede Vorlesesoftware unberührt;
   nichts davon hängt am Aussehen. Ein nachgebauter Knopf aus <div> und
   JavaScript müsste all das von Hand nachliefern — und liefert es
   erfahrungsgemäss halb.

   `appearance: none` schaltet die Systemdarstellung ab; gezeichnet wird
   mit ::before. Der sichtbare Fokus kommt aus der Regel weiter unten
   (.tarif:has(input:focus-visible)) UND zusätzlich am Knopf selbst, damit
   er auch ausserhalb einer Karte sichtbar bleibt. */

.tarif input[type="radio"],
.tarif input[type="checkbox"],
.bestaetigung input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    border: 2px solid #cdc3c8;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tarif input[type="radio"], .bestaetigung input[type="radio"] { border-radius: 50%; }
.tarif input[type="checkbox"] { border-radius: 7px; }

.tarif input[type="radio"]::before,
.bestaetigung input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform .12s ease;
}
/* Das Häkchen als CSS-Zeichnung statt als Schriftzeichen: Ein „✓" aus der
   Schrift sitzt je nach Familie anders in der Zeile und fehlt in manchen
   ganz. */
.tarif input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 6px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -2px) scale(0);
    transition: transform .12s ease;
}

.tarif input:hover, .bestaetigung input[type="radio"]:hover { border-color: var(--bordeaux); }

.tarif input:checked, .bestaetigung input[type="radio"]:checked {
    border-color: var(--bordeaux);
    background: var(--bordeaux);
}
.tarif input[type="radio"]:checked::before,
.bestaetigung input[type="radio"]:checked::before { transform: scale(1); }
.tarif input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -2px) scale(1); }

.tarif input:focus-visible, .bestaetigung input[type="radio"]:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
}

/* Die gewählte Karte deutlich markiert — kräftigerer Rand und ein
   farbiger Schein, damit die Auswahl auch aus dem Augenwinkel zu sehen
   ist und nicht nur am 22-px-Knopf hängt. */
.tarif:has(input:checked) {
    border-color: var(--bordeaux);
    border-width: 2px;
    /* 1 px weniger Innenabstand als `.tarif` (var(--f-md) var(--f-lg)),
       damit der dickere Rand die Karte nicht um 2 px wachsen und die
       Liste beim Anklicken springen lässt. */
    padding: 13px 17px;
    background: #fffdfd;
    box-shadow: 0 0 0 3px var(--bordeaux-soft), var(--shadow);
}

/* Windows-Kontrastmodus: Dort werden eigene Farben ersetzt, ein
   selbstgezeichneter Knopf verschwände. Deshalb dort zurück auf die
   Systemdarstellung — sie ist in diesem Modus die richtige. */
@media (forced-colors: active) {
    .tarif input[type="radio"],
    .tarif input[type="checkbox"],
    .bestaetigung input[type="radio"] { appearance: auto; -webkit-appearance: auto; }
}

/* Wer Bewegung abbestellt hat, bekommt die Auswahl ohne Übergang —
   sichtbar ist sie trotzdem, sie erscheint nur sofort. */
@media (prefers-reduced-motion: reduce) {
    .tarif input, .bestaetigung input[type="radio"],
    .tarif input::before, .bestaetigung input[type="radio"]::before { transition: none; }
}

/* ---------- Zusatzleistungen ----------

   Dieselben Karten wie beim Tarif (.tarif), nur mit Kästchen statt
   Auswahlknopf — dass hier mehrere Zeilen gleichzeitig gelten dürfen,
   sagt schon die Form des Indikators.

   🔴 Der Preis steht bei jeder Zeile, die Betonung liegt aber bewusst
   nicht so stark auf ihm wie bei den Tarifen: Dieser Betrag wird nicht
   verrechnet, er ist eine Hausnummer für das Gespräch. */

.zusatz-einleitung {
    background: var(--gold-soft);
    border-radius: var(--radius-sm);
    padding: var(--f-md) var(--f-lg);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 var(--f-xs);
}
.zusatz-einleitung .unveraendert { display: block; margin-top: 4px; color: var(--muted); }

.zusatz-gruppe {
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
    margin: var(--f-md) 0 var(--f-xs);
}

.tarif.zusatz .preis-zeile b { font-size: 1rem; }
.tarif.zusatz .preis-zeile { color: var(--muted); }

/* Der zweite Betrag einer Leistung — der Monatsbetrag der Website-Pakete,
   das Kilometergeld der Vor-Ort-Schulung. Eine Stufe kleiner als der
   Hauptbetrag, weil er ihm untergeordnet ist, aber nicht kleiner als der
   Erklärungstext darunter: Er ist eine Zahl, die jemand zahlt. */
.tarif.zusatz .preis-zeile.neben { font-size: 13px; margin-top: 1px; }
.tarif.zusatz .preis-zeile.neben b { font-size: .95rem; }

.zusatz-hinweis {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    border-left: 3px solid var(--bordeaux);
    padding: 2px 0 2px 14px;
    margin: var(--f-2xs) 0 var(--f-lg);
}
.zusatz-hinweis strong { color: var(--ink); }

/* Schritt 2: die Auswahl, getrennt vom zu zahlenden Betrag. */
.zusatz-block {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-warm);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.zusatz-auswahl { list-style: none; margin: 0; padding: 0; }
.zusatz-auswahl li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 16px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}
.zusatz-auswahl li:first-child { border-top: 0; padding-top: 0; }
.zusatz-auswahl .name { font-weight: 600; }
.zusatz-auswahl .betrag { color: var(--muted); font-size: 14px; }
/* Der zweite Betrag steht in einer eigenen Zeile über die volle Breite —
   in der Flex-Zeile daneben stünde er als dritte Spalte und sähe aus wie
   eine Alternative zum ersten. */
.zusatz-auswahl .betrag.neben { flex: 0 0 100%; font-size: 13px; }
.zusatz-block .hilfe { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- Zusatzleistungen: ausklappbar (Schritt 1) ----------

   Auftrag Robert, 2026-09-17: „so viel zu scrollen" — 17 Leistungen standen
   immer offen da. Ein <details>/<summary> statt JavaScript, weil die
   Bestellstrecke bewusst ohne JS funktioniert (html:not(.js)) und ein
   zugeklappter Block ohne JS leer bliebe.

   Die Trennlinie über dem Abschnitt (bisher am h2 selbst) sitzt jetzt am
   <details>, weil das h2 in die anklickbare Kopfzeile gewandert ist und
   selbst keinen Rand mehr braucht. */
.zusatz-ausklappbar {
    margin: var(--f-lg) 0 var(--f-sm);
    padding-top: var(--f-md);
    border-top: 1px solid var(--line);
}
.karte > .zusatz-ausklappbar:first-of-type { border-top: 0; padding-top: 0; }

.zusatz-ausklappbar > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    padding: 6px 8px;
    margin: -6px -8px;
    border-radius: var(--radius-sm);
}
/* Chrome/Safari zeichnen zusätzlich zum `list-style` noch ein eigenes
   Dreieck — ohne diese Zeile stünden zwei Anzeiger nebeneinander. */
.zusatz-ausklappbar > summary::-webkit-details-marker { display: none; }
.zusatz-ausklappbar > summary h2 {
    margin: 0;
    padding: 0;
    border-top: 0;
    flex: 1 1 auto;
}
.zusatz-ausklappbar > summary:hover h2 { color: var(--bordeaux); }
.zusatz-ausklappbar > summary:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
}

.zusatz-anzahl {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

/* Das eigene +/− statt des Browser-Dreiecks — passt zu den selbst
   gezeichneten Kästchen und Auswahlknöpfen der Tarifzeilen. */
.zusatz-marker {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--bordeaux);
    font-weight: 700;
    line-height: 1;
}
.zusatz-marker::before { content: "+"; }
.zusatz-ausklappbar[open] > summary .zusatz-marker::before { content: "\2212"; }

.zusatz-ausklappbar > summary + * { margin-top: var(--f-md); }

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

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 13px 26px;
    font: inherit;
    font-weight: 600;
    background: var(--bordeaux);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(125, 60, 84, .28);
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    text-decoration: none;
}
button:hover, .btn:hover { background: var(--bordeaux-dark); box-shadow: 0 8px 26px rgba(125, 60, 84, .36); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--bordeaux-dark); outline-offset: 2px; }
button.leise {
    background: #fff;
    border-color: var(--line);
    color: var(--bordeaux);
    box-shadow: none;
}
button.leise:hover { background: #fff; border-color: var(--bordeaux); box-shadow: none; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: var(--f-lg); }
@media (max-width: 480px) {
    .knopfreihe { flex-direction: column; align-items: stretch; }
    .knopfreihe button { width: 100%; }
}

/* ---------- Meldungen ---------- */

.hinweis {
    background: var(--bordeaux-soft);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--bordeaux-dark);
}
.fehler {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
    color: #991b1b;
    font-size: 14px;
}
.fehler ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- Preis und Zusammenfassung ---------- */

.preis-block {
    background: var(--gold-soft);
    border: 1px solid #f3e4c6;
    border-radius: var(--radius);
    padding: 18px 20px;
}
.preis-block .hilfe { margin-top: 4px; }
.preis { font-family: var(--display); font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.preis .klein { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--muted); }
.bestellknopf-hinweis { font-size: 14px; color: var(--ink); margin-top: 14px; line-height: 1.55; }

dl.uebersicht {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    font-size: 14px;
    margin: 0;
    background: var(--bg-warm);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
}
dl.uebersicht dt { color: var(--muted); }
dl.uebersicht dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Der Nachsatz hinter einer Wachstumsangabe („wir prüfen das und melden
   uns"). Leichter als die Angabe selbst — er ist die Einordnung, nicht der
   Wert; fett gesetzt wie die Zeile sonst läse er sich wie eine Zusage. */
dl.uebersicht dd .angabe-nachsatz { font-weight: 400; color: var(--muted); }

@media (max-width: 480px) {
    dl.uebersicht { grid-template-columns: 1fr; gap: 2px; }
    dl.uebersicht dd { margin-bottom: 10px; }
    dl.uebersicht dd:last-child { margin-bottom: 0; }
}

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

.erledigt-zeichen {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e7f3ec;
    color: #1c7c4a;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    .karte { padding: var(--f-lg) 16px; border-radius: var(--radius); }
    main { margin-top: var(--f-md); padding: 0 16px; }
    .kopf, .vertrauensband { padding-left: 16px; padding-right: 16px; }
    .tarifleiste { padding: var(--f-xs) var(--f-md); }
}

/* Die Pakete nebeneinander in einer Zeile (Auftrag Robert, 2026-09-17:
   „dass sich das bei den ganzen paketen in einer zeile ausgeht"). Erst ab
   900px, gemessen an den echten Karten: Darunter würde jede Spalte
   schmaler als der Modultext einer Karte („Komplett" hat acht Module)
   sinnvoll umbrechen kann. Am Handy bleibt die Liste wie bisher einspaltig
   — `.tarif-liste` weiter oben setzt dafür bereits `grid-template-columns`
   implizit auf eine Spalte (der Browser-Default für Grid ohne eigene
   Spaltendefinition).

   Fünf statt vier seit „individuell" (Basis + Module) dazukam — dieselbe
   Regel, nur um eine Spalte erweitert. */
@media (min-width: 900px) {
    .pakete-liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Die acht Einzelmodule von „individuell": zwei Spalten statt einer langen
   Liste, sobald der Bildschirm dafür breit genug ist. Dieselbe 640px-Grenze
   wie bei `.zwei-spalten` weiter oben — darunter (Handy) bleibt es bei
   einer Spalte. */
@media (min-width: 640px) {
    .modul-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Der Aufwandsvorbehalt bei den Zusatzleistungen.
   Kleiner als der Fliesstext, aber NICHT grau-auf-grau: Ein Vorbehalt, den
   man ueberliest, erfuellt seinen Zweck nicht. Der Stern an den Betraegen
   traegt dieselbe Farbe, damit die Verbindung ohne Suchen erkennbar ist. */
.zusatz-vorbehalt {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft, #fbf1de);
  border-radius: var(--radius-sm, 10px);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.vorbehalt-stern {
  color: var(--gold-ink, #8a5d14);
  font-weight: 700;
}