/* Dr. Karin Riedl - Herbarium. Papier, Wald, Terrakotta. */
:root{
  --papier:#F2EDE2;--papier-tief:#E8E0CF;--tinte:#1C211B;--wald:#24402F;--moos:#6C8455;--terra:#B4613E;
  --linie:#D9CFBC;--leise:#6B6A60;--weiss:#FBF8F1;
  --serif:'Instrument Serif',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --rand:clamp(20px,4vw,84px);--kurve:cubic-bezier(.2,.7,.1,1)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--papier);color:var(--tinte);font:300 clamp(16px,.5vw + 10px,21px)/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}
em{font-style:italic;color:var(--wald)}
h1,h2,h3{font-weight:400}
h2{font:400 clamp(44px,5vw,118px)/1 var(--serif);letter-spacing:-.01em}
.sprung{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;background:#fff;border-radius:8px}
.sprung:focus{left:8px}
.mono{font:400 clamp(11px,.62vw,13px)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--moos);margin-bottom:18px}
html.js.wow [data-auf]{opacity:0;transform:translateY(40px)}

/* Knoepfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--wald);color:var(--weiss);font:500 15px var(--sans);text-decoration:none;transition:background .3s,transform .3s var(--kurve)}
.knopf:hover{background:var(--terra);transform:translateY(-2px)}
.knopf--rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1px var(--tinte)}
.knopf--rand:hover{background:var(--tinte);color:var(--weiss)}
.pille{min-height:42px;padding:0 20px;border-radius:999px;border:0;background:var(--wald);color:var(--weiss);font:500 14px var(--sans)}

/* Kopf */
.kopf{position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;gap:clamp(18px,2vw,40px);padding:14px var(--rand);background:rgba(242,237,226,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kopf__marke{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.kopf__marke span{font:400 24px/1 var(--serif)}
.kopf__siegel{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--wald);font:italic 400 20px/1 var(--serif);color:var(--wald)}
.kopf__links{display:flex;gap:clamp(16px,2vw,36px);font-size:14px}
.kopf__links a{text-decoration:none;color:var(--leise)}
.kopf__links a:hover{color:var(--tinte)}

/* I  Held: Herbarium */
.held{position:relative}
html.wow .held{height:420svh}
.held__buehne{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(30px,5vw,120px);padding:110px var(--rand) 50px}
html.wow .held__buehne{position:sticky;top:0;height:100svh}
.held h1{font:400 clamp(60px,7.4vw,180px)/.92 var(--serif);letter-spacing:-.02em;margin-bottom:28px}
.held h1 .zeile{display:block}
.held__satz{max-width:38ch;color:var(--leise);margin-bottom:30px}
.held__index{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:clamp(30px,6vh,70px);font:italic 400 clamp(16px,1.1vw,22px)/1 var(--serif);color:var(--linie)}
.held__index li{transition:color .5s}
.held__index li.an{color:var(--terra)}
.stapel{position:relative;justify-self:center;width:min(100%,calc(78svh * .78));aspect-ratio:3.9/5}
.blatt{position:absolute;inset:0;background:var(--weiss);padding:clamp(10px,1vw,18px) clamp(10px,1vw,18px) clamp(64px,6vw,96px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px -20px rgba(36,64,47,.35);will-change:transform}
.blatt:nth-child(1){transform:rotate(1.2deg)}
.blatt:nth-child(2){transform:rotate(-2.4deg)}
.blatt:nth-child(3){transform:rotate(2.6deg)}
.blatt:nth-child(4){transform:rotate(-1.4deg)}
.blatt:nth-child(5){transform:rotate(.6deg)}
.blatt img{width:100%;height:100%;object-fit:cover}
.blatt--aerztin img{object-position:50% 20%}
.blatt figcaption{position:absolute;left:clamp(14px,1.4vw,24px);right:clamp(14px,1.4vw,24px);bottom:clamp(14px,1.3vw,22px);display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
.blatt figcaption .mono{grid-row:span 2;margin:0;color:var(--terra)}
.blatt figcaption b{font:italic 400 clamp(20px,1.6vw,34px)/1.05 var(--serif)}
.blatt figcaption i{font:400 12px/1.4 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}

/* II  Leitsatz */
.haltung{padding:clamp(110px,18vh,220px) var(--rand);text-align:center}
.leitsatz{max-width:20ch;margin:0 auto;font:400 clamp(44px,6vw,140px)/1.02 var(--serif);letter-spacing:-.015em}
.leitsatz .w{display:inline-block;margin-right:.22em}
html.wow .leitsatz .w{color:var(--linie)}

/* III  Weg */
.weg{padding:clamp(60px,10vh,120px) var(--rand) clamp(100px,14vh,180px)}
.weg h2{text-align:center;margin-bottom:clamp(50px,8vh,100px)}
.weg__raster{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;gap:clamp(20px,3vw,60px)}
.weg__karte{background:var(--weiss);padding:clamp(28px,3vw,54px);border-radius:4px;box-shadow:0 24px 60px -30px rgba(36,64,47,.35)}
.weg__karte h3{font:400 clamp(34px,3vw,64px)/1 var(--serif);margin-bottom:14px}
.weg__karte p:last-child{color:var(--leise)}
.ranke{width:100%;height:clamp(120px,14vw,240px);overflow:visible}
.ranke path[data-ranke]{fill:none;stroke:var(--moos);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ranke__blaetter path{fill:var(--moos);opacity:.85;transform-box:fill-box;transform-origin:0 50%}

/* IV  Katalog */
.therapien{padding:clamp(80px,12vh,150px) var(--rand);background:var(--wald);color:var(--weiss)}
.therapien em{color:#C9D6B4}
.therapien .mono{color:#C9D6B4}
.therapien__kopf{margin-bottom:clamp(40px,7vh,90px)}
.katalog{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,110px);align-items:start}
.katalog__liste{list-style:none;border-top:1px solid rgba(251,248,241,.18)}
.katalog__liste li{display:grid;grid-template-columns:60px 1fr;column-gap:20px;padding:clamp(18px,2.4vh,30px) 0;border-bottom:1px solid rgba(251,248,241,.18);cursor:default;transition:padding .5s var(--kurve)}
.katalog__liste li .mono{margin:12px 0 0;color:rgba(251,248,241,.5)}
.katalog__liste h3{font:400 clamp(34px,3.3vw,76px)/1.05 var(--serif);transition:color .4s,transform .5s var(--kurve)}
.katalog__liste p{grid-column:2;max-width:46ch;color:rgba(251,248,241,.66);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--kurve),opacity .4s,margin .4s}
.katalog__liste li img{display:none}
html:not(.wow) .katalog__liste p{max-height:none;opacity:1;margin-top:8px}
.katalog__liste li.an h3{color:#E9C9A6;transform:translateX(14px)}
.katalog__liste li.an p{max-height:7em;opacity:1;margin-top:8px}
.katalog__bild{position:sticky;top:14svh;aspect-ratio:4/5;max-height:72svh;overflow:hidden;border-radius:4px;background:var(--papier)}
.katalog__bild img{width:100%;height:100%;object-fit:cover}

/* V  Infusion */
.infusion{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,110px);align-items:center;padding:clamp(100px,14vh,180px) var(--rand)}
.infusion__bild{aspect-ratio:4/5;max-height:86svh;overflow:hidden;border-radius:999px 999px 4px 4px}
.infusion__bild img{width:100%;height:100%;object-fit:cover}
.infusion h2{margin-bottom:clamp(30px,5vh,60px)}
.tropfen{display:flex;gap:clamp(8px,1vw,16px);margin-bottom:22px}
.tropfen i{width:clamp(22px,2.2vw,40px);aspect-ratio:3/4;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;box-shadow:inset 0 0 0 1.5px var(--wald);transform:rotate(180deg);transition:background .4s}
.tropfen i.voll{background:var(--wald)}
.tropfen i.weich.voll{background:var(--moos);box-shadow:inset 0 0 0 1.5px var(--moos)}
.tropfen__zahl{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;color:var(--leise);max-width:40ch}
.tropfen__zahl b{white-space:nowrap;flex-shrink:0;font:400 clamp(70px,7vw,150px)/.8 var(--serif);color:var(--terra);min-width:1.1ch}

/* VI  Wahlaerztin */
.wahl{padding:clamp(80px,12vh,150px) var(--rand);background:var(--papier-tief)}
.wahl h2{margin-bottom:clamp(40px,6vh,80px)}
.wahl__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,60px)}
.wahl__raster > div{border-top:1px solid var(--tinte);padding-top:20px}
.wahl__raster .mono{color:var(--terra)}
.wahl__raster h3{font:400 clamp(30px,2.4vw,52px)/1.05 var(--serif);margin-bottom:12px}
.wahl__raster p{color:var(--leise)}

/* VII  Zeiten */
.zeiten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,140px);padding:clamp(100px,14vh,180px) var(--rand)}
.zeiten h2{margin-bottom:22px}
.status{display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;font-weight:500}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--leise)}
.status[data-offen="ja"]::before{background:#3E9B5B;box-shadow:0 0 0 6px rgba(62,155,91,.18)}
.anliegen{margin-bottom:34px}
.anliegen__chips{display:flex;flex-wrap:wrap;gap:8px}
.anliegen__chips button{padding:12px 20px;border-radius:999px;border:0;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie);font:500 15px var(--sans);transition:background .3s,color .3s}
.anliegen__chips button:hover{background:var(--wald);color:var(--weiss)}
.adresse{font:400 clamp(30px,2.4vw,52px)/1.1 var(--serif);margin-bottom:24px}
.woche{list-style:none;border-top:1px solid var(--tinte)}
.woche li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:clamp(18px,2.6vh,30px) 0;border-bottom:1px solid var(--linie);transition:padding .4s}
.woche__tag{font:400 clamp(30px,2.6vw,58px)/1 var(--serif)}
.woche__zeit{text-align:right;font:400 clamp(13px,.8vw,16px)/1.6 var(--mono)}
.woche li.zu{color:var(--leise)}
.woche li[data-heute="ja"]{padding-left:18px;background:linear-gradient(90deg,rgba(180,97,62,.1),transparent)}
.woche li[data-heute="ja"] .woche__tag{color:var(--terra)}

/* Fuss */
.fuss{background:var(--tinte);color:var(--papier);padding:clamp(80px,12vh,150px) var(--rand) 30px}
.fuss em{color:#C9D6B4}
.fuss__satz{font:400 clamp(54px,9vw,220px)/.95 var(--serif);letter-spacing:-.02em;margin-bottom:clamp(60px,10vh,120px)}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:rgba(242,237,226,.6);border-top:1px solid rgba(242,237,226,.16);padding-top:22px}

/* 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:0;border-radius:999px;background:var(--wald);color:var(--weiss);font:500 14px var(--sans);box-shadow:0 14px 40px rgba(36,64,47,.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:#E9C9A6;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:20px;overflow:hidden;background:var(--papier);box-shadow:0 30px 90px rgba(36,64,47,.3),inset 0 0 0 1px var(--linie)}
.bot__fenster[hidden]{display:none!important}
.bot__kopf{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--papier-tief)}
.bot__wer{display:flex;flex-direction:column;gap:3px}
.bot__wer b{font:400 22px/1 var(--serif)}
.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:#fff;box-shadow:inset 0 0 0 1px var(--linie);border-bottom-left-radius:5px}
.bot__blase--ich{align-self:flex-end;background:var(--wald);color:var(--weiss);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(--papier-tief);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:6px;height:6px;border-radius:50%;background:var(--moos);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:var(--papier-tief);font:500 14px var(--sans)}
.bot__chips button:hover{background:var(--wald);color:var(--weiss)}
.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%;border:0;background:var(--wald);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:400 clamp(48px,6vw,90px)/1 var(--serif);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:860px){
  .kopf__links{display:none}
  .kopf__marke span{font-size:20px}
  html.wow .held{height:380svh}
  .held__buehne{grid-template-columns:1fr;align-content:start;gap:18px;padding-top:86px;padding-bottom:20px}
  .held h1{font-size:clamp(46px,13.4vw,70px);margin-bottom:12px}
  .held__satz{font-size:15px;margin-bottom:16px}
  .held__index{display:none}
  .knoepfe .knopf{min-height:46px;padding:0 20px}
  .stapel{width:min(78vw,calc(42svh * .78))}
  .blatt{padding:8px 8px 52px}
  .blatt figcaption b{font-size:19px}
  .blatt figcaption i{font-size:10px}
  .weg__raster{grid-template-columns:1fr}
  .ranke{display:none}
  .katalog{grid-template-columns:1fr}
  .katalog__bild{display:none}
  .katalog__liste li img{display:block;grid-column:2;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;max-height:0;opacity:0;transition:max-height .6s var(--kurve),opacity .4s,margin .4s}
  .katalog__liste li.an img{max-height:60vw;opacity:1;margin-top:14px}
  .katalog__liste li{grid-template-columns:36px 1fr}
  .infusion,.zeiten{grid-template-columns:1fr}
  .infusion__bild{aspect-ratio:4/4.4}
  .wahl__raster{grid-template-columns:1fr}
  .woche__tag{font-size:30px}
  .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}}