/* ==========================================================================
   kaufen.css — Checkout-Seite (kaufen.html)
   Baut auf base.css auf. Entwurf-4-CI: Weiß, Kachelgrau, EIN Rot.
   Bewusst schlank: Das Verkaufen macht die Website, hier wird nur bezahlt.
   ========================================================================== */

.kaufen-seite {
  background-color: var(--farbe-hintergrund);
  min-height: 100vh;
  min-height: 100dvh;
}

.kaufen-buehne {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--abstand-xl) var(--abstand-l) var(--abstand-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}

.kaufen-logo {
  align-self: center;
  line-height: 0; /* kein Zeilenrest unter dem Bild */
}

.kaufen-logo img {
  width: 6.5rem;
  height: auto;
}

/* Kauf-Karte — flach mit Haarlinie (Handout-Grammatik) */
.kaufen-karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.kaufen-titel {
  margin: 0;
}

.kaufen-untertitel {
  color: var(--farbe-text-gedimmt);
  margin: calc(-1 * var(--abstand-s)) 0 0;
}

/* Leistungen mit rotem Handout-Haken */
.kaufen-leistungen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.kaufen-leistungen li {
  position: relative;
  padding-left: 1.9rem;
}

.kaufen-leistungen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  background-color: var(--farbe-akzent-koralle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Preisblock auf Kachelgrau — der Anker der Seite */
.kaufen-preis {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--abstand-l);
  background-color: var(--farbe-buehne);
  border-radius: var(--radius-m);
}

.kaufen-preis-label {
  font-size: var(--schrift-groesse-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--schrift-gewicht-stark);
  color: var(--farbe-text-leise);
}

.kaufen-preis-wert {
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: var(--schrift-gewicht-stark);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--farbe-ink);
}

.kaufen-preis-rabatt {
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
  color: var(--farbe-akzent-koralle);
}

.kaufen-preis-hinweis {
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-leise);
}

/* Gutschein */
.kaufen-gutschein label {
  display: block;
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
  margin-bottom: var(--abstand-xs);
}

.kaufen-gutschein-zeile {
  display: flex;
  gap: var(--abstand-s);
}

.kaufen-gutschein-zeile input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}

.kaufen-gutschein-zeile .button {
  flex: none;
}

.kaufen-gutschein-meldung {
  margin: var(--abstand-xs) 0 0;
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-gedimmt);
}

.kaufen-gutschein-meldung.gutschein-ok {
  color: var(--farbe-akzent-koralle);
  font-weight: var(--schrift-gewicht-mittel);
}

.kaufen-gutschein-meldung.gutschein-fehler {
  color: var(--farbe-text-gedimmt);
}

/* Rechnungsanschrift */
.kaufen-adresse {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.kaufen-adresse legend {
  padding: 0;
  margin-bottom: var(--abstand-xs);
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-stark);
}

.kaufen-adresse-notiz {
  margin: 0 0 var(--abstand-xs);
  padding: var(--abstand-s) var(--abstand-m);
  background-color: var(--farbe-buehne);
  border-radius: var(--radius-s);
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-gedimmt);
}

.kaufen-feld {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.kaufen-feld label {
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
}

.kaufen-feld-hinweis {
  font-size: var(--schrift-groesse-xs);
  color: var(--farbe-text-leise);
}

.kaufen-feld-paar {
  display: flex;
  gap: var(--abstand-s);
}

.kaufen-feld-schmal {
  flex: 0 0 7.5rem;
}

.kaufen-adresse-meldung {
  margin: 0;
  padding: var(--abstand-s) var(--abstand-m);
  background-color: var(--farbe-akzent-koralle-hell);
  border-radius: var(--radius-s);
  font-size: var(--schrift-groesse-s);
}

/* Feld mit fehlender Eingabe deutlich, aber ohne Alarmfarbe markieren */
.kaufen-feld input.fehlt,
.kaufen-feld select.fehlt {
  border-color: var(--farbe-akzent-koralle);
}

@media (max-width: 26rem) {
  .kaufen-feld-paar {
    flex-direction: column;
  }
  .kaufen-feld-schmal {
    flex: 1;
  }
}

/* Bezahlbereich */
.kaufen-bezahlen {
  margin-top: var(--abstand-xs);
}

/* Apple-Pay-Knopf — Apples eigenes Element, nur Maße und Abstand von uns.
   Erscheint nur in Safari auf Apple-Geräten mit freigegebener Domain. */
/* Explizit, weil Apples Element eigene Darstellungsregeln mitbringt. */
.kaufen-applepay.versteckt {
  display: none !important;
}

.kaufen-applepay {
  display: block;
  width: 100%;
  height: 48px;
  margin-bottom: var(--abstand-s);
  cursor: pointer;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 48px;
  --apple-pay-button-border-radius: var(--radius-s);
}

.kaufen-platzhalter {
  padding: var(--abstand-m);
  background-color: var(--farbe-buehne);
  border-radius: var(--radius-m);
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-gedimmt);
  margin: 0;
}

/* Gratis-Code: Freischalt-Formular statt Bezahlwege */
.kaufen-gratis {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  padding: var(--abstand-l);
  background-color: var(--farbe-buehne);
  border-radius: var(--radius-m);
}

.kaufen-gratis.versteckt {
  display: none;
}

.kaufen-gratis-hinweis {
  margin: 0 0 var(--abstand-xs);
  font-size: var(--schrift-groesse-s);
}

.kaufen-gratis label {
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
}

.kaufen-gratis input {
  background-color: #fff;
}

.kaufen-gratis .button {
  margin-top: var(--abstand-s);
}

.kaufen-gratis-meldung {
  margin: var(--abstand-xs) 0 0;
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-gedimmt);
}

.kaufen-vertrauen,
.kaufen-rechtliches {
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-leise);
  margin: 0;
}

.kaufen-rechtliches {
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--farbe-linie);
}

.kaufen-erfolg-aktion {
  margin: var(--abstand-s) 0 0;
}

.kaufen-fehler {
  padding: var(--abstand-m);
  background-color: var(--farbe-akzent-koralle-hell);
  border-radius: var(--radius-m);
  color: var(--farbe-text);
  margin: 0;
}

.kaufen-fuss {
  display: flex;
  gap: var(--abstand-s);
  justify-content: center;
  font-size: var(--schrift-groesse-s);
  color: var(--farbe-text-leise);
}

.kaufen-fuss a {
  color: inherit;
}

/* Schalter für eine abweichende Rechnungsanschrift */
.kaufen-adresse-schalter {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.kaufen-schalter-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  cursor: pointer;
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
}

.kaufen-schalter-zeile input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  accent-color: var(--farbe-akzent-koralle);
  flex: none;
  cursor: pointer;
}

.kaufen-schalter-notiz {
  margin: 0 0 0 1.75rem;
  font-size: var(--schrift-groesse-xs);
  color: var(--farbe-text-leise);
}

.kaufen-adresse.versteckt {
  display: none;
}

/* Ladezustände: solange Preis und Bezahlwege unterwegs sind, zeigt die Seite
   das auch — ein Gedankenstrich sieht aus wie ein Fehler, nicht wie Warten. */
.kaufen-preis-wert.laedt {
  font-size: 1.05rem;
  font-weight: 500;
  color: #6b6b6b;
  letter-spacing: 0;
}
.kaufen-laden {
  margin: 0;
  padding: 1.1rem 0;
  text-align: center;
  font-size: .95rem;
  color: #6b6b6b;
}
.kaufen-laden.versteckt { display: none; }

/* ---------- Zustimmung zum vorzeitigen Beginn (§ 356 Abs. 5 BGB) ---------- */
.kaufen-zustimmung { margin-top:1.5rem; padding:1rem 1.1rem; border:1px solid #E0E0E0;
  border-radius:10px; background:#FAFAFA; }
.kaufen-zustimmung .kaufen-schalter-zeile { align-items:flex-start; gap:.7rem; }
.kaufen-zustimmung input[type="checkbox"] { margin-top:.2rem; flex:none; }
.kaufen-zustimmung span { font-size:.9rem; line-height:1.5; }
.kaufen-zustimmung-meldung { margin-top:.7rem; font-size:.875rem; color:#C22E2A; font-weight:600; }