/* Ergänzungen des Funnels zu style.css. style.css ist die unveränderte Datei der Bestellseite
   (Stand 05.10.2026), hier steht nur, was Einstieg, Abfragen und Empfehlung zusätzlich brauchen.
   Farben, Radien und Schrift kommen aus den Variablen von style.css. */

/* Abfragen: eine Spalte, schmaler, ohne Zusammenfassung. Die Frage ist die Hauptsache. */
.funnel.vorab .cols { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin: 0 auto; }
.einstieg-titel { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; margin: 4px 0 16px; }
@media (max-width: 620px) {
  .funnel.vorab { padding-top: 16px; }
  .einstieg-titel { margin: 0 0 12px; }
  .antworten { gap: 10px; }
  .antwort { padding: 14px 16px; }
}

.abstand { margin-top: 18px; }
p.abstand { margin-bottom: 0; }

.antworten { display: grid; gap: 14px; }
.antwort {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  font: inherit; font-size: 1.04rem; font-weight: 600; color: var(--brand-900); text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px 20px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.antwort:hover { border-color: var(--brand); background: #fcfefd; }
.antwort:focus-visible { outline: 0; box-shadow: var(--ring); }
.antwort[aria-pressed="true"] { border-color: var(--brand-600); background: var(--brand-050); box-shadow: 0 0 0 1px var(--brand-600) inset; }
.antwort svg { width: 18px; height: 18px; flex: none; color: var(--brand-600); }

/* Kennzeichen der vorausgewählten Packung, links oben, damit es das Preiskennzeichen nicht verdeckt */
.pack .flag.flag-empf { right: auto; left: 18px; background: var(--brand-600); }

#antwortenBox .rbody p { margin: 0 0 .5em; }
#antwortenBox .rbody p:last-child { margin: 0; }
#einwilligungZeile { margin-bottom: 22px; }

/* ---------------- Reine Funnel-Ansicht ----------------
   Kopfzeile, der jeweilige Schritt, schmale Fußzeile. Der Schritt füllt die Ansicht, die
   Fußzeile sitzt unten. */
/* Erste Ansicht (vor dem ersten Klick): normale Seite, nichts wird gestreckt.
   Reine Funnel-Ansicht (body.im-funnel): Das Banner ist weg, .ansicht ist genau einen Bildschirm
   hoch abzüglich der Kopfzeile, der Schritt steht oben, die Fußzeile unten. */
.ansicht { display: flex; flex-direction: column; }
body.im-funnel #banner { display: none; }
body.im-funnel .ansicht { min-height: calc(100vh - 63px); min-height: calc(100dvh - 63px); }
@media (max-width: 620px) { body.im-funnel .ansicht { min-height: calc(100vh - 57px); min-height: calc(100dvh - 57px); } }
.funnel { flex: 1 0 auto; padding-bottom: 40px; }
.funnel.ende { display: flex; align-items: center; }
.funnel.ende > .wrap { width: 100%; }
@media (max-width: 980px) { .funnel.ende { align-items: flex-start; } }

/* Fußzeile der Bestellseite, gleicher Inhalt, nur schmaler gesetzt. Das Logo steht schon in der Kopfzeile. */
.site-footer { padding: 18px 0 22px; border-top: 1px solid var(--line); }
.site-footer img { display: none; }
.site-footer nav { font-size: .85rem; gap: 6px 18px; }
body.has-bar .site-footer { padding-bottom: 96px; }

/* Aufklappbarer Bereich mit den Infoblöcken der Bestellseite */
.infos { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.infos > summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 22px; font-weight: 600; color: var(--brand-900);
}
.infos > summary::-webkit-details-marker { display: none; }
.infos > summary::after { content: "+"; color: var(--brand-600); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.infos[open] > summary::after { content: "–"; }
.infos > summary:focus-visible { outline: 0; box-shadow: var(--ring); }
.infos .info { padding: 30px 0; }
.infos .legal { padding: 26px 0; border-bottom: 0; }
.infos .wrap { padding: 0 22px; }

/* ---------------- Endseite ----------------
   Eigene, ruhige Ansicht nach dem Muster der Bernstein-Funnel: mittig, ohne Kasten um den Dank,
   darunter die nächsten Schritte. Inhalt 1 zu 1 die Bestätigung der Bestellseite. */
.funnel.ende .cols { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
.funnel.ende #schritt4 { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.funnel.ende .done-hero { text-align: center; }
.funnel.ende .done-hero .tick { margin: 0 auto 18px; }
.funnel.ende .timeline { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 24px; }
.funnel.ende .actions { justify-content: center; }

/* Schmal: Beide Kennzeichen passen nicht nebeneinander auf den oberen Rand, das der Empfehlung sitzt dann unten. */
@media (max-width: 560px) { .pack .flag.flag-empf { top: auto; bottom: -11px; } }