/* =========================================================
   Hilfsmittel-Lotse: Stylesheet (Prototyp)
   Reines CSS, keine Build-Tools. Design-Tokens siehe :root.
   ========================================================= */

/* Selbst gehostete Schriften (DSGVO, kein Google-Fonts-Request) */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/hanken-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/hanken-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/fraunces-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/fraunces-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --teal:#114E52; --teal-700:#0C3B3E; --teal-050:#E7F0EF;
  --cream:#FBF6EE; --cream-2:#F4ECE0; --paper:#FFFFFF;
  --ink:#22302F; --muted:#5C6A68;
  --cta:#BF4E1E; --cta-700:#A23F16;
  --green:#2F7D53; --gold:#E0A100;
  --border:#E7DBC8; --border-2:#DED0BB;
  --shadow:0 18px 50px -24px rgba(17,78,82,.45);
  --shadow-sm:0 8px 24px -16px rgba(17,78,82,.4);
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:18px; line-height:1.62; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.12; letter-spacing:-.01em; color:var(--teal-700); margin:0}
a{color:var(--teal); text-decoration:none}
p{margin:0 0 1rem}
img{max-width:100%; display:block}
.wrap{max-width:1140px; margin:0 auto; padding:0 22px}

.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:inherit; font-weight:700; font-size:1.06rem;
  border:none; border-radius:999px; padding:.95rem 1.6rem; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn-cta{background:var(--cta); color:#fff; box-shadow:0 10px 22px -10px rgba(191,78,30,.7)}
.btn-cta:hover{background:var(--cta-700); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--teal-700); border:2px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--teal); background:#fff}
.btn-lg{padding:1.1rem 2rem; font-size:1.14rem}
:focus-visible{outline:3px solid var(--cta); outline-offset:3px; border-radius:6px}

/* proto flag */
.proto-flag{background:rgba(17,78,82,.055); color:var(--muted); text-align:center; font-size:.76rem; line-height:1.35; padding:.34rem .9rem; font-weight:500; border-bottom:1px solid var(--border)}

/* Skip-Link (zum Inhalt springen) */
.skip{position:fixed; left:12px; top:-60px; z-index:100; background:var(--teal-700); color:#fff; padding:11px 18px; border-radius:0 0 12px 12px; font-weight:700; text-decoration:none; transition:top .18s ease}
.skip:focus{top:0; outline:3px solid var(--gold); outline-offset:2px}

/* top bar */
.topbar{background:var(--teal-700); color:#EAF3F1; font-size:.94rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 22px}
.topbar .tb-left{display:flex; align-items:center; gap:.5rem; opacity:.92}
.topbar a{color:#fff; font-weight:700}
.topbar .dot{width:8px;height:8px;border-radius:50%;background:#7FD1A6;display:inline-block;box-shadow:0 0 0 3px rgba(127,209,166,.25)}
@media(max-width:640px){ .topbar .tb-left{display:none} .topbar .wrap{justify-content:center} }

/* header */
header.site{position:sticky; top:0; z-index:40; background:rgba(251,246,238,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:.75rem 22px}
.brand{display:flex; align-items:center; gap:.65rem; font-family:"Fraunces",serif; font-weight:700; font-size:1.4rem; color:var(--teal-700)}
.brand .mark{width:40px;height:40px;flex:0 0 40px}
.nav{display:flex; align-items:center; gap:1.5rem}
.nav a.lnk{color:var(--ink); font-weight:600; font-size:1rem}
.nav a.lnk:hover{color:var(--teal)}
.phone-pill{display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--teal-700)}
.phone-pill .num{font-size:1.12rem}
@media(max-width:860px){ .nav .lnk{display:none} }

/* Mobiles Menü: Hamburger-Button */
.nav-toggle{display:none; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--border); border-radius:12px; background:var(--paper); color:var(--teal-700); cursor:pointer; flex:0 0 auto; padding:0}
.nav-toggle svg{width:24px; height:24px}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

/* Mobiles Menü: Schublade + Abdunklung */
.m-backdrop{position:fixed; inset:0; background:rgba(17,32,33,.5); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:60}
.m-backdrop.open{opacity:1; visibility:visible}
.m-drawer{position:fixed; top:0; right:0; height:100%; width:min(86vw,342px); background:var(--cream); box-shadow:-14px 0 46px rgba(17,32,33,.22); transform:translateX(100%); transition:transform .28s ease; z-index:61; display:flex; flex-direction:column; padding:16px 20px calc(22px + env(safe-area-inset-bottom)); overflow-y:auto}
.m-drawer.open{transform:translateX(0)}
.m-drawer .m-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.m-drawer .m-title{font-family:"Fraunces",serif; font-weight:700; font-size:1.25rem; color:var(--teal-700)}
.m-drawer .m-x{width:44px; height:44px; border:1px solid var(--border); border-radius:12px; background:var(--paper); color:var(--teal-700); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.m-drawer .m-x svg{width:24px; height:24px}
.m-drawer a.m-lnk{display:block; padding:15px 4px; font-size:1.12rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--border)}
.m-drawer a.m-lnk:hover,.m-drawer a.m-lnk:focus-visible{color:var(--teal)}
.m-drawer .m-call{margin-top:20px; display:flex; align-items:center; justify-content:center; gap:.6rem; background:var(--cta); color:#fff; font-weight:800; font-size:1.12rem; padding:15px; border-radius:14px; line-height:1.15}
.m-drawer .m-call small{display:block; font-weight:600; font-size:.82rem; opacity:.9}
.m-drawer .m-hours{margin-top:12px; font-size:.9rem; color:var(--muted); text-align:center}

/* Fester Anruf-Balken (nur Mobil) */
.callbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:55; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(251,246,238,.96); backdrop-filter:blur(8px); border-top:1px solid var(--border)}
.callbar a{display:flex; align-items:center; justify-content:center; gap:.55rem; background:var(--cta); color:#fff; font-weight:800; font-size:1.12rem; padding:14px; border-radius:14px; box-shadow:0 6px 18px rgba(191,78,30,.28); line-height:1.1}
.callbar a small{font-weight:600; font-size:.82rem; opacity:.92}

body.m-open{overflow:hidden}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .callbar{display:block}
  body{padding-bottom:80px}
}
@media(max-width:640px){ .phone-pill{display:none} }

/* hero */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:
  radial-gradient(1100px 460px at 88% -8%, rgba(17,78,82,.10), transparent 60%),
  radial-gradient(700px 380px at 6% 110%, rgba(191,78,30,.08), transparent 60%);}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; padding:56px 22px 40px; align-items:center}

/* Startseiten-Hero mit echtem Foto + warmem Scrim */
.hero-home{background:#0C3B3E url(../assets/img/hero.jpg) center 28%/cover no-repeat}
.hero-home::before{content:""; position:absolute; inset:0; background:
  linear-gradient(103deg, rgba(9,42,45,.95) 0%, rgba(10,48,51,.9) 38%, rgba(12,59,62,.66) 66%, rgba(15,72,76,.44) 100%),
  radial-gradient(760px 420px at 94% -8%, rgba(191,78,30,.20), transparent 62%);}
.hero-home .wrap{padding-top:64px; padding-bottom:58px}
.hero-home .hero-copy h1{color:#fff}
.hero-home .hero-copy .lead{color:#D8E5E2; max-width:34ch}
.hero-home .hero-copy .sweep{color:#F4ECE0}
.hero-home .trust-chips{color:#EAF3F1}
.hero-home .trust-chips svg{stroke:#8FD3C4}
.hero-home .eyebrow{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.30); backdrop-filter:blur(2px)}
.hero-home .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06)}
.hero-home .btn-ghost:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7)}
@media(max-width:820px){
  .hero-home{background-position:center 20%}
  .hero-home::before{background:linear-gradient(180deg, rgba(9,42,45,.9) 0%, rgba(10,48,51,.92) 55%, rgba(12,59,62,.95) 100%)}
}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; color:var(--cta-700); background:#fff; border:1px solid var(--border-2); padding:.4rem .8rem; border-radius:999px}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem); margin:.9rem 0 0}
.hero h1 .sweep{position:relative; white-space:nowrap; color:var(--teal)}
@media(max-width:640px){ .hero h1 .sweep{white-space:normal} }
.hero h1 .sweep::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.16em; background:var(--cta); opacity:.28; border-radius:4px; transform:scaleX(0); transform-origin:left; animation:sweep .9s cubic-bezier(.16,1,.3,1) 1.05s forwards}
.lead{font-size:1.2rem; color:var(--muted); margin-top:1rem; max-width:33ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}
.trust-chips{display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin-top:1.7rem; font-size:.98rem; color:var(--teal-700); font-weight:600}
.trust-chips span{display:inline-flex; align-items:center; gap:.45rem}
.stars{color:var(--gold); letter-spacing:2px}

/* reveal */
.reveal{opacity:0; transform:translateY(14px); animation:rise .8s cubic-bezier(.16,1,.3,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.22s}.d3{animation-delay:.4s}.d4{animation-delay:.56s}.d5{animation-delay:.72s}
@keyframes rise{to{opacity:1; transform:none}}
@keyframes sweep{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1; transform:none}
  .hero h1 .sweep::after{animation:none; transform:scaleX(1)}
  html{scroll-behavior:auto}
}

/* configurator */
.konf{background:var(--paper); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.konf-head{background:linear-gradient(180deg,var(--teal),var(--teal-700)); color:#fff; padding:18px 22px}
.konf-head .k-title{font-family:"Fraunces",serif; font-weight:600; font-size:1.28rem}
.konf-head .k-sub{opacity:.85; font-size:.95rem}
.progress{height:6px; background:rgba(255,255,255,.25); border-radius:99px; margin-top:14px; overflow:hidden}
.progress > i{display:block; height:100%; background:#fff; border-radius:99px; width:25%; transition:width .35s cubic-bezier(.16,1,.3,1)}
.konf-body{padding:22px}
.step-label{font-size:.85rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cta-700)}
.q{font-family:"Fraunces",serif; font-size:1.32rem; color:var(--teal-700); margin:.25rem 0 1rem}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.opt{display:flex; align-items:center; gap:.6rem; text-align:left; background:var(--cream); border:1.5px solid var(--border-2); border-radius:12px; padding:.75rem .8rem; cursor:pointer; font:inherit; font-weight:600; color:var(--ink); transition:.15s}
.opt:hover{border-color:var(--teal); background:#fff; transform:translateY(-1px)}
.opt.sel{border-color:var(--teal); background:var(--teal-050); box-shadow:inset 0 0 0 1px var(--teal)}
.opt .ic{width:26px;height:26px;flex:0 0 26px;color:var(--teal)}
.field{margin-bottom:12px}
.field label{display:block; font-weight:600; font-size:.95rem; margin-bottom:.3rem; color:var(--teal-700)}
.field input{width:100%; font:inherit; padding:.8rem .9rem; border:1.5px solid var(--border-2); border-radius:11px; background:var(--cream)}
.field input:focus{background:#fff; border-color:var(--teal)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color:var(--muted); margin:.4rem 0 1rem}
.consent input{margin-top:.25rem; width:20px; height:20px; flex:0 0 20px; accent-color:var(--teal)}
.konf-foot{display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:.4rem}
.link-back{background:none; border:none; color:var(--muted); font:inherit; font-weight:600; cursor:pointer; padding:.6rem .2rem}
.link-back:hover{color:var(--teal)}
.mini-trust{display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted); margin-top:1rem; border-top:1px solid var(--border); padding-top:.9rem}
.thanks{text-align:center; padding:12px 6px}
.thanks .badge{width:66px;height:66px;margin:0 auto 12px; border-radius:50%; background:var(--teal-050); display:grid; place-items:center; color:var(--green)}
.summary{background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:.9rem 1rem; text-align:left; font-size:.95rem; margin:1rem 0}
.summary b{color:var(--teal-700)}

/* siegel / trust bar */
.siegel{background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.siegel .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 30px; padding:18px 22px}
.siegel .item{display:inline-flex; align-items:center; gap:.55rem; color:var(--teal-700); font-weight:600; font-size:.98rem}
.siegel .item svg{color:var(--green)}
.siegel .rate b{color:var(--ink)}
.siegel .sep{width:1px; height:26px; background:var(--border-2)}
@media(max-width:720px){ .siegel .sep{display:none} }

/* sections */
section{padding:64px 0}
.sec-head{max-width:60ch}
.sec-head.center{margin:0 auto; text-align:center}
.sec-head .kicker{font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; color:var(--cta-700)}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem); margin:.5rem 0 .6rem}
.sec-head p{color:var(--muted); font-size:1.1rem}

/* category grid */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px}
.cat{display:flex; flex-direction:column; align-items:stretch; text-align:left; background:var(--paper); border:1px solid var(--border); border-radius:var(--r); padding:0; overflow:hidden; cursor:pointer; font:inherit; color:var(--ink); transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease}
.cat:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--border-2)}
.cat-img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .35s ease}
.cat:hover .cat-img{transform:scale(1.045)}
.cat-body{display:flex; flex-direction:column; gap:.2rem; padding:14px 16px 16px}
.cat b{font-size:1.08rem; color:var(--teal-700)}
.cat .cat-sub{font-size:.92rem; color:var(--muted)}
@media(max-width:900px){ .cats{grid-template-columns:repeat(2,1fr)} }

/* topic links (Direktlinks zu allen Kategorieseiten) */
.topics{margin-top:26px}
.topics .tl-lead{font-weight:600; color:var(--muted); font-size:.98rem; margin-bottom:.7rem}
.topic-links{display:flex; flex-wrap:wrap; gap:9px}
.topic-links a{display:inline-flex; align-items:center; background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:.5rem .95rem; color:var(--teal-700); font-weight:600; font-size:.95rem; transition:.15s}
.topic-links a:hover{border-color:var(--teal); background:var(--teal-050); transform:translateY(-1px)}

/* Hilfsmittel-Bild: Banner auf Unterseiten */
.catbanner{border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.catbanner img{width:100%; height:360px; object-fit:cover; display:block}
@media(max-width:640px){ .catbanner img{height:220px} }

/* Kontakt-Liste (Kontakt-Seite) */
.contact-list{display:flex; flex-direction:column; gap:12px; margin-top:1.7rem; max-width:34rem}
.contact-item{display:flex; align-items:center; gap:.9rem; background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:14px 16px; color:var(--ink); transition:.15s}
.contact-item:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.contact-item .ci-ic{width:44px; height:44px; flex:0 0 44px; border-radius:11px; background:var(--teal-050); color:var(--teal); display:grid; place-items:center}
.contact-item b{display:block; color:var(--teal-700); font-size:1.1rem}
.contact-item small{display:block; color:var(--muted); font-size:.9rem}

/* stats band */
.stats{background:var(--teal-050); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center}
.stat .num{font-family:"Fraunces",serif; font-weight:700; font-size:clamp(2rem,4vw,2.9rem); color:var(--teal)}
.stat .lab{color:var(--muted); font-weight:600; font-size:.98rem; margin-top:.2rem}
@media(max-width:720px){ .stats .grid{grid-template-columns:1fr 1fr; gap:26px} }

/* split photo + copy */
.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.split.rev .txt{order:2}
.split .txt h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.6rem}
.split .txt p{color:var(--muted); font-size:1.08rem}
.figure{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)}
.figure img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.figure.wide img{aspect-ratio:3/2}
.figure .cap{position:absolute; left:12px; bottom:12px; background:rgba(12,59,62,.82); color:#EAF3F1; font-size:.76rem; font-weight:600; padding:.3rem .6rem; border-radius:8px; backdrop-filter:blur(3px)}
.badge-float{position:absolute; right:-14px; top:22px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); padding:.7rem .9rem; display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--teal-700)}
.badge-float .ic{width:34px;height:34px;background:var(--teal-050);border-radius:9px;display:grid;place-items:center;color:var(--green)}
.checklist{list-style:none; padding:0; margin:1rem 0 1.5rem}
.checklist li{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.6rem; color:var(--ink)}
.checklist svg{color:var(--green); flex:0 0 22px; margin-top:.15rem}
@media(max-width:820px){ .split{grid-template-columns:1fr; gap:26px} .split.rev .txt{order:0} .badge-float{right:12px} }

/* band (teal) */
.band{background:var(--teal); color:#EAF3F1}
.band h2{color:#fff}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:30px}
.fact{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:var(--r); padding:24px}
.fact .big{font-family:"Fraunces",serif; font-size:2.3rem; font-weight:700; color:#fff}
.fact p{color:#CFE3E0; margin:.3rem 0 0}
@media(max-width:820px){ .facts{grid-template-columns:1fr} }

/* steps 3 */
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px}
.s3{background:var(--paper); border:1px solid var(--border); border-radius:var(--r); padding:26px 24px}
.s3 .n{font-family:"Fraunces",serif; font-size:1.15rem; font-weight:700; color:#fff; background:var(--cta); width:38px;height:38px;border-radius:50%; display:grid;place-items:center; margin-bottom:12px}
.s3 h3{font-size:1.24rem; margin-bottom:.35rem}
.s3 p{color:var(--muted); margin:0}
@media(max-width:820px){ .steps3{grid-template-columns:1fr} }

/* testimonials */
.testi-head{display:flex; align-items:center; justify-content:center; gap:.7rem; margin-top:.6rem; color:var(--muted); font-weight:600}
.testi{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
.tcard{background:var(--paper); border:1px solid var(--border); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.tcard .qs{color:var(--gold); letter-spacing:2px; font-size:1.05rem}
.tcard blockquote{margin:.6rem 0 1.1rem; font-size:1.06rem; color:var(--ink); line-height:1.55}
.tcard .who{display:flex; align-items:center; gap:.7rem; margin-top:auto}
.tcard .who img{width:46px; height:46px; border-radius:50%; border:1px solid var(--border)}
.tcard .who b{color:var(--teal-700); display:block; font-size:.98rem}
.tcard .who span{color:var(--muted); font-size:.86rem}
@media(max-width:820px){ .testi{grid-template-columns:1fr} }

/* founder quote */
.founder{display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; background:var(--paper); border:1px solid var(--border); border-radius:24px; padding:34px; box-shadow:var(--shadow-sm)}
.founder .fimg{border-radius:18px; overflow:hidden; border:1px solid var(--border)}
.founder .fimg img{width:100%; aspect-ratio:1/1; object-fit:cover}
.founder .quote{font-family:"Fraunces",serif; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.35; color:var(--teal-700)}
.founder .sig{margin-top:1rem; font-weight:700; color:var(--ink)}
.founder .sig span{display:block; color:var(--muted); font-weight:600; font-size:.95rem}
@media(max-width:820px){ .founder{grid-template-columns:1fr; gap:22px} .founder .fimg{max-width:220px} }

/* why */
.why{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:34px}
.val{display:flex; gap:1rem; background:var(--paper); border:1px solid var(--border); border-radius:var(--r); padding:22px}
.val .ic{width:30px;height:30px;flex:0 0 30px;color:var(--green)}
.val h3{font-size:1.16rem; margin-bottom:.25rem}
.val p{color:var(--muted); margin:0; font-size:1rem}
@media(max-width:720px){ .why{grid-template-columns:1fr} }

/* faq */
.faq{max-width:820px; margin:28px auto 0}
.ac{border:1px solid var(--border); border-radius:14px; background:var(--paper); margin-bottom:12px; overflow:hidden}
.ac button{width:100%; text-align:left; background:none; border:none; font:inherit; font-weight:700; color:var(--teal-700); font-size:1.08rem; padding:18px 20px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.ac .a-body{padding:0 20px; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; color:var(--muted)}
.ac.open .a-body{padding:0 20px 18px; max-height:340px}
.ac .chev{transition:transform .3s ease; color:var(--cta)}
.ac.open .chev{transform:rotate(180deg)}

/* cta band */
.cta-band{background:linear-gradient(135deg,var(--cta),#9E3C13); color:#fff; border-radius:26px; padding:46px; text-align:center; box-shadow:var(--shadow)}
.cta-band h2{color:#fff; font-size:clamp(1.7rem,3vw,2.3rem)}
.cta-band p{color:#FCE7DC; max-width:52ch; margin:.6rem auto 1.5rem; font-size:1.12rem}
.cta-band .btn-cta{background:#fff; color:var(--cta-700)}
.cta-band .btn-cta:hover{background:#FFF3EC}

/* footer */
footer{background:var(--teal-700); color:#C7DAD7; padding:52px 0 30px; font-size:.95rem; margin-top:20px}
footer h4{color:#fff; font-family:"Hanken Grotesk"; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 .7rem}
.fcols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
footer a{color:#C7DAD7; display:block; padding:.2rem 0}
footer a:hover{color:#fff}
.foot-note{border-top:1px solid rgba(255,255,255,.15); margin-top:30px; padding-top:20px; color:#9FBBB7; font-size:.85rem}
@media(max-width:820px){ .fcols{grid-template-columns:1fr 1fr} .hero .wrap{grid-template-columns:1fr; padding-top:34px} .opts{grid-template-columns:1fr} .row2{grid-template-columns:1fr} }

/* ---- Topbar: Partner-Link ---- */
.topbar .tb-partner{color:#EAF3F1; font-weight:600; opacity:.85}
.topbar .tb-partner:hover{opacity:1; text-decoration:underline}
.topbar .tb-sep{margin:0 .55rem; opacity:.5}

/* ---- Unterseiten-Navigation (Kategorie-Hub + 4 Unterseiten) ---- */
.subnav{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0}
.subnav a{display:inline-flex; align-items:center; background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:.5rem .95rem; color:var(--teal-700); font-weight:600; font-size:.95rem; transition:.15s}
.subnav a:hover{border-color:var(--teal); background:var(--teal-050)}
.subnav a.active{background:var(--teal); color:#fff; border-color:var(--teal)}
.subnav a.active:hover{background:var(--teal-700)}

/* ---- Pflegegrad-Rechner (Ergebnis) ---- */
.pg-score{width:96px; height:96px; margin:0 auto 14px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:"Fraunces",serif; font-size:2.6rem; font-weight:700; line-height:1}
.pg-score span{font-family:"Hanken Grotesk",sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; margin-top:.2rem}
.pg-scale{height:12px; background:var(--teal-050); border:1px solid var(--border); border-radius:99px; overflow:hidden; margin:18px 0 4px}
.pg-scale i{display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--teal)); border-radius:99px; transition:width .6s cubic-bezier(.16,1,.3,1)}
.pg-scale-lab{display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); font-weight:600; margin-bottom:14px}

/* ---- Kategorieseiten (Template) ---- */
.crumbs{font-size:.9rem; color:var(--muted); padding:16px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{margin:0 .45rem; opacity:.6}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:1.8rem 0 .6rem}
.prose h3{font-size:1.25rem; margin:1.4rem 0 .4rem; color:var(--teal)}
.prose p{font-size:1.08rem; color:var(--ink)}
.ctable{width:100%; border-collapse:collapse; margin-top:22px; background:var(--paper); border:1px solid var(--border); border-radius:var(--r); overflow:hidden}
.ctable th,.ctable td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:top}
.ctable thead th{background:var(--teal); color:#fff; font-weight:700; font-size:.98rem}
.ctable tbody tr:nth-child(even){background:var(--cream)}
.ctable tbody tr:last-child td{border-bottom:none}
.ctable .price{font-weight:700; color:var(--teal-700); white-space:nowrap}
.related{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px}
.rel{display:flex; align-items:center; gap:.6rem; background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:14px; color:var(--teal-700); font-weight:600; transition:.15s}
.rel:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.rel .ic{width:24px; height:24px; color:var(--teal); flex:0 0 24px}
.note-box{background:var(--teal-050); border:1px solid var(--border); border-left:4px solid var(--teal); border-radius:12px; padding:16px 18px; margin:22px 0; color:var(--teal-700)}
@media(max-width:820px){
  .related{grid-template-columns:1fr 1fr}
  .ctable thead{display:none}
  .ctable td{display:block; border:none; padding:4px 16px}
  .ctable tr{display:block; border-bottom:1px solid var(--border); padding:10px 0}
  .ctable td::before{content:attr(data-l); display:block; font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
}

/* ============ Ratgeber-Magazin ============ */
.mag-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.mag-card{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease}
.mag-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--border-2)}
.mag-card:hover img{transform:scale(1.04)}
.mag-card .mc-imgwrap{overflow:hidden}
.mag-card img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .35s ease}
.mag-card .mc-body{display:flex; flex-direction:column; gap:.5rem; padding:18px 20px 22px; flex:1}
.mag-card .mc-tag{font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cta-700)}
.mag-card h3{font-size:1.2rem; color:var(--teal-700); line-height:1.25}
.mag-card p{color:var(--muted); font-size:.96rem; flex:1}
.mag-card .mc-more{font-weight:700; color:var(--teal); font-size:.95rem}
@media(max-width:900px){ .mag-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .mag-grid{grid-template-columns:1fr} }

/* ============ Artikel ============ */
.article{max-width:722px; margin:0 auto; padding:0 22px}
.art-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; color:var(--muted); font-size:.92rem; margin-bottom:.4rem}
.art-meta .tag{background:var(--teal-050); color:var(--teal-700); font-weight:700; padding:.2rem .6rem; border-radius:999px; font-size:.8rem}
.art-figure{margin:24px 0 6px}
.art-figure img{width:100%; max-height:420px; object-fit:cover; border-radius:16px; display:block}
.art-figure figcaption{color:var(--muted); font-size:.85rem; margin-top:.5rem; text-align:center}
.prose{font-size:1.09rem; line-height:1.75; color:var(--ink)}
.prose h2{font-size:1.5rem; color:var(--teal-700); margin:1.9rem 0 .6rem}
.prose h3{font-size:1.16rem; color:var(--teal-700); margin:1.4rem 0 .4rem}
.prose p{margin:.7rem 0}
.prose ul{margin:.6rem 0 .8rem 1.15rem; display:flex; flex-direction:column; gap:.4rem}
.prose li{padding-left:.15rem}
.prose strong{color:var(--teal-700)}
.art-toc{background:var(--cream-2); border:1px solid var(--border); border-radius:14px; padding:16px 20px; margin:22px 0}
.art-toc b{color:var(--teal-700); display:block; margin-bottom:.4rem; font-size:.95rem}
.art-toc a{display:block; color:var(--ink); padding:.22rem 0; font-size:.98rem}
.art-toc a:hover{color:var(--cta-700)}
.art-cta{background:linear-gradient(180deg,var(--teal),var(--teal-700)); color:#fff; border-radius:18px; padding:28px 26px; margin:34px 0 10px; text-align:center}
.art-cta h3{color:#fff; font-size:1.3rem}
.art-cta p{color:#CFE3E0; margin:.5rem auto 1.1rem; max-width:46ch}

/* Häkchen-Liste (Lead-Seiten) */
.ticks{list-style:none; margin:20px 0 4px; padding:0; display:flex; flex-direction:column; gap:.6rem}
.ticks li{display:flex; align-items:flex-start; gap:.6rem; color:var(--ink); font-size:1.04rem; font-weight:500}
.ticks li svg{flex:0 0 20px; margin-top:2px; color:var(--green)}

/* ============ Varianten + Auswahlhilfe (Kategorie-Hubs) ============ */
.variants{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:22px}
.variant{background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:18px 20px; transition:border-color .18s ease, box-shadow .2s ease}
.variant:hover{border-color:var(--border-2); box-shadow:var(--shadow-sm)}
.variant h3{font-size:1.08rem; color:var(--teal-700); margin:0 0 .35rem}
.variant p{color:var(--muted); font-size:.95rem; margin:0; line-height:1.55}
.chooser-split{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:stretch; margin-top:22px}
.chooser-aid{background:var(--cream-2); border:1px solid var(--border); border-radius:16px; padding:20px 22px}
.chooser-aid h3{font-size:1.05rem; color:var(--teal-700); margin:0 0 .4rem}
.aid-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .8rem; padding:.65rem 0; border-bottom:1px solid var(--border)}
.aid-row:last-child{border-bottom:none}
.aid-when{flex:1 1 58%; color:var(--ink); font-size:.95rem}
.aid-pick{flex:1 1 34%; color:var(--teal-700); font-weight:600; font-size:.93rem}
.aid-pick::before{content:"→ "; color:var(--cta)}
.chooser-figure{margin:0; display:flex}
.chooser-figure img{width:100%; height:100%; min-height:220px; object-fit:cover; border-radius:16px; display:block}
@media(max-width:820px){ .variants{grid-template-columns:1fr} .chooser-split{grid-template-columns:1fr} .chooser-figure{order:-1} .chooser-figure img{min-height:200px; max-height:260px} }