/* Hausarztpraxis Hard - Claymorphism. Weich, rund, freundlich: Knete, Tuerkis aus dem Logo, Koralle und Lavendel. */
:root{
  --grund:#F6F1EA;--knete:#FBF7F2;--tinte:#2B2A33;--leise:#76717A;
  --tuerkis:#1FA9A6;--tuerkis-2:#5CCBC6;--koralle:#EE7A68;--lavendel:#9C86E0;--creme:#FFF6E9;
  --rund:clamp(26px,2.4vw,44px);--rand:clamp(18px,4vw,80px);
  --hoch:16px 18px 40px rgba(150,120,100,.22),-12px -12px 30px rgba(255,255,255,.9),inset -6px -8px 16px rgba(120,90,70,.07),inset 8px 8px 16px rgba(255,255,255,.9);
  --tief:inset 8px 8px 18px rgba(150,120,100,.18),inset -8px -8px 18px rgba(255,255,255,.9);
  --sans:'Nunito',system-ui,sans-serif;--rundschrift:'Fredoka',system-ui,sans-serif;--kurve:cubic-bezier(.34,1.56,.64,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(16px,.45vw + 10px,20px)/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(--rundschrift);font-weight:600;letter-spacing:-.02em;line-height:1}
h2{font-size:clamp(42px,4.8vw,108px)}
em{font-style:normal;color:var(--tuerkis)}
.marke{display:inline-block;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--tuerkis);padding:9px 14px;border-radius:999px;background:var(--knete);box-shadow:var(--hoch);margin-bottom:22px}
.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) scale(.96)}

/* Knoepfe: gedrueckt wie Knete */
.knoepfe{display:flex;flex-wrap:wrap;gap:14px}
.knopf{display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border-radius:999px;border:0;background:var(--tuerkis);color:#fff;font:600 16px var(--rundschrift);text-decoration:none;box-shadow:8px 10px 22px rgba(31,169,166,.35),inset -4px -6px 10px rgba(0,0,0,.12),inset 5px 5px 10px rgba(255,255,255,.35);transition:transform .35s var(--kurve),box-shadow .35s}
.knopf:hover{transform:translateY(-3px) scale(1.03)}
.knopf:active{transform:scale(.96);box-shadow:inset 6px 6px 12px rgba(0,0,0,.18)}
.knopf--weich{background:var(--knete);color:var(--tinte);box-shadow:var(--hoch)}
.pille{white-space:nowrap;min-height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--tuerkis);color:#fff;font:600 15px var(--rundschrift);box-shadow:6px 8px 18px rgba(31,169,166,.3),inset -3px -4px 8px rgba(0,0,0,.12),inset 4px 4px 8px rgba(255,255,255,.35)}

/* Kopf: schwebendes Kissen */
.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 10px 8px 14px;border-radius:999px;background:rgba(251,247,242,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--hoch)}
.kopf__marke{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.kopf__marke img{width:34px;height:34px;object-fit:contain}
.kopf__marke span{font:600 19px/1 var(--rundschrift)}
.kopf__links{display:flex;gap:6px}
.kopf__links a{text-decoration:none;font-weight:600;font-size:14px;padding:9px 14px;border-radius:999px;color:var(--leise);transition:background .3s,color .3s}
.kopf__links a:hover{background:var(--grund);box-shadow:var(--tief);color:var(--tinte)}

/* I  Held */
.held{position:relative}
html.wow .held{height:230svh}
.held__buehne{position:relative;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:center;padding:110px var(--rand) 40px}
html.wow .held__buehne{position:sticky;top:0}
.duo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.duo-ersatz{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 2vw;z-index:1;pointer-events:none}
.duo-ersatz img{width:min(26vw,380px);animation:schweben 5s ease-in-out infinite}
.duo-ersatz img + img{animation-delay:-2.5s}
html.drei-d .duo-ersatz{display:none}
@keyframes schweben{50%{transform:translateY(-14px) rotate(-2deg)}}
.held__text{position:relative;z-index:2;text-align:center;max-width:min(820px,52vw)}
.held h1{font-size:clamp(56px,6.2vw,150px);line-height:.95;margin-bottom:24px}
.held h1 .w{display:inline-block}
.w--herz{color:var(--koralle)}
.w--kopf{color:var(--lavendel)}
.held__satz{max-width:36ch;margin:0 auto 30px;color:var(--leise);font-size:clamp(17px,1.2vw,22px)}
.held .knoepfe{justify-content:center}

/* II/III  Haelften */
.haelfte{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,120px);align-items:center;padding:clamp(80px,12vh,150px) var(--rand)}
.haelfte--kopf{grid-template-columns:1.1fr 1fr}
.haelfte__figur{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:var(--knete);box-shadow:var(--hoch);padding:12%}
.haelfte--herz .haelfte__figur{background:radial-gradient(circle at 35% 30%,#FFE9E4,#FBD7CF)}
.haelfte--kopf .haelfte__figur{background:radial-gradient(circle at 35% 30%,#F1ECFF,#DED4FB)}
.haelfte__figur img{max-height:100%;filter:drop-shadow(18px 24px 24px rgba(120,80,60,.22));animation:schweben 6s ease-in-out infinite}
.haelfte--herz em{color:var(--koralle)}
.haelfte--kopf em{color:var(--lavendel)}
.haelfte h2{margin-bottom:34px}
.kissen{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kissen li{padding:20px 22px;border-radius:var(--rund);background:var(--knete);box-shadow:var(--hoch);transition:transform .4s var(--kurve)}
.kissen li:hover{transform:translateY(-4px) rotate(-.6deg)}
.kissen b{display:block;font:600 clamp(18px,1.3vw,24px)/1.15 var(--rundschrift);margin-bottom:6px}
.kissen span{font-size:14px;color:var(--leise)}

/* IV  Rezept */
.rezept{padding:clamp(40px,8vh,90px) var(--rand) clamp(80px,12vh,150px)}
.rezept__karte{max-width:1100px;margin:0 auto;padding:clamp(30px,4vw,70px);border-radius:calc(var(--rund) * 1.4);background:linear-gradient(145deg,#E5F7F5,#CDEDEA);box-shadow:var(--hoch);text-align:center}
.rezept__karte h2{margin-bottom:18px}
.rezept__karte > p:not(.marke){max-width:52ch;margin:0 auto 34px;color:#4F5D5C}
.schritte{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px;text-align:left}
.schritte li{display:flex;gap:14px;align-items:center;padding:18px;border-radius:var(--rund);background:rgba(255,255,255,.7);box-shadow:var(--tief);font-weight:600}
.schritte i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tuerkis);color:#fff;font:600 20px var(--rundschrift);font-style:normal;box-shadow:inset -3px -4px 8px rgba(0,0,0,.15),inset 3px 3px 8px rgba(255,255,255,.35)}
.rezept .knoepfe{justify-content:center}

/* V  Weg */
.weg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,120px);align-items:center;padding:clamp(60px,10vh,120px) var(--rand)}
.weg__haus{position:relative}
.weg__haus img{width:100%;filter:drop-shadow(20px 26px 26px rgba(120,80,60,.2))}
.weg__lift{position:absolute;right:15%;width:7%;height:7%;bottom:24%;border-radius:6px;background:#FFE08A;box-shadow:0 0 18px #FFD25A;opacity:.9;animation:lift 4s ease-in-out infinite}
@keyframes lift{0%,15%{transform:translateY(0)}45%,65%{transform:translateY(-310%)}95%,100%{transform:translateY(0)}}
.weg h2{margin-bottom:22px}
.adresse{font:600 clamp(30px,2.6vw,54px)/1.05 var(--rundschrift);margin-bottom:26px}

/* VI  Zeiten */
.zeiten{padding:clamp(80px,12vh,150px) var(--rand)}
.zeiten__kopf{text-align:center;margin-bottom:clamp(30px,5vh,60px)}
.zeiten h2{margin-bottom:18px}
.status{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--knete);box-shadow:var(--hoch);font-weight:700;margin-bottom:14px}
.status::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--leise)}
.status[data-offen="ja"]::before{background:#3DBE6E;box-shadow:0 0 0 6px rgba(61,190,110,.2)}
.zeiten__hinweis{color:var(--leise);font-size:15px}
.tage{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:clamp(40px,6vh,70px)}
.tage li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 12px 24px;border-radius:var(--rund);background:var(--knete);box-shadow:var(--hoch);font-weight:600;font-size:15px;text-align:center;transition:transform .4s var(--kurve)}
.tage b{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;margin-bottom:8px;font:600 22px var(--rundschrift);background:var(--grund);box-shadow:var(--tief)}
.tage li.zu{color:var(--leise);box-shadow:var(--tief);background:var(--grund)}
.tage li[data-heute="ja"]{transform:translateY(-10px);background:linear-gradient(160deg,#E5F7F5,#CDEDEA)}
.tage li[data-heute="ja"] b{background:var(--tuerkis);color:#fff;box-shadow:inset -3px -4px 8px rgba(0,0,0,.15),inset 3px 3px 8px rgba(255,255,255,.35)}
.anliegen{text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chips button{padding:14px 22px;border-radius:999px;border:0;background:var(--knete);box-shadow:var(--hoch);font:600 16px var(--rundschrift);transition:transform .35s var(--kurve)}
.chips button:hover{transform:translateY(-3px)}
.chips button:active{box-shadow:var(--tief);transform:scale(.97)}

/* Fuss */
.fuss{position:relative;margin:0 var(--rand) var(--rand);padding:clamp(60px,10vh,120px) clamp(24px,4vw,70px) 26px;border-radius:calc(var(--rund) * 1.4);background:var(--knete);box-shadow:var(--hoch);text-align:center;overflow:hidden}
.fuss__steth{width:clamp(120px,14vw,220px);margin:0 auto 20px;animation:schweben 6s ease-in-out infinite}
.fuss__satz{font:600 clamp(48px,7.4vw,170px)/.95 var(--rundschrift);letter-spacing:-.03em;margin-bottom:clamp(40px,8vh,90px)}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--leise);text-align:left}

/* 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:54px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--tuerkis);color:#fff;font:600 15px var(--rundschrift);box-shadow:8px 10px 22px rgba(31,169,166,.35),inset -4px -6px 10px rgba(0,0,0,.12),inset 5px 5px 10px rgba(255,255,255,.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:#fff;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:30px;overflow:hidden;background:var(--grund);box-shadow:var(--hoch),0 30px 80px rgba(80,60,50,.25)}
.bot__fenster[hidden]{display:none!important}
.bot__kopf{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--tuerkis);color:#fff}
.bot__wer{display:flex;flex-direction:column;gap:3px}
.bot__wer b{font:600 20px/1 var(--rundschrift)}
.bot__wer small{font-size:12px;color:rgba(255,255,255,.8)}
.bot__zu{width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:var(--tuerkis);font-size:20px;line-height:1}
.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:11px 15px;border-radius:20px;font-size:15px;line-height:1.45}
.bot__blase--bot{align-self:flex-start;background:var(--knete);box-shadow:6px 6px 14px rgba(150,120,100,.15);border-bottom-left-radius:6px}
.bot__blase--ich{align-self:flex-end;background:var(--tuerkis);color:#fff;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:16px;background:#E5F7F5;line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:7px;height:7px;border-radius:50%;background:var(--koralle);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:10px 15px;border-radius:999px;border:0;background:var(--knete);box-shadow:5px 5px 12px rgba(150,120,100,.18),-4px -4px 10px #fff;font:600 14px var(--rundschrift)}
.bot__chips button:hover{background:var(--tuerkis);color:#fff}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(0,0,0,.05)}
.bot__eingabe{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--grund);box-shadow:var(--tief);font:400 16px var(--sans)}
.bot__senden{width:44px;height:44px;border-radius:50%;border:0;background:var(--koralle);color:#fff;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(46px,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:16px}
  html.wow .held{height:200svh}
  .held__buehne{align-items:start;padding-top:100px}
  .held h1{font-size:clamp(46px,13vw,70px)}
  .held__text{max-width:none}
  .pille{font-size:13px;padding:0 14px}
  .duo-ersatz{align-items:flex-end;padding-bottom:12vh}
  .duo-ersatz img{width:42vw}
  .haelfte,.haelfte--kopf,.weg{grid-template-columns:1fr}
  .haelfte--kopf .haelfte__figur{order:-1}
  .haelfte__figur{max-width:340px;margin:0 auto}
  .kissen,.schritte{grid-template-columns:1fr}
  .tage{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .tage li{padding:16px 4px;font-size:12px}
  .tage b{width:42px;height:42px;font-size:16px}
  .fuss__zeile{flex-direction:column}
  .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}}