/* =========================================================================
   Verkaufsseite, Kasse und Rechtsseiten.

   Eigenes Stylesheet fuer Aufbau und Typografie - aber NICHT fuer Farben.
   Die kommen aus base.css, das vor dieser Datei geladen werden muss.

   Der typografische Unterschied ist Absicht und bleibt: Auf der
   Verkaufsseite wird gelesen, im Toolkit wird gearbeitet. Serif zum Lesen,
   Sans zum Bedienen - dieselbe Regel, die eine Zeitung zwischen Artikel und
   Kursteil zieht.
   ========================================================================= */

:root{
  /* Die Verkaufsseite hatte eine eigene Farbliste: anderes Gruen, andere
     Grautoene, kein Dunkelmodus. Wer hier kaufte, landete danach sichtbar
     bei einer anderen Firma. Die Namen bleiben deutsch, damit die Regeln
     unten unveraendert weiterlesen koennen - die Werte kommen jetzt aus
     base.css und sind damit ueberall dieselben. */
  --papier:var(--bg);
  --flaeche:var(--card);
  --flaeche2:var(--brand-soft);
  --linie:var(--line);
  --linie-stark:var(--line-stark);
  --tinte:var(--ink);
  --tinte2:var(--ink-2);
  --tinte3:var(--ink-3);      /* war #6A8185 und damit bei 3,87 - unter AA */
  --gruen:var(--brand);
  --gruen-hell:var(--brand-soft);
  --gruen-dunkel:var(--brand-2);
  --rost:var(--warn-ink);     /* als Text; die Flaeche dazu ist --warn-soft */
  --rost-hell:var(--warn-soft);
  /* --gold ist ersatzlos entfallen: #C9A227 lag als Text bei 2,42 und war
     damit fuer diese Leserschaft schlicht nicht lesbar. */
  --schatten:var(--shadow);
  --rund:var(--radius);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font:1rem/1.62 var(--font-lesen);
}
h1,h2,h3,h4,.btn,label,th,nav,.augenbraue,.marke,.klein{
  font-family:var(--font);
}
h1{font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.1;letter-spacing:-.02em;
   margin:0 0 16px;text-wrap:balance;font-weight:700}
h2{font-size:1.3rem;letter-spacing:-.012em;margin:0 0 12px;font-weight:600}
h3{font-size:1.1rem;letter-spacing:-.008em;margin:0 0 8px;font-weight:600}
p{margin:0 0 14px}
a{color:var(--gruen);text-underline-offset:2px}
.innen{max-width:940px;margin:0 auto;padding:0 20px}
.schmal{max-width:680px}
.klein{font-size:.86rem;color:var(--tinte3);line-height:1.5}
.stern{color:var(--rost)}

/* --- Held ---------------------------------------------------------------- */
.held{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:64px 0 56px}
.held .augenbraue{font-size:.78rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gruen);margin:0 0 14px}
.held .lead{font-size:1.08rem;color:var(--tinte2);max-width:58ch;margin:0 0 26px}
.held h1{max-width:24ch}

.banner{background:var(--gruen-hell);border-bottom:1px solid var(--linie);
  padding:12px 0;font-size:.94rem;color:var(--tinte2)}

/* --- Knöpfe -------------------------------------------------------------- */
.btn{
  display:inline-block;font-size:.96rem;font-weight:600;
  background:var(--gruen);color:var(--auf-brand);border:1px solid var(--gruen);
  padding:11px 22px;border-radius:7px;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel)}
.btn:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.btn.gross{font-size:1.06rem;padding:14px 30px}
.btn.small{font-size:.86rem;padding:10px 16px}
.btn.ghost{background:transparent;color:var(--gruen);border-color:var(--linie-stark)}
.btn.ghost:hover{background:var(--gruen-hell);border-color:var(--gruen)}
button.btn{font-family:inherit}

/* --- Abschnitte ---------------------------------------------------------- */
main section{margin:52px 0}
.warum,.garantie{max-width:62ch}

/* --- Pakete -------------------------------------------------------------- */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:0 0 18px}
.paket{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);
  padding:26px 24px;display:flex;flex-direction:column;min-width:0;
  box-shadow:var(--schatten);position:relative;
}
.paket.empfohlen{border:2px solid var(--gruen);padding:25px 23px}
.marke{position:absolute;top:-11px;left:24px;background:var(--gruen);color:var(--auf-brand);
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:4px}
.paket .kurz{color:var(--tinte3);font-size:.94rem;margin:0 0 14px}
.paket .preis{margin:0 0 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.paket .preis b{font-size:2rem;letter-spacing:-.02em;
  font-family:"Segoe UI",-apple-system,sans-serif;font-variant-numeric:tabular-nums}
.paket .preis s{color:var(--tinte3);font-size:1rem}
.paket ul{margin:0 0 22px;padding-left:20px;font-size:.94rem;flex:1}
.paket li{margin-bottom:7px}
.paket .btn{text-align:center}

/* --- Fragen -------------------------------------------------------------- */
details{border-bottom:1px solid var(--linie);padding:2px 0}
/* Mindestens 44 Pixel hoch: Eine Frage aufzuklappen ist eine Schaltflaeche,
   auch wenn sie wie eine Zeile aussieht. Vorher waren es 25. */
summary{cursor:pointer;font-weight:600;font-family:"Segoe UI",-apple-system,sans-serif;
  font-size:.98rem;list-style:none;min-height:44px;display:flex;align-items:center}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--gruen);font-weight:700;margin-right:10px}
details[open] summary::before{content:"–"}
details p{margin:10px 0 0 24px;font-size:.95rem;color:var(--tinte2)}

/* --- Formular ------------------------------------------------------------ */
.block{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);
  padding:24px;margin:0 0 20px;box-shadow:var(--schatten)}
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld{display:flex;flex-direction:column;min-width:0}
.feld.breit{grid-column:1 / -1}
label{font-size:.88rem;font-weight:600;margin-bottom:5px;color:var(--tinte2)}
input[type=text],input[type=email],select{
  font:inherit;font-size:.98rem;padding:12px 12px;border:1px solid var(--linie-stark);
  border-radius:6px;background:var(--flaeche);color:var(--tinte);max-width:100%;
}
input:focus-visible,select:focus-visible{outline:3px solid var(--fokus);outline-offset:1px;
  border-color:var(--gruen)}
.kasten-wahl{display:flex;gap:12px;align-items:flex-start;font-weight:400;
  background:var(--flaeche2);border:1px solid var(--linie);border-radius:7px;
  padding:14px 16px;margin:0 0 14px;font-size:.94rem;line-height:1.5;cursor:pointer}
.kasten-wahl input{margin:3px 0 0;width:19px;height:19px;flex:none;accent-color:var(--gruen)}
.kasten-wahl:focus-within{border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-hell)}

/* --- Warenkorb ----------------------------------------------------------- */
.korb{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.96rem}
.korb td,.korb th{padding:9px 0;border-bottom:1px solid var(--linie);text-align:left}
.korb .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.korb tfoot th{border-bottom:none;border-top:2px solid var(--tinte);
  padding-top:12px;font-size:1.06rem;font-weight:700}
.korb .rabatt td{color:var(--gruen)}
.abschluss{border:2px solid var(--gruen)}

/* --- Meldungen ----------------------------------------------------------- */
.meldung{border-left:3px solid;padding:14px 16px;margin:0 0 20px;border-radius:0 6px 6px 0;
  font-size:.95rem}
.meldung.fehler{border-color:var(--rost);background:var(--rost-hell);color:#7C3411}
.meldung.hinweis{border-color:var(--gruen);background:var(--gruen-hell);color:var(--tinte2)}
.meldung ul{margin:8px 0 0;padding-left:20px}
.meldung code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;
  background:rgba(0,0,0,.05);padding:1px 5px;border-radius:3px}

.erfolg{background:var(--flaeche);border:2px solid var(--gruen);border-radius:var(--rund);
  padding:36px 28px;margin:32px 0 24px;text-align:center;box-shadow:var(--schatten)}
.erfolg .lead{font-size:1.06rem;color:var(--tinte2);margin:0 0 22px}
.erfolg .klein{margin-top:14px}

.zurueck{margin:28px 0 8px;font-size:.9rem}

/* --- Rechtsseiten -------------------------------------------------------- */
.recht{padding-bottom:40px}
.recht h2{font-size:1.06rem;margin:32px 0 8px}

/* Eine Landeseite ist kein Rechtstext. Sie erbt von .recht die Zeilenbreite -
   66 Zeichen liest sich auch bei 940 Pixeln Spalte noch angenehm -, aber ihre
   Abschnitte muessen als Abschnitte erkennbar bleiben. */
.landeseite h2{font-size:1.4rem;margin:0 0 12px}
.landeseite h3{font-size:1.05rem}
.landeseite section{margin:52px 0}
.recht p{max-width:66ch}

/* --- Fuß ----------------------------------------------------------------- */
.fuss{border-top:1px solid var(--linie);margin-top:64px;padding:28px 20px 44px;
  max-width:940px;margin-left:auto;margin-right:auto;color:var(--tinte3);font-size:.88rem}
.fuss nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.fuss nav a{color:var(--tinte2);text-decoration:none;font-size:.9rem;
  display:inline-block;padding:11px 0}
.fuss nav a:hover{text-decoration:underline}
.fuss p{max-width:66ch;margin:0 0 8px;line-height:1.55}

@media (max-width:600px){
  .held{padding:44px 0 40px}
  .raster2{grid-template-columns:1fr}
  .block{padding:20px 17px}
  .erfolg{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- Rechner und Inhaltsseiten -------------------------------------------- */
/* Der erste Absatz eines Abschnitts traegt die Aussage. Er wird hervorgehoben,
   weil er sowohl fuer eilige Leser als auch fuer zitierende Maschinen der
   wichtigste Satz der Seite ist. */
/* Fliesstext bricht nach 66 Zeichen um. Bei 940 Pixeln Spalte und 17 Pixel
   Grundschrift waeren es ueber 100 - die naechste Zeile zu finden kostet dann
   mehr Aufmerksamkeit als der Satz selbst, und zwar genau dort, wo die
   Naheinstellung des Auges nachlaesst. Karten und Tabellen sind ausgenommen:
   Sie haben ihre eigene, schmalere Spalte. */
main section > p, .kastenwerbung p, .hebel p, .klein, details p,
.schritte li, .fuerwen p{max-width:66ch}

.antwort{font-size:1.04rem;color:var(--tinte);border-left:3px solid var(--gruen);
  padding-left:16px;margin:0 0 16px}
.quelle{font-size:.86rem;color:var(--tinte3);font-style:italic}

.rechnerblock{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--rund);padding:28px 26px;box-shadow:var(--schatten);
  scroll-margin-top:20px}
.rechner{margin:20px 0 0}
.rechner .raster2{margin-bottom:18px}
.feldhinweis{font-size:.86rem;color:var(--tinte3);margin-top:4px;line-height:1.4}

.ergebnis{background:var(--gruen-hell);border:1px solid var(--gruen);
  border-radius:var(--rund);padding:22px 24px;margin:24px 0 0;scroll-margin-top:20px}
.ergebnis h3{margin:0 0 12px;color:var(--gruen-dunkel)}
.ergebnis p{margin:0 0 10px}
.ergebnis p:last-child{margin-bottom:0}
.ergebnis .termin{font-size:1.06rem;padding-top:10px;border-top:1px solid var(--gruen);
  margin-top:14px}

.schritte{counter-reset:sr;list-style:none;padding:0;margin:0 0 16px}
.schritte li{counter-increment:sr;position:relative;padding:0 0 0 42px;margin-bottom:12px}
.schritte li::before{content:counter(sr);position:absolute;left:0;top:1px;
  width:27px;height:27px;border-radius:50%;background:var(--gruen);color:var(--auf-brand);
  font-family:"Segoe UI",-apple-system,sans-serif;font-weight:700;font-size:.86rem;
  display:grid;place-items:center}

/* Breite Tabellen scrollen in sich selbst, nicht die Seite.
   Ohne das schob eine dreispaltige Tabelle auf dem Handy die ganze Seite nach
   rechts - der Leser wischt dann am Text vorbei, statt ihn zu lesen. Auf
   /kaufen war das schon vorher so, nur um 33 Pixel und deshalb unauffaellig. */
.tabelle{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch;
  /* Schatten an den Raendern, solange seitlich noch etwas zu holen ist. Er
     verschwindet von selbst, sobald man am Ende angekommen ist. Ohne ihn
     sieht eine abgeschnittene Spalte auf dem Handy nach einem Fehler aus,
     und niemand kommt auf die Idee zu wischen. */
  background:
    linear-gradient(to right, var(--papier) 40%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--papier) 40%, rgba(255,255,255,0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--linie-stark), rgba(255,255,255,0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--linie-stark), rgba(255,255,255,0)) right center / 12px 100% no-repeat scroll;}
.tabelle table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:32rem}
.tabelle th,.tabelle td{padding:10px 12px;border-bottom:1px solid var(--linie);
  text-align:left;vertical-align:top}
.tabelle thead th{font-family:"Segoe UI",-apple-system,sans-serif;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinte3);
  border-bottom:2px solid var(--linie-stark);white-space:nowrap}
/* base.css setzt fuer das Toolkit ein globales th: Kapitaelchen, graue
   Flaeche, kein Umbruch. In einer Textspalte ist das falsch - dort steht in
   der ersten Spalte kein Spaltentitel, sondern ein Begriff, und der soll
   lesbar sein statt zu schreien. Deshalb hier zurueckgesetzt. */
.tabelle thead th{background:transparent}
.tabelle tbody th{font-weight:600;color:var(--tinte);background:transparent;
  text-transform:none;letter-spacing:0;font-size:.94rem;white-space:normal;
  font-family:"Segoe UI",-apple-system,sans-serif}
.tabelle tbody tr:last-child th,.tabelle tbody tr:last-child td{border-bottom:none}

/* Drei Hebel nebeneinander. Bewusst keine Karten mit Schatten: Der Abschnitt
   steht direkt ueber den Paketen, und zwei Kartenraster untereinander lesen
   sich wie zwei Preistabellen. */
.raster3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;margin:24px 0}
.hebel{border-top:3px solid var(--gruen);padding-top:14px}
.hebel h3{margin:0 0 8px;font-size:1.02rem}
.hebel p{font-size:.95rem;color:var(--tinte2);margin:0}

.kastenwerbung{background:var(--flaeche);border:2px solid var(--gruen);
  border-radius:var(--rund);padding:26px 24px;margin:40px 0 0;box-shadow:var(--schatten)}
.kastenwerbung h2{margin-top:0}