/* ── Header & Nav ──────────────────────────────────────────────── */

header {
  /* Das Band läuft über die volle Breite, der Inhalt rastet aber auf dasselbe
     1280er-Raster ein wie alle Sektionen darunter. Ohne das stand das Logo bei
     1920px 273px und bei 2560px 593px weiter außen als die Headline im Hero.
     Unterhalb der Rasterbreite greift max() auf --space-m zurück – dasselbe
     Inline-Padding, das auch `section` verwendet. */
  padding-block: var(--space-m);
  padding-inline: max(
    var(--space-m),
    (100% - var(--max-screen-width)) / 2
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background-color: hsla(24, 50%, 97%, 0.85);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  text-decoration: none;
  color: var(--text-title);
}

/* Bildmarke (monawiezoreck / Planbar Gründen). Höhe steuert die Größe,
   Breite folgt dem Seitenverhältnis 400:177. */
.brand__logo {
  height: 48px;
  width: auto;
}

/* Die Bildmarke ist höher als die frühere Textmarke – auf Seiten mit Logo
   deshalb weniger vertikale Polsterung, sonst wird der Header zu wuchtig. */
header:has(.brand__logo) {
  padding-block: var(--space-s);
}

@media (max-width: 720px) {
  .brand__logo { height: 38px; }
}

/* Die Wortmarke ist schwarz und funktioniert nur auf hellem Grund. Auf dunklen
   Flächen (Footer) bekommt sie deshalb einen hellen Träger, statt sie per
   filter: invert() einzufärben – das würde die ausgesparte „w“-Signet zerstören. */
.brand--on-light {
  background: var(--light);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
}

.brand__mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  display: grid;
  place-items: center;
  color: var(--light);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 500;
}

.brand__name {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  letter-spacing: -0.01em;
  color: var(--text-title);
}

.brand__name em {
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.nav__link {
  color: var(--text-body);
  font-weight: 500;
  text-decoration: none;
  font-size: var(--text-s);
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--primary);
}

/* Der Header-CTA ist ein <button> (öffnet den Anmelde-Dialog), kein Link –
   deshalb hier die Browser-Defaults zurücksetzen. */
.nav__cta {
  border: none;
  cursor: pointer;
  font-family: inherit;
  background-color: var(--primary);
  color: var(--light);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--btn-radius, var(--radius-full));
  font-size: var(--text-s);
  font-weight: 500;
  text-decoration: none;
  /* Zweizeiliger CTA sprengt auf schmalen Screens die Header-Höhe. */
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav__cta:hover {
  background-color: var(--primary-d-1);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .nav__link { display: none; }
}

/* Bei 320px (--min-screen-width) stießen Logo und CTA sonst aneinander.
   Der Header-CTA darf hier schrumpfen – auf Mobil greift zusätzlich die
   Sticky-CTA am unteren Rand. */
@media (max-width: 420px) {
  .nav__cta { padding-inline: var(--space-s); }
}

@media (max-width: 380px) {
  .nav__cta { font-size: var(--text-xs); padding-inline: var(--space-xs); }
}

/* ── Layout ────────────────────────────────────────────────────── */

section {
  width: 100%;
  padding: var(--space-3xl) var(--space-m);
}

.section--surface { background-color: var(--bg-surface); }
.section--warm    { background-color: var(--bg-warm); }
.section--deep    {
  background-color: var(--bg-deep);
  color: var(--light-90);
}
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--light); }

.container {
  width: 100%;
  max-width: var(--max-screen-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.container--centered { align-items: center; text-align: center; }
.container--narrow { max-width: 880px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--space-s);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* Eyebrow auf dunklem Grund: --primary käme hier nur auf 2,1:1. Gilt für jede
   dunkle Fläche, nicht nur für .section--deep. */
.section--deep .eyebrow,
.cta-band .eyebrow,
.pain-bar .eyebrow,
footer .eyebrow { color: var(--secondary-l-2); }

/* ── Footer ────────────────────────────────────────────────────── */

footer {
  background-color: var(--bg-deep);
  color: var(--light-70);
  padding: var(--space-2xl) var(--space-m) var(--space-l);
}

.footer {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-l);
}

.footer .brand__name { color: var(--light); }
.footer .brand__name em { color: var(--secondary-l-1); }

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-s);
}

.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--light);
  margin-bottom: var(--space-xs);
}

.footer__col a,
.footer__col button {
  color: var(--light-70);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* „Anmeldung" öffnet den Dialog und ist deshalb ein <button>. Damit er sich
   in die Linkspalte einfügt, alle Button-Defaults zurücknehmen. */
.footer__col button {
  border: none;
  padding: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.footer__col a:hover,
.footer__col button:hover { color: var(--secondary-l-1); }

.footer__copy {
  font-size: var(--text-xs);
  color: var(--light-70);
  flex-basis: 100%;
  /* Ohne max-width greift p { max-width: 70ch } aus globals.css und der
     Flex-Umbruch rechnet mit der geklammerten Breite – die Zeile rutscht dann
     neben die Spalten statt auf eine eigene volle Zeile. */
  max-width: none;
  text-align: left;
  border-top: 1px solid var(--light-10);
  padding-top: var(--space-m);
  margin-top: var(--space-m);
}

/* ── Hero ──────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--max-screen-width);
  margin-inline: auto;
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.hero__content { display: flex; flex-direction: column; gap: var(--space-m); }

.hero__title {
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  line-height: 1.04;
  margin-bottom: var(--space-xs);
}

.hero__title em {
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.hero__title .underline {
  position: relative;
  white-space: nowrap;
}

.hero__title .underline::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.05em;
  height: 0.32em;
  background: var(--secondary-30);
  border-radius: 1em;
  z-index: -1;
}

.hero__lead {
  font-size: var(--text-m);
  color: var(--text-muted);
  max-width: 56ch;
}

.hero__lead strong { color: var(--text-title); font-weight: 600; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-xs);
}

.hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-s);
  color: var(--text-body);
}

.hero__meta-item .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--secondary);
  box-shadow: 0 0 0 4px var(--secondary-20);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  margin-top: var(--space-s);
}

.hero__hint {
  font-size: var(--text-s);
  color: var(--text-muted);
}

/* Hero visual: stacked credibility card */
.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  justify-self: end;
  width: 100%;
}

@media (max-width: 960px) {
  .hero__visual { justify-self: center; max-width: 420px; }
}

.hero__photo {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
  background:
    linear-gradient(135deg, var(--primary-l-3) 0%, var(--secondary-l-2) 100%);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__badge,
.badge {
  position: absolute;
  background: var(--bg-surface);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-l);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__badge--top,
.badge--top {
  top: -16px;
  left: -28px;
  transform: rotate(-3deg);
}

.hero__badge--bottom,
.badge--bottom {
  bottom: 24px;
  right: -32px;
  transform: rotate(2deg);
  max-width: 240px;
}

@media (max-width: 540px) {
  .hero__badge--top,
  .badge--top { left: -8px; top: -8px; }
  .hero__badge--bottom,
  .badge--bottom { right: -8px; bottom: 12px; }
}

/* ── Hero mit Video statt Foto ────────────────────────────────────
   Das Video trägt den Hero allein. Über bewegtem Bild verdecken Karten
   Gesicht und Untertitel – die Badges sitzen deshalb weiter unten auf dem
   Standbild in „Deine Expertin“. */

.hero__visual--video {
  aspect-ratio: auto;
  max-width: 620px;
}

@media (max-width: 960px) {
  .hero__visual--video { max-width: 560px; }
}

.hero__badge-num,
.badge__num {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--primary);
  line-height: 1;
}

.hero__badge-label,
.badge__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero__badge-quote,
.badge__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-m);
  line-height: 1.35;
  color: var(--text-title);
}

.hero__badge-author,
.badge__author {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* ── Buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.95rem 1.5rem;
  font-size: var(--text-m);
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border-radius: var(--btn-radius, var(--radius-full));
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  line-height: 1;
}

.btn--primary {
  background-color: var(--primary);
  color: var(--light);
  box-shadow: 0 6px 20px hsla(335, 55%, 38%, 0.25);
}

.btn--primary:hover {
  background-color: var(--primary-d-1);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px hsla(335, 55%, 38%, 0.35);
}

.btn--secondary {
  background-color: transparent;
  color: var(--text-title);
  border: 1.5px solid var(--text-title);
}

.btn--secondary:hover {
  background-color: var(--text-title);
  color: var(--light);
}

.btn--ghost {
  background-color: transparent;
  color: var(--primary);
  padding-left: 0;
  padding-right: 0;
}

.btn--ghost:hover { color: var(--primary-d-1); }
.btn--ghost::after {
  content: "→";
  transition: transform 0.2s ease;
}
.btn--ghost:hover::after { transform: translateX(4px); }

.btn.large { padding: 1.15rem 1.85rem; font-size: var(--text-l); }
.btn.full-width { width: 100%; text-align: center; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* ── Pain Bar ──────────────────────────────────────────────────── */

.pain-bar {
  background: var(--bg-deep);
  color: var(--light-80);
  padding: var(--space-l) var(--space-m);
  border-block: 1px solid var(--light-10);
}

.pain-bar__container {
  max-width: var(--max-screen-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
}

@media (max-width: 720px) {
  .pain-bar__container { grid-template-columns: repeat(2, 1fr); }
}

.pain-bar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-s);
  line-height: 1.4;
}

.pain-bar__item-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--secondary-l-2);
}

/* ── Section Heading ──────────────────────────────────────────── */

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 760px;
}

.section-heading--centered {
  text-align: center;
  align-items: center;
  margin-inline: auto;
}

.section-heading h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0;
}

/* Funnel-Seiten tragen ihre Überschrift als h1 im section-heading. Ohne das
   hier bekämen sie --text-4xl aus globals.css – die Hero-Größe der LP. */
.section-heading h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: 0;
}

.section-heading h1 em,
.section-heading h2 em {
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.section-heading p {
  font-size: var(--text-l);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0;
}

.section-heading--centered p { margin-inline: auto; }

/* ── 3-Schritte-Fahrplan ──────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: var(--columns-3);
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-l);
}

.step__num {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
  color: var(--primary);
  font-weight: 400;
}

.step__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--text-title);
  margin-bottom: 0;
}

.step__body {
  color: var(--text-muted);
  margin-bottom: 0;
  font-size: var(--text-m);
}

.step__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.step__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--text-s);
  color: var(--text-body);
}

.step__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ── Über Mona ────────────────────────────────────────────────── */

.about {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--max-screen-width);
  margin-inline: auto;
}

@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }


.about__visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
  background:
    repeating-linear-gradient(
      45deg,
      hsla(0, 0%, 100%, 0.06) 0,
      hsla(0, 0%, 100%, 0.06) 12px,
      transparent 12px,
      transparent 24px
    ),
    linear-gradient(160deg, var(--primary-d-1) 0%, var(--primary-d-3) 100%);
  position: relative;
  overflow: hidden;
}

.about__visual::after {
  content: "Foto Mona — bevorzugt Querformat im Studio";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-s);
  color: var(--secondary-l-3);
  text-align: center;
  padding: var(--space-l);
}

/* Foto in „Deine Expertin“ trägt jetzt die beiden Badges – das 4:5-Portrait
   bietet dafür die Höhe, die dem 16:9-Video im Hero fehlt. Overflow muss
   sichtbar bleiben, damit die Karten über den Bildrand ragen dürfen; die
   Rundung übernimmt deshalb der innere .about__photo-Wrapper. */
.about__visual--badged {
  overflow: visible;
  background: none;
  border-radius: 0;
}

.about__visual--badged::after { content: none; }

.about__photo {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  background-color: var(--bg-warm);
  box-shadow: var(--shadow-l);
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Geringere Überhänge als im Hero: diese Spalte steht am linken Container-
   Rand, zu weit außen würde die Karte den Viewport sprengen. */
.about__visual--badged .badge--top { top: -14px; left: -18px; }
.about__visual--badged .badge--bottom { bottom: 28px; right: -24px; }

@media (max-width: 880px) {
  .about__visual--badged .badge--top { left: -8px; top: -8px; }
  .about__visual--badged .badge--bottom { right: -8px; bottom: 16px; }
}

.about__credentials {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.about__sig {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  /* --secondary-l-1 ist eine Farbe für dunkle Flächen und kam hier auf 1,75:1.
     --secondary-d-2 hält den warmen Ton und erreicht 6,1:1. */
  color: var(--secondary-d-2);
  margin-top: var(--space-s);
}

.creds {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-m);
}

@media (max-width: 540px) { .creds { grid-template-columns: 1fr; } }

.creds__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-m);
  border-left: 2px solid var(--secondary);
}

.creds__num {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--primary);
  line-height: 1.05;
}

.creds__label {
  font-size: var(--text-s);
  color: var(--text-muted);
}

/* ── Testimonials ─────────────────────────────────────────────── */

.testimonials {
  display: grid;
  grid-template-columns: var(--columns-3);
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

@media (max-width: 960px) { .testimonials { grid-template-columns: 1fr; } }

/* Einzelne Stimme: nicht über die volle Breite ziehen, sondern zentriert setzen. */
.testimonials--single {
  grid-template-columns: 1fr;
  max-width: 620px;
  margin-inline: auto;
}

.testimonial {
  background: var(--bg-surface);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  border: 1px solid var(--border-soft);
  position: relative;
}

.testimonial::before {
  content: "“";
  position: absolute;
  top: -8px;
  left: var(--space-l);
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: var(--primary);
  font-style: italic;
}

.testimonial__quote {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  line-height: 1.4;
  color: var(--text-title);
  margin: 0;
  padding-top: var(--space-s);
}

.testimonial__quote em { font-style: italic; }

.testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--border-soft);
}

.testimonial__name {
  font-weight: 600;
  color: var(--text-title);
  font-size: var(--text-m);
}

.testimonial__role {
  font-size: var(--text-s);
  color: var(--text-muted);
}

/* ── Countdown ────────────────────────────────────────────────── */

.countdown-section {
  padding: var(--space-2xl) var(--space-m);
  background:
    radial-gradient(circle at 20% 30%, var(--primary-l-4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--secondary-l-4) 0%, transparent 50%),
    var(--bg-warm);
}

.countdown {
  max-width: var(--max-screen-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-l);
}

.countdown__date {
  font-family: var(--font-body);
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  font-weight: 600;
}

.countdown__title {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 0;
}

.countdown__title em { font-style: italic; color: var(--primary); }

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 130px));
  gap: var(--space-s);
  margin-top: var(--space-s);
}

.countdown__cell {
  background: var(--bg-surface);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-s);
  border: 1px solid var(--border-soft);
}

.countdown__num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  color: var(--text-title);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.countdown__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 600;
}

/* 4 Zellen à min. 80px + Gaps + „SEKUNDEN“ passen unter ~420px nicht mehr in
   die Zeile – ohne das hier scrollt die ganze Seite horizontal. */
@media (max-width: 420px) {
  .countdown__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2xs);
    width: 100%;
  }
  .countdown__cell { padding: var(--space-s) var(--space-3xs); }
  .countdown__label { letter-spacing: 0.04em; font-size: 0.58rem; }
}

/* Countdown im Hero: dieselben Zellen, nur flacher. Über die volle Breite der
   Video-Spalte, damit er als Sockel unter dem Video sitzt statt als Block
   daneben. Die Regeln stehen bewusst nach dem Basis-Countdown, sonst
   überschreibt dieser bei gleicher Spezifität die Spalten der Variante. */

.hero__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-s);
  text-align: center;
}

.hero__countdown-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  font-weight: 600;
}

.countdown__grid--kompakt {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin-top: 0;
  width: 100%;
}

.countdown__grid--kompakt .countdown__cell {
  padding: var(--space-xs) var(--space-3xs);
  gap: 2px;
}

.countdown__grid--kompakt .countdown__num {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
}

/* ── FAQ ──────────────────────────────────────────────────────── */

.faq {
  max-width: 880px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.faq__item {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq__item[open] {
  border-color: var(--primary-30);
  box-shadow: var(--shadow-s);
}

.faq__summary {
  padding: var(--space-m) var(--space-l);
  font-weight: 600;
  font-size: var(--text-l);
  color: var(--text-title);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  font-family: var(--font-heading);
  font-weight: 500;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--primary);
  font-weight: 300;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.faq__item[open] .faq__summary::after {
  content: "−";
  transform: rotate(0deg);
}

.faq__body {
  padding: 0 var(--space-l) var(--space-l);
  color: var(--text-body);
  font-size: var(--text-m);
}

.faq__body p { margin-bottom: var(--space-s); }
.faq__body p:last-child { margin-bottom: 0; }

/* ── Sekundär-CTA / Erstgespräch ──────────────────────────────── */

.cta-band {
  background: var(--bg-deep);
  color: var(--light);
  padding: var(--space-3xl) var(--space-m);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, var(--primary-30) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, var(--secondary-20) 0%, transparent 40%);
  pointer-events: none;
}

.cta-band__content {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}

.cta-band h2 {
  color: var(--light);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 0;
}

.cta-band h2 em { font-style: italic; color: var(--secondary-l-2); }

.cta-band p {
  color: var(--light-80);
  font-size: var(--text-l);
  max-width: 56ch;
  margin: 0 auto;
}

.cta-band .btn--secondary {
  border-color: var(--light);
  color: var(--light);
}

.cta-band .btn--secondary:hover {
  background-color: var(--light);
  color: var(--text-title);
}

/* ── Anmeldeformular ──────────────────────────────────────────── */

.signup {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  max-width: var(--max-screen-width);
  margin-inline: auto;
  align-items: start;
}

@media (max-width: 960px) { .signup { grid-template-columns: 1fr; } }

.signup__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: sticky;
  top: 100px;
}

@media (max-width: 960px) { .signup__intro { position: static; } }

.signup__intro h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0;
}

.signup__intro h2 em { font-style: italic; color: var(--primary); }

.signup__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.signup__list li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--text-m);
  color: var(--text-body);
}

.signup__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--secondary-d-1);
  font-weight: 700;
}

.signup__list li strong { color: var(--text-title); }

.contact-form-wrapper {
  width: 100%;
  border-radius: var(--radius-l);
  background-color: var(--bg-surface);
  padding: var(--space-2xl) var(--space-l);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-l);
  position: relative;
}

.contact-form-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.contact-form-wrapper__head {
  margin-bottom: var(--space-l);
  text-align: left;
}

.contact-form-wrapper__head h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-xs);
}

.contact-form-wrapper__head p {
  color: var(--text-muted);
  margin-bottom: 0;
  font-size: var(--text-s);
}

.contact-form__footnote {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-xs);
}

/* ── Logo placeholder ─────────────────────────────────────────── */

.logo {
  display: flex;
  align-items: center;
}

/* ── Prose / Worried-Questions block ──────────────────────────── */

.prose {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.prose--centered { text-align: center; align-items: center; }

.prose p { font-size: var(--text-m); color: var(--text-body); max-width: 64ch; }
.prose p.lead { font-size: var(--text-xl); color: var(--text-title); }

.questions-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius-m);
  padding: var(--space-l) var(--space-xl);
  max-width: 620px;
  margin-inline: auto;
  width: 100%;
}

.questions-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.questions-card li {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-m);
  color: var(--text-title);
  line-height: 1.35;
  padding-left: 1.5rem;
  position: relative;
}

.questions-card li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  color: var(--secondary-d-1);
}

.prose__alone {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--primary);
  line-height: 1.25;
  margin: 0;
}

/* ── Expect checklist ─────────────────────────────────────────── */

.checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  display: grid;
  gap: var(--space-m);
  max-width: 760px;
  margin-inline: auto;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  font-size: var(--text-m);
  color: var(--text-title);
  line-height: 1.4;
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--border-soft);
}

.checklist li:last-child { border-bottom: none; padding-bottom: 0; }

.checklist__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary-l-4);
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.checklist__icon svg { width: 16px; height: 16px; stroke: var(--primary); }

/* ── Audience pills ──────────────────────────────────────────── */

/* Flex statt Grid, damit eine unvollständige letzte Reihe zentriert wird.
   Mit auto-fit-Grid landeten die 5 Items als 4 + 1 verwaistes Item. */
.audience {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

.audience__item {
  flex: 1 1 300px;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: var(--space-l);
  display: flex;
  align-items: center;
  gap: var(--space-m);
  font-size: var(--text-m);
  color: var(--text-title);
  font-weight: 500;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.audience__item:hover {
  transform: translateY(-3px);
  border-color: var(--primary-30);
}

.audience__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--light);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--text-s);
}

/* ── Info "auf einen Blick" cards ─────────────────────────────── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-l);
  width: 100%;
}

@media (max-width: 880px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .info-grid { grid-template-columns: 1fr; } }

.info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  box-shadow: var(--shadow-s);
}

.info-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: linear-gradient(135deg, var(--primary-l-4), var(--secondary-l-4));
  display: grid;
  place-items: center;
  margin-bottom: var(--space-xs);
}

.info-card__icon svg { width: 22px; height: 22px; stroke: var(--primary); }

.info-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--text-muted);
}

/* Auf den Funnel-Seiten stehen längere Werte (Zeitspanne statt Uhrzeit) in
   denselben Karten – dort eine Stufe kleiner, sonst brechen sie mehrzeilig um. */
.info-grid--compact .info-card__value { font-size: var(--text-l); }

.info-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--text-title);
  line-height: 1.1;
}

/* ── Anmeldeformular (Felder) ─────────────────────────────────── */

.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

@media (max-width: 480px) { .contact-form__row { grid-template-columns: 1fr; } }

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-form__label {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-title);
}

.contact-form__label .req { color: var(--secondary-d-1); }

.contact-form__input,
.contact-form__select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-s);
  font-size: var(--text-m);
  font-family: inherit;
  background: var(--bg-body);
  color: var(--text-title);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-form__input:focus,
.contact-form__select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-surface);
  box-shadow: 0 0 0 4px var(--primary-10);
}

/* Eigener Pfeil statt des Browser-Standards, der je System anders aussieht.
   Der Pfeil liegt als SVG im Hintergrund; rechts Platz dafür lassen. */
.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
}

.contact-form__select:hover { border-color: var(--primary-40); }

/* Solange nur der Platzhalter steht, gedämpft wie ein leeres Eingabefeld. */
.contact-form__select:invalid { color: var(--text-muted); }
.contact-form__select option { color: var(--text-title); }

.contact-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  font-size: var(--text-s);
  color: var(--text-muted);
  line-height: 1.5;
}

.contact-form__check input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.contact-form__check a {
  color: var(--primary);
  text-decoration: underline;
}

.contact-form__button {
  background-color: var(--primary);
  color: var(--light);
  font-size: var(--text-m);
  font-weight: 600;
  font-family: inherit;
  width: 100%;
  padding: 1.1rem var(--space-m);
  border: none;
  cursor: pointer;
  border-radius: var(--btn-radius, var(--radius-full));
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  margin-top: var(--space-s);
  box-shadow: 0 6px 20px hsla(335, 55%, 38%, 0.25);
}

.contact-form__button:hover {
  background-color: var(--primary-d-1);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px hsla(335, 55%, 38%, 0.35);
}

.contact-form__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.contact-form__success {
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  text-align: center;
  padding: var(--space-l);
}

/* Mehrstufige Formulare: Der gap von .contact-form greift nur zwischen seinen
   direkten Kindern – das ist beim Schrittformular je Schritt genau eines, die
   Felder darin stünden also ohne Abstand aufeinander. Der Schritt-Container
   bekommt deshalb denselben gap.
   display:flex schlägt [hidden], der inaktive Schritt wäre sonst sichtbar –
   die Ausblendung muss danach explizit wieder gesetzt werden. */
.contact-form [data-schritt] {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.contact-form [data-schritt][hidden] { display: none; }

/* Schrittanzeige im Anmelde-Popup: sie stammt von der Angebotsseite und
   sitzt dort mittig unter einer Überschrift. Direkt über dem Formular
   braucht sie etwas Luft. */
.modal__panel .steps-bar { margin-bottom: var(--space-m); }

/* ── Auswahlfragen (Radio-Gruppen als Karten) ─────────────────── */
/* Die Qualifizierungsfragen haben lange Antworten. Als nackte Radio-Punkte
   wären sie auf dem Telefon kaum zu treffen; die ganze Karte ist deshalb das
   Label und damit die Trefferfläche. */

.contact-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* legend lässt sich nicht zuverlässig flexen – als Block mit voller Breite
   steht die Frage sonst neben statt über den Antworten. */
.contact-form__legend {
  display: block;
  width: 100%;
  padding: 0;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-title);
  line-height: 1.45;
}

.contact-form__legend .req { color: var(--secondary-d-1); }

.contact-form__optionen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.contact-form__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-s);
  background: var(--bg-body);
  font-size: var(--text-s);
  color: var(--text-body);
  line-height: 1.45;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__option:hover { border-color: var(--primary-40); }

.contact-form__option input[type="radio"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* :has() trägt hier die Auswahl-Optik. Ohne Unterstützung bleibt die Karte
   schlicht – der Radio-Punkt zeigt die Auswahl trotzdem an. */
.contact-form__option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-5);
  box-shadow: 0 0 0 1px var(--primary);
}

/* Fokus gehört auf die Karte, nicht nur auf den 18px-Punkt. */
.contact-form__option:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Einstufungs-Block auf der Zwischenseite ──────────────────── */
/* Nur sichtbar, wenn die Anmeldung als „heiß" oder „warm" eingestuft wurde –
   eingeblendet wird er per Skript, siehe /fast-geschafft/. */

.routing {
  padding: var(--space-l);
  border: 1px solid var(--primary-20);
  border-radius: var(--radius-s);
  background: var(--bg-surface);
  box-shadow: 0 10px 30px var(--shadow-primary);
  text-align: left;
}

.routing__text { margin: 0 0 var(--space-m); color: var(--text-body); }

.routing__hinweis {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-s);
  background: var(--primary-5);
  font-weight: 600;
  color: var(--text-title);
}

.routing__kalender {
  width: 100%;
  min-height: 680px;
  border: 0;
}

/* ── Animationen (GSAP) ───────────────────────────────────────── */
/* Alle Startzustände hängen an `html.js-anim`. Diese Klasse setzt allein das
   Guard-Script im <head> – und nur, wenn JS läuft UND kein Reduced-Motion
   angefordert ist. Meldet sich GSAP nicht binnen 2,5s zurück, nimmt das
   Guard-Script die Klasse wieder weg. Ohne sie ist die Seite vollständig
   sichtbar; es kann also nichts unsichtbar hängen bleiben. */

/* Registriert, damit der Marker als Zahl interpolierbar ist. inherits: true
   ist nötig, weil ihn das ::after-Pseudoelement liest – nicht vererbte
   Custom Properties erreichen Pseudoelemente nicht. Fällt ohne JS auf 1
   zurück, der Marker ist dann einfach von Anfang an voll gezeichnet. */
@property --underline-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.hero__title .underline::after {
  transform: scaleX(var(--underline-scale));
  transform-origin: left center;
}

html.js-anim [data-reveal],
html.js-anim [data-reveal-children] > *,
html.js-anim .hero__content > *,
html.js-anim .hero__photo,
html.js-anim .hero__visual .video-embed {
  opacity: 0;
}

/* Die H1 ist das LCP-Element und startet deshalb sichtbar, nur abgedimmt.
   Aus opacity: 0 eingeblendet würde sie den LCP-Zeitpunkt um die volle
   Animationsdauer nach hinten schieben. Muss nach der Regel oben stehen. */
html.js-anim .hero__title { opacity: 0.35; }

html.js-anim .hero__title .underline { --underline-scale: 0; }

/* Während des Auf-/Zuklappens die Höhe sauber beschneiden. */
html.js-anim .faq__body { overflow: hidden; }

/* ── Intro-Video (Gumlet) ─────────────────────────────────────── */
/* Startet stumm per Autoplay – Browser lassen Autoplay nur ohne Ton zu.
   Das Overlay holt den Ton per Klick nach und verschwindet danach, damit
   die nativen Player-Controls frei erreichbar sind. */

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background-color: var(--bg-deep);
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed__sound {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-m);
  border: 0;
  cursor: pointer;
  background: linear-gradient(to top, hsla(345, 50%, 15%, 0.5), transparent 45%);
  transition: opacity 0.3s ease;
}

/* Nach dem Ton-Klick wird die Fläche zur Play/Pause-Schaltfläche: Verlauf
   weg, Pille mittig, und der untere Streifen bleibt frei, damit Gumlets
   eigene Controls (Scrubber, Vollbild) erreichbar bleiben. */
/* Klassenselektor schlägt die UA-Regel [hidden]{display:none} – ohne das
   bliebe die Ton-Pille über dem Einwilligungs-Platzhalter sichtbar. */
.video-embed__sound[hidden] { display: none; }

.video-embed__sound.is-playing {
  bottom: 3.25rem;
  padding-bottom: 0;
  align-items: center;
  background: none;
}

/* Während der Wiedergabe unauffällig – sichtbar beim Hover, bei Tastatur-
   Fokus und dauerhaft, solange das Video pausiert ist. */
.video-embed__sound.is-playing .video-embed__pill {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.video-embed__sound.is-playing:hover .video-embed__pill,
.video-embed__sound.is-playing:focus-visible .video-embed__pill,
.video-embed__sound.is-paused .video-embed__pill {
  opacity: 1;
}

.video-embed__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-full);
  background-color: var(--light);
  box-shadow: var(--shadow-m);
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-title);
  transition: transform 0.2s ease;
}

.video-embed__sound:hover .video-embed__pill { transform: translateY(-2px); }

.video-embed__icon { font-size: 1.1em; }

/* Fehlermeldung des Anmeldeformulars (Netzwerk-/Serverfehler beim Versand). */
.contact-form__error {
  margin-top: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background-color: var(--error-10);
  border: 1px solid var(--error-20);
  color: var(--primary-d-2);
  font-size: var(--text-s);
  line-height: 1.5;
}

/* ── Funnel-Seiten (fast-geschafft / danke) ───────────────────── */

/* Großes Statuszeichen über der Headline. */
.status-mark {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-m);
}

.status-mark--pending {
  background: linear-gradient(135deg, var(--primary-l-4), var(--secondary-l-3));
  color: var(--primary);
}

.status-mark--done {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--light);
}

.status-mark svg { width: 32px; height: 32px; }

.lead-centered {
  font-size: var(--text-l);
  color: var(--text-body);
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}

.hint-centered {
  font-size: var(--text-s);
  color: var(--text-muted);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* ── Kalender-Auswahl ─────────────────────────────────────────── */

.calendar__date {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  color: var(--text-title);
  text-align: center;
  line-height: 1.5;
  max-width: none;
}

.calendar {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 var(--space-m);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  width: 100%;
}

.calendar li { display: flex; }

/* Bewusst gleichwertig statt ein hervorgehobener Anbieter – welcher Kalender
   „der richtige“ ist, weiß nur die Besucherin. */
.calendar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--btn-radius, var(--radius-full));
  background-color: var(--bg-surface);
  color: var(--text-title);
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.calendar__link:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

@media (max-width: 480px) {
  .calendar { flex-direction: column; }
  .calendar li { width: 100%; }
  .calendar__link { width: 100%; justify-content: center; }
}

/* ── Anmelde-Popup ────────────────────────────────────────────── */
/* Natives <dialog>: Fokus-Falle, Esc und inert-Hintergrund kommen vom
   Browser. Ohne JS bleibt es geschlossen – das HubSpot-Formular braucht
   ohnehin JavaScript, es geht also nichts verloren. */

.modal {
  /* Muss explizit stehen: der Universal-Reset in globals.css (* { margin: 0 })
     überschreibt das margin:auto, mit dem der Browser modale Dialoge zentriert –
     ohne das klebt das Popup in der linken oberen Ecke. */
  margin: auto;
  width: min(560px, calc(100vw - 2 * var(--space-m)));
  max-height: min(90dvh, 900px);
  padding: 0;
  border: none;
  border-radius: var(--radius-l);
  background: var(--bg-surface);
  box-shadow: 0 24px 64px hsla(345, 40%, 20%, 0.28);
  overflow: hidden;
}

/* showModal() macht den Hintergrund inert, sperrt aber das Scrollen nicht –
   ohne das hier scrollt die Seite hinter dem offenen Popup weiter. */
html:has(dialog[data-modal][open]) {
  overflow: hidden;
}

.modal::backdrop {
  background: hsla(345, 50%, 12%, 0.55);
  backdrop-filter: blur(3px);
}

/* Eigenes Element für den Inhalt, damit ein Klick auf den Rand (das <dialog>
   selbst) zum Schließen unterschieden werden kann. */
.modal__panel {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  padding: var(--space-xl) var(--space-l) var(--space-l);
  -webkit-overflow-scrolling: touch;
}

.modal__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.modal__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-full);
  background: var(--bg-body);
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal__close:hover {
  background: var(--primary-10);
  color: var(--primary);
}

.modal__head { margin-bottom: var(--space-l); padding-right: 3rem; }

.modal__head h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
  margin-bottom: var(--space-2xs);
}

.modal__head h2 em { font-style: italic; color: var(--primary); font-weight: 400; }

.modal__head p {
  font-size: var(--text-s);
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Kurzer Anreißer über dem Öffner-Button in der Anmelde-Sektion. */
.signup__teaser {
  font-size: var(--text-m);
  color: var(--text-muted);
  margin-bottom: var(--space-m);
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 0.25s ease both; }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Cookie-Banner ────────────────────────────────────────────── */
/* Unten angedockt statt als Vollbild-Overlay: Die Seite bleibt lesbar und
   bedienbar, die Entscheidung wirkt nicht erpresst. Ablehnen ist gleich
   prominent wie Zustimmen – anders wäre die Einwilligung nicht freiwillig. */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80; /* über der mobilen Sticky-CTA (60) und unter dem Dialog */
  margin: 0;
  padding: var(--space-m);
  border: none;
  border-top: 1px solid var(--border-soft);
  background-color: var(--bg-surface);
  box-shadow: 0 -8px 32px var(--shadow-primary);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.consent[data-open] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

.consent__inner {
  max-width: var(--max-screen-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-l);
  flex-wrap: wrap;
}

.consent__text {
  flex: 1 1 420px;
  font-size: var(--text-s);
  line-height: 1.55;
  color: var(--text-muted);
}

.consent__text strong { color: var(--text-title); }
.consent__text a { color: var(--primary); }

.consent__actions {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.consent__btn {
  padding: 0.8rem var(--space-l);
  border-radius: var(--btn-radius, var(--radius-full));
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.consent__btn--primary {
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: var(--light);
}

.consent__btn--primary:hover {
  background-color: var(--primary-d-1);
  border-color: var(--primary-d-1);
  transform: translateY(-1px);
}

/* Kein „Dark Pattern": gleiche Größe, gleiche Position, nur ruhiger gefärbt. */
.consent__btn--ghost {
  border: 1px solid var(--border-primary);
  background-color: transparent;
  color: var(--text-title);
}

.consent__btn--ghost:hover {
  border-color: var(--text-title);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 0; padding-inline: var(--space-s); }
}

/* Solange der Banner steht, tritt die Sticky-CTA zurück – zwei gestapelte
   Leisten am unteren Rand wären auf Mobil unbedienbar. */
body:has(.consent[data-open]) .sticky-cta { display: none; }

/* ── Platzhalter für blockierte Einbettungen ──────────────────── */

.video-embed__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-l);
  text-align: center;
  background:
    radial-gradient(circle at 30% 20%, var(--primary-d-1) 0%, transparent 60%),
    var(--bg-deep);
}

.video-embed__gate[hidden] { display: none; }

.video-embed__gate-text {
  max-width: 34ch;
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--light-80);
}

.video-embed__gate-text strong { color: var(--light); }

.video-embed__gate-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--light-70);
  text-decoration: underline;
  cursor: pointer;
}

.video-embed__gate-link:hover { color: var(--light); }

/* Hinweis statt Einbettung, solange keine Einwilligung vorliegt. */
.embed-gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  border: 1px dashed var(--border-primary);
  border-radius: var(--radius-m);
  background-color: var(--bg-body);
  text-align: center;
}

.embed-gate__text {
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.55;
  color: var(--text-muted);
}

.embed-gate__text strong { color: var(--text-title); }

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────── */
/* Lange Fließtexte: ruhige Typografie, klare Abschnittsgrenzen. Die Inhalte
   kommen als fertiges HTML aus src/data/rechtstexte/ – deshalb wird hier auf
   Elementebene gestylt statt über Klassen. */

.legal {
  max-width: 70ch;
  color: var(--text-body);
  font-size: var(--text-m);
  line-height: 1.7;
}

.legal h2 {
  font-size: var(--text-l);
  line-height: 1.3;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 1px solid var(--border-soft);
}

.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.legal h3 {
  font-size: var(--text-m);
  font-family: var(--font-body);
  font-weight: 700;
  margin-top: var(--space-l);
  margin-bottom: var(--space-2xs);
}

.legal p { margin-bottom: var(--space-m); max-width: none; }

.legal ul,
.legal ol {
  margin: 0 0 var(--space-m);
  padding-left: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.legal li { padding-left: var(--space-2xs); }

/* Rechtstexte enthalten überlange URLs und Fachbegriffe. Ohne Umbruch
   schieben sie die Seite auf Mobil horizontal auf – und zwar als Textknoten,
   ohne dass ein einzelnes Element messbar überläuft. */
.legal { overflow-wrap: anywhere; }

.legal a { color: var(--primary); }

.legal__footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--border-soft);
}

/* Sichtbarer Prüfhinweis auf der Datenschutzseite. Bewusst auffällig: ein
   Hinweis, den nur eine README trägt, geht im Zweifel unbemerkt live. */
.legal__hinweis {
  margin-bottom: var(--space-xl);
  padding: var(--space-l);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius-m);
  background-color: var(--secondary-10);
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--text-body);
}

.legal__hinweis p { margin-bottom: var(--space-s); max-width: none; }
.legal__hinweis p:last-child { margin-bottom: 0; }
.legal__hinweis strong { color: var(--text-title); }

.legal__hinweis ul {
  margin: 0 0 var(--space-s);
  padding-left: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* ── Einmaliges Angebot (Upgrade-Seite) ───────────────────────── */

.fortschritt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-full);
  background-color: var(--success-10);
  font-size: var(--text-s);
  color: var(--text-body);
  max-width: none;
}

.fortschritt__haken {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: var(--success);
  color: var(--light);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.angebot {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-l) var(--space-l);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-l);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-l);
  text-align: center;
}

.angebot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.angebot__rabatt {
  position: absolute;
  top: calc(var(--space-m) * -1);
  right: calc(var(--space-m) * -1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-d-1));
  color: var(--light);
  transform: rotate(6deg);
  box-shadow: var(--shadow-m);
}

.angebot__rabatt strong { font-size: var(--text-l); line-height: 1; }
.angebot__rabatt span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; }

@media (max-width: 540px) {
  .angebot__rabatt { top: -14px; right: -8px; width: 64px; height: 64px; }
}

.angebot__titel {
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin-bottom: var(--space-l);
}

.angebot__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  text-align: left;
}

.angebot__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--text-body);
}

.angebot__haken {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background-color: var(--primary-l-4);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.angebot__preis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  margin-bottom: var(--space-m);
}

.angebot__preis-jetzt {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--primary);
}

.angebot__preis-alt { font-size: var(--text-s); color: var(--text-muted); }
.angebot__preis-hinweis { font-size: var(--text-xs); color: var(--text-muted); }

.angebot__frist {
  margin-bottom: var(--space-m);
  font-size: var(--text-s);
  color: var(--text-muted);
  max-width: none;
}

.angebot__frist strong {
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-size: var(--text-m);
}

/* Nach Ablauf ehrlich abräumen: kein Rabatt-Störer, kein durchgestrichener
   Preis. Der Weg zur Anmeldung bleibt. */
.angebot--abgelaufen .angebot__rabatt,
.angebot--abgelaufen .angebot__preis-alt { display: none; }

.angebot--abgelaufen .angebot__preis-jetzt { color: var(--text-muted); }
.angebot--abgelaufen .angebot__frist { color: var(--text-muted); font-style: italic; }

.angebot__todo {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius-s);
  background-color: var(--secondary-10);
  font-size: var(--text-xs);
  line-height: 1.5;
  text-align: left;
  color: var(--text-body);
  max-width: none;
}

.angebot__todo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
}

/* Ausstieg als eigener Button unter dem Kauf-CTA. Sichtbar umrandet, aber
   ruhiger gefärbt: erkennbar als echte Option, ohne dem Angebot die Schau zu
   stehlen. Ein übersehener Ausstieg kostet hier die Anmeldung, nicht nur den
   Verkauf. */
.angebot__nein {
  margin-top: var(--space-s);
  font-size: var(--text-m);
  padding-block: 0.85rem;
  color: var(--text-muted);
  border-color: var(--border-primary);
}

.angebot__nein:hover {
  background-color: var(--bg-body);
  color: var(--text-title);
  border-color: var(--text-title);
}

/* ── Schrittanzeige im Funnel ─────────────────────────────────── */

.steps-bar {
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2xs);
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.steps-bar__step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  position: relative;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

/* Verbindungslinie zwischen den Marken, nicht unter dem Text. */
.steps-bar__step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  left: -50%;
  height: 2px;
  background-color: var(--border-soft);
  z-index: 0;
}

.steps-bar__step--aktiv:not(:first-child)::before,
.steps-bar__step--erledigt:not(:first-child)::before {
  background-color: var(--primary-30);
}

.steps-bar__marke {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-soft);
  background-color: var(--bg-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
}

.steps-bar__step--erledigt .steps-bar__marke {
  border-color: var(--success);
  background-color: var(--success);
  color: var(--light);
}

.steps-bar__step--aktiv .steps-bar__marke {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--light);
  box-shadow: 0 0 0 4px var(--primary-10);
}

.steps-bar__step--erledigt .steps-bar__text,
.steps-bar__step--aktiv .steps-bar__text { color: var(--text-title); font-weight: 600; }

@media (max-width: 420px) {
  .steps-bar__text { font-size: 0.62rem; }
}

/* Bezugspunkt des Streichpreises (§ 11 PAngV). Bewusst klein, aber lesbar –
   eine Pflichtangabe darf nicht in Grau verschwinden. */
.angebot__preis-bezug {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* Nach Ablauf des Angebots entfällt der Vergleich mit ihm. */
.angebot--abgelaufen .angebot__preis-bezug { display: none; }

/* ── Goodie zur Masterclass ───────────────────────────────────── */

/* Ankündigung im Hero der Landingpage, rechts unter dem Countdown.
   Getönter Grund statt Weiß, damit sie sich von Fläche und Countdown-Kacheln
   abhebt. */
.hero__goodie {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--primary-20);
  border-radius: var(--radius-l);
  background: var(--primary-5);
}

.hero__goodie-cover {
  flex: none;
  width: 76px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 6px 16px var(--shadow-primary);
  transform: rotate(-5deg);
}

.hero__goodie-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--text-s);
  color: var(--text-body);
  line-height: 1.45;
}

.hero__goodie-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.hero__goodie-title {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  font-weight: 600;
  color: var(--text-title);
  line-height: 1.25;
}

/* Auslieferung auf der Danke-Seite */
.goodie {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-l);
  align-items: center;
  width: 100%;
  margin-top: var(--space-xl);
  padding: var(--space-l);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-l);
  background: var(--bg-surface);
  box-shadow: 0 10px 30px var(--shadow-primary);
  text-align: left;
}

.goodie__cover {
  display: block;
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
}

.goodie__cover:hover { transform: rotate(0deg) scale(1.02); }

.goodie__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px var(--shadow-primary);
}

.goodie__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.goodie__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--text-title);
  line-height: 1.2;
}

.goodie__text { color: var(--text-body); }

@media (max-width: 640px) {
  .goodie {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .goodie__cover { width: 150px; }
  .goodie__body { align-items: center; }
}

/* ── Ansprechpartner (zwei Personen nebeneinander) ────────────── */

.duo {
  display: grid;
  grid-template-columns: var(--columns-2);
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

.duo__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-l);
}

.duo__photo {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-m);
}

.duo__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--text-title);
  line-height: 1.2;
  margin-top: var(--space-xs);
}

.duo__role {
  font-size: var(--text-s);
  color: var(--primary);
  font-weight: 600;
}

.duo__text { color: var(--text-body); }

/* Querformat-Foto in der Hochformat-Spalte von .about: Mona sitzt links der Mitte. */
.about__photo--links img { object-position: 38% 50%; }

/* In der Textspalte von .about linksbündig statt zentriert. */
.about__credentials .checklist { margin-inline: 0; }

/* Längere Werte (z. B. „IHK-Bildungszentrum Dresden“): zwei Spalten statt vier,
   sonst dehnt das längste Wort seine Spalte und die Karten werden ungleich breit. */
.info-grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 460px) { .info-grid--2x2 { grid-template-columns: 1fr; } }

.nowrap { white-space: nowrap; }