/* Zahnarztpraxis Dr. Michael Schäfer – statische Website
   Ein einziges Stylesheet, keine externen Ressourcen. */

:root{
  --tuerkis:#0e5f66;
  --tuerkis-hell:#14807f;
  --tuerkis-blass:#e8f2f2;
  --sand:#f7f4ef;
  --weiss:#ffffff;
  --text:#1f2a2e;
  --text-leise:#5a6b70;
  --linie:#dfe6e6;
  --rand:14px;
  --breite:1140px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--schrift);
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tuerkis);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--tuerkis-hell)}
h1,h2,h3{line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.5vw,3rem)}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:2.2em}
h2:first-child{margin-top:0}
h3{font-size:1.12rem}
p{margin:0 0 1.1em}
ul{padding-left:1.2em}
li{margin-bottom:.35em}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px}
.schmal{max-width:760px}

.skip{position:absolute;left:-9999px;top:0;background:var(--tuerkis);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--tuerkis-hell);outline-offset:2px}

/* ---------------------------------------------------------- Topbar */
.topbar{background:var(--tuerkis);color:#cfe6e6;font-size:.86rem}
.topbar .wrap{display:flex;gap:20px;align-items:center;justify-content:flex-end;
  min-height:38px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline}
.topbar-zeit{color:#a9cccd}
@media(max-width:640px){.topbar .wrap{justify-content:center;text-align:center}
  .topbar-zeit{display:none}}

/* ---------------------------------------------------------- Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf-inner{display:flex;align-items:center;gap:24px;min-height:78px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);flex:0 0 auto}
.logo-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--tuerkis);color:#fff;flex:0 0 auto}
.logo-svg{width:24px;height:24px}
.logo-text strong{display:block;font-size:1.02rem;line-height:1.2}
.logo-text span{display:block;font-size:.76rem;color:var(--text-leise);letter-spacing:.06em;
  text-transform:uppercase}

.haupt{margin-left:auto;display:flex;align-items:center;gap:18px}
.haupt>ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.haupt>ul>li{position:relative}
.haupt a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
  font-size:.94rem;font-weight:600;color:var(--text)}
.haupt a:hover{background:var(--tuerkis-blass);color:var(--tuerkis)}
.haupt a[aria-current="page"]{color:var(--tuerkis);background:var(--tuerkis-blass)}
.sub-toggle{display:none}
.has-sub>.sub{position:absolute;left:0;top:100%;min-width:280px;background:#fff;
  border:1px solid var(--linie);border-radius:var(--rand);box-shadow:0 18px 40px rgba(14,95,102,.14);
  list-style:none;margin:6px 0 0;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.16s ease}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.sub a{font-weight:500;font-size:.92rem;padding:8px 12px}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--linie);
  background:#fff;border-radius:11px;cursor:pointer;padding:11px 10px}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;margin:4px 0}

@media(max-width:1000px){
  .burger{display:block}
  .haupt{position:fixed;inset:116px 0 0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:16px 24px 40px;overflow-y:auto;display:none}
  body.menu-offen .haupt{display:flex}
  body.menu-offen{overflow:hidden}
  .haupt>ul{flex-direction:column;gap:0}
  .haupt>ul>li{border-bottom:1px solid var(--linie)}
  .haupt a{padding:14px 4px;font-size:1.05rem;border-radius:0}
  .sub-toggle{display:block;position:absolute;right:0;top:6px;width:44px;height:44px;
    border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--text-leise)}
  .has-sub>.sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0 0 10px 12px;display:none;min-width:0}
  .has-sub.offen>.sub{display:block}
  .haupt .btn-klein{margin-top:20px;text-align:center}
}

/* ---------------------------------------------------------- Buttons */
.btn{display:inline-block;background:var(--tuerkis);color:#fff !important;text-decoration:none;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:.96rem;
  transition:.15s ease;border:2px solid var(--tuerkis)}
.btn:hover{background:var(--tuerkis-hell);border-color:var(--tuerkis-hell)}
.btn-klein{padding:9px 18px;font-size:.9rem}
.btn-rand{background:transparent;color:var(--tuerkis) !important;border-color:var(--tuerkis)}
.btn-rand:hover{background:var(--tuerkis-blass);color:var(--tuerkis) !important}
.btn-hell{background:#fff;color:var(--tuerkis) !important;border-color:#fff}
.btn-hell:hover{background:var(--tuerkis-blass);border-color:var(--tuerkis-blass)}

/* ---------------------------------------------------------- Hero */
.hero{background:linear-gradient(160deg,var(--tuerkis-blass) 0%,var(--sand) 100%);
  padding:60px 0 54px;border-bottom:1px solid var(--linie)}
.hero h1{margin-bottom:.4em;max-width:20ch}
.hero .lead{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--text-leise);max-width:56ch;margin:0}
.hero-gross{padding:96px 0 88px}
.hero-gross h1{max-width:16ch}
.kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;
  color:var(--tuerkis);margin:0 0 14px}
.hero-aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------------------------------------------------------- Inhalt */
.inhalt{padding:64px 0}
.band{background:var(--sand)}
.band-hell{background:var(--tuerkis-blass)}
.band-lead{color:var(--text-leise);max-width:56ch;margin-top:-.4em}
.hinweis{font-size:.9rem;color:var(--text-leise);border-left:3px solid var(--linie);
  padding-left:14px;margin-top:2em}

/* ---------------------------------------------------------- Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;margin-top:32px}
.karte{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--linie);
  border-radius:var(--rand);padding:24px 22px;text-decoration:none;color:var(--text);
  transition:.16s ease}
.karte:hover{border-color:var(--tuerkis);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(14,95,102,.10);color:var(--text)}
.karte h3{margin:0;font-size:1.02rem}
.karte .icon{width:30px;height:30px;color:var(--tuerkis)}
.karte .mehr{margin-top:auto;font-size:.86rem;color:var(--tuerkis);font-weight:600}
.karte-text{min-height:130px}

/* ---------------------------------------------------------- Team */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;margin:28px 0 8px}
.person{margin:0}
.portrait{aspect-ratio:3/4;overflow:hidden;border-radius:var(--rand);background:var(--tuerkis-blass)}
.portrait img{width:100%;height:100%;object-fit:cover}
.person figcaption{padding-top:12px}
.person strong{display:block;font-size:1rem}
.person span{display:block;font-size:.86rem;color:var(--text-leise)}
.mitglied{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.mitglied li{padding-left:22px;position:relative}
.mitglied li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;
  border-radius:50%;background:var(--tuerkis)}

/* ---------------------------------------------------------- Bewertungen */
.bewertungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:28px}
.bewertung{margin:0;background:#fff;border-radius:var(--rand);padding:26px 24px;
  border:1px solid rgba(14,95,102,.12)}
.note{display:inline-block;background:var(--tuerkis);color:#fff;font-weight:700;font-size:.9rem;
  border-radius:8px;padding:2px 10px;margin-bottom:12px}
.bew-titel{font-weight:700;margin-bottom:.5em}
.bewertung p{font-size:.95rem}
.bewertung cite{font-style:normal;font-size:.82rem;color:var(--text-leise)}

/* ---------------------------------------------------------- CTA */
.cta{background:var(--tuerkis);color:#fff;padding:64px 0;text-align:center}
.cta h2{margin-top:0;color:#fff}
.cta p{color:#d3e8e8;max-width:52ch;margin-left:auto;margin-right:auto}
.cta a{color:#fff}

/* ---------------------------------------------------------- Weiter-Block */
.weiter{margin-top:56px;padding-top:28px;border-top:1px solid var(--linie)}
.weiter h2{margin-top:0;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-leise)}
.weiter-liste{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.weiter-liste a{display:inline-block;background:var(--sand);border:1px solid var(--linie);
  border-radius:999px;padding:7px 15px;font-size:.88rem;text-decoration:none;color:var(--text)}
.weiter-liste a:hover{border-color:var(--tuerkis);color:var(--tuerkis)}

/* ---------------------------------------------------------- Kontakt */
.kontakt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.adresse{font-size:1.05rem}
.tel-gross{font-size:1.5rem;font-weight:700;text-decoration:none}
.zeiten{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:0 0 1.4em}
.zeiten dt{color:var(--text-leise)}
.zeiten dd{margin:0;font-weight:600}
.zeiten.gross{font-size:1.02rem}
.notfall{background:var(--sand);border-left:4px solid var(--tuerkis);border-radius:0 var(--rand) var(--rand) 0;
  padding:24px 26px;margin-bottom:1.6em}

/* ---------------------------------------------------------- Fuß */
.fuss{background:#0b3f45;color:#bfd8d9;padding:56px 0 0;margin-top:0;font-size:.94rem}
.fuss h3{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1em}
.fuss a{color:#fff}
.fuss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px}
.fuss .zeiten dt{color:#8fb7b9}
.fuss .zeiten dd{color:#fff}
.fuss-links{list-style:none;padding:0;margin:0}
.fuss-unten{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:20px;
  padding-bottom:24px;font-size:.85rem;color:#8fb7b9}
.fuss-unten p{margin:0}

@media print{
  .topbar,.kopf,.cta,.burger,.weiter{display:none}
  body{font-size:12pt}
}

/* ---------------------------------------------------------- Hero mit Bild */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-foto img{border-radius:var(--rand);box-shadow:0 22px 50px rgba(14,95,102,.18);width:100%}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:32px}
  .hero-gross{padding:56px 0 48px}
}
.band-bild{padding:0}
.breitbild{margin:0}
.breitbild img{border-radius:var(--rand);width:100%}

/* Fuss: Sprechzeiten untereinander statt zweispaltig */
.fuss .zeiten{grid-template-columns:1fr;gap:0}
.fuss .zeiten dt{margin-top:.5em}
.fuss .zeiten dd{white-space:nowrap}
.fuss .zeiten dt:first-child{margin-top:0}