/* ==========================================================
   DENTAL WEBSTUDIO — Unverwechselbar statt unscheinbar
   v2: Helles, medizinisch-freundliches Design.
   Der Neon-Touch bleibt: leuchtende Buttons, Blau-Glow,
   dunkle Insel-Elemente (Manifest, Vergleich, Footer).
   Farben: #1e8fe0/#2fa8ff (Akzent) · #f6f9fc (Grund) · #0d1520 (Inseln)
   ========================================================== */

:root {
  --blau: #1e8fe0;
  --blau-hell: #2fa8ff;
  --blau-tief: #0f6fb5;
  --cyan: #7fd4ff;
  --gelb: #ffc003;
  --gelb-glow: 0 0 18px rgba(255, 192, 3, 0.45), 0 0 45px rgba(255, 192, 3, 0.15);
  --bg: #f6f9fc;
  --bg-tief: #e9f1f8;
  --karte: #ffffff;
  --dunkel: #0d1520;
  --dunkler: #091019;
  --tinte: #14222f;
  --grau: #4f6377;
  --text-hell: #eef4fa;
  --grau-hell: #9fb2c5;
  --rand: rgba(30, 143, 224, 0.18);
  --rand-stark: rgba(30, 143, 224, 0.45);
  --glow: 0 0 18px rgba(47, 168, 255, 0.4), 0 0 45px rgba(47, 168, 255, 0.15);
  --glow-stark: 0 0 25px rgba(47, 168, 255, 0.65), 0 0 70px rgba(47, 168, 255, 0.3);
  --schatten: 0 12px 32px rgba(16, 42, 67, 0.07);
  --radius: 16px;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Kein seitliches Scrollen am Handy: html UND body, sonst scrollt html weiter.
   clip statt hidden, damit der klebende Kopf (position: sticky) nicht bricht. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tinte);
  line-height: 1.7;
  overflow-x: clip;
  max-width: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(1180px, 92%); margin-inline: auto; }

section { padding: 6rem 0; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 { line-height: 1.22; font-weight: 800; color: var(--tinte); }

h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.45rem); text-transform: uppercase; }
h3 { font-size: 1.2rem; }

.akzent { color: var(--blau); text-shadow: 0 0 24px rgba(47, 168, 255, 0.35); }
.akzent-underline { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }

.section-label {
  display: inline-block;
  color: var(--blau-tief);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .8rem;
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 34px; height: 2px;
  background: var(--gelb);
  vertical-align: middle;
  margin-right: .7rem;
  box-shadow: 0 0 8px rgba(255, 192, 3, 0.6);
}

.sektion-kopf { max-width: 780px; margin-bottom: 3.2rem; }
.sektion-kopf.mittig { margin-inline: auto; text-align: center; }
.sektion-sub { color: var(--grau); margin-top: 1.1rem; font-size: 1.05rem; }

/* abwechselnde Sektionstöne statt hell/dunkel */
.sektion-tief { background: var(--bg-tief); }

/* ---------- Buttons: bleiben die Neon-Signatur ---------- */

.btn {
  display: inline-block;
  padding: .95rem 2.4rem;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .92rem;
  cursor: pointer;
  border: 2px solid var(--blau);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.btn-voll::after {
  content: "";
  position: absolute;
  top: 0; left: -85%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: glanz 3.8s ease-in-out infinite;
}

@keyframes glanz {
  0%, 55% { left: -85%; }
  75%, 100% { left: 130%; }
}

.btn-voll {
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #ffffff;
  box-shadow: var(--glow);
}

/* Puls nur dort, wo er gezielt gesetzt wird (Formular-Button) */
.btn-voll.puls { animation: pulsieren 2.6s ease-in-out infinite; }

.btn-voll:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--glow-stark);
  animation-play-state: paused;
}

.btn-umriss {
  background: transparent;
  color: var(--blau);
  box-shadow: 0 0 12px rgba(47, 168, 255, 0.25);
}

.btn-umriss:hover {
  background: var(--blau);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--glow-stark);
}

@keyframes pulsieren {
  0%, 100% { box-shadow: 0 0 14px rgba(47,168,255,.4), 0 0 38px rgba(47,168,255,.15); }
  50%      { box-shadow: 0 0 24px rgba(47,168,255,.7), 0 0 60px rgba(47,168,255,.3); }
}

/* ---------- Header / Navigation ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
  transition: box-shadow .3s ease;
}

header.gescrollt { box-shadow: 0 6px 30px rgba(16, 42, 67, 0.1); }

.nav-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: var(--tinte);
}

.logo svg { width: 34px; height: 38px; color: var(--blau); filter: drop-shadow(0 0 8px rgba(47,168,255,.5)); }
.logo em { font-style: normal; color: var(--blau); }
.logo.klein { font-size: 1rem; }
.logo.klein svg { width: 26px; height: 30px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
}

.nav-links a {
  font-weight: 600;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  padding: .3rem 0;
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--blau);
  box-shadow: 0 0 8px rgba(47, 168, 255, 0.6);
  transition: width .3s ease;
}

.nav-links a:not(.btn):hover::after { width: 100%; }

.nav-links .btn { padding: .6rem 1.5rem; font-size: .8rem; }

/* Telefon in der Navigation: nur Icon, keine Nummer */
.nav-links .nav-tel {
  display: inline-flex;
  align-items: center;
  color: var(--blau-tief);
  font-size: 0;
  padding: .3rem .2rem;
}

.nav-links .nav-tel svg { width: 19px; height: 19px; filter: drop-shadow(0 0 6px rgba(47, 168, 255, 0.4)); }
.nav-links .nav-tel:hover svg { filter: drop-shadow(0 0 10px rgba(47, 168, 255, 0.7)); }

.nav-mobil-gruppe {
  display: none;
  align-items: center;
  gap: .8rem;
}

.nav-mobil-cta {
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .55rem 1.05rem;
  border-radius: 50px;
  box-shadow: var(--glow);
  white-space: nowrap;
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 110;
}

.burger span {
  width: 26px; height: 3px;
  background: var(--blau);
  border-radius: 3px;
  transition: transform .3s ease, opacity .3s ease;
}

.burger.offen span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.offen span:nth-child(2) { opacity: 0; }
.burger.offen span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */

/* Hero im denta1-Stil: dunkles Video, weiße Schrift,
   unten nahtloser Gradient-Übergang in die helle Folgesektion */
.hero {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(47, 168, 255, 0.12), transparent 70%),
    var(--dunkler);
  padding-top: 4rem;
  padding-bottom: 6rem;
}

.hero-inhalt { position: relative; z-index: 2; width: 100%; }

/* Hintergrund-Video mit hellem Schleier, damit der Hero ruhig bleibt */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dunkler Lese-Schleier über dem Video + heller Auslauf ganz unten,
   der nahtlos in die helle Folgesektion übergeht */
.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 76%, var(--bg) 98%),
    radial-gradient(ellipse 65% 75% at 50% 42%, rgba(9, 16, 25, 0.5), transparent 100%),
    linear-gradient(180deg, rgba(9, 16, 25, 0.82), rgba(9, 16, 25, 0.45) 50%, rgba(9, 16, 25, 0.72));
}

/* weiße Typo auf dem dunklen Video */
.hero h1 { color: #ffffff; text-shadow: 0 2px 26px rgba(9, 16, 25, 0.55); }
.hero h1 .akzent { color: var(--blau-hell); text-shadow: 0 0 28px rgba(47, 168, 255, 0.6); }
.hero p.unterzeile { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 14px rgba(9, 16, 25, 0.7); }
.hero p.unterzeile strong { color: #ffffff; }
.hero p.unterzeile em { color: var(--cyan); }
.hero .hero-trust { color: var(--grau-hell); text-shadow: 0 1px 10px rgba(9, 16, 25, 0.6); }

.hero .hero-pille {
  border-color: rgba(127, 212, 255, 0.5);
  color: var(--cyan);
  background: rgba(9, 16, 25, 0.4);
  backdrop-filter: blur(4px);
}

#partikel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-pille {
  display: inline-block;
  border: 1px solid var(--rand-stark);
  background: rgba(47, 168, 255, 0.08);
  color: var(--blau-tief);
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem 1.1rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 0 14px rgba(47, 168, 255, 0.12);
}

/* Kategorie-Zeile für Nur-Scroller: sagt sofort, WAS wir tun */
.hero .hero-was {
  max-width: 720px;
  margin: 1.6rem auto 0;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 14px rgba(9, 16, 25, 0.7);
  font-size: 1.12rem;
  font-weight: 500;
}

.hero .hero-was strong { color: var(--cyan); font-weight: 700; }

.hero p.unterzeile {
  max-width: 700px;
  margin: 1rem auto 2.4rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 14px rgba(9, 16, 25, 0.7);
  font-size: 1.08rem;
}

.hero p.unterzeile strong { color: #ffffff; }
.hero p.unterzeile em { font-style: normal; color: var(--cyan); font-weight: 700; }

.hero-buttons { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }

.hero-trust {
  margin-top: 1.4rem;
  color: var(--grau);
  font-size: .82rem;
  letter-spacing: .04em;
}

/* Vertrauens-Avatare im Hero: überlappende Kreise + Zahl */
.avatar-vertrauen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}

.av-kreise { display: flex; }

.av-kreis {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .76rem;
  font-weight: 800;
  color: #fff;
  object-fit: cover;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  border: 2px solid var(--dunkler);
  margin-left: -12px;
}

.av-kreis:first-child { margin-left: 0; }
.av-kreis.av-mehr { background: var(--dunkel); color: var(--cyan); font-size: .68rem; }

.avatar-vertrauen p { color: rgba(255, 255, 255, 0.9); font-size: .9rem; margin: 0; }
.avatar-vertrauen p strong { color: #fff; }

/* Zahlen im Rahmen: halbtransparente Karte über dem Video */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  flex-wrap: wrap;
  margin-top: 3rem;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border: 1.5px solid var(--rand-stark);
  border-radius: var(--radius);
  box-shadow: var(--glow), 0 18px 45px rgba(9, 16, 25, 0.35);
  padding: 1.4rem clamp(1.4rem, 4vw, 3rem);
}

.hero-stats .stat { text-align: center; }

.hero-stats .wert {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
  color: var(--blau);
  text-shadow: 0 0 18px rgba(47, 168, 255, 0.35);
  display: block;
  line-height: 1.1;
}

.hero-stats small {
  color: var(--grau);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  font-weight: 600;
}

/* schwebende Deko-Formen */
.form-deko {
  position: absolute;
  border: 2px solid rgba(127, 212, 255, 0.28);
  pointer-events: none;
  z-index: 1;
}

.form-deko.zahn-deko {
  border: none;
  width: 90px; height: 100px;
  color: rgba(127, 212, 255, 0.4);
  animation: schweben 7s ease-in-out infinite;
}

.form-deko.kreis {
  width: 140px; height: 140px;
  border-radius: 50%;
  animation: schweben 9s ease-in-out infinite reverse;
}

.form-deko.punkt {
  width: 12px; height: 12px;
  background: var(--blau-hell);
  border: none;
  border-radius: 50%;
  box-shadow: var(--glow);
  animation: schweben 6s ease-in-out infinite;
}

@keyframes schweben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -28px; }
}

.scroll-hinweis {
  position: absolute;
  bottom: 1.6rem; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 44px;
  border: 2px solid rgba(30, 143, 224, 0.5);
  border-radius: 20px;
  z-index: 2;
}

.scroll-hinweis::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 9px;
  margin-left: -2px;
  background: var(--blau);
  border-radius: 4px;
  animation: rollen 1.8s ease-in-out infinite;
}

@keyframes rollen {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Proof-Leiste ---------- */

/* keine obere Trennlinie — der Hero-Gradient läuft nahtlos hinein */
.proof-leiste {
  background: transparent;
  border-bottom: 1px solid var(--rand);
  padding: 1.6rem 0;
}

.proof-inhalt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 3.2rem);
  flex-wrap: wrap;
}

.proof-titel {
  color: var(--grau);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  flex-basis: 100%;
  text-align: center;
  margin-bottom: .3rem;
}

/* Laufende Kundenlogo-Schiene. Die Logos liegen entfaerbt und leicht blau
   getoent in weissen Kaesten und springen beim Hovern in ihre Originalfarben.
   Das Band pausiert dabei, sonst waere das gehoverte Logo weggerutscht. */
.proof-schiene {
  flex-basis: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.proof-spur {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  animation: proof-lauf 42s linear infinite;
}

@keyframes proof-lauf {
  to { transform: translateX(-50%); }
}

.proof-schiene:hover .proof-spur,
.proof-schiene:focus-within .proof-spur { animation-play-state: paused; }

.proof-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 176px;
  height: 82px;
  padding: .75rem .9rem;
  background: var(--karte);
  border: 1px solid rgba(30, 143, 224, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.06);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.proof-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  /* Graustufen, dann ueber sepia und Farbdrehung in einen satten Blauton.
     Kraeftig genug, dass die Logos lesbar bleiben, aber klar zurueckgenommen. */
  filter: grayscale(1) sepia(1) hue-rotate(186deg) saturate(2.4) brightness(.66);
  opacity: .9;
  transition: filter .35s ease, opacity .35s ease;
}

.proof-logo:hover {
  border-color: var(--rand-stark);
  box-shadow: 0 0 22px rgba(47, 168, 255, 0.16), var(--schatten);
  transform: translateY(-2px);
}

.proof-logo:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .proof-spur { animation: none; }
  .proof-schiene { overflow-x: auto; scrollbar-width: none; }
  .proof-schiene::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
  .proof-logo { width: 142px; height: 70px; padding: .7rem .9rem; }
  .proof-spur { gap: .7rem; }
}

.proof-blau {
  color: var(--blau);
  font-weight: 800;
  border-bottom: 2px solid var(--blau);
  box-shadow: 0 5px 12px -7px rgba(47, 168, 255, 0.8);
}

/* ---------- Laufband ---------- */

.laufband {
  background: linear-gradient(90deg, var(--blau-tief), var(--blau-hell), var(--blau-tief));
  color: #ffffff;
  overflow: hidden;
  padding: .7rem 0;
  transform: rotate(-1.2deg) scale(1.02);
  box-shadow: 0 0 30px rgba(47, 168, 255, 0.35);
}

.laufband-spur {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  animation: band 26s linear infinite;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .95rem;
  white-space: nowrap;
}

.laufband-spur span::after { content: "✦"; margin-left: 2.6rem; opacity: .55; }

@keyframes band { to { transform: translateX(-50%); } }

/* ---------- Karten-Grundmuster (hell) ---------- */

.problem-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.problem-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--schatten);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.problem-karte:hover {
  border-color: var(--rand-stark);
  box-shadow: 0 0 26px rgba(47, 168, 255, 0.18), var(--schatten);
  transform: translateY(-4px);
}

.problem-karte h3 { color: var(--blau-tief); margin-bottom: .7rem; font-size: 1.05rem; }
.problem-karte p { color: var(--grau); font-size: .95rem; }
.key-highlight { color: var(--blau); font-weight: 700; }
.key-highlight-hell { color: var(--blau-hell); font-weight: 700; }

.anfragen-schlecht { margin-top: 3.2rem; }
.anfragen-titel { color: var(--grau); text-align: center; margin-bottom: 1.4rem; font-style: italic; }

.zitat-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.zitat {
  border-left: 3px solid var(--blau);
  background: var(--karte);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  box-shadow: var(--schatten);
}

.zitat q { font-style: italic; color: var(--tinte); display: block; margin-bottom: .5rem; }
.zitat span { color: var(--grau); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

.claim {
  margin-top: 4rem;
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.3;
}

.claim span { color: var(--blau); text-shadow: 0 0 22px rgba(47, 168, 255, 0.4); }

.claim small {
  display: block;
  margin-top: 1rem;
  font-size: .95rem;
  font-weight: 500;
  text-transform: none;
  color: var(--grau);
  max-width: 640px;
  margin-inline: auto;
}

.claim.klein { font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin-top: 3.4rem; }

.leuchtwort {
  font-style: normal;
  font-weight: 800;
  color: var(--blau);
  text-shadow: 0 0 18px rgba(47, 168, 255, 0.55);
  border-bottom: 2px solid var(--blau);
  box-shadow: 0 6px 14px -8px rgba(47, 168, 255, 0.7);
}

/* ---------- Warum jetzt (in Problem-Sektion integriert) ---------- */

.jetzt-box {
  border: 2px solid var(--blau-hell);
  border-radius: var(--radius);
  box-shadow: var(--glow), var(--schatten);
  background: var(--karte);
  padding: clamp(2rem, 5vw, 3.2rem);
  text-align: center;
  max-width: 940px;
  margin: 3.6rem auto 0;
}

.jetzt-text {
  color: var(--grau);
  max-width: 760px;
  margin: 1.4rem auto 0;
  font-size: 1.02rem;
}

.jetzt-text strong { color: var(--tinte); }
.jetzt-text em { color: var(--blau-tief); font-style: normal; font-weight: 700; }

.jetzt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 2.2rem 0;
}

.jetzt-stats div {
  border: 1px solid var(--rand);
  background: var(--bg-tief);
  border-radius: var(--radius);
  padding: 1.3rem 1rem;
}

.jetzt-stats b {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--blau);
  text-shadow: 0 0 18px rgba(47, 168, 255, 0.35);
  line-height: 1.2;
  margin-bottom: .35rem;
}

.jetzt-stats small { color: var(--grau); font-size: .8rem; line-height: 1.45; display: block; }

.jetzt-quelle {
  display: inline-block;
  margin-top: .55rem;
  color: var(--blau);
  font-size: .68rem;
  text-decoration: underline;
  text-decoration-color: var(--rand-stark);
  text-underline-offset: 2px;
}

.jetzt-quelle:hover { color: var(--blau-tief); }

.jetzt-punchline {
  max-width: 720px;
  margin: 0 auto 1.6rem;
  color: var(--grau);
  font-size: 1.02rem;
}

.jetzt-punchline strong { color: var(--tinte); }

/* ---------- Patientensystem: Analogie + Patient-Journey-Timeline ---------- */

.system-satz {
  max-width: 820px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--grau);
  line-height: 1.55;
}

.system-satz strong { color: var(--tinte); }

.system-punchline {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 1.8rem;
  color: var(--grau);
  font-size: 1.08rem;
}

.system-punchline strong { color: var(--tinte); }

.system-begruendung {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
  color: var(--grau);
  font-size: .98rem;
}

.journey-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
}

.journey-phase {
  position: relative;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.6rem 1.2rem 1.4rem;
  text-align: center;
  box-shadow: var(--schatten);
}

.journey-pill {
  display: inline-block;
  background: rgba(47, 168, 255, 0.08);
  border: 1px solid var(--rand-stark);
  color: var(--blau-tief);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.1rem;
}

.journey-phase ul { list-style: none; }

.journey-phase li {
  color: var(--grau);
  font-size: .86rem;
  padding: .35rem 0;
  border-top: 1px solid var(--rand);
}

.journey-phase li:first-child { border-top: none; }

/* ---------- Vertikale Timeline (Drei Fragen + Patientensystem) ---------- */

.vtimeline {
  position: relative;
  max-width: 760px;
  margin: 2.8rem auto 0;
}

.vtimeline::before {
  content: "";
  position: absolute;
  top: 27px; bottom: 27px;
  left: 50%;
  width: 2px;
  background: var(--rand-stark);
  transform: translateX(-50%);
}

.vt-schritt {
  position: relative;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 2.3rem 2rem 1.8rem;
  text-align: center;
  margin-top: 3rem;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.vt-schritt:first-child { margin-top: 0; }

.vt-schritt:hover {
  border-color: var(--rand-stark);
  box-shadow: 0 0 24px rgba(47, 168, 255, 0.14), var(--schatten);
  transform: translateY(-2px);
}

.vt-kreis {
  position: absolute;
  top: -27px; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: var(--glow);
  z-index: 1;
}

.vt-schritt h3 { color: var(--blau-tief); font-size: 1.12rem; margin-bottom: .6rem; }
.vt-schritt p { color: var(--grau); font-size: .94rem; max-width: 540px; margin-inline: auto; }

/* Kompakte Variante: kurze Ein-Satz-Schritte (Patientensystem-Analogie) */
.vt-schritt.kompakt { padding: 2.4rem 1.8rem 1.6rem; margin-top: 3.6rem; }
.vt-schritt.kompakt h3 { margin-bottom: 0; font-size: 1.04rem; }
.vt-schritt.kompakt h3 span { color: var(--blau); }

/* ---------- Problem-Sektion: Kopf mit Bild ---------- */

.problem-kopf-raster {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  margin-bottom: 3.2rem;
}

.problem-kopf-raster .sektion-kopf { margin-bottom: 0; }

/* ---------- Österreich-Flagge als Ecken-Badge ---------- */

.jetzt-box { position: relative; }

.flagge-kreis {
  position: absolute;
  top: -30px; right: -22px;
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2.5px solid var(--blau);
  box-shadow: var(--glow), var(--schatten);
  background: linear-gradient(180deg, #ed2939 0 33.3%, #ffffff 33.3% 66.6%, #ed2939 66.6% 100%);
  z-index: 1;
}

/* ---------- Pattern Interrupt: Kurze Rechnung ---------- */

.rechnung-karte {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--dunkel);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  box-shadow: var(--glow), var(--schatten);
  padding: clamp(2.2rem, 5vw, 3.4rem);
}

.rechnung-karte .section-label { color: var(--cyan); }
.rechnung-karte .section-label::before { background: var(--cyan); }
.rechnung-karte h2 { color: #ffffff; }
.rechnung-karte .sektion-sub { color: var(--grau-hell); }
.rechnung-karte .sektion-sub em { color: var(--cyan); font-style: normal; font-weight: 700; }

.rechnung-zeilen {
  margin: 2.4rem 0 2rem;
  border-top: 1px dashed var(--rand-stark);
}

.rechnung-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--rand-stark);
  text-align: left;
}

.rz-text { color: var(--text-hell); font-size: .98rem; }
.rz-text strong { color: #fff; }
.rz-wert { color: var(--cyan); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }

.rechnung-zeile.summe { border-bottom: none; padding-top: 1.6rem; align-items: center; }
.rechnung-zeile.summe .rz-text { color: #fff; font-weight: 700; font-size: 1.02rem; max-width: 60%; }
.rz-wert.gross { font-size: 2.2rem; color: var(--blau-hell); text-shadow: 0 0 20px rgba(47, 168, 255, 0.5); }

.rechnung-hinweis { color: var(--grau-hell); font-size: .88rem; font-style: italic; margin: -.6rem 0 1.6rem; }

.rechnung-punchline { color: var(--text-hell); font-size: 1.15rem; font-weight: 600; margin-bottom: 1.8rem; }
.rechnung-punchline .akzent { color: var(--blau-hell); }

@media (max-width: 760px) {
  .rechnung-zeile { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .rechnung-zeile.summe .rz-text { max-width: 100%; }
  .rz-wert { align-self: flex-end; }
}

/* ---------- Cases ---------- */

.case {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten);
  padding: 2.2rem;
  margin-bottom: 1.6rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.case:hover { border-color: var(--rand-stark); box-shadow: 0 0 34px rgba(47, 168, 255, 0.12), var(--schatten); }

.case-tag {
  color: var(--blau-tief);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.case h3 { font-size: 1.5rem; margin: .4rem 0 .3rem; }
.case-meta { color: var(--grau); font-size: .85rem; margin-bottom: 1.2rem; }

/* Website-Screenshot des Kunden (Platzhalter, bis echte Shots da sind) */
.case-shot {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rand);
  margin-bottom: 1.3rem;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(47, 168, 255, 0.15), transparent 70%),
    var(--dunkel);
  color: var(--grau-hell);
  font-size: .8rem;
  text-align: center;
  padding: 1rem;
}

.case-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-shot .shot-hinweis { opacity: .8; }
.case-shot .shot-hinweis b { color: var(--cyan); display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; margin-bottom: .3rem; }

/* Freigestellte Ärztin/Arzt vor dem Website-Screenshot:
   Screenshot füllt die Breite, Cutout ragt links UND oben über den
   Screenshot hinaus — 3D-Effekt, löst sich vom Bild */
.case-shot-wrap { position: relative; margin-bottom: 1.3rem; margin-top: 1.6rem; }
.case-shot-wrap .case-shot { margin-bottom: 0; }

.case-cutout {
  position: absolute;
  left: clamp(-4.2rem, -7vw, -2.6rem); /* ragt deutlich über die dunkle Rahmenkante hinaus — wie beim Präsentieren */
  bottom: 0;                             /* schließt bündig mit der Rahmenunterkante ab */
  height: 116%;
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(12px 14px 26px rgba(16, 42, 67, 0.45));
  z-index: 2;
}

/* KI-Empfehlungs-Chip */
.ki-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--rand-stark);
  background: rgba(47, 168, 255, 0.08);
  color: var(--blau-tief);
  border-radius: 50px;
  font-size: .74rem;
  font-weight: 700;
  padding: .32rem .9rem;
  margin-top: .8rem;
}

.ki-chip::before { content: "✦"; color: var(--blau); }

.case-btn { margin-top: 1.4rem; align-self: flex-start; }

/* KI-Chat-Panel (nachgestellte ChatGPT-Empfehlung) */
.ki-chat {
  background: var(--dunkel);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  box-shadow: var(--glow), var(--schatten);
  padding: 1.6rem;
  color: var(--text-hell);
}

.ki-chat .kc-titel {
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ki-chat .kc-frage {
  background: #1d2938;
  border-radius: 16px 16px 4px 16px;
  padding: .8rem 1.1rem;
  font-size: .9rem;
  max-width: 85%;
  margin-left: auto;
  margin-bottom: 1rem;
}

.ki-chat .kc-antwort {
  background: rgba(47, 168, 255, 0.08);
  border: 1px solid var(--rand);
  border-radius: 16px 16px 16px 4px;
  padding: 1rem 1.2rem;
  font-size: .9rem;
  max-width: 92%;
}

.ki-chat .kc-antwort strong { color: var(--cyan); }
.ki-chat .kc-sterne { color: #ffcd3c; letter-spacing: .1em; }
.ki-chat .kc-fuss { color: var(--grau-hell); font-size: .74rem; margin-top: .9rem; }

/* ---------- Blog-Teaser ---------- */

.blog-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 3.4rem;
}

.blog-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.blog-karte:hover {
  border-color: var(--rand-stark);
  box-shadow: 0 0 26px rgba(47, 168, 255, 0.16), var(--schatten);
  transform: translateY(-4px);
}

.blog-tag {
  color: var(--blau-tief);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.blog-karte h3 { font-size: 1.08rem; margin-bottom: .6rem; line-height: 1.35; }
.blog-karte p { color: var(--grau); font-size: .9rem; flex-grow: 1; }

.blog-mehr {
  margin-top: 1.1rem;
  color: var(--blau);
  font-weight: 700;
  font-size: .84rem;
}

.blog-titel-zeile {
  margin-top: 4rem;
  text-align: center;
}

/* ---------- Neuro-Webdesign-Badge (Gründer) ---------- */

.neuro-badge {
  display: inline-flex;
  flex-direction: column;
  border: 2px solid #a39c78;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  margin-top: 1.4rem;
  box-shadow: var(--schatten);
}

.neuro-badge .nb-oben {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1.1rem;
  color: #a39c78;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  line-height: 1.2;
}

.neuro-badge .nb-oben svg { width: 30px; height: 22px; flex-shrink: 0; }

.neuro-badge .nb-unten {
  background: #a39c78;
  color: #ffffff;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: .3rem .8rem;
}

.vorher-nachher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.vorher-nachher span {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}

.vorher-nachher div:first-child span { color: var(--grau); }
.vorher-nachher div:last-child span { color: var(--blau-tief); }
.vorher-nachher p { font-size: .88rem; color: var(--grau); }
.vorher-nachher div:last-child p { color: var(--tinte); font-weight: 600; }

.case blockquote {
  border-left: 3px solid var(--blau);
  padding-left: 1.1rem;
  font-style: italic;
  color: var(--tinte);
  font-size: .97rem;
}

.case cite {
  display: block;
  margin-top: .5rem;
  font-style: normal;
  color: var(--grau);
  font-size: .8rem;
}

.case-zahlen {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.case-zahlen .wert {
  font-weight: 800;
  color: var(--blau);
  text-shadow: 0 0 18px rgba(47, 168, 255, 0.35);
  font-size: 1.7rem;
  line-height: 1.15;
  display: block;
}

.case-zahlen .zahl.gross .wert { font-size: 2.7rem; }
.case-zahlen small { color: var(--grau); font-size: .8rem; line-height: 1.45; display: block; }

/* Qualitative Stat ohne Zähl-Animation (kein data-ziel) */
.wert-text {
  font-weight: 800;
  color: var(--blau);
  text-shadow: 0 0 18px rgba(47, 168, 255, 0.35);
  font-size: 1.7rem;
  line-height: 1.15;
  display: block;
}

/* Blaue, unterstrichene Links auf externe Studien/Quellen */
.quellen-link {
  color: var(--blau);
  text-decoration: underline;
  text-decoration-color: var(--rand-stark);
  text-underline-offset: 3px;
  font-weight: 600;
}

.quellen-link:hover { color: var(--blau-tief); text-decoration-color: var(--blau-tief); }

/* Googeln Sie selbst */
.google-check {
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--bg-tief);
  padding: 1rem 1.2rem;
  margin-top: 1.2rem;
}

.google-check .gc-titel {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blau-tief);
  margin-bottom: .6rem;
}

.gc-zeile {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.gc-suchfeld {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 2px solid transparent;
  border-radius: 50px;
  padding: .45rem 1rem;
  font-size: .88rem;
  color: var(--tinte);
  flex: 1;
  min-width: 220px;
  background:
    linear-gradient(var(--karte), var(--karte)) padding-box,
    linear-gradient(90deg, var(--gelb), var(--blau-hell), var(--blau), var(--gelb), var(--blau-hell)) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: gc-border-flow 4s linear infinite;
  transition: box-shadow .25s ease, animation-duration .25s ease;
}

@keyframes gc-border-flow {
  to { background-position: 0 0, -300% 0; }
}

a.gc-suchfeld:hover {
  box-shadow: 0 0 14px rgba(255, 192, 3, 0.3), 0 0 12px rgba(47, 168, 255, 0.25);
  animation-duration: 1.4s;
}

@media (prefers-reduced-motion: reduce) {
  .gc-suchfeld { animation: none; }
}

.gc-suchfeld svg { flex: 0 0 14px; color: var(--grau); }

.gc-pos { color: var(--blau-tief); font-weight: 800; font-size: .85rem; white-space: nowrap; }

.google-check .gc-fuss { color: var(--grau); font-size: .78rem; margin-top: .6rem; }

/* ---------- Vergleich: die dunkle Insel ---------- */

.vergleich {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.6rem;
  align-items: stretch;
}

.vergleich-spalte {
  border-radius: var(--radius);
  padding: 2rem;
}

.vergleich-spalte h3 { text-transform: uppercase; margin-bottom: 1.2rem; }
.vergleich-spalte h3 small { display: block; font-size: .72rem; letter-spacing: .18em; color: var(--blau-hell); margin-top: .2rem; }

.vergleich-spalte ul { list-style: none; display: grid; gap: .9rem; font-size: .95rem; }

.vergleich-spalte.schlecht {
  background: var(--karte);
  color: var(--grau);
  border: 1px solid #dbe5ee;
}

.vergleich-spalte.schlecht h3 { color: var(--grau); }
.vergleich-spalte.schlecht li::before { content: "✕ "; color: #c0392b; font-weight: 800; }

.vergleich-spalte.gut {
  position: relative;
  background: var(--dunkel);
  color: var(--text-hell);
  border: 2px solid var(--blau-hell);
  box-shadow: var(--glow);
}

.vergleich-spalte.gut h3 { color: var(--text-hell); }
.vergleich-spalte.gut li::before { content: "✓ "; color: var(--blau-hell); font-weight: 800; }

.empfohlen {
  position: absolute;
  top: -0.9rem; right: 1.4rem;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: .28rem .9rem;
  box-shadow: var(--glow);
}

.vs {
  align-self: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--grau);
  border: 2px solid #c6d2dd;
  border-radius: 50%;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: var(--karte);
}

/* ---------- 4 Säulen / Zahnarzt-Instrumente ---------- */

.instrumente-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}

.instrument-karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.7rem;
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.instrument-karte:hover {
  border-color: var(--rand-stark);
  box-shadow: 0 0 30px rgba(47, 168, 255, 0.18), var(--schatten);
  transform: translateY(-5px);
}

.instrument-icon {
  width: 62px; height: 62px;
  color: var(--blau);
  filter: drop-shadow(0 0 10px rgba(47, 168, 255, 0.4));
  margin-bottom: 1.1rem;
}

.instrument-icon svg {
  width: 100%; height: 100%;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: center;
  animation: werkzeug-schweben 5s ease-in-out infinite;
}

.instrument-karte:nth-child(even) .instrument-icon svg { animation-delay: -2.5s; }
.instrument-karte:hover .instrument-icon svg { transform: rotate(-12deg) scale(1.12); }

@keyframes werkzeug-schweben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

.instrument-nr {
  color: var(--blau-tief);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.instrument-karte h3 { margin-bottom: .7rem; }
.instrument-karte p { color: var(--grau); font-size: .9rem; flex-grow: 1; }

.instrument-fakt {
  margin-top: 1.1rem;
  color: var(--blau-tief);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.instrument-mehr {
  margin-top: .7rem;
  color: var(--blau);
  font-weight: 700;
  font-size: .82rem;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .25s ease;
}

.instrument-mehr:hover { border-color: var(--blau); }

.instrumente-fazit {
  text-align: center;
  margin-top: 3rem;
  color: var(--grau);
  font-size: 1.05rem;
}

.instrumente-fazit strong { color: var(--tinte); }

/* ---------- DCM Methode + Zahn-Animation ---------- */

.dcm { background: linear-gradient(180deg, var(--bg-tief), var(--bg)); }

.dcm-bullets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 1.1rem;
  margin-top: 1.4rem;
}

.dcm-bullets li {
  border: 1px solid var(--rand-stark);
  background: var(--karte);
  border-radius: 50px;
  padding: .42rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinte);
  letter-spacing: .02em;
  box-shadow: 0 0 12px rgba(47, 168, 255, 0.1);
}

.dcm-bullets li::before { content: "✓ "; color: var(--blau); font-weight: 800; }

.dcm-buehne {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.zahn-wrap { position: relative; text-align: center; }

#dcm-zahn { width: min(100%, 340px); overflow: visible; }

.zahn-teil {
  transition: transform 1.1s cubic-bezier(.22, 1.2, .36, 1);
  will-change: transform;
}

.zahn-teil.krone  { transform: translate(-44px, -38px) rotate(-14deg); transform-origin: 100px 60px; }
.zahn-teil.hals   { transform: translate(56px, 4px) rotate(9deg);      transform-origin: 100px 123px; }
.zahn-teil.wurzel { transform: translate(-16px, 34px) rotate(7deg);    transform-origin: 100px 195px; }

.zahn-wrap.zusammen .zahn-teil { transform: none; }
.zahn-wrap.zusammen .zahn-teil.hals   { transition-delay: .18s; }
.zahn-wrap.zusammen .zahn-teil.wurzel { transition-delay: .36s; }

.zahn-wrap.zusammen .risse { animation: riss-verheilt 2.4s ease forwards .9s; }

@keyframes riss-verheilt {
  0%   { opacity: 0; }
  25%  { opacity: .9; }
  100% { opacity: 0; }
}

.zahn-glow {
  position: absolute;
  inset: 8% 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(47, 168, 255, 0.3), transparent 65%);
  opacity: 0;
  transition: opacity 1.2s ease 1.3s;
  pointer-events: none;
  z-index: -1;
}

.zahn-wrap.zusammen .zahn-glow { opacity: 1; animation: glow-pulsieren 3.4s ease-in-out infinite 2.4s; }

@keyframes glow-pulsieren {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.zahn-status {
  margin-top: 2.6rem;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: grid;
}

.zahn-status span { grid-area: 1 / 1; transition: opacity .8s ease; }
.zahn-status .kaputt-text { color: var(--grau); opacity: 1; }
.zahn-status .ganz-text { color: var(--blau-tief); opacity: 0; text-shadow: 0 0 14px rgba(47,168,255,.35); }
.zahn-wrap.zusammen .kaputt-text { opacity: 0; }
.zahn-wrap.zusammen .ganz-text { opacity: 1; transition-delay: 1.2s; }

.phasen { display: grid; gap: 1.2rem; }

.phase {
  border: 1px solid var(--rand);
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.4rem 1.7rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.phase:hover { border-color: var(--rand-stark); box-shadow: 0 0 22px rgba(47, 168, 255, 0.14), var(--schatten); }

.phase.kern { border: 2px solid var(--blau-hell); box-shadow: 0 0 22px rgba(47, 168, 255, 0.25), var(--schatten); }

.phase-nr {
  color: var(--blau-tief);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.phase h3 { margin: .3rem 0 .5rem; }
.phase p { color: var(--grau); font-size: .92rem; }

.phase-zeit {
  display: inline-block;
  margin-top: .8rem;
  color: var(--blau-tief);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--rand-stark);
  border-radius: 50px;
  padding: .2rem .8rem;
  background: rgba(47, 168, 255, 0.06);
}

.zeit-versprechen {
  margin-top: 3.4rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
  padding: 1.6rem 2rem;
  background: var(--karte);
  box-shadow: var(--schatten);
}

.zv-zahl {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--blau);
  text-shadow: 0 0 20px rgba(47, 168, 255, 0.4);
  flex-shrink: 0;
}

.zeit-versprechen p { color: var(--grau); font-size: .95rem; }
.zeit-versprechen strong { color: var(--tinte); }


/* ---------- Personal Branding ---------- */

.zweispalter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.zweispalter h3 { margin-bottom: 1.1rem; color: var(--blau-tief); }

.haken-liste { list-style: none; display: grid; gap: .85rem; }
.haken-liste li { padding-left: 1.7rem; position: relative; font-size: .97rem; }
.haken-liste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blau);
  font-weight: 800;
}

.hervor { font-weight: 700; font-size: 1.08rem; margin-bottom: .9rem; }
.zweispalter p { margin-bottom: .9rem; font-size: .97rem; color: var(--grau); }
.zweispalter p strong { color: var(--tinte); }
.zweispalter .hervor { color: var(--tinte); }

.mini-stats { display: flex; gap: 2.2rem; margin-top: 1.4rem; }
.mini-stats b { font-size: 1.5rem; color: var(--blau); display: block; line-height: 1.2; text-shadow: 0 0 14px rgba(47,168,255,.3); }
.mini-stats small { text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 700; color: var(--grau); }

/* Reel-Reihe: echte Drehtag-Clips in Smartphone-Rahmen */
.reel-titel {
  margin-top: 3rem;
  font-weight: 700;
  color: var(--blau-tief);
}

.reel-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 1.4rem;
  max-width: 920px;
  margin-inline: auto;
}

.reel {
  margin: 0;
  text-align: center;
}

.reel video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 26px;
  border: 6px solid var(--dunkel);
  box-shadow: var(--glow), var(--schatten);
  background: var(--dunkel);
}

.reel figcaption {
  margin-top: .7rem;
  color: var(--grau);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ---------- Gründer: dunkle Insel mit Porträt ---------- */

.gruender-karte {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: end;
  background:
    radial-gradient(ellipse 60% 80% at 25% 100%, rgba(47, 168, 255, 0.18), transparent 70%),
    var(--dunkel);
  border: 2px solid var(--blau-hell);
  border-radius: var(--radius);
  box-shadow: var(--glow), var(--schatten);
  padding: 2.4rem 2.4rem 0;
  overflow: hidden;
}

.gruender-bild { position: relative; align-self: end; }

.gruender-bild::before {
  content: "";
  position: absolute;
  inset: auto 8% 0;
  height: 78%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(47, 168, 255, 0.4), rgba(47, 168, 255, 0.05) 70%);
  filter: blur(6px);
}

.gruender-bild img { position: relative; width: 100%; max-width: 300px; margin-inline: auto; }

.gruender-text { color: var(--text-hell); padding-bottom: 2.4rem; }
.gruender-text .section-label { color: var(--cyan); }
.gruender-text .section-label::before { background: var(--cyan); }
.gruender-text h2 { color: var(--text-hell); }
.gruender-name { margin-top: 1.2rem; font-weight: 800; font-size: 1.15rem; }
.gruender-rolle { color: var(--grau-hell); font-size: .85rem; margin-bottom: 1rem; }

.gruender-text blockquote {
  border-left: 3px solid var(--blau-hell);
  padding-left: 1.1rem;
  font-style: italic;
  color: var(--text-hell);
  font-size: 1.02rem;
  margin: 1.2rem 0 1.6rem;
}

.gruender-text blockquote em { color: var(--cyan); font-style: normal; font-weight: 700; }

.gruender-fakten { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.gruender-fakten b { color: var(--blau-hell); font-size: 1.3rem; display: block; line-height: 1.2; text-shadow: 0 0 14px rgba(47,168,255,.5); }
.gruender-fakten small { color: var(--grau-hell); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

/* ---------- Garantien ---------- */

.garantie-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  max-width: 940px;
  margin-inline: auto;
}

.garantie {
  position: relative;
  border: 1px solid var(--rand);
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 2.4rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.garantie:hover { transform: translateY(-5px); border-color: var(--rand-stark); box-shadow: 0 0 30px rgba(47, 168, 255, 0.2), var(--schatten); }

/* Kreis-Badge sitzt auf der Kartenecke (halb außerhalb) */
.garantie-kreis {
  position: absolute;
  top: -34px; right: -24px;
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 2.5px solid var(--blau);
  box-shadow: var(--glow), inset 0 0 18px rgba(47, 168, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  background: var(--karte);
  z-index: 1;
}

.garantie-kreis small {
  color: var(--blau-tief);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
}

.garantie-kreis b {
  color: var(--blau);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 0 16px rgba(47, 168, 255, 0.45);
}

/* Garantie #2 im Gelb-Stil, zur visuellen Abgrenzung der beiden Versprechen */
.garantie.v2 .garantie-kreis { border-color: var(--gelb); box-shadow: var(--gelb-glow), inset 0 0 18px rgba(255, 192, 3, 0.12); }
.garantie.v2 .garantie-kreis b { color: #c99400; text-shadow: 0 0 16px rgba(255, 192, 3, 0.45); }
.garantie.v2:hover { border-color: rgba(255, 192, 3, 0.45); box-shadow: 0 0 30px rgba(255, 192, 3, 0.2), var(--schatten); }

.garantie h3 { padding-right: 70px; }

/* Leistungsumfang als Haken-Punkte in der Garantie-Karte */
.garantie-punkte {
  list-style: none;
  display: grid;
  gap: .55rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--rand);
  padding-top: 1.1rem;
}

.garantie-punkte li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--grau);
  font-size: .86rem;
  line-height: 1.55;
}

.garantie-punkte li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blau);
  font-weight: 800;
}

.garantie-punkte li strong { color: var(--tinte); }

.garantie h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--grau); font-weight: 700; }
.garantie h3 b { display: block; font-size: 1.25rem; color: var(--tinte); letter-spacing: 0; text-transform: none; margin-top: .4rem; line-height: 1.35; }

.garantie p { color: var(--grau); font-size: .92rem; margin-top: .9rem; flex-grow: 1; }

.adressiert {
  margin-top: 1.2rem;
  font-size: .78rem;
  color: var(--blau-tief);
  font-style: italic;
  border-top: 1px solid var(--rand);
  padding-top: .9rem;
}

.garantie-ehrlich {
  max-width: 940px;
  margin: 1.6rem auto 0;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 1.4rem 1.8rem;
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
}

.garantie-ehrlich b { color: var(--blau); font-size: 1.5rem; white-space: nowrap; text-shadow: 0 0 14px rgba(47,168,255,.3); }
.garantie-ehrlich p { color: var(--grau); font-size: .95rem; }
.garantie-ehrlich p strong { color: var(--tinte); }

.gebietsschutz {
  max-width: 940px;
  margin: 1.2rem auto 0;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-tief);
  padding: 1.4rem 1.8rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.gebietsschutz svg { flex: 0 0 40px; width: 40px; height: 40px; color: var(--blau); filter: drop-shadow(0 0 8px rgba(47,168,255,.4)); }
.gebietsschutz p { color: var(--grau); font-size: .95rem; }
.gebietsschutz strong { color: var(--tinte); }

.garantie-fazit {
  text-align: center;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 3rem;
}

.garantie-fazit small {
  display: block;
  font-size: .92rem;
  font-weight: 500;
  text-transform: none;
  color: var(--grau);
  margin-top: .6rem;
}

/* ---------- Match-Filter ---------- */

.match-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}

.match-spalte { border-radius: var(--radius); padding: 2rem; }

.match-spalte h3 { text-transform: uppercase; font-size: 1rem; letter-spacing: .06em; margin-bottom: 1.2rem; }

.match-spalte ul { list-style: none; display: grid; gap: .85rem; font-size: .95rem; }
.match-spalte li { padding-left: 1.7rem; position: relative; }
.match-spalte li::before { position: absolute; left: 0; font-weight: 800; }

.match-spalte.richtig {
  background: var(--dunkel);
  color: var(--text-hell);
  border: 2px solid var(--blau-hell);
  box-shadow: var(--glow);
}

.match-spalte.richtig h3 { color: var(--cyan); }
.match-spalte.richtig li::before { content: "✓"; color: var(--blau-hell); }

.match-spalte.falsch {
  background: var(--karte);
  color: var(--grau);
  border: 1px solid #dbe5ee;
}

.match-spalte.falsch h3 { color: var(--grau); }
.match-spalte.falsch li::before { content: "✕"; color: #c0392b; }

/* ---------- Manifest: die große dunkle Insel ---------- */

.manifest {
  background:
    radial-gradient(ellipse 55% 60% at 50% 45%, rgba(47, 168, 255, 0.1), transparent 70%),
    var(--dunkler);
  text-align: center;
}

.manifest .section-label { color: var(--cyan); }
.manifest .section-label::before { background: var(--cyan); }

.manifest-text {
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.55;
  max-width: 820px;
  margin: 1.5rem auto 0;
  display: grid;
  gap: 1.1rem;
  color: var(--text-hell);
}

.manifest-text em {
  font-style: normal;
  color: var(--blau-hell);
  text-shadow: 0 0 22px rgba(47, 168, 255, 0.5);
}

.manifest-sig { margin-top: 2.4rem; color: var(--grau-hell); font-size: .95rem; letter-spacing: .06em; }

/* ---------- FAQ ---------- */

.faq-liste { max-width: 860px; margin-inline: auto; display: grid; gap: .9rem; }

.faq-liste details {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.faq-liste details[open] { border-color: var(--blau); box-shadow: 0 0 22px rgba(47, 168, 255, 0.14), var(--schatten); }

.faq-liste summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1.15rem 3rem 1.15rem 1.5rem;
  list-style: none;
  position: relative;
  font-size: .98rem;
}

.faq-liste summary::-webkit-details-marker { display: none; }

.faq-liste summary::after {
  content: "+";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blau);
  font-size: 1.5rem;
  font-weight: 600;
  transition: transform .3s ease;
}

.faq-liste details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-liste details p {
  padding: 0 1.5rem 1.2rem;
  color: var(--grau);
  font-size: .94rem;
}

/* ---------- Final CTA ---------- */

.final-cta { background: linear-gradient(180deg, var(--bg), var(--bg-tief)); }

.scroll-witz {
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 4rem;
  border: 2px solid var(--blau-hell);
  border-radius: var(--radius);
  box-shadow: var(--glow), var(--schatten);
  background: var(--dunkel);
  padding: clamp(2.6rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 2.6rem) clamp(2rem, 4vw, 2.8rem);
  animation: scroll-witz-puls 3.2s ease-in-out infinite;
}

/* Neuro-Badge sitzt rittlings auf der oberen Rahmenkante — halb innen, halb außen */
.scroll-witz-badge.neuro-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) scale(.72);
  margin-top: 0;
  z-index: 3;
}

@keyframes scroll-witz-puls {
  0%, 100% { box-shadow: var(--glow), var(--schatten); }
  50% { box-shadow: var(--glow-stark), var(--schatten); }
}

.scroll-witz-titel {
  position: relative;
  z-index: 1;
  color: var(--blau-hell);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 0 26px rgba(47, 168, 255, 0.5);
  margin-bottom: 1.2rem;
}

.scroll-witz p {
  position: relative;
  z-index: 1;
  color: var(--text-hell);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
}


@media (prefers-reduced-motion: reduce) {
  .scroll-witz { animation: none; }
}

.cta-raster {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.cta-text h2 { margin: 1rem 0; }
.cta-text > p { color: var(--grau); margin-bottom: 1.4rem; }

.whatsapp-box {
  margin-top: 2rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.4rem 1.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--karte);
  box-shadow: var(--schatten);
}

.whatsapp-box p { font-size: .9rem; color: var(--grau); }
.whatsapp-box strong { color: var(--tinte); }

.cta-form {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 2.2rem;
  display: grid;
  gap: 1.1rem;
  box-shadow: 0 0 40px rgba(47, 168, 255, 0.1), var(--schatten);
}

.cta-form label {
  display: grid;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
}

.cta-form input:not([type="checkbox"]),
.cta-form textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--tinte);
  background: var(--bg);
  border: 1px solid #cdddeb;
  border-radius: 10px;
  padding: .8rem 1rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.cta-form input:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 14px rgba(47, 168, 255, 0.25);
}

.cta-form textarea { resize: vertical; }

.cta-form .checkbox {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: .78rem;
}

.cta-form .checkbox input { margin-top: .25rem; accent-color: var(--blau); }
.cta-form .checkbox a { color: var(--blau); text-decoration: underline; }

.cta-form small { text-align: center; color: var(--grau); font-size: .76rem; }

.versprechen {
  margin-top: 3.5rem;
  text-align: center;
  color: var(--grau);
  font-size: .9rem;
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--rand);
  padding-top: 2rem;
}

.versprechen strong { color: var(--tinte); }

/* ---------- Footer: dunkle Insel ---------- */

footer {
  background: var(--dunkler);
  border-top: 2px solid var(--blau-hell);
  box-shadow: 0 -4px 30px rgba(47, 168, 255, 0.15);
  padding: 3rem 0 2rem;
  color: var(--text-hell);
}

footer .logo { color: var(--text-hell); }

.footer-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-zeile p { color: var(--grau-hell); font-size: .85rem; }

.footer-zeile ul { list-style: none; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-zeile ul a { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--grau-hell); transition: color .25s ease; }
.footer-zeile ul a:hover { color: var(--blau-hell); }

.footer-sub { margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.2rem; }
.footer-sub p { color: #5c7186; font-size: .76rem; }
.footer-sub a { color: var(--blau-hell); }

/* ---------- Unterseiten (Impressum, Datenschutz, Danke) ---------- */

.seiten-hero {
  padding: 4.5rem 0 2.5rem;
  background:
    radial-gradient(ellipse 55% 60% at 50% 0%, rgba(47, 168, 255, 0.1), transparent 70%),
    var(--bg-tief);
}

.brotkruemel { color: var(--grau); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .8rem; }
.brotkruemel a:hover { color: var(--blau); }

.rechtstext { max-width: 820px; }
.rechtstext h2 { font-size: 1.35rem; margin: 2.6rem 0 .9rem; color: var(--blau-tief); }
.rechtstext h3 { margin: 1.9rem 0 .6rem; color: var(--tinte); }
.rechtstext p, .rechtstext li { color: var(--grau); font-size: .95rem; margin-bottom: .8rem; }
.rechtstext ul { padding-left: 1.3rem; }
.rechtstext a { color: var(--blau); text-decoration: underline; }
.rechtstext strong { color: var(--tinte); }

.marken-hinweis {
  border: 1px solid var(--rand-stark);
  background: rgba(47, 168, 255, 0.06);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
}

.danke {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(47, 168, 255, 0.12), transparent 70%),
    var(--bg);
}

.danke-check {
  width: 86px; height: 86px;
  margin: 0 auto 1.8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  box-shadow: var(--glow-stark);
  animation: pulsieren 2.6s ease-in-out infinite;
}

.danke-check svg { width: 44px; height: 44px; }

.danke .unterzeile { max-width: 620px; margin: 1.3rem auto 2.2rem; color: var(--grau); }
.danke .unterzeile em { color: var(--blau-tief); font-style: normal; font-weight: 700; }

.danke-schritte {
  max-width: 560px;
  margin: 0 auto 2.4rem;
  text-align: left;
  display: grid;
  gap: .9rem;
}

.danke-schritte div {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border: 1px solid var(--rand);
  background: var(--karte);
  box-shadow: var(--schatten);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
}

.danke-schritte b { color: var(--blau-tief); white-space: nowrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.danke-schritte p { color: var(--grau); font-size: .92rem; }

/* ---------- Leistungs-Unterseiten ---------- */

.leistungs-hero {
  padding: 4.5rem 0 5rem;
  background:
    radial-gradient(ellipse 55% 60% at 50% 0%, rgba(47, 168, 255, 0.1), transparent 70%),
    linear-gradient(180deg, #eef5fb, var(--bg));
}

.leistungs-hero .raster {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.leistungs-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.leistungs-hero .unterzeile { color: var(--grau); font-size: 1.05rem; margin: 1.2rem 0 1.8rem; max-width: 560px; }
.leistungs-hero .unterzeile strong { color: var(--tinte); }
.leistungs-hero .hero-buttons { justify-content: flex-start; }
.leistungs-hero .hero-trust { text-align: left; }

/* Video-Hero (denta1-Stil): Video als Vollflächen-Hintergrund, Text mittig darüber */
.leistungs-hero.mit-video {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 7rem 0 7.5rem;
}

.leistungs-hero.mit-video .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.leistungs-hero.mit-video .video-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 65% 80% at 50% 50%, rgba(9, 16, 25, 0.62), transparent 100%),
    linear-gradient(180deg, rgba(9, 16, 25, 0.82), rgba(9, 16, 25, 0.42) 45%, rgba(9, 16, 25, 0.88));
}

.leistungs-hero.mit-video .container { position: relative; z-index: 2; }
.leistungs-hero.mit-video h1 { color: #ffffff; text-shadow: 0 2px 24px rgba(9, 16, 25, 0.5); }
.leistungs-hero.mit-video h1 .akzent { color: var(--blau-hell); text-shadow: 0 0 26px rgba(47, 168, 255, 0.55); }
.leistungs-hero.mit-video .brotkruemel { color: var(--grau-hell); }
.leistungs-hero.mit-video .unterzeile { color: var(--text-hell); margin-inline: auto; max-width: 640px; text-shadow: 0 1px 12px rgba(9, 16, 25, 0.6); }
.leistungs-hero.mit-video .unterzeile strong { color: #ffffff; }
.leistungs-hero.mit-video .hero-buttons { justify-content: center; }
.leistungs-hero.mit-video .hero-trust { color: var(--grau-hell); text-align: center; }
.leistungs-hero.mit-video .hero-pille {
  border-color: rgba(127, 212, 255, 0.5);
  color: var(--cyan);
  background: rgba(47, 168, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .leistungs-hero.mit-video .hero-video { display: none; }
  .leistungs-hero.mit-video { background: var(--dunkler); }
}

/* großes Reel im Hero (z. B. Chakal-Video) */
.hero-reel {
  max-width: 300px;
  margin-inline: auto;
  text-align: center;
}

.hero-reel video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 30px;
  border: 7px solid var(--dunkel);
  box-shadow: var(--glow-stark), var(--schatten);
  background: var(--dunkel);
}

.hero-reel figcaption { margin-top: .7rem; color: var(--grau); font-size: .76rem; font-weight: 600; letter-spacing: .05em; }

/* Bild-Panel (z. B. Strategie-Workshop) */
.leistungs-bild {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rand);
  box-shadow: var(--schatten);
}

.leistungs-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ablauf in 3 Schritten */
.schritte-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}

.schritt {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.8rem;
  position: relative;
}

/* Kopfbild in Schritt-Karten: läuft randlos bis zur Kartenkante */
.schritt-bild {
  margin: -1.8rem -1.8rem 1.3rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.schritt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.schritt:hover .schritt-bild img { transform: scale(1.05); }

.schritt-nr {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--blau);
  color: var(--blau);
  font-weight: 800;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  box-shadow: var(--glow);
  background: var(--karte);
}

.schritt h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.schritt p { color: var(--grau); font-size: .92rem; }
.schritt .phase-zeit { margin-top: .9rem; }

/* Abschluss-Band */
.cta-band {
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(47, 168, 255, 0.25), transparent 70%),
    var(--dunkler);
  text-align: center;
  color: var(--text-hell);
  border-top: 2px solid var(--blau-hell);
}

.cta-band h2 { color: var(--text-hell); }
.cta-band p { color: var(--grau-hell); max-width: 620px; margin: 1rem auto 2rem; }
.cta-band .hero-trust { color: var(--grau-hell); }

@media (max-width: 900px) {
  .leistungs-hero .raster, .schritte-reihe { grid-template-columns: 1fr; }
  .hero-reel { max-width: 260px; }
}

/* ---------- Scroll-Animationen ---------- */

.anim {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s ease, transform .7s ease;
}

.anim.sichtbar { opacity: 1; transform: none; }

.anim.v1 { transition-delay: .1s; }
.anim.v2 { transition-delay: .2s; }
.anim.v3 { transition-delay: .3s; }
.anim.v4 { transition-delay: .4s; }
.anim.v5 { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; transition: none; }
  .btn-voll, .btn-voll::after, .laufband-spur, .form-deko, .scroll-hinweis::before, .instrument-icon svg, .danke-check { animation: none; }
  #partikel, .hero-video { display: none; }
  .zahn-teil { transform: none !important; transition: none; }
  .zahn-wrap .risse { opacity: 0; }
  .zahn-wrap .zahn-glow { opacity: .7; transition: none; }
  .zahn-status .kaputt-text { opacity: 0; }
  .zahn-status .ganz-text { opacity: 1; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .instrumente-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .zweispalter, .cta-raster, .match-raster, .drehtag-bilder, .problem-kopf-raster { grid-template-columns: 1fr; gap: 2.4rem; }
  .problem-raster, .zitat-reihe, .garantie-raster, .jetzt-stats, .blog-raster, .journey-timeline { grid-template-columns: 1fr; }
  .flagge-kreis { right: -8px; top: -30px; width: 84px; height: 84px; }
  .vergleich { grid-template-columns: 1fr; }
  .vs { justify-self: center; }
  .case { grid-template-columns: 1fr; }
  .dcm-buehne { grid-template-columns: 1fr; }
  .zahn-wrap { max-width: 300px; margin-inline: auto; }
  .gruender-karte { grid-template-columns: 1fr; padding: 2rem 1.6rem 0; }
  .gruender-bild { order: 2; margin-top: 1rem; }
  .gruender-text { padding-bottom: 0; }
  .drehtag-bilder { gap: 1.1rem; }
}

@media (max-width: 760px) {
  .container { width: 100%; padding-inline: 1.25rem; }

  .logo { font-size: .92rem; gap: .4rem; }
  .logo svg { width: 24px; height: 27px; }
  .nav-mobil-gruppe { gap: .55rem; }
  .nav-mobil-cta { padding: .46rem .8rem; font-size: .66rem; }

  .burger { display: flex; }
  .nav-mobil-gruppe { display: flex; }

  .nav-links {
    position: fixed;
    /* Header hat backdrop-filter und wird dadurch zum Containing Block –
       feste Maße statt inset:0, damit das Overlay den ganzen Viewport füllt */
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    background: rgba(246, 249, 252, 0.98);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform .35s ease;
  }

  .nav-links.offen { transform: translateX(0); }
  .nav-links a { font-size: 1.15rem; }

  section { padding: 4.2rem 0; }
  .instrumente-raster { grid-template-columns: 1fr; }
  .reel-reihe { grid-template-columns: 1fr; max-width: 300px; }
  .hero-stats { gap: 1.6rem 2.4rem; }
  .zeit-versprechen, .garantie-ehrlich { flex-direction: column; text-align: center; }
  .garantie-kreis { right: -8px; top: -30px; width: 92px; height: 92px; }
  .garantie h3 { padding-right: 60px; }
  .leistungs-hero.mit-video { padding: 5rem 0; }
  .gebietsschutz { flex-direction: column; text-align: center; }
  .cta-form { padding: 1.5rem; }
  .footer-zeile { flex-direction: column; align-items: flex-start; }
}