/* ============================================================
   Hausarztpraxis Dr. Falkner, Designbeispiel von PongauerPixel
   Richtung: warmes Beige und Leinen als Grundfläche, dazu ein
   kühles Schieferblau für Präzision und Ruhe. Kühl, aber einladend.
   Schriften: lokale System-Font-Stacks, kein CDN.
   Kein JavaScript, keine Cookies, keine externen Verbindungen.
   ============================================================ */

/* ---------- Design-Tokens ---------- */
:root{
  --leinen:#f3eee3;        /* warmes Beige, Grundfläche */
  --sand:#eae2d1;          /* tieferes Beige für Wechselflächen */
  --kitt:#ddd4c1;          /* Linien und Rahmen auf Beige */
  --schiefer:#2e4358;      /* kühles Schieferblau */
  --schiefer-tief:#253749;
  --stahl:#5f7a91;         /* kühler Zwischenton */
  --eis:#e2eaf1;           /* kühles Hellblau für Chips und Tags */
  --weiss:#fdfcf8;         /* warmweiße Karten */
  --tinte:#232f3b;         /* kühles, fast blaues Schriftschwarz */
  --grau:#67707a;          /* Nebentext */
  --signal:#a8452f;        /* nur für den Notfall-Hinweis */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

/* ---------- Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--font-sans);
  background:var(--leinen);
  color:var(--tinte);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--schiefer);color:var(--leinen)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--schiefer);outline-offset:3px;border-radius:4px}
img,svg{display:block}
ul{list-style:none}
h1,h2,h3{text-wrap:balance}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--schiefer);color:var(--weiss);
  padding:10px 18px;border-radius:0 0 12px 0;z-index:100;font-size:.9rem;
}
.skip-link:focus{left:0}

.pcontainer{max-width:1080px;margin:0 auto}

/* ---------- Navigation ---------- */
.pnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(243,238,227,.85);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--kitt);
}
.pnav-inner{
  max-width:1080px;margin:0 auto;padding:0 24px;
  height:58px;display:flex;align-items:center;justify-content:space-between;
}
.pmarke{
  font-weight:500;font-size:.95rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:10px;
}
.plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;
  background:var(--schiefer);color:var(--eis);
  font-family:var(--font-mono);font-size:.85rem;font-weight:500;
}
.pnav-links{display:flex;gap:28px;align-items:center}
.pnav-links a{
  font-size:.82rem;color:var(--grau);transition:color .25s ease;
}
.pnav-links a:hover{color:var(--tinte)}
.pnav-cta{
  font-size:.78rem;color:var(--weiss)!important;background:var(--schiefer);
  padding:8px 16px;border-radius:980px;font-weight:500;
  transition:background .25s ease;
}
.pnav-cta:hover{background:var(--schiefer-tief)}
@media (max-width:640px){.pnav-links li.hide-sm{display:none}}

/* ---------- Notfall-Leiste ---------- */
.pnotfall{
  margin-top:58px;
  background:#f1e4d8;
  border-bottom:1px solid #e2d0be;
  padding:10px 24px;
  text-align:center;
}
.pnotfall p{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;
  color:#83543f;
}
.pnotfall strong{font-weight:500;color:var(--signal)}
.pnotfall b{font-weight:500;color:var(--signal)}

/* ---------- Hero mit Zeiten-Karte ---------- */
.phero{padding:clamp(64px,9vh,104px) 24px}
.phero-inner{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
@media (max-width:880px){.phero-inner{grid-template-columns:1fr;gap:48px}}
.peyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stahl);
}
.peyebrow-hell{color:#9db4c6}
.phero h1{
  font-size:clamp(2.4rem,5.4vw,3.7rem);font-weight:500;
  letter-spacing:-.028em;line-height:1.08;
  margin-top:18px;color:var(--schiefer);
}
.phero-sub{margin-top:20px;color:var(--grau);font-size:1.05rem;max-width:480px}
.pchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pchips li{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--schiefer);
  background:var(--eis);
  padding:7px 14px;border-radius:980px;
}

/* Die Karte ist das kühle Herzstück auf der warmen Fläche */
.pzeiten-karte{
  background:var(--weiss);
  border:1px solid var(--kitt);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 52px rgba(46,67,88,.14);
}
.pzk-kopf{
  background:var(--schiefer);color:#eef3f7;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 28px;
}
.pzk-kopf h2{font-size:1.08rem;font-weight:500;letter-spacing:-.01em}
.pzk-tag{
  font-family:var(--font-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:#d7e2ea;background:rgba(226,234,241,.14);
  border:1px solid rgba(226,234,241,.28);
  padding:5px 11px;border-radius:980px;
}
.pzeiten{padding:8px 28px 0}
.pzeiten div{
  display:flex;justify-content:space-between;gap:24px;
  padding:11px 0;border-bottom:1px solid #e8e2d4;
}
.pzeiten div:last-child{border-bottom:none}
.pzeiten dt{font-size:.95rem;font-weight:500}
.pzeiten dd{
  font-family:var(--font-mono);font-size:.86rem;color:var(--stahl);
  text-align:right;line-height:1.7;
}
.pzk-note{margin:8px 28px 0;font-size:.88rem;color:var(--grau)}
.pzk-fuss{
  margin:18px 28px 0;padding:18px 0 24px;border-top:1px solid #e8e2d4;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.pzk-label{
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grau);
}
.pzk-telefon{
  font-family:var(--font-mono);font-size:1.35rem;font-weight:500;
  letter-spacing:.03em;color:var(--schiefer);
}

/* ---------- Abschnitte ---------- */
.psection{padding:clamp(80px,10vh,120px) 24px}
.psection-minze{background:var(--sand)}
.pkopf{max-width:620px;margin:0 auto 52px;text-align:center}
.pkopf h2{
  font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:500;
  letter-spacing:-.025em;margin-top:14px;color:var(--schiefer);
}

/* ---------- Leistungen ---------- */
.pkarten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:880px){.pkarten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pkarten{grid-template-columns:1fr}}
.pkarte{
  background:var(--weiss);border:1px solid #e2dac8;
  border-radius:16px;padding:28px 26px;
}
.pkarte::before{
  content:"";display:block;width:9px;height:9px;
  background:var(--stahl);margin-bottom:16px;
}
.pkarte h3{font-size:1.03rem;font-weight:500;letter-spacing:-.01em}
.pkarte p{margin-top:8px;color:var(--grau);font-size:.9rem}

/* ---------- Team & Gut zu wissen ---------- */
.ppraxis{
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;
}
@media (max-width:840px){.ppraxis{grid-template-columns:1fr;gap:48px}}
.pavatar{
  width:84px;height:84px;border-radius:50%;
  background:var(--schiefer);color:var(--eis);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:500;letter-spacing:.05em;
  margin-bottom:26px;
}
.pteam h2{
  font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:500;
  letter-spacing:-.025em;margin-top:14px;color:var(--schiefer);
}
.pteam p{margin-top:16px;color:var(--grau);font-size:.98rem;max-width:460px}
.pteam-zusatz{
  padding-top:16px;margin-top:20px!important;
  border-top:1px solid var(--kitt);
}
.pgut{
  background:var(--weiss);border:1px solid var(--kitt);
  border-radius:20px;padding:32px 30px;
}
.pgut h3{font-size:1.15rem;font-weight:500;letter-spacing:-.01em;color:var(--schiefer)}
.pgut li{
  display:flex;gap:14px;
  padding:13px 0;border-bottom:1px solid #e8e2d4;
  color:var(--grau);font-size:.93rem;
}
.pgut li:last-child{border-bottom:none;padding-bottom:0}
.pgut li::before{
  content:"";flex:none;width:8px;height:8px;
  background:var(--stahl);margin-top:9px;
}

/* ---------- Kontakt im Schieferblau ---------- */
.pkontakt{
  background:var(--schiefer);color:#f2f0ea;
  padding:clamp(84px,11vh,130px) 24px;
}
.pkontakt-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;
}
@media (max-width:840px){.pkontakt-inner{grid-template-columns:1fr;gap:48px}}
.pkontakt h2{
  font-size:clamp(1.8rem,4vw,2.6rem);font-weight:500;
  letter-spacing:-.025em;margin-top:14px;
}
.pkontakt-sub{margin-top:16px;color:#b7c5d1;font-size:.98rem;max-width:440px}
.pkontakt-telefon{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:.04em;
  margin-top:28px;color:#e9eef3;
}
.pkontakt-adresse{margin-top:22px;color:#b7c5d1;line-height:1.75;font-size:.95rem}
.panfahrt{
  background:rgba(243,238,227,.07);
  border:1px solid rgba(243,238,227,.18);
  border-radius:20px;padding:32px 30px;
}
.panfahrt h3{font-size:1.15rem;font-weight:500;letter-spacing:-.01em}
.panfahrt li{
  display:flex;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(243,238,227,.13);
  color:#b7c5d1;font-size:.93rem;
}
.panfahrt li:last-child{border-bottom:none;padding-bottom:0}
.panfahrt li::before{
  content:"";flex:none;width:8px;height:8px;
  background:#8ca6ba;margin-top:9px;
}

/* ---------- Footer ---------- */
.pfooter{
  background:var(--schiefer-tief);color:#a9bac8;
  border-top:1px solid rgba(243,238,227,.12);
  padding:34px 24px 40px;
}
.pfooter-inner{
  display:flex;flex-wrap:wrap;gap:16px 32px;
  align-items:center;justify-content:space-between;
}
.pfooter-hinweis{font-size:.84rem;max-width:520px}
.pfooter-links{display:flex;flex-wrap:wrap;gap:22px}
.pfooter-links a{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;
  transition:color .25s ease;
}
.pfooter-links a:hover{color:#f2f0ea}

/* ---------- Badge: Designbeispiel ---------- */
.pp-badge{
  position:fixed;right:14px;bottom:14px;z-index:90;
  background:var(--schiefer-tief);color:#c6d4de;
  border:1px solid rgba(226,234,241,.34);
  font-family:var(--font-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border-radius:980px;
  transition:color .25s ease,border-color .25s ease;
}
.pp-badge:hover{color:var(--weiss);border-color:var(--weiss)}

/* ---------- Dunkle Flächen: Fokusfarbe bleibt sichtbar ---------- */
.pkontakt :focus-visible,
.pfooter :focus-visible{outline-color:var(--eis)}

/* ---------- Einstiegsanimation ---------- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .phero-text > *,.pzeiten-karte{
    animation:fadeUp .8s cubic-bezier(.2,.6,.2,1) both;
  }
  .phero-text > *:nth-child(2){animation-delay:.07s}
  .phero-text > *:nth-child(3){animation-delay:.14s}
  .phero-text > *:nth-child(4){animation-delay:.21s}
  .pzeiten-karte{animation-delay:.28s}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width:640px){
  .pnotfall p{font-size:.7rem}
  .pzeiten div{gap:16px}
  .pzk-kopf{padding:15px 22px}
  .pzeiten{padding:6px 22px 0}
  .pzk-note{margin:8px 22px 0}
  .pzk-fuss{margin:16px 22px 0;padding-bottom:22px}
}