/* ============================================================
   ZAHNAERZTE AM FEUERSEE - Zahnarztpraxis (Konzept-Demo)
   Richtung: frisch, saftig, lebendig. Kuehler Mint-Weiss-Grund,
   saftiges Tuerkis (satt fuer Buttons/Deko, dunkel fuer Text),
   warme Mandarine, Mango als Funken-Akzent, grosse Rundungen.
   Display: Bricolage Grotesque | Body: DM Sans
   Motion nach Kowalski: kurz, ease-out, transform/opacity only.
   ============================================================ */

:root {
  --porzellan: #F7FBF9;
  --porzellan-tief: #E9F5F0;
  --elfenbein: #F4EFE4;
  --tuerkis: #0A7D71;       /* dunkles Tuerkis fuer Text/UI, AA-sicher */
  --tuerkis-satt: #12C0B0;  /* saftiges Tuerkis fuer Buttons/Flaechen/Deko */
  --koralle: #E76233;       /* warme Mandarine statt Rot-Orange */
  --peach: #FFA478;
  --peach-hell: #FFE6D3;
  --mint: #63D8C7;
  --mint-hell: #DFF6F0;
  --mango: #FFB01F;
  --tinte: #14282C;
  --stein: #557270;
  --hell: #F7FBF9;
  --radius: 26px;
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --maxw: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
  --rein-raus: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }

body {
  background: var(--porzellan);
  color: var(--tinte);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--tuerkis); color: var(--porzellan); }

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

h1, h2, h3 { text-wrap: balance; }

em { font-style: normal; color: var(--koralle); }

/* Skip-Link: unsichtbar bis Tastatur-Fokus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tuerkis);
  color: var(--porzellan);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 14px 0;
}
.skip-link:focus { left: 0; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
  padding: 15px 30px;
  border: 2px solid var(--tuerkis-satt);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--aus), color .2s var(--aus), border-color .2s var(--aus), transform .16s var(--aus);
}
/* Saftiges Tuerkis mit dunkler Schrift: frisch statt schwer */
.btn--voll { background: var(--tuerkis-satt); color: var(--tinte); position: relative; overflow: hidden; }
.btn--linie { background: transparent; color: var(--tuerkis); }
.btn--breit { width: 100%; }
.btn:active { transform: scale(.97); }
/* Glanz-Streifen, wischt beim Hover einmal durch */
.btn--voll::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: transform .5s var(--aus);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--voll:hover { background: #2BD3C2; border-color: #2BD3C2; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(6, 62, 59, .5); }
  .btn--voll:hover::after { transform: skewX(-18deg) translateX(400%); }
  .btn--linie:hover { background: var(--tuerkis-satt); color: var(--tinte); transform: translateY(-2px); }
}

/* ============ Eyebrow / Section-Kopf ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tuerkis);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--koralle), var(--peach));
}
.eyebrow--hell { color: var(--tinte); }
.eyebrow--hell::before { background: linear-gradient(90deg, var(--koralle), var(--mango)); }

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 120px) var(--pad);
}

.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
/* Auf Tuerkis-Flaeche: dunkle Schrift, Mango-Marker als Pop */
.section--tuerkis .section-title em {
  color: var(--tinte);
  padding: 0 .08em;
  background: linear-gradient(transparent 60%, var(--mango) 60%, var(--mango) 94%, transparent 94%);
}

.section-sub {
  margin-top: 18px;
  font-size: 17.5px;
  color: var(--stein);
  max-width: 640px;
}
.section--tuerkis .section-sub { color: var(--tinte); }

/* ============ Navigation ============ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(247, 251, 249, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 36, 38, .09);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--tuerkis);
}
.nav-logo span { color: var(--tinte); font-weight: 600; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.nav-link {
  font-size: 15px;
  font-weight: 700;
  position: relative;
  padding: 6px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  border-radius: 3px;
  background: var(--koralle);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--aus);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link--cta {
  border: 2px solid var(--tuerkis-satt);
  color: var(--tuerkis);
  border-radius: 999px;
  padding: 9px 20px;
  transition: background .2s var(--aus), color .2s var(--aus);
}
.nav-link--cta:hover { background: var(--tuerkis-satt); color: var(--tinte); }
.nav-link--cta::after { display: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 6px;
  z-index: 120;
}
.nav-burger span {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--tinte);
  transition: transform .25s var(--aus), background .25s var(--aus);
}

/* ============ Hero: zentriertes Statement mit Marker-Wort ============ */
.hero { padding-top: 74px; position: relative; overflow: hidden; }

/* Weiche Farb-Blobs treiben im Hintergrund */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: blob-treiben 14s ease-in-out infinite alternate;
}
.hero-blob--peach {
  width: 480px; height: 480px;
  right: -140px; top: 40px;
  background: rgba(255, 138, 84, .32);
}
.hero-blob--tuerkis {
  width: 420px; height: 420px;
  left: -160px; top: 220px;
  background: rgba(23, 208, 190, .30);
  animation-delay: -7s;
}
.hero-blob--mint {
  width: 380px; height: 380px;
  left: 32%; top: 460px;
  background: rgba(255, 176, 31, .18);
  animation-delay: -3.5s;
}
@keyframes blob-treiben {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-30px) scale(1.06); }
}

/* Handschrift-Ebene: die menschliche Randnotiz */
.handschrift,
.handnotiz {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 21px;
  color: var(--koralle);
}
.handnotiz {
  margin-top: 18px;
  transform: rotate(-2deg);
}
.handnotiz--angst {
  font-size: 24px;
  color: #C05327;
  margin: 4px 0 0;
}

/* Textmarker: warmer Farbwisch hinter dem wichtigsten Wort */
.marker {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 .1em;
  margin: 0 -.06em;
}
.marker::before {
  content: "";
  position: absolute;
  inset: .55em -.08em -.06em;
  z-index: -1;
  border-radius: .45em .7em .5em .8em / .8em .5em .7em .45em;
  background: linear-gradient(100deg, var(--peach), var(--koralle));
  opacity: .85;
  transform: skewX(-8deg) rotate(-1.2deg) scaleX(1);
  transform-origin: left center;
  animation: marker-wisch .55s var(--aus) both;
  animation-delay: .9s;
}
@keyframes marker-wisch {
  from { transform: skewX(-8deg) rotate(-1.2deg) scaleX(0); }
  to { transform: skewX(-8deg) rotate(-1.2deg) scaleX(1); }
}
.hero-inhalt {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 92px) var(--pad) clamp(28px, 4vw, 48px);
  text-align: center;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 6.6vw, 86px);
  line-height: 1.08;
  letter-spacing: -1.5px;
}
/* Schwebende Deko in den Seitenraendern */
.hero-deko {
  position: absolute;
  pointer-events: none;
  animation: deko-schweben 7s ease-in-out infinite alternate;
}
.hero-deko--funke {
  width: 30px;
  right: 7%;
  top: 24%;
  fill: var(--koralle);
  animation-duration: 5.5s;
}
.hero-deko--zahn {
  width: 46px;
  left: 4%;
  bottom: 26%;
  color: var(--mint);
  transform: rotate(-10deg);
  animation-delay: -3s;
}
@keyframes deko-schweben {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 -14px; rotate: 8deg; }
}
.hero-sub {
  margin: 22px auto 0;
  font-size: clamp(16.5px, 1.6vw, 19px);
  color: var(--stein);
  max-width: 560px;
}
.hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Foto-Band unter dem Statement, Chips ueberlappen */
.hero-band {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(20px, 3vw, 36px) auto 0;
  padding: 0 var(--pad) clamp(48px, 6vw, 72px);
}
.hero-band img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--radius);
  animation: band-ruhe 1.6s var(--aus) both;
  animation-delay: .6s;
}
/* Bild setzt sich beim Laden sanft in Position */
@keyframes band-ruhe {
  from { transform: scale(1.04); }
  to { transform: none; }
}
.hero-chips {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vw, 48px);
  transform: translate(-50%, 50%);
  width: max-content;
  max-width: calc(100% - 2 * var(--pad));
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hero-chips li {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tuerkis);
  background: #fff;
  border: 1px solid rgba(10, 125, 113, .22);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: 0 8px 20px -12px rgba(6, 62, 59, .4);
  transition: transform .2s var(--aus);
}
.hero-chips li span { color: var(--mango); }
/* Sticker-Optik: jeder Chip klebt ein bisschen schief */
.hero-chips li:nth-child(1) { transform: rotate(-2deg); }
.hero-chips li:nth-child(2) { transform: rotate(1.5deg) translateY(3px); }
.hero-chips li:nth-child(3) { transform: rotate(-1deg); }
.hero-chips li:nth-child(4) { transform: rotate(2.2deg) translateY(2px); }
@media (hover: hover) and (pointer: fine) {
  .hero-chips li:hover { transform: rotate(0deg) translateY(-2px); }
}

/* Ladesequenz */
.lade-stufe { animation: stufe-rein .65s var(--aus) both; }
.hero-inhalt .lade-stufe:nth-child(1) { animation-delay: .08s; }
.hero-inhalt .lade-stufe:nth-child(2) { animation-delay: .2s; }
.hero-inhalt .lade-stufe:nth-child(3) { animation-delay: .34s; }
.hero-inhalt .lade-stufe:nth-child(4) { animation-delay: .46s; }
.hero-inhalt .lade-stufe:nth-child(5) { animation-delay: .56s; }
.hero-band.lade-stufe { animation-delay: .55s; }
@keyframes stufe-rein {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ============ Laufband: Leistungen ticken vorbei ============ */
.laufband {
  overflow: hidden;
  background: linear-gradient(100deg, #16CDBC, #0CA093);
  transform: rotate(-1.2deg);
  margin: clamp(4px, 1vw, 12px) -24px 0;
  padding: 13px 0;
  box-shadow: 0 14px 30px -20px rgba(6, 62, 59, .5);
}
.laufband-spur {
  display: flex;
  width: max-content;
  animation: laufband-lauf 32s linear infinite;
}
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband-liste {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  list-style: none;
}
.laufband-liste li {
  display: flex;
  align-items: center;
  gap: 34px;
  color: var(--tinte);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.laufband-liste li::after {
  content: "\2726";
  color: var(--porzellan);
  font-size: 15px;
  letter-spacing: 0;
}
@keyframes laufband-lauf {
  to { transform: translateX(-50%); }
}

.section-head--mitte {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--mitte .eyebrow { justify-content: center; }
.section-head--mitte .section-sub { margin-left: auto; margin-right: auto; }

/* ============ Zahn-Navigator (Signature) ============ */
.navigator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  background: #fff;
  border: 1px solid rgba(30, 36, 38, .08);
  border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 48px);
}
.navigator-bogen svg { width: 100%; height: auto; display: block; }
.navigator-tipp {
  margin-top: 12px;
  text-align: center;
  transform: rotate(-1.5deg);
}

/* Zaehne: klickbar, Zone hebt sich beim Hover und bei Auswahl */
.zahn {
  fill: var(--elfenbein);
  stroke: rgba(30, 36, 38, .25);
  stroke-width: 1.4;
  cursor: pointer;
  transition: fill .2s var(--aus), stroke .2s var(--aus), filter .25s var(--aus);
}
.zone-luecke {
  fill: transparent;
  stroke: rgba(30, 36, 38, .35);
  stroke-dasharray: 5 5;
}
.zone-zahnfleisch {
  stroke: var(--peach);
  stroke-width: 10;
  stroke-linecap: round;
  opacity: .55;
  cursor: pointer;
  transition: opacity .2s var(--aus), stroke .2s var(--aus);
}
svg .ist-aktiv.zahn { fill: var(--peach); stroke: var(--tuerkis); filter: drop-shadow(0 3px 7px rgba(231, 98, 51, .4)); }
svg .ist-aktiv.zone-luecke { fill: rgba(255, 160, 126, .35); stroke: var(--tuerkis); }
svg .ist-aktiv.zone-zahnfleisch { opacity: 1; stroke: var(--tuerkis); }
@media (hover: hover) and (pointer: fine) {
  svg .zahn:hover { fill: var(--peach-hell); }
  svg .zone-zahnfleisch:hover { opacity: .85; }
}

.navigator-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.nav-zone {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--stein);
  background: var(--porzellan);
  border: 2px solid rgba(30, 36, 38, .12);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background .2s var(--aus), color .2s var(--aus), border-color .2s var(--aus), transform .16s var(--aus);
}
.nav-zone:active { transform: scale(.96); }
.nav-zone:hover { border-color: var(--tuerkis); color: var(--tuerkis); }
.nav-zone.is-active {
  background: var(--tuerkis-satt);
  border-color: var(--tuerkis-satt);
  color: var(--tinte);
}

.navigator-panel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  margin-bottom: 10px;
}
.navigator-panel p { color: var(--stein); font-size: 16px; max-width: 460px; }
.panel-preis {
  margin-top: 14px;
  display: inline-block;
  font-weight: 700;
  color: var(--tuerkis) !important;
  background: var(--peach-hell);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14.5px !important;
}
.navigator-panel.panel-rein h3,
.navigator-panel.panel-rein p {
  animation: stufe-rein .3s var(--aus) both;
}
.navigator-panel.panel-rein p:nth-of-type(1) { animation-delay: .05s; }
.navigator-panel.panel-rein .panel-preis { animation-delay: .1s; }
.navigator-fuss {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 36, 38, .1);
  font-size: 14.5px;
  color: var(--stein);
}
.navigator-fuss a {
  color: var(--tuerkis);
  font-weight: 700;
  border-bottom: 2px solid var(--peach);
}

/* ============ Kassenbon: Preistransparenz ============ */
.section--tuerkis {
  max-width: none;
  /* Sattes Tuerkis wie Buttons/Laufband, dunkle Schrift drauf */
  background:
    radial-gradient(900px 520px at 85% 12%, rgba(255, 164, 120, .25), transparent 60%),
    radial-gradient(700px 520px at 4% 92%, rgba(255, 255, 255, .18), transparent 60%),
    var(--tuerkis-satt);
  color: var(--tinte);
}
.bon-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.bon-hinweis {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--tinte);
}

/* Der Beleg: gezackte Kanten, tabellarische Ziffern */
.bon {
  background: #FDFCF8;
  color: var(--tinte);
  padding: 30px 26px 26px;
  max-width: 380px;
  justify-self: center;
  transform: rotate(1.5deg);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .5);
  transition: transform .3s var(--aus);
  --zacke: 12px;
  clip-path: polygon(0 8px, 4% 0, 8% 8px, 12% 0, 16% 8px, 20% 0, 24% 8px, 28% 0, 32% 8px, 36% 0, 40% 8px, 44% 0, 48% 8px, 52% 0, 56% 8px, 60% 0, 64% 8px, 68% 0, 72% 8px, 76% 0, 80% 8px, 84% 0, 88% 8px, 92% 0, 96% 8px, 100% 0, 100% calc(100% - 8px), 96% 100%, 92% calc(100% - 8px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 8px), 64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 8px), 32% 100%, 28% calc(100% - 8px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 8px), 0 100%);
}
.bon-kopf {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 2px dashed rgba(30, 36, 38, .25);
}
.bon-kopf span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--stein);
}
.bon-liste {
  list-style: none;
  padding: 14px 0;
  border-bottom: 2px dashed rgba(30, 36, 38, .25);
  display: grid;
  gap: 10px;
}
.bon-liste li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14.5px;
}
.bon-liste b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tuerkis);
}
.bon-fuss {
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--stein);
  text-align: center;
  line-height: 1.7;
}
.bon-fuss b {
  color: var(--tuerkis);
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .bon:hover { transform: rotate(.5deg) translateY(-4px); }
}
/* Bon-Posten tippen nacheinander ein, wie beim Drucken */
body.js-ready .bon.reveal .bon-liste li {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s var(--aus), transform .4s var(--aus);
}
body.js-ready .bon.reveal.is-visible .bon-liste li { opacity: 1; transform: none; }
body.js-ready .bon.reveal.is-visible .bon-liste li:nth-child(2) { transition-delay: .08s; }
body.js-ready .bon.reveal.is-visible .bon-liste li:nth-child(3) { transition-delay: .16s; }
body.js-ready .bon.reveal.is-visible .bon-liste li:nth-child(4) { transition-delay: .24s; }
body.js-ready .bon.reveal.is-visible .bon-liste li:nth-child(5) { transition-delay: .32s; }
body.js-ready .bon.reveal.is-visible .bon-liste li:nth-child(6) { transition-delay: .4s; }

/* ============ Team ============ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}
/* Mittlerer Kopf sitzt tiefer: Rhythmus statt Reihe */
.kopf--tief { margin-top: clamp(28px, 4vw, 56px); }
/* Peach-Kreise hinter den Portraets: Waerme statt Sterilitaet */
.kopf { position: relative; }
.kopf::before {
  content: "";
  position: absolute;
  top: 6%;
  left: -7%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--peach-hell);
  z-index: -1;
  transition: transform .4s var(--aus);
}
.kopf:nth-child(2)::before { left: auto; right: -7%; top: 12%; background: var(--mint-hell); }
.kopf:nth-child(3)::before { top: 20%; width: 45%; background: rgba(255, 160, 126, .5); }
/* Team-Karten treten nacheinander ein */
body.js-ready .team-grid .kopf:nth-child(2) { transition-delay: .1s; }
body.js-ready .team-grid .kopf:nth-child(3) { transition-delay: .2s; }
.kopf-media {
  overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: var(--porzellan-tief);
}
.kopf-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .35s var(--aus);
}
@media (hover: hover) and (pointer: fine) {
  .kopf:hover .kopf-media img { transform: scale(1.03); }
  .kopf:hover::before { transform: scale(1.15); }
}
.kopf h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  margin: 18px 0 2px;
}
.kopf-rolle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tuerkis);
  margin-bottom: 8px;
}
.kopf p:not(.kopf-rolle) { color: var(--stein); font-size: 15px; }

/* ============ Angstpatienten ============ */
.angst {
  background: linear-gradient(150deg, var(--peach-hell), #FFD3B4);
  border-radius: clamp(28px, 4vw, 48px);
  max-width: calc(var(--maxw) + 40px);
  margin: clamp(64px, 8vw, 100px) auto 0;
}
.angst-grid {
  padding: clamp(40px, 5vw, 72px) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.angst-media img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: 999px 999px var(--radius) var(--radius);
}
.angst .section-sub { color: #7A6A5F; }
.angst-schritte {
  margin: 26px 0 30px;
  list-style: none;
  display: grid;
  gap: 18px;
  counter-reset: schritt;
}
.angst-schritte li {
  position: relative;
  padding-left: 52px;
  font-size: 15.5px;
  color: #7A6A5F;
  counter-increment: schritt;
}
.angst-schritte strong { color: var(--tinte); display: block; }
.angst-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0; top: 2px;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--tuerkis);
  background: #fff;
  border-radius: 50%;
}

/* ============ Termin ============ */
.termin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.info-liste {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}
.info-liste div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(30, 36, 38, .12);
}
.info-liste dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tuerkis);
  padding-top: 4px;
}
.info-liste dd { font-size: 16px; }
.info-liste dd.zeiten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 18px;
}
.info-liste .z-tage {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--stein);
  padding-top: 5px;
}
.info-liste a { border-bottom: 2px solid transparent; transition: border-color .15s var(--aus); }
.info-liste a:hover { border-color: var(--peach); }

.akut {
  margin-top: 26px;
  background: #fff;
  border: 1px solid rgba(10, 125, 113, .22);
  border-radius: 18px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--stein);
}
.akut strong { color: var(--tuerkis); }

.termin-form {
  background: #fff;
  border: 1px solid rgba(30, 36, 38, .09);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  display: grid;
  gap: 18px;
}
.form-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-feld { display: grid; gap: 7px; }
.form-feld label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.form-feld .optional { color: var(--stein); font-weight: 500; text-transform: none; letter-spacing: .2px; }
.form-feld input,
.form-feld select,
.form-feld textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--tinte);
  background: var(--porzellan);
  border: 2px solid rgba(30, 36, 38, .14);
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color .15s var(--aus);
  width: 100%;
}
.form-feld textarea { resize: vertical; }
.form-feld input:focus,
.form-feld select:focus,
.form-feld textarea:focus {
  outline: none;
  border-color: var(--tuerkis);
  box-shadow: 0 0 0 4px rgba(10, 125, 113, .14);
}
.form-feld input.fehler,
.form-feld select.fehler { border-color: #C24A2E; }

.form-status { font-size: 15px; font-weight: 700; min-height: 1.4em; }
.form-status.ok { color: var(--tuerkis); }
.form-status.nicht-ok { color: #C24A2E; }
.form-hinweis { font-size: 12.5px; color: var(--stein); }

/* ============ Footer ============ */
.footer {
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(255, 164, 120, .2), transparent 60%),
    var(--tuerkis-satt);
  color: var(--tinte);
  margin-top: clamp(64px, 8vw, 100px);
}
/* Farbverlaufs-Linie als freundlicher Abschluss */
.footer::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--koralle), var(--peach) 30%, var(--mango) 52%, var(--mint) 75%, var(--tuerkis-satt));
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--pad);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 40px;
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--tinte);
  margin-bottom: 12px;
}
.footer-logo span { font-weight: 600; }
.footer-brand p:not(.footer-logo) { font-size: 14.5px; line-height: 1.7; }
.footer-nav { display: grid; gap: 10px; align-content: start; }
.footer-nav a {
  font-size: 14.5px;
  font-weight: 700;
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--aus), border-color .15s var(--aus);
}
.footer-nav a:hover { border-color: var(--porzellan); }
.footer-legal { font-size: 13.5px; line-height: 1.8; }
.footer-legal a { color: var(--tinte); font-weight: 700; border-bottom: 1px solid rgba(20, 40, 44, .4); transition: border-color .15s var(--aus); }
.footer-legal a:hover { border-color: var(--porzellan); }

/* ============ Demo-Pill ============ */
.demo-pill {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(9, 100, 91, .95);
  backdrop-filter: blur(8px);
  color: var(--hell);
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(248, 245, 240, .25);
  transition: transform .18s var(--aus), border-color .18s var(--aus);
}
.demo-pill:hover { transform: translateY(-2px); border-color: var(--peach); }
.demo-pill-punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--peach);
  animation: pill-puls 2.2s ease-in-out infinite;
}
@keyframes pill-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ============ Reveal ============ */
body.js-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--aus), transform .4s var(--aus);
}
body.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}
body.js-ready .vertrauen-grid div:nth-child(2) { transition-delay: .05s; }
body.js-ready .vertrauen-grid div:nth-child(3) { transition-delay: .1s; }
body.js-ready .vertrauen-grid div:nth-child(4) { transition-delay: .15s; }
body.js-ready .leistung-grid .lkarte:nth-child(2) { transition-delay: .05s; }
body.js-ready .leistung-grid .lkarte:nth-child(3) { transition-delay: .1s; }
body.js-ready .leistung-grid .lkarte:nth-child(5) { transition-delay: .05s; }
body.js-ready .leistung-grid .lkarte:nth-child(6) { transition-delay: .1s; }

/* ============ Responsive ============ */
@media (max-width: 1000px) {
  .navigator { grid-template-columns: 1fr; }
  .navigator-bogen { max-width: 440px; margin: 0 auto; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .bon-grid { grid-template-columns: 1fr; }
  .bon { transform: rotate(0deg); }
  .angst-grid { grid-template-columns: 1fr; }
  .angst-media { max-width: 380px; }
}

@media (max-width: 860px) {
  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--tuerkis-satt);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform .3s var(--aus);
  }
  .nav-menu.is-open { transform: translateX(0); }
  .nav-menu .nav-link {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--tinte);
  }
  .nav-menu .nav-link--cta { border-color: var(--tinte); color: var(--tinte); padding: 14px 30px; }
  .nav-burger { display: flex; }
  .nav-burger.is-open span { background: var(--tinte); }
  .nav-burger.is-open span:first-child { transform: translateY(5px) rotate(45deg); }
  .nav-burger.is-open span:last-child { transform: translateY(-5px) rotate(-45deg); }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { justify-self: center; max-width: 380px; }
  /* Deko wuerde auf schmalen Screens in den Text ragen */
  .hero-deko { display: none; }
  .laufband { margin-left: -12px; margin-right: -12px; }

  .team-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .kopf--tief { margin-top: 0; }
  .hero-chips { position: static; transform: none; margin-top: 14px; }
  .hero-band { padding-bottom: 24px; }
  .hero-band img { aspect-ratio: 16 / 9; }
  .termin-grid { grid-template-columns: 1fr; }
  .form-zeile { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 28px; }

  .demo-pill { left: 12px; bottom: 12px; font-size: 11.5px; padding: 9px 13px; }
}

@media (max-width: 520px) {
  .navigator-tabs { gap: 6px; }
  .nav-zone { font-size: 13px; padding: 8px 14px; }
}

/* ============ Reduzierte Bewegung ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-pill-punkt { animation: none; }
  .marker::before { animation: none; }
  .hero-deko { animation: none; }
  .hero-band img { animation: none; }
  .laufband-spur { animation: none; }
  .navigator-panel.panel-rein h3, .navigator-panel.panel-rein p { animation: none; }
  .hero-blob { animation: none; }
  .lade-stufe { animation-duration: .01s; animation-delay: 0s; }
  body.js-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.js-ready .bon.reveal .bon-liste li { opacity: 1; transform: none; transition: none; }
  .btn, .lkarte, .kopf-media img, .kopf::before, .bon { transition: none; }
  .btn--voll::after { display: none; }
}