/* VivaPix — Kaufweg
   ==========================================================================
   Die drei Seiten des Kaufs: Uebersicht, Kaufformular, Quittung. Grundlage
   sind tokens.css und components.css — hier steht kein Farbwert und keine
   Schriftgroesse, die nicht von dort kommt.

   Der Kaufweg soll ruhiger wirken als der Auftritt davor. Wer hier ist, hat
   sich entschieden; er braucht keinen weiteren Verkaufsdruck, sondern eine
   Seite, auf der er sieht, was er bekommt und was es kostet.

   Reihenfolge
     1. Masse
     2. Paketuebersicht
     3. Kaufformular
     4. Warenkorb
     5. Quittung
   ========================================================================== */


/* 1. Masse ----------------------------------------------------------------- */
:root {
  --paket-min:  17rem;   /* schmalste Paketkarte, darunter wird umgebrochen */
  --korb-spalte: 21rem;  /* Warenkorb neben dem Formular */
  --zeichen:     3.5rem; /* Kreis auf der Quittung */
}


/* 2. Paketuebersicht -------------------------------------------------------
   Vier Karten, die von selbst umbrechen. Kein Rail und keine Hervorhebung
   eines "beliebtesten" Pakets: davon ist heute genau eines buchbar, und ein
   Empfehlungsbanner auf einer Karte, die man nicht kaufen kann, waere
   Theater. */
.pakete {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--paket-min), 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Eine einzelne Karte (die Gaestegalerie ohne KI) soll nicht auf volle
   Breite laufen - sie steht neben dem Text und nicht unter ihm. */
.pakete--einzeln {
  grid-template-columns: minmax(var(--paket-min), 28rem);
}

.paket {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Das buchbare Paket bekommt den Rahmen der Tonfarbe — mehr braucht es
   nicht, um es zu finden. */
.paket--buchbar { border-color: var(--color-primary); }

.paket__preis {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
}

.paket__momente {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}

/* Der Text darf wachsen, der Knopf steht bei allen Karten auf einer Hoehe. */
.paket__text { flex: 1; }
.paket__btn  { margin-top: auto; }

.paket__fuss { margin-top: var(--space-5); }


/* 3. Kaufformular ----------------------------------------------------------
   Zwei Spalten ab Tablet: links die Angaben, rechts der Warenkorb. Darunter
   untereinander — und dann der Warenkorb zuerst, weil auf dem Telefon zuerst
   feststehen soll, was gekauft wird. */
.kauf {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .kauf {
    grid-template-columns: minmax(0, 1fr) var(--korb-spalte);
    align-items: start;
    gap: var(--space-7);
  }
  .kauf__formular { order: 0; }
  .kauf__korb     { order: 1; position: sticky; top: var(--space-6); }
}

.kauf__gruppe {
  border: 0;
  padding: 0;
  margin: 0;
}
.kauf__gruppe legend {
  padding: 0;
  margin-bottom: var(--space-3);
}

/* PLZ und Ort in eine Zeile: sie gehoeren zusammen und sind zusammen kuerzer
   als ein Feld. */
.kauf__zeile {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
}

.kauf__wahl { gap: var(--space-3); flex-wrap: wrap; }

.kauf__wahlfeld {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  flex: 1 1 10rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.kauf__wahlfeld:hover { border-color: var(--color-text-subtle); }
.kauf__wahlfeld:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

/* Die Zustimmung zum vorzeitigen Leistungsbeginn. Sie steht abgesetzt, weil
   sie eine Erklaerung ist und keine Einstellung — und sie faellt auf, wenn
   sie fehlt. */
.kauf__verzicht {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}
.kauf__verzicht--fehler { border-color: var(--color-error); }

/* `display: flex` auf der Klasse schlaegt das `hidden`-Attribut, das
   kauf.js setzt - die Klasse ist spezifischer als der Browser-Standard
   fuer [hidden]. Am 21.08.2026 aufgefallen: die Zustimmung zum
   vorzeitigen Beginn stand auch ohne Datum auf der Seite. Dieselbe
   Falle wie bei .gfuss__hinweisbox in gallery.css. */
.kauf__verzicht[hidden] { display: none !important; }

.kauf__ankreuz {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.kauf__ankreuz input { margin-top: 0.2em; flex: none; }


/* 4. Warenkorb ------------------------------------------------------------- */
.korb__zeile,
.korb__summe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.korb__summe {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.korb__betrag {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}

.korb__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-muted);
}
.korb__liste li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


/* 5. Quittung --------------------------------------------------------------
   Der Kreis wechselt die Farbe mit dem Stand der Bestellung. "offen" ist
   dabei nicht gelb-warnend, sondern neutral: es ist kein Problem, dass eine
   Zahlung zwei Sekunden braucht. */
.quittung__zeichen {
  display: grid;
  place-items: center;
  width: var(--zeichen);
  height: var(--zeichen);
  border-radius: 50%;
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
}
.quittung__zeichen--fertig      { background: var(--color-success-soft); color: var(--color-success-ink); }
.quittung__zeichen--bezahlt     { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.quittung__zeichen--gescheitert { background: var(--color-error-soft);   color: var(--color-error-ink); }
.quittung__zeichen--unbekannt   { background: var(--color-warning-soft); color: var(--color-warning-ink); }

.quittung__daten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  margin: 0;
}
.quittung__daten dt { color: var(--color-text-muted); }
.quittung__daten dd { margin: 0; }

/* Angebot ------------------------------------------------------------------
   Die Seite hinter dem Annahmelink. Sie zeigt dasselbe wie das PDF - wer
   hier klickt, soll nicht erst ein Dokument oeffnen muessen, um zu
   wissen, worauf er klickt. */
.angebot__positionen {
  width: 100%;
  border-collapse: collapse;
}

.angebot__positionen th,
.angebot__positionen td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.angebot__positionen th {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  font-weight: 600;
}

.angebot__positionen .rechts,
.angebot__summe dd { text-align: right; font-variant-numeric: tabular-nums; }

.angebot__beschreibung { display: block; margin-top: 2px; }

.angebot__summe {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.angebot__summe dt { color: var(--color-text-muted); }
.angebot__summe dd { margin: 0; }
.angebot__summe .angebot__gesamt { font-weight: 700; color: var(--color-text); }

/* --- Preisseite -------------------------------------------------------
   Die Bausteine oben (.paket, .pakete) tragen auch hier; ergänzt wird nur,
   was die Preisseite mehr hat als die Paketübersicht: eine Empfehlung und
   eine Tabelle für die Volumenstaffel. */

.paket--beliebt {
  border-color: var(--color-primary, #7257E8);
  position: relative;
}

.paket__band {
  position: absolute;
  top: 0;
  right: var(--space-4);
  transform: translateY(-50%);
  margin: 0;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--color-primary, #7257E8);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 600;
}

/* Die Staffel als Tabelle und nicht als Kacheln: hier wird verglichen,
   und Vergleichen heißt Zeilen untereinander. Vier Kacheln nebeneinander
   zwingen das Auge zum Springen. */
.tabellenrahmen {
  overflow-x: auto;
  margin-top: var(--space-4);
}

.preistabelle {
  width: 100%;
  border-collapse: collapse;
  min-width: 28rem;
}

.preistabelle th,
.preistabelle td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border, rgba(127, 127, 127, .2));
}

.preistabelle thead th {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted, inherit);
  font-weight: 600;
}

.preistabelle tbody th { font-weight: 500; }
.preistabelle .rechts { text-align: right; }

/* Das jeweils andere Produkt unter dem Warenkorb (21.08.2026). */
.korb__andere {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.korb__andereliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.korb__andereliste li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.korb__andereliste .t-numeric { margin-left: auto; }