/* Wartelisten-Popup: dieselben Formularfarben wie auf der Seite. */
.wl-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 32px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
  overflow-y: auto;
}
.wl-dialog::backdrop { background: rgba(12, 27, 51, .72); }
.wl-dialog h2 { padding-right: 32px; font-size: 1.8rem; }
.wl-dialog > p { margin: 12px 0 24px; }
.wl-dialog .formular {
  grid-template-columns: 1fr;
  grid-template-areas: 'label' 'mail' 'haken' 'knopf' 'fehler' 'klein';
}
.wl-dialog .wl-senden { width: 100%; }
.wl-dialog__schliessen {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--hell);
  color: var(--navy);
  font-size: 28px;
  cursor: pointer;
}
.wl-dialog__erfolg p { margin: 12px 0 24px; }
.wl-popup-offen { overflow: hidden; }
@media (max-width: 480px) { .wl-dialog { padding: 24px; } }

/* ==========================================================================
   Mein erstes KI-Jahr · Gestaltung der Seiten (Entwurf „Final · Mischung“)
   Gilt für index.html, danke.html und bestaetigt.html.
   Keine Stilangaben im HTML: Die Sicherheitsregel (CSP) erlaubt nur diese Datei.
   ========================================================================== */

@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/open-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/open-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/open-sans-latin-800-normal.woff2') format('woff2'); }

:root {
  --navy: #16294F;
  --blau: #2F58A4;
  --blau-dunkel: #244786;
  --amber: #F5A524;
  --text: #1A1A1A;
  --text-2: #2D3748;
  --grau: #4A5568;
  --linie: #E2E8F0;
  --rand: #C9D3DF;
  --hell: #F5F7FA;
  --auf-navy: #D5E1F2;
  --cyan: #7FD3F0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: 'Open Sans', system-ui, sans-serif; color: var(--text); background: #fff; line-height: 1.5; }
img { max-width: 100%; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* Phasen: Teile, die nicht zur Phase passen, verschwinden */
html[data-phase="warteliste"] [data-nur]:not([data-nur~="warteliste"]),
html[data-phase="vorab"] [data-nur]:not([data-nur~="vorab"]),
html[data-phase="verkauf"] [data-nur]:not([data-nur~="verkauf"]) { display: none !important; }

.sprung { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--navy); padding: 8px 14px; border-radius: 6px; z-index: 10; }
.sprung:focus { left: 8px; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zusammen { white-space: nowrap; }
.nur-gross { display: none; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- Bausteine */
.rahmen { max-width: 1200px; margin: 0 auto; padding: 56px 20px; }
.rahmen--zeilen { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.rahmen--spalte { display: flex; flex-direction: column; gap: 28px; }
.rahmen--spalte > .spalte { flex: none; }
.rahmen--schmal { max-width: 860px; }
.rahmen--mitte { align-items: center; padding-top: 48px; padding-bottom: 48px; }
.rahmen--fuss { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 24px 20px; font-size: .875rem; color: var(--grau); }
.fuss { border-top: 1px solid var(--linie); }

.abschnitt--hell { background: var(--hell); }
.spalte { min-width: 0; display: flex; flex-direction: column; gap: 14px; flex: 1 1 340px; }
.spalte--text { flex: 1 1 420px; }
.spalte--schmal { flex: 1 1 340px; }
.spalte--breit { flex: 999 1 560px; gap: 12px; }
.spalte--beleg { flex: 1 1 420px; max-width: 520px; }
.spalte--blatt { flex: 1 1 360px; max-width: 420px; gap: 10px; padding-top: 0; }

.eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blau); }
.eyebrow--amber { color: var(--amber); }
h2 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; color: var(--navy); }
.h2--eng { margin-bottom: 12px; }
.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
.klein { font-size: .8125rem; color: var(--grau); }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: 10px; font: inherit; font-size: 1.0625rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf--blau { background: var(--blau); color: #fff; }
.knopf--blau:hover { background: var(--blau-dunkel); color: #fff; }
.knopf--rand { background: #fff; color: var(--blau); border-color: var(--blau); }
.knopf--rand:hover { background: var(--hell); color: var(--blau-dunkel); }
.knopf--hell { background: #fff; color: var(--navy); }
.knopf--hell:hover { background: var(--hell); color: var(--navy); }
.knopf[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.knopf[disabled] { opacity: .7; cursor: wait; }

.marke-amber { align-self: flex-start; flex: none; background: var(--amber); color: var(--navy); font-size: .8125rem; font-weight: 700; border-radius: 6px; padding: 4px 10px; }
#eintragen .marke-amber {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 1.0625rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Hero */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.hero__leiterbahnen { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: .3; pointer-events: none; }
.hero__kopf { position: relative; max-width: 1200px; margin: 0 auto; padding: 20px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 1rem; font-weight: 700; }
.marke:hover { color: #fff; }
.marke img { width: 40px; height: 40px; border-radius: 9px; }
.hero__format { font-size: .875rem; color: var(--auf-navy); }
.hero__innen { position: relative; max-width: 1200px; margin: 0 auto; padding: 24px 20px 0; display: flex; flex-wrap: wrap-reverse; align-items: flex-start; gap: 8px 32px; }
.hero__text { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }
.hero h1 { margin-top: -4px; font-size: 1.75rem; line-height: 1.18; font-weight: 800; color: #fff; }
.hero__lead { font-size: 1.0625rem; line-height: 1.6; color: var(--auf-navy); max-width: 620px; }
.hero__bild { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.hero__bild img { width: 100%; max-width: 300px; height: auto; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }

/* ------------------------------------------------------------ Formular */
.karte { width: 100%; max-width: 620px; background: #fff; color: var(--text); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); margin-top: 6px; }
.karte__kopf { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.karte__kopf p { flex: 1 1 220px; font-size: 1rem; line-height: 1.5; }
.formular { display: grid; gap: 12px; grid-template-areas: 'label' 'mail' 'haken' 'knopf' 'fehler' 'klein'; }
.formular__label { grid-area: label; font-size: .875rem; font-weight: 600; }
.formular__feld { grid-area: mail; min-width: 0; width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; font-size: 1rem; color: var(--text); background: #fff; }
.formular__feld[aria-invalid="true"] { border-color: #B42318; border-width: 2px; }
.formular__haken { grid-area: haken; display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.45; }
.formular__haken input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blau); flex: none; }
.formular .knopf { grid-area: knopf; width: 100%; }
.formular__fehler { grid-area: fehler; color: #B42318; font-size: .9375rem; font-weight: 600; }
.formular__klein { grid-area: klein; font-size: .8125rem; line-height: 1.5; color: var(--grau); }
.karte--kauf { gap: 16px; }
.karte--kauf .knopf { width: 100%; }

/* ---------------------------------------------------------------- Zahlen */
.abschnitt { background: #fff; }
.abschnitt--hell { background: var(--hell); }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.kachel { border: 1px solid var(--linie); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; color: var(--text-2); }
.kachel__zahl { font-size: 1.625rem; font-weight: 800; color: var(--blau); line-height: 1.2; }
.kachel--dunkel { background: var(--navy); border-color: var(--navy); color: #fff; }
.kachel--dunkel .kachel__zahl { color: var(--amber); }

.beleg { background: #fff; border: 1px solid var(--rand); border-radius: 16px; box-shadow: 0 8px 24px rgba(22, 41, 79, .12); padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.beleg__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--navy); font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.beleg__einheit { font-size: .8125rem; font-weight: 400; color: var(--grau); }
.beleg__zeile { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--rand); font-size: .9375rem; }
.beleg__zeile span { flex: 1 1 auto; min-width: 0; }
.beleg__zeile b { flex: none; text-align: right; white-space: nowrap; }
.beleg__fuss { margin-top: 12px; font-size: .875rem; line-height: 1.55; color: var(--grau); }

/* --------------------------------------------------------------- Für wen */
.kreuze { gap: 12px; }
.kreuz { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 18px 20px; }
.kreuz input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--blau); flex: none; }
.kreuz label { font-size: 1.0625rem; line-height: 1.5; }

/* ---------------------------------------------------------------- Inhalt */
.inhalt { border: 1px solid var(--linie); border-left: 2px solid var(--blau); border-radius: 16px; padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; }
.inhalt__nr { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--blau); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.inhalt h3 { font-size: 1.1875rem; font-weight: 700; margin-bottom: 4px; }
.inhalt p { font-size: 1rem; line-height: 1.55; color: var(--text-2); }

.blatt { background: #fff; border: 1px solid var(--rand); border-radius: 6px; box-shadow: 0 8px 24px rgba(22, 41, 79, .12); padding: 28px; display: flex; flex-direction: column; gap: 16px; aspect-ratio: 210 / 297; }
.blatt__kopf { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--grau); border-bottom: 1px solid var(--linie); padding-bottom: 10px; }
.blatt h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; color: var(--navy); }
.blatt__zeile { display: flex; gap: 12px; align-items: center; font-size: .9375rem; }
.blatt__kaestchen { width: 18px; height: 18px; border: 2px solid var(--navy); border-radius: 3px; flex: none; }
.blatt__notizen { margin-top: 8px; font-size: .8125rem; font-weight: 600; color: var(--grau); }
.blatt__linie { border-bottom: 1px solid var(--rand); height: 22px; }
.blatt__unter { font-size: .8125rem; color: var(--grau); text-align: center; }

/* -------------------------------------------------------- Termine, Preise */
.zeitleiste { display: grid; grid-template-columns: 1fr; gap: 16px; }
.zeitleiste__punkt { border-top: 3px solid var(--rand); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 1rem; line-height: 1.5; }
.zeitleiste__punkt b { font-size: .875rem; color: var(--navy); }
.zeitleiste__punkt--blau { border-color: var(--blau); }
.zeitleiste__punkt--blau b { color: var(--blau); }
.zeitleiste__punkt--amber { border-color: var(--amber); }
.zeitleiste__punkt--grau b { color: var(--blau); }

.pakete { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.paket { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.paket h3 { font-size: 1.25rem; font-weight: 700; }
.paket__preis { font-size: 2.25rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.paket p { font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.paket .knopf { margin-top: auto; }
.paket--empfohlen { border: 2px solid var(--blau); box-shadow: 0 8px 24px rgba(22, 41, 79, .12); }
.zitat { font-size: 1.375rem; line-height: 1.35; font-weight: 700; color: var(--navy); }

/* ---------------------------------------------------------------- Fragen */
#faq { scroll-margin-top: 88px; }
html:has(#faq:target), html:has(#site-footer:target) { scroll-behavior: auto; }
.faq__rahmen { max-width: 760px; }
.faq__umschalter { cursor: pointer; list-style: none; border-radius: 12px; }
.faq__umschalter::-webkit-details-marker { display: none; }
.faq__umschalter h2 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0; }
.faq__aktion { display: inline-flex; align-items: center; gap: 14px; padding: 13px 18px; border: 1px solid var(--blau); border-radius: 10px; background: #fff; color: var(--blau); font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.faq__umschalter:hover .faq__aktion { background: var(--blau); color: #fff; }
.faq__umschalter:focus-visible { outline: 3px solid var(--blau); outline-offset: 6px; }
.faq__pfeil { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.faq__verbergen { display: none; }
.faq__bereich[open] .faq__zeigen { display: none; }
.faq__bereich[open] .faq__verbergen { display: inline; }
.faq__bereich[open] .faq__pfeil { transform: rotate(225deg); }
.fragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 24px; }
.frage { background: #fff; border: 1px solid var(--linie); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.frage:hover, .frage[open] { border-color: var(--blau); box-shadow: 0 4px 14px rgba(22, 41, 79, .06); }
.frage summary { position: relative; padding: 18px 46px 18px 18px; list-style: none; cursor: pointer; border-radius: 12px; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ''; position: absolute; right: 20px; top: 23px; width: 8px; height: 8px; border-right: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: rotate(45deg); transition: transform .15s; }
.frage[open] summary::after { transform: rotate(225deg); }
.frage summary:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.frage h3 { font-size: 1rem; line-height: 1.45; font-weight: 700; margin: 0; }
.frage p { margin: 0; padding: 0 18px 18px; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 640px) {
  .fragen { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- Abschluss */
.abschluss { background: var(--navy); }
.abschluss__person { flex: 1 1 420px; min-width: 0; display: flex; gap: 20px; align-items: center; }
.abschluss__person img { flex: none; width: 96px; height: 96px; border-radius: 999px; object-fit: cover; }
.abschluss__person div { display: flex; flex-direction: column; gap: 8px; }
.abschluss__zitat { font-size: 1.375rem; line-height: 1.3; font-weight: 700; color: #fff; }
.abschluss__person span { font-size: .9375rem; color: var(--auf-navy); }
.abschluss__form { flex: 1 1 420px; min-width: 0; margin: 0; box-shadow: none; }

/* ------------------------------------------------- Folgeseiten (danke ...) */
.folge { background: #fff; min-height: 100vh; }
.folge__kopf { border-bottom: 1px solid var(--linie); background: #fff; }
.folge__kopf div { max-width: 1060px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 700; color: var(--navy); }
.folge__kopf img { width: 32px; height: 32px; border-radius: 8px; }
.folge__kopf a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.schritte { display: flex; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.schritte li { flex: 1 1 0; display: block; font-size: .8125rem; color: var(--grau); }
.schritte li::before { content: ''; display: block; margin-bottom: 6px; height: 4px; border-radius: 2px; background: var(--rand); }
.schritte .fertig { color: var(--blau); }
.schritte .fertig::before { background: var(--blau); }
.schritte .jetzt { color: var(--navy); font-weight: 700; }
.schritte .jetzt::before { background: var(--amber); }

.folge__innen { max-width: 1060px; margin: 0 auto; padding: 28px 20px 40px; }
.folge h1 { font-size: 1.75rem; line-height: 1.18; font-weight: 800; color: var(--navy); margin-bottom: 16px; }
.folge .absatz { font-size: 1.0625rem; line-height: 1.6; margin-bottom: 14px; }
.hinweis { background: #FFF4DE; border: 1px solid var(--amber); border-radius: 10px; padding: 14px 18px; font-size: .9375rem; line-height: 1.55; margin: 18px 0; }
.postfach__titel { font-size: .875rem; font-weight: 700; color: var(--grau); margin: 8px 0 10px; display: block; }
.postfach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.postfach .knopf { min-height: 48px; padding: 0 16px; }
.postfach__klein { font-size: .875rem; color: var(--grau); margin-top: 10px; }

.folge__zwei { display: flex; flex-direction: column; gap: 20px; }
.folge__spalte { display: contents; }
.o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; }

.vorschau { border: 1px solid var(--linie); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(22, 41, 79, .08); overflow: hidden; }
.vorschau__titel { padding: 12px 18px; border-bottom: 1px solid var(--linie); font-size: .8125rem; font-weight: 700; }
.vorschau__mail { display: flex; gap: 14px; padding: 16px 18px; background: #EAF1FB; }
.vorschau__mail img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.vorschau__mail div { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; }
.vorschau__absender { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.vorschau__absender i { font-style: normal; font-size: .8125rem; font-weight: 400; color: var(--grau); }
.vorschau__betreff { font-weight: 700; }
.vorschau__text { color: var(--grau); }

.keine { background: var(--hell); margin: 0 -20px; padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 14px; }
.keine h2 { font-size: 1.25rem; }
.keine__zeile { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.5; }
.keine__zeile b { flex: none; width: 26px; height: 26px; border-radius: 99px; border: 1px solid var(--rand); background: #fff; color: var(--blau); display: flex; align-items: center; justify-content: center; font-size: .8125rem; }
.keine__meldung { font-size: .9375rem; font-weight: 600; color: var(--navy); }

.termin { background: var(--navy); color: #fff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.termin p { font-size: 1.0625rem; line-height: 1.55; }
.termin .knopf { align-self: flex-start; }
.termin .knopf svg { flex: none; }

.weitersagen { background: var(--hell); margin: 0 -20px; padding: 28px 20px 36px; display: flex; flex-direction: column; gap: 14px; }
.weitersagen h2 { font-size: 1.375rem; }
.weitersagen__text { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; font-size: .875rem; line-height: 1.6; color: var(--grau); }
.teilen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.teilen .knopf { min-height: 48px; padding: 0 12px; }

/* ----------------------------------------------------- größere Bildschirme */
@media (min-width: 640px) {
  .formular { grid-template-columns: 1fr auto; grid-template-areas: 'label label' 'mail knopf' 'haken haken' 'fehler fehler' 'klein klein'; }
  .formular .knopf { width: auto; }
  .karte--kauf .knopf { width: auto; align-self: flex-start; }
  .karte { padding: 28px; }
  .zeitleiste, .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nur-gross { display: inline; }
}
@media (min-width: 900px) {
  .rahmen { padding: 88px 24px; }
  .rahmen--mitte { padding-top: 64px; padding-bottom: 64px; }
  .rahmen--fuss { padding: 24px; }
  .hero__leiterbahnen { display: block; }
  .hero__kopf { padding: 24px 24px 0; }
  .hero__innen { padding: 48px 24px 0; }
  .hero__text { gap: 22px; padding-bottom: 64px; }
  .hero h1 { font-size: 2.875rem; line-height: 1.14; }
  .hero__lead { font-size: 1.1875rem; }
  .hero__bild img { max-width: 480px; }
  h2 { font-size: 2.25rem; }
  .spalte--blatt { padding-top: 56px; }
  .kachel__zahl { font-size: 1.875rem; }
  .kachel { padding: 18px; }
  .beleg { padding: 28px; }
  .kreuz { padding: 20px 24px; }
  .kreuz label { font-size: 1.125rem; }
  .inhalt { padding: 20px 24px; gap: 18px; }
  .paket { padding: 28px; }
  .abschluss__person img { width: 112px; height: 112px; }
  .abschluss__zitat { font-size: 1.625rem; }
  .zitat { font-size: 1.625rem; }

  .folge__innen { padding: 56px 24px 72px; }
  .folge h1 { font-size: 2.75rem; line-height: 1.15; }
  .folge__zwei { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
  .folge__spalte { display: flex; flex-direction: column; gap: 20px; }
  .o1, .o2, .o3, .o4 { order: 0; }
  .postfach { display: flex; flex-wrap: wrap; }
  .keine { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 24px; }
  .weitersagen { margin: 40px 0 0; border-radius: 16px; padding: 32px; }
  .teilen { display: flex; flex-wrap: wrap; }
  .folge__schmal { max-width: 720px; }
}

/* ===================================================== 50-Fachkräfte-Challenge */
html[data-phase="erreicht"] [data-nur]:not([data-nur~="erreicht"]) { display: none !important; }

.hero h1 { font-size: 2.5rem; line-height: 1.05; letter-spacing: -.01em; }
.hero__unter { font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: #fff; max-width: 640px; }

.knopf--amber { background: var(--amber); color: var(--navy); }
.knopf--amber:hover { background: #E8961A; color: var(--navy); }

.hero__challenge { margin-top: 6px; max-width: 620px; border: 1px solid rgba(144, 186, 229, .45); background: rgba(255, 255, 255, .06); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.hero__challenge-titel { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.3; }
.hero__challenge-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hero__challenge-klein { font-size: .9375rem; color: var(--auf-navy); }

.zaehler { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.zaehler__text { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.zaehler__dabei { font-size: 2.25rem; font-weight: 800; color: var(--blau); line-height: 1; }
.zaehler__klein { font-size: .875rem; color: var(--grau); line-height: 1.5; }
.balken { height: 14px; border-radius: 99px; background: #DCE5F1; overflow: hidden; }
.balken__fuellung { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--blau), #4F7BC8); transition: width .8s ease; }
html[data-phase="erreicht"] .balken__fuellung { background: var(--amber); }
.zaehler--klein { margin-top: 0; gap: 8px; }
.zaehler--klein .zaehler__text { color: #fff; font-size: 1rem; }
.zaehler--klein .zaehler__dabei { color: var(--amber); font-size: 1.5rem; }
.zaehler--klein .balken { height: 10px; background: rgba(255, 255, 255, .18); }
.zaehler--klein .balken__fuellung { background: var(--amber); }
.zaehler--karte { margin: 0 0 4px; }
.zaehler--karte .zaehler__text { font-size: 1rem; }
.zaehler--karte .zaehler__dabei { font-size: 1.5rem; }

.abschnitt--challenge { background: var(--hell); border-bottom: 1px solid var(--linie); }
.challenge__text .lead { margin-bottom: 4px; }
.challenge__text h2 { margin-bottom: 14px; }
.challenge__geschichte { display: flex; flex-direction: column; gap: 18px; }
.challenge__geschichte h2 { margin-bottom: 0; }
.challenge__zitat { margin: 0; padding: 16px 20px; border-left: 4px solid var(--amber); background: #fff; border-radius: 0 12px 12px 0; color: var(--navy); font-size: 1.375rem; line-height: 1.4; }
.challenge__fragen { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--text-2); }
.challenge__fragen li::marker { color: var(--blau); }
.challenge__themen { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.challenge__themen li { padding: 6px 12px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--navy); font-size: .9375rem; font-weight: 600; }
.challenge__entscheidung { display: grid; gap: 12px; padding: 22px; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--blau); border-radius: 12px; }
.challenge__entscheidung h3 { margin: 0; color: var(--navy); }
@media (min-width: 1040px) {
  #challenge > .rahmen > .spalte--beleg { position: sticky; top: 96px; }
}
.karte--rand { border: 2px solid var(--blau); box-shadow: 0 8px 24px rgba(22, 41, 79, .12); margin-top: 0; max-width: none; }

.pruefliste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.pruefliste li { position: relative; padding-left: 34px; font-size: 1.0625rem; line-height: 1.5; }
.pruefliste li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 6px; background: var(--blau); }
.pruefliste li::after { content: ''; position: absolute; left: 8px; top: 6px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.inhalte { display: flex; flex-direction: column; gap: 12px; }
.kreuze__titel { font-size: 1rem; font-weight: 700; color: var(--navy); }

.paket__preise { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.paket__spaeter { font-size: 1rem; color: var(--grau); text-decoration: line-through; }
.paket__gruppe { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blau); }
.preis-hinweis { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.fehlabo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 20px; border-top: 5px solid var(--amber); background: var(--navy); color: #fff; scroll-margin-top: 88px; }
html:has(#fehlabo:target) { scroll-behavior: auto; }
.fehlabo__text { display: grid; gap: 18px; }
.fehlabo__eyebrow { margin: 0; color: var(--amber); font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.fehlabo h3 { margin: 0; color: #fff; font-size: clamp(1.75rem, 3.3vw, 2.625rem); line-height: 1.2; font-weight: 800; }
.fehlabo h3 span { color: var(--amber); }
.fehlabo__text > p:last-child { margin: 0; color: #e2e8f0; font-size: 1rem; line-height: 1.65; max-width: 52ch; }
.fehlabo__rechnung { display: grid; gap: 12px; padding: 26px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.06); }
.fehlabo__beispiel { margin: 0; font-size: .8125rem; font-weight: 700; color: #c4dbf0; }
.fehlabo__formel { margin: 0; font-size: 1rem; }
.fehlabo__summe { display: grid; gap: 6px; margin: 0; }
.fehlabo__summe strong { color: var(--amber); font-size: clamp(2.75rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; }
.fehlabo__summe span { color: #e2e8f0; font-size: .9375rem; line-height: 1.5; }
.fehlabo__fazit { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); font-size: .9375rem; font-weight: 700; line-height: 1.5; }
@media (max-width: 720px) {
  .fehlabo { grid-template-columns: 1fr; gap: 24px; }
  .fehlabo__rechnung { padding: 20px; }
}

@media (min-width: 640px) {
  .pakete { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .zeitleiste { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (min-width: 900px) {
  .hero h1 { font-size: 4rem; }
  .hero__unter { font-size: 1.625rem; }
  .pruefliste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
}
.zaehler--folge { margin: 0 0 20px; }

/* ======================================= Challenge nicht erreicht (Stichtag vorbei) */
html[data-phase="nicht_erreicht"] [data-nur]:not([data-nur~="nicht_erreicht"]) { display: none !important; }
.hero__challenge--ende { gap: 14px; padding: 22px 24px; margin-bottom: 8px; }
.hero__ende-text { font-size: 1.0625rem; line-height: 1.6; color: var(--auf-navy); }

/* ============================================================ Klickbare Elemente */
[data-nur-js][hidden] { display: none !important; }

/* Rechnungskarte: erst raten, dann aufdecken (nur mit JavaScript verdeckt) */
button.beleg__zeile { width: 100%; background: none; border: 0; border-bottom: 1px dashed var(--rand); font: inherit; color: inherit; text-align: left; cursor: default; }
.beleg__tipp { font-size: .875rem; color: var(--blau); font-weight: 600; padding-top: 10px; }
.beleg--raten button.beleg__zeile { cursor: pointer; }
.beleg--raten button.beleg__zeile:hover { background: var(--hell); }
.beleg--raten .beleg__zeile:not(.aufgedeckt) .beleg__wert { color: transparent; background: #DCE5F1; box-shadow: 0 0 0 4px #DCE5F1; border-radius: 4px; min-width: 64px; user-select: none; }
.beleg__wert { position: relative; }
.beleg--raten .beleg__zeile:not(.aufgedeckt) .beleg__wert::after { content: '?'; color: var(--blau); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.beleg--raten .beleg__zeile .beleg__wert { transition: color .3s ease, background .3s ease, box-shadow .3s ease; }
.beleg__zeile.aufgedeckt .beleg__wert { color: var(--navy); }
.beleg__alle { margin-top: 10px; align-self: flex-start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--blau); cursor: pointer; text-decoration: underline; }

/* Mini-Quiz im Stil der App */
.abschnitt--quiz { background: var(--navy); }
.h2--hell { color: #fff; }
.lead--hell { color: var(--auf-navy); }
.quiz { background: #0F1F3D; border: 1px solid rgba(144, 186, 229, .3); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.quiz__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.quiz__kopf img { width: 36px; height: 36px; border-radius: 9px; }
.quiz__kopf div { display: flex; flex-direction: column; font-size: .8125rem; color: var(--auf-navy); line-height: 1.3; }
.quiz__kopf b { color: #fff; font-size: .9375rem; }
.quiz__stand { margin-left: auto; font-size: .8125rem; color: var(--auf-navy); }
.quiz__frage { display: flex; flex-direction: column; gap: 10px; background: #18294A; border-radius: 16px; padding: 18px; }
.quiz__text { font-size: 1.125rem; font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
.quiz__antwort { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(144, 186, 229, .25); background: #22355A; color: #fff; font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.quiz__antwort:hover:not([disabled]) { border-color: var(--cyan); }
.quiz__antwort i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; font-size: .8125rem; }
.quiz__antwort[disabled] { cursor: default; opacity: .7; }
.quiz__antwort.richtig { background: #0F4C47; border-color: #2BC4A0; opacity: 1; }
.quiz__antwort.falsch { background: #4A2230; border-color: #E0637A; opacity: 1; }
.quiz__rueckmeldung { background: #2A2A20; border: 1px solid rgba(245, 165, 36, .5); border-radius: 12px; padding: 12px 14px; font-size: .9375rem; line-height: 1.5; }
.quiz__rueckmeldung b { color: var(--amber); }
.quiz__weiter { align-self: flex-start; }
.quiz__ende { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; background: #18294A; border-radius: 16px; padding: 18px; }
.quiz__ergebnis { font-size: 1.25rem; font-weight: 800; }
.quiz__nochmal { background: none; border: 0; color: var(--auf-navy); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* Musterseite zum Ausprobieren */
.blatt { aspect-ratio: auto; min-height: 520px; }
button.blatt__zeile { background: none; border: 0; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.blatt__zeile:hover { background: var(--hell); }
.blatt__kaestchen { position: relative; transition: background .2s ease; }
.blatt__zeile[aria-pressed="true"] .blatt__kaestchen { background: var(--blau); border-color: var(--blau); }
.blatt__zeile[aria-pressed="true"] .blatt__kaestchen::after { content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.blatt__zeile[aria-pressed="true"] { font-weight: 700; }
.blatt__antwort { background: #EAF1FB; border-left: 3px solid var(--blau); border-radius: 6px; padding: 12px 14px; font-size: .9375rem; line-height: 1.55; animation: einblenden .25s ease; }
.blatt__antwort b { color: var(--navy); }

/* Für wen: Antwort erscheint beim Ankreuzen (ohne JavaScript) */
.kreuz > div { display: flex; flex-direction: column; gap: 8px; }
.kreuz__antwort { display: none; font-size: .9375rem; line-height: 1.5; color: var(--blau); font-weight: 600; animation: einblenden .25s ease; }
.kreuz:has(input:checked) { border-color: var(--blau); }
.kreuz:has(input:checked) .kreuz__antwort { display: block; }

@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .blatt__antwort, .kreuz__antwort { animation: none; } .balken__fuellung { transition: none; } }

/* Zahlenkacheln: aufklappen und einmal hochzählen */
.kacheln__tipp { font-size: .875rem; font-weight: 600; color: var(--blau); margin-top: 4px; }
button.kachel { position: relative; width: 100%; font: inherit; text-align: left; background: #fff; cursor: pointer; align-items: flex-start; transition: border-color .2s ease, box-shadow .2s ease; }
button.kachel:hover { border-color: var(--blau); box-shadow: 0 4px 14px rgba(22, 41, 79, .1); }
button.kachel::after { content: '+'; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 99px; background: var(--hell); color: var(--blau); font-weight: 700; display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
button.kachel[aria-expanded="true"]::after { transform: rotate(45deg); }
button.kachel--dunkel { background: var(--navy); }
button.kachel--dunkel::after { background: rgba(255, 255, 255, .15); color: #fff; }
button.kachel[aria-expanded="true"] { border-color: var(--blau); }
.kachel__zahl { padding-right: 26px; }
.kachel__mehr { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie); font-size: .875rem; line-height: 1.5; color: var(--text-2); animation: einblenden .25s ease; }
.kachel--dunkel .kachel__mehr { border-top-color: rgba(255, 255, 255, .2); color: var(--auf-navy); }

/* Ablauf als Verlauf: nummerierte Punkte an einer durchgehenden Linie */
.verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.verlauf__schritt { position: relative; padding: 0 0 26px 58px; display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
.verlauf__schritt:last-child { padding-bottom: 0; }
.verlauf__schritt::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: var(--rand); }
.verlauf__schritt:last-child::before { display: none; }
.verlauf__punkt { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 99px; background: var(--rand); color: var(--navy); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.verlauf__schritt--blau .verlauf__punkt { background: var(--blau); color: #fff; }
.verlauf__schritt--amber .verlauf__punkt { background: var(--amber); color: var(--navy); }
.verlauf__wann { font-size: 1.0625rem; color: var(--navy); line-height: 1.3; padding-top: 6px; }
.verlauf__text { font-size: 1rem; line-height: 1.5; color: var(--text-2); }
@media (min-width: 900px) {
  .verlauf { flex-direction: row; gap: 20px; }
  .verlauf__schritt { flex: 1 1 0; padding: 52px 0 0; min-width: 0; }
  .verlauf__schritt::before { left: 44px; right: -20px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .verlauf__wann { padding-top: 0; }
}

/* Überschrift zweifarbig wie auf ga-coach.de */
.hero__blau { color: #90BAE5; }
@media (min-width: 640px) { .hero__blau { display: block; } }