/* ==========================================================================
   denti – Landingpage
   Look der Vorlage: weißer Grund, zwei zarte Farbschleier am Rand, Schwarz als
   einzige Aktionsfarbe, graue Karten mit weißen Innenkarten, keine Schatten.
   Alles im Bereich .app ist nachgebaute denti-Oberfläche und folgt den Regeln
   der App (eigene Farben, eigene Eckenradien).
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-VF.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben der Seite */
  --grund: #ffffff;
  --schleier-mint: 209 250 229;     /* denti-Grün #d1fae5 */
  --schleier-himmel: 219 234 254;   /* denti-Blau #dbeafe */
  --karte: #f4f4f4;
  --karte-innen: #ffffff;
  --text-stark: #0d0d0d;
  --text: #5d5d5d;
  --text-leise: #6b6b6b;
  --linie: #e5e5e5;
  --linie-hauch: rgb(13 13 13 / .06);
  --aktion: #0d0d0d;
  --aktion-hover: #2d2d2d;
  --akzent: #d1fae5;
  --auf-akzent: #065f46;
  --oberzeile: #047857;
  --fokus: #1d4ed8;
  --abdunklung: rgb(13 13 13 / .6);

  /* Maße */
  --rand: 20px;
  --breite: 1200px;
  --abschnitt: clamp(72px, 10vw, 144px);

  /* Bewegung: eine Kurve, drei Dauern */
  --kurve: cubic-bezier(.22, 1, .36, 1);
  --t-druck: 100ms;
  --t-kurz: 180ms;
  --t-eintritt: 600ms;
}
@media (min-width: 768px)  { :root { --rand: 32px; } }
@media (min-width: 1024px) { :root { --rand: 40px; } }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: clip;
}

h1, h2, h3, p, blockquote, figure { margin: 0; }
img, svg { display: block; }
a { color: inherit; }

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

.container { width: min(var(--breite), 100% - 2 * var(--rand)); margin-inline: auto; }

.sprung {
  position: fixed; top: 8px; left: 8px; z-index: 60;
  padding: 12px 16px; border-radius: 12px;
  background: var(--aktion); color: #fff; text-decoration: none; font-weight: 500;
  transform: translateY(-200%);
}
.sprung:focus { transform: none; }

/* --------------------------------------------------------------------------
   Schrift: Laufweite hängt an der Größe. Große Schrift enger, kleine weiter.
   -------------------------------------------------------------------------- */
h1 {
  font-family: "Plus Jakarta Sans", "Geist", ui-sans-serif, system-ui, sans-serif;   /* nur die große Überschrift (Stevens Wahl, 12.11.2026) */
  font-size: clamp(1.875rem, 1.4rem + 2.3vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text-stark);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 .zeile { display: block; }
/* Der Punkt hat in Plus Jakarta Sans viel Luft links. Bei der engen Laufweite wirkt das wie ein Leerzeichen. */
h1 .punkt { margin-left: -.06em; }


.klein { font-size: .875rem; letter-spacing: .004em; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Buttons (Fassung 12.11.2026 abends, Stevens Wahl: Runde 4, Variante 4)
   Hauptknopf: schwarze Pille, links eine weiße Sprachwelle (passt zu „per Sprachbefehl“).
   Darüberfahren: bleibt schwarz und bekommt einen weichen Schatten ringsum.
   Erklärvideo: schwarzer Textlink mit Winkel, beim Darüberfahren rückt nur der Winkel ein Stück vor.
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-kurz), background-color var(--t-kurz), box-shadow .3s var(--kurve), transform .2s var(--kurve);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 15px; height: 15px; transition: transform .25s var(--kurve); }

.btn--haupt { background: var(--aktion); color: #fff; }
.btn--haupt:has(.welle) { padding-left: 18px; }

/* Weiße Sprachwelle: sechs dünne Striche (Stevens Wahl, 12.11.2026) in der Form des Symbols „Audio-Linien“.
   Jeder Strich hat seine eigene Höhe (--h) und schwingt zwischen 40 % und 100 % davon, leicht versetzt.
   Die Striche ändern ihre Höhe, nicht ihre Form: So bleiben die Enden immer rund.
   Breite und Abstand sind ganze Pixel, damit die Striche auf jedem Bildschirm gleich dick aussehen. */
.welle { display: inline-flex; align-items: center; gap: 2px; height: 18px; flex: none; }
.welle i { display: block; width: 2px; height: var(--h); border-radius: 999px; background: #fff;
  animation: knopfwelle 1.2s ease-in-out infinite; animation-delay: calc(var(--n) * -.17s); }
.welle i:nth-child(1) { --h: 6px;  --n: 0; }
.welle i:nth-child(2) { --h: 12px; --n: 1; }
.welle i:nth-child(3) { --h: 18px; --n: 2; }
.welle i:nth-child(4) { --h: 10px; --n: 3; }
.welle i:nth-child(5) { --h: 14px; --n: 4; }
.welle i:nth-child(6) { --h: 6px;  --n: 5; }
@keyframes knopfwelle { 0%, 100% { height: calc(var(--h) * .4); } 50% { height: var(--h); } }
.btn--klein .welle { height: 16px; }

/* Zweiter Knopf in den Preiskarten: helle Fläche ohne Rand */
.btn--umriss { background: #fff; color: var(--text-stark); box-shadow: 0 0 22px -6px rgb(13 13 13 / .22); }

/* Erklärvideo: schwarzer Textlink mit Winkel */
.btn--link { gap: 4px; min-height: 44px; padding: 0 4px; border-radius: 8px; background: none; color: var(--text-stark); }

.btn--klein { min-height: 44px; padding: 0 18px; }
.btn--klein:has(.welle) { padding-left: 16px; }

/* Handy: In der Navigation ist wenig Platz. Der kleine Knopf zeigt dort nur Text. */
@media (max-width: 559px) {
  .btn--klein { padding: 0 16px; font-size: .875rem; }
  .btn--klein .welle { display: none; }
  .btn--klein:has(.welle) { padding-left: 16px; }
}

/* Am Computer etwas größer, passend zur großen Überschrift. Die Breite wächst dabei kaum. */
@media (min-width: 1024px) {
  .btn { min-height: 55px; padding: 0 26px; font-size: 1rem; font-weight: 600; }   /* Stevens Wahl 12.11.2026: 55 px hoch, 16 px Schrift */
  .btn--haupt:has(.welle) { padding-left: 22px; }
  .btn--link { min-height: 44px; padding: 0 4px; }
  .btn--klein { min-height: 44px; padding: 0 18px; font-size: .9375rem; font-weight: 500; }
  .btn--klein:has(.welle) { padding-left: 16px; }
}

@media (hover: hover) and (pointer: fine) {
  .btn--haupt:hover { box-shadow: 0 0 26px -2px rgb(13 13 13 / .38); }
  .btn--umriss:hover { box-shadow: 0 0 30px -6px rgb(13 13 13 / .3); }
  .btn--link:hover svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
  .welle i { animation: none; }
}
.qa .welle i { animation: none !important; }

/* --------------------------------------------------------------------------
   1. Navigation – schwebende, durchscheinende Pille. Der Inhalt läuft darunter durch.
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 40;
  width: min(var(--breite), 100% - 2 * var(--rand));
  height: 60px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--linie-hauch);
  background: rgb(255 255 255 / .78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8);   /* helle Oberkante: Licht auf dem Material */
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-stark);
  text-decoration: none;
}
.logo img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #f4f4f4; }

.nav__links, .nav__login { display: none; }
.nav__links a, .nav__login {
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.003em;
  color: var(--text);
  text-decoration: none;
  transition: color var(--t-kurz);
}

.menu { position: static; }
.menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-stark);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-kurz), transform var(--t-kurz) var(--kurve);
}
.menu summary:active { transform: scale(.92); background: #f4f4f4; transition-duration: var(--t-druck); }
.menu summary::-webkit-details-marker { display: none; }
.menu__liste {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  padding: 8px;
  border-radius: 24px;
  border: 1px solid var(--linie);
  background: #fff;
  transform-origin: calc(100% - 30px) 0;   /* öffnet sich vom Menü-Knopf aus */
}
.menu__liste a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  font-weight: 500;
  color: var(--text-stark);
  text-decoration: none;
}
.menu__liste a:active { background: #f4f4f4; }

@media (min-width: 1024px) {
  .nav { top: 16px; height: 72px; gap: 12px; padding: 0 12px 0 18px; }
  .logo { margin-right: 28px; }
  .nav__links { display: flex; gap: 28px; margin-right: auto; }
  .nav__links a, .nav__login { display: inline-flex; }
  .nav__login { margin-right: 12px; }
  .menu { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover, .nav__login:hover { color: var(--text-stark); }
  .menu summary:hover, .menu__liste a:hover { background: #f4f4f4; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #6b6b6b; }
}

/* --------------------------------------------------------------------------
   Farbschleier – Mint links, Himmelblau rechts, Mitte bleibt weiß
   -------------------------------------------------------------------------- */
.schleier {
  position: relative;
  isolation: isolate;
  --l: var(--schleier-mint);
  --r: var(--schleier-himmel);
  --fleck-l: rgb(var(--l) / .70) 0%, rgb(var(--l) / .55) 28%, rgb(var(--l) / .27) 56%, rgb(var(--l) / .07) 80%, rgb(var(--l) / 0) 100%;
  --fleck-r: rgb(var(--r) / .85) 0%, rgb(var(--r) / .66) 28%, rgb(var(--r) / .32) 56%, rgb(var(--r) / .08) 80%, rgb(var(--r) / 0) 100%;
}
.schleier::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 960px;
  max-height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80vw 300px at 0% 140px, var(--fleck-l)) no-repeat,
    radial-gradient(ellipse 80vw 320px at 100% 620px, var(--fleck-r)) no-repeat;
}
@media (min-width: 768px) {
  .schleier::before {
    height: 1000px;
    background:
      radial-gradient(ellipse 28vw 540px at 8% 460px, var(--fleck-l)) no-repeat,
      radial-gradient(ellipse 30vw 540px at 97% 400px, var(--fleck-r)) no-repeat;
  }
}

/* --------------------------------------------------------------------------
   2. Startbereich
   -------------------------------------------------------------------------- */
.start { padding-top: calc(72px + clamp(40px, 8vh, 80px)); padding-bottom: 48px; }
@media (min-width: 1024px) { .start { padding-top: calc(88px + clamp(40px, 8vh, 80px)); } }

.start__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 36px;
  padding: 3px 16px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: #fff;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .002em;
  line-height: 1.3;
  color: var(--text);
  text-align: left;
}
.badge img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }

.start h1 { max-width: 17em; margin-top: 24px; }
@media (min-width: 768px) { .start h1 { margin-top: 28px; } }

.start__unter {
  max-width: 33em;
  margin-top: 24px;
  font-size: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
  letter-spacing: -0.008em;
  line-height: 1.55;
  text-wrap: pretty;
}

.knoepfe {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 36px;
}
/* Nebeneinander: Der Textlink braucht mehr Luft zum Knopf als ein zweiter Knopf, sonst klebt er dran */
@media (min-width: 560px) {
  .knoepfe { flex-direction: row; justify-content: center; align-items: center; gap: 28px; width: auto; }
}

/* Bühne: Karte, Handy, Karte */
.buehne {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-top: clamp(56px, 8vh, 80px);
}
.handy { order: -1; }

@media (min-width: 768px) {
  .buehne { grid-template-columns: 1fr 1fr; gap: 24px; }
  .handy { grid-column: 1 / -1; }
  .mini--links { justify-self: end; }
  .mini--rechts { justify-self: start; }
}
@media (min-width: 1024px) {
  .buehne { grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
  .handy { order: 0; grid-column: auto; }
  .mini--links { margin-top: 250px; }
  .mini--rechts { margin-top: 128px; }
}

/* Schwebende Mini-Karte: weiß, liegt auf dem Schleier.
   Ecken laufen gleichmäßig mit: außen 20 = innen 12 + Abstand 8. */
.mini {
  width: min(300px, 100%);
  padding: 8px;
  border-radius: 20px;
  border: 1px solid var(--linie);
  background: #fff;
}
@media (min-width: 1024px) { .mini { border-color: var(--linie-hauch); } }

.mini--rechts { padding: 20px; }
.mini blockquote p {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.4;
  color: var(--text-stark);
  text-wrap: pretty;
}
.mini blockquote footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.mini cite { display: block; font-style: normal; font-size: .875rem; font-weight: 600; letter-spacing: -0.004em; color: var(--text-stark); line-height: 1.3; }
.mini small { display: block; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); line-height: 1.4; }

.kreis--seite { background: var(--karte); color: var(--text); }

.beispiel-hinweis {
  margin-top: 24px;
  font-size: .875rem;
  letter-spacing: .004em;
  color: var(--text-leise);
  text-align: center;
}

/* --------------------------------------------------------------------------
   denti in Aktion: Film im Handyformat, ohne Geräterahmen.
   Der Film hat einen weißen Grund und bringt Schatten und Rand selbst mit.
   Die Maske lässt ihn unten weich auslaufen und nimmt den Kanten jede Härte.
   -------------------------------------------------------------------------- */
.handy {
  position: relative;
  width: min(372px, 100%);
  margin-top: -28px;        /* der Film hat oben 8 % Luft */
}
.film {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 864 / 1382;
  background: #fff;
  -webkit-mask-image:
    linear-gradient(transparent, #000 4%, #000 calc(100% - 170px), transparent),
    linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(transparent, #000 4%, #000 calc(100% - 170px), transparent),
    linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
@media (min-width: 1024px) {
  .handy { width: 432px; margin-top: -36px; }
}

.film-knopf {
  appearance: none;
  min-height: 44px;
  margin-left: 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-kurz);
}
@media (hover: hover) and (pointer: fine) { .film-knopf:hover { color: var(--text-stark); } }

/* ==========================================================================
   .app – nachgebaute denti-Oberfläche (Farben und Radien wie in der App)
   ========================================================================== */
.app {
  --ink-900: #171717; --ink-800: #2d2d2d; --ink-700: #414141; --ink-600: #5d5d5d;
  --ink-500: #8e8e8e; --ink-300: #cdcdcd; --ink-200: #e5e5e5; --ink-100: #f4f4f4; --ink-50: #f9f9f9;
  --gruen-100: #d1fae5; --gruen-700: #047857; --gruen-800: #065f46;
  --gelb-100: #fef3c6; --gelb-900: #7b3306;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--ink-900);
  text-align: left;
}
.app svg { width: 14px; height: 14px; }

.kreis {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: #e5e5e5; color: #5d5d5d;
  font-size: 13px; font-weight: 600; line-height: 1;
}

/* Kopfzeile der App */
.app-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
  background: var(--ink-50);
}
.app-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.025em; }
.app-logo img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.app-konto {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink-900); color: #fff; font-size: 12px; font-weight: 600;
}

/* Chat */

/* Anzeigen-Vorschau im Stil einer Anzeige auf Facebook und Instagram */
.anzeige { border: 1px solid var(--ink-200); border-radius: 16px; padding: 16px; background: #fff; }
.anzeige__kopf { display: flex; align-items: center; gap: 12px; }
.anzeige__kopf > div { min-width: 0; flex: 1; }
.anzeige__kopf .kreis { background: var(--ink-100); }
.anzeige__praxis { font-size: 14px; font-weight: 600; line-height: 1.3; }
.anzeige__gesponsert { font-size: 13px; color: var(--ink-500); line-height: 1.3; }
.anzeige__text { margin-top: 12px; color: var(--ink-800); }

.schild {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 1; flex: none;
}
.schild--entwurf { background: var(--gelb-100); color: var(--gelb-900); }

/* Bewerber-Karte */
.spalte-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-700);
}
.spalte-kopf svg { width: 16px; height: 16px; color: var(--ink-500); }
.spalte-kopf span { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-500); }

.bkarte { border: 1px solid var(--ink-200); border-radius: 12px; padding: 12px; background: #fff; }
.bkarte__kopf { display: flex; gap: 12px; }
.bkarte__name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.bkarte__stelle { font-size: 13px; font-weight: 500; color: var(--ink-700); line-height: 1.4; }
.bkarte__meta { font-size: 13px; color: var(--ink-500); line-height: 1.4; }
.bkarte__fuss {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ink-200);
  font-size: 13px; color: var(--ink-700);
}

/* --------------------------------------------------------------------------
   Video-Fenster – wächst beim Öffnen leicht aus der Mitte heraus
   -------------------------------------------------------------------------- */
.video {
  width: min(100vw - 32px, 1080px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #000;
  overflow: visible;
}
.video::backdrop { background: var(--abdunklung); }
.video__rahmen { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; }
.video__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__zu {
  position: absolute; top: -52px; right: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--text-stark); cursor: pointer;
  transition: transform var(--t-kurz) var(--kurve);
}
.video__zu:active { transform: scale(.92); transition-duration: var(--t-druck); }

/* --------------------------------------------------------------------------
   Bewegung – ohne Animation bleibt alles sichtbar
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise var(--t-eintritt) var(--kurve) var(--d, 0s) both; }
  .nav { animation: einblenden var(--t-eintritt) var(--kurve) both; }
  .menu[open] .menu__liste { animation: aufgehen 220ms var(--kurve) both; }
  .video[open] { animation: aufgehen 260ms var(--kurve) both; }
  .video[open]::backdrop { animation: einblenden 260ms ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes einblenden { from { opacity: 0; } }
  @keyframes aufgehen { from { opacity: 0; transform: scale(.96); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Prüfmodus (?qa): Animationen aus, Navigation fließt mit – nur für Screenshots */
.qa .rise, .qa .nav { animation: none !important; }
.qa .nav { position: absolute; }

/* ==========================================================================
   Abschnitte 3 bis 11
   ========================================================================== */
.abschnitt { padding-block: var(--abschnitt); }

h2 {
  font-size: clamp(1.75rem, 1.31rem + 1.88vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-stark);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
.h2--klein { font-size: clamp(1.625rem, 1.4rem + 0.94vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.15; }
h3 {
  font-size: clamp(1.25rem, 1.2rem + 0.19vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-stark);
  text-wrap: balance;
}

.oberzeile {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--oberzeile);
}
.leise { color: var(--text-leise); }

/* Abschnittskopf: Oberzeile, Überschrift, schmale Unterzeile */
.kopf { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 32px; }
.kopf h2 { max-width: 16em; margin-top: 16px; }
.unter { max-width: 34em; margin-top: 16px; text-wrap: pretty; }
@media (min-width: 1024px) { .kopf { margin-bottom: 56px; } }

.container.knoepfe { width: min(var(--breite), 100% - 2 * var(--rand)); }
.knoepfe--mitte { margin-top: 40px; }
.knoepfe--links { margin-top: 28px; }
@media (min-width: 560px) {
  .container.knoepfe { justify-content: center; }
  .knoepfe--links { justify-content: flex-start; }
}

/* Graue Karte mit weißer Innenkarte – Schichtung über Ton, nicht über Schatten */
.karte { background: var(--karte); border-radius: 24px; padding: clamp(20px, 3.3vw, 40px); }
.karte > .oberzeile + h3 { margin-top: 12px; }
.karte > h3 + p { margin-top: 10px; }
.karte > p { max-width: 34em; }
.karte > .klein { margin-top: 16px; }
.innen { margin-top: 24px; padding: 16px; border-radius: 16px; background: var(--karte-innen); }
@media (min-width: 1024px) {
  .karte { border-radius: 28px; }
  .innen { margin-top: 32px; padding: 24px; }
}

/* --------------------------------------------------------------------------
   3. Vertrauenszeile
   -------------------------------------------------------------------------- */
.vertrauen { padding-top: 16px; }
.vertrauen__zeile { text-align: center; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-stark); text-wrap: balance; }
.presse { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); }
.presse a { display: inline-flex; align-items: center; min-height: 44px; }
.presse img { width: auto; height: 22px; filter: grayscale(1); opacity: .75; }

/* Laufband: läuft endlos ohne Sprung, hält bei Mauszeiger an, Ränder blenden aus */
.laufband {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.laufband__spur { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.laufband__spur li { flex: none; }
@keyframes lauf { to { transform: translateX(-50%); } }

.laufband--logos { margin-top: 28px; }
.laufband--logos li { padding-right: 56px; }
.laufband--logos img { width: 140px; height: 60px; object-fit: contain; filter: grayscale(1); opacity: .62; mix-blend-mode: multiply; }

/* --------------------------------------------------------------------------
   .app – weitere Teile der nachgebauten denti-Oberfläche
   -------------------------------------------------------------------------- */
.anzeige--frei { border: 0; padding: 0; }
.anzeige__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 12px 12px 12px 16px; border-radius: 12px;
  background: var(--ink-50); font-size: 14px; font-weight: 600; line-height: 1.3;
}
.anzeige__knopf { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 12px; background: var(--ink-900); color: #fff; font-size: 13px; font-weight: 500; }
.schild--laeuft { gap: 6px; background: var(--gruen-100); color: var(--gruen-800); }
.schild--laeuft i { width: 6px; height: 6px; border-radius: 50%; background: var(--gruen-700); }

.typ--blau { background: #dbeafe; color: #1d4ed8; }
.typ--gruen { background: #d1fae5; color: #047857; }

/* Zahlen stehen frei, ohne Kasten */

.chatstart { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 0; text-align: center; }
.chatstart img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--ink-100); }
.chatstart__name { margin-top: 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.chatstart__text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-500); }
.chatstart__kachel { align-self: stretch; margin-top: 10px; padding: 12px; border: 1px solid var(--ink-200); border-radius: 16px; font-size: 14px; color: var(--ink-800); text-align: left; }
.chatstart__text + .chatstart__kachel { margin-top: 18px; }

/* Stehender Bildschirm im Handyformat: ohne Rahmen, mit Schatten, läuft unten aus */
.schirm {
  height: 540px;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(13 13 13 / .06),
    0 2px 4px rgb(13 13 13 / .04),
    0 12px 32px -6px rgb(13 13 13 / .10),
    0 32px 80px -12px rgb(13 13 13 / .16);
}
@media (min-width: 1024px) {
  .schirm { height: 600px; border-radius: 44px 44px 0 0; }
}

/* --------------------------------------------------------------------------
   8. Preise
   -------------------------------------------------------------------------- */
.preise { display: grid; gap: 16px; }
@media (min-width: 900px)  { .preise { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .preise { gap: 32px; } }
.preis { display: flex; flex-direction: column; }
.preis__badge { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; margin-bottom: 12px; padding: 0 10px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-size: .8125rem; font-weight: 600; }
@media (min-width: 900px) { .preis:not(.preis--empfohlen) { padding-top: calc(clamp(20px, 3.3vw, 40px) + 36px); } }
.preis__zahl { margin-top: 20px; font-size: clamp(2rem, 1.82rem + 0.75vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--text-stark); font-variant-numeric: tabular-nums; }
.preis__zahl small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--text-leise); }
.preis__alt { margin: 10px 0 24px; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); }
.btn--voll { width: 100%; margin-top: auto; }

.enthalten { margin-top: 16px; }
@media (min-width: 768px)  { .enthalten { margin-top: 24px; } }
@media (min-width: 1024px) { .enthalten { margin-top: 32px; } }
.haken { display: grid; gap: 14px; margin-bottom: 0; padding: 20px; list-style: none; }
.haken li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-stark); }
.haken svg { width: 18px; height: 18px; margin-top: 4px; color: var(--oberzeile); }
@media (min-width: 768px) { .haken { grid-template-columns: 1fr 1fr; gap: 14px 32px; padding: 28px; } }
.preise__hinweis { max-width: 62em; margin: 20px auto 0; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); text-align: center; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   9. Fragen
   -------------------------------------------------------------------------- */
.container.faq { width: min(800px, 100% - 2 * var(--rand)); display: grid; gap: 12px; }
.frage { padding: 0 20px; border-radius: 20px; background: var(--karte); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 12px 0;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--text-stark);
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary svg { transition: transform var(--t-kurz) var(--kurve); }
.frage[open] summary svg { transform: rotate(45deg); }
.frage p { max-width: 62ch; padding-bottom: 22px; }
@media (min-width: 768px) { .frage { padding: 0 28px; } }
.frage { transition: background-color var(--t-kurz); }
@media (hover: hover) and (pointer: fine) { .frage:hover { background: #efefef; } }
/* Antwort fährt weich auf und zu. Browser ohne diese Technik klappen wie gewohnt sofort um. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .frage { interpolate-size: allow-keywords; }
    .frage::details-content { block-size: 0; overflow: clip; transition: block-size 340ms var(--kurve), content-visibility 340ms allow-discrete; }
    .frage[open]::details-content { block-size: auto; }
  }
}

/* --------------------------------------------------------------------------
   10. Abschluss-Kasten
   -------------------------------------------------------------------------- */
.abschluss-rahmen { padding-top: 0; }
.abschluss { display: grid; gap: 32px; padding: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) 0; border-radius: 28px; background: var(--karte); overflow: hidden; }
.abschluss__text { padding-bottom: 8px; }
.abschluss__text > p { max-width: 30em; margin-top: 16px; }
.abschluss__text > .klein { margin-top: 16px; }
.abschluss__bild { justify-self: center; width: min(300px, 100%); }
.schirm--ganz { height: 380px; }
@media (min-width: 900px) {
  .abschluss { grid-template-columns: 1.15fr .85fr; align-items: end; border-radius: 32px; }
  .abschluss__text { align-self: center; padding-bottom: clamp(24px, 4vw, 56px); }
  .schirm--ganz { height: 420px; }
}

/* --------------------------------------------------------------------------
   11. Fußbereich
   -------------------------------------------------------------------------- */
.fuss { padding: 24px 0 40px; }
.fuss__raster { display: grid; gap: 32px; }
@media (min-width: 768px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss nav { display: grid; align-content: start; }
.fuss__kopf { margin-bottom: 4px; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); }
.fuss nav a { display: flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--text-stark); text-decoration: none; }
.fuss__marke p { margin-top: 4px; font-size: .9375rem; }
.logo--klein { margin-right: 0; font-size: .9375rem; }
.logo--klein img { width: 28px; height: 28px; }
.fuss__zeile { margin-top: 40px; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); }
@media (hover: hover) and (pointer: fine) { .fuss nav a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* --------------------------------------------------------------------------
   Schwächere Wiederkehr des Farbschleiers weiter unten
   -------------------------------------------------------------------------- */
.schleier--leise { --l: var(--schleier-himmel); --r: var(--schleier-mint); }
.schleier--leise::before {
  height: 100%;
  opacity: .6;
  background:
    radial-gradient(ellipse 26vw 300px at 0% 50%, var(--fleck-l)) no-repeat,
    radial-gradient(ellipse 26vw 300px at 100% 46%, var(--fleck-r)) no-repeat;
}
@media (max-width: 767px) {
  .schleier--leise::before { background: radial-gradient(ellipse 70vw 260px at 100% 40%, var(--fleck-r)) no-repeat; }
}

/* --------------------------------------------------------------------------
   Bewegung der unteren Abschnitte
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .laufband__spur { animation: lauf 46s linear infinite; }
  .laufband--logos .laufband__spur { animation-duration: 40s; }
  @media (hover: hover) and (pointer: fine) { .laufband:hover .laufband__spur { animation-play-state: paused; } }
  .frage[open] p { animation: aufgehen 220ms var(--kurve) both; transform-origin: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband { -webkit-mask-image: none; mask-image: none; }
  .laufband__spur { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 12px; padding-inline: var(--rand); }
  .laufband__spur li[aria-hidden="true"] { display: none; }
}

/* Rasterkinder dürfen schmaler werden als ihr Inhalt, sonst drückt das Board die Seite auf dem Handy breit. */

.preise > *, .abschluss > * { min-width: 0; }
.qa .laufband__spur { animation: none !important; }

/* ==========================================================================
   Umbau der Mitte: Sender, Film-Strecke, Stellen, Kundenstimmen
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bewegung per Klasse. Das Skript setzt .ist-da, sobald etwas ins Bild kommt.
   Ohne Skript (kein .js am html) ist alles von Anfang an sichtbar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.ist-da {
    opacity: 1;
    transform: none;
    transition:
      opacity 700ms var(--kurve) calc(var(--i, 0) * 60ms),
      transform 700ms var(--kurve) calc(var(--i, 0) * 60ms);
  }
  /* Überschriften bauen sich Wort für Wort auf */
  .js .wort { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(6px); }
  .js .ist-da .wort {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition:
      opacity 600ms var(--kurve) calc(var(--w, 0) * 42ms),
      transform 600ms var(--kurve) calc(var(--w, 0) * 42ms),
      filter 600ms var(--kurve) calc(var(--w, 0) * 42ms);
  }
}
.qa .reveal, .qa .wort { opacity: 1 !important; transform: none !important; filter: none !important; }

/* --------------------------------------------------------------------------
   4. Die falsche Frequenz: ein Sender, den man umschalten kann
   -------------------------------------------------------------------------- */
.frequenz__raster { display: grid; gap: 40px; }
.frequenz__raster > * { min-width: 0; }
.frequenz h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem); line-height: 1.12; }
.frequenz .unter { margin-top: 20px; max-width: 30em; }

.schalter {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  padding: 4px;
  border-radius: 999px;
  background: var(--karte);
}
.schalter__fleck {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--aktion);
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
}
.frequenz[data-zustand="denti"] .schalter__fleck { transform: translateX(100%); }
.schalter__knopf {
  position: relative;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-kurz);
}
.schalter__knopf[aria-pressed="true"] { color: #fff; }

/* Zwei Fassungen liegen übereinander und blenden weich ineinander über */
.frequenz__saetze, .sender__funk, .sender__texte { display: grid; }
.frequenz__saetze > *, .sender__funk > *, .sender__texte > * {
  grid-area: 1 / 1;
  transition: opacity 320ms ease, filter 320ms ease, transform 320ms var(--kurve);
}
.frequenz[data-zustand="ueblich"] [data-fuer="denti"],
.frequenz[data-zustand="denti"] [data-fuer="ueblich"] { opacity: 0; filter: blur(6px); transform: translateY(6px); pointer-events: none; }
.frequenz__saetze { margin-top: 20px; max-width: 30em; }

.sender { padding: clamp(16px, 2.6vw, 32px); border-radius: 28px; background: var(--karte); }
.skala {
  position: relative;
  height: 104px;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  container-type: inline-size;
}
.skala__striche {
  position: absolute;
  inset: 16px 18px auto;
  height: 26px;
  background:
    repeating-linear-gradient(90deg, #a8a8a8 0 1.5px, transparent 1.5px 60px) 0 0 / 100% 100%,
    repeating-linear-gradient(90deg, #d6d6d6 0 1px, transparent 1px 12px) 0 8px / 100% 14px no-repeat;
}
.skala__sender {
  position: absolute;
  bottom: 14px;
  left: calc(var(--x) * 1%);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 600;
  transition: opacity 420ms ease, filter 420ms ease, scale 420ms var(--kurve);
}
.typ--gelb { background: #fef3c7; color: #92400e; }
.typ--rot { background: #fee2e2; color: #b91c1c; }
.frequenz[data-zustand="ueblich"] .skala__sender:not(.typ--gelb),
.frequenz[data-zustand="denti"] .skala__sender.typ--gelb,
.frequenz[data-zustand="denti"] .skala__sender.typ--rot { opacity: .32; filter: grayscale(1); scale: .94; }
.frequenz[data-zustand="denti"] .skala__sender.typ--gruen { transition-delay: 220ms; }
.frequenz[data-zustand="denti"] .skala__sender.typ--blau { transition-delay: 320ms; }
.skala__nadel {
  position: absolute;
  top: 8px;
  bottom: 46px;
  left: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--aktion);
  transform: translateX(60cqw);
  transition: transform 900ms cubic-bezier(.34, 1.36, .64, 1);   /* die Nadel schwingt kurz über */
}
.frequenz[data-zustand="denti"] .skala__nadel { transform: translateX(34cqw); }

.sender__funk { margin-top: 14px; font-size: .875rem; font-weight: 500; letter-spacing: .004em; color: var(--text); }
.sender__karte { margin-top: 14px; padding: 20px; border-radius: 20px; background: #fff; }
.sender__texte { margin-top: 12px; min-height: 4.6em; }
.sender__texte .anzeige__text { margin-top: 0; font-size: 16px; }
.sender__hinweis { margin-top: 14px; }

@media (min-width: 1024px) {
  .frequenz__raster { grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 7vw, 104px); align-items: center; }
  .sender__karte { padding: 24px; }
}

/* --------------------------------------------------------------------------
   5. Film-Strecke: links die Schritte, rechts bleibt die Bühne stehen
   -------------------------------------------------------------------------- */
.strecke__kopf { margin-bottom: 40px; }
.strecke__kopf .unter { margin-top: 16px; }
.strecke__kopf .filme-knopf { margin: 8px 0 0 -10px; }
.strecke__raster { display: grid; }
.strecke__raster > * { min-width: 0; }
.strecke__schritte { display: grid; gap: 64px; margin: 0; padding: 0; list-style: none; }
.schritt h3 { font-size: clamp(1.5rem, 1.25rem + 1.05vw, 2.25rem); letter-spacing: -0.028em; line-height: 1.12; }
.schritt > p { max-width: 27em; margin-top: 12px; font-size: 1.0625rem; text-wrap: pretty; }
.schritt__film { width: min(372px, 100%); margin: 20px auto 0; }
.strecke__buehne { display: none; }
.strecke .beispiel-hinweis { margin-top: 32px; }

/* Tablet (und Computer ohne Skript): Text links, Film rechts daneben */
@media (min-width: 700px) {
  .strecke__schritte { gap: 88px; }
  .schritt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(32px, 6vw, 72px); }
  .schritt h3 { grid-column: 1; align-self: end; }
  .schritt > p { grid-column: 1; align-self: start; }
  .schritt__film { grid-column: 2; grid-row: 1 / span 2; width: 300px; margin: 0; }
}

@media (min-width: 1024px) {
  .js .strecke__kopf { margin-bottom: 0; }
  /* Die Bühne passt sich der Fensterhöhe an: Der Film ist immer ganz zu sehen */
  .js .strecke { --bh: min(691px, calc(100vh - 136px)); --bw: calc(var(--bh) * .62518); }
  @supports (height: 100svh) { .js .strecke { --bh: min(691px, calc(100svh - 136px)); } }
  .js .strecke__raster { grid-template-columns: minmax(0, 1fr) var(--bw); column-gap: clamp(48px, 8vw, 136px); align-items: start; }
  .js .strecke__schritte { gap: 0; margin-top: 56px; padding-left: 28px; border-left: 1.5px solid var(--linie); }
  /* Luft nach dem letzten Schritt: So bleibt die Bühne stehen, bis sein Text durch die Mitte gelaufen ist */
  .js .strecke__links { padding-bottom: 10vh; }
  .js .schritt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74vh;
  }
  .js .schritt h3, .js .schritt > p { align-self: stretch; }
  /* Der erste Schritt schließt direkt an die Überschrift an */
  .js .schritt:first-child { justify-content: flex-start; min-height: 56vh; }
  /* Nur der Schritt, dessen Film gerade läuft, steht in voller Farbe da */
  .js .schritt h3, .js .schritt > p { transition: color 400ms ease; }
  .js .schritt:not(.aktiv) h3 { color: #c2c2c2; }
  .js .schritt:not(.aktiv) > p { color: #c8c8c8; }
  /* Punkt auf der Linie: sitzt auf Höhe der ersten Zeile der Überschrift */
  .js .schritt h3 { position: relative; }
  .js .schritt h3::before {
    content: "";
    position: absolute;
    left: -35.5px;
    top: .56em;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
    border-radius: 50%;
    border: 1.5px solid var(--linie);
    background: #fff;
    transition: background-color 300ms ease, border-color 300ms ease, scale 300ms var(--kurve);
  }
  .js .schritt.aktiv h3::before { background: var(--aktion); border-color: var(--aktion); scale: 1.15; }
  .js .schritt__film { display: none; }
  .js .strecke__buehne { display: block; position: sticky; top: calc((100vh + 88px - var(--bh)) / 2); }
  .buehne__rahmen { position: relative; width: var(--bw); height: var(--bh); }
  .buehne__rahmen .film {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.975);
    filter: blur(10px);
    transition: opacity 450ms var(--kurve), transform 450ms var(--kurve), filter 450ms var(--kurve);
  }
  .buehne__rahmen .film.aktiv { opacity: 1; transform: none; filter: blur(0); }
}

/* --------------------------------------------------------------------------
   6. Stellen
   -------------------------------------------------------------------------- */
.stellen-band { padding-bottom: var(--abschnitt); text-align: center; }
.stellen-band h2 { max-width: 18em; margin-inline: auto; }
.stellen-band .unter { margin: 12px auto 0; }
/* Sprechfeld: Der Satz tippt sich, die passende Stelle leuchtet auf */
.sprechfeld {
  display: flex; align-items: center; gap: 14px;
  width: min(560px, 100%); min-height: 78px; margin: 28px auto 0; padding: 12px 20px;
  border: 1px solid var(--linie); border-radius: 20px; background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / .04);
  text-align: left;
}
.sprechfeld[hidden] { display: none; }
.sprechfeld__welle { display: inline-flex; flex: none; align-items: center; gap: 3px; height: 24px; }
.sprechfeld__welle i { width: 3px; height: 100%; border-radius: 2px; background: #71717a; transform: scaleY(.2); transition: transform 300ms var(--kurve); }
.sprechfeld__satz { display: block; flex: 1; min-width: 0; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.008em; color: var(--text-stark); transition: opacity 200ms ease, filter 200ms ease; }
.sprechfeld__satz.geht { opacity: 0; filter: blur(4px); }
.sprechfeld__satz::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -0.2em;
  background: var(--text-stark); opacity: 0; transition: opacity 150ms ease;
}
.sprechfeld.spricht .sprechfeld__satz::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sprechfeld.spricht .sprechfeld__welle i { animation: welle 880ms ease-in-out calc(var(--n) * -170ms) infinite; }
}
@keyframes welle { 0%, 100% { transform: scaleY(.24); } 50% { transform: scaleY(1); } }
@media (min-width: 600px) { .sprechfeld { min-height: 64px; padding: 12px 24px; } }

.pillen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 28px auto 0; padding: 0; list-style: none; }
.pillen li, .pille {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--linie); background: #fff;
  font: inherit; font-size: .9375rem; font-weight: 500; color: var(--text-stark); white-space: nowrap;
}
/* Mit Skript werden die Stellen zu Knöpfen: Die Hülle verliert ihr Aussehen, der Knopf trägt es */
.pillen li.halter { display: block; height: auto; padding: 0; border: 0; background: none; }
.pille {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-kurz), border-color var(--t-kurz), color var(--t-kurz), transform var(--t-kurz) var(--kurve);
}
.pille:active { transform: scale(.96); transition-duration: var(--t-druck); }
.pille[aria-pressed="true"] { background: var(--aktion); border-color: var(--aktion); color: #fff; }
@media (hover: hover) and (pointer: fine) { .pille:not([aria-pressed="true"]):hover { background: var(--karte); } }
@media (min-width: 768px) { .pillen li, .pille { height: 52px; padding: 0 24px; font-size: 1rem; } }

/* --------------------------------------------------------------------------
   7. Kundenstimmen: alle vier auf einen Blick, zwei versetzte Spalten
   -------------------------------------------------------------------------- */
.stimmen h2 { max-width: 16em; }
.stimmen__wand { display: grid; gap: 16px; margin-top: 40px; }
.stimmen__spalte { display: grid; gap: 16px; align-content: start; min-width: 0; }
.stimme-karte { margin: 0; padding: clamp(22px, 3vw, 36px); border-radius: 24px; border: 1px solid var(--linie-hauch); background: #fff; }
.stimme-karte blockquote p { font-size: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem); font-weight: 500; letter-spacing: -0.014em; line-height: 1.45; color: var(--text-stark); text-wrap: pretty; }
.stimme-karte figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.stimme-karte strong { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--text-stark); }
.stimme-karte small { display: block; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); }
@media (min-width: 768px) {
  .stimmen__wand { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stimmen__spalte { gap: 24px; }
  .stimmen__spalte--versetzt { margin-top: 72px; }
}

/* Überschriften ohne Oberzeile: Kopf sitzt direkt */
.kopf h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Startbereich: Bühne reagiert ganz leicht auf die Maus (nur mit Maus)
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .buehne { --px: 0; --py: 0; }
  .buehne .mini--links  { translate: calc(var(--px) * -14px) calc(var(--py) * -10px); }
  .buehne .mini--rechts { translate: calc(var(--px) * 14px) calc(var(--py) * 10px); }
  .buehne .handy        { translate: calc(var(--px) * 5px) calc(var(--py) * 4px); }
}

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

/* Prüfmodus: Höhen, die am Fenster hängen, festlegen, damit Ganzseiten-Bilder stimmen */
.qa .schritt { min-height: 600px !important; }
.qa .schritt:first-child { min-height: 460px !important; }
.qa .strecke__buehne { top: 120px !important; }
.qa *, .qa *::before, .qa *::after { transition: none !important; animation: none !important; }