/* ============================================================
   MUSTERPROJEKT (Demo) – Zahnarztpraxis Dr. Sommer
   Gemeinsames Stylesheet aller Seiten (mehrseitig).
   Erstellt von Oak & Pixel – Paket "Premium".

   Schriften: lokal selbst gehostet (DSGVO), kein Google-CDN.
   Keine externen Schriften/Skripte/Bilder.
   ============================================================ */

/* --- Selbst gehostete Schriften (lokal, kein Google-CDN) --- */
@font-face{font-family:"Poppins";src:url("fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  --bg:#f4fafb; --bg-2:#e8f4f5; --card:#ffffff;
  --text:#15323a; --muted:#5a747c; --line:#dcebed;
  --teal:#0e7c86; --teal-d:#0b6b74; --teal-dd:#08545c;
  --mint:#2bb3a3; --ice:#eef8f9; --sun:#f6c659;
  --head:"Poppins", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --maxw:1120px; --radius:16px;
  --shadow:0 20px 50px rgba(11,80,90,.16);
  --shadow-sm:0 8px 22px rgba(11,80,90,.08);
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0 0 .5rem;}
p{margin:0 0 1rem;}
a{color:var(--teal-d);}
strong{font-weight:700;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem;}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;}}

/* Demo-Banner */
.demo-bar{background:var(--teal-dd);color:#fff;font-size:.85rem;font-weight:600;text-align:center;padding:.55rem 1rem;}
.demo-bar a{color:#aee9e2;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:700;text-decoration:none;padding:.9rem 1.6rem;border-radius:999px;border:2px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;}
.btn--primary{background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(14,124,134,.3);}
.btn--primary:hover{background:var(--teal-d);transform:translateY(-2px);}
.btn--ghost{color:var(--teal-d);border-color:#bfe3e5;background:#fff;}
.btn--ghost:hover{border-color:var(--teal);transform:translateY(-2px);}
.btn--light{background:#fff;color:var(--teal-d);}
.btn--light:hover{background:var(--ice);transform:translateY(-2px);}

/* Kopf */
header.site{position:sticky;top:0;z-index:20;background:rgba(244,250,251,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:1rem;}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--head);font-weight:700;font-size:1.2rem;color:var(--text);text-decoration:none;letter-spacing:-.01em;}
.logo__mark{width:34px;height:34px;flex:none;}
.nav ul{display:none;list-style:none;gap:1.7rem;margin:0;padding:0;}
.nav a.navlink{color:var(--muted);text-decoration:none;font-weight:600;font-size:.93rem;}
.nav a.navlink:hover{color:var(--teal-d);}
.nav a.navlink[aria-current="page"]{color:var(--teal-d);}

/* Hero */
.hero{position:relative;padding:3.8rem 0 4.2rem;overflow:hidden;background:
  radial-gradient(720px 380px at 88% 0%,rgba(43,179,163,.16),transparent 60%),
  linear-gradient(180deg,var(--bg),var(--bg-2));}
.hero__grid{display:grid;gap:2.6rem;align-items:center;}
.pill{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);color:var(--teal-d);font-weight:600;font-size:.82rem;padding:.4rem .85rem;border-radius:999px;margin-bottom:1.1rem;box-shadow:var(--shadow-sm);}
.pill svg{color:var(--mint);}
.hero h1{font-size:2.6rem;}
.hero h1 .hl{color:var(--teal);}
.hero__lead{color:var(--muted);max-width:46ch;font-size:1.18rem;}
.hero__actions{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;}
.hero__note{font-size:.86rem;color:var(--muted);margin:.9rem 0 0;}

/* Hero-Visual: ruhige Komposition mit Zahn-Motiv (reines SVG) */
.hero-art{position:relative;}
.hero-art__card{position:relative;background:linear-gradient(160deg,#ffffff,var(--ice));border:1px solid var(--line);border-radius:26px;padding:2.2rem;box-shadow:var(--shadow);}
.tooth{display:block;margin:0 auto;max-width:200px;}
.floatcard{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;}
.floatcard svg{flex:none;}
.floatcard--rate{top:8%;left:-4%;}
.floatcard--safe{bottom:7%;right:-3%;}
.floatcard small{display:block;color:var(--muted);font-weight:400;}
.fc-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}

/* Stat-Band */
.stats{background:var(--teal-d);color:#fff;}
.stats__grid{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr);padding:1.8rem 0;text-align:center;}
.stat__num{font-family:var(--head);font-weight:700;font-size:1.8rem;line-height:1;}
.stat__lbl{color:#bfe7e6;font-size:.86rem;margin-top:.3rem;}

section{padding:4.2rem 0;}
.section-head{max-width:640px;margin:0 auto 2.4rem;text-align:center;}
.eyebrow{color:var(--mint);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;margin-bottom:.6rem;}
.section-title{font-size:2.1rem;}
.section-intro{color:var(--muted);}

/* Leistungen */
.grid{display:grid;gap:1.3rem;grid-template-columns:1fr;}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.svc__ic{width:52px;height:52px;border-radius:14px;background:var(--ice);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.svc h3{font-size:1.2rem;}
.svc p{color:var(--muted);margin:0;font-size:.95rem;}

/* Split: Wohlfühl-Praxis */
.split{display:grid;gap:2.4rem;align-items:center;}
.split__art{position:relative;aspect-ratio:4/3;border-radius:22px;background:linear-gradient(150deg,var(--mint),var(--teal));box-shadow:var(--shadow);overflow:hidden;}
.split__art .blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);}
.split__badge{position:absolute;inset:auto auto 1.1rem 1.1rem;background:rgba(255,255,255,.92);color:var(--teal-d);font-weight:600;font-size:.82rem;padding:.5rem .8rem;border-radius:999px;}
.checklist{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.8rem;}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;}
.checklist svg{color:var(--mint);flex:none;margin-top:3px;}

/* Team */
.team{display:grid;gap:1.3rem;grid-template-columns:1fr;}
.member{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;text-align:center;box-shadow:var(--shadow-sm);}
.avatar{width:84px;height:84px;border-radius:50%;margin:0 auto .9rem;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:1.5rem;color:#fff;}
.av1{background:linear-gradient(150deg,#0e7c86,#2bb3a3);}
.av2{background:linear-gradient(150deg,#2bb3a3,#5ac6b0);}
.av3{background:linear-gradient(150deg,#2a8f9a,#6cc3c9);}
.member h3{font-size:1.12rem;margin-bottom:.15rem;}
.member__role{color:var(--teal-d);font-weight:600;font-size:.9rem;}
.member p{color:var(--muted);font-size:.9rem;margin:.6rem 0 0;}

/* Testimonials */
.quotes{display:grid;gap:1.3rem;grid-template-columns:1fr;}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm);}
.qcard .stars{color:var(--sun);letter-spacing:2px;margin-bottom:.6rem;}
.qcard p{font-size:1.02rem;margin:0 0 1rem;}
.qcard cite{color:var(--muted);font-style:normal;font-weight:600;font-size:.9rem;}

/* FAQ (rein per <details>, kein JS) */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:.8rem;}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 1.2rem;box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer;list-style:none;font-family:var(--head);font-weight:600;font-size:1.02rem;padding:1.1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--teal);font-size:1.5rem;font-weight:700;line-height:1;transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{color:var(--muted);margin:0 0 1.1rem;}

/* Termin / Kontakt */
.booking{background:var(--teal-d);color:#fff;}
.booking .section-head{margin-bottom:2rem;}
.booking .eyebrow{color:#9fe3da;}
.booking__grid{display:grid;gap:2.2rem;grid-template-columns:1fr;}
.booking h2,.booking h3{color:#fff;}
.info-line{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1rem;}
.info-line svg{color:var(--mint);flex:none;margin-top:3px;}
.info-line a{color:#fff;}
.hours{list-style:none;margin:.4rem 0 0;padding:0;max-width:340px;}
.hours li{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.18);padding:.5rem 0;color:#d7efee;}
/* "Online-Terminanfrage" – baut per JS eine vorausgefüllte E-Mail (kein Server, DSGVO) */
form.book{background:#fff;color:var(--text);border-radius:18px;padding:1.7rem;box-shadow:var(--shadow);}
form.book label{display:block;font-weight:600;font-size:.88rem;margin:0 0 .35rem;}
form.book .field{margin-bottom:1rem;}
form.book input,form.book select,form.book textarea{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;}
form.book input:focus,form.book select:focus,form.book textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.15);}
form.book .row{display:grid;gap:1rem;}
form.book button{width:100%;cursor:pointer;}
form.book .privacy{font-size:.8rem;color:var(--muted);margin:.9rem 0 0;}

/* Abschluss */
.closing{text-align:center;}
.closing .btnrow{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem;}

footer.site{background:#0a4047;color:#bfe0e0;padding:2.6rem 0;font-size:.9rem;}
footer .made{margin-top:.6rem;}
footer a{color:#eafafa;font-weight:600;}

@media(min-width:760px){
  .nav ul{display:flex;}
  .hero h1{font-size:3.4rem;}
  .hero__grid{grid-template-columns:1.05fr .95fr;}
  .grid{grid-template-columns:repeat(3,1fr);}
  .team{grid-template-columns:repeat(3,1fr);}
  .quotes{grid-template-columns:repeat(3,1fr);}
  .split{grid-template-columns:1fr 1fr;}
  .booking__grid{grid-template-columns:1fr 1fr;}
  form.book .row{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   BEWEGUNG (dezent, seriös) – siehe motion.js
   Leitidee: "eine Praxis, die ruhig atmet". Bewegung als
   Premium-Signal, nie als Spielerei. Nur transform/opacity
   (GPU-freundlich). Alles respektiert prefers-reduced-motion.

   Wichtig (Progressive Enhancement): Reveal-Elemente werden NUR
   versteckt, wenn die Klasse .js am <html> haengt – die setzt
   ausschliesslich motion.js. Ohne JS ist alles sofort sichtbar.

   Weiche Standard-Kurve (kommt sanft zur Ruhe):
   cubic-bezier(.16,1,.3,1)
   ============================================================ */

/* ---------- A) Scroll-Reveals ---------- */
/* Startzustand nur mit aktivem JS (.js). Ohne .js: alles sichtbar. */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.16,1,.3,1);
  /* Stagger: --i wird im HTML je Karte gesetzt (0,1,2,…) */
  transition-delay:calc(var(--i, 0) * 70ms);
  will-change:opacity, transform;
}
.js .reveal.in{opacity:1;transform:none;}

/* ---------- C) Hero "lebt": schwebende Floatcards ---------- */
@keyframes oap-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
/* Versetzte Dauer/Verzoegerung = organischer, nie im Gleichtakt. */
.floatcard--rate{animation:oap-float 6s ease-in-out infinite;}
.floatcard--safe{animation:oap-float 7s ease-in-out infinite .8s;}

/* C) Sparkle (Funkeln) – sehr dezentes Auf-/Abblenden + Mini-Skalierung. */
@keyframes oap-shimmer{
  0%,100%{opacity:.55;transform:scale(.92);}
  50%{opacity:1;transform:scale(1.06);}
}
.hero-art .sparkle{
  transform-origin:center;
  animation:oap-shimmer 4.5s ease-in-out infinite;
}

/* C) Atmender Glow im Hero-Hintergrund.
   Wir legen den Glow als eigene Ebene (::before) ueber den vorhandenen
   Verlauf und lassen NUR dessen Deckkraft minimal "atmen". */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(720px 380px at 88% 0%,
              rgba(43,179,163,.18),transparent 60%);
  opacity:.7;
  animation:oap-glow 9s ease-in-out infinite;
}
@keyframes oap-glow{
  0%,100%{opacity:.55;}
  50%{opacity:.9;}
}

/* ---------- D) "Aktiv"-Status mit weichem Puls ---------- */
/* Label-Chip (z. B. "Heute geöffnet" auf der Kontaktseite, dunkler Grund). */
.status-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  margin:.5rem 0 .2rem;
  font-size:.78rem;font-weight:700;
  color:#eafafa;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  padding:.25rem .7rem;border-radius:999px;
}
/* Kleiner Punkt + weicher Pulsring (skaliert, kein teures box-shadow). */
.status-dot{
  position:relative;
  display:inline-block;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--mint);
  flex:none;
}
.status-dot::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  background:var(--mint);
  transform-origin:center;
  animation:oap-pulse 2.4s ease-out infinite;
}
@keyframes oap-pulse{
  0%{transform:scale(1);opacity:.55;}
  70%,100%{transform:scale(2.6);opacity:0;}
}

/* ---------- E) Zahn-SVG: Boegen zeichnen sich nach + Glanz ---------- */
/* Die beiden hellen Schimmer-Boegen bekommen eine Strichlinie, die beim
   Reveal von "leer" auf "voll" laeuft. Laenge grosszuegig (Pfade kurz). */
.js .tooth .shine{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .25s;
}
.js .hero-art.in .tooth .shine{stroke-dashoffset:0;}

/* E) Glanzstreifen: ein heller Schimmer wandert einmalig ueber den Zahn.
   Bewegt wird nur transform (x) einer maskierten Ebene. */
.js .tooth .glint{
  opacity:0;
}
.js .hero-art.in .tooth .glint{
  animation:oap-glint 1.6s ease-in-out .5s 1 both;
}
@keyframes oap-glint{
  0%{opacity:0;transform:translateX(-60px);}
  20%{opacity:.85;}
  80%{opacity:.85;}
  100%{opacity:0;transform:translateX(60px);}
}

/* ---------- F) Header "verdichtet" beim Scrollen ---------- */
/* Variante 1 (modern): scroll-driven. Der Header bekommt im ersten
   Stueck Scroll etwas mehr Schatten/Deckkraft. animation-range klein,
   damit der Effekt frueh "einrastet". */
@supports (animation-timeline: scroll()){
  header.site{
    animation:oap-header linear both;
    animation-timeline:scroll(root);
    animation-range:0 120px;
  }
}
@keyframes oap-header{
  to{
    background:rgba(244,250,251,.96);
    box-shadow:0 6px 22px rgba(11,80,90,.10);
  }
}
/* Variante 2 (Fallback via .scrolled aus motion.js). */
header.site.scrolled{
  background:rgba(244,250,251,.96);
  box-shadow:0 6px 22px rgba(11,80,90,.10);
}
header.site{transition:background .25s ease, box-shadow .25s ease;}

/* ---------- G) Sanfter Hero-Parallax (winzige Amplitude) ---------- */
/* Nur die Glow-Ebene (.hero::before) driftet beim Scrollen minimal nach
   oben weg -> dezente Tiefe. transform-only, scroll-driven. */
@supports (animation-timeline: scroll()){
  .hero::before{
    animation:oap-glow 9s ease-in-out infinite,
              oap-parallax linear both;
    animation-timeline:auto, view();
    animation-range:cover;
  }
}
@keyframes oap-parallax{
  from{transform:translateY(0);}
  to{transform:translateY(-26px);}
}

/* ============================================================
   prefers-reduced-motion: Bewegung AUS, Endzustaende SOFORT.
   Der globale Kill-Switch oben (Zeile ~37) schaltet bereits alle
   transition/animation ab. Hier stellen wir zusaetzlich sicher,
   dass nichts versteckt/halbfertig stehen bleibt.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;}
  .js .tooth .shine{stroke-dashoffset:0;}
  .js .tooth .glint{display:none;}
}