/* Dr. Stephan Wille-Angerer - Glassmorphism. Salbei aus seiner Praxis, Milchglas, eine Roentgen-Linse. */
:root{
  --grund:#E7EEE6;--tinte:#17221C;--leise:#5F6E66;--salbei:#7E9E86;--salbei-2:#4E7A5C;--mint:#BFE3D2;--roentgen:#7FE0FF;
  --glas:rgba(255,255,255,.42);--glas-rand:rgba(255,255,255,.7);
  --sans:'Inter',system-ui,sans-serif;--titel:'Sora',system-ui,sans-serif;
  --rand:clamp(16px,3vw,60px);--rund:clamp(18px,1.6vw,30px);--kurve:cubic-bezier(.2,.7,.1,1)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--grund);color:var(--tinte);font:400 clamp(15px,.45vw + 9px,19px)/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--titel);font-weight:600;letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(40px,4.6vw,104px);margin-bottom:clamp(30px,5vh,60px)}
em{font-style:normal;font-weight:300;color:var(--salbei-2)}
.mini{display:flex;align-items:center;gap:10px;font:500 12px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--leise);margin-bottom:14px}
.punkt{width:8px;height:8px;border-radius:50%;background:var(--roentgen);box-shadow:0 0 12px var(--roentgen)}
.sprung{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;background:#fff;border-radius:8px}
.sprung:focus{left:8px}
html.js.wow [data-auf]{opacity:0;transform:translateY(40px)}

/* Glas */
.glas{background:var(--glas);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--glas-rand);box-shadow:0 20px 50px -20px rgba(30,60,45,.35),inset 0 1px 0 rgba(255,255,255,.8);border-radius:var(--rund)}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:treiben 22s ease-in-out infinite}
.blobs i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:10vh;background:#A9C8AE}
.blobs i:nth-child(2){width:38vw;height:38vw;right:-8vw;top:40vh;background:#BFE3D2;animation-delay:-7s}
.blobs i:nth-child(3){width:30vw;height:30vw;left:30vw;bottom:-10vh;background:#CFE7F3;animation-delay:-14s}
@keyframes treiben{50%{transform:translate(6vw,-5vh) scale(1.1)}}

.knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.knopf{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;border:0;background:var(--tinte);color:#fff;font:500 15px var(--sans);text-decoration:none;transition:transform .3s var(--kurve),background .3s}
.knopf:hover{transform:translateY(-2px);background:var(--salbei-2)}
.knopf--glas{background:rgba(255,255,255,.5);color:var(--tinte);border:1px solid var(--glas-rand);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.knopf--glas:hover{background:#fff}
.pille{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:var(--tinte);color:#fff;font:500 14px var(--sans);white-space:nowrap}

/* Kopf */
.kopf{position:fixed;z-index:50;left:var(--rand);right:var(--rand);top:14px;display:flex;align-items:center;gap:clamp(16px,2vw,36px);padding:8px 8px 8px 16px;border-radius:999px}
.kopf__marke{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.kopf__marke svg{width:22px;height:22px;fill:var(--salbei-2)}
.kopf__marke span{font:600 17px/1 var(--titel);letter-spacing:-.03em}
.kopf__links{display:flex;gap:4px}
.kopf__links a{text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:999px;color:var(--leise)}
.kopf__links a:hover{background:rgba(255,255,255,.6);color:var(--tinte)}

/* I  Held: Roentgen-Linse */
.held{position:relative}
html.wow .held{height:200svh}
.held__buehne{position:relative;height:100svh;min-height:560px;overflow:hidden;cursor:none}
html.wow .held__buehne{position:sticky;top:0}
.bild{position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9;transform:translate(-50%,-50%)}
.bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bild__roentgen{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:radial-gradient(circle at -50% -50%,#000 0,transparent 1px);mask-image:radial-gradient(circle at -50% -50%,#000 0,transparent 1px)}
.linse{--r:120px;position:absolute;left:0;top:0;width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);border-radius:50%;pointer-events:none;z-index:3;
  border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 0 6px rgba(255,255,255,.18),0 0 40px rgba(127,224,255,.45),inset 0 0 30px rgba(127,224,255,.35);will-change:transform}
.linse::before,.linse::after{content:"";position:absolute;background:rgba(127,224,255,.7)}
.linse::before{left:50%;top:-14px;bottom:-14px;width:1px}
.linse::after{top:50%;left:-14px;right:-14px;height:1px}
.linse__label{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);padding:6px 12px;border-radius:999px;background:rgba(10,24,30,.55);color:#DDF7FF;font:500 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:not(.wow) .linse{display:none}
html:not(.wow) .held__buehne{cursor:auto}
.held__karte{position:absolute;left:var(--rand);bottom:clamp(20px,5vh,56px);z-index:4;max-width:min(560px,90vw);padding:clamp(22px,2.2vw,40px);cursor:auto}
.held h1{font-size:clamp(36px,3.6vw,76px);margin-bottom:24px}
.held__hinweis{position:absolute;right:var(--rand);bottom:clamp(20px,5vh,56px);z-index:4;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:500}

/* II  Faecher */
.faecher{padding:clamp(100px,14vh,170px) var(--rand) 0}
.faecher__raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,26px)}
.fach{padding:clamp(24px,2.6vw,52px)}
.fach h3{font-size:clamp(28px,2.6vw,56px);margin-bottom:22px}
.fach ul{list-style:none;columns:2;column-gap:24px}
.fach li{padding:10px 0;border-bottom:1px solid rgba(23,34,28,.1);break-inside:avoid;font-weight:500}
.fach--ortho{background:linear-gradient(150deg,rgba(127,224,255,.28),rgba(255,255,255,.4))}

/* III  Praxis */
.praxis{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,4vw,80px);align-items:center;padding:clamp(100px,14vh,170px) var(--rand) 0}
.praxis__bild{position:relative;border-radius:var(--rund);overflow:hidden;aspect-ratio:16/10}
.praxis__bild img{width:100%;height:100%;object-fit:cover}
.praxis__schild{position:absolute;left:18px;bottom:18px;padding:14px 18px;font-size:14px}
.praxis__schild b{display:block;font:600 20px/1.1 var(--titel)}
.praxis__text > p:not(.mini){color:var(--leise);max-width:42ch;margin-bottom:24px}
.hinweise{list-style:none;display:grid;gap:10px}
.hinweise li{padding:14px 18px;font-size:15px;color:var(--leise)}
.hinweise b{display:block;color:var(--tinte);font-weight:600}
.praxis__zwei{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,26px)}
.praxis__zwei figure{border-radius:var(--rund);overflow:hidden;aspect-ratio:16/11}
.praxis__zwei img{width:100%;height:100%;object-fit:cover}

/* IV  Team */
.team{padding:clamp(100px,14vh,170px) var(--rand) 0}
.leute{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.4vw,26px)}
.leute figure{padding:12px;overflow:hidden}
.leute img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--rund) - 8px)}
.leute figcaption{padding:16px 8px 8px;font-size:14px;color:var(--leise)}
.leute b{display:block;color:var(--tinte);font:600 clamp(17px,1.2vw,22px)/1.2 var(--titel);margin-bottom:4px}

/* V  Zeiten */
.zeiten{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(14px,1.4vw,26px);padding:clamp(100px,14vh,170px) var(--rand)}
.zeiten__karte{padding:clamp(24px,2.6vw,52px)}
.zeiten h2{margin-bottom:18px}
.status{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-weight:600}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--leise)}
.status[data-offen="ja"]::before{background:#2FA35B;box-shadow:0 0 0 6px rgba(47,163,91,.18)}
.woche{list-style:none}
.woche li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid rgba(23,34,28,.1)}
.woche b{font:600 clamp(18px,1.3vw,24px)/1.2 var(--titel)}
.woche span{text-align:right}
.woche i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;margin-left:8px;border-radius:999px;background:var(--tinte);color:var(--roentgen)}
.woche li.zu{color:var(--leise)}
.woche li[data-heute="ja"] b{color:var(--salbei-2)}
.zeiten__seite{display:grid;gap:clamp(14px,1.4vw,26px)}
.zeiten__box{padding:clamp(22px,2.2vw,40px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:11px 18px;border-radius:999px;border:1px solid var(--glas-rand);background:rgba(255,255,255,.55);font:500 15px var(--sans);transition:background .3s,color .3s}
.chips button:hover{background:var(--tinte);color:#fff}
.adresse{font:600 clamp(26px,2.2vw,46px)/1.05 var(--titel);letter-spacing:-.03em;margin-bottom:20px}

/* Fuss */
.fuss{margin:0 var(--rand) var(--rand);padding:clamp(60px,10vh,120px) clamp(24px,4vw,70px) 24px;border-radius:var(--rund);background:linear-gradient(160deg,#0E1B1F,#16302A);color:#fff;overflow:hidden}
.fuss em{color:var(--roentgen)}
.fuss__satz{font:600 clamp(42px,6.6vw,150px)/.95 var(--titel);letter-spacing:-.045em;margin-bottom:clamp(50px,9vh,110px)}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.15);padding-top:20px}

/* 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:50px;padding:0 20px 0 16px;border:1px solid var(--glas-rand);border-radius:999px;background:rgba(23,34,28,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:500 14px var(--sans);box-shadow:0 14px 40px rgba(23,34,28,.3);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(--roentgen);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:rgba(240,246,240,.86);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--glas-rand);box-shadow:0 30px 90px rgba(23,34,28,.3)}
.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(23,34,28,.08)}
.bot__wer{display:flex;flex-direction:column;gap:3px}
.bot__wer b{font:600 18px/1 var(--titel)}
.bot__wer small{font-size:12px;color:var(--leise)}
.bot__zu{width:34px;height:34px;border-radius:50%;border:0;background:#fff;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:rgba(255,255,255,.85);border-bottom-left-radius:5px}
.bot__blase--ich{align-self:flex-end;background:var(--tinte);color:#fff;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:rgba(191,227,210,.6);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:6px;height:6px;border-radius:50%;background:var(--salbei-2);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:1px solid var(--glas-rand);background:rgba(255,255,255,.7);font:500 14px var(--sans)}
.bot__chips button:hover{background:var(--tinte);color:#fff}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(23,34,28,.08)}
.bot__eingabe{flex:1;min-width:0;height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(23,34,28,.12);background:#fff;font:400 16px var(--sans)}
.bot__senden{width:42px;height:42px;border-radius:50%;border:0;background:var(--tinte);color:var(--roentgen);font-size:18px}
.bot__hinweis{margin:0;padding:0 16px 12px;font-size:12px;color:var(--leise)}

/* Unterseiten */
body > main:not(#inhalt){max-width:760px;margin:0 auto;padding:140px var(--rand) 80px}
body > main:not(#inhalt) h1{font-size:clamp(44px,6vw,90px);margin-bottom:30px}
body > main:not(#inhalt) h2{font-size:28px;margin:30px 0 8px}
body > main:not(#inhalt) p{margin-bottom:14px}

@media (max-width:860px){
  .kopf{left:10px;right:10px;top:10px}
  .kopf__links{display:none}
  .kopf__marke span{font-size:15px}
  .pille{font-size:13px;padding:0 14px}
  html.wow .held{height:260svh}
  .held__buehne{cursor:auto}
  .linse{--r:62px}
  .bild{width:200vw;top:40%}
  .held__karte{left:10px;right:10px;bottom:14px;max-width:none;padding:20px}
  .held h1{font-size:clamp(30px,8.4vw,44px);margin-bottom:16px}
  .held__hinweis{display:none}
  .faecher__raster,.praxis,.praxis__zwei,.leute,.zeiten{grid-template-columns:1fr}
  .fach ul{columns:1}
  .woche li{flex-direction:column;gap:2px}
  .woche span{text-align:left}
  .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}}