/* Schriften — lokal ausgeliefert (SIL Open Font License 1.1), kein externer Abruf */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-ext-400-normal.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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-ext-500-normal.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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-ext-600-normal.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:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-600-normal.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:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-600-normal.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:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-700-normal.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:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-700-normal.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:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter-tight-latin-800-normal.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:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-800-normal.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{
  --bg:#FFFFFF; --ink:#111111; --flaeche:#F6F6F6; --linie:#E4E4E4;
  --grau:#B5B5B5; --grau-d:#6E6E6E; --rot:#E30613;
  --band-bg:#111111; --band-ink:#FFFFFF; --band-muted:#8F8F8F;
  --btn-bg:#111111; --btn-ink:#FFFFFF; --feld:#FFFFFF;
  --f-display:'Inter Tight',system-ui,sans-serif; --f-text:'Inter',system-ui,sans-serif;
  --container:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121212; --ink:#F0F0EE; --flaeche:#1A1A1A; --linie:#2C2C2C;
    --grau:#B5B5B5; --grau-d:#9C9C9C;
    --band-bg:#000000; --band-ink:#F0F0EE; --band-muted:#8F8F8F;
    --btn-bg:#F0F0EE; --btn-ink:#121212; --feld:#1A1A1A;
  }
}
:root[data-theme="dark"]{
  --bg:#121212; --ink:#F0F0EE; --flaeche:#1A1A1A; --linie:#2C2C2C;
  --grau:#B5B5B5; --grau-d:#9C9C9C;
  --band-bg:#000000; --band-ink:#F0F0EE; --band-muted:#8F8F8F;
  --btn-bg:#F0F0EE; --btn-ink:#121212; --feld:#1A1A1A;
}
*{box-sizing:border-box}
html, body{overflow-x:clip;}   /* die Seite scrollt nie horizontal — breite Inhalte scrollen in ihrem eigenen Container */
body{background:var(--bg); color:var(--ink); font-family:var(--f-text); font-size:16px; line-height:1.6; font-variant-numeric:tabular-nums; transition:background .25s ease, color .25s ease;}
.pageframe{position:fixed; inset:12px; border:1px solid var(--ink); pointer-events:none; z-index:80;}
@media (max-width:640px){ .pageframe{inset:8px} }
.container{max-width:var(--container); margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:var(--f-display); letter-spacing:-.02em; text-wrap:balance;}
p{margin:0 0 16px; max-width:66ch;}
a{color:var(--ink);}
.wm{font-family:var(--f-display); font-weight:700; letter-spacing:-.03em; line-height:1; text-decoration:none;}
.wm .d{color:var(--ink)} .wm .h{color:var(--grau)} .wm .p{color:var(--rot)}
.dot{color:var(--rot); font-style:normal;}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--grau-d); font-weight:500;}
.muted{color:var(--grau-d);}
.btn{display:inline-block; background:var(--btn-bg); color:var(--btn-ink); font-size:14px; font-weight:600; padding:13px 24px; text-decoration:none; border:1px solid var(--btn-bg); cursor:pointer; font-family:var(--f-text);}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--rot); outline-offset:2px;}
.btn.sek{background:none; color:var(--ink); border-color:var(--ink);}
.btn.sek:hover{background:var(--flaeche);}
.btnrow{display:flex; gap:10px; flex-wrap:wrap;}

/* Header */
header.site{position:sticky; top:11px; z-index:77; background:var(--bg); border-bottom:1px solid var(--linie);}
header.site::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px; background:var(--bg);}
.navbar{position:relative; display:flex; justify-content:flex-end; align-items:center; padding:0 28px; height:74px; max-width:var(--container); margin:0 auto;}
.navbar .wm{font-size:24px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:78;}
.num-m{font-style:normal;}
.seg{display:inline-flex; border:1px solid var(--linie); background:var(--bg);}
.seg button{appearance:none; background:none; border:0; padding:9px 15px; font-family:var(--f-text); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--grau-d); cursor:pointer;}
.seg button.on{background:var(--btn-bg); color:var(--btn-ink);}
.seg button:not(.on):hover{color:var(--ink);}
.navtools{display:flex; align-items:center; gap:14px; position:relative; z-index:78;}
.burger{display:block; width:46px; height:46px; background:none; border:1px solid var(--linie); cursor:pointer; position:relative; padding:0;}
.burger span{position:absolute; left:13px; right:13px; height:2px; background:var(--ink); transition:transform .25s ease, top .25s ease;}
.burger span:nth-child(1){top:18px;}
.burger span:nth-child(2){top:26px;}
.burger.open span:nth-child(1){top:22px; transform:rotate(45deg);}
.burger.open span:nth-child(2){top:22px; transform:rotate(-45deg);}
.burger:hover{border-color:var(--ink);}

/* Vollbildmenü (alle Größen) */
.mnav{position:fixed; inset:0; z-index:76; background:var(--bg); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s; overflow-y:auto;}
.mnav.open{opacity:1; visibility:visible; transform:none; transition:opacity .28s ease, transform .28s ease;}
.mnav .inner{max-width:var(--container); margin:0 auto; padding:110px 28px 40px; display:grid; grid-template-columns:1.5fr 1fr; gap:60px; align-items:start;}
.mnav ul{list-style:none; margin:0; padding:0;}
.mnav li{border-bottom:1px solid var(--linie);}
.mnav li:first-child{border-top:1px solid var(--linie);}
.mnav a.big{display:flex; align-items:baseline; gap:22px; font-family:var(--f-display); font-size:clamp(26px,3.2vw,42px); font-weight:700; letter-spacing:-.022em; line-height:1.15; color:var(--ink); text-decoration:none; padding:14px 2px;}
.mnav .side{padding-top:6px;}
@media (max-height:640px){ .mnav a.big{font-size:28px; padding:10px 2px;} .mnav .inner{padding-top:96px;} }
.mnav a.big .num-m{font-family:var(--f-text); font-size:13px; font-weight:600; color:var(--grau); letter-spacing:.08em;}
.mnav a.big:hover .num-m, .mnav a.big.active .num-m{color:var(--rot);}
.mnav .side{display:flex; flex-direction:column; align-items:flex-start; gap:24px;}
.mnav .side > div{width:100%;}
.mnav .side .seg{align-self:flex-start;}
.mnav .side .shead{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau-d); font-weight:500; margin:0 0 10px;}
.mnav .legal a{display:block; font-size:14.5px; color:var(--grau-d); text-decoration:none; padding:9px 0; border-bottom:1px solid var(--linie);}
.mnav .legal a:hover{color:var(--ink);}
.mnav .maddr{font-size:12.5px; color:var(--grau-d); line-height:1.8; margin:0;}
@media (max-width:860px){
  .mnav .inner{grid-template-columns:1fr; padding:96px 20px 36px; gap:34px;}
  .mnav a.big{font-size:30px; padding:16px 2px;}
  .navbar{padding:0 20px; height:66px;}
  .container{padding:0 20px;}
  .hero{padding-top:54px;}
  .btnrow .btn{flex:1 1 auto; text-align:center;}
  .sect{padding:60px 0;}
  .pagehead{padding:64px 0 42px;}
}

/* Sections */
.hero{padding:96px 0 84px; display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center;}
.hero .eyebrow{margin-bottom:22px; display:block;}
.hero h1{font-size:clamp(40px,5.8vw,68px); font-weight:700; line-height:1.04; letter-spacing:-.025em; margin:0 0 22px; max-width:16ch;}
.hero .sub{font-size:19px; color:var(--grau-d); max-width:44ch; margin:0 0 34px;}
.hero .visual{justify-self:end; width:100%; max-width:400px;}
.hero .visual svg{width:100%; height:auto; display:block;}
@media (max-width:860px){ .hero{grid-template-columns:1fr; gap:34px; padding-top:70px} .hero .visual{max-width:300px; justify-self:start} }
.sect{padding:78px 0;}
.sect.line{border-top:1px solid var(--linie);}
.sect.alt{background:var(--flaeche);}
.sect h2{font-size:clamp(26px,3.6vw,36px); font-weight:700; margin:0 0 14px;}
.sect .lead{font-size:18px; color:var(--grau-d); max-width:58ch; margin:0 0 30px;}
.pagehead{padding:88px 0 54px;}
.pagehead .eyebrow{display:block; margin-bottom:16px;}
.pagehead h1{font-size:clamp(34px,5vw,54px); font-weight:700; margin:0 0 16px;}
.pagehead .sub{font-size:18px; color:var(--grau-d); max-width:56ch; margin:0;}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center;}
.split.rev{grid-template-columns:.9fr 1.1fr;}
@media (max-width:820px){ .split,.split.rev{grid-template-columns:1fr; gap:30px} }

/* Zahlenband */
.band{background:var(--band-bg); color:var(--band-ink); padding:58px 0;}
.band .container{display:grid; grid-template-columns:repeat(4,1fr); gap:30px;}
.band .z{border-left:1px solid rgba(140,140,140,.35); padding-left:18px;}
.band .zahl{font-family:var(--f-display); font-weight:700; font-size:clamp(30px,4vw,44px); letter-spacing:-.02em; line-height:1.05;}
.band .zahl i{font-style:normal; color:var(--rot);}
.band .zlbl{font-size:13px; color:var(--band-muted); margin-top:6px;}
@media (max-width:760px){ .band .container{grid-template-columns:1fr 1fr; gap:24px} }

/* Bildflächen — Grafikserie gemäß Bildsprache */
.bild{position:relative; border:1px solid var(--linie); aspect-ratio:4/3; overflow:hidden; background:#161616;}
.bild.breit{aspect-ratio:16/7;}
.bild svg{position:absolute; inset:0; width:100%; height:100%; display:block;}

/* Komponenten */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .grid3{grid-template-columns:1fr} }
.karte{border:1px solid var(--linie); background:var(--bg); padding:28px 26px 24px; position:relative;}
.karte::after{content:""; position:absolute; top:20px; right:20px; width:9px; height:9px; border-radius:50%; background:var(--rot); opacity:0; transition:opacity .2s;}
.karte:hover::after{opacity:1;}
.karte h3{font-size:20px; margin:0 0 10px;}
.karte p{font-size:15px; margin:0; max-width:none; color:var(--grau-d);}
.karte .knum{font-family:var(--f-display); font-weight:700; font-size:13px; color:var(--grau); display:block; margin-bottom:14px;}
.fakten{display:flex; flex-wrap:wrap; gap:10px;}
.fakten span{font-size:12.5px; color:var(--grau-d); border:1px solid var(--linie); background:var(--bg); padding:6px 12px; white-space:nowrap;}
.dotlist{list-style:none; padding:0; margin:0 0 20px;}
.dotlist li{position:relative; padding-left:24px; margin-bottom:12px; max-width:62ch;}
.dotlist li::before{content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--rot);}
.zeile{display:grid; grid-template-columns:190px 1fr; gap:10px 24px; padding:14px 0; border-bottom:1px solid var(--linie); font-size:15px;}
.zeile dt{color:var(--grau-d); margin:0;}
.zeile dd{margin:0; font-weight:500;}
@media (max-width:640px){ .zeile{grid-template-columns:1fr; gap:2px} }
.leistung{border-top:1px solid var(--linie); padding:36px 0; display:grid; grid-template-columns:80px 280px 1fr; gap:24px; align-items:start;}
.leistung:last-of-type{border-bottom:1px solid var(--linie);}
.leistung .lnum{font-family:var(--f-display); font-weight:700; font-size:26px; color:var(--grau); line-height:1.2;}
.leistung .lnum i{font-style:normal; color:var(--rot);}
.leistung h3{font-size:22px; margin:0;}
.leistung p{margin:0; color:var(--grau-d); max-width:none;}
.leistung .ref{font-size:12px; color:var(--grau); margin-top:8px;}
@media (max-width:760px){ .leistung{grid-template-columns:52px 1fr; } .leistung > :last-child{grid-column:2} }
.schritte{counter-reset:s; list-style:none; margin:0 0 10px; padding:0;}
.schritte li{counter-increment:s; display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--linie);}
.schritte li::before{content:counter(s,decimal-leading-zero) "."; font-family:var(--f-display); font-weight:700; font-size:24px; color:var(--grau);}
.schritte h3{font-size:18px; margin:0 0 6px;}
.schritte p{margin:0; font-size:15px; color:var(--grau-d); max-width:58ch;}
details.faq{border-bottom:1px solid var(--linie);}
details.faq summary{cursor:pointer; padding:16px 0; font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:baseline;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; font-family:var(--f-display); font-weight:600; color:var(--grau-d);}
details.faq[open] summary::after{content:"–";}
details.faq p{padding:0 0 16px; margin:0; color:var(--grau-d); font-size:15px;}
.cta-block{padding:84px 0; background:var(--flaeche);}
.cta-block h2{font-size:clamp(26px,4vw,40px); margin:0 0 22px; max-width:24ch;}

/* Zielgruppen, Vorteile, Vergleich */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:760px){ .grid2{grid-template-columns:1fr} }
.vorteil{border-top:1px solid var(--linie); padding:20px 0; display:grid; grid-template-columns:44px 1fr; gap:14px;}
.vorteil:last-child{border-bottom:1px solid var(--linie);}
.vorteil i{display:block; width:9px; height:9px; border-radius:50%; background:var(--rot); margin-top:9px;}
.vorteil h3{font-size:18px; margin:0 0 4px;}
.vorteil p{margin:0; font-size:15px; color:var(--grau-d); max-width:none;}
.vgl{width:100%; border-collapse:collapse; font-size:14.5px;}
.vgl th,.vgl td{text-align:left; padding:13px 14px 13px 0; border-bottom:1px solid var(--linie); vertical-align:top;}
.vgl th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-d); font-weight:500;}
.vgl td:first-child{font-weight:600; width:26%;}
.vgl td{color:var(--grau-d);}
.vgl td.ja{color:var(--ink);}
.vgl-wrap{overflow-x:auto;}
.hinweis{border-left:2px solid var(--rot); padding:4px 0 4px 16px; color:var(--grau-d); font-size:14.5px; max-width:64ch;}
.leistung ul{list-style:none; margin:12px 0 0; padding:0;}
.leistung ul li{position:relative; padding-left:18px; font-size:14px; color:var(--grau-d); margin-bottom:6px;}
.leistung ul li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--grau);}

/* Formular */
form.kontakt{max-width:520px;}
form.kontakt label{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-d); font-weight:500; margin:20px 0 6px;}
form.kontakt input, form.kontakt textarea{width:100%; border:1px solid var(--grau-d); background:var(--feld); font-family:var(--f-text); font-size:16px; padding:11px 12px; color:var(--ink); border-radius:0;}
form.kontakt input:focus, form.kontakt textarea:focus{border-color:var(--ink); outline:none;}
form.kontakt textarea{min-height:130px; resize:vertical;}
form.kontakt .btn{margin-top:24px;}
.form-ok{border:1px solid var(--ink); padding:26px 28px; max-width:520px;}
.form-ok h3{margin:0 0 8px; font-size:22px;}
.form-ok p{margin:0; color:var(--grau-d);}
.hp{position:absolute; left:-9999px; top:auto;}

/* Footer */
footer.site{background:var(--band-bg); color:var(--band-ink); margin-top:90px;}
.foot{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; padding:54px 28px 20px; max-width:var(--container); margin:0 auto; font-size:14px;}
.foot .wm{font-size:26px;}
.foot .wm .d{color:var(--band-ink);}
.foot .claim{color:var(--band-muted); margin-top:14px; font-size:14px; max-width:30ch;}
.foot h4{font-family:var(--f-text); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted); font-weight:500; margin:0 0 12px;}
.foot ul{list-style:none; margin:0; padding:0;}
.foot li{margin-bottom:8px;}
.foot a{color:var(--band-ink); text-decoration:none; opacity:.85;}
.foot a:hover{opacity:1; color:var(--band-ink);}
.foot address{font-style:normal; color:var(--band-ink); opacity:.85; line-height:1.8;}
.footline{border-top:1px solid rgba(140,140,140,.3); max-width:var(--container); margin:26px auto 0; padding:16px 28px 30px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--band-muted);}
@media (max-width:760px){ .foot{grid-template-columns:1fr; gap:28px} }

/* Rechtsseiten */
.legal-body h2{font-size:22px; margin:34px 0 10px;}
.legal-body p{font-size:15px;}


/* Farbrhythmus — gemäß Lookbook 1.2 */
.eyebrow{color:var(--rot);}
.pageheadwrap{background:var(--band-bg); color:var(--band-ink);}
.pageheadwrap .sub{color:var(--band-muted);}
.pageheadwrap .pagehead{padding:84px 28px 56px;}
.sect.dunkel{background:var(--band-bg); color:var(--band-ink);}
.sect.dunkel h2, .sect.dunkel h3{color:var(--band-ink);}
.sect.dunkel p, .sect.dunkel .lead, .sect.dunkel .dotlist li{color:var(--band-muted);}
.sect.dunkel a{color:var(--band-ink);}
.sect.dunkel .karte{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16);}
.sect.dunkel .karte p{color:var(--band-muted);}
.sect.dunkel .zeile{border-color:rgba(255,255,255,.16);}
.sect.dunkel .zeile dt{color:var(--band-muted);} .sect.dunkel .zeile dd{color:var(--band-ink);}
.sect.dunkel .bild{border-color:rgba(255,255,255,.16);}
.sect.dunkel .hinweis{color:var(--band-muted);}
.cta-block{background:var(--rot); color:#FFFFFF;}
.cta-block h2{color:#FFFFFF;}
.cta-block .dot{color:#111111;}
.cta-block .eyebrow{color:rgba(255,255,255,.78);}
.cta-block .btn{background:#111111; color:#FFFFFF; border-color:#111111;}
.cta-block .btn:hover{background:#000000;}
.leistung .lnum{color:var(--rot);} .leistung .lnum i{color:var(--ink);}
.schritte li::before{color:var(--rot);}
.karte .knum{color:var(--rot);}
.band{border-left:0; position:relative;}
.band::before{content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--rot);}
footer.site{border-top:8px solid var(--rot);}
/* Menü folgt dem Farbschema: Schwarz auf Weiß (hell) bzw. Weiß auf Schwarz (dunkel) — kein eigener Farbraum */
.mnav{background:var(--bg); color:var(--ink);}
.mnav li, .mnav li:first-child{border-color:var(--linie);}
.mnav a.big{color:var(--ink);}
.mnav a.big .num-m{color:var(--grau);}
.mnav .side .shead{color:var(--grau-d);}
.mnav .legal a{color:var(--grau-d); border-color:var(--linie);} .mnav .legal a:hover{color:var(--ink);}
.mnav .maddr{color:var(--grau-d);}
.mnav .seg{border-color:var(--linie); background:var(--bg);}
.mnav .seg button{color:var(--grau-d);} .mnav .seg button.on{background:var(--btn-bg); color:var(--btn-ink);} .mnav .seg button:not(.on):hover{color:var(--ink);}
header.site .burger.open span{background:var(--ink);}


/* ===== Ausbau: Motion, Tiefe, Interaktion ===== */
.progress{position:fixed; top:12px; left:12px; right:12px; height:3px; z-index:81; pointer-events:none;}
.progress i{display:block; height:100%; width:0; background:var(--rot); transition:width .1s linear;}
@media (max-width:640px){ .progress{top:8px; left:8px; right:8px} }
header.site{transition:box-shadow .25s ease;}
header.site.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.07);}

.dots-bg{position:relative;}
.dots-bg::before{content:""; position:absolute; inset:0; background-image:radial-gradient(var(--grau) 1px, transparent 1.3px); background-size:22px 22px; opacity:.30; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);}
.dots-bg > *{position:relative;}

.hero h1 .w{display:inline-block; animation:hochkommen .8s cubic-bezier(.2,.7,.2,1) both;}
.hero .sub, .hero .btnrow, .hero .herofacts, .hero .scrollcue{animation:hochkommen .8s cubic-bezier(.2,.7,.2,1) both;}
.hero .sub{animation-delay:.35s} .hero .btnrow{animation-delay:.45s} .hero .herofacts{animation-delay:.55s} .hero .scrollcue{animation-delay:.7s}
@keyframes hochkommen{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.hero .visual{transition:transform .35s ease-out;}
.hero .visual svg circle{transform-box:fill-box; transform-origin:center; animation:puls 4.2s ease-in-out infinite;}
.hero .visual svg rect{animation:einblenden 1.4s ease-out both; animation-delay:.3s;}
@keyframes puls{0%,100%{transform:scale(1); opacity:.75} 50%{transform:scale(1.6); opacity:1}}
@keyframes einblenden{from{opacity:0; transform:translate(6px,6px)} to{opacity:1; transform:none}}
.herofacts{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px;}
.herofacts span{font-size:12px; color:var(--grau-d); border:1px solid var(--linie); background:var(--bg); padding:6px 11px; display:inline-flex; align-items:center; gap:8px;}
.herofacts span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--rot);}
.scrollcue{display:flex; align-items:center; gap:12px; margin-top:44px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau-d);}
.scrollcue i{width:1px; height:40px; background:var(--linie); display:block; position:relative; overflow:hidden;}
.scrollcue i::after{content:""; position:absolute; left:0; top:-40px; width:1px; height:40px; background:var(--rot); animation:fallen 1.9s ease-in-out infinite;}
@keyframes fallen{to{top:40px}}

.marquee{overflow:hidden; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); padding:16px 0; background:var(--flaeche);}
.marquee .track{display:flex; width:max-content; animation:lauf 46s linear infinite;}
.marquee:hover .track{animation-play-state:paused;}
.marquee span{font-family:var(--f-display); font-weight:700; font-size:clamp(16px,2vw,22px); letter-spacing:-.01em; padding:0 26px; white-space:nowrap; color:var(--grau-d);}
.marquee span i{color:var(--rot); font-style:normal; margin-left:26px;}
@keyframes lauf{to{transform:translateX(-50%)}}

.verbund{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center;}
@media (max-width:860px){ .verbund{grid-template-columns:1fr; gap:28px} }
.karte-verbund{border:1px solid var(--linie); background:#161616; position:relative; overflow:hidden;}
.karte-verbund svg{width:100%; height:auto; display:block;}
.karte-verbund .link{stroke:#8F8F8F; stroke-width:1.5; stroke-dasharray:6 7; animation:dash 3s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-26}}
.karte-verbund .ring{animation:ring 2.6s ease-out infinite; transform-box:fill-box; transform-origin:center;}
@keyframes ring{0%{transform:scale(.5); opacity:.9} 100%{transform:scale(2.4); opacity:0}}
.mitglieder{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px;}
.mitglieder li{display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--linie); background:var(--bg);}
.mitglieder li b{display:block; font-size:15px;} .mitglieder li span{font-size:13px; color:var(--grau-d);}
.mitglieder li em{font-style:normal; font-family:var(--f-display); font-weight:700; font-size:12px; color:var(--rot); letter-spacing:.06em;}

.karte{transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
.karte:hover{transform:translateY(-4px); border-color:var(--ink); box-shadow:0 16px 36px rgba(0,0,0,.08);}
.karte .ico{width:46px; height:46px; margin-bottom:16px; display:block;}
.karte .ico *{stroke:var(--ink); fill:none; stroke-width:2; vector-effect:non-scaling-stroke;}
.karte .ico .r{fill:var(--rot); stroke:none;}
.sect.dunkel .karte .ico *{stroke:var(--band-ink);} .sect.dunkel .karte .ico .r{fill:var(--rot);}
.sect.dunkel .karte:hover{border-color:rgba(255,255,255,.5); box-shadow:none;}

.sect{position:relative; overflow:hidden;}
.wnum{position:absolute; right:-6px; top:14px; font-family:var(--f-display); font-weight:800; font-size:clamp(120px,18vw,230px); line-height:1; letter-spacing:-.05em; color:var(--ink); opacity:.045; pointer-events:none; user-select:none;}
.sect.dunkel .wnum{color:#FFFFFF; opacity:.06;}
.sect > .container{position:relative;}

.zitat{border-left:4px solid var(--rot); padding:6px 0 6px 28px; margin:30px 0 10px; font-family:var(--f-display); font-size:clamp(20px,2.5vw,27px); font-weight:600; letter-spacing:-.015em; line-height:1.3; max-width:34ch; color:var(--ink);}
.zitat cite{display:block; margin-top:12px; font-family:var(--f-text); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-d); font-style:normal; font-weight:500;}

.schritte li{position:relative;}
.schritte li::after{content:""; position:absolute; left:15px; top:60px; bottom:-1px; width:1px; background:var(--linie);}
.schritte li:last-child::after{display:none;}
.schritte li .node{position:absolute; left:11px; top:36px; width:9px; height:9px; border-radius:50%; background:var(--rot); box-shadow:0 0 0 5px var(--bg);}
.sect.alt .schritte li .node{box-shadow:0 0 0 5px var(--flaeche);}
.schritte li::before{padding-left:30px;}

.leist-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px;}
@media (max-width:760px){ .leist-grid{grid-template-columns:1fr} }
.leistung{display:block; border:1px solid var(--linie); border-top:1px solid var(--linie); padding:26px 26px 18px; background:var(--bg); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
.leistung:last-of-type{border-bottom:1px solid var(--linie);}
.leistung:hover{border-color:var(--ink); transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.07);}
.leistung .lnum{font-size:30px; display:block; margin-bottom:10px;}
.leistung h3{font-size:21px; margin:0 0 4px;}
.leistung .ref{margin:0 0 12px; font-size:12px;}
.leistung .txt{margin:0 0 6px; font-size:15px;}
.leistung details.mehr summary{cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--ink); display:inline-flex; gap:8px; align-items:center; padding:8px 0 4px;}
.leistung details.mehr summary::-webkit-details-marker{display:none;}
.leistung details.mehr summary::before{content:"+"; color:var(--rot); font-weight:700; font-size:16px; line-height:1;}
.leistung details.mehr[open] summary::before{content:"–";}
.leistung details.mehr ul{margin:8px 0 4px;}

details.faq summary::after{transition:transform .25s ease;}
details.faq[open] summary::after{content:"+"; transform:rotate(45deg);}

.pre{opacity:0; transform:translateY(20px);}
.reveal{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
@media (prefers-reduced-motion:reduce){ .pre{opacity:1; transform:none} .hero h1 .w, .hero .sub, .hero .btnrow, .hero .herofacts, .hero .scrollcue{animation:none} .marquee .track{animation:none} }

.btn::after{content:"→"; margin-left:10px; display:inline-block; transition:transform .2s ease;}
.btn:hover::after{transform:translateX(4px);}

.wege{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .wege{grid-template-columns:1fr} }
.wege .karte h3{font-size:17px;} .wege .karte p{font-size:14px;}
.danach{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:10px;}
@media (max-width:760px){ .danach{grid-template-columns:1fr} }
.danach div{border-top:2px solid var(--ink); padding-top:12px;}
.danach b{display:block; font-family:var(--f-display); font-size:18px; margin-bottom:4px;}
.danach b i{font-style:normal; color:var(--rot); margin-right:8px;}
.danach p{font-size:14px; color:var(--grau-d); margin:0;}

.foot{grid-template-columns:1.4fr 1fr 1fr 1fr;}
@media (max-width:860px){ .foot{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot{grid-template-columns:1fr} }
.foot .standorte{list-style:none; margin:14px 0 0; padding:0;}
.foot .standorte li{font-size:13px; color:var(--band-muted); padding-left:16px; position:relative; margin-bottom:6px;}
.foot .standorte li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--rot);}
footer .seg{border-color:rgba(255,255,255,.28); background:transparent; margin-top:6px;}
footer .seg button{color:var(--band-muted);} footer .seg button.on{background:var(--band-ink); color:var(--band-bg);} footer .seg button:not(.on):hover{color:var(--band-ink);}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ============================================================
   digihap.tech — Erweiterungen für den Produktivbetrieb
   (Mehrseitigkeit, Formular, Hinweise, Utilities statt Inline-Styles)
   ============================================================ */

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; min-height:100vh; display:flex; flex-direction:column;}
main{flex:1 0 auto;}

/* Sprunglink (Barrierefreiheit) */
.skip{position:absolute; left:16px; top:-60px; z-index:90; background:var(--ink); color:var(--bg); padding:10px 16px; font-size:14px; font-weight:600; text-decoration:none; transition:top .15s;}
.skip:focus{top:20px;}

/* Aktive Seite im Menü */
.mnav a.big[aria-current="page"]{color:var(--ink);}
.mnav a.big[aria-current="page"] .num-m{color:var(--rot);}

/* Hinweis: kein Beratungsangebot */
.disclaimer{border:1px solid var(--linie); border-left:3px solid var(--rot); padding:18px 22px 16px; margin:36px 0 0; font-size:14px; line-height:1.6; color:var(--grau-d); max-width:none;}
.disclaimer b{display:block; color:var(--ink); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:6px;}
.disclaimer p{margin:0; max-width:none; font-size:14px;}
.sect.dunkel .disclaimer, .pageheadwrap .disclaimer{border-color:rgba(255,255,255,.18); border-left-color:var(--rot); color:var(--band-muted);}
.sect.dunkel .disclaimer b{color:var(--band-ink);}
.sect.alt .disclaimer{background:var(--bg);}

/* Formular — Erweiterungen */
form.kontakt .feldhinweis{font-size:12.5px; color:var(--grau-d); margin:6px 0 0;}
form.kontakt label.check{display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; margin:22px 0 0; font-size:14px; line-height:1.55; color:var(--ink); text-transform:none; letter-spacing:0; font-weight:400;}
form.kontakt .check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--rot); border:1px solid var(--grau-d);}
form.kontakt .check a{color:var(--ink);}
form.kontakt .fehler{border:1px solid var(--rot); border-left-width:3px; padding:12px 16px; margin-top:22px; font-size:14px; color:var(--ink);}
form.kontakt .fehler[hidden]{display:none;}
form.kontakt input[aria-invalid="true"], form.kontakt textarea[aria-invalid="true"]{border-color:var(--rot);}
form.kontakt .btn[disabled]{opacity:.55; cursor:progress;}
form.kontakt .pflicht{color:var(--rot); font-weight:600; margin-left:2px;}
form.kontakt .formfuss{font-size:12.5px; color:var(--grau-d); margin-top:16px; max-width:none;}
.form-ok{display:block;}
.form-ok[hidden]{display:none;}

/* Rechtsseiten — Struktur */
.legal-body{padding-bottom:20px;}
.legal-body h2{font-size:24px; margin:44px 0 12px; padding-top:22px; border-top:1px solid var(--linie);}
.legal-body h2:first-of-type{border-top:0; padding-top:0; margin-top:28px;}
.legal-body h3{font-size:17px; margin:26px 0 8px;}
.legal-body p, .legal-body li{font-size:15px; line-height:1.7; max-width:72ch;}
.legal-body ul{padding-left:20px; margin:0 0 16px;}
.legal-body li{margin-bottom:6px;}
.legal-body .stand{font-size:13px; color:var(--grau-d); margin-top:40px;}
.legal-body .slot{background:var(--flaeche); border:1px dashed var(--grau-d); padding:2px 8px; color:var(--grau-d); font-size:14px; white-space:nowrap;}
.legal-body .kasten{border:1px solid var(--linie); padding:22px 26px; margin:22px 0; background:var(--flaeche);}
.legal-body .kasten p:last-child{margin-bottom:0;}
.legal-body dl.zeile{margin:0 0 20px;}
.legal-body table{border-collapse:collapse; width:100%; font-size:14.5px; margin:12px 0 22px;}
@media (max-width:640px){ .legal-body table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;} }   /* schmale Bildschirme: Tabelle scrollt in sich, nie die Seite */
.legal-body th, .legal-body td{text-align:left; vertical-align:top; padding:11px 14px 11px 0; border-bottom:1px solid var(--linie);}
.legal-body th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grau-d); font-weight:500;}
.legal-body td:first-child{font-weight:600; width:28%;}
.legal-body .toc{list-style:none; padding:0; margin:0 0 10px; columns:2; column-gap:40px;}
.legal-body .toc li{break-inside:avoid; padding:7px 0; border-bottom:1px solid var(--linie); font-size:14.5px; margin:0;}
.legal-body .toc a{text-decoration:none; color:var(--ink);}
.legal-body .toc a:hover{color:var(--rot);}
@media (max-width:640px){ .legal-body .toc{columns:1} }

/* Fußzeile — Beratungshinweis */
.foothinweis{max-width:var(--container); margin:0 auto; padding:0 28px; font-size:12.5px; color:var(--band-muted); line-height:1.7;}
.foothinweis p{max-width:none; margin:0;}

/* 404 */
.p404 .pagehead h1{font-size:clamp(60px,12vw,140px); letter-spacing:-.04em; line-height:1;}

/* Druck */
@media print{
  .pageframe,.progress,.burger,.mnav,.seg,.skip,.marquee,.scrollcue{display:none !important;}
  header.site{position:static; border-bottom:1px solid #000;}
  body{background:#fff; color:#000;}
  a{color:#000;}
  .sect,.hero,.pagehead{padding:24px 0;}
  .pre{opacity:1 !important; transform:none !important;}
}

/* Utilities (ersetzen die Inline-Styles des Mockups — !important ist hier beabsichtigt) */
.blk{display:block !important}
.mt-10{margin-top:10px !important} .mt-14{margin-top:14px !important} .mt-20{margin-top:20px !important}
.mt-22{margin-top:22px !important} .mt-24{margin-top:24px !important} .mt-26{margin-top:26px !important}
.mt-28{margin-top:28px !important} .mt-40{margin-top:40px !important} .mt-50{margin-top:50px !important}
.mt-60{margin-top:60px !important}
.mb-8{margin-bottom:8px !important} .mb-10{margin-bottom:10px !important} .mb-14{margin-bottom:14px !important}
.mb-16{margin-bottom:16px !important} .mb-18{margin-bottom:18px !important} .mb-24{margin-bottom:24px !important}
.my-44{margin:44px 0 44px !important}
.m-26-0-0{margin:26px 0 0 !important}
.pt-20{padding-top:20px !important} .pt-46{padding-top:46px !important} .pb-10{padding-bottom:10px !important}
.maxw-680{max-width:680px !important}
.gap-0-48{gap:0 48px !important}
.lh-19{line-height:1.9 !important}
.fs-normal{font-style:normal !important}
.fz-135{font-size:13.5px !important} .fz-125{font-size:12.5px !important}
.c-inherit{color:inherit !important}
.ad-005{animation-delay:.05s !important} .ad-014{animation-delay:.14s !important} .ad-023{animation-delay:.23s !important}
.ad-032{animation-delay:.32s !important} .ad-090{animation-delay:.9s !important} .ad-180{animation-delay:1.8s !important}

/* Karten als Links (404) */
a.karte{display:block; text-decoration:none; color:inherit;}
a.karte:hover{border-color:var(--ink);}

/* Sprachumschalter (Links im Segment-Schalter) */
.seg a{display:inline-block; padding:9px 15px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--grau-d); text-decoration:none;}
.seg a.on{background:var(--btn-bg); color:var(--btn-ink);}
.seg a:not(.on):hover{color:var(--ink);}
.foot .seg a{color:var(--band-muted); opacity:1;}
.foot .seg a.on{color:var(--btn-ink);}
.foot .seg{background:transparent; border-color:rgba(140,140,140,.35);}

/* Hinweisleiste (kein Cookie-Banner: informiert, speichert nur die Bestätigung) */
.hinweisleiste{position:fixed; left:12px; right:12px; bottom:12px; z-index:79; background:var(--bg); color:var(--ink); border:1px solid var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.18);}
.hinweisleiste[hidden]{display:none;}
.mnav.open ~ .hinweisleiste{visibility:hidden;} /* bei offenem Menü nicht überlagern */
.hinweisleiste .inner{max-width:var(--container); margin:0 auto; padding:16px 28px; display:flex; gap:24px; align-items:center; justify-content:space-between;}
.hinweisleiste p{margin:0; font-size:14px; line-height:1.55; max-width:none;}
.hinweisleiste a{color:var(--ink);}
.hinweisleiste .aktionen{display:flex; gap:10px; flex:none;}
.hinweisleiste .btn{padding:11px 18px; font-size:13px;}
@media (max-width:760px){
  .hinweisleiste{left:8px; right:8px; bottom:8px;}
  .hinweisleiste .inner{flex-direction:column; align-items:stretch; gap:14px; padding:16px 20px;}
  .hinweisleiste .aktionen{justify-content:flex-end;}
}

/* Dialog: Datenschutz-Einstellungen */
.dialog{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px;}
.dialog[hidden]{display:none;}
.dialog .box{background:var(--bg); color:var(--ink); border:1px solid var(--ink); max-width:600px; width:100%; max-height:calc(100vh - 40px); overflow:auto; padding:30px 32px 26px;}
.dialog h2{font-size:26px; margin:0 0 12px;}
.dialog p{font-size:14.5px; max-width:none;}
.dialog .klein{font-size:12.5px; color:var(--grau-d); margin:14px 0 0;}
.kategorien{list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--linie);}
.kategorien li{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; padding:14px 0; border-bottom:1px solid var(--linie);}
.kategorien b{display:block; font-family:var(--f-display); font-size:16px; margin-bottom:3px;}
.kategorien span{font-size:13.5px; color:var(--grau-d); line-height:1.5;}
.kategorien .status{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink); border:1px solid var(--ink); padding:5px 9px; white-space:nowrap; margin-top:2px;}
.kategorien .status.aus{color:var(--grau-d); border-color:var(--linie);}
.dialog .aktionen{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:22px;}
@media (max-width:520px){ .kategorien li{grid-template-columns:1fr} .dialog .box{padding:24px 20px} }
@media print{ .hinweisleiste,.dialog{display:none !important} }