/* Ergänzungen des Funnels zu style.css. style.css ist das Grundgerüst aus dem roleca-Funnel
   in FachTaG-Farben, 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: #f7fbfe; }
.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-900); color: var(--aqua); }

#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 wie auf fachtagakademie.de: Anthrazit, weiße Schrift, Firma, Telefon, Mail und die
   Rechtsverweise. Das Logo steht schon in der Kopfzeile. */
.site-footer { padding: 22px 0 26px; background: var(--brand-900); color: #fff; font-size: .9rem; }
.site-footer img { display: none; }
.site-footer nav { font-size: .9rem; gap: 6px 22px; }
.site-footer nav a { color: #fff; }
.site-footer nav a:hover { color: var(--aqua); }
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 .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; } }

/* Kopfzeile wie auf fachtagakademie.de: Anthrazit, Logo hell links, rechts Telefon und Mail
   (erste Ansicht und Fragen) oder die Schrittleiste (ab dem Angebot), der aktive Schritt in Gold. */
.topbar { background: var(--brand-900); border-bottom: 0; backdrop-filter: none; }
.topbar .logo img { height: 34px; }
.steps li { color: #d9d9d9; }
.steps li i { background: rgba(255, 255, 255, .16); color: #fff; }
.steps li[aria-current="step"] { background: rgba(255, 255, 255, .1); color: #fff; }
.steps li[aria-current="step"] i { background: var(--gold); color: var(--brand-900); }
.steps li.done i { background: var(--brand); color: #fff; }
.kopf-kontakt { margin-left: auto; display: flex; gap: 22px; color: #fff; font-size: .9rem; white-space: nowrap; }
.steps:not(.hidden) ~ .kopf-kontakt { display: none; }
@media (max-width: 760px) { .kopf-kontakt .kopf-mail { display: none; } }
@media (max-width: 620px) { .topbar .logo img { height: 27px; } .kopf-kontakt { font-size: .82rem; } }
@media (max-width: 420px) { .topbar .logo img { height: 22px; } }

/* Logo in der Kopfzeile: führt zurück zur ersten Ansicht des Funnels (src/scripts/app.js). */
.topbar .logo { cursor: pointer; border-radius: var(--r-sm); }
.topbar .logo:focus-visible { outline: 0; box-shadow: var(--ring); }

/* Video zur Bestellung: eigener Bereich unter dem Funnel, nur in der ersten Ansicht. */
.video-bereich { padding: 8px 0 40px; }
body.im-funnel .video-bereich { display: none; }
.video-rahmen { position: relative; max-width: 960px; margin: 0 auto; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); background: var(--brand); aspect-ratio: 16 / 9; }
.video-rahmen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-start { position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; border: 0; border-radius: 50%; background: var(--brand-900); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 28px rgba(61, 61, 61, .35); transition: transform .15s ease, background .15s ease; }
.video-start[hidden] { display: none; }
.video-start svg { width: 44px; height: 44px; margin-left: 4px; }
.video-start:hover { transform: scale(1.06); background: var(--brand-700); }
.video-start:focus-visible { outline: none; box-shadow: var(--ring), 0 8px 28px rgba(61, 61, 61, .35); }
@media (max-width: 620px) { .video-bereich { padding: 0 0 28px; } .video-start { width: 72px; height: 72px; } .video-start svg { width: 34px; height: 34px; } }

/* ---------------- Banner (erste Ansicht) ----------------
   Blaues Band unter der anthrazitfarbenen Kopfzeile, Blau wie Logo-Symbol und Themen-Kacheln von
   fachtagakademie.de. Darin die Frist bis zum Stichtag, anthrazit mit gelber Schrift wie die Knöpfe. */
.hero { background: var(--brand); color: #fff; padding: 34px 0 30px; }
.hero .wrap { max-width: 860px; }
.hero-oberzeile { font-size: .95rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.hero-titel { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 700; line-height: 1.2; color: #fff; margin: 0 0 12px; text-wrap: balance; }
.hero-text { font-size: clamp(1rem, 1.5vw, 1.12rem); color: #fff; margin: 0 0 16px; max-width: 46em; }
.hero-countdown { display: inline-block; background: var(--brand-900); color: var(--aqua); font-weight: 700; border-radius: 50px; padding: 7px 18px; margin: 0; font-size: .95rem; }
@media (max-width: 620px) { .hero { padding: 22px 0 20px; } .hero-text { margin-bottom: 12px; } }

/* Hauptknopf: Anthrazit mit gelber Schrift, steht in style.css (.btn-primary). */

/* Themen im Kontaktschritt: zweispaltig ab Tablet */
.themen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 8px; }
@media (max-width: 620px) { .themen { grid-template-columns: 1fr; } }
.themen .check { margin-bottom: 6px; }

/* Infoblöcke: Häkchenliste, Eckdaten, heller Abschnitt */
.info-hell { background: var(--grau); }
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 28px; font-size: .96rem; }
.haken li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg); }
.fakten { display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; margin: 0 0 20px; font-size: .95rem; }
.fakten dt { color: var(--ink-3); }
.fakten dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 620px) { .fakten { grid-template-columns: 1fr; gap: 2px; } .fakten dd { margin-bottom: 8px; } }

/* Einwilligungsbanner unten, ohne die Seite zu sperren. Die Wahl wird nicht gespeichert. */
.einwilligung {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2);
  padding: 16px 18px; display: flex; gap: 16px; align-items: center; font-size: .9rem;
}
.einwilligung p { margin: 0; }
.einwilligung-knoepfe { display: flex; gap: 10px; flex: none; }
.einwilligung .btn { padding: 10px 18px; font-size: .95rem; }
@media (max-width: 620px) { .einwilligung { flex-direction: column; align-items: stretch; left: 8px; right: 8px; bottom: 8px; } .einwilligung-knoepfe .btn { flex: 1; } }
@media (max-width: 980px) { body.has-bar .einwilligung { bottom: 84px; } }