/* Aus start/index.php uebernommen am 12.10.2026 — die Kaufzone, die Maik
   dort gut findet, soll auch oben auf der Startseite stehen.
   Automatisch extrahiert, nicht abgetippt. */
:root{--blau:#143F6A;--blau-tief:#0f3358;--blau2:#0088CE;--orange:#ffa300;
      --gruen:#1ACD00;--text:#212529;--grau:#6b6b6b;--linie:#dfe3e7;
      --flaeche:#f8f8f8}

/* Kaufzone: Quelltext = Angebot zuerst; sichtbare Reihenfolge am Handy wie gewohnt */
.kaufzone{display:flex;flex-direction:column}
.buehne{position:relative;border-radius:6px;overflow:hidden;background:#0b2c46}
.buehne .traeger{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer}
.buehne img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.play svg{width:60px;height:60px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.35))}
.dauer{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;font-size:10.5px;
  font-weight:700;padding:2px 6px;border-radius:4px}
.buehne .dauer{bottom:38px}
.siegel{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.95);color:var(--blau);
  font-size:9.5px;font-weight:700;text-align:center;line-height:1.25;border-radius:50%;width:64px;
  height:64px;display:flex;align-items:center;justify-content:center;padding:6px;pointer-events:none}
.bewertung{position:absolute;left:0;right:0;bottom:0;background:rgba(20,63,106,.92);color:#fff;
  font-size:11.5px;font-weight:600;padding:7px 10px;pointer-events:none}
.streifen{display:flex;gap:7px;margin:9px 0 14px;overflow-x:auto;scrollbar-width:none;padding:2px}
.streifen::-webkit-scrollbar{display:none}
.streifen button{flex:none;position:relative;width:78px;padding:0;border:2px solid var(--linie);
  border-radius:8px;overflow:hidden;background:none;cursor:pointer;line-height:0}
.streifen button[aria-current="true"]{border-color:var(--blau)}
.streifen img{width:74px;height:56px;object-fit:cover;display:block}
.streifen .mini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.streifen .mini svg{width:22px;height:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
/* 4 Kurzzeile, Überschrift, Preis */
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--grau);text-transform:uppercase;
  margin:0 0 5px}
.preiszeile{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.preis{font-size:30px;font-weight:700;color:var(--blau)}
.preis-zusatz{font-size:13px;color:var(--grau);font-weight:600}
.mwst{font-size:11.5px;color:var(--grau);margin:0 0 15px}
/* 6 Paketkarten */
.abschnitt-titel{text-align:center;font-size:12px;font-weight:700;letter-spacing:1.4px;color:var(--grau);
  text-transform:uppercase;margin:22px 0 13px;display:flex;align-items:center;gap:10px}
.abschnitt-titel:before,.abschnitt-titel:after{content:"";flex:1;height:1px;background:var(--linie)}
.paket{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid var(--linie);
  border-radius:6px;padding:14px;margin-bottom:10px;position:relative;background:#fff;cursor:pointer;
  font:inherit;color:inherit}
.paket[aria-pressed="true"]{border-color:var(--blau2);box-shadow:inset 0 0 0 1px var(--blau2);background:#eef8fe}
.radio{width:19px;height:19px;border-radius:50%;border:2px solid #b9c4cc;flex:none;margin-top:2px;background:#fff}
.paket[aria-pressed="true"] .radio{border:6px solid var(--blau2)}
.paket .mitte{flex:1;min-width:0;display:block}
.paket .titel{display:block;font-size:17px;font-weight:700;line-height:1.3;margin-bottom:2px}
.paket .text{display:block;font-size:12.5px;color:var(--grau);line-height:1.4}
.paket .rechts{margin-left:auto;text-align:right;flex:none;display:block}
.paket .pp{display:block;font-size:17px;font-weight:700;color:var(--blau);white-space:nowrap}
.paket .ps{display:block;font-size:11px;color:var(--grau);white-space:nowrap;margin-top:1px}
.fahne{position:absolute;top:-10px;right:12px;background:var(--orange);color:#111;font-size:10px;
  font-weight:700;padding:3px 9px;border-radius:5px;letter-spacing:.4px}
.eigene{display:flex;align-items:center;gap:10px;border:1.5px dashed #c5d0d8;border-radius:6px;
  padding:11px 14px;margin-bottom:10px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.eigene[data-aktiv="1"]{border:1.5px solid var(--blau2);box-shadow:inset 0 0 0 1px var(--blau2);background:#eef8fe}
.eigene label{flex:1;min-width:150px}
.eigene .zaehler{display:flex;align-items:center;gap:6px;flex:none}
.eigene .zaehler button{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--linie);background:#fff;
  font-size:18px;font-weight:700;color:var(--blau);cursor:pointer;line-height:1}
.eigene input{width:64px;height:36px;border:1.5px solid var(--linie);border-radius:8px;text-align:center;
  font:inherit;font-weight:700;font-size:15px;color:var(--text);-moz-appearance:textfield}
.eigene input::-webkit-outer-spin-button,.eigene input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.eigene .erg{flex-basis:100%;font-size:12px;color:var(--grau);font-weight:600}
.eigene .erg:empty{display:none}
.knopf{display:block;text-align:center;background:var(--orange);color:#fff;font-weight:700;font-size:16px;
  padding:14px 18px;border-radius:3px;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  text-decoration:none;margin:18px 0 4px;transition:filter .15s}
.knopf.kaufknopf{color:#000}
.knopf:hover,.knopf-klein:hover,.leiste a:hover{filter:brightness(1.06)}
.knopf small{display:block;font-weight:400;font-size:12.5px;opacity:.95;margin-top:2px}
.kaufknopf{margin:6px 0 0}
.vertrauen{border:1px solid var(--linie);border-radius:4px;padding:11px 13px;margin:12px 0 4px;
  font-size:12.5px;display:grid;gap:7px}
.vertrauen div{display:flex;gap:8px;align-items:flex-start}
.videokarte .traeger{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer}
@media (max-height:480px) and (orientation:landscape) and (max-width:999px){
  .kopf .innen{height:48px} .kopf .logo img{height:20px} .knopf-klein{padding:6px 11px}
  .leiste .innen{padding:6px 14px} .leiste a{padding:9px 16px} body{padding-bottom:62px} [id]{scroll-margin-top:60px}
}
@media (max-width:359px){ .kopf .logo img{height:20px} .knopf-klein{padding:8px 10px} }

/* --- Rahmen und Aufteilung auf der Startseite ---------------------------
   Auf /start/ ist die Seite 620 px schmal und einspaltig; auf der Startseite
   stehen Video und Angebot nebeneinander. Deshalb hier ein eigenes Raster. */
.dsp-kz-aussen{background:#fff;padding:34px 0 40px;border-bottom:1px solid #e9edf1}
.dsp-kz{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,420px);
  gap:0 44px;align-items:start}
.dsp-kz-medien{min-width:0}
.dsp-kz-unterbild{font-size:13px;color:var(--grau);text-align:center;
  margin:11px 0 0}
.dsp-kz-angebot{min-width:0}
.dsp-kz-angebot h1{font-size:29px;font-weight:700;line-height:1.22;
  margin:0 0 13px;color:var(--text)}
.dsp-kz .paket{position:relative}
.dsp-kz .knopf{margin-top:4px}
.dsp-kz .knopf small{display:block;font-weight:400;font-size:12.5px;
  margin-top:3px;opacity:.85}
.dsp-kz-haken{color:var(--gruen);font-weight:700;flex:none}
.dsp-kz .vertrauen{font-size:13.5px}

@media (max-width:980px){
  .dsp-kz{grid-template-columns:1fr;gap:26px}
  .dsp-kz-angebot h1{font-size:24px}
}

.dsp-kz-nutzen{list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.dsp-kz-nutzen li{font-size:14.5px;color:#39414d;position:relative;
  padding-left:22px;line-height:1.4}
.dsp-kz-nutzen li:before{content:"✓";position:absolute;left:0;top:0;
  color:var(--gruen);font-weight:700}
@media (max-width:640px){.dsp-kz-nutzen{grid-template-columns:1fr}}

/* Nachtrag: Nutzen-Liste, Inklusive-Block und Akkordeon. */
.dsp-kz-fa li{display:flex;gap:9px;font-size:13.5px;line-height:1.45}
.inklusive{background:#f6f8fa;border-radius:4px;padding:10px 12px;margin:2px 0 10px;font-size:12px}
.inklusive div{display:flex;gap:7px;align-items:center;padding:3px 0}
.inklusive b{background:var(--blau);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;
  border-radius:4px;margin-left:auto;white-space:nowrap}
.akk details{border-bottom:1px solid var(--linie)}
.akk summary{padding:14px 2px;font-size:14px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.akk summary::-webkit-details-marker{display:none}
.akk summary:after{content:"";width:8px;height:8px;border-right:2px solid var(--grau);
  border-bottom:2px solid var(--grau);transform:rotate(45deg);flex:none;margin:0 4px 4px 0;transition:transform .15s}
.akk details[open] summary:after{transform:rotate(-135deg);margin-bottom:-4px}
.akk .inhalt{font-size:13.5px;color:#3d4349;padding:0 2px 14px;line-height:1.55}

/* Diese beiden Grundregeln standen in start/index.php verschachtelt und sind
   bei der Extraktion durchgerutscht — hier von Hand ergaenzt. */
.dsp-kz-fa{list-style:none;margin:18px 0 0;padding:0}
.dsp-kz-fa li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:14.5px;
  line-height:1.5;color:#39414d}
.dsp-kz-fa li b{color:var(--text)}
.akk{border-top:1px solid var(--linie);margin-top:18px}
.dsp-kz-haken{color:var(--gruen);font-weight:700;flex:none}

/* Kursbild an Stelle des Videos (Kursseiten). */
.dsp-kz-kursbild{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.dsp-kz-ohnebild{background:linear-gradient(135deg,#0d6e78,#17405f)}
.dsp-kz-fakten{font-size:13.5px;color:var(--grau);margin:-6px 0 14px}
.buehne{position:relative;border-radius:8px;overflow:hidden;background:#dde3e8}

/* ===========================================================================
   Korrekturen vom 12.10.2026 (Maiks Durchsicht)
   =========================================================================== */

/* 1 · EIGENE HUELLE.
   Vorher stand hier .container aus Bootstrap. Auf den Kursseiten ist
   Bootstrap gar nicht geladen — dort fehlte damit die Zentrierung und der
   ganze Block klebte am linken Rand, waehrend der Rest der Seite mittig
   stand. Diese Huelle haengt an nichts. */
.dsp-kz-huelle{max-width:1170px;margin:0 auto;padding:0 15px}

/* 2 · SCHRIFTGROESSEN.
   Die Regeln stammen von /start/ — einer 620 px schmalen Landingpage mit
   15 px Grundschrift. Auf der breiten Seite (16 px) wirkte die Kaufzone
   dadurch kleiner und wie eine fremde Schrift. Die Schriftart war immer
   dieselbe (gemessen), nur die Groesse wich ab. */
.dsp-kz .dsp-kz-fa li{font-size:16px;line-height:1.55}
.dsp-kz .akk summary{font-size:15.5px}
.dsp-kz .akk .inhalt{font-size:15px;line-height:1.6}
.dsp-kz .paket .titel{font-size:17.5px}
.dsp-kz .paket .text{font-size:13.5px}
.dsp-kz .paket .pp{font-size:17.5px}
.dsp-kz .paket .ps{font-size:12px}
.dsp-kz .preis{font-size:34px}
.dsp-kz .preis-zusatz{font-size:14px}
.dsp-kz .mwst{font-size:13px}
.dsp-kz .inklusive{font-size:13.5px}
.dsp-kz .inklusive b{font-size:11px}
.dsp-kz .vertrauen{font-size:14.5px}
.dsp-kz .eigene{font-size:14.5px}
.dsp-kz .kicker{font-size:12px}
.dsp-kz .abschnitt-titel{font-size:13px}
.dsp-kz .knopf{font-size:17px}
.dsp-kz .knopf small{font-size:13.5px}

/* 3 · Der Hinweis zum Videodienst, wie auf /start/ als ruhige Zeile unter
   der Buehne — nicht mehr als Beschriftung mitten auf dem Abspielknopf. */
.dsp-kz-videohinweis{font-size:12.5px;color:var(--grau);margin:9px 0 0;
  line-height:1.45}
.dsp-kz-videohinweis a{color:var(--blau2)}