/* Dr. Manuela Malin - Neumorphism. Warmer Stein, Moos aus ihrem alten Gruen, alles waechst aus derselben Flaeche. */
:root{
  --grund:#E8E3DB;--hell:rgba(255,255,255,.82);--dunkel:rgba(158,144,124,.42);
  --tinte:#252B26;--leise:#6B6A62;--moos:#3E5A47;--moos-2:#58775F;--salbei:#A9C0A6;--bernstein:#C68A4A;
  --sans:'Figtree',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;
  --rand:clamp(16px,3.2vw,64px);--rund:clamp(22px,2vw,36px);--kurve:cubic-bezier(.2,.7,.1,1);
  --h: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,.4vw + 10px,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:-.02em;line-height:.95}
h2{font-size:clamp(44px,5.4vw,112px);margin-bottom:clamp(28px,5vh,60px)}
h3{font:600 clamp(21px,1.6vw,30px)/1.15 var(--sans);letter-spacing:-.02em;margin-bottom:10px}
em{font-style:italic;color:var(--moos)}
.mini{display:flex;align-items:center;gap:10px;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin-bottom:16px}
.mini b{color:var(--moos)}
.sprung{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;background:#fff;border-radius:8px}
.sprung:focus{left:8px}

/* Die Flaeche: erhaben waechst mit --h (0 = flach in der Wand, 1 = ganz heraus) */
.erhaben{background:var(--grund);border-radius:var(--rund);
  box-shadow:calc(var(--h)*14px) calc(var(--h)*14px) calc(var(--h)*30px) var(--dunkel),calc(var(--h)*-14px) calc(var(--h)*-14px) calc(var(--h)*30px) var(--hell)}
.vertieft{background:var(--grund);border-radius:var(--rund);box-shadow:inset 7px 7px 16px var(--dunkel),inset -7px -7px 16px var(--hell)}
html.js.wow [data-heben]{--h:0}

/* Knoepfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:14px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;background:var(--moos);color:#F4F1EA;font:600 15px var(--sans);text-decoration:none;
  box-shadow:8px 8px 18px var(--dunkel),-8px -8px 18px var(--hell),inset 0 1px 0 rgba(255,255,255,.18);transition:box-shadow .25s,transform .25s var(--kurve)}
.knopf:hover{transform:translateY(-1px)}
.knopf:active{box-shadow:inset 4px 4px 10px rgba(0,0,0,.35),inset -2px -2px 6px rgba(255,255,255,.1);transform:none}
.knopf--flach{background:var(--grund);color:var(--tinte);box-shadow:8px 8px 18px var(--dunkel),-8px -8px 18px var(--hell)}
.knopf--flach:active{box-shadow:inset 5px 5px 12px var(--dunkel),inset -5px -5px 12px var(--hell)}
.knopf--klein{min-height:44px;padding:0 20px;font-size:14px}
:focus-visible{outline:2px solid var(--moos);outline-offset:4px}

/* Kopf */
.kopf{position:fixed;z-index:50;top:16px;left:var(--rand);right:var(--rand);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 8px 8px 10px;border-radius:999px;--h:.55}
.kopf__marke{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 16px var(--sans);letter-spacing:-.01em}
.marke{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:italic 400 24px/1 var(--serif);color:var(--moos);font-style:italic}
.kopf__links{display:flex;gap:clamp(16px,2.4vw,40px);font-size:15px}
.kopf__links a{text-decoration:none;color:var(--leise);transition:color .2s}
.kopf__links a:hover{color:var(--tinte)}

/* Status */
.status{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font:500 14px var(--sans);color:var(--leise)}
.status i{width:9px;height:9px;border-radius:50%;background:#B9B2A6}
.status[data-offen="ja"] i{background:#5FA36E;box-shadow:0 0 0 4px rgba(95,163,110,.2)}
.status[data-offen="tel"] i{background:var(--bernstein);box-shadow:0 0 0 4px rgba(198,138,74,.2)}

/* I Held */
.held{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(30px,5vw,100px);padding:clamp(110px,16vh,160px) var(--rand) clamp(50px,8vh,90px)}
.held h1{font-size:clamp(76px,10.5vw,220px);margin-bottom:clamp(20px,3vh,34px)}
.held h1 span{display:inline-block}
.held__satz{max-width:30em;color:var(--leise);margin-bottom:30px}
.held .status{margin-top:30px}
.uhr{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:28px;width:min(100%,clamp(300px,38vw,640px))}
.uhr__scheibe{width:100%;aspect-ratio:1;border-radius:50%;padding:8%;--h:1}
.uhr__mulde{position:relative;width:100%;height:100%;border-radius:50%;box-shadow:inset 12px 12px 26px var(--dunkel),inset -12px -12px 26px var(--hell)}
.uhr__boegen{position:absolute;inset:0;width:100%;height:100%}
.uhr__boegen .bogen{fill:none;stroke:var(--salbei);stroke-width:7;stroke-linecap:round;filter:drop-shadow(2px 2px 2px rgba(120,105,85,.45)) drop-shadow(-1px -1px 1px rgba(255,255,255,.9))}
.uhr__boegen .bogen--tel{stroke:#E2BE94}
.uhr__striche{position:absolute;inset:0}
.uhr__striche i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--grund);box-shadow:1.5px 1.5px 3px var(--dunkel),-1.5px -1.5px 3px var(--hell)}
.uhr__striche i.gross{width:12px;height:12px;margin:-6px}
.zeiger{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:999px;background:var(--grund);box-shadow:3px 3px 8px var(--dunkel),-2px -2px 6px var(--hell)}
.zeiger--h{width:12px;height:26%;margin-left:-6px}
.zeiger--m{width:8px;height:37%;margin-left:-4px}
.zeiger--s{width:2px;height:40%;margin-left:-1px;background:var(--moos);box-shadow:none}
.uhr__knopf{position:absolute;left:50%;top:50%;width:9%;height:9%;transform:translate(-50%,-50%);border-radius:50%;--h:.35}
.uhr__text{font:500 15px var(--sans);color:var(--leise);text-align:center}
.uhr__text b{color:var(--tinte)}

/* II Kapitel */
.kapitel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,120px);padding:clamp(60px,10vh,140px) var(--rand)}
.kapitel__seite{position:sticky;top:clamp(90px,14vh,140px);align-self:start}
.dreh{position:relative;width:clamp(220px,22vw,360px);aspect-ratio:1;border-radius:50%;padding:12%}
.dreh__ring{width:100%;height:100%;border-radius:50%;position:relative;transform:rotate(var(--dreh,0deg))}
.dreh__marke{position:absolute;left:50%;top:9%;width:12px;height:24%;margin-left:-6px;border-radius:999px;background:var(--moos);box-shadow:0 0 14px rgba(62,90,71,.35)}
.dreh__namen{list-style:none;position:absolute;left:calc(100% + 26px);top:50%;transform:translateY(-50%);display:grid;gap:12px;white-space:nowrap;font:500 15px var(--sans);color:#A39C90}
.dreh__namen li{transition:color .3s,transform .3s var(--kurve)}
.dreh__namen li.an{color:var(--moos);transform:translateX(6px)}
.kapitel__liste{display:grid;gap:clamp(26px,4vh,46px);padding-top:clamp(0px,8vh,120px)}
.karte{padding:clamp(28px,3vw,54px)}
.karte p:not(.mini){color:var(--leise);max-width:34em}
.karte--bild{display:grid;gap:clamp(20px,2.4vw,36px)}
.karte__bild{padding:10px;border-radius:calc(var(--rund) - 6px);overflow:hidden}
.karte__bild img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:calc(var(--rund) - 14px)}

/* III Wahlarzt */
.wahl{padding:clamp(70px,12vh,150px) var(--rand)}
.wahl__bahn{position:relative;padding-bottom:72px}
.rinne{position:absolute;left:2%;right:2%;bottom:6px;height:24px;border-radius:999px}
.kugel{position:absolute;left:0;top:50%;width:34px;height:34px;margin:-17px 0 0 -6px;border-radius:50%;--h:.45;background:radial-gradient(circle at 35% 30%,#F6F2EB,var(--grund) 60%)}
.schritte{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px)}
.schritt{padding:clamp(26px,2.6vw,44px);padding-top:0;margin-top:0}
.schritt__nr{display:grid;place-items:center;width:92px;height:92px;margin:0 0 22px;border-radius:50%;font:italic 400 44px/1 var(--serif);color:var(--moos);transform:translateY(0)}
.schritt{padding-top:clamp(0px,0vw,0px)}
.schritt .schritt__nr{margin-top:0}
.schritt p{color:var(--leise)}
.wahl__fuss{display:inline-block;margin-top:clamp(30px,5vh,56px);padding:16px 26px;border-radius:999px;color:var(--leise)}
.wahl__fuss b{color:var(--tinte)}

/* IV Zeiten */
.zeiten{padding:clamp(60px,10vh,130px) var(--rand)}
.zeiten__kopf{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(26px,4vh,46px)}
.zeiten__kopf h2{margin-bottom:0}
.woche{position:relative;padding:clamp(26px,3vw,54px);--achse:clamp(54px,6vw,90px);--ende:clamp(200px,22vw,330px)}
.woche__achse{position:relative;height:22px;margin:0 var(--ende) 10px var(--achse);font:500 12px var(--sans);color:#A39C90}
.woche__achse span{position:absolute;left:calc(var(--x)/13*100%);transform:translateX(-50%)}
.woche__tage{list-style:none;display:grid;gap:14px}
.woche__tage li{display:grid;grid-template-columns:var(--achse) 1fr var(--ende);align-items:center}
.woche__tage b{font:600 16px var(--sans)}
.woche__tage span{padding-left:24px;font-size:14px;color:var(--leise)}
.woche__tage li.zu b,.woche__tage li.zu span{color:#A9A296}
.woche__tage li[data-heute="ja"] b{color:var(--moos)}
.woche__tage li[data-heute="ja"] b::after{content:" · heute";font-weight:500;font-size:12px}
.spur{position:relative;height:40px;border-radius:999px;box-shadow:inset 5px 5px 10px var(--dunkel),inset -5px -5px 10px var(--hell)}
.block{position:absolute;top:6px;bottom:6px;left:calc(var(--von)/13*100%);width:calc((var(--bis) - var(--von))/13*100%);border-radius:999px;background:var(--salbei);box-shadow:3px 3px 7px var(--dunkel),-3px -3px 7px var(--hell);transform-origin:left center}
.block--tel{background:#E8C9A2}
.woche__jetzt{position:absolute;top:calc(clamp(26px,3vw,54px) + 26px);bottom:clamp(70px,9vw,110px);width:2px;margin-left:-1px;border-radius:2px;background:var(--moos);opacity:0;pointer-events:none}
.woche__jetzt::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--moos)}
.woche__legende{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:26px;padding-left:var(--achse);font-size:14px;color:var(--leise)}
.woche__legende span{display:inline-flex;align-items:center;gap:10px}
.woche__legende .block{position:static;display:inline-block;width:30px;height:14px}

/* V Anliegen */
.anliegen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,110px);align-items:center;padding:clamp(60px,10vh,130px) var(--rand)}
.anliegen__text p:not(.mini){color:var(--leise);max-width:32em}
.tasten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,28px)}
.taste{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;aspect-ratio:1.15;padding:clamp(18px,1.8vw,30px);text-align:left;transition:box-shadow .2s,transform .2s var(--kurve)}
.taste b{font:italic 400 clamp(26px,2.4vw,44px)/1 var(--serif);color:var(--tinte)}
.taste small{font-size:14px;color:var(--leise)}
.taste:hover{transform:translateY(-2px)}
.taste:active,.taste.gedrueckt{box-shadow:inset 7px 7px 14px var(--dunkel),inset -7px -7px 14px var(--hell);transform:none}

/* VI Anfahrt */
.anfahrt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,100px);align-items:center;padding:clamp(60px,10vh,130px) var(--rand)}
.anfahrt__bild{padding:clamp(12px,1.2vw,20px)}
.anfahrt__bild .vertieft{padding:10px;border-radius:calc(var(--rund) - 8px)}
.anfahrt__bild img{width:100%;border-radius:calc(var(--rund) - 16px);aspect-ratio:1420/596;object-fit:cover}
.hinweise{list-style:none;display:grid;gap:16px;margin-bottom:30px}
.hinweise li{padding:18px 22px;--h:.5;font-size:15px;color:var(--leise)}
.hinweise b{display:block;color:var(--tinte);font-weight:600;margin-bottom:2px}

/* VII Raum */
.raum{padding:clamp(40px,8vh,100px) var(--rand) clamp(70px,12vh,150px)}
.raum__karte{max-width:1100px;margin:0 auto;padding:clamp(34px,5vw,90px);text-align:center;display:flex;flex-direction:column;align-items:center}
.raum__karte h2{font-size:clamp(40px,4.4vw,88px)}
.raum__karte p:not(.mini){max-width:36em;color:var(--leise);margin-bottom:30px}

/* Fuss */
.fuss{margin:0 var(--rand) var(--rand);padding:clamp(60px,10vh,120px) clamp(24px,4vw,70px) 24px;border-radius:var(--rund);background:var(--moos);color:#F1EEE6;box-shadow:inset 10px 10px 30px rgba(0,0,0,.25),inset -10px -10px 30px rgba(255,255,255,.06)}
.fuss em{color:var(--salbei)}
.fuss__satz{font:400 clamp(70px,11vw,230px)/.9 var(--serif);letter-spacing:-.02em;margin-bottom:clamp(50px,9vh,110px)}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:rgba(241,238,230,.65);border-top:1px solid rgba(241,238,230,.18);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:52px;padding:0 22px 0 18px;border-radius:999px;background:var(--moos);color:#F4F1EA;font:600 14px var(--sans);box-shadow:8px 8px 20px var(--dunkel),-6px -6px 16px var(--hell);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(--salbei);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:28px;overflow:hidden;background:var(--grund);box-shadow:20px 20px 50px var(--dunkel),-14px -14px 40px var(--hell)}
.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(37,43,38,.07)}
.bot__wer{display:flex;flex-direction:column;gap:3px}
.bot__wer b{font:italic 400 24px/1 var(--serif)}
.bot__wer small{font-size:12px;color:var(--leise)}
.bot__zu{width:36px;height:36px;border-radius:50%;background:var(--grund);font-size:20px;line-height:1;box-shadow:4px 4px 9px var(--dunkel),-4px -4px 9px var(--hell)}
.bot__lauf{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:10px}
.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:var(--grund);box-shadow:4px 4px 10px var(--dunkel),-4px -4px 10px var(--hell);border-bottom-left-radius:5px}
.bot__blase--ich{align-self:flex-end;background:var(--moos);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:var(--grund);box-shadow:inset 3px 3px 7px var(--dunkel),inset -3px -3px 7px var(--hell);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:6px;height:6px;border-radius:50%;background:var(--moos-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:10px}
.bot__chips button{padding:9px 15px;border-radius:999px;background:var(--grund);font:500 14px var(--sans);box-shadow:4px 4px 9px var(--dunkel),-4px -4px 9px var(--hell)}
.bot__chips button:hover{background:var(--moos);color:#fff}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(37,43,38,.07)}
.bot__eingabe{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--grund);box-shadow:inset 4px 4px 9px var(--dunkel),inset -4px -4px 9px var(--hell);font:400 16px var(--sans);color:var(--tinte)}
.bot__senden{width:44px;height:44px;border-radius:50%;background:var(--moos);color:#F4F1EA;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(54px,7vw,100px);margin-bottom:30px}
body > main:not(#inhalt) h2{font-size:30px;margin:30px 0 8px}
body > main:not(#inhalt) p{margin-bottom:14px}

@media (max-width:1100px){
  .woche{--ende:0px}
  .woche__achse{margin-right:0}
  .woche__tage li{grid-template-columns:var(--achse) 1fr;row-gap:6px}
  .woche__tage span{grid-column:2;padding-left:4px;font-size:13px}
  .dreh__namen{position:static;transform:none;margin-top:26px}
  .dreh{margin-bottom:60px}
}
@media (max-width:860px){
  .kopf{left:10px;right:10px;top:10px}
  .kopf__links{display:none}
  .kopf__marke span{font-size:15px}
  .marke{width:34px;height:34px;font-size:20px}
  .held{grid-template-columns:1fr;padding-top:100px;gap:40px}
  .held h1{font-size:clamp(66px,21vw,110px)}
  .uhr{width:min(86vw,420px)}
  .kapitel,.anliegen,.anfahrt{grid-template-columns:1fr}
  .kapitel__seite{position:static}
  .dreh{display:none}
  .kapitel__liste{padding-top:0}
  .schritte{grid-template-columns:1fr}
  .wahl__bahn{padding-bottom:0;padding-left:44px}
  .rinne{left:4px;right:auto;top:20px;bottom:20px;width:24px;height:auto}
  .kugel{left:50%;top:0;margin:-6px 0 0 -17px}
  .schritt{display:grid;grid-template-columns:92px 1fr;column-gap:18px;padding:22px}
  .schritt__nr{grid-row:span 2;margin:0;width:70px;height:70px;font-size:34px}
  .tasten{grid-template-columns:repeat(2,1fr)}
  .taste:last-child{grid-column:span 2}
  .taste{aspect-ratio:auto;min-height:118px}
  .woche{padding:20px;--achse:40px}
  .spur{height:34px}
  .wahl__fuss{border-radius:var(--rund)}
  .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}}