/* 14.09.2026 — dieselbe Radius-Regel wie die Seiten drumherum.
   Ausnahme mit Grund: die Zahl-Abzeichen (Visa, Mastercard) behalten 5px —
   sie sind rund 20 px breit, ein 8er-Radius waere dort fast ein Kreis. */
:root{ --r-fein:8px; --r-feld:10px; --r-karte:16px; --r-gross:22px; }

/* Shop-Seiten (paket.html, kasse.html, danke.html) — ergaenzt leistung.css.
   Gleiche Variablen, gleiche Rundungen; nur die Stuecke, die die
   Leistungsseiten nicht haben: Preiskasten, Warenkorb, Formular, Zahlarten. */

/* Preiskasten auf der Paketseite */
.preis-kasten{margin:26px 0 0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-gross); padding:clamp(22px,4vw,32px); display:grid;
  grid-template-columns:1fr auto; gap:18px 28px; align-items:center}
@media (max-width:640px){ .preis-kasten{grid-template-columns:1fr} }
.preis-kasten .preis{font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.05; color:var(--ink)}
.preis-kasten .preis-unter{display:block; font-size:.9rem; color:var(--ink-faint); margin-top:6px}
.preis-kasten .preis-was{margin:0; color:var(--ink-soft); font-size:.98rem}
.preis-kasten .preis-aktion{display:flex; flex-direction:column; gap:10px; align-items:stretch}
.preis-kasten .preis-aktion .btn{justify-content:center}
.preis-kasten .preis-klein{font-size:.82rem; color:var(--ink-faint); text-align:center; margin:0}
/* Die Logo-Zeile darf die Preisspalte nicht quetschen: Das Raster ist
   „1fr auto“, und eine lange Zeile in der auto-Spalte drückte den Preis auf
   zwei Zeilen (gemessen 11.09.). width:0 + min-width:100% nimmt sie aus der
   Breitenrechnung heraus, sie bricht dann innerhalb der Spalte um. */
.preis-kasten .preis-klein[data-zahlwege]{width:0; min-width:100%; box-sizing:border-box}
.preis-kasten .preis-aktion{min-width:300px}
@media (max-width:640px){ .preis-kasten .preis-aktion{min-width:0} }
.preis-kasten .zl-zeile{justify-content:center}

/* Zwei Listen nebeneinander: drin / nicht drin */
.drin-raus{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
@media (max-width:640px){ .drin-raus{grid-template-columns:1fr} }
.drin-raus > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-karte); padding:20px}
.drin-raus h3{margin:0 0 10px; font-size:1.02rem}
.drin-raus ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
/* 11.09.2026: NICHT mehr flex. Ein Flex-li macht aus jedem Inline-Kind (a, em,
   strong) eine eigene Spalte — der Link „dazubuchen" stand dadurch rechts
   neben dem Text, und das <em>Mitlesen</em> zerriss den ganzen Punkt in zwei
   Spalten. Der Kreis sitzt jetzt absolut links, der Text fliesst normal. */
.drin-raus li{position:relative; padding-left:29px; font-size:.95rem; color:var(--ink-soft)}
.drin-raus li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--accent-wash); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent)}
.drin-raus .raus li::before{background:transparent; border-color:var(--line-strong)}

/* Kasse */
.kasse-raster{display:grid; grid-template-columns:1.2fr .9fr; gap:22px; align-items:start; margin-top:22px}
@media (max-width:760px){ .kasse-raster{grid-template-columns:1fr} .kasse-korb{order:-1} }
.kasse-korb{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-karte); padding:20px; position:sticky; top:100px}
.kasse-korb h2{margin:0 0 12px; font-size:1.02rem}
/* Korbzeile (10.09.2026 umgebaut): Name in voller Breite, darunter Menge und
   Einzelpreis. Vorher standen Name und Preis nebeneinander, und der Preisblock
   mit nowrap drueckte den Namen in sechs Zeilen. */
.korb-zeile{padding:10px 0; border-top:1px solid var(--line); font-size:.95rem}
.korb-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:14px}
.korb-kopf b{font-weight:600; line-height:1.35}
.korb-preis{white-space:nowrap; color:var(--ink); flex:none}
.korb-unter{color:var(--ink-faint); font-size:.82rem; margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.korb-unter b{color:var(--ink); font-weight:600; min-width:1.2em; text-align:center}
.korb-summe{display:flex; justify-content:space-between; padding:6px 0; font-size:.95rem; color:var(--ink-soft)}
.korb-summe.gesamt{border-top:1px solid var(--line-strong); margin-top:6px; padding-top:12px; font-weight:600; color:var(--ink); font-size:1.08rem}
.kasse-form{display:flex; flex-direction:column; gap:14px}
/* 20.09.2026: display:flex schlaegt das hidden-Attribut. Ohne diese Zeile blieb das Formular stehen
   („Zahlungsarten werden geladen …“), obwohl shop.js es bei nicht erreichbarer Kasse ausblendet. */
[hidden]{display:none !important}
.kasse-form fieldset{border:1px solid var(--line); border-radius:var(--r-karte); padding:18px 20px 8px; margin:0; background:var(--surface)}
.kasse-form legend{padding:0 8px; font-weight:600; font-size:.95rem; color:var(--ink)}
.kasse-form label{display:block; font-size:.9rem; color:var(--ink-soft); margin-bottom:12px}
.kasse-form label span{color:var(--ink-faint); font-weight:400}
.kasse-form input[type=text],.kasse-form input[type=email],.kasse-form input[type=tel],.kasse-form textarea,.kasse-form select{
  display:block; width:100%; margin-top:5px; font:inherit; color:var(--ink); background:var(--ground);
  border:1px solid var(--line-strong); border-radius:var(--r-feld); padding:11px 13px}
.kasse-form select{color-scheme:dark}
.kasse-form input:focus-visible,.kasse-form textarea:focus-visible,.kasse-form select:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.kasse-form textarea{min-height:90px; resize:vertical}
.form-zeile{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-zeile.plz{grid-template-columns:120px 1fr}
@media (max-width:520px){ .form-zeile,.form-zeile.plz{grid-template-columns:1fr} }
.zahlart{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line-strong);
  border-radius:var(--r-feld); margin-bottom:10px; cursor:pointer; color:var(--ink)}
.zahlart:has(input:checked){border-color:var(--accent); background:var(--accent-wash)}
.zahlart input{margin-top:5px; accent-color:var(--accent)}
/* Der Name der Zahlart ist die Ueberschrift der Zeile — er soll sich vom
   Erklaertext abheben, damit man beim Ueberfliegen die Wahl trifft und nicht
   drei Absaetze liest. */
.zahlart b{color:var(--accent-ink); font-size:1.02rem; letter-spacing:.01em}
.zahlart:has(input:checked) b{color:var(--ink)}
.zahlart small{display:block; color:var(--ink-faint); font-size:.85rem; margin-top:3px; line-height:1.5}
.haken{display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:.92rem; margin-bottom:12px}
.haken input{margin-top:4px; flex:0 0 auto; accent-color:var(--accent)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.kasse-meldung{border:1px solid var(--line-strong); border-radius:var(--r-feld); padding:12px 16px; font-size:.95rem; color:var(--ink)}
.kasse-meldung.warn{border-color:var(--accent); background:var(--accent-wash)}
.kasse-meldung ul{margin:6px 0 0; padding-left:20px}
.kasse-fehler{color:var(--ink); background:var(--accent-wash); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--r-feld); padding:14px 16px}
.kasse-form .btn{align-self:flex-start}
.rechts-hinweis{font-size:.85rem; color:var(--ink-faint); margin-top:4px}

/* Danke */
.danke-kasten{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-gross); padding:clamp(22px,4vw,32px); margin-top:22px}
.danke-kasten .nr{font-size:1.4rem; font-weight:600; color:var(--ink)}
.danke-kasten ol{margin:12px 0 0; padding-left:22px; color:var(--ink-soft); display:flex; flex-direction:column; gap:8px}

/* Zusatzplaetze (09.09.): zwei Karten unter #plaetze auf der Paketseite */
.plaetze-raster{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
@media (max-width:640px){ .plaetze-raster{grid-template-columns:1fr} }
.plaetze-karte{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-karte); padding:20px;
  display:flex; flex-direction:column; gap:12px}
.plaetze-karte h3{margin:0; font-size:1.02rem}
.plaetze-karte p{margin:0; font-size:.95rem; color:var(--ink-soft)}
.plaetze-karte label{display:block; font-size:.9rem; color:var(--ink-soft)}
.plaetze-karte select,.plaetze-karte input{display:block; width:100%; margin-top:5px; font:inherit; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-strong); border-radius:var(--r-feld); padding:11px 13px; color-scheme:dark}
.plaetze-karte input{font-family:Consolas,'Courier New',monospace; text-transform:uppercase; letter-spacing:.05em}
.plaetze-karte select:focus-visible,.plaetze-karte input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.plaetze-karte .btn{align-self:flex-start; margin-top:4px}
.plaetze-karte form{display:flex; flex-direction:column; gap:12px}

/* Mengen-Stepper im Warenkorb (nur bei Zusatzplaetzen) */
.korb-menge{display:inline-flex; align-items:center; gap:6px; vertical-align:middle}
.korb-menge button{font:inherit; font-size:1.05rem; line-height:1; width:32px; height:32px; border-radius:var(--r-fein);
  border:1px solid var(--line-strong); background:var(--ground); color:var(--ink); cursor:pointer; padding:0}
.korb-menge button:hover{border-color:var(--accent)}

/* ── Testbetrieb ──────────────────────────────────────────────────────────
   Sichtbar und nicht wegklickbar. Dieselbe Haltung wie beim Probelauf-Balken
   im Dashboard: Wer testet, soll es sehen — und wer live geht, soll merken,
   wenn er den Schalter vergessen hat. */
.kasse-probe{margin:0 0 22px;padding:14px 16px;border-radius:var(--r-feld);
  background:var(--accent-wash);border:1px solid var(--accent);
  color:var(--ink);font-size:.92rem;line-height:1.55}
.kasse-probe a{color:var(--accent-ink)}
/* Zahl-Logos (11.09.2026): kleine Abzeichen statt fremder Bilddateien. Gemalt
   wird nur, was /zahlarten nennt — ein Logo ohne Zahlweg dahinter wäre die
   nächste stille Lüge. */
.zl{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:44px;padding:0 7px;
  border:1px solid var(--line-strong);border-radius:5px;background:#fff;vertical-align:middle;
  font:700 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.02em;color:#111;box-sizing:border-box}
.zl i{font-style:normal;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.zl-visa{color:#1a1f71;font-style:italic!important;font-size:13px;letter-spacing:.04em}
.zl-mc b{display:inline-block;width:15px;height:15px;border-radius:50%;background:#eb001b}
.zl-mc b+b{background:#f79e1b;margin-left:-6px;opacity:.9}
.zl-amex{color:#016fd0;font-size:11px;letter-spacing:.08em}
.zl-ap{color:#111;font-size:11.5px}
.zl-gp b{color:#4285f4;font-size:13px}
.zl-gp{color:#3c4043}
.zl-kl{color:#111;font-size:12px}
.zl:has(.zl-kl){background:#ffb3c7;border-color:#ffb3c7}
.zl:has(.zl-ap){background:#111;border-color:#111}
.zl:has(.zl-ap) .zl-ap{color:#fff}
.zl-am{color:#232f3e;font-size:11px}
.zl-sepa{color:#10298e;font-size:11px;letter-spacing:.06em}
.zl-pp b{color:#003087;font-style:italic;font-size:12.5px}
.zl-pp span{color:#009cde;font-style:italic;font-weight:700;font-size:12.5px}
.zl-re{color:var(--accent-ink);font-weight:600;font-size:11px}
.zl-zeile{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.zl-nach{display:block;margin-top:6px;color:var(--ink-faint);font-size:.85rem}
.zl-raten{display:block;margin-top:6px;color:var(--ink-faint);font-size:.82rem;line-height:1.5}
.korb-zahlwege{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.korb-zahlwege:empty{display:none}
.zahlart-logos{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.zahlart-raten{color:var(--ink-soft)!important}
.zahlart-probe{font-style:normal;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent);
  border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle}

/* Ausstattung waehlen (paket.html, 12.09.2026) */
.ausstattung{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px}
.aus-chip{font:inherit; text-align:left; display:flex; flex-direction:column; gap:3px; min-height:44px; padding:10px 14px;
  border-radius:var(--r-feld); border:2px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; flex:1 1 240px}
.aus-chip small{font-size:.78rem; color:var(--ink-faint); font-weight:400}
.aus-chip.an{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}