/* Gemeinschaftspraxis Dr. Lenz & Dr. Lenz-Muigg - eigenes Design.
   Gedanke aus ihrer eigenen Seite: Yin und Yang - Internist und Allgemeinaerztin als Ganzes.
   Nachtblau + Eisblau (ihr Logo) + Sand. Zeilen-Enthuellung nach ezra.com, eigener Kreis-Effekt.
   Grundzustand = alles sichtbar; Bewegung erst mit html.wow. */

:root{
  --nacht:#0D1726;
  --nacht-2:#14233A;
  --eis:#7CC0F0;
  --eis-hell:#DCEEFB;
  --sand:#EADFCB;
  --sand-2:#F6F0E5;
  --tinte:#0D1726;
  --leise:#8A97A8;
  --blut:#C2384A;
  --serif:"Gloock",Georgia,serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --rand:clamp(20px,4.6vw,96px);
  --kurve:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--nacht);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--sand-2);font:300 clamp(16px,.55vw + 9px,21px)/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.sprung{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;background:#fff;color:#000;border-radius:8px}
.sprung:focus{left:8px}
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--eis);outline-offset:3px}
em{font-style:normal;color:var(--eis)}
.mono{font:400 clamp(11px,.62vw,13px)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
h2{font:400 clamp(42px,5.4vw,120px)/1 var(--serif);letter-spacing:-.01em}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:clamp(46px,3vw,58px);padding:0 clamp(20px,1.5vw,30px);border:0;border-radius:999px;background:var(--eis);color:var(--nacht);font:500 clamp(14px,.8vw,16px) var(--sans);white-space:nowrap;transition:transform .3s var(--kurve),background-color .3s}
.knopf:hover{background:#9ED2F6}
.knopf--rand{background:transparent;color:var(--sand-2);box-shadow:inset 0 0 0 1px rgba(234,223,203,.3)}
.knopf--rand:hover{background:rgba(234,223,203,.08)}
.pille{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--eis);color:var(--nacht);font:500 13px var(--sans)}

/* Kopf */
.kopf{position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;gap:clamp(18px,2vw,40px);padding:16px var(--rand);background:linear-gradient(rgba(13,23,38,.75),rgba(13,23,38,0));backdrop-filter:blur(2px)}
.kopf__marke{display:flex;align-items:center;gap:12px;margin-right:auto;font:400 clamp(17px,1.1vw,22px) var(--serif)}
.kopf__marke i{font-style:normal;color:var(--eis)}
.kopf__zeichen{width:34px;height:34px;fill:none;stroke:var(--eis);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kopf__links{display:flex;gap:26px;font-size:14px;opacity:.85}
.kopf__links a:hover{color:var(--eis)}

/* I Held: zwei Haelften -> ein Kreis */
.held{position:relative}
.held__buehne{position:relative;height:100svh;min-height:620px;overflow:hidden;display:grid;place-items:center}
.ganzes{position:absolute;left:50%;top:50%;width:100vw;height:100svh;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;will-change:width,height,border-radius,transform}
.haelfte{position:relative;overflow:hidden}
.haelfte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.haelfte--innen img{filter:saturate(.9)}
.haelfte::after{content:"";position:absolute;inset:0}
.haelfte--innen::after{background:linear-gradient(180deg,rgba(13,23,38,.15),rgba(13,23,38,.7)),linear-gradient(90deg,rgba(40,90,150,.25),transparent)}
.haelfte--aussen::after{background:linear-gradient(180deg,rgba(13,23,38,.1),rgba(13,23,38,.65)),linear-gradient(270deg,rgba(234,223,203,.18),transparent)}
.haelfte figcaption{position:absolute;z-index:2;bottom:clamp(30px,7vh,70px);display:flex;flex-direction:column;gap:8px}
.haelfte--innen figcaption{left:var(--rand)}
.haelfte--aussen figcaption{right:var(--rand);text-align:right}
.haelfte figcaption .mono{color:var(--eis-hell)}
.haelfte figcaption b{font:400 clamp(30px,3vw,64px)/1 var(--serif)}
.held__text{position:relative;z-index:3;text-align:center;pointer-events:none}
.held__text .mono{color:var(--eis-hell);margin-bottom:18px}
.held h1{font:400 clamp(56px,8.6vw,200px)/.92 var(--serif);letter-spacing:-.015em;text-shadow:0 10px 60px rgba(13,23,38,.5)}
.held h1 span{display:block;overflow:hidden}
.held__hinweis{position:absolute;bottom:22px;left:0;right:0;text-align:center}
html.wow .held{height:300vh}
html.wow .held__buehne{position:sticky;top:0}

/* II Gedanke */
.gedanke{padding:clamp(110px,18vh,220px) var(--rand);max-width:min(1700px,94vw);margin:0 auto}
.gedanke__satz{font:400 clamp(32px,3.8vw,88px)/1.1 var(--serif);letter-spacing:-.01em}
.gedanke__satz span{color:var(--leise)}

/* III Aerzte */
.aerzte{padding:0 var(--rand) clamp(110px,16vh,200px);max-width:min(1800px,96vw);margin:0 auto}
.aerzte__foto{border-radius:28px;overflow:hidden;aspect-ratio:21/9;margin-bottom:clamp(16px,1.6vw,30px)}
.aerzte__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.aerzte__paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,30px)}
.arzt{padding:clamp(30px,3.4vw,70px);border-radius:28px}
.arzt--dunkel{background:var(--nacht-2);box-shadow:inset 0 0 0 1px rgba(124,192,240,.2)}
.arzt--hell{background:var(--sand);color:var(--tinte)}
.arzt--hell .mono{color:#7A6C55}
.arzt h3{font:400 clamp(34px,3vw,72px)/1 var(--serif);margin:16px 0 18px}
.arzt p{max-width:44ch}
.arzt--dunkel p:not(.mono){color:#B9C4D2}
.arzt ul{margin-top:26px;display:grid;gap:10px}
.arzt li{display:flex;gap:12px;align-items:baseline}
.arzt li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--eis);transform:translateY(-2px)}
.arzt--hell li::before{background:var(--tinte)}

/* IV Eisen */
.eisen{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,100px);align-items:center;padding:clamp(110px,16vh,200px) var(--rand);background:#0A111D;overflow:hidden}
.eisen__punkte{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.eisen__inhalt,.eisen__bild{position:relative;z-index:1}
.eisen h2{margin:18px 0 26px;max-width:12ch}
.eisen h2 em{color:#F08A97}
.eisen__text{max-width:44ch;color:#B9C4D2}
.ferritin{margin-top:clamp(30px,5vh,56px);padding:clamp(22px,2vw,36px);border-radius:22px;background:rgba(20,35,58,.7);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(124,192,240,.18);max-width:520px}
.ferritin__wert{margin:10px 0 18px;display:flex;align-items:baseline;gap:10px}
.ferritin__wert b{font:400 clamp(56px,5vw,110px)/1 var(--serif);font-variant-numeric:tabular-nums}
.ferritin__skala{position:relative;height:10px;border-radius:10px;background:linear-gradient(90deg,#C2384A 0 20%,#3A4B66 20% 100%)}
.ferritin__norm{position:absolute;left:30%;right:15%;top:0;bottom:0;border-radius:10px;background:rgba(124,192,240,.55)}
.ferritin__zeiger{position:absolute;top:50%;left:8%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18)}
.ferritin__lage{margin-top:14px}
.eisen__bild{border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-height:80svh}
.eisen__bild img{width:100%;height:100%;object-fit:cover}

/* V Leistungen */
.leistungen{padding:clamp(110px,16vh,200px) var(--rand);max-width:min(1800px,96vw);margin:0 auto}
.leistungen h2{margin-bottom:clamp(40px,6vh,80px)}
.leistungen__raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,30px);align-items:start}
.leistungen details{border-top:1px solid rgba(234,223,203,.2);padding-top:10px}
.leistungen summary{display:flex;align-items:center;gap:18px;cursor:pointer;list-style:none;font:400 clamp(28px,2.4vw,52px)/1.1 var(--serif);padding:14px 0}
.leistungen summary::-webkit-details-marker{display:none}
.leistungen summary i{margin-left:auto;width:22px;height:22px;position:relative;flex:none}
.leistungen summary i::before,.leistungen summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--eis);transition:transform .4s var(--kurve)}
.leistungen summary i::after{transform:rotate(90deg)}
.leistungen details[open] summary i::after{transform:rotate(0)}
.leistungen li{padding:12px 0;border-bottom:1px solid rgba(234,223,203,.1);color:#C9D1DC}

/* VI Anliegen */
.anliegen{padding:clamp(110px,16vh,200px) var(--rand);background:var(--sand-2);color:var(--tinte);text-align:center}
.anliegen h2 em{color:#2A6FA8}
.anliegen__kreis{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1vw,18px);max-width:1200px;margin:clamp(40px,6vh,70px) auto 0}
.anliegen__kreis button,.anliegen__kreis a{min-height:clamp(64px,5vw,96px);padding:0 clamp(26px,2.4vw,48px);border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #DCD2C0;font:400 clamp(22px,1.8vw,38px)/1 var(--serif);display:inline-flex;align-items:center;transition:transform .5s var(--kurve),background-color .3s,color .3s}
.anliegen__kreis button:hover,.anliegen__kreis a:hover{transform:translateY(-4px);background:var(--nacht);color:var(--sand-2)}
.anliegen__kreis a{background:var(--eis)}

/* VII Zeiten */
.zeiten{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,120px);align-items:center;padding:clamp(110px,16vh,200px) var(--rand);max-width:min(1800px,96vw);margin:0 auto}
.zeiten h2{margin-bottom:24px}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--nacht-2);font-size:14px;box-shadow:inset 0 0 0 1px rgba(124,192,240,.2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leise)}
.status[data-offen="ja"]::before{background:#6FD19A;box-shadow:0 0 0 4px rgba(111,209,154,.2)}
.zeiten__hinweis{color:var(--leise);margin:18px 0}
.zeiten address{font:400 clamp(24px,1.8vw,36px)/1.2 var(--serif);font-style:normal;margin-bottom:22px}
.zeiten__knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.tage li{display:grid;grid-template-columns:minmax(120px,.5fr) 1.4fr minmax(110px,.5fr);align-items:center;gap:20px;padding:clamp(16px,2vh,24px) 0;border-bottom:1px solid rgba(234,223,203,.12)}
.tage b{font:400 clamp(22px,1.6vw,34px)/1 var(--serif)}
.tage span:last-child{color:var(--leise);text-align:right;font-variant-numeric:tabular-nums}
.tage__linie{position:relative;height:4px;border-radius:4px;background:rgba(234,223,203,.1)}
.tage__linie::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc((var(--bis) - 7) / 10 * 100%);border-radius:4px;background:var(--eis);transform-origin:0 50%;transform:scaleX(var(--s,1));transition:transform 1.2s var(--kurve)}
.tage li[data-heute="ja"] b{color:var(--eis)}
.tage li[data-heute="ja"] .tage__linie::after{box-shadow:0 0 18px var(--eis)}

/* Fuss */
.fuss{padding:clamp(80px,12vh,150px) var(--rand) 30px;background:#0A111D;text-align:center}
.fuss__zeichen{width:clamp(60px,6vw,120px);height:auto;fill:none;stroke:var(--eis);stroke-width:1.2;margin:0 auto 24px}
.fuss__satz{font:400 clamp(44px,6vw,150px)/1 var(--serif)}
.fuss__zeile{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,8vh,100px);padding-top:20px;border-top:1px solid rgba(234,223,203,.12);font-size:13px;color:var(--leise);text-align:left}
.fuss__zeile a:hover{color:var(--eis)}

/* Zeilen-Enthuellung */
html.wow [data-zeilen] .zl{display:block;overflow:hidden}
html.wow [data-zeilen] .zl > span{display:inline-block}
html.wow [data-auf]{opacity:0;transform:translateY(40px)}

/* Chat */
[data-bot]{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
.bot__auf{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border:0;border-radius:999px;background:var(--eis);color:var(--nacht);font:500 14px var(--sans);box-shadow:0 14px 40px rgba(0,0,0,.35);transition:opacity .4s,transform .4s var(--kurve)}
.bot__auf i{position:relative;width:12px;height:12px}
.bot__auf i::before,.bot__auf i::after{content:"";position:absolute;background:var(--nacht);left:50%;top:50%;transform:translate(-50%,-50%)}
.bot__auf i::before{width:12px;height:2px}.bot__auf i::after{width:2px;height:12px}
html.im-held .bot__auf{opacity:0;transform:translateY(120%);pointer-events:none}
[data-bot][data-offen="ja"] .bot__auf{display:none}
.bot__fenster{position:absolute;right:0;bottom:0;width:min(400px,calc(100vw - 36px));height:min(620px,calc(100svh - 36px));display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--nacht-2);color:var(--sand-2);box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 0 0 1px rgba(124,192,240,.2)}
.bot__fenster[hidden]{display:none!important}
.bot__kopf{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(124,192,240,.15)}
.bot__wer{display:flex;flex-direction:column;gap:3px}
.bot__wer b{font:400 22px/1 var(--serif)}
.bot__wer small{font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}
.bot__zu{width:34px;height:34px;border-radius:50%;border:0;background:rgba(124,192,240,.12);color:var(--sand-2);font-size:20px;line-height:1}
.bot__lauf{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:8px}
.bot__blase{max-width:84%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45}
.bot__blase--bot{align-self:flex-start;background:#1C2F4C;border-bottom-left-radius:5px}
.bot__blase--ich{align-self:flex-end;background:var(--eis);color:var(--nacht);border-bottom-right-radius:5px}
.bot__blase a{color:inherit}
.bot__blase small{display:block;margin-top:8px;color:var(--leise)}
.bot__zettel{display:block;margin:8px 0 4px;padding:12px 14px;border-radius:12px;background:var(--nacht);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:6px;height:6px;border-radius:50%;background:var(--leise);animation:tippen 1s infinite ease-in-out}
.bot__punkte i:nth-child(2){animation-delay:.15s}.bot__punkte i:nth-child(3){animation-delay:.3s}
@keyframes tippen{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.bot__chips{display:flex;flex-wrap:wrap;gap:8px}
.bot__chips button{padding:9px 14px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1px rgba(124,192,240,.35);color:var(--sand-2);font:400 14px var(--sans)}
.bot__chips button:hover{background:rgba(124,192,240,.12)}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(124,192,240,.15)}
.bot__eingabe{flex:1;min-width:0;height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(124,192,240,.25);background:var(--nacht);color:var(--sand-2);font:300 16px var(--sans)}
.bot__senden{width:42px;height:42px;border-radius:50%;border:0;background:var(--eis);color:var(--nacht);font-size:18px}
.bot__hinweis{margin:0;padding:0 16px 12px;font-size:12px;color:var(--leise)}

/* Handy: dieselbe Seite, umgebrochen */
@media (max-width:860px){
  .kopf__links{display:none}
  .kopf__marke span{font-size:15px}
  .haelfte figcaption b{font-size:17px;line-height:1.15;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .haelfte figcaption .mono{font-size:9px}
  .held h1{font-size:clamp(46px,14vw,70px)}
  .aerzte__foto{aspect-ratio:4/3}
  .aerzte__paar,.eisen,.leistungen__raster,.zeiten{grid-template-columns:1fr}
  .eisen__bild{aspect-ratio:4/3}
  .tage li{grid-template-columns:110px 1fr;gap:12px}
  .tage span:last-child{grid-column:2;text-align:left;margin-top:-8px}
  .bot__fenster{position:fixed;inset:0;width:100%;height:100dvh;border-radius:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}