/* NULLPUNKT – Stil der Kursseite
   Farben aus dem Kanal: pechschwarz, Kreideweiß mit Glow, keine Akzentfarbe. */

@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --nacht: #000000;
  --kreide: #f2f2f0;
  --asche: #8e8e8a;
  --schiefer: #1d1d1c;
  --kante: #2c2c2a;
  --fehler: #ff7a6b;
  --glow: 0 0 6px rgba(242, 242, 240, 0.55), 0 0 22px rgba(242, 242, 240, 0.25);
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --spalte: 40rem;
  --breit: 68rem;
}

* { box-sizing: border-box; }
html { background: var(--nacht); color: var(--kreide); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Sternenhimmel liegt hinter allem */
#himmel { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
#himmel.an { opacity: 1; }
.seite { position: relative; z-index: 1; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--kreide); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 8vw, 4.75rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.25rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
.leise { color: var(--asche); }
.klein { font-size: 0.875rem; line-height: 1.5; }
.mono { font-family: var(--mono); }

/* Kopfzeile */
.kopf {
  max-width: var(--breit); margin: 0 auto; padding: 1.25rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.marke { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 600; letter-spacing: 0.14em; font-size: 0.875rem; }
.marke svg { width: 14px; height: 28px; }

/* Abschnitte */
.abschnitt { max-width: var(--breit); margin: 0 auto; padding: 2.75rem 1.25rem; }
@media (min-width: 760px) { .abschnitt { padding: 4.5rem 1.25rem; } }
.abschnitt > .spalte, .spalte { max-width: var(--spalte); }
.abschnitt h2 { margin-bottom: 1.25rem; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--kreide); color: var(--nacht);
  font: 600 1.0625rem/1 var(--sans);
  padding: 1.05rem 1.6rem; border-radius: 8px; border: 0; cursor: pointer;
  text-decoration: none; box-shadow: var(--glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.knopf:hover { transform: translateY(-1px); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.knopf.zweit { background: transparent; color: var(--kreide); border: 1px solid var(--kante); box-shadow: none; }
.preiszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.preis { font-family: var(--mono); font-size: 1.25rem; }
.preis small { font-family: var(--sans); font-size: 0.875rem; color: var(--asche); margin-left: 0.4rem; }

/* Liste "Am Ende hast du" */
.ergebnis { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.ergebnis li { padding-left: 1.25rem; border-left: 1px solid var(--kreide); }
.ergebnis strong { display: block; font-weight: 600; }
@media (min-width: 760px) { .ergebnis { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }

/* Lektionen: echte Reihenfolge, deshalb nummeriert */
.lektionen { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--kante); }
.lektionen li {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 0 1rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--kante);
}
.lektionen .nr { font-family: var(--mono); font-size: 1.5rem; line-height: 1.2; color: var(--kreide); text-shadow: var(--glow); }
.lektionen h3 { margin-bottom: 0.25rem; }
.lektionen p { margin: 0; color: #cfcfcc; }
/* Handy: Datei steht unter dem Text (2. Spalte), nicht in der schmalen Nummern-Spalte */
.lektionen .datei { grid-column: 2; font-size: 0.875rem; color: var(--asche); margin-top: 0.5rem; }
.lektionen .datei::before { content: "↳ "; }
@media (min-width: 760px) {
  .lektionen li { grid-template-columns: 3.5rem 1fr 15rem; align-items: baseline; }
  .lektionen .datei { grid-column: auto; margin-top: 0; text-align: right; }
  .lektionen .datei::before { content: none; }
}

/* Material & Bedarf */
.zweispaltig { display: grid; gap: 3rem; }
@media (min-width: 760px) { .zweispaltig { grid-template-columns: 1fr 1fr; } }
.schlicht { padding-left: 1.1rem; margin: 0; }
.schlicht li { margin-bottom: 0.5rem; }

/* Ehrlich gesagt */
.aussagen { display: grid; gap: 2rem; }
.aussagen p { margin: 0; max-width: 34rem; }
.aussagen strong { font-weight: 600; }
@media (min-width: 760px) { .aussagen { grid-template-columns: 1fr 1fr; gap: 2.5rem 4rem; } }

/* Fragen */
details { border-bottom: 1px solid var(--kante); padding: 1rem 0; }
details:first-of-type { border-top: 1px solid var(--kante); }
summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--asche); }
details[open] summary::after { content: "–"; }
details p { margin: 0.75rem 0 0; color: #cfcfcc; max-width: 36rem; }

/* Abschluss-Kasten */
.abschluss { border: 1px solid var(--kante); border-radius: 14px; padding: 2rem 1.5rem; background: rgba(29, 29, 28, 0.55); }
@media (min-width: 760px) { .abschluss { padding: 2.75rem 3rem; } }

/* Fußzeile */
.fuss { max-width: var(--breit); margin: 0 auto; padding: 3rem 1.25rem 4rem; border-top: 1px solid var(--kante); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.9375rem; }
.fuss .widerruf-link { font-weight: 600; }
.fuss p { margin-top: 1.5rem; }

/* Formulare */
.formular { display: grid; gap: 1.25rem; }
.feld label { display: block; font-weight: 500; margin-bottom: 0.4rem; }
.feld input, .feld textarea {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--kreide);
  background: var(--schiefer); border: 1px solid var(--kante); border-radius: 8px; padding: 0.85rem 0.9rem;
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--kreide); outline-offset: 1px; }
.haken { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; padding: 1rem; border: 1px solid var(--kante); border-radius: 10px; background: var(--schiefer); cursor: pointer; }
.haken input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--kreide); cursor: pointer; }
.haken span { font-size: 0.975rem; line-height: 1.5; }
.meldung { padding: 0.9rem 1rem; border-radius: 8px; border: 1px solid var(--kante); background: var(--schiefer); }
.meldung.fehler { border-color: var(--fehler); color: var(--fehler); }
.meldung:empty { display: none; }

/* Bestellübersicht */
.uebersicht { border: 1px solid var(--kante); border-radius: 12px; padding: 1.25rem 1.25rem; margin-bottom: 2rem; background: var(--schiefer); }
.uebersicht .zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.uebersicht .summe { border-top: 1px solid var(--kante); margin-top: 0.5rem; padding-top: 0.9rem; font-weight: 600; }

/* Kursbereich */
.kurs { max-width: var(--breit); margin: 0 auto; padding: 1.5rem 1.25rem 4rem; display: grid; gap: 2rem; }
@media (min-width: 900px) { .kurs { grid-template-columns: 19rem 1fr; } }
.kurs-liste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--kante); }
.kurs-liste button {
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--kante);
  color: var(--kreide); font: 500 1rem/1.35 var(--sans); padding: 0.9rem 0.25rem; cursor: pointer;
  display: grid; grid-template-columns: 2rem 1fr 1.25rem; gap: 0.5rem; align-items: center;
}
.kurs-liste button .nr { font-family: var(--mono); color: var(--asche); }
.kurs-liste button[aria-current="true"] { background: var(--schiefer); }
.kurs-liste button[aria-current="true"] .nr { color: var(--kreide); text-shadow: var(--glow); }
.kurs-liste .erledigt { font-family: var(--mono); color: var(--kreide); opacity: 0; }
.kurs-liste button.fertig .erledigt { opacity: 1; }
.player { position: relative; aspect-ratio: 16 / 9; background: var(--schiefer); border: 1px solid var(--kante); border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.player .warten { text-align: center; color: var(--asche); padding: 1rem; }
.downloads { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.downloads a { display: inline-flex; gap: 0.6rem; align-items: baseline; }
.code-hinweis { font-size: 0.875rem; color: var(--asche); }

/* Text-Seiten (Recht, Danke usw.) */
.text-seite { max-width: var(--spalte); margin: 0 auto; padding: 3rem 1.25rem 5rem; }
.text-seite h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1.5rem; }
.text-seite h2 { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
.platzhalter { border: 1px dashed var(--asche); border-radius: 10px; padding: 1.25rem; color: #d9d9d6; }

/* König */
.koenig-form { fill: var(--kreide); }
.visier { fill: var(--nacht); }
.licht { fill: #ffffff; }
.licht-schein { fill: #ffffff; opacity: 0.35; }

/* Kaufleiste (nur Handy): läuft unten mit, sobald der obere Kaufen-Knopf aus dem Bild ist */
.kaufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.92); border-top: 1px solid var(--kante);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform 0.25s ease;
}
.kaufleiste.sichtbar { transform: none; }
.kaufleiste .knopf { padding: 0.9rem 1.5rem; }
.kaufleiste .preis { font-size: 1.125rem; white-space: nowrap; }
@media (max-width: 759px) { .fuss { padding-bottom: 7rem; } }
@media (min-width: 760px) { .kaufleiste { display: none; } }

.knopf.voll { width: 100%; }
.zahlarten { margin: 0; text-align: center; }
.inapp { margin-top: 1.25rem; padding: 1rem; border: 1px dashed var(--asche); border-radius: 10px; color: #d9d9d6; display: grid; gap: 0.75rem; }
.inapp p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  #himmel { transition: none; }
  .knopf { transition: none; }
  .kaufleiste { transition: none; }
}

.kaufleiste .knopf { white-space: nowrap; flex-shrink: 0; }

/* Kontaktformular: Feld für Bots, für Menschen unsichtbar */
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rechtstexte der IT-Recht Kanzlei */
.rechtstext h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 1.2rem; }
.rechtstext h2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }
.rechtstext h3 { font-size: 1rem; margin: 1.4rem 0 0.4rem; }
.rechtstext p, .rechtstext li { line-height: 1.65; overflow-wrap: anywhere; }
.rechtstext ol, .rechtstext ul { padding-left: 1.3rem; }
.rechtstext a { word-break: break-word; }

/* ---------- Verkaufsseite (neu, Handy zuerst, wenig Text) ---------- */
.kopf { padding: 0.9rem 1.25rem; }
.held { max-width: 30rem; margin: 0 auto; padding: 0.25rem 1.25rem 1.5rem; display: grid; gap: 1rem; }
.held h1 { font-size: clamp(2.05rem, 9.2vw, 3.6rem); line-height: 1.04; }
.unterzeile { margin: 0.5rem 0 0; font-size: 1.0625rem; line-height: 1.4; color: #d9d9d6; }

.beweis-karte { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.vorschau-knopf, .beweis-karte video { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 1px solid var(--kante); border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 0 34px rgba(242, 242, 240, 0.1); }
.vorschau-knopf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.beweis-karte video { object-fit: cover; }
.vorschau-knopf .abspielen { position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border-radius: 50%; background: rgba(242, 242, 240, 0.93); box-shadow: var(--glow); display: grid; place-items: center; transition: transform 0.15s ease; }
.vorschau-knopf .abspielen svg { width: 1.6rem; height: 1.6rem; fill: var(--nacht); margin-left: 0.15rem; }
.vorschau-knopf:hover .abspielen { transform: scale(1.06); }
.beweis-zahlen p { margin: 0; }
.gross-zahl { font-family: var(--mono); font-weight: 500; font-size: clamp(2rem, 9.5vw, 2.9rem); line-height: 1; text-shadow: var(--glow); letter-spacing: -0.02em; }
.klein-zahl { font-size: clamp(1.5rem, 7vw, 2.1rem); margin-top: 1rem !important; }
.zahl-text { color: #d9d9d6; font-size: 0.9375rem; line-height: 1.35; margin-top: 0.35rem !important; }
.zahl-text strong { color: var(--kreide); font-weight: 700; }
.tipp { margin-top: 1rem !important; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--asche); }

.held-kauf { display: grid; gap: 0.7rem; }
.knopf.voll { width: 100%; }
.knopf.mitte { margin-top: 1.25rem; }
.vertrauen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.9rem; color: var(--asche); font-size: 0.8125rem; }
.vertrauen li::before { content: "✓ "; color: var(--kreide); }
.fussnote { margin: 0; font-size: 0.6875rem; line-height: 1.4; color: #6f6f6b; text-align: center; }

.abschnitt { max-width: 30rem; padding: 2.25rem 1.25rem; }
.abschnitt h2 { font-size: clamp(1.45rem, 6vw, 2rem); margin-bottom: 1rem; }
.paket { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.paket li { border: 1px solid var(--kante); border-radius: 12px; padding: 0.8rem 0.85rem; background: rgba(29, 29, 28, 0.5); }
.paket strong { display: block; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.paket span { display: block; color: var(--asche); font-size: 0.8125rem; line-height: 1.35; margin-top: 0.15rem; }

.kette { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.45rem; counter-reset: schritt; }
.kette li { counter-increment: schritt; border: 1px solid var(--kante); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.9375rem; background: rgba(29, 29, 28, 0.5); }
.kette li::before { content: counter(schritt) " "; font-family: var(--mono); color: var(--asche); }

.regeln { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.regeln li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.75rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--kante); }
.regeln li:last-child { border-bottom: 1px solid var(--kante); }
.regeln .wert { font-family: var(--mono); font-size: 1.2rem; text-shadow: var(--glow); white-space: nowrap; }
.regeln li span:last-child { color: #cfcfcc; }

.kosten { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--kante); }
.kosten li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--kante); }
.kosten li span:last-child { text-align: right; white-space: nowrap; color: #cfcfcc; font-size: 0.9375rem; }

.abschluss { border: 1px solid var(--kante); border-radius: 14px; padding: 1.5rem 1.25rem; background: rgba(29, 29, 28, 0.55); display: grid; gap: 1rem; text-align: center; }
.abschluss h2 { margin: 0; }
.abschluss-unter { margin: 0; }

@media (min-width: 760px) {
  .held { max-width: var(--breit); grid-template-columns: 1.1fr 0.9fr; grid-template-areas: "text karte" "kauf karte" "note karte"; column-gap: 4rem; align-items: center; padding-top: 3rem; }
  .held-text { grid-area: text; align-self: end; }
  .beweis-karte { grid-area: karte; }
  .held-kauf { grid-area: kauf; align-self: start; max-width: 26rem; }
  .fussnote { grid-area: note; text-align: left; align-self: start; }
  .vertrauen { justify-content: flex-start; }
  .abschnitt { max-width: 44rem; padding: 3.5rem 1.25rem; }
  .paket { grid-template-columns: repeat(4, 1fr); }
  .knopf.mitte { width: auto; }
}

/* Kaufbereich direkt auf der Startseite (statt Bestellfenster) */
.kaufen { scroll-margin-top: 0.75rem; }
.kaufen h2 { text-align: center; }
.kauf-karte { border: 1px solid var(--kante); border-radius: 14px; padding: 1.25rem 1.1rem; background: rgba(29, 29, 28, 0.6); display: grid; gap: 1rem; }
.kauf-produkt .zeile { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.0625rem; }
.kauf-produkt .beschreibung { margin: 0.4rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--asche); }
.oder { display: flex; align-items: center; gap: 0.75rem; color: var(--asche); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--kante); }
.oder[hidden], .kauf-felder[hidden] { display: none; }
.formular.eng { gap: 0.75rem; }
.kauf-felder { display: grid; gap: 0.9rem; }
.kauf-felder .feld { display: grid; gap: 0.4rem; font-weight: 500; font-size: 0.9375rem; }
.kauf-laedt { margin: 0; text-align: center; }
#kaufknopf { padding: 1.05rem; font-size: 1.0625rem; }
.kauf-karte .meldung { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.rechtszeile { margin: 0; font-size: 0.6875rem; line-height: 1.5; color: var(--asche); text-align: center; }
/* Hinweis im App-Browser: über den Zahlknöpfen, nur wenn Stripe dort kein Apple/Google Pay anbieten kann */
.kauf-karte .inapp { margin: 0 0 0.9rem; padding: 0.65rem 0.8rem; border: 1px dashed var(--asche); border-radius: 8px; font-size: 0.8125rem; line-height: 1.45; color: #d9d9d6; text-align: left; display: block; }
.kauf-karte .inapp[hidden], .kauf-karte .inapp [hidden] { display: none; }
.kauf-karte .inapp a { font-weight: 600; }
@media (min-width: 760px) { .kauf-karte { padding: 1.75rem 2rem; } }

/* Kursstart: Zustimmung beim ersten Öffnen */
.start-karte { border: 1px solid var(--kante); border-radius: 14px; padding: 1.25rem 1.1rem; background: rgba(29, 29, 28, 0.6); }

/* Kursbereich: Affiliate-Link, schlicht wie ein Download-Link, mit Pflichtkennzeichnung */
#lektion-links:empty { display: none; }
#lektion-links { margin-bottom: 0; }
.werbehinweis { color: var(--asche); font-size: 0.8125rem; margin-left: 0.45rem; }

/* Zahlfeld abgesetzt mit Schloss (Baymard: sensible Felder sichtbar einrahmen, Symbol direkt daneben) */
.tresor { border: 1px solid #2c2c2a; background: rgba(255, 255, 255, 0.025); border-radius: 10px; padding: 0.7rem 0.7rem 0.8rem; }
.tresor-kopf { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.75rem; line-height: 1.35; color: #b9b9b4; }
.tresor-kopf svg { width: 13px; height: 13px; flex: none; fill: currentColor; }
[data-marke="wp"] .tresor { border-color: #2b2a22; }
[data-marke="wp"] .tresor-kopf svg { fill: #fec252; }

/* Einführungspreis: ruhige Zeile unter dem Kaufknopf und im Kaufbereich (kein Streichpreis, kein Countdown) */
.einfuehrung { margin: 0.6rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: #d9d9d6; text-align: center; }
.einfuehrung[hidden] { display: none; }
.kauf-produkt .einfuehrung { text-align: left; margin: 0.25rem 0 0.5rem; }
[data-marke="wp"] .einfuehrung { color: #fec252; }

/* Einführungspreis gut sichtbar an jedem Kaufknopf (echte Frist, kein Streichpreis) */
.bald { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: fit-content; max-width: 100%; margin: 0 auto 0.65rem; padding: 0.45rem 0.9rem; border: 1px solid rgba(242, 242, 240, 0.55); border-radius: 999px; background: rgba(242, 242, 240, 0.07); color: var(--kreide); font: 600 0.875rem/1.3 var(--sans); text-align: center; box-shadow: 0 0 18px rgba(242, 242, 240, 0.12); }
.bald[hidden] { display: none; }
.bald svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.held-kauf .bald { margin-bottom: 0; }
.kauf-karte .bald { margin: 0 auto 0.9rem; }
[data-marke="wp"] .bald { color: #fec252; border-color: rgba(254, 194, 82, 0.6); background: rgba(254, 194, 82, 0.09); box-shadow: 0 0 18px rgba(254, 194, 82, 0.18); }
.kaufleiste .preis small[data-bald-kurz] { color: var(--kreide); font-weight: 600; }
[data-marke="wp"] .kaufleiste .preis small[data-bald-kurz] { color: #fec252; }
/* Kaufleiste: Hinweis unter den Preis, damit der Knopf ganz bleibt */
.kaufleiste .preis:has(small[data-bald-kurz]) { display: flex; flex-direction: column; line-height: 1.15; }
.kaufleiste .preis small[data-bald-kurz] { margin-left: 0; font-size: 0.75rem; }

/* Frist direkt im Kaufknopf: zweite Zeile unter "Mach's mir nach · 19,00 €" */
.knopf:has(.knopf-bald:not([hidden])) { flex-direction: column; gap: 0.3rem; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.knopf-zeile { display: inline-flex; align-items: center; gap: 0.5rem; }
.knopf-bald { font: 600 0.8125rem/1.2 var(--sans); letter-spacing: 0.01em; opacity: 0.78; }
.knopf-bald[hidden] { display: none; }
/* Kaufbereich: Zusatz direkt unter dem Preis */
.preis-block { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; text-align: right; }
.preis-bald { font: 600 0.75rem/1.2 var(--sans); color: var(--kreide); white-space: nowrap; }
.preis-bald[hidden] { display: none; }
[data-marke="wp"] .preis-bald { color: #fec252; }
/* Kaufbereich mit Frist: Name oben, darunter Preis und daneben die Frist (nichts bricht um) */
.kauf-produkt .zeile:has(.preis-bald:not([hidden])) { flex-wrap: wrap; row-gap: 0.35rem; }
.kauf-produkt .zeile:has(.preis-bald:not([hidden])) > strong:first-child { flex-basis: 100%; }
.kauf-produkt .zeile:has(.preis-bald:not([hidden])) .preis-block { flex-direction: row; align-items: baseline; gap: 0.6rem; text-align: left; }
.kauf-produkt .zeile:has(.preis-bald:not([hidden])) .preis-block [data-preis] { font-size: 1.375rem; }
.kauf-produkt .zeile:has(.preis-bald:not([hidden])) .preis-bald { font-size: 0.8125rem; }