/* Dr. Juergen Spiegel - Ethereal. Perlmutt, Stahl, ein Himmel im Spiegelglas. Der Name spiegelt sich wie auf Wasser. */
:root{
  --perle:#F7F5F2;--weiss:#FFFFFF;--tinte:#22232A;--leise:#6D6F78;--stahl:#9AA0A8;--linie:rgba(34,35,42,.12);
  --minze:#CFEDE6;--flieder:#DCD3F2;--pfirsich:#F6DCCB;--himmel:#D6E6F7;
  --irisierend:linear-gradient(120deg,var(--minze),var(--himmel) 35%,var(--flieder) 65%,var(--pfirsich));
  --serif:'Bodoni Moda',Didot,Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
  --rand:clamp(18px,4vw,72px);--rund:clamp(20px,2vw,32px);--kurve:cubic-bezier(.2,.7,.1,1)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--perle);color:var(--tinte);font:400 clamp(16px,.35vw + 12px,19px)/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.04;font-optical-sizing:none;font-variation-settings:'opsz' 14}
.liste b,.woche b,.kontakt__wege a,.notdienst b,.held__satz,.kopf__marke,.bot__wer b{font-optical-sizing:none;font-variation-settings:'opsz' 11}
h2{font-size:clamp(40px,5.2vw,96px);margin-bottom:24px}
em{font-style:italic;color:#6E7BA6}
.mini{font:500 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin-bottom:18px}
.vh,.unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;background:#fff;border-radius:10px}
.sprung:focus{left:8px}
:focus-visible{outline:2px solid #6E7BA6;outline-offset:3px}
html.js.wow [data-auf]{opacity:0;transform:translateY(34px)}

/* Knoepfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--tinte);color:var(--perle);font:500 15px var(--sans);text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:color .35s}
.knopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--irisierend);opacity:0;transition:opacity .35s}
.knopf:hover{color:var(--tinte)}
.knopf:hover::before{opacity:1}
.knopf--hell{background:rgba(255,255,255,.7);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie)}
.knopf--klein{min-height:40px;padding:0 18px;font-size:14px}

/* Kopf */
.kopf{position:fixed;z-index:50;top:14px;left:var(--rand);right:var(--rand);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(247,245,242,.68);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 10px 30px -18px rgba(34,35,42,.3)}
.kopf__marke{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 19px var(--serif);white-space:nowrap}
.marke{width:18px;height:18px;border-radius:50%;background:var(--irisierend);box-shadow:inset 0 0 0 2px #fff,0 0 0 1.5px var(--stahl)}
.kopf__links{display:flex;gap:clamp(16px,2.4vw,36px);font-size:14px}
.kopf__links a{text-decoration:none;color:var(--leise)}
.kopf__links a:hover{color:var(--tinte)}

/* Status */
.status{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--leise)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--stahl)}
.status[data-offen="ja"] i{background:#4FBF9A;box-shadow:0 0 0 4px rgba(79,191,154,.2)}

/* I Held: Wort und Spiegelbild */
.held{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(110px,16vh,150px) var(--rand) clamp(50px,8vh,90px);overflow:hidden}
.schimmer{position:absolute;inset:0;z-index:-1;pointer-events:none}
.schimmer i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:treiben 22s ease-in-out infinite alternate}
.schimmer i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:var(--minze)}
.schimmer i:nth-child(2){width:40vw;height:40vw;right:-8vw;top:10vh;background:var(--flieder);animation-delay:-8s}
.schimmer i:nth-child(3){width:36vw;height:36vw;left:30vw;bottom:-18vw;background:var(--pfirsich);animation-delay:-15s}
@keyframes treiben{to{transform:translate(4vw,3vh) scale(1.08)}}
.wort{position:relative;margin:4px 0 clamp(20px,3vh,36px)}
.wort__oben,.wort__unten{display:block;font-optical-sizing:auto;font-variation-settings:normal;font:400 clamp(110px,21vw,400px)/.82 var(--serif);letter-spacing:-.04em;color:#2A2C35}
.wort__unten{position:absolute;left:0;right:0;top:100%;margin-top:-.06em;transform:scaleY(-1);transform-origin:center;opacity:.28;filter:url(#welle);-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 62%);mask-image:linear-gradient(0deg,#000 0%,transparent 62%);pointer-events:none}
.held__satz{position:relative;z-index:1;max-width:28em;font:400 clamp(22px,2vw,34px)/1.25 var(--serif);margin:clamp(50px,11vh,120px) 0 26px}
.held .status{margin-top:22px}
.held .mini{margin-bottom:clamp(18px,4vh,46px)}

/* II Portal */
.portal{position:relative}
html.wow .portal{height:330svh}
.portal__buehne{position:relative;min-height:100svh;overflow:hidden}
html.wow .portal__buehne{position:sticky;top:0;height:100svh}
.portal__bild{position:absolute;inset:0;transform-origin:22.8% 33.4%}
.portal__bild img{width:100%;height:100%;object-fit:cover;object-position:22.8% 33.4%}
html:not(.wow) .portal__bild{position:relative;height:70svh}
.portal__farbe{position:absolute;inset:0;background:var(--irisierend);opacity:0}
html:not(.wow) .portal__farbe{display:none}
.portal__text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;max-width:1100px;margin:0 auto;padding:0 var(--rand)}
html.wow .portal__text{opacity:0}
html:not(.wow) .portal__text{position:relative;padding-block:80px;background:var(--irisierend);max-width:none}
.portal__text h2{font-size:clamp(38px,5vw,92px)}
.portal__text h2 em{color:#4D5A86}
.portal__text p:not(.mini){max-width:36em;font-size:clamp(17px,1.3vw,21px);color:#3E4150}
.portal__text .mini{color:#4D5A86}
.wortteil{display:inline-block}
html.wow .wortteil{opacity:.12}

/* III Behandlungen */
.behandlungen{padding:clamp(80px,14vh,160px) var(--rand)}
.behandlungen__kopf{max-width:1300px;margin:0 auto clamp(30px,5vh,60px)}
.liste{list-style:none;max-width:1300px;margin:0 auto;border-top:1px solid var(--linie)}
.liste li{position:relative;display:grid;grid-template-columns:60px 1fr 1fr;align-items:baseline;gap:20px;padding:clamp(22px,3vh,34px) 0;border-bottom:1px solid var(--linie);isolation:isolate}
.liste li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--irisierend);opacity:0;transform:scaleY(.4);transition:opacity .5s,transform .5s var(--kurve);border-radius:12px}
.liste li:hover::before{opacity:.65;transform:none}
.liste span{font-size:13px;color:var(--stahl);padding-left:10px}
.liste b{font:400 clamp(26px,2.8vw,48px)/1.1 var(--serif)}
.liste small{font-size:16px;color:var(--leise)}

/* IV Zeiten */
.zeiten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center;padding:clamp(70px,12vh,150px) var(--rand);background:var(--weiss)}
.zeiten__satz p:not(.mini):not(.status){color:var(--leise);max-width:28em;margin-bottom:20px}
.woche{list-style:none;border-radius:var(--rund);padding:clamp(10px,1.4vw,20px);background:var(--perle)}
.woche li{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:10px;align-items:center;padding:16px clamp(12px,1.4vw,22px);border-radius:14px;font-size:clamp(15px,1.2vw,18px)}
.woche b{font:400 clamp(20px,1.7vw,28px) var(--serif)}
.woche span{color:var(--leise)}
.woche li.frueh span:nth-of-type(1){color:var(--tinte);font-weight:600}
.woche li.zu span{color:var(--stahl)}
.woche li[data-heute="ja"]{background:var(--irisierend)}
.woche li[data-heute="ja"] b::after{content:" · heute";font:500 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#4D5A86}

/* V Kontakt */
.kontakt{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,2vw,30px);padding:clamp(70px,12vh,150px) var(--rand)}
.kontakt__karte,.kontakt__seite{border-radius:var(--rund);padding:clamp(28px,3.4vw,60px);background:var(--weiss)}
.kontakt__karte{background:var(--irisierend)}
.kontakt__karte h2{font-size:clamp(36px,4.2vw,72px);margin-bottom:6px}
.kontakt__karte > p:not(.mini){font-size:clamp(18px,1.4vw,22px);margin-bottom:22px}
.kontakt__wege{display:flex;flex-direction:column;gap:4px;margin-bottom:28px}
.kontakt__wege a{text-decoration:none;font:400 clamp(20px,1.6vw,26px) var(--serif)}
.kontakt__wege a:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chips button{min-height:42px;padding:0 18px;border-radius:999px;background:var(--perle);box-shadow:inset 0 0 0 1px var(--linie);font-size:15px;transition:background .3s}
.chips button:hover{background:var(--flieder)}
.notdienst{display:block;padding:20px 22px;border-radius:16px;background:var(--perle);text-decoration:none;transition:background .3s}
.notdienst:hover{background:var(--minze)}
.notdienst b{display:block;font:400 22px var(--serif);margin-bottom:2px}
.notdienst span{font-size:14px;color:var(--leise)}

/* Fuss */
.fuss{padding:clamp(50px,8vh,90px) var(--rand) 22px;overflow:hidden}
.fuss__wort{font:400 clamp(90px,24vw,460px)/.8 var(--serif);letter-spacing:-.04em;text-align:center;background:var(--irisierend);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:clamp(30px,6vh,70px)}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--leise);border-top:1px solid var(--linie);padding-top:18px}

/* 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:52px;padding:0 22px 0 16px;border-radius:999px;background:var(--tinte);color:var(--perle);font:500 14px var(--sans);box-shadow:0 14px 40px rgba(34,35,42,.25);transition:opacity .4s,transform .4s var(--kurve)}
.bot__auf i{width:12px;height:12px;border-radius:50%;background:var(--irisierend)}
html.im-held .bot__auf{opacity:0;transform:translateY(130%);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;overflow:hidden;border-radius:26px;background:rgba(247,245,242,.92);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 30px 80px rgba(34,35,42,.25),inset 0 0 0 1px rgba(255,255,255,.8)}
.bot__fenster[hidden]{display:none!important}
.bot__kopf{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--irisierend)}
.bot__wer{display:flex;flex-direction:column;gap:2px}
.bot__wer b{font:400 22px/1 var(--serif)}
.bot__wer small{font-size:12px;color:#4D5A86}
.bot__zu{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.8);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:#fff;border-bottom-left-radius:6px}
.bot__blase--ich{align-self:flex-end;background:var(--tinte);color:var(--perle);border-bottom-right-radius:6px}
.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(--irisierend);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:6px;height:6px;border-radius:50%;background:var(--stahl);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}50%{opacity:1}}
.bot__chips{display:flex;flex-wrap:wrap;gap:8px}
.bot__chips button{padding:8px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font-size:14px}
.bot__chips button:hover{background:var(--flieder)}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--linie)}
.bot__eingabe{flex:1;min-width:0;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--linie);background:#fff;font:400 16px var(--sans)}
.bot__senden{width:42px;height:42px;border-radius:50%;background:var(--tinte);color:var(--perle);font-size:17px}
.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(48px,7vw,96px);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:900px){
  .kopf{left:10px;right:10px;top:10px}
  .kopf__links{display:none}
  .zeiten,.kontakt{grid-template-columns:1fr}
  .liste li{grid-template-columns:40px 1fr;row-gap:4px}
  .liste small{grid-column:2}
  .woche li{grid-template-columns:1fr 1fr;row-gap:2px}
  .woche b{grid-column:1/-1}
  .woche span:empty{display:none}
  .held__satz{margin-top:clamp(40px,10vh,90px)}
  .portal__bild img{object-position:22.8% 33.4%}
  .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}}