/* Verkaufsseiten (Enkel-Telefon, Gutschein). Ergänzt seite.css nur um das, was dort fehlt. */

/* Aufzählung mit kleinen dunklen Punkten; Kupfer bleibt Kreis, Hauptknopf und Schrittnummern vorbehalten */
.liste { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 12px; }
.liste li { position: relative; padding-left: 26px; }
.liste li::before {
  content: "";
  position: absolute;
  left: 4px; top: .6em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dunkel);
}

.abschnitt .karte { margin-top: 20px; }
.zitat-text { font-family: var(--titel); font-weight: 600; font-size: 21px; line-height: 1.3; margin-top: 8px; }

/* Knopf ohne Funktion ist ein <button>: Schrift und Breite wie die Link-Knöpfe */
button.knopf { width: 100%; font: inherit; font-weight: 700; cursor: pointer; }

/* Vorführ-Leiste, nur auf dem Vorführ-Server (LOTSE_VORFUEHRUNG=1) */
/* Platz unter dem Seitenfuß, damit die Leiste nichts verdeckt */
.seite:has(.vorfuehr-leiste) .fuss { padding-bottom: 110px; }
.vorfuehr-leiste {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex; align-items: center; gap: 8px;
  background: #1b1b1b;
  color: #fff;
  font: 600 15px/1 system-ui, sans-serif;
  padding: 8px 10px 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.vorfuehr-leiste a { color: #fff; text-decoration: none; padding: 10px 14px; border-radius: 999px; }
.vorfuehr-leiste a[aria-current] { background: #fff; color: #1b1b1b; }

.gueltig { margin-top: 16px; }

/* Auswahl der Laufzeit beim Gutschein fürs Enkel-Telefon: große Zeilen, ganze Zeile anklickbar */
.wahl { border: 0; padding: 0; margin: 4px 0 20px; display: grid; gap: 10px; }
.wahl legend { font-weight: 700; margin-bottom: 10px; }
.wahl label {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 18px;
  border: 1.5px solid var(--linie); border-radius: 18px;
  cursor: pointer;
}
.wahl label:has(input:checked) { border: 2px solid var(--dunkel); }
.wahl input { width: 22px; height: 22px; accent-color: var(--dunkel); margin: 0; }
.wahl-preis { margin-left: auto; font-weight: 700; }