/* Bestellseite im Stil der neuen Startseite: die ganze Strecke liegt als dunkle,
   gerundete Bühne auf der Seite (wie der Hero), die Karten darauf bleiben weiß.
   Lädt nach bestellen.css und neu.css (Kopf, Knöpfe, Fuß kommen von dort). */

main.bestellen {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 10px var(--gutter) 28px; padding: 52px 0 80px; border-radius: 32px; color: #fff;
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(34, 172, 223, .35), transparent 65%),
    radial-gradient(45% 50% at 5% 100%, rgba(143, 212, 216, .28), transparent 65%),
    radial-gradient(30% 30% at 70% 95%, rgba(255, 195, 92, .18), transparent 70%),
    linear-gradient(160deg, #0f3350 0%, var(--tinte-tief) 45%, var(--ink) 100%);
  box-shadow: 0 40px 80px -40px rgba(7, 42, 64, .6);
}
main.bestellen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
}
@media (max-width: 700px) { main.bestellen { padding: 36px 0 56px; border-radius: 26px; } }
@media (max-width: 560px) { main.bestellen { margin: 6px 8px 20px; border-radius: 22px; } }

/* Fortschritt: Glas-Kreise, der aktive im Markenverlauf */
.schritte li { color: #8fa9bb; }
.schritte .nr { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); }
.schritte button:not(:disabled):not([aria-current]):hover .nr { box-shadow: 0 0 0 4px rgba(143, 212, 216, .22); }
.schritte .aktiv { color: #fff; }
.schritte .aktiv .nr { background: var(--verlauf-marke); border-color: transparent; color: var(--tinte-tief); box-shadow: 0 0 0 4px rgba(143, 212, 216, .25); }
.schritte .fertig { color: var(--mint); }

/* Texte auf der Bühne */
.bestellen .oberzeile { background: var(--glas); border-color: var(--glas-rand); color: #d7ecf6; box-shadow: none; }
.bestellen .titel { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -.03em; }
.bestellen .einleitung { color: #c6dbe7; }
.bestellen .betrieb { color: #c6dbe7; }
.bestellen .betrieb strong { color: #fff; }
.bestellen .ueberspringen { color: var(--mint); }
.schritt > .wahl legend { color: #fff; }
.schritt > .wahl .klein { color: #9fbfd0; }
.schritt > .wahl .wahl-liste label { background: var(--glas); border-color: var(--glas-rand); color: #fff; }
.schritt > .wahl .wahl-liste input:checked + label { background: #fff; border-color: #fff; color: var(--ink); }
.schritt > .wahl .wahl-liste input:focus-visible + label { outline-color: var(--mint); }
.bestellen .knoepfe .btn-zweit { background: var(--glas); border-color: var(--glas-rand); color: #fff; backdrop-filter: blur(6px); }
.bestellen .knoepfe .btn-zweit:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.bestellen .karte .knoepfe .btn-zweit { background: #fff; border-color: var(--line); color: var(--ink); backdrop-filter: none; }
.bestellen .karte .knoepfe .btn-zweit:hover { border-color: var(--brand); }
.bestellen .fehler { background: #fff; }

/* Karten: weiß, ohne Farbstreifen, Inhalt in Tinte */
.bestellen .karte { color: var(--ink); overflow: visible; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), var(--shadow-1); }
.bestellen .karte::before { display: none; }
.bestellen .karte .klein, .bestellen .karte p { color: var(--ink-2); }
.bestellen .karte .klein { color: var(--ink-3); }
.bestellen .karte .hinweis { color: var(--brand-deep); }
.bestellen .karte label { color: var(--ink); }

/* Pakete wie auf der Startseite: Empfehlung mit Sonnenetikett, Auswahl mit Verlaufsrahmen */
.bestellen .paket { padding: 32px; }
.bestellen .paket .betrag { font-size: 48px; color: var(--ink); }
.bestellen .paket h3 { color: var(--ink); }
.bestellen .paket:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
/* Die Empfehlung bleibt hier eine weiße Karte (neu.css macht sie auf der Startseite dunkel) */
.bestellen .paket.empfohlen { color: var(--ink); transform: none; padding: 32px; background: #fff; border: 1px solid var(--brand); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), var(--shadow-1); }
.bestellen .paket.empfohlen:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.bestellen .paket.empfohlen h3, .bestellen .paket.empfohlen .betrag { color: var(--ink); }
.bestellen .paket.empfohlen .fuer, .bestellen .paket.empfohlen .haken li { color: var(--ink-2); }
.bestellen .paket.empfohlen .betrag small { color: var(--ink-3); }
.bestellen .paket.empfohlen .haken li::before { background-color: var(--mint-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075a7e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.bestellen .empfehlung { top: 18px; right: 22px; left: auto; box-shadow: 0 8px 20px -10px rgba(255, 195, 92, .9); }
.bestellen .paket.gewaehlt {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, var(--mint), var(--brand), var(--sun)) border-box;
  box-shadow: 0 0 0 6px rgba(143, 212, 216, .18), 0 40px 80px -36px rgba(0, 0, 0, .7);
}
.bestellen .paket.gewaehlt .btn { background: var(--verlauf-marke); border-color: transparent; color: var(--tinte-tief); }

/* Schritt 4: Häkchen und Unterschrift liegen direkt auf der Bühne – helle Beschriftung, helle Fehler */
.schritt > form > .haekchen label, .schritt > form > .feld > label { color: #fff; }
.schritt > form > .haekchen .feldfehler, .schritt > form > .feld > .feldfehler { color: #fecaca; }
.schritt > form > .haekchen a { color: var(--mint); }
.schritt > form > .haekchen input { accent-color: var(--mint); }

/* Starttermin-Kacheln und Aufklapper bleiben hell – sie liegen in bzw. neben den Karten */
.bestellen .aufklapper details { box-shadow: var(--shadow-1); }
.bestellen .aufklapper summary { color: var(--ink); }
.bestellen .aufklapper-inhalt { color: var(--ink-2); }
.bestellen .aufklapper-inhalt a { color: var(--brand-strong); }

/* Danke */
.bestellen .danke h2 { color: var(--ink); }