/* =========================================================
   Rutschfest GmbH — gemeinsames Stylesheet (alle Seiten)
   Helle Farbwelt mit Himmelblau-Akzenten
   ========================================================= */
:root{
  --bg:#F1F6FB; --bg-2:#E5EEF6; --sage:#E1ECF7; --paper:#FFFFFF;
  --ink:#14283A; --muted:#51616F; --muted-2:#6A7884;
  --accent:#1C7FB8; --accent-deep:#135E8C; --accent-light:#6CC1EE; --accent-soft:#D8EAF7;
  --warn:#C0892F;
  --forest:#0F2E45; --forest-2:#173A54; --forest-line:#2A4E68;
  --on-forest:#E7F0F7; --on-forest-muted:#9DB2C2;
  --line:rgba(20,40,58,.13); --line-strong:rgba(20,40,58,.22);
  --display:"Schibsted Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --r:18px; --r-lg:26px; --r-xl:34px; --pill:999px;
  --container:1240px; --pad:clamp(1.1rem,4vw,2.6rem); --section:clamp(4.5rem,9vw,8rem);
  --shadow:0 1px 1px rgba(16,40,64,.04),0 10px 28px -14px rgba(16,40,64,.20),0 34px 60px -34px rgba(16,40,64,.26);
  --shadow-green:0 16px 36px -16px rgba(28,127,184,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:clamp(1rem,1.05vw,1.075rem);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0}
::selection{background:var(--accent);color:#fff}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent-deep)}
.eyebrow--light{color:var(--accent-light)}

/* Buttons */
.btn{--bg:var(--accent);--fg:#fff;position:relative;display:inline-flex;align-items:center;gap:.6em;background:var(--bg);color:var(--fg);padding:.92em 1.5em;border-radius:var(--pill);border:1px solid transparent;font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:-.01em;cursor:pointer;text-decoration:none;transition:transform .4s var(--ease-spring),translate .4s var(--ease-out),background .25s var(--ease),box-shadow .35s var(--ease),color .25s var(--ease)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ar{transform:translateX(4px)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn--accent{box-shadow:var(--shadow-green);overflow:hidden;isolation:isolate}
.btn--accent::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);transform:translateX(-135%);transition:transform .75s var(--ease-out);pointer-events:none}
.btn--accent:hover::before{transform:translateX(135%)}
.btn--accent:hover{box-shadow:0 16px 38px -12px rgba(28,127,184,.62)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{background:rgba(20,40,58,.05)}
.btn--on-dark{--bg:var(--accent);--fg:#fff}
.btn--ghost-light{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}
.plus{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;flex:none;background:transparent;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.plus svg{width:18px;height:18px}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.header__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:1rem;border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.header.is-solid{background:rgba(241,246,251,.88);backdrop-filter:blur(12px)}
.header.is-solid .header__bar{border-color:var(--line)}
.brand{justify-self:center;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;color:#fff}
.brand__mark{width:30px;height:30px;flex:none}
.brand__word{white-space:nowrap}
.brand__fest{color:var(--accent-light)}
.header.is-solid .brand{color:var(--ink)}
.header.is-solid .brand__fest{color:var(--accent)}
.nav{display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-weight:500;font-size:.95rem}
.nav a{text-decoration:none;color:#fff;opacity:.94;position:relative;padding-block:.3rem}
.header.is-solid .nav a{color:var(--ink)}
.nav a.is-current{color:var(--accent-light)}
.header.is-solid .nav a.is-current{color:var(--accent-deep)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent-light);transition:right .3s var(--ease)}
.header.is-solid .nav a::after{background:var(--accent)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a.is-current::after{right:0}
.header__actions{justify-self:end;display:flex;align-items:center;gap:1rem}
.header__phone{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.95rem;color:#fff}
.header.is-solid .header__phone{color:var(--ink)}
.header__phone svg{width:16px;height:16px;color:var(--accent-light)}
.header.is-solid .header__phone svg{color:var(--accent)}
.menu-btn{display:none;background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;cursor:pointer}
.header.is-solid .menu-btn{color:var(--ink);border-color:var(--line-strong)}

/* Mobile-Menü */
.drawer{position:fixed;inset:0;z-index:70;background:var(--forest);color:var(--on-forest);transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s;display:flex;flex-direction:column;padding:var(--pad)}
.drawer.is-open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s linear 0s}
.drawer__top{display:flex;justify-content:space-between;align-items:center}
.drawer__top .menu-btn{display:inline-flex;color:#fff;border-color:rgba(255,255,255,.32)}
.drawer nav{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:1.1rem}
.drawer nav a{font-family:var(--display);font-weight:600;font-size:1.9rem;text-decoration:none;color:#fff;letter-spacing:-.02em}
.drawer__foot{display:flex;flex-direction:column;gap:.6rem;color:var(--on-forest-muted);overflow-wrap:anywhere}

/* Hero (Startseite) */
.hero{padding:0}
.hero__panel{position:relative;margin:14px var(--pad) 0;height:calc(100svh - 28px);min-height:560px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__img--after{transform-origin:58% 72%;animation:heroDrift 28s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.015)}to{transform:scale(1.05)}}
.hero__overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(6,17,28,.42) 0%,rgba(6,17,28,.05) 32%,rgba(6,17,28,.18) 62%,rgba(6,17,28,.72) 100%)}
.hero__content{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:clamp(1.6rem,4vw,3.2rem);color:#fff}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-light);box-shadow:0 0 0 4px rgba(108,193,238,.25)}
.hero h1{font-size:clamp(2.4rem,6vw,5rem);font-weight:800;max-width:17ch;letter-spacing:-.035em;text-shadow:0 2px 30px rgba(6,17,28,.35)}
.hero__sub{margin-top:1.2rem;max-width:46ch;font-size:clamp(1.02rem,1.4vw,1.2rem);color:#E7F0F7}
.hero__cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.9rem}

/* Page-Hero (Unterseiten) */
.pagehero{padding:clamp(6.8rem,11vh,9rem) 0 clamp(2.4rem,5vw,4rem);background:linear-gradient(180deg,var(--sage),var(--bg))}
.pagehero--media{background:var(--sage)}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--muted-2);margin-bottom:1.3rem}
.breadcrumb a{color:var(--muted-2);text-decoration:none}
.breadcrumb a:hover{color:var(--accent-deep)}
.pagehero h1{font-size:clamp(2.2rem,5vw,3.8rem);max-width:18ch;letter-spacing:-.03em}
.pagehero .lead{margin-top:1.1rem;max-width:56ch;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--muted)}

/* Medien-Hero (Unterseiten – Video-/Bild-Panel wie auf der Startseite) */
.mediahero{padding:clamp(5.5rem,9vh,7rem) var(--pad) 0}
.mediahero__panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(540px,80vh,820px);border-radius:30px;overflow:hidden;background:var(--forest);box-shadow:var(--shadow);isolation:isolate}
.mediahero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.2s var(--ease)}
.mediahero__panel.is-playing .mediahero__video{opacity:1}
.mediahero__video.is-veo-crop{transform:scale(1.2);transform-origin:50% 22%}
.mediahero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,17,28,.5) 0%,rgba(6,17,28,.12) 30%,rgba(6,17,28,.3) 56%,rgba(6,17,28,.86) 100%)}
.mediahero__content{position:relative;z-index:2;padding:clamp(1.8rem,4vw,3.4rem);color:#fff;max-width:64ch}
.mediahero .breadcrumb--light{margin-bottom:1.1rem}
.mediahero__eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.mediahero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-light);box-shadow:0 0 0 4px rgba(108,193,238,.25)}
.mediahero h1{font-size:clamp(2.2rem,5.4vw,4.1rem);font-weight:800;max-width:17ch;letter-spacing:-.035em;text-shadow:0 2px 28px rgba(6,17,28,.45)}
.mediahero__lead{margin-top:1.1rem;max-width:50ch;font-size:clamp(1.02rem,1.4vw,1.2rem);color:#E7F0F7;text-shadow:0 1px 16px rgba(6,17,28,.4)}
.mediahero__cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.mediahero__chip{display:inline-flex;align-items:center;gap:.45em;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);color:#fff;padding:.62em 1.05em;border-radius:var(--pill);font-family:var(--display);font-weight:500;font-size:.92rem}
.mediahero__chip strong{font-weight:700;color:#fff}
.breadcrumb--light,.breadcrumb--light a{color:rgba(255,255,255,.82)}
.breadcrumb--light a:hover{color:#fff}

/* Generische Sektionen / Prosa */
.section{padding-block:var(--section)}
.section--sage{background:var(--sage)}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin:2.6rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.18rem;margin:1.8rem 0 .5rem}
.prose p{color:var(--muted);margin-bottom:1.1rem}
.prose strong{color:var(--ink)}
.prose ul{margin:0 0 1.3rem;padding:0;list-style:none;display:grid;gap:.6rem}
.prose ul li{position:relative;padding-left:1.7rem;color:var(--muted)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--rev .figure{order:-1}
.figure{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;position:relative}
.figure img{width:100%;height:100%;object-fit:cover}
.figure figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(6,17,28,.55);backdrop-filter:blur(6px);color:#fff;font-size:.74rem;padding:.4em .8em;border-radius:var(--pill)}

.infocards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.infocard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--shadow)}
.infocard .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center;margin-bottom:1.1rem}
.infocard .ic svg{width:22px;height:22px}
.infocard h3{font-size:1.15rem;margin-bottom:.5rem}
.infocard p{color:var(--muted);font-size:.94rem}

/* Statement / Stats (auch Start) */
.statement{padding-block:var(--section)}
.statement__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.statement h2{font-size:clamp(1.9rem,3.6vw,3.1rem);max-width:18ch}
.statement h2 mark{background:none;color:inherit;box-shadow:inset 0 -.5em 0 var(--accent-soft)}
.statement__aside p{color:var(--muted);margin-bottom:1.6rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid var(--line);padding-top:1.4rem}
.stat__n{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;color:var(--accent-deep)}
.stat__l{font-size:.78rem;color:var(--muted-2);line-height:1.4;margin-top:.2rem}

/* Karten (Start: Anwendung) */
.use{padding-bottom:var(--section)}
.use__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.4rem;flex-wrap:wrap}
.use__head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.card{display:flex;flex-direction:column;gap:1rem}
/* Kein 3D-Tilt auf den Karten: jedes 3D-Transform im Umfeld des rundenden
   overflow-Clips lässt Chromium die Ecken eckig rendern (2x aufgetreten).
   isolation:isolate = Stacking Context, damit der runde Clip auch das
   animiert gezoomte Bild sicher greift. */
.card__media{aspect-ratio:4/5;border-radius:var(--r-lg);position:relative;overflow:hidden;isolation:isolate;box-shadow:var(--shadow);transition:translate .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .9s var(--ease)}
.card:hover .card__media{translate:0 -6px;box-shadow:0 28px 54px -26px rgba(16,40,64,.44)}
.card:hover .card__media img{transform:scale(1.06)}
.card__tag{position:absolute;left:1rem;top:1rem;z-index:2;background:rgba(6,17,28,.5);backdrop-filter:blur(6px);color:#fff;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.4em .8em;border-radius:var(--pill)}
.card__plus{position:absolute;right:1rem;bottom:1rem;z-index:2;border-color:rgba(255,255,255,.5);color:#fff;background:rgba(6,17,28,.3)}
.card a.card__link{position:absolute;inset:0;z-index:3}
.card:hover .card__plus{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(90deg)}
.card h3{font-size:1.3rem}
.card p{color:var(--muted);font-size:.96rem}

/* Kundenstimmen (Start) — Marquee-Laufband: läuft endlos, pausiert bei
   Hover; zwei identische Gruppen ergeben die nahtlose Schleife */
.revs{background:var(--sage)}
.revs__wrap{padding-block:var(--section)}
.revs__head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-bottom:2.6rem}
.revs__head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.revs__sub{color:var(--muted);max-width:44ch}
.mq{position:relative;overflow:hidden;--mq-gap:1rem;padding-block:.5rem;max-width:1920px;margin-inline:auto}
.mq__inner{display:flex;width:max-content;gap:var(--mq-gap);animation:mqScroll 55s linear infinite}
.mq:hover .mq__inner{animation-play-state:paused}
.mq__grp{display:flex;gap:var(--mq-gap);flex:none}
@keyframes mqScroll{to{transform:translateX(calc(-50% - var(--mq-gap)/2))}}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--sage) 12%,transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--sage) 12%,transparent)}
.tcard{width:min(320px,78vw);flex:none;display:flex;flex-direction:column;gap:.85rem;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.38));border-top:1px solid #fff;border-radius:var(--r);padding:1.3rem 1.4rem;box-shadow:0 1px 1px rgba(16,40,64,.03),0 16px 30px -20px rgba(16,40,64,.22)}
.tcard:hover{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.55))}
.tcard__head{display:flex;align-items:center;gap:.8rem}
.tcard__ava{position:relative;width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;color:#fff;font-family:var(--display);font-weight:700;font-size:1.1rem}
.tcard__ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcard__head b{display:block;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.2}
.tcard__loc{display:block;font-size:.78rem;color:var(--muted-2);margin-top:.15rem}
.tcard p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.65}
@media (max-width:760px){.mq::before,.mq::after{display:none}}

/* Ablauf (horizontal) */
.flow{padding-block:var(--section)}
.flow__head{max-width:30ch;margin-bottom:2.6rem}
.flow__head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.step{border-top:2px solid var(--accent);padding-top:1rem}
.step__n{font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--accent-deep);letter-spacing:.1em}
.step h3{font-size:1.18rem;margin:.7rem 0 .5rem}
.step p{color:var(--muted);font-size:.92rem}

/* Ablauf (vertikal, Unterseiten) */
.steps-v{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.steps-v .row{background:var(--bg);padding:1.4rem 1.6rem;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.steps-v .num{font-family:var(--display);font-weight:800;color:var(--accent);font-size:1.25rem;line-height:1.2}
.steps-v h3{font-size:1.12rem;margin-bottom:.3rem}
.steps-v p{color:var(--muted);font-size:.94rem}

/* Pflegekasse-/CTA-Band (Waldgrün) */
.care{background:var(--forest);color:var(--on-forest);border-radius:var(--r-xl);overflow:hidden;position:relative}
.care__wrap{padding-block:var(--section)}
.care__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2rem,5vw,4rem)}
.care__inner::before{content:"";position:absolute;right:-6%;top:-30%;width:46%;height:160%;background:radial-gradient(closest-side,rgba(108,193,238,.18),transparent);pointer-events:none}
.care h2{font-size:clamp(1.8rem,3.4vw,2.8rem);max-width:16ch}
.care h2 em{font-style:normal;color:var(--accent-light)}
.care p{color:var(--on-forest-muted);margin-top:1.1rem;max-width:46ch}
.care__big{font-family:var(--display);font-weight:800;font-size:clamp(3rem,8vw,5.5rem);letter-spacing:-.04em;line-height:1;color:#fff}
.care__big small{display:block;font-size:.9rem;font-weight:500;letter-spacing:.04em;color:var(--on-forest-muted);margin-top:.6rem;font-family:var(--body)}
.care__list{margin-top:1.4rem;display:grid;gap:.6rem;padding:0}
.care__list li{list-style:none;display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:#DCE8F2}
.care__list svg{width:18px;height:18px;color:var(--accent-light);flex:none;margin-top:.15rem}

.cta-band{background:var(--forest);color:var(--on-forest);border-radius:var(--r-xl);padding:clamp(2.4rem,5vw,3.8rem);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:50%;top:-40%;width:60%;height:160%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(108,193,238,.16),transparent);pointer-events:none}
.cta-band h2{font-size:clamp(1.7rem,3.4vw,2.6rem);max-width:22ch;margin:0 auto}
.cta-band p{color:var(--on-forest-muted);margin:1rem auto 0;max-width:48ch}
.cta-band .btnrow{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;position:relative}

/* FAQ */
.faq{max-width:74ch}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--display);font-weight:600;font-size:1.06rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--accent);transition:transform .3s var(--ease);line-height:1}
.faq details[open] summary{color:var(--accent-deep)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:.8rem}
.faq ol{margin:.9rem 0 0;padding-left:1.3rem;color:var(--muted);display:grid;gap:.6rem}
.faq ol li{padding-left:.2rem}
.faq ol li::marker{color:var(--accent);font-family:var(--display);font-weight:700}
.faq ol strong{color:var(--ink);font-family:var(--display);font-weight:600}

/* Normen / Badges */
/* NORMEN — Rutschhemmungs-Skala */
.norms{padding-block:var(--section)}
.normhead{display:grid;grid-template-columns:1.05fr 1fr;gap:1.4rem 3rem;align-items:end}
.normhead__title{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.55rem);line-height:1.06;letter-spacing:-.03em;margin:.55rem 0 0}
.normhead__lead{color:var(--muted);max-width:48ch;margin:0}
.normhead__lead b{color:var(--ink);font-family:var(--display);font-weight:600}

.normscale{margin-top:clamp(2rem,4vw,3.2rem)}
.normscale__label{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);margin:0 0 1.15rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.55em}
.normscale__label span{color:var(--accent-deep);letter-spacing:.02em}

.grades{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;position:relative}
.grades--3{grid-template-columns:repeat(3,1fr)}
.grades--5{grid-template-columns:repeat(5,1fr)}
/* Skala-Linie: Rutschhemmung nimmt nach rechts zu */
.grades::before{content:"";position:absolute;left:1.6rem;right:1.6rem;top:50%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line-strong),var(--accent-light) 62%,var(--accent));opacity:.45;z-index:0}

.grade{position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1rem 1rem;display:flex;flex-direction:column;gap:.16rem;box-shadow:var(--shadow);transition:transform .35s var(--ease),border-color .25s var(--ease),box-shadow .35s var(--ease)}
.grade--sm{padding:.95rem .85rem}
.grade__val{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.grade--sm .grade__val{font-size:clamp(1.15rem,2vw,1.5rem)}
.grade__deg{font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--accent-deep)}
.grade__use{font-size:.78rem;line-height:1.3;color:var(--muted-2);margin-top:.1rem}
.grade__tag{position:absolute;top:-.72rem;left:1rem;background:var(--accent);color:#fff;font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;padding:.34em .72em;border-radius:var(--pill);box-shadow:var(--shadow-green);white-space:nowrap}
.grade.is-active{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--paper) 72%);box-shadow:var(--shadow-green)}
.grade.is-active .grade__val{color:var(--accent-deep)}

.normnote{margin-top:clamp(2rem,4vw,3rem);color:var(--muted);font-size:.96rem;max-width:64ch}
.normnote b{color:var(--ink);font-family:var(--display);font-weight:600}
.normnote a{color:var(--accent-deep);font-weight:600;text-decoration:none;white-space:nowrap}
.normnote a:hover{text-decoration:underline}

/* Definitionstabelle (Normen-Seite) */
.deftable{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:1.4rem}
.deftable .drow{display:grid;grid-template-columns:.8fr 1.2fr;gap:1rem;background:var(--paper);padding:1rem 1.3rem}
.deftable .drow.head{background:var(--bg-2);font-family:var(--display);font-weight:600;color:var(--ink)}
.deftable .k{font-family:var(--display);font-weight:600;color:var(--accent-deep)}
.deftable .k .k-en{display:block;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.deftable .k .k-anh{display:block;font-size:1.05rem;line-height:1.2;color:var(--accent-deep);margin-top:.12rem}
.deftable .k .k-old{display:block;font-family:var(--body);font-weight:500;color:var(--muted-2);font-size:.78rem;margin-top:.3rem}
.deftable .v{color:var(--muted);font-size:.94rem}

/* Footer */
.foot{background:var(--forest);color:var(--on-forest);position:relative;overflow:hidden;padding-top:clamp(4rem,8vw,7rem)}
.foot__cta h2{font-size:clamp(2rem,5vw,3.6rem);max-width:20ch;letter-spacing:-.03em}
.foot__cta a.u{color:#fff;text-decoration:none;box-shadow:inset 0 -3px 0 var(--accent-light);transition:box-shadow .3s var(--ease)}
.foot__cta a.u:hover{box-shadow:inset 0 -1.1em 0 rgba(108,193,238,.85)}
.foot__contact{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.foot__nav{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:3.4rem;font-family:var(--display);font-weight:500}
.foot__nav a{color:#C9DCEA;text-decoration:none;position:relative;padding-bottom:3px}
.foot__nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(201,220,234,.4)}
.foot__nav a:hover{color:#fff}
.foot__mark{font-family:var(--display);font-weight:800;font-size:clamp(5rem,22vw,17rem);letter-spacing:-.05em;line-height:.8;color:rgba(255,255,255,.06);margin-top:1.4rem;user-select:none;pointer-events:none;white-space:nowrap}
.foot__base{border-top:1px solid var(--forest-line);margin-top:1rem;padding-block:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--on-forest-muted)}
.foot__base a{color:var(--on-forest-muted);text-decoration:none}
.foot__base a:hover{color:#fff}

/* Reveal-on-enter */
.fx{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fx.is-in{opacity:1;transform:none}
a:focus-visible,.foot__nav a:focus-visible,.nav a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Skip-Link (Tastatur/Screenreader) */
.skip{position:fixed;top:.7rem;left:.7rem;z-index:200;transform:translateY(-160%);background:var(--accent);color:#fff;padding:.7em 1.1em;border-radius:var(--r);font-family:var(--display);font-weight:600;text-decoration:none;box-shadow:var(--shadow);transition:transform .25s var(--ease)}
.skip:focus{transform:none;outline:3px solid #fff;outline-offset:2px}

/* Responsive */
/* Navigation: ab kleinem Laptop/Tablet aufs Hamburger-Menue umstellen
   (5 Nav-Punkte passen im zentrierten Layout sonst nicht in die Kopfzeile) */
@media (max-width:1240px){
  .nav,.header__phone,.header__actions .btn{display:none}
  .menu-btn{display:inline-flex}
  .header__bar{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start}
}
@media (max-width:980px){
  .statement__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .care__inner{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split--rev .figure{order:0}
  .infocards{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .infocards{grid-template-columns:1fr}
  .deftable .drow{grid-template-columns:1fr;gap:.3rem}
}
@media (max-width:860px){
  .normhead{grid-template-columns:1fr;align-items:start;gap:.9rem}
}
@media (max-width:620px){
  .grades--3,.grades--5{grid-template-columns:1fr 1fr;gap:1.3rem .7rem}
  .grades::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .fx{opacity:1;transform:none}
  .mq{overflow-x:auto}
}

/* =========================================================
   Anfrage-CTA, Trust-Strip, Beispielrechnung, Anfrage-Modal
   ========================================================= */
.header__cta{padding:.6em 1.15em;font-size:.9rem}

/* Trust-Strip */
.trustbar-wrap{padding-top:clamp(1.6rem,3.4vw,2.6rem)}
.trustbar{list-style:none;margin:0;padding:clamp(1rem,2.2vw,1.5rem) clamp(1.1rem,2.6vw,1.9rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem 1.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.trustbar li{display:flex;align-items:center;gap:.75rem}
.trustbar svg{width:34px;height:34px;flex:none;color:var(--accent);background:var(--accent-soft);border-radius:11px;padding:7px}
.trustbar b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.trustbar span{display:block;font-size:.77rem;color:var(--muted);line-height:1.3;margin-top:.1rem}

/* Beispielrechnung im Pflegekasse-Band */
.care__calc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:clamp(1.3rem,2.6vw,1.9rem)}
.care__calc-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);background:var(--accent-light);padding:.4em .85em;border-radius:var(--pill);margin-bottom:1.2rem}
.care__calc-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.care__calc-rows li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.95rem;color:var(--on-forest);padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.13)}
.care__calc-rows b{font-family:var(--display);font-weight:600;color:#fff;text-align:right}
.care__calc-sum{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}
.care__calc-sum span{font-family:var(--display);font-weight:700;font-size:1.1rem;color:#fff}
.care__calc-sum b{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5.5vw,3rem);letter-spacing:-.03em;color:var(--accent-light);line-height:1}
.care__calc-note{margin-top:1.1rem;font-size:.75rem;line-height:1.5;color:var(--on-forest-muted)}

/* Anfrage-Modal */
.modal{position:fixed;inset:0;z-index:120;display:none}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(6,17,28,.55);backdrop-filter:blur(3px);animation:afFade .3s var(--ease)}
.modal__dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 1.6rem));max-height:calc(100svh - 1.6rem);overflow-y:auto;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1.5rem,3.6vw,2.5rem);animation:afPop .35s var(--ease)}
@keyframes afFade{from{opacity:0}to{opacity:1}}
@keyframes afPop{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal__x{position:absolute;top:.85rem;right:.85rem;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:1.45rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .25s var(--ease)}
.modal__x:hover{background:var(--bg-2)}
.modal__head h2{font-size:clamp(1.4rem,3.2vw,2rem);margin:.45rem 0 .35rem}
.modal__sub{color:var(--muted);font-size:.95rem;margin:0 0 1.4rem}

.af{display:flex;flex-direction:column;gap:1.15rem}
.af__label{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink);margin-bottom:.55rem;display:block}
.af__req{color:var(--accent)}
.af__seg{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.af__seg label{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9em 1em;border:1.5px solid var(--line-strong);border-radius:var(--r);font-family:var(--display);font-weight:600;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.af__seg label:hover{border-color:var(--accent)}
.af__seg label.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.af__seg input{position:absolute;opacity:0;width:1px;height:1px}
.af__group{display:none;flex-direction:column;gap:1.1rem;border-top:1px solid var(--line);padding-top:1.2rem;animation:afFade .3s var(--ease)}
.af__group.is-shown{display:flex}
.af__field{display:flex;flex-direction:column}
.af input[type=text],.af input[type=tel],.af input[type=email],.af input[type=number],.af select,.af textarea{font-family:var(--body);font-size:1rem;padding:.72em .9em;border:1px solid var(--line-strong);border-radius:12px;background:var(--paper);color:var(--ink);width:100%}
.af textarea{resize:vertical;min-height:72px}
.af input:focus,.af select:focus,.af textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.af__row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.af__checks{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.af__check{display:flex;align-items:center;gap:.6rem;padding:.62em .85em;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:.92rem;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.af__check:hover{border-color:var(--accent)}
.af__check.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.af__check input{accent-color:var(--accent);width:18px;height:18px;flex:none;margin:0}
.af__send{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.5rem}
.af__send .btn{justify-content:center}
.af__wa{--bg:#1FA855;--fg:#fff;box-shadow:0 14px 30px -16px rgba(31,168,85,.6)}
.af__hint{font-size:.77rem;color:var(--muted-2);text-align:center;margin:0}
.af__err{color:#B23B3B;font-size:.86rem;margin:0;display:none}
.af__err.is-shown{display:block}

@media (max-width:1240px){
  .header__actions a.header__cta{display:inline-flex}
}
@media (max-width:760px){
  .trustbar{grid-template-columns:1fr 1fr;gap:1.1rem}
  .af__row,.af__send{grid-template-columns:1fr}
  .header__cta{padding:.55em .95em;font-size:.85rem}
  .header__cta .ar{display:none}
}
@media (max-width:460px){
  .trustbar{grid-template-columns:1fr}
  .af__checks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .modal__backdrop,.modal__dialog,.af__group{animation:none}
}

/* 6 Navigationspunkte kompakt & einzeilig halten */
.nav{gap:.6rem;font-size:.9rem}
.nav a{white-space:nowrap}

/* Gewerbe-Hero-Video: Crop schiebt die untere/rechte Ecke (Gemini-Wasserzeichen) aus dem Bild */
.mediahero__video.wm-crop{transform:scale(1.2);transform-origin:42% 18%}

/* Gewerbe-Hero: leicht animierter Bild-Crossfade (Platzhalter bis Video) */
.kenburns{position:absolute;inset:0;z-index:0}
.kenburns__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:kbFade 21s var(--ease) infinite}
.kenburns__img:nth-child(2){animation-delay:7s}
.kenburns__img:nth-child(3){animation-delay:14s}
@keyframes kbFade{0%{opacity:0;transform:scale(1.05)}4%{opacity:1}29%{opacity:1}34%{opacity:0}100%{opacity:0;transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){
  .kenburns__img{animation:none;opacity:0}
  .kenburns__img:first-child{opacity:1}
}

/* =========================================================
   Premium-Motion-Upgrade (2026-07-01)
   Grain · Hero-Reveal · Magnetic/Shine · 3D-Tilt · Stagger ·
   Count-Up · Scroll-Fortschritt.  Vanilla · self-hosted · DSGVO.
   Nur transform/opacity/translate; prefers-reduced-motion-sicher.
   ========================================================= */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* Film-Grain — feste, sehr dezente Textur über der Seite */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Scroll-Fortschritt — feine Linie oben (scaleX = GPU-schnell) */
.scrollprog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:65;pointer-events:none;background:transparent}
.scrollprog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,var(--accent-light));
  box-shadow:0 0 10px rgba(28,127,184,.45)}

/* Zahlen tabellarisch ausrichten */
.stat__n,.care__big,.care__big small,.care__calc-sum b,.care__calc-rows b{font-variant-numeric:tabular-nums}

/* Hero-Zeilen-Reveal — reine CSS-Animation (läuft ohne rAF; via `.js` gegated,
   damit der Text ohne JS sichtbar bleibt; reduced-motion killt sie global). */
@keyframes heroLineUp{from{transform:translateY(115%)}to{transform:translateY(0)}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__title .hl{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hero__title .hl>span{display:block}
.js .hero__title .hl>span{animation:heroLineUp .95s var(--ease-out) both}
.js .hero__title .hl:nth-child(1)>span{animation-delay:.12s}
.js .hero__title .hl:nth-child(2)>span{animation-delay:.24s}
.js .hero__sub{animation:heroFadeUp .8s var(--ease-out) .42s both}
.js .hero__cta{animation:heroFadeUp .8s var(--ease-out) .54s both}
/* Sicherheitsnetz: erzwingt den sichtbaren Endzustand, falls die Animation
   nie läuft (pausierter Tab o. Ä.) — Inhalt hängt so nie dauerhaft an Motion. */
.hero.is-shown .hero__title .hl>span{animation:none;transform:none}
.hero.is-shown .hero__sub,.hero.is-shown .hero__cta{animation:none;opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .fx{transition:none!important;transition-delay:0s!important}
  .btn--accent::before{display:none}
}