/* Dr. Margit Madlener - Conceptual Sketch. Papier, Graphit, Aquarell. */
:root{
  --papier:#F7F4EC;--papier-2:#EFEADD;--graphit:#2A2A28;--leise:#6E6B63;--linie:#D8D2C3;
  --himmel:#7FB3D5;--see:#2F98A8;--koralle:#E0644F;--honig:#E2A93B;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Work Sans',system-ui,sans-serif;--hand:'Caveat',cursive;
  --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(--graphit);font:300 clamp(16px,.45vw + 10px,20px)/1.65 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(--see)}
h1,h2,h3{font-weight:500;font-family:var(--serif)}
h2{font-size:clamp(46px,5.4vw,124px);line-height:.98;letter-spacing:-.015em}
.hand{font:500 clamp(20px,1.5vw,28px)/1.1 var(--hand);color:var(--koralle);margin-bottom:12px}
.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(36px)}

/* Knoepfe: wie mit dem Lineal gezogen */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border:1.5px solid var(--graphit);border-radius:2px;background:var(--graphit);color:var(--papier);font:500 15px var(--sans);text-decoration:none;box-shadow:4px 4px 0 var(--honig);transition:transform .3s var(--kurve),box-shadow .3s var(--kurve)}
.knopf:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--honig)}
.knopf--rand{background:var(--papier);color:var(--graphit);box-shadow:4px 4px 0 var(--linie)}
.pille{min-height:42px;padding:0 18px;border:1.5px solid var(--graphit);border-radius:2px;background:var(--graphit);color:var(--papier);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:12px var(--rand);background:rgba(247,244,236,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf__marke{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.kopf__marke svg{width:30px;height:30px;fill:none;stroke:var(--graphit);stroke-width:1.4}
.kopf__marke span{font:600 24px/1 var(--serif)}
.kopf__links{display:flex;gap:clamp(16px,2vw,34px);font-size:14px}
.kopf__links a{text-decoration:none;color:var(--leise)}
.kopf__links a:hover{color:var(--graphit)}

/* I  Held: der Plan */
.held{position:relative}
html.wow .held{height:620svh}
.held__buehne{position:relative;height:100svh;overflow:hidden;background:var(--papier)}
html.wow .held__buehne{position:sticky;top:0}
.plan{--s:1;position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 16 / 9));aspect-ratio:2688/1504;transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform}
.plan__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plan__farbe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
html:not(.wow) .plan__farbe{-webkit-mask-image:none;mask-image:none}
.notiz{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(28px,-50%) scale(calc(1 / var(--s)));transform-origin:0 50%;display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:10px 16px 12px 14px;background:rgba(247,244,236,.9);border:1px solid var(--linie);opacity:0;pointer-events:none;white-space:nowrap}
.notiz::before{content:"";position:absolute;right:100%;top:50%;width:44px;border-top:1.5px solid var(--graphit)}
.notiz::after{content:"";position:absolute;right:calc(100% + 40px);top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--koralle)}
.notiz--links{transform:translate(calc(-100% - 28px),-50%) scale(calc(1 / var(--s)));transform-origin:100% 50%}
.notiz--links::before{right:auto;left:100%}
.notiz--links::after{right:auto;left:calc(100% + 40px)}
.notiz b{grid-row:span 2;font:600 clamp(30px,2.6vw,52px)/1 var(--hand);color:var(--koralle)}
.notiz span{font:600 clamp(26px,2.2vw,44px)/1 var(--serif)}
.notiz small{font:400 13px/1.4 var(--sans);color:var(--leise)}
.held__text{position:absolute;left:var(--rand);bottom:clamp(26px,6vh,64px);z-index:3;padding:26px 30px 28px 0;max-width:min(640px,90vw)}
.held__text::before{content:"";position:absolute;inset:-40px -60px -60px calc(-1 * var(--rand));background:radial-gradient(closest-side,rgba(247,244,236,.94),rgba(247,244,236,.7) 60%,transparent);z-index:-1;filter:blur(6px)}
.held h1{font-size:clamp(58px,6.6vw,150px);line-height:.92;letter-spacing:-.02em;margin-bottom:24px}
.held__hinweis{position:absolute;right:var(--rand);bottom:clamp(26px,6vh,64px);z-index:3;color:var(--leise)}

/* II  Die Aerztin */
.aerztin{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,150px);align-items:center;padding:clamp(110px,16vh,200px) var(--rand)}
.aerztin__bild{position:relative;padding:0 0 46px 46px}
.aerztin__bild img{width:100%;aspect-ratio:351/491;object-fit:cover;filter:grayscale(.15) contrast(1.02);border:1.5px solid var(--graphit)}
.mass{position:absolute;display:flex;align-items:center;gap:10px;font:500 20px/1 var(--hand);color:var(--leise)}
.mass i{flex:1;border-top:1px solid var(--leise);position:relative}
.mass--h{left:46px;right:0;bottom:8px}
.mass--h i:first-child::before,.mass--h i:last-child::after{content:"";position:absolute;top:-7px;height:13px;border-left:1px solid var(--leise)}
.mass--h i:first-child::before{left:0}.mass--h i:last-child::after{right:0}
.mass--v{left:0;top:0;bottom:46px;width:30px;flex-direction:column}
.mass--v i{border-top:0;border-left:1px solid var(--leise);width:0}
.mass--v b{writing-mode:vertical-rl;transform:rotate(180deg)}
.aerztin h2{margin-bottom:28px}
blockquote{font:500 italic clamp(26px,2.2vw,44px)/1.2 var(--serif);max-width:24ch;margin-bottom:38px;padding-left:22px;border-left:2px solid var(--honig)}
.titel{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 30px;border-top:1.5px solid var(--graphit)}
.titel li{padding:16px 0;border-bottom:1px solid var(--linie)}
.titel b{display:block;font-weight:500}
.titel span{font-size:14px;color:var(--leise)}

/* III  Legende */
.leistungen{padding:clamp(90px,14vh,170px) var(--rand);background:var(--papier-2);background-image:linear-gradient(rgba(42,42,40,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(42,42,40,.05) 1px,transparent 1px);background-size:32px 32px}
.leistungen__kopf{margin-bottom:clamp(40px,7vh,90px)}
.legende{display:grid;grid-template-columns:1fr 1fr .9fr;gap:clamp(24px,4vw,80px);align-items:start}
.legende h3{font-size:clamp(28px,2.4vw,50px);line-height:1;padding-bottom:14px;margin-bottom:6px;border-bottom:1.5px solid var(--graphit)}
.legende ol{list-style:none;counter-reset:n var(--start,0)}
.legende ol[start="10"]{counter-reset:n 9}
.legende li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;padding:10px 0;border-bottom:1px solid var(--linie)}
.legende li::before{content:counter(n,decimal-leading-zero);font:600 22px/1.2 var(--hand);color:var(--koralle)}
.legende__bild{background:var(--papier);border:1.5px solid var(--graphit);padding:14px 14px 10px;transform:rotate(1.2deg)}
.legende__bild img{aspect-ratio:4/5;object-fit:cover;width:100%}
.legende__bild figcaption{margin:10px 0 0;color:var(--leise)}

/* IV  Flug */
.flug{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,120px);align-items:center;padding:clamp(110px,16vh,200px) var(--rand);overflow:hidden}
.flug__bahn{position:absolute;inset:6% 0 auto;width:100%;height:46%;pointer-events:none}
.flug__bahn path{fill:none;stroke:var(--himmel);stroke-width:2;stroke-dasharray:8 10;vector-effect:non-scaling-stroke}
.flug__text{position:relative}
.flug h2{margin-bottom:24px}
.flug__text > p:not(.hand){max-width:42ch;color:var(--leise)}
.check{position:relative;background:#fff;border:1.5px solid var(--graphit);box-shadow:8px 8px 0 var(--himmel);padding:clamp(24px,2.6vw,46px)}
.check ul{list-style:none;margin-bottom:26px}
.check li{position:relative;padding:14px 0 14px 46px;border-bottom:1px dashed var(--linie);font-weight:400}
.check li small{color:var(--leise)}
.check li::before{content:"";position:absolute;left:0;top:13px;width:26px;height:26px;border:1.5px solid var(--graphit)}
.check li::after{content:"";position:absolute;left:7px;top:15px;width:10px;height:17px;border:solid var(--koralle);border-width:0 3px 3px 0;transform:rotate(42deg) scale(var(--h,1));transform-origin:50% 100%}
html.wow .check li::after{--h:0;transition:transform .45s var(--kurve)}
html.wow .check li.an::after{--h:1}
.check .knopf{width:100%;justify-content:center}

/* V  Zeiten */
.zeiten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,140px);padding:clamp(90px,14vh,170px) var(--rand);border-top:1.5px solid var(--graphit)}
.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:10px}
.anliegen__chips button{padding:11px 18px;border:1.5px solid var(--graphit);border-radius:2px;background:var(--papier);font:500 15px var(--sans);transition:background .3s,color .3s}
.anliegen__chips button:hover{background:var(--graphit);color:var(--papier)}
.adresse{font:500 clamp(32px,2.6vw,56px)/1.05 var(--serif);margin-bottom:24px}
.woche{list-style:none;border-top:1.5px solid var(--graphit)}
.woche li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:20px;padding:clamp(16px,2.4vh,26px) 0;border-bottom:1px solid var(--linie)}
.woche__tag{font:500 clamp(28px,2.4vw,50px)/1 var(--serif)}
.woche__zeit{font-size:15px;text-align:right}
.woche li.zu{color:var(--leise)}
.woche li[data-heute="ja"] .woche__tag{color:var(--see)}
.woche li[data-heute="ja"]{background:linear-gradient(90deg,rgba(226,169,59,.18),transparent 70%);padding-left:14px}
.woche__hinweis{display:block!important;border-bottom:0!important;color:var(--leise)!important}

/* Fuss */
.fuss{position:relative;padding:clamp(80px,12vh,150px) var(--rand) 30px;overflow:hidden;border-top:1.5px solid var(--graphit)}
.fuss__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.fuss__satz{position:relative;font:500 clamp(54px,9vw,210px)/.92 var(--serif);letter-spacing:-.02em;margin-bottom:clamp(60px,10vh,120px)}
.fuss__zeile{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--graphit);border-top:1px solid var(--graphit);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:1.5px solid var(--graphit);border-radius:2px;background:var(--graphit);color:var(--papier);font:500 14px var(--sans);box-shadow:4px 4px 0 var(--honig);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(--honig);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:1.5px solid var(--graphit);background:var(--papier);box-shadow:8px 8px 0 var(--linie)}
.bot__fenster[hidden]{display:none!important}
.bot__kopf{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1.5px solid var(--graphit)}
.bot__wer{display:flex;flex-direction:column;gap:3px}
.bot__wer b{font:600 22px/1 var(--serif)}
.bot__wer small{font-size:12px;color:var(--leise)}
.bot__zu{width:34px;height:34px;border:1.5px solid var(--graphit);border-radius:2px;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;font-size:15px;line-height:1.45}
.bot__blase--bot{align-self:flex-start;background:#fff;border:1px solid var(--linie)}
.bot__blase--ich{align-self:flex-end;background:var(--graphit);color:var(--papier)}
.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;background:var(--papier-2);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:6px;height:6px;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:8px 13px;border:1.5px solid var(--graphit);border-radius:2px;background:var(--papier);font:500 14px var(--sans)}
.bot__chips button:hover{background:var(--graphit);color:var(--papier)}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:1.5px solid var(--graphit)}
.bot__eingabe{flex:1;min-width:0;height:42px;padding:0 14px;border:1.5px solid var(--graphit);border-radius:2px;background:#fff;font:400 16px var(--sans)}
.bot__senden{width:42px;height:42px;border:0;border-radius:2px;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(48px,6vw,90px);line-height:1;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:560svh}
  .held h1{font-size:clamp(46px,13vw,66px);margin-bottom:16px}
  .held__text{bottom:20px;padding:18px 0 0}
  .held__hinweis{display:none}
  .held__buehne > .notiz{position:absolute;left:var(--rand);right:var(--rand);top:auto;bottom:200px;transform:none;z-index:4;white-space:normal}
  .held__buehne > .notiz::before,.held__buehne > .notiz::after{display:none}
  .notiz span{font-size:26px}.notiz b{font-size:30px}
  .aerztin,.flug,.zeiten{grid-template-columns:1fr}
  .aerztin__bild{max-width:420px}
  .titel{grid-template-columns:1fr}
  .legende{grid-template-columns:1fr}
  .legende__bild{max-width:360px}
  .bot__fenster{position:fixed;inset:0;width:100%;height:100dvh;border:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}