/* Startportal (E10.3, Design E10.4): Tokens aus tokens.css. Karten mit feiner Linie, Schatten nur am Produktbild. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--schrift-sans);font-size:17px;line-height:1.65}
h1,h2,h3{font-family:var(--schrift-serif);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.6rem + 3vw,3.8rem)} h2{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.5rem)} h3{font-size:1.25rem}
p{margin:0;max-width:62ch} a{color:var(--akzent)}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:24px}
header.kopf{position:sticky;top:0;z-index:5;background:rgba(248,245,238,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.wort{font-family:var(--schrift-serif);font-size:1.6rem;font-weight:600;color:var(--akzent);text-decoration:none;letter-spacing:-.02em}
nav.haupt{display:flex;gap:28px;align-items:center;margin-left:auto}
nav.haupt a{color:var(--text);text-decoration:none;font-size:.98rem} nav.haupt a:hover,nav.haupt a.aktiv{color:var(--akzent)}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--akzent);color:var(--auf-akzent)!important;font-weight:600;text-decoration:none;border:1px solid var(--akzent)}
.knopf:hover{background:var(--akzent-tief)} .knopf.klein{min-height:42px;padding:0 20px;font-size:.95rem}
.knopf.leise{background:transparent;color:var(--akzent)!important} .knopf.leise:hover{background:var(--akzent-hell)}
.menuknopf{display:none;background:none;border:1px solid var(--linie);border-radius:999px;padding:8px 16px;font:inherit;color:var(--text)}
.label{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-leise);font-weight:600}
section{padding-block:112px} section.eng{padding-block:72px}
.brot{padding-top:32px;font-size:.9rem;color:var(--text-leise)} .brot a{color:var(--text-leise)}
.hero{padding-block:88px 104px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.hero h1{margin:18px 0 24px} .hero p.lead{font-size:1.2rem;color:var(--text-leise)}
.aktion{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:40px}
.kopfzeile{margin-bottom:56px} .kopfzeile h2{margin-top:14px;padding-bottom:20px;border-bottom:1px solid var(--linie);max-width:none}
.kopfzeile p{margin-top:20px;color:var(--text-leise)}
.raster{display:grid;gap:0 56px;grid-template-columns:1fr}
@media(min-width:700px){.raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.raster.drei{grid-template-columns:repeat(3,1fr)}}
.kachel{border-top:2px solid var(--akzent);padding:22px 0 44px;display:block;text-decoration:none;color:inherit}
.kachel h3{margin-bottom:10px} .kachel p{color:var(--text-leise);font-size:1rem}
.kachel .mehr{display:inline-block;margin-top:14px;color:var(--akzent);font-weight:600;font-size:.95rem}
a.kachel:hover h3{color:var(--akzent)}
.sym{width:32px;height:32px;margin-bottom:16px;stroke:var(--akzent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.schritte{display:grid;gap:48px;grid-template-columns:1fr;counter-reset:s}
@media(min-width:800px){.schritte{grid-template-columns:repeat(3,1fr);gap:56px}}
.schritt .zahl{font-family:var(--schrift-serif);font-size:3.6rem;line-height:1;color:var(--akzent);display:block;margin-bottom:14px}
.schritt h3{margin-bottom:10px} .schritt p{color:var(--text-leise)}
.sand{background:var(--flaeche)}
.nicht{background:var(--flaeche);border-left:3px solid var(--akzent);padding:28px 32px;border-radius:0 var(--radius-m) var(--radius-m) 0}
.nicht h3{margin-bottom:10px}
.cta{text-align:center;background:var(--akzent-hell)} .cta h2{max-width:20ch;margin:0 auto 20px} .cta p{margin:0 auto 36px;color:var(--akzent-tief)}
.cta .aktion{justify-content:center;margin:0}
.pakete{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:900px){.pakete{grid-template-columns:repeat(3,1fr)}}
.paket{border-top:2px solid var(--linie);padding-top:22px}.paket .preis{font-family:var(--schrift-serif);font-size:2.4rem;color:var(--akzent);margin:6px 0 10px}
.paket p{color:var(--text-leise)}
.band{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
details{border-top:1px solid var(--linie);padding:20px 0} details:last-of-type{border-bottom:1px solid var(--linie)}
summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between} summary::after{content:"+";color:var(--akzent);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"\2212"} details p{margin-top:12px;color:var(--text-leise)}
footer{background:var(--flaeche);border-top:1px solid var(--linie);padding-block:48px 32px;font-size:.9rem}
.fuss{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:800px){.fuss{grid-template-columns:1.3fr 1.4fr 1fr 1fr}}
.fuss h4{margin:0 0 14px;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-leise)}
.fuss a{display:block;color:var(--text);text-decoration:none;padding:2px 0;line-height:1.5} .fuss a:hover{color:var(--akzent)}
.fuss-quellen{columns:2;column-gap:24px} .fuss-quellen a{break-inside:avoid}
.fuss-fakten{list-style:none;margin:14px 0 0;padding:0;color:var(--text-leise);font-size:.88rem} .fuss-fakten li{padding:2px 0 2px 18px;position:relative} .fuss-fakten li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--akzent)}
.klein-text{margin-top:48px;padding-top:24px;border-top:1px solid var(--linie);color:var(--text-leise);font-size:.85rem;max-width:none}
.karten2{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:800px){.karten2{grid-template-columns:1fr 1fr}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-l);padding:40px}
.karte h2{font-size:1.8rem;margin-bottom:12px}.karte p{color:var(--text-leise);margin-bottom:24px}
.karte .knopf{width:100%;margin-bottom:12px}
.feld{display:block;margin-bottom:16px} .feld span{display:block;font-size:.88rem;font-weight:600;color:var(--text-leise);margin-bottom:6px}
.feld input{width:100%;min-height:52px;font:inherit;padding:0 16px;border:1px solid var(--linie);border-radius:var(--radius-m);background:var(--bg)}
.feld select{width:100%;min-height:52px;font:inherit;padding:0 12px;border:1px solid var(--linie);border-radius:var(--radius-m);background:var(--bg)}
.feld select:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.trenner{text-align:center;color:var(--text-leise);font-size:.9rem;margin:18px 0}
@media(max-width:860px){
 .hero .wrap{grid-template-columns:1fr;gap:40px}
 section{padding-block:72px} .hero{padding-block:32px 64px} .wrap{padding-inline:20px}
 .karte{padding:28px}
}
/* E10.3 Ergaenzungen */
.kopf-ende{display:flex;align-items:center;gap:18px}
.menu-an{position:absolute;opacity:0;pointer-events:none}
.testlink{font-size:.8rem;color:var(--text-leise)}

.pakete-klein{padding-block:40px;border-top:1px solid var(--linie)}
.pakete-klein p{max-width:none;color:var(--text-leise);font-size:.95rem}
.pakete-klein strong{color:var(--text)}
.entwurf{background:var(--akzent-hell);border-left:3px solid var(--akzent);padding:14px 20px;border-radius:0 var(--radius-m) var(--radius-m) 0;margin-bottom:32px;max-width:none}
.recht-anbieter{margin-top:40px;padding-top:14px;border-top:1px solid rgba(128,128,128,.28);font-size:.85rem;color:var(--text-leise,#6b7676)} .recht .recht-anbieter h3{font-size:.85rem;margin:0 0 6px;font-weight:600;color:inherit} .recht .recht-anbieter p{font-size:.85rem;margin:0;color:inherit}
.recht h2{font-size:1.4rem;margin:36px 0 10px} .recht p{margin-bottom:12px}
.fehlermeldung{border-left:4px solid #b42318;background:#fff;padding:10px 14px;border-radius:4px;margin:0 0 20px;max-width:none}
.karte .klein{font-size:.9rem;color:var(--text-leise);margin-bottom:16px}
#clerk-anmeldung{display:flex;justify-content:center;max-width:100%;overflow:hidden;padding:4px 0 8px}
#clerk-anmeldung .cl-rootBox{max-width:100%}
.karte button.knopf{cursor:pointer;font:inherit;font-weight:600;width:100%}
.feld input:focus-visible,.knopf:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.kachel p,.schritt p{max-width:none}
.wrap{overflow-wrap:anywhere}
@media(max-width:860px){
 .kopf .wrap{height:auto;min-height:56px;flex-wrap:wrap;padding-block:8px;gap:8px 12px}
 .menuknopf{display:block;order:2;cursor:pointer;min-height:44px;line-height:26px;margin-left:auto}
 .kopf-ende{order:3}
 nav.haupt{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:0;padding-bottom:8px}
 nav.haupt a{padding:12px 0;min-height:44px}
 .menu-an:checked ~ nav.haupt{display:flex}
 body{font-size:17px} .knopf{min-height:52px}
 .karten2{gap:24px} .aktion{gap:18px}
 h1{font-size:clamp(2rem,1.2rem + 5vw,2.6rem)}
}

/* ---------- E10.4 Designkontrolle ---------- */
.testbalken{height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--akzent);border-bottom:1px solid var(--linie);font-size:.78rem;font-weight:600;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Rhythmus: Off-White und Sand im Wechsel */
section{padding-block:96px} section.eng{padding-block:64px}
.kopfzeile{margin-bottom:56px;max-width:65ch}
.kopfzeile h2{font-size:40px;line-height:1.15;margin-top:14px;padding:0;border:0}
.kopfzeile p{font-size:18px;line-height:1.55;margin-top:16px;max-width:65ch}
.schmal{max-width:800px}
/* Hero */
.hero{padding-block:80px 104px;overflow-x:clip;background:radial-gradient(60% 70% at 85% 40%,var(--akzent-hell) 0,rgba(221,237,231,0) 70%),var(--bg)}
.hero .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
.hero h1{font-size:56px;line-height:1.08;margin:18px 0 22px}
.hero p.lead{font-size:1.2rem;line-height:1.6;max-width:46ch}
.hero.lern{padding-block:40px 96px} .hero.lern h1{font-size:48px}
.produkt{margin:0;position:relative}
.produkt .rahmen{background:#fff;border:1px solid var(--linie);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(31,42,46,.06),0 24px 60px -18px rgba(22,84,75,.30);transform:rotate(-2deg);transform-origin:50% 60%}
.produkt .leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 14px;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.produkt .leiste i{width:9px;height:9px;border-radius:50%;background:var(--linie)}
.produkt .leiste span{margin-left:14px;font-size:.72rem;color:var(--text-leise);letter-spacing:.04em}
.produkt img{display:block;width:100%;height:auto}
.produkt figcaption{margin-top:18px;font-size:.82rem;color:var(--text-leise);text-align:center}
.produkt.links .rahmen{transform:rotate(1.5deg)}
@media(min-width:1200px){.hero:not(.lern) .produkt{margin-right:-48px}}
/* Kacheln */
.raster{gap:20px}
.kachel{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:28px;display:flex;flex-direction:column;height:100%;transition:border-color .15s}
a.kachel:hover,.kachel:hover{border-color:var(--akzent)}
.kachel .mehr{margin-top:auto;padding-top:16px}
.kachel h3{margin-bottom:8px}
.sym{width:44px;height:44px;padding:10px;margin-bottom:20px;border-radius:12px;background:var(--akzent-hell);flex:none}
.sym path{vector-effect:none}
/* Ablauf mit Bild */
.ablauf{display:grid;gap:56px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.ablauf{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px}}
.schritte.stapel{display:flex;flex-direction:column;gap:32px}
.stapel .schritt{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start}
.stapel .schritt .zahl{font-size:2.4rem;margin:0;width:56px;height:56px;border-radius:14px;background:var(--akzent-hell);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600}
.stapel .aktion{margin-top:8px}
/* Praxen-Band als Karte */
.band{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:40px 44px}
.band h2{font-size:32px;margin:12px 0 14px} .band p{color:var(--text-leise)}
.nichtband{padding-block:0 96px}
.cta{padding-block:96px}
.weitere{margin-top:12px;display:flex;gap:28px;flex-wrap:wrap;max-width:none}
@media(max-width:860px){
 section{padding-block:56px} section.eng{padding-block:40px} .nichtband{padding-bottom:56px} .cta{padding-block:56px}
 .kopfzeile{margin-bottom:32px} .kopfzeile h2{font-size:30px} .kopfzeile p{font-size:17px}
 .hero{padding-block:32px 56px} .hero.lern{padding-block:24px 56px}
 .hero .wrap{grid-template-columns:1fr;gap:40px}
 .hero h1,.hero.lern h1{font-size:36px}
 .produkt .rahmen,.produkt.links .rahmen{transform:rotate(-1deg)}
 .band{padding:28px 24px}
 .kachel{padding:24px}
}
@media(max-width:480px){.testbalken{font-size:.68rem}}

.produkt.film .rahmen{padding:0;overflow:hidden} .produkt.film video{display:block;width:100%;height:auto;background:#000;border-radius:0 0 12px 12px}

.produkt.film .rahmen,.produkt.film.links .rahmen{transform:none}
@media(max-width:800px){.produkt.film .rahmen{transform:none}}

/* ---------- Datenquellen als Arbeitsplatz (Liste links, Anleitung rechts, ohne Skript per Radio) ---------- */
.qa-platz{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.qa-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ql-item{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 14px;margin:0 0 6px;background:#fff;border:1px solid var(--linie);border-left:3px solid transparent;border-radius:10px;cursor:pointer;line-height:1.35}
.ql-item:hover{border-color:var(--akzent)}
.ql-sym{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--akzent-hell);stroke:var(--akzent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ql-sym path{vector-effect:none}
.ql-name{grid-column:2;font-weight:600}
.ql-kurz{grid-column:2;font-size:.88rem;color:var(--text-leise)}
.ql-item .ql-sym{grid-row:1 / span 2;grid-column:1}
.qa-radio:checked + .ql-item{border-left-color:var(--akzent);border-color:var(--akzent);background:var(--akzent-hell)}
.qa-radio:focus-visible + .ql-item,.ql-item:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.qa-panel{display:none;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:24px 28px;margin:0 0 14px;max-width:720px;min-width:0}
.qa-radio:checked + .ql-item + .qa-panel{display:block}
.qa-panel p{max-width:none}
.qa-titel{font-size:1.5rem;margin-bottom:10px}
.qa-lead{color:var(--text-leise);margin-bottom:8px}
.qa-h{font-family:var(--schrift-sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-leise);margin:22px 0 8px}
.qa-schritte,.qa-kurzschritte{margin:0;padding-left:1.4em}
.qa-schritte li,.qa-kurzschritte li{padding:3px 0}
.qa-schritte strong{display:block}
.qa-schritte span{color:var(--text-leise);font-size:.95rem}
.qa-lesen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qa-lesen li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
.qa-lesen strong{display:block}
.qa-lesen span{color:var(--text-leise);font-size:.92rem}
.qa-nicht{background:var(--flaeche);border-left:3px solid var(--akzent);padding:2px 16px 12px;border-radius:0 10px 10px 0;margin-top:20px}
.qa-nicht p{font-size:.95rem}
.qa-ausblick{color:var(--text-leise)}
.qa-panel .aktion{margin-top:24px}
.qa-mehr{display:inline-block;margin-top:12px;font-weight:600}
.qa-bereich{padding-block:40px 80px}
.qa-kopf h1{font-size:40px} .qa-kopf .lead{color:var(--text-leise);margin-top:10px}
.qa-panel .karte{border:0;padding:8px 0 0}
.qa-panel .karte .klein{margin-bottom:12px}
.qa-radio:checked + .ql-item + .qa-panel .karte .knopf{margin-bottom:0}
@media(min-width:800px){
 .qa-platz{grid-template-columns:minmax(280px,320px) minmax(0,720px);column-gap:36px;grid-template-rows:repeat(var(--zeilen),auto) 1fr}
 .qa-platz .ql-item{grid-column:1}
 .qa-platz .qa-panel{grid-column:2;grid-row:1 / span 99;margin:0}
 .qa-platz > .qa-panel{grid-row:1 / -1}
}
@media(min-width:1100px){
 .qa-platz.kompakt{grid-template-columns:minmax(0,300px) minmax(0,300px) minmax(0,420px);column-gap:20px;grid-template-rows:repeat(var(--zeilen2),auto) 1fr}
 .qa-platz.kompakt .ql-item{grid-column:auto}
 .qa-platz.kompakt .qa-panel{grid-column:3;max-width:none}
 .qa-bereich .qa-platz:not(.kompakt){column-gap:48px}
}
@media(max-width:799px){
 .qa-panel{padding:20px;margin:-2px 0 12px}
 .qa-kopf h1{font-size:32px}
}
.kompakt .qa-panel{padding:20px 24px}
.kompakt .qa-titel{font-size:1.25rem}

/* ---------- Startseite V2 (06.11.2026): Film gross, Werte auf einen Blick, Geraete-Rahmen aus CSS ---------- */
.v2 section{padding-block:120px}
.v2 .kopfzeile{max-width:68ch;margin-bottom:64px}
.v2 .kopfzeile h2{font-size:44px;line-height:1.12}
.v2 .kopfzeile p{font-size:20px;line-height:1.55}
.knopf{transition:background-color .18s,transform .18s,box-shadow .18s}
.knopf.gross{min-height:60px;padding:0 38px;font-size:1.08rem}
.knopf:hover{box-shadow:0 10px 24px -10px rgba(22,84,75,.55)}
.aktion.mitte{justify-content:center;margin-top:72px}

/* Hero: Text mittig, Film darunter gross und randabfallend */
.v2 .hero2{padding-block:96px 0;overflow-x:clip;background:radial-gradient(55% 45% at 50% 62%,rgba(221,237,231,.95) 0,rgba(221,237,231,0) 72%),radial-gradient(30% 30% at 88% 70%,rgba(232,119,90,.10) 0,rgba(232,119,90,0) 70%),var(--bg)}
.hero2-text{max-width:820px;margin-inline:auto;text-align:center}
.hero2 h1{font-size:56px;line-height:1.06;margin:20px 0 26px;letter-spacing:-.02em}
.hero2 .lead{font-size:20px;line-height:1.6;color:var(--text-leise);margin-inline:auto;max-width:56ch}
.hero2 .aktion{justify-content:center;margin-top:44px}
.film2{margin:72px auto 0;width:min(1100px,100% - 48px);position:relative;padding-bottom:120px}
.film2-rahmen{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0f1a1d;box-shadow:0 2px 4px rgba(31,42,46,.08),0 40px 90px -30px rgba(22,84,75,.55),0 18px 36px -18px rgba(31,42,46,.35)}
.film2 video{display:block;width:100%;height:100%;object-fit:cover;background:#0f1a1d}
.film2 .spiel{position:absolute;inset:0;display:none;place-items:center;pointer-events:none}
.film2 .spiel svg{width:112px;height:112px;filter:drop-shadow(0 12px 24px rgba(10,40,35,.45));transition:transform .2s}
.film2 .spiel circle{fill:var(--akzent);stroke:rgba(255,255,255,.85);stroke-width:2}
.film2 .spiel path{fill:#fff}
@supports selector(video:paused){.film2 video:paused + .spiel{display:grid} .film2-rahmen:hover .spiel svg{transform:scale(1.07)}}
.film2 figcaption{position:absolute;left:0;right:0;bottom:56px;text-align:center;font-size:.9rem;color:var(--text-leise)}

/* Werte auf einen Blick */
.blick-raster{display:grid;gap:56px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:1000px){.blick-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px}}
.geraete{position:relative;padding-bottom:12%}
.ipad,.iphone{margin:0;background:#1f2a2e;position:relative;transition:transform .35s ease,box-shadow .35s ease}
.ipad{padding:2.2%;border-radius:30px;box-shadow:0 0 0 2px #36444a inset,0 2px 4px rgba(31,42,46,.12),0 40px 80px -30px rgba(22,84,75,.55)}
.ipad::before{content:"";position:absolute;top:1.1%;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#46555b}
.ipad img{display:block;width:100%;height:auto;border-radius:14px;background:var(--bg)}
.geraete .ipad{width:88%}
.geraete .iphone{position:absolute;right:0;bottom:0;width:27%;padding:2.6%;border-radius:12% / 5.5%;box-shadow:0 0 0 2px #36444a inset,0 2px 4px rgba(31,42,46,.14),0 36px 60px -22px rgba(22,50,45,.6)}
.iphone::before{content:"";position:absolute;z-index:1;top:3.2%;left:50%;width:22%;height:1.7%;margin-left:-11%;border-radius:99px;background:#0b1214}
.iphone img{display:block;width:100%;height:auto;border-radius:9% / 4.2%;background:var(--bg)}
@media(hover:hover){.geraete:hover .ipad{transform:translateY(-4px)} .geraete:hover .iphone{transform:translateY(-8px)}}
.kennzahlen{display:grid;gap:16px}
.gk{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:18px 24px 16px;display:grid;grid-template-columns:minmax(0,1fr);transition:border-color .2s,transform .2s,box-shadow .2s}
.gk:hover{border-color:var(--akzent);transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(22,84,75,.45)}
.gk-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gk h3{font-size:1.2rem}
.gk p{font-size:.88rem;color:var(--text-leise);max-width:none;line-height:1.45;margin-top:2px}
.stufe{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600}
.stufe i{display:inline-block;width:12px;height:12px;flex:none}
.stufe.ok{color:#1d7a54} .stufe.ok i{background:var(--evi-ampel-gruen);border-radius:50%}
.stufe.rand{color:var(--evi-bernstein)} .stufe.rand i{background:var(--evi-bernstein);clip-path:polygon(50% 0,100% 100%,0 100%)}
.stufe.weit{color:#b2452a} .stufe.weit i{background:var(--evi-ausserhalb);border-radius:2px}
.gauge{display:block;width:100%;max-width:236px;height:auto;margin:6px auto 0;overflow:visible}
.g-spur,.g-ref,.g-ori{fill:none}
.g-spur{stroke:var(--evi-spur);stroke-width:18}
.g-ref{stroke:var(--evi-zone-ref);stroke-width:18}
.g-ori{stroke:var(--evi-ampel-gruen);stroke-width:7;stroke-linecap:butt}
.g-vor{fill:#fff;stroke:var(--text-leise);stroke-width:2.5}
.g-m{stroke:#fff;stroke-width:3;paint-order:stroke}
.g-m.ok{fill:var(--evi-ampel-gruen)} .g-m.rand{fill:var(--evi-bernstein);stroke-linejoin:round} .g-m.weit{fill:var(--evi-ausserhalb)}
.g-zahl{font-family:var(--schrift-serif);font-weight:600;font-size:40px;fill:var(--text)}
.g-einheit{font-size:13px;fill:var(--text-leise)} .g-skala{font-size:11px;fill:var(--text-leise)}
.legende{list-style:none;margin:48px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:.92rem;color:var(--text-leise)}
.legende li{display:flex;align-items:center;gap:10px}
.legende i{display:inline-block;flex:none}
.l-ref{width:28px;height:10px;background:var(--evi-zone-ref);border-radius:2px}
.l-ori{width:28px;height:5px;background:var(--evi-ampel-gruen);border-radius:2px}
.l-mark{width:12px;height:12px;background:var(--evi-ausserhalb);border-radius:2px}
.l-vor{width:12px;height:12px;border:2.5px solid var(--text-leise);border-radius:50%;background:#fff}
.legende .bsp{margin-left:auto;font-weight:600;color:var(--akzent);background:var(--akzent-hell);padding:4px 14px;border-radius:99px}

/* Vier Schritte mit Ausschnitt */
.vier{list-style:none;margin:0;padding:0;display:grid;gap:40px 28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
.schritt2{display:flex;flex-direction:column}
.schritt2 .bild{aspect-ratio:16/11;border-radius:16px;overflow:hidden;border:1px solid var(--linie);background:#fff;box-shadow:0 20px 40px -26px rgba(22,84,75,.45);transition:transform .25s,box-shadow .25s}
.schritt2:hover .bild{transform:translateY(-4px);box-shadow:0 28px 48px -26px rgba(22,84,75,.55)}
.schritt2 img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.schritt2 .zahl{font-family:var(--schrift-serif);font-size:2.6rem;line-height:1;color:var(--akzent);margin:24px 0 8px}
.schritt2 h3{margin-bottom:8px} .schritt2 p{color:var(--text-leise);font-size:1rem;max-width:none}

/* Praxen mit Fallakte */
.praxen2{display:grid;gap:56px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:1000px){.praxen2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px}}
.praxen2 h2{font-size:44px;line-height:1.12;margin:14px 0 18px}
.praxen2 p{font-size:19px;color:var(--text-leise)}
.praxen2 .aktion{margin-top:32px}
.praxen2 .ipad:hover{transform:translateY(-4px)}

/* Vertrauen in drei Zeilen */
.zeilen{border-top:1px solid var(--linie)}
.zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 48px;padding:32px 0;border-bottom:1px solid var(--linie)}
@media(min-width:800px){.zeile{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);align-items:baseline}}
.zeile h3{font-size:1.5rem} .zeile p{font-size:1.1rem;color:var(--text-leise);max-width:none}
.v2 .cta{padding-block:120px} .v2 .cta h2{font-size:48px}
.v2 .cta p{font-size:20px}

@media(max-width:860px){
 .v2 section,.v2 .cta{padding-block:72px}
 .v2 .hero2{padding-block:48px 0}
 .hero2 h1{font-size:38px} .hero2 .lead{font-size:18px}
 .v2 .kopfzeile h2,.praxen2 h2{font-size:32px} .v2 .kopfzeile p{font-size:18px} .v2 .kopfzeile{margin-bottom:40px}
 .v2 .cta h2{font-size:34px}
 .film2{width:100%;margin-top:44px;padding-bottom:72px}
 .film2-rahmen{border-radius:0}
 .film2 figcaption{padding-inline:20px;bottom:24px}
 .film2 .spiel svg{width:80px;height:80px}
 .geraete{padding-bottom:0;display:flex;flex-direction:column;align-items:center;gap:28px}
 .geraete .ipad{width:100%}
 .geraete .iphone{position:relative;width:min(240px,64%);padding:10px;border-radius:36px}
 .iphone img{border-radius:26px}
 .legende .bsp{margin-left:0}
 .zeile{padding:24px 0}
}
@media(prefers-reduced-motion:reduce){.knopf,.ipad,.iphone,.gk,.schritt2 .bild{transition:none}}

/* Mobil: nur das iPhone-Bild (iPad waere unleserlich und doppelt) */
@media(max-width:699px){
 .geraete .ipad{display:none}
 .geraete .iphone{width:min(340px,88%);padding:12px;border-radius:40px}
 .geraete .iphone img{border-radius:30px}
}

/* Geraetefoto (06.11.2026): Foto ueber die volle Breite, Gauges darunter nebeneinander */
.v2 .blick-raster,.blick-raster{grid-template-columns:minmax(0,1fr)!important;gap:40px;align-items:start}
.geraetefoto{margin:0}
.geraetefoto img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 2px 4px rgba(31,42,46,.08),0 30px 60px -30px rgba(22,50,45,.35)}
@media(min-width:800px){.kennzahlen{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Datenfluss-Schaubild "So bleiben deine Daten geschützt" (06.11.2026): nur CSS-Animation, 8 s Schleife */
.v2 .schutz{background:var(--bg)}
.v2 .schutz .kopfzeile{margin-bottom:40px}
.fluss-rahmen{margin:0;padding:32px 24px;background:#fff;border:1px solid var(--linie);border-radius:24px}
.fluss{display:block;width:100%;height:auto;overflow:visible;font-family:var(--schrift-sans)}
.fluss-v{display:none;max-width:380px;margin-inline:auto}
.fluss .f-karte{fill:#fff;stroke:var(--linie);stroke-width:1.5}
.fluss .akte .f-karte{stroke:var(--evi-teal);stroke-width:1.5}
.fluss .f-kopf{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:var(--evi-teal)}
.fluss .f-zeile{font-size:16px;font-weight:600;fill:var(--evi-anthrazit)}
.fluss .f-klein{font-size:13px;fill:var(--evi-grau)}
.fluss .f-spur{fill:var(--evi-sand)}
.fluss .f-balken{fill:var(--evi-teal-hell)}
.fluss .f-marker{fill:var(--evi-teal)}
.fluss .f-paket{fill:#fff;stroke:var(--evi-teal);stroke-width:1.5;filter:drop-shadow(0 6px 10px rgba(22,50,45,.18))}
.fluss .pk .f-balken{fill:var(--evi-teal)}
.fluss .f-pille{fill:var(--evi-teal-hell);stroke:var(--evi-teal);stroke-width:1.5}
.fluss .f-ring{fill:none;stroke:var(--evi-teal);stroke-width:6;opacity:0}
.fluss .f-ring-g,.fluss .f-ring{transform-box:fill-box;transform-origin:center}
.fluss .f-trichter{fill:var(--evi-teal);stroke:var(--evi-teal);stroke-width:2;stroke-linejoin:round}
.fluss .f-bahn{fill:none;stroke:var(--evi-teal);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round;opacity:.5}
.fluss .f-pfeil{fill:none;stroke:var(--evi-teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.fluss .f-lab{font-size:15px;fill:var(--evi-grau)}
.fluss .f-titel{font-size:15px;font-weight:700;fill:var(--evi-teal)}
.fluss .haken{opacity:0}
.fluss .haken circle{fill:var(--evi-teal)}
.fluss .haken path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fluss .haken,.fluss .aus-ring{transform-box:fill-box;transform-origin:center}
.fluss .aus-ring{fill:none;stroke:var(--evi-koralle);stroke-width:2;opacity:0}
.fluss .pk-hin,.fluss .pk-zu{opacity:0}
.fluss .pk-hin .pk,.fluss .pk-zu .pk{}
.fluss .b1,.fluss .b2{opacity:0}
.fluss .aus .inhalt{opacity:.45}
.fluss .akte .inhalt,.fluss .pk-hin,.fluss .pk-zu{}
.schutz-zeilen{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px}
.schutz-zeilen li{padding-top:16px;border-top:2px solid var(--evi-teal);font-size:1.05rem;line-height:1.5;color:var(--text)}
@media(max-width:860px){
 .fluss-rahmen{padding:24px 12px;border-radius:20px}
 .fluss-h{display:none} .fluss-v{display:block}
 .schutz-zeilen{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(prefers-reduced-motion:no-preference){
 .fluss .pk-hin,.fluss .pk-zu,.fluss .a1,.fluss .b1,.fluss .a2,.fluss .b2,.fluss .aus .inhalt,.fluss .haken,.fluss .aus-ring,.fluss .uebers .f-ring,.fluss .uebers .f-trichter,.fluss .akte .f-karte{animation:8s ease-in-out infinite both}
 .fluss-h .pk-hin{animation-name:hin-h} .fluss-h .pk-zu{animation-name:zu-h}
 .fluss-v .pk-hin{animation-name:hin-v} .fluss-v .pk-zu{animation-name:zu-v}
 .fluss .pk-hin .a1,.fluss .pk-hin .a2{animation-name:wech-hin}
 .fluss .pk-hin .b1,.fluss .pk-hin .b2{animation-name:da-hin}
 .fluss .pk-zu .a1,.fluss .pk-zu .a2{animation-name:wech-zu}
 .fluss .pk-zu .b1,.fluss .pk-zu .b2{animation-name:da-zu}
 .fluss .aus .inhalt{animation-name:aktiv}
 .fluss .aus-ring{animation-name:puls} .fluss .aus-ring.r2{animation-name:puls2}
 .fluss .haken{animation-name:haken}
 .fluss .uebers .f-ring{animation-name:schleuse}
 .fluss .uebers .f-trichter{animation-name:trichter}
 .fluss .akte .f-karte{animation-name:akteglanz}
}
@keyframes hin-h{0%{transform:translate(0px,0);opacity:0}6%{transform:translate(0px,0);opacity:0}10%{transform:translate(0px,0);opacity:1}26%{transform:translate(350px,0);opacity:1}38%{transform:translate(350px,0);opacity:1}54%{transform:translate(700px,0);opacity:1}58%{transform:translate(700px,0);opacity:0}100%{transform:translate(700px,0);opacity:0}}
@keyframes zu-h{0%{transform:translate(0px,0);opacity:0}72%{transform:translate(0px,0);opacity:0}73%{transform:translate(0px,0);opacity:1}80%{transform:translate(-350px,0);opacity:1}86%{transform:translate(-350px,0);opacity:1}94%{transform:translate(-700px,0);opacity:1}97%{transform:translate(-700px,0);opacity:0}100%{transform:translate(-700px,0);opacity:0}}
@keyframes hin-v{0%{transform:translate(0,0px);opacity:0}6%{transform:translate(0,0px);opacity:0}10%{transform:translate(0,0px);opacity:1}26%{transform:translate(0,200px);opacity:1}38%{transform:translate(0,200px);opacity:1}54%{transform:translate(0,400px);opacity:1}58%{transform:translate(0,400px);opacity:0}100%{transform:translate(0,400px);opacity:0}}
@keyframes zu-v{0%{transform:translate(0,0px);opacity:0}72%{transform:translate(0,0px);opacity:0}73%{transform:translate(0,0px);opacity:1}80%{transform:translate(0,-200px);opacity:1}86%{transform:translate(0,-200px);opacity:1}94%{transform:translate(0,-400px);opacity:1}97%{transform:translate(0,-400px);opacity:0}100%{transform:translate(0,-400px);opacity:0}}
@keyframes wech-hin{0%{opacity:1}26%{opacity:1}31%{opacity:0}100%{opacity:0}}
@keyframes da-hin{0%{opacity:0}26%{opacity:0}31%{opacity:1}100%{opacity:1}}
@keyframes wech-zu{0%{opacity:1}80%{opacity:1}84%{opacity:0}100%{opacity:0}}
@keyframes da-zu{0%{opacity:0}80%{opacity:0}84%{opacity:1}100%{opacity:1}}
@keyframes aktiv{0%{opacity:.45}52%{opacity:.45}58%{opacity:1}72%{opacity:1}77%{opacity:.45}100%{opacity:.45}}
@keyframes puls{0%{opacity:0;transform:scale(.6)}54%{opacity:0;transform:scale(.6)}55%{opacity:.8;transform:scale(.6)}62%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
@keyframes puls2{0%{opacity:0;transform:scale(.6)}62%{opacity:0;transform:scale(.6)}63%{opacity:.8;transform:scale(.6)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
@keyframes haken{0%{opacity:0;transform:scale(.4)}91%{opacity:0;transform:scale(.4)}95%{opacity:1;transform:scale(1)}98%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes schleuse{0%{opacity:0}24%{opacity:0}30%{opacity:.35;transform:scale(1.05)}40%{opacity:0}78%{opacity:0}83%{opacity:.35;transform:scale(1.05)}90%{opacity:0}100%{opacity:0}}
@keyframes trichter{0%{opacity:1}26%{opacity:1}32%{opacity:.5}38%{opacity:1}80%{opacity:1}84%{opacity:.5}88%{opacity:1}100%{opacity:1}}
@keyframes akteglanz{0%{stroke-width:1.5}91%{stroke-width:1.5}95%{stroke-width:3.5}100%{stroke-width:1.5}}
@media(prefers-reduced-motion:reduce){
 .fluss .haken{opacity:1} .fluss .aus .inhalt{opacity:1}
}

/* Quellen: Geraete-Symbole, Laufband, Botschaft */
.geraete-reihe{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.geraete-reihe li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:24px 14px 20px;background:#fff;border:1px solid var(--linie);border-radius:20px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;outline:none}
.geraete-reihe svg{width:72px;height:72px;margin-bottom:10px;fill:none;stroke:var(--evi-teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.geraete-reihe strong{font-family:var(--schrift-serif,inherit);font-size:1.1rem;font-weight:600;color:var(--text);line-height:1.25}
.geraete-reihe span{font-size:.92rem;line-height:1.4;color:var(--text-leise)}
.geraete-reihe li:hover,.geraete-reihe li:focus-visible{transform:translateY(-6px);border-color:var(--evi-teal);box-shadow:0 18px 32px -20px rgba(22,50,45,.4)}
.geraete-reihe li:hover svg,.geraete-reihe li:focus-visible svg{transform:scale(1.08)}
.geraete-reihe li:focus-visible{outline:2px solid var(--evi-teal);outline-offset:3px}
.laufband{overflow:hidden;margin:0 0 72px;border-block:1px solid var(--linie);padding-block:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband ul{display:flex;gap:44px;width:max-content;margin:0;padding:0 22px 0 0;list-style:none;animation:band 48s linear infinite}
.laufband li{white-space:nowrap;font-size:1.05rem;letter-spacing:.04em;color:var(--evi-teal)}
.laufband li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--evi-koralle);margin-right:44px;vertical-align:middle;transform:translateX(-22px)}
@keyframes band{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.laufband{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.laufband ul{animation:none;flex-wrap:wrap;width:auto}.laufband li:nth-child(n+11){display:none}.geraete-reihe li,.geraete-reihe svg{transition:none}}
.offen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:start;margin:0 0 72px}
.offen h3{font-size:56px;line-height:1.05;margin:0;color:var(--evi-teal)}
.offen p{font-size:1.15rem;line-height:1.6;margin:0 0 20px;max-width:none}
.offen .ausblick{font-size:.92rem;color:var(--text-leise);margin:0}
@media(max-width:860px){
 .geraete-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:28px}
 .geraete-reihe li{padding:18px 10px 16px}
 .geraete-reihe svg{width:56px;height:56px}
 .laufband{margin-bottom:48px}
 .offen{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:48px}
 .offen h3{font-size:38px}
}
@media(max-width:860px){.geraete-reihe strong{font-size:1rem}}

/* Fusszeile schlank (Stephan 06.11.2026) */
.fuss2{grid-template-columns:1fr}
@media(min-width:800px){.fuss.fuss2{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.fuss-claim{margin:10px 0 0;color:var(--text-leise)}
.fuss-adresse{font-style:normal;line-height:1.6;color:var(--text)}
.fuss-adresse a{display:inline;padding:0}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}