/* Team Core Health · Webinar-Funnel
   Farbwelt aus dem Kampagnen-Briefing: Gelb #fce286, Rot #bc0626, Schwarz/Weiss.
   Anmutung bewusst warm und persoenlich statt corporate. */

:root{
  --yellow:#fce286;
  --yellow-soft:#fef4d2;
  --red:#bc0626;
  --red-dark:#8f0419;
  --ink:#141210;
  --white:#fff;
  --cream:#fdfaf3;
  --muted:#5d564e;
  --line:#e6ded0;
  --radius:20px;
  --shadow:0 1px 2px rgba(20,18,16,.05),0 12px 34px rgba(20,18,16,.08);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{line-height:1.12;letter-spacing:-.022em;margin:0}
p{margin:0}
a{color:inherit}

.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;color:var(--red);margin:0 0 1rem}

/* ---------- Kopfzeile ---------- */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0 clamp(1.1rem,5vw,3.4rem);height:84px;
  background:rgba(253,250,243,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.09em;text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;gap:.5rem}
.brand img{width:5rem;height:5rem;border-radius:50%;display:block;
  box-shadow:0 0 0 5px #fff,0 4px 14px rgba(20,18,16,.16)}
/* Logo haengt bewusst zu einem Viertel unten aus der Kopfzeile heraus */
header .brand{align-self:flex-start;margin-top:24px}
.brand--light{color:var(--white)}
nav{display:flex;gap:1.6rem;align-items:center;font-size:.94rem}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}
.navcta{background:var(--red);color:var(--white)!important;padding:.62rem 1.15rem;border-radius:999px;font-weight:600}
.navcta:hover{background:var(--red-dark)}

/* ---------- Buttons ---------- */
.button{display:inline-block;background:var(--red);color:var(--white)!important;border:0;border-radius:999px;
  padding:1rem 1.6rem;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:center;
  transition:background .2s,transform .2s}
.button:hover{background:var(--red-dark);transform:translateY(-1px)}
.button--light{background:var(--yellow);color:var(--ink)!important}
.button--light:hover{background:#fbd96a}
.textlink{font-weight:700;color:var(--red);text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:2px}

/* ---------- Hero ---------- */
.hero-wrap{background:radial-gradient(110% 70% at 12% 0%,var(--yellow-soft) 0%,transparent 60%)}
.hero{max-width:var(--wrap);margin:0 auto;padding:clamp(2.6rem,6vw,4.6rem) clamp(1.1rem,5vw,3.4rem) clamp(2.4rem,4vw,3.4rem);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
.hero__copy h1{font-size:clamp(2.5rem,5.2vw,4.15rem);margin:0 0 1.4rem}
.hero__copy h1 em{font-style:normal;color:var(--red)}
.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--muted);max-width:46ch}

.facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin:2rem 0 0;padding:0}
.facts li{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem}
.facts b{display:block;font-size:1rem}
.facts span{font-size:.85rem;color:var(--muted)}
.nextdate{margin-top:1.3rem;display:inline-flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  background:var(--yellow);border-radius:999px;padding:.6rem 1.15rem;font-size:.95rem}
.nextdate span{text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:700}

.hero__form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(1.4rem,2.4vw,2rem);position:sticky;top:96px}
.hero__form h2{font-size:1.5rem;margin-bottom:.5rem}
.hero__form>p{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem}

/* ---------- Formular ---------- */
.signup__form{display:grid;gap:.9rem}
.signup__form label{display:grid;gap:.4rem;font-weight:600;font-size:.9rem}
.signup__form input:not([type=checkbox]){width:100%;padding:.85rem .95rem;border:1px solid var(--line);
  border-radius:12px;font:inherit;background:var(--cream)}
.signup__form input:focus{outline:2px solid var(--red);outline-offset:1px;background:var(--white)}
.check{display:grid!important;grid-template-columns:auto 1fr;gap:.7rem!important;align-items:start;
  font-weight:400!important;font-size:.82rem!important;color:var(--muted);line-height:1.5}
.check input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--red)}
.check a{color:var(--red)}
.notice{margin-top:.3rem;padding:.8rem .95rem;border-radius:12px;font-size:.9rem}
.notice.good{background:#eef7ee;color:#1c5b2a}
.notice.bad{background:#fdeced;color:var(--red)}

/* ---------- Abschnitte ---------- */
section{scroll-margin-top:114px}
.pains,.path,.about,.signup{max-width:var(--wrap);margin:0 auto;
  padding:clamp(3rem,6vw,5.2rem) clamp(1.1rem,5vw,3.4rem)}
.pains h2,.path h2{font-size:clamp(1.7rem,3vw,2.5rem);max-width:22ch;margin-bottom:2.4rem}
.pains__grid,.path__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.pains__grid>div,.path__grid>div{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem 1.5rem}
.pains__grid>div{border-top:4px solid var(--yellow)}
.path__grid>div{border-top:4px solid var(--red)}
.num{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--red);margin-bottom:.8rem}
.pains h3,.path h3{font-size:1.15rem;margin-bottom:.6rem}
.pains p,.path p{color:var(--muted);font-size:.96rem}

/* ---------- Kernbotschaft ---------- */
/* Inhaltsspalte ueber die Innenabstaende zentrieren, damit die Kindelemente
   linksbuendig bleiben — sonst zentriert sich jede schmale Zeile fuer sich. */
.statement{background:var(--ink);color:var(--white);
  padding-block:clamp(3.4rem,7vw,6rem);
  padding-inline:max(clamp(1.1rem,5vw,3.4rem),calc((100% - var(--wrap)) / 2))}
.statement>*{margin-inline:0}
.statement__kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:var(--yellow);margin-bottom:1.4rem}
.statement h2{font-size:clamp(1.9rem,4.4vw,3.4rem);max-width:20ch}
.statement__text{margin-top:1.6rem;max-width:60ch;color:#d8d2c8;font-size:1.05rem}
.statement--full{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;text-align:left}
.statement--full .button{align-self:flex-start;margin-top:1rem}
.factline{margin-top:.4rem;color:#d8d2c8;font-size:.95rem}
.factline b{color:var(--yellow);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;margin-right:.5rem}

/* ---------- Team-Bild ---------- */
.teamband{position:relative}
.teamband img{width:100%;height:clamp(240px,42vw,460px);object-fit:cover;object-position:50% 42%}
.teamband figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem clamp(1.1rem,5vw,3.4rem) 1.3rem;
  color:var(--white);font-size:.92rem;background:linear-gradient(180deg,transparent,rgba(20,18,16,.72))}

/* ---------- Ueber Daniela ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.about__media .portrait{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--yellow-soft)}
.about__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.quote{margin-top:1.1rem;font-size:1.02rem;font-style:italic;color:var(--muted);
  border-left:4px solid var(--yellow);padding-left:1rem}
.about h2{font-size:clamp(1.65rem,3vw,2.4rem);margin-bottom:1.2rem;max-width:20ch}
.about__copy p{color:var(--muted);margin-bottom:1rem}
.proofs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1.6rem 0;padding:0}
.proofs li{background:var(--yellow-soft);border-radius:14px;padding:.9rem .8rem;text-align:center}
.proofs b{display:block;font-size:1.05rem}
.proofs span{font-size:.76rem;color:var(--muted);line-height:1.35;display:block}

/* ---------- Abschluss-Anmeldung ---------- */
.signup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.signup h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:1rem;max-width:18ch}
.signup__intro p{color:var(--muted)}
.signup__intro .factline{color:var(--ink)}
.signup__intro .factline b{color:var(--red)}
.signup .signup__form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(1.4rem,2.4vw,2rem)}

/* ---------- Fusszeile ---------- */
footer{background:var(--ink);color:#cfc8bd;padding:clamp(2.4rem,5vw,3.4rem) clamp(1.1rem,5vw,3.4rem) 2rem}
.footer__top{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between}
footer .brand{color:var(--white)}
.footer__links{display:flex;gap:1.4rem;font-size:.92rem}
.footer__links a{color:#cfc8bd;text-decoration:none}
.footer__links a:hover{color:var(--white)}
.footer__note{max-width:var(--wrap);margin:2rem auto 0;padding-top:1.4rem;border-top:1px solid #2e2a26;
  font-size:.78rem;line-height:1.6;color:#9b948a}

/* ---------- Schmale Screens ---------- */
@media(max-width:900px){
  .hero,.about,.signup{grid-template-columns:1fr}
  .hero__form{position:static}
  .pains__grid,.path__grid{grid-template-columns:1fr}
  .proofs{grid-template-columns:repeat(2,minmax(0,1fr))}
  nav a:not(.navcta){display:none}
  .about__media{max-width:420px;margin:0 auto}
  .about__media img{aspect-ratio:1/1}
  .quote{text-align:left}
}
@media(max-width:520px){
  .facts{grid-template-columns:1fr}
  header{height:72px}
  header .brand{margin-top:12px}
  section{scroll-margin-top:100px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button:hover{transform:none}
}

/* ---------- Scroll-Effekte ----------
   Startzustaende greifen nur, wenn JavaScript laeuft (Klasse js-reveal am
   <html>). Ohne JS bleibt alles sichtbar. */
.js-reveal [data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,.7,.3,1),transform .75s cubic-bezier(.22,.7,.3,1)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}

/* Karten kippen leicht herein statt nur zu faden */
.js-reveal .pains__grid>div,.js-reveal .path__grid>div{transform:translateY(26px) rotateX(7deg);
  transform-origin:50% 0;perspective:800px}
.js-reveal .pains__grid>div.is-in,.js-reveal .path__grid>div.is-in{transform:none}

/* Bildflaechen wischen auf.
   Wichtig: Der Clip liegt auf dem inneren Bild, nicht auf dem beobachteten
   Element — sonst meldet der IntersectionObserver es als unsichtbar und
   loest nie aus, der Wisch bliebe dauerhaft zu. */
.js-reveal [data-reveal="wipe"]{opacity:1;transform:none}
.js-reveal [data-reveal="wipe"] img{clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.22,.7,.3,1)}
.js-reveal [data-reveal="wipe"].is-in img{clip-path:inset(0 0 0 0)}
.js-reveal [data-reveal="scale"]{transform:translateY(24px) scale(.985)}
.js-reveal [data-reveal="scale"].is-in{transform:none}

/* Grosses Zitat: Zeile fuer Zeile von unten */
[data-split] .line{display:block;overflow:hidden}
[data-split] .line>i{display:block;font-style:inherit}
.js-reveal [data-split] .line>i{transform:translateY(110%);
  transition:transform .85s cubic-bezier(.22,.7,.3,1)}
.js-reveal [data-split].is-in .line>i{transform:none}


.progressbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:40;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear;pointer-events:none}
header.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(20,18,16,.06)}

.hero__copy{will-change:transform,opacity}
.teamband{overflow:hidden}
.teamband img{will-change:transform;transform:scale(1.08)}
.about__media .portrait{overflow:hidden}
.about__media .portrait img{will-change:transform}

/* Mitlaufende Anmelde-Leiste, sobald das obere Formular aus dem Bild ist */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.85rem clamp(1rem,4vw,2rem);
  background:rgba(20,18,16,.94);backdrop-filter:blur(10px);color:var(--white);
  transform:translateY(110%);transition:transform .45s cubic-bezier(.22,.7,.3,1);
  padding-bottom:calc(.85rem + env(safe-area-inset-bottom))}
.dock.is-visible{transform:none}
.dock__text{font-size:.9rem;line-height:1.35}
.dock__text b{display:block;color:var(--yellow);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.dock .button{padding:.75rem 1.25rem;white-space:nowrap}
@media(max-width:520px){.dock__text{font-size:.8rem}.dock .button{padding:.7rem 1rem;font-size:.9rem}}

@media(prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .js-reveal [data-reveal="wipe"] img{clip-path:none!important;transition:none!important}
  .js-reveal [data-split] .line>i{transform:none!important;transition:none!important}
  .js-reveal .pains h2::after,.js-reveal .path h2::after{transform:scaleX(1)!important;transition:none!important}
  .progressbar{display:none}
  .teamband img,.about__media .portrait img,.hero__copy{transform:none!important}
  .dock{transition:none}
}

/* ---------- Einzelgespraech (Calendly) ---------- */
.talk{max-width:var(--wrap);margin:0 auto;padding:clamp(2rem,5vw,3.6rem) clamp(1.1rem,5vw,3.4rem)}
.talk__intro{max-width:56ch;margin-bottom:1.8rem}
.talk h1{font-size:clamp(1.8rem,4vw,2.9rem);margin-bottom:1rem}
.calendly-inline-widget{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
@media(max-width:520px){.calendly-inline-widget{height:820px!important}}

/* Kalender-Hinweis */
.calnote{margin-top:.9rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;font-size:.9rem}
.calnote span{color:var(--muted);font-size:.82rem}

/* ---------- Bilderreihe "Das Umfeld" ---------- */
.umfeld{max-width:var(--wrap);margin:0 auto;padding:clamp(1rem,3vw,2rem) clamp(1.1rem,5vw,3.4rem) clamp(2rem,4vw,3rem)}
.umfeld h2{font-size:clamp(1.6rem,2.8vw,2.3rem);max-width:20ch;margin-bottom:1.8rem}
.umfeld__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.umfeld__grid figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.umfeld__grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
@media(max-width:700px){
  .umfeld__grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .umfeld__grid figure:first-child{grid-column:span 2}
}

/* ---------- Danke-Seite nach der Anmeldung ---------- */
.thanks-page{min-height:100vh;background:
  radial-gradient(70% 55% at 15% 0%,var(--yellow-soft) 0%,transparent 72%),var(--cream)}
.thanks-header{position:relative;height:92px;background:transparent;border:0;backdrop-filter:none}
.thanks-header .brand{margin-top:18px}
.thanks-main{max-width:980px;margin:0 auto;padding:clamp(2.3rem,6vw,5rem) clamp(1.1rem,5vw,3.4rem) clamp(3.8rem,7vw,6rem)}
.thanks-hero{text-align:center;max-width:750px;margin:0 auto}
.thanks-check{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 1.4rem;border-radius:50%;
  background:var(--red);color:#fff;box-shadow:0 12px 30px rgba(188,6,38,.22)}
.thanks-check svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.thanks-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:1rem}
.thanks-lead{max-width:620px;margin:0 auto;color:var(--muted);font-size:clamp(1.05rem,2vw,1.24rem)}
.thanks-tasks{margin-top:clamp(3.2rem,7vw,5rem)}
.thanks-tasks__intro{text-align:center;margin-bottom:1.8rem}
.thanks-tasks__intro h2{font-size:clamp(1.7rem,4vw,2.65rem)}
.thanks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.thanks-card{display:flex;flex-direction:column;align-items:flex-start;min-height:390px;padding:clamp(1.5rem,3.5vw,2.2rem);
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.thanks-card--gold{background:var(--yellow);border-color:#ecd06b}
.thanks-card__icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:1.5rem;border-radius:15px;
  background:var(--yellow-soft);color:var(--red)}
.thanks-card--gold .thanks-card__icon{background:rgba(255,255,255,.7);color:var(--ink)}
.thanks-card__icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thanks-card__icon .fill{fill:currentColor;stroke:none}
.thanks-card__step{margin-bottom:.55rem;color:var(--red);font-size:.76rem;font-weight:800;letter-spacing:.14em}
.thanks-card h3{font-size:clamp(1.3rem,2.5vw,1.65rem);margin-bottom:.75rem}
.thanks-card>p:not(.thanks-card__step){color:var(--muted);margin-bottom:1.6rem}
.thanks-card .button{width:100%;margin-top:auto}
.button--dark{background:var(--ink);color:#fff!important}
.button--dark:hover{background:#302b27}
.thanks-footer{padding-top:2rem}
.thanks-footer .footer__top{justify-content:space-between}
@media(max-width:700px){
  .thanks-header{height:78px}
  .thanks-header .brand{margin-top:10px}
  .thanks-grid{grid-template-columns:1fr}
  .thanks-card{min-height:0}
  .thanks-footer .footer__top{align-items:flex-start;flex-direction:column}
  .thanks-footer .footer__links{flex-wrap:wrap;gap:.8rem 1.2rem}
}

/* ============================================================
   Handschrift: seriös, aber nicht steril
   ============================================================ */

/* Textmarker hinter einzelnen Wörtern — das Gelb der Personenmarke als
   echter Markerstrich, leicht schief angesetzt wie von Hand gezogen. */
.mark{
  background:linear-gradient(101deg,transparent .5%,var(--yellow) 2%,var(--yellow) 96%,transparent 99%);
  padding:.06em .28em .1em;border-radius:.25em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.statement .mark{background:linear-gradient(101deg,transparent .5%,rgba(252,226,134,.28) 2%,rgba(252,226,134,.28) 96%,transparent 99%);
  color:var(--yellow)}

/* Handgezogener Unterstrich statt gerader Balken */
.pains h2::after,.path h2::after,.umfeld h2::after{
  content:"";display:block;width:132px;height:11px;margin-top:.9rem;
  background:no-repeat center/100% 100% url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 11'%3E%3Cpath d='M2 7.4C22 3.6 47 2.2 71 3.1c19 .7 38 2.6 58 5.2' \
stroke='%23fce286' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")}
.js-reveal .pains h2::after,.js-reveal .path h2::after,.js-reveal .umfeld h2::after{
  transform:scaleX(0);transform-origin:0 50%;transition:transform .85s cubic-bezier(.22,.7,.3,1) .15s}
.js-reveal .pains h2.is-in::after,.js-reveal .path h2.is-in::after,.js-reveal .umfeld h2.is-in::after{transform:scaleX(1)}

/* Zitate in Serifenkursiv — wärmer und redaktioneller als die Grotesk */
.quote,.statement__text{font-family:Georgia,"Times New Roman",serif}
.quote{font-size:1.1rem;line-height:1.55}
.statement h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em}

/* Bilder wie hingelegte Abzüge: weißer Rand, minimal verdreht */
.umfeld__grid figure{background:#fff;padding:10px 10px 14px;border:1px solid var(--line);
  box-shadow:0 2px 3px rgba(20,18,16,.05),0 14px 30px rgba(20,18,16,.09);
  transition:transform .35s cubic-bezier(.22,.7,.3,1)}
.umfeld .umfeld__grid figure:nth-child(1){transform:rotate(-2.4deg)}
.umfeld .umfeld__grid figure:nth-child(2){transform:rotate(1.4deg)}
.umfeld .umfeld__grid figure:nth-child(3){transform:rotate(-1.1deg)}
.umfeld__grid figure:hover{transform:rotate(0) translateY(-4px)}
.umfeld__grid img{border-radius:6px}
.js-reveal .umfeld__grid figure[data-reveal="wipe"]{opacity:1}

/* Zahlen der Karten als gestempelte Kreise statt nüchterner Ziffern */
.pains .num,.path .num{display:inline-flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border-radius:50%;font-size:.8rem;color:var(--ink);
  background:var(--yellow);box-shadow:0 2px 0 rgba(20,18,16,.08)}
.path .num{background:#fff;border:2px solid var(--red);color:var(--red)}

/* Karten minimal aus der Flucht — nimmt die Maschinen-Anmutung raus */
.pains__grid>div:nth-child(2){transform:translateY(10px)}
.path__grid>div:nth-child(2){transform:translateY(-8px)}
@media(max-width:900px){
  .pains__grid>div:nth-child(2),.path__grid>div:nth-child(2){transform:none}
  .umfeld__grid figure{transform:none!important}
}

/* Feines Papierkorn über der ganzen Seite */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E\
%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E\
%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}

/* Termin-Pille leicht schief, wie aufgeklebt */
.nextdate{transform:rotate(-.8deg);box-shadow:0 2px 0 rgba(20,18,16,.07)}