/* ==========================================================================
   Funnel-Engine – Basis-Stylesheet
   Mobil zuerst. Keine Frameworks, keine externen Requests.
   Farben und Schriften kommen als Custom Properties aus dem Tenant-Theme
   (siehe base.html.j2 → :root).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Das `hidden`-Attribut muss immer gewinnen.
   Der Browser setzt dafür nur `[hidden] { display: none }` — eine einfache
   Klassenregel wie `.bk-loading { display: flex }` ist spezifischer und
   überstimmt das. Genau daran blieb der Ladehinweis der Terminauswahl
   sichtbar, obwohl die Termine längst da waren. */
[hidden] { display: none !important; }

html {
  /* Sonst verschwindet die Zielüberschrift eines Ankersprungs unter der
     klebenden Kopfzeile. Auf dem Telefon klebt sie nicht, dort schadet der
     Versatz aber auch nicht. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4.8vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: var(--primary-dark); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

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

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 46rem); }

section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.sec--alt   { background: var(--surface-alt); }
.sec--ink   { background: var(--ink); color: #fff; }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec--tight { padding-block: clamp(1.75rem, 4vw, 2.5rem); }

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .75rem;
}
.sec--ink .kicker { color: var(--accent); }

.lede { font-size: 1.1rem; color: var(--muted); max-width: 42rem; }
.sec--ink .lede { color: rgba(255,255,255,.75); }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

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

.btn {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  min-height: 3.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent);
  text-align: center;
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--primary) 75%, transparent); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--lg    { font-size: 1.15rem; padding: 1.2rem 2.4rem; min-height: 3.75rem; width: 100%; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--primary-dark); box-shadow: none;
              border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.btn--ghost:hover { background: var(--surface-alt); box-shadow: none; }
.sec--ink .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.35); }
.sec--ink .btn--ghost:hover { background: rgba(255,255,255,.08); }

@media (min-width: 34rem) { .btn--lg { width: auto; } }

.btn-note {
  font-size: .875rem;
  color: var(--muted);
  margin-top: .85rem;
}
.sec--ink .btn-note { color: rgba(255,255,255,.65); }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem;
}
.site-head__logo { display: inline-flex; min-width: 0; flex: 0 1 auto; }
/* `object-fit` ist hier nicht kosmetisch: Als Flex-Kind schrumpft das <img>,
   wenn der Platz eng wird — die Höhe bleibt aber fest. Ohne `contain` wird das
   Logo dann waagrecht gequetscht statt kleiner. Bei einem Schriftzug mit 7,4:1
   fällt das sofort auf; auf 390 px war er auf 5:1 gestaucht. */
.site-head__logo img {
  height: 3.1rem; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
.site-head__actions { display: flex; align-items: center; gap: .5rem; }
.site-head .btn { padding: .7rem 1.25rem; min-height: 2.75rem; font-size: .95rem; }
/* Unter 48rem blendet sich unten die Leiste mit Preis und Knopf ein. Zwei
   gleichlautende Aufforderungen gleichzeitig am Bildschirmrand kosten Platz
   (65 + 71 px von 900) und teilen die Aufmerksamkeit, ohne etwas zu gewinnen.
   Ab 48rem verschwindet die untere Leiste — dann trägt der Kopf den Knopf. */
@media (max-width: 47.99rem) {
  .site-head__actions .btn { display: none; }
  .site-head__inner { min-height: 3rem; }
  /* Seit der Knopf auf dem Telefon weg ist, hat das Logo die ganze Zeile für
     sich und wächst bis an die Höhengrenze — auf 390 px waren das 79 % der
     Breite. Als Goldschriftzug ist es damit lauter als die Überschrift, die
     führen soll. 1,9rem ergibt rund 58 %; die Marke bleibt erkennbar, ohne
     den Einstieg zu überstimmen.

     Begrenzt wird über `max-height`/`max-width` statt über eine feste Höhe:
     Das Bild skaliert dann von selbst auf das kleinere der beiden Maße, ohne
     Verzerrung und ohne Leerraum. `vw` statt `%`, weil sich Prozent auf das
     Elternelement bezöge — und das bekommt seine Breite erst vom Bild. */
  .site-head__logo img {
    height: auto; width: auto;
    max-height: 1.9rem; max-width: 60vw;
  }
  /* Der Kopf scrollt auf dem Telefon mit, statt zu kleben. Er trug dort nur
     noch das Logo — 55 px dauerhaft belegter Rand für eine Marke, die die
     Besucherin bereits gesehen hat. Zusammen mit der unteren Leiste waren es
     126 px von 844. Was unterwegs gebraucht wird, steht in der Leiste: Preis
     und Knopf. */
  .site-head { position: static; }
}
.head-phone {
  display: none;
  font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink);
  padding: .6rem .9rem; border-radius: 999px;
}
.head-phone:hover { background: var(--surface-alt); }
@media (min-width: 46rem) { .head-phone { display: inline-flex; align-items: center; gap: .45rem; } }

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

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem);
  background:
    radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, var(--primary) 9%, transparent) 0%, transparent 60%),
    radial-gradient(100% 70% at 95% 10%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
    var(--surface);
}
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.hero h1 { margin-bottom: .6rem; }
.hero h1 .lead-line {
  display: block;
  color: var(--muted);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: .15em;
}
.hero__sub { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--muted); max-width: 34rem; }

.hero__cta { margin-top: 1.75rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.hero__trust div { line-height: 1.25; }
.hero__trust b { display: block; font-size: 1.35rem; font-family: var(--font-head); color: var(--primary-dark); }
.hero__trust span { font-size: .85rem; color: var(--muted); }

.hero__media { position: relative; }
.hero__media img {
  width: 100%; border-radius: 1.25rem;
  box-shadow: 0 30px 60px -30px rgba(28,26,34,.4);
  object-fit: cover; aspect-ratio: 4/3;
}

/* Preis-Karte */
.pricecard {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 20px 45px -28px rgba(28,26,34,.45);
}
.hero .pricecard { margin-top: -3rem; position: relative; z-index: 2; margin-inline: 1rem; }
@media (min-width: 60rem) { .hero .pricecard { margin: 1.5rem 0 0; } }
.pricecard__row { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.pricecard__now  { font-family: var(--font-head); font-size: 2.75rem; font-weight: 700; color: var(--primary-dark); line-height: 1; }
.pricecard__was  { font-size: 1.05rem; color: var(--muted); text-decoration: line-through; }
.pricecard__save {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  background: var(--success); color: #fff; padding: .25rem .6rem; border-radius: 999px;
}
.pricecard__for { font-size: .95rem; color: var(--muted); margin-top: .35rem; }
.pricecard ul { list-style: none; padding: 0; margin: 1.15rem 0 0; display: grid; gap: .6rem; }
.pricecard li { display: flex; gap: .65rem; font-size: .97rem; align-items: flex-start; }
.pricecard li::before {
  content: ""; flex: 0 0 1.15rem; height: 1.15rem; margin-top: .18rem; border-radius: 50%;
  background: var(--success) var(--check-svg) center/.7rem no-repeat;
}

/* ── Presse-Leiste ──────────────────────────────────────────────────────── */

.press { text-align: center; }
.press p { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.press img { margin-inline: auto; width: min(100%, 44rem); opacity: .85; filter: grayscale(1); }

/* ── Karten-Raster ──────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 1rem;
  padding: 1.5rem;
}
.sec--alt .card { background: var(--surface); }
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card__num {
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  color: var(--primary); letter-spacing: .06em; display: block; margin-bottom: .6rem;
}

/* ── Problemliste ───────────────────────────────────────────────────────── */

.problist { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .problist { grid-template-columns: repeat(3, 1fr); } }
.problist h3 { font-size: 1.1rem; }
.problist p  { color: var(--muted); font-size: .97rem; margin: 0; }
.problist li { border-left: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); padding-left: 1.15rem; }

/* ── Bewertungen ────────────────────────────────────────────────────────── */

.reviews { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 1rem;
  padding: 1.4rem;
  display: flex; flex-direction: column;
}
.review__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.review__avatar {
  flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.review__name { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.review__when { font-size: .8rem; color: var(--muted); }
.review__stars { color: #F5A623; letter-spacing: .1em; font-size: .95rem; margin-bottom: .5rem; }
.review__text { font-size: .97rem; margin-bottom: 1rem; }
.review__text mark { background: color-mix(in srgb, var(--warning) 35%, transparent); padding: 0 .15em; border-radius: 3px; }
.review__proof {
  margin-top: auto; align-self: flex-start;
  font-size: .82rem; font-weight: 600; color: var(--primary-dark);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}

.rating-badge { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.rating-badge img { width: min(100%, 20rem); }

/* Vorher/Nachher */
/* Auto-fit statt fester Spaltenzahl: Vier Bilder sollen nicht als 3+1 mit
   einem einsamen Rest in der zweiten Reihe stehen. */
.ba-grid {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.ba-grid img { border-radius: .75rem; width: 100%; aspect-ratio: 1; object-fit: cover; }
.disclaimer { font-size: .8rem; color: var(--muted); margin-top: 1.25rem; }

/* Lightbox */
dialog.lightbox {
  border: 0; padding: 0; background: transparent; max-width: min(94vw, 34rem); max-height: 92vh;
}
dialog.lightbox::backdrop { background: rgba(16,14,22,.82); backdrop-filter: blur(3px); }
dialog.lightbox img { border-radius: .75rem; max-height: 84vh; width: auto; margin-inline: auto; }
dialog.lightbox .lb-close {
  display: block; margin: .85rem auto 0; background: #fff; border: 0;
  border-radius: 999px; padding: .6rem 1.4rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); font-size: .95rem;
}

/* ── Garantie ───────────────────────────────────────────────────────────── */

.guarantee {
  display: grid; gap: 1.5rem; align-items: center;
  border-radius: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
}
@media (min-width: 48rem) { .guarantee { grid-template-columns: auto 1fr; gap: 2rem; } }
.guarantee__seal {
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: var(--success); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem; line-height: 1.15;
  padding: .5rem; margin-inline: auto;
}
.guarantee h3 { margin-bottom: .35rem; }
.guarantee p:last-child { margin-bottom: 0; }
.guarantee__fineprint { font-size: .82rem; color: var(--muted); margin-top: .9rem; }

/* ── Studios ────────────────────────────────────────────────────────────── */

.studio { display: flex; flex-direction: column; }
.studio__zip {
  font-family: var(--font-head); font-size: 1.9rem; font-weight: 700;
  color: var(--primary); line-height: 1;
}
.studio__name { font-size: 1.1rem; margin: .35rem 0 .1rem; }
.studio__street { font-weight: 600; font-size: .97rem; }
.studio__dir { font-size: .9rem; color: var(--muted); margin: .6rem 0 1.1rem; }
.studio .btn { margin-top: auto; }

/* ── Buchung ────────────────────────────────────────────────────────────── */

.booking {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: 0 24px 55px -35px rgba(28,26,34,.5);
  margin-top: 2.5rem;
}

.steps { display: flex; gap: .5rem; margin-bottom: 1.75rem; }
.steps li { flex: 1; list-style: none; font-size: .8rem; color: var(--muted); text-align: center; }
.steps li::before {
  content: ""; display: block; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 12%, transparent); margin-bottom: .5rem;
}
.steps li[aria-current="step"] { color: var(--primary-dark); font-weight: 600; }
.steps li[aria-current="step"]::before,
.steps li.done::before { background: var(--primary); }

.bk-step[hidden] { display: none; }
.bk-step h3 { font-size: 1.25rem; margin-bottom: 1rem; }

.studio-choice { display: grid; gap: .75rem; }
.studio-choice button {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
  font-family: inherit; font-size: 1rem;
  background: var(--surface); cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: .85rem; padding: 1rem 1.15rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.studio-choice button:hover { border-color: var(--primary); background: var(--surface-alt); }
.studio-choice button[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.studio-choice .zip {
  flex: 0 0 3.25rem; font-family: var(--font-head); font-weight: 700;
  font-size: 1.15rem; color: var(--primary);
}
.studio-choice .meta { line-height: 1.3; }
.studio-choice .meta b { display: block; font-size: 1rem; }
.studio-choice .meta span { font-size: .87rem; color: var(--muted); }

.daybar { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.15rem; scrollbar-width: thin; }
.daybar button {
  flex: 0 0 auto; min-width: 4.25rem; padding: .6rem .4rem; cursor: pointer;
  font-family: inherit; text-align: center; line-height: 1.25;
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: .7rem;
}
.daybar button b { display: block; font-size: 1.05rem; }
.daybar button span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.daybar button[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.daybar button[disabled] { opacity: .35; cursor: not-allowed; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: .55rem; }
.slots button {
  padding: .8rem .4rem; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: .7rem;
}
.slots button:hover { border-color: var(--primary); }
.slots button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .35rem; }
.field input,
.field select {
  width: 100%; font-family: inherit; font-size: 1.0625rem;
  padding: .9rem 1rem; border-radius: .7rem;
  border: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);
  background: var(--surface); color: var(--ink);
}
.field input:focus,
.field select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--danger); }
.field .err { display: none; color: var(--danger); font-size: .85rem; margin-top: .3rem; }
.field input[aria-invalid="true"] ~ .err,
.field select[aria-invalid="true"] ~ .err { display: block; }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .87rem; color: var(--muted); margin-bottom: 1.25rem; }
.consent input { flex: 0 0 1.2rem; height: 1.2rem; margin-top: .18rem; accent-color: var(--primary); }

.bk-summary {
  background: var(--surface-alt); border-radius: .8rem; padding: 1rem 1.15rem;
  font-size: .95rem; margin-bottom: 1.25rem;
}
.bk-summary b { color: var(--primary-dark); }
.bk-back {
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font-family: inherit; font-size: .9rem; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.bk-msg { font-size: .95rem; padding: .9rem 1.1rem; border-radius: .7rem; margin-bottom: 1rem; }
.bk-msg--err  { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.bk-msg--info { background: var(--surface-alt); color: var(--muted); }

.bk-loading { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .95rem; padding: 1rem 0; }
.spinner {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

.faq { margin-top: 2.25rem; display: grid; gap: .6rem; }
.faq details {
  background: var(--surface); border-radius: .85rem;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem;
  font-weight: 600; font-size: 1.02rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.25rem; top: 1.45rem;
  width: .6rem; height: .6rem; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq .answer { padding: 0 1.25rem 1.25rem; color: var(--muted); font-size: .98rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ── Evidenz ────────────────────────────────────────────────────────────── */

.evidence__figures { display: grid; gap: 1rem; margin: 1.75rem 0; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.evidence__figures div {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: .85rem; padding: 1.1rem;
}
.evidence__figures b { display: block; font-family: var(--font-head); font-size: 1.5rem; color: #fff; }
.evidence__figures span { font-size: .85rem; color: rgba(255,255,255,.7); }
.evidence__studies { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.evidence__studies li { font-size: .93rem; color: rgba(255,255,255,.8); padding-left: 1.1rem; border-left: 2px solid var(--accent); }
.evidence__note { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: 1.75rem; }

/* ── Abschluss-Banner ───────────────────────────────────────────────────── */

.final { text-align: center; }
.final h2 { max-width: 22ch; margin-inline: auto; }
.final .lede { margin-inline: auto; margin-bottom: 2rem; }

/* ── Fußzeile ───────────────────────────────────────────────────────────── */

.site-foot { background: var(--surface-alt); padding-block: 3rem 6.5rem; font-size: .9rem; color: var(--muted); }
@media (min-width: 48rem) { .site-foot { padding-bottom: 3rem; } }
.site-foot__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .site-foot__grid { grid-template-columns: repeat(3, 1fr); } }
.site-foot h4 { font-family: var(--font-body); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: .75rem; }
.site-foot a { color: var(--muted); }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.site-foot__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size: .8rem; }

/* ── Mobile CTA-Leiste ──────────────────────────────────────────────────── */

.stickybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  display: flex; gap: .6rem; align-items: center;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  transform: translateY(110%); transition: transform .25s ease;
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar .price { line-height: 1.15; flex: 0 0 auto; }
.stickybar .price b { display: block; font-family: var(--font-head); font-size: 1.2rem; color: var(--primary-dark); }
.stickybar .price s { font-size: .78rem; color: var(--muted); }
.stickybar .btn { flex: 1; padding: .9rem 1.1rem; min-height: 3rem; font-size: 1rem; }
@media (min-width: 48rem) { .stickybar { display: none; } }

/* Garantie direkt unter dem Hero-Knopf. Klein und ruhig — sie soll den Knopf
   stützen, nicht mit ihm konkurrieren. */
.hero__guarantee {
  margin-top: .5rem; font-size: .9rem; font-weight: 600;
  color: var(--good, #1E874B);
  display: inline-flex; align-items: center; gap: .35rem;
}

/* Zwischenzeile über dem Angebot. */
.offer-bridge {
  font-size: 1.05rem; color: var(--muted); margin-bottom: .75rem;
}

/* „Du zahlst jetzt nichts" über dem Formular. */
.bk-nopay {
  margin: 0 0 1.1rem; padding: .7rem .9rem;
  background: color-mix(in srgb, var(--good, #1E874B) 8%, transparent);
  border-radius: .6rem; font-size: .92rem; color: var(--ink);
}

/* Einzelnes Studio: mittig und in Lesebreite statt in einer Rasterspalte. */
.studio-einzeln { max-width: 30rem; margin-inline: auto; }

/* Freiwillige Felder als solche kennzeichnen. Ohne Hinweis füllt man sie aus,
   weil man annimmt, es ginge nicht anders — der Sinn der Änderung wäre weg. */
.label-opt {
  font-weight: 400; font-size: .82rem; color: var(--muted);
  margin-inline-start: .35rem;
}

/* ── Vergleich gegen klassisches Training ───────────────────────────────── */

/* Zwei Seiten, nicht sechs Zeilen.
 *
 * Die vorige Fassung tönte jede Zelle der eigenen Spalte einzeln und setzte
 * über jede Zeile das Merkmal als Überschrift. Beides zusammen erzwang ein
 * Lesen von links nach rechts, Zeile für Zeile — gelesen werden soll aber eine
 * Seite gegen die andere, von oben nach unten. Deshalb: durchgehende Fläche
 * hinter der rechten Spalte, Merkmale nur noch für Vorlesewerkzeuge.
 *
 * Ein Layout für alle Breiten. Möglich wurde das erst dadurch, dass jede Zelle
 * jetzt für sich steht — vorher brauchte es auf schmalen Schirmen die
 * Merkmalszeile über voller Breite, und damit ein zweites Layout.
 */
.vergleich-wrap { position: relative; margin-top: 2.25rem; }

/* Die Fläche liegt hinter der Tabelle und beginnt exakt bei 50 % — dieselbe
   Kante, an der das Spaltenraster teilt. Der Abstand zwischen den Spalten wird
   deshalb über Zellinnenabstand erzeugt, nicht über `gap`: Eine Lücke im
   Raster verschöbe die Kante gegen die Fläche. */
.vergleich-wrap::before {
  content: ""; position: absolute; z-index: 0;
  inset-block: 0; inset-inline-start: 50%; inset-inline-end: 0;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: .9rem;
}

.vergleich {
  position: relative; z-index: 1;
  width: 100%; border-collapse: collapse;
}
.vergleich thead, .vergleich tbody, .vergleich tr { display: block; }
.vergleich tr { display: grid; grid-template-columns: 1fr 1fr; }

.vergleich thead th {
  text-align: left; padding: .85rem .8rem .7rem;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.vergleich thead th.ist-wir { color: var(--primary-dark); }

.vergleich td {
  text-align: left; vertical-align: top;
  /* Waagrechter Innenabstand knapp gehalten: Bei 390 px bleiben je Spalte rund
     175 px, davon geht jedes Pixel Abstand direkt von der Textbreite ab.
     `hyphens` fängt die langen Komposita ab („Beckenbodenmuskulatur"). */
  padding: .85rem .8rem; font-size: .93rem; line-height: 1.45;
  color: var(--muted); hyphens: auto;
}
/* Die eigene Seite trägt Gewicht und Farbe, die andere bleibt zurückhaltend.
   Kein Durchstreichen, keine roten Kreuze: Klassisches Beckenbodentraining ist
   nicht falsch, es ist nur aufwendiger. */
.vergleich td.ist-wir { color: var(--ink); font-weight: 600; }

.vergleich tbody tr + tr td {
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
/* Die Trennlinie der rechten Spalte etwas kräftiger, damit sie auf der
   getönten Fläche nicht verschwindet. */
.vergleich tbody tr + tr td.ist-wir {
  border-top-color: color-mix(in srgb, var(--primary) 18%, transparent);
}

@media (min-width: 44rem) {
  .vergleich thead th { padding: 1.1rem 1.5rem .8rem; font-size: .82rem; }
  .vergleich td { padding: 1.1rem 1.5rem; font-size: 1.02rem; }
}

/* Freiwillige Felder als solche kennzeichnen. Ohne Hinweis füllt man sie aus,
   weil man annimmt, es ginge nicht anders — der Sinn der Änderung wäre weg. */
.label-opt {
  font-weight: 400; font-size: .82rem; color: var(--muted);
  margin-inline-start: .35rem;
}

/* ── Cookie-Banner ──────────────────────────────────────────────────────── */

.cookiebar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: var(--ink); color: #fff;
  padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  font-size: .88rem; line-height: 1.5;
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 52rem) { .cookiebar__inner { grid-template-columns: 1fr auto; } }
.cookiebar a { color: #fff; }
.cookiebar__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookiebar .btn { padding: .7rem 1.3rem; min-height: 2.75rem; font-size: .92rem; box-shadow: none; }
.cookiebar .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.4); }

/* ── Danke-Seite ────────────────────────────────────────────────────────── */

.thanks-hero { text-align: center; padding-block: clamp(3rem, 9vw, 5rem) 2rem; }
.thanks-tick {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; margin: 0 auto 1.5rem;
  background: var(--success) var(--check-svg) center/1.9rem no-repeat;
}
.appt-card {
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border-radius: 1rem; padding: 1.5rem; margin-top: 2rem; text-align: left;
}
.appt-card dl { display: grid; gap: .6rem; margin: 0; }
.appt-card dt { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.appt-card dd { margin: 0 0 .35rem; font-weight: 600; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Rückfallebene für Browser ohne color-mix() (vor Chrome 111 / Safari 16.2).
   Das Layout steht auch ohne — hier geht es nur darum, dass Ränder und
   Flächen nicht unsichtbar werden.
   ========================================================================== */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .site-head { background: var(--surface); }
  .hero__eyebrow { background: var(--surface-alt); }
  .hero__trust { border-top-color: #E4E0EA; }
  .card, .review, .booking, .faq details,
  .studio-choice button, .daybar button, .slots button,
  .field input,
  .field select { border-color: #E4E0EA; }
  .studio-choice button[aria-pressed="true"],
  .daybar button[aria-pressed="true"] { background: var(--surface-alt); }
  .guarantee { background: var(--surface-alt); border-color: var(--success); }
  .btn { box-shadow: 0 6px 20px -8px rgba(28,26,34,.35); }
  .btn--ghost { border-color: var(--primary); }
  .review__text mark { background: #FBE7B5; }
  .stickybar, .site-foot__legal { background: var(--surface); border-top-color: #E4E0EA; }
  .appt-card { background: var(--surface-alt); border-color: var(--primary); }
  .videobox { background: var(--surface-alt); }
}

/* ── Zitate ─────────────────────────────────────────────────────────────── */

.pullquote {
  margin: 2.5rem auto 0;
  max-width: 44rem;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 1rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  position: relative;
}
.pullquote--warm { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.pullquote blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink);
}
.pullquote figcaption { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.pullquote figcaption b { display: block; color: var(--ink); font-size: .95rem; }

/* ── Team ───────────────────────────────────────────────────────────────── */

.team { margin-top: 2.5rem; }
.team > img {
  width: 100%;
  border-radius: 1.25rem;
  box-shadow: 0 30px 60px -35px rgba(28,26,34,.4);
}
.team__video { margin-top: 1.5rem; }
.team__video video { width: 100%; border-radius: 1.25rem; background: var(--ink); }

.studio__reviews {
  display: inline-block;
  font-size: .85rem;
  color: var(--primary-dark);
  margin-bottom: .9rem;
  text-underline-offset: 3px;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pullquote { border-color: #E4E0EA; }
  .pullquote--warm { background: var(--surface-alt); border-color: var(--primary); }
}

/* ── Video mit Vorschaltbild ────────────────────────────────────────────── */

.videobox {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  /* Ruhiger Markenton statt Schwarz: Das Standbild wird verzögert geladen,
     und in der Sekunde davor soll die Fläche nicht wie ein Ladefehler wirken. */
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-alt));
  aspect-ratio: 16 / 9;
}
.videobox__start {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.videobox__start img { width: 100%; height: 100%; object-fit: cover; }
.videobox__start::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 100%);
  transition: background .2s ease;
}
.videobox__start:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 100%); }

.videobox__play {
  position: absolute; inset: 0; margin: auto;
  width: 4.75rem; height: 4.75rem; border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
  background: var(--primary); color: #fff;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.55);
  transition: transform .2s ease;
}
.videobox__start:hover .videobox__play { transform: scale(1.07); }
.videobox__play svg { margin-left: .2rem; }

.videobox__dur {
  position: absolute; right: .85rem; bottom: .85rem; z-index: 2;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: .8rem; font-weight: 600; padding: .2rem .55rem; border-radius: .35rem;
  font-variant-numeric: tabular-nums;
}

.videobox.is-loading::before {
  content: ""; position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.videobox.is-playing { aspect-ratio: auto; }
.videobox__fail { color: #fff; padding: 2rem 1.5rem; text-align: center; margin: 0; font-size: .95rem; }

/* PLZ und Ort nebeneinander — zwei kurze Felder untereinander wirken auf dem
   Handy wie doppelt so viel Formular, wie sie sind. */
.field--split { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; }
.field--split > div { display: flex; flex-direction: column; }
@media (max-width: 22rem) { .field--split { grid-template-columns: 1fr; } }

/* Anrede neben dem Namen — eine eigene Zeile für zwei Wörter wäre verschenkt. */
.field--anrede { grid-template-columns: 8.25rem 1fr; }