@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:500 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --wand:#F6EEDF;
  --wand-2:#EDE0C6;
  --ocker:#E2A63B;
  --ocker-hell:#EFCB80;
  --oliv:#4B5A2A;
  --terra:#A8431A;
  --tinte:#2B2118;
  --linie:#2b211826;
  --kopf:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Instrument Sans",system-ui,sans-serif;
  --rand:clamp(1.25rem,5vw,4rem);
  --max:78rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--wand);color:var(--tinte);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--kopf);margin:0;line-height:1.05;letter-spacing:-.01em}
p{margin:0 0 1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px}

#entwurf{background:var(--tinte);color:var(--wand);font-size:.8125rem;line-height:1.4;padding:.5rem var(--rand);text-align:center}
#entwurf a{color:var(--ocker-hell);margin-left:.5rem;white-space:nowrap}

.urlaub{background:var(--ocker);padding:.9rem var(--rand);display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:baseline}
.urlaub h2{font-size:1rem;font-weight:700}
.urlaub p{margin:0;font-size:.95rem;flex:1 1 22rem}
.urlaub a{font-weight:600}

.kopf{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem var(--rand);background:var(--wand);border-bottom:2px solid var(--tinte)}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;min-width:0}
.logo-zeichen{flex:none;width:2.1rem;height:2.1rem;background:var(--terra);clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%)}
.logo-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.logo-text span{font-size:.75rem;font-weight:500}
.logo-text strong{font-family:var(--kopf);font-size:1.0625rem;font-weight:750}
.anruf{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;background:var(--tinte);color:var(--wand);padding:.45rem .9rem;transition:background .2s}
.anruf:hover{background:var(--terra)}
.anruf-label{font-size:.7rem;line-height:1.1}
.anruf-nummer{font-family:var(--kopf);font-weight:700;font-size:1.0625rem;line-height:1.2;white-space:nowrap}

/* Erster Bildschirm */
.hero{display:grid;gap:2rem;padding:clamp(2rem,6vw,4.5rem) var(--rand);align-items:center}
.hero h1{font-size:clamp(2.5rem,9vw,5.6rem);font-weight:750;font-variation-settings:"wdth" 90;margin-bottom:1.25rem;text-wrap:balance}
.hero h1 .w{display:inline-block;white-space:nowrap}
.lead{font-size:1.1875rem;max-width:34rem}

.wegweiser{position:relative;padding:1.75rem 1rem;background:var(--ocker-hell) url(bilder/flur.webp) center/cover no-repeat;isolation:isolate;overflow:hidden}
.wegweiser::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:46%;width:1.1rem;background:var(--tinte)}
.wegweiser ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.wegweiser li{width:84%}
.wegweiser li:nth-child(even){margin-left:auto}
.schild{display:flex;flex-direction:column;gap:.1rem;padding:.8rem 2.6rem .8rem 1.1rem;text-decoration:none;clip-path:polygon(0 0,calc(100% - 1.5rem) 0,100% 50%,calc(100% - 1.5rem) 100%,0 100%);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.wegweiser li:nth-child(even) .schild{padding:.8rem 1.1rem .8rem 2.6rem;clip-path:polygon(1.5rem 0,100% 0,100% 100%,1.5rem 100%,0 50%);text-align:right;align-items:flex-end}
.schild-titel{font-family:var(--kopf);font-weight:700;font-size:1.25rem;line-height:1.1}
.schild-sub{font-size:.85rem;line-height:1.3}
.s-akut{background:var(--terra);color:var(--wand)}
.s-termin{background:var(--ocker);color:var(--tinte)}
.s-rezept{background:var(--oliv);color:var(--wand)}
.s-neu{background:var(--wand);color:var(--tinte)}
.s-impfen{background:var(--tinte);color:var(--wand)}
.schild:hover{transform:translateX(.4rem)}
.wegweiser li:nth-child(even) .schild:hover{transform:translateX(-.4rem)}
.schild:focus-visible{outline:none;box-shadow:inset 0 0 0 4px var(--wand),inset 0 0 0 7px var(--tinte)}
.s-neu:focus-visible{box-shadow:inset 0 0 0 4px var(--terra)}

/* Abschnitte je Anliegen */
.anliegen{display:grid;gap:1rem;padding:clamp(2.5rem,7vw,5rem) var(--rand);border-top:2px solid var(--tinte)}
.spalte-kopf{display:flex;align-items:center;gap:.9rem}
.pfeil{flex:none;width:2.4rem;height:2.4rem;background:var(--terra);clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%)}
#termin .pfeil{background:var(--ocker)}
#rezept .pfeil{background:var(--oliv)}
#neu .pfeil{background:var(--tinte)}
#impfen .pfeil{background:var(--ocker)}
.akut .pfeil{background:var(--wand)}
.anliegen h2{font-size:clamp(2rem,6vw,3.4rem);font-weight:750}
.gross{font-family:var(--kopf);font-size:clamp(1.35rem,3.2vw,2.1rem);line-height:1.2;font-weight:600;max-width:36rem;margin-bottom:1.25rem}
.anliegen h3{font-size:1.2rem;margin:1.5rem 0 .5rem}
.akut{background:var(--terra);color:var(--wand);border-top:0}
.akut :focus-visible{outline-color:var(--wand)}

.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem}
.knopf{display:inline-block;padding:.8rem 1.4rem;background:var(--tinte);color:var(--wand);font-weight:600;text-decoration:none;border:2px solid var(--tinte);transition:background .2s,color .2s}
.knopf:hover{background:var(--terra);border-color:var(--terra)}
.knopf.zweit{background:transparent;color:var(--tinte)}
.knopf.zweit:hover{background:var(--tinte);color:var(--wand);border-color:var(--tinte)}

.schritte{list-style:none;margin:0;padding:0;display:grid;counter-reset:s;max-width:40rem}
.schritte li{display:grid;gap:.15rem;padding:1rem 0 1rem 3.2rem;border-top:1px solid var(--linie);position:relative;counter-increment:s}
.schritte li::before{content:counter(s);position:absolute;left:0;top:.85rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;background:var(--oliv);color:var(--wand);font-family:var(--kopf);font-weight:700;border-radius:50%}
.schritte strong{font-family:var(--kopf);font-size:1.15rem}
.schritte span{overflow-wrap:anywhere}

.mitbringen{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;max-width:36rem}
.mitbringen li{padding:.7rem 1rem .7rem 2.4rem;background:var(--wand-2);position:relative}
.mitbringen li::before{content:"";position:absolute;left:1rem;top:50%;width:.6rem;height:.6rem;margin-top:-.3rem;background:var(--terra);clip-path:polygon(0 0,100% 50%,0 100%)}

.zwei{display:grid;gap:1.25rem}
.zwei h3{margin-top:0}

/* Blöcke */
.block{padding:clamp(2.5rem,7vw,5rem) var(--rand);border-top:2px solid var(--tinte)}
.block > *{max-width:var(--max)}
.block h2{font-size:clamp(2rem,6vw,3.4rem);font-weight:750;margin-bottom:1.5rem}
.leistungen{list-style:none;margin:0 0 1.5rem;padding:0;display:grid}
.leistungen li{padding:1.1rem 0;border-top:1px solid var(--linie)}
.leistungen h3{font-size:1.5rem;font-weight:700}
.leistungen p{margin:.35rem 0 0;max-width:34rem}
details{border-top:1px solid var(--linie);padding-top:.5rem}
summary{cursor:pointer;font-weight:600;padding:.6rem 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:1.5rem;font-family:var(--kopf);font-weight:700;color:var(--terra)}
details[open] summary::before{content:"\2212"}
.weitere{margin:.25rem 0 0 1.5rem;padding:0;list-style:none}
.weitere li{padding:.3rem 0}
.aerztinnen h3{font-size:1.6rem;margin-bottom:.35rem}

.zeiten{border-collapse:collapse;width:100%;max-width:40rem}
.zeiten th,.zeiten td{text-align:left;padding:.8rem .5rem;border-top:1px solid var(--linie);font-weight:400}
.zeiten thead th{font-size:.85rem;font-weight:600;border-top:0;padding-top:0}
.zeiten tbody th{font-family:var(--kopf);font-weight:700;font-size:1.1rem}
.zeiten td.leer{color:#2b2118a6}
.hinweis{margin-top:1rem}

.anfahrt{display:grid;gap:2rem;align-items:center}
.anfahrt h2{margin-bottom:1.25rem}
address{font-style:normal;font-family:var(--kopf);font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:1rem}
.anfahrt-bild{width:100%;aspect-ratio:800/520;object-fit:cover;border:2px solid var(--tinte)}

.kontakt{background:var(--oliv);color:var(--wand);padding:clamp(3rem,8vw,6rem) var(--rand)}
.kontakt h2{font-size:clamp(2rem,6vw,3.4rem);font-weight:750;margin-bottom:1.5rem}
.kontakt-zeilen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.gross-knopf{background:var(--wand);color:var(--tinte);border-color:var(--wand);font-family:var(--kopf);font-weight:750;font-size:clamp(1.5rem,5vw,2.4rem);padding:.7rem 1.5rem}
.gross-knopf:hover{background:var(--ocker);border-color:var(--ocker);color:var(--tinte)}
.kontakt :focus-visible{outline-color:var(--wand)}
.mail{overflow-wrap:anywhere}

.fuss{background:var(--tinte);color:var(--wand);padding:2rem var(--rand);font-size:.9rem}
.fuss p{margin:0 0 .6rem}
.fuss a{color:var(--ocker-hell)}
.fuss-links a{margin-right:1.25rem}
.nachweis{opacity:.85}

@media (min-width:56rem){
  .hero{grid-template-columns:1.05fr 1fr;gap:3.5rem}
  .wegweiser{padding:2.5rem 1.5rem}
  .wegweiser::before{left:48%}
  .schild-titel{font-size:1.45rem}
  .anliegen{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:3rem;align-items:start}
  .zwei{grid-template-columns:1fr 1fr;gap:3rem;max-width:44rem}
  .leistungen{grid-template-columns:1fr 1fr;column-gap:3rem}
  .anfahrt{grid-template-columns:1fr 1.2fr;gap:4rem}
  .urlaub{justify-content:center}
}
@media (max-width:55.99rem){
  .hero{gap:1.25rem;padding-top:1.5rem}
  .hero-text{display:contents}
  .hero h1{margin-bottom:0;font-size:clamp(2.3rem,10vw,3.2rem)}
  .lead{order:3;margin:0}
  .wegweiser{order:2}
}
@media (max-width:30rem){
  .urlaub p{font-size:.85rem;line-height:1.45}
  .logo-text span{display:none}
  .anruf-label{display:none}
  .wegweiser li{width:92%}
  .schild-titel{font-size:1.125rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}