@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-var-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-var-latin.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-var-latin-ext.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}

:root{--paper:#f5f2ea;--paper2:#ece7da;--ink:#12202f;--ink2:#41505f;--line:#cfc8b8;--acc:#c4501f;--acc-d:#a53f13;--teal:#1f6f6b;--white:#fff;--r:2px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
a{color:var(--acc-d);text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.6vw,3.8rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.2rem);margin-top:1.8em}
h3{font-size:1.25rem;margin-top:1.4em}
h1 em,h2 em{font-style:italic;color:var(--acc)}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em;margin:0 0 1em}
li{margin:.25em 0}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}

/* Kopf */
.top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:"Newsreader",Georgia,serif;font-size:1.45rem;font-weight:600;letter-spacing:-.01em}
.brand svg{width:34px;height:34px;flex:none}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{color:var(--acc-d)}
.btn{display:inline-block;background:var(--acc);color:#fff!important;text-decoration:none;padding:12px 20px;border-radius:var(--r);font-weight:600;font-size:.98rem;border:0;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--acc-d)}
.btn.sec{background:transparent;color:var(--ink)!important;border:1px solid var(--ink)}
.btn.sec:hover{background:var(--ink);color:#fff!important}
.btn.kl{padding:9px 14px;font-size:.9rem;white-space:nowrap}
@media(max-width:760px){.nav a:not(.btn){display:none}.top .wrap{height:58px}.btn.kl{padding:8px 11px;font-size:.84rem}.brand{font-size:1.25rem}}

/* Held */
.held{padding:72px 0 56px;border-bottom:1px solid var(--line);background:
  radial-gradient(circle at 88% 12%,rgba(31,111,107,.10) 0,transparent 38%),var(--paper)}
.held .lead{font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--ink2);max-width:700px;margin:0 0 1.4em}
.kicker{font:600 .78rem/1 "Hanken Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 18px;display:block}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta small{color:var(--ink2)}
.preisband{margin-top:34px;display:flex;gap:28px;flex-wrap:wrap;color:var(--ink2);font-size:.95rem}
.preisband b{color:var(--ink);font-family:"Newsreader",serif;font-size:1.5rem;font-weight:600;display:block;line-height:1.1}

/* Abschnitte */
section{padding:56px 0}
section.alt{background:var(--paper2);border-block:1px solid var(--line)}
.eyebrow{font:600 .78rem/1 "Hanken Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 12px;display:block}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ink);background:var(--white);margin:28px 0}
.schritt{padding:22px 20px;border-right:1px solid var(--line)}
.schritt:last-child{border-right:0}
.schritt .nr{font-family:"Newsreader",serif;font-size:2.4rem;color:var(--acc);line-height:1;display:block;margin-bottom:8px}
.schritt h3{margin:0 0 .3em;font-size:1.15rem}
.schritt p{margin:0;font-size:.95rem;color:var(--ink2)}
@media(max-width:860px){.schritte{grid-template-columns:1fr 1fr}.schritt{border-bottom:1px solid var(--line)}.schritt:nth-child(2n){border-right:0}}
@media(max-width:520px){.schritte{grid-template-columns:1fr}.schritt{border-right:0}}
.spalten{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:860px){.spalten{grid-template-columns:1fr}}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
@media(max-width:860px){.karten{grid-template-columns:1fr}}
.karte{background:var(--white);border:1px solid var(--line);padding:20px}
.karte h3{margin-top:0;font-size:1.15rem}
.karte p{margin:0;color:var(--ink2);font-size:.97rem}

/* Beispielansicht */
.demo{background:var(--white);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--paper2),8px 8px 0 1px var(--line);padding:0}
.demo .leiste{background:var(--ink);color:#fff;padding:8px 14px;font-size:.8rem;display:flex;justify-content:space-between}
.demo .inh{padding:16px 18px}
.demo .fn{font-weight:700}.demo .m{color:var(--ink2);font-size:.88rem}
.demo .tel{display:inline-block;background:var(--ink);color:#fff;padding:8px 12px;font-size:.9rem;margin:10px 0}
.demo .chk{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;margin:6px 0 10px}
.demo .chk i{flex:none;width:16px;height:16px;border:2px solid var(--teal);background:var(--teal);margin-top:3px;position:relative}
.demo .chk i:after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
.demo .feld{border:1px solid var(--line);padding:8px 10px;font-size:.88rem;color:var(--ink2);background:var(--paper)}
.demo .feld+.feld{margin-top:6px}
.demo .stat{display:inline-block;border:1px solid var(--teal);color:var(--teal);font-size:.74rem;padding:1px 7px;margin-left:6px;font-weight:600}

/* Preis */
.preisbox{background:var(--white);border:1px solid var(--ink);padding:30px;max-width:520px}
.preisbox .p{font-family:"Newsreader",serif;font-size:3.4rem;line-height:1;font-weight:500}
.preisbox .p small{font-size:1rem;font-family:"Hanken Grotesk";color:var(--ink2)}
.preisbox ul{list-style:none;padding:0;margin:18px 0}
.preisbox li{padding:7px 0 7px 26px;border-top:1px solid var(--line);position:relative}
.preisbox li:before{content:"";position:absolute;left:4px;top:15px;width:9px;height:5px;border:solid var(--teal);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* Tabellen, Hinweise */
.tab{width:100%;border-collapse:collapse;font-size:.96rem;margin:18px 0;background:var(--white)}
.tab th,.tab td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.tab th{background:var(--paper2);font-weight:600}
.tab td.z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.kurz{background:var(--white);border-left:4px solid var(--acc);padding:16px 20px;margin:0 0 28px}
.kurz b.l{display:block;font:600 .75rem/1 "Hanken Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d);margin-bottom:8px}
.hinweis{background:var(--paper2);border:1px solid var(--line);padding:16px 20px;margin:22px 0;font-size:.95rem}
.hinweis p:last-child{margin:0}
.meta{color:var(--ink2);font-size:.88rem;margin:0 0 26px;display:flex;gap:16px;flex-wrap:wrap}
.krumen{font-size:.85rem;color:var(--ink2);padding:18px 0 0}
.krumen a{color:var(--ink2)}
.artikel{padding:34px 0 60px}
.artikel h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.artikel h2{margin-top:1.6em}
.liste{list-style:none;padding:0;margin:20px 0}
.liste li{border-top:1px solid var(--line);padding:16px 0}
.liste li:last-child{border-bottom:1px solid var(--line)}
.liste a{font-family:"Newsreader",serif;font-size:1.3rem;text-decoration:none;color:var(--ink)}
.liste a:hover{color:var(--acc-d)}
.liste p{margin:.2em 0 0;color:var(--ink2);font-size:.96rem}
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;list-style:none;padding-right:24px;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;top:-2px;font-size:1.4rem;color:var(--acc)}
details[open] summary:after{content:"–"}
details p{margin:.6em 0 0;color:var(--ink2)}
.legal h2{border-top:1px solid var(--line);padding-top:1em;font-size:1.35rem;margin-top:1.6em}
dl.fakten{display:grid;grid-template-columns:220px 1fr;gap:0;margin:20px 0;border-top:1px solid var(--line)}
dl.fakten dt,dl.fakten dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
dl.fakten dt{font-weight:600}
@media(max-width:600px){dl.fakten{grid-template-columns:1fr}dl.fakten dt{border-bottom:0;padding-bottom:0}}

/* Fuß */
.fuss{background:var(--ink);color:#c9d1d9;padding:46px 0 30px;font-size:.93rem}
.fuss a{color:#fff;text-decoration:none}.fuss a:hover{text-decoration:underline}
.fuss .sp{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){.fuss .sp{grid-template-columns:1fr 1fr}}
.fuss h4{margin:0 0 10px;color:#fff;font:600 .78rem/1 "Hanken Grotesk";letter-spacing:.14em;text-transform:uppercase}
.fuss ul{list-style:none;padding:0;margin:0}.fuss li{margin:6px 0}
.fuss .brand{color:#fff;margin-bottom:10px}
.fuss .klein{margin-top:30px;padding-top:18px;border-top:1px solid #2f4054;font-size:.82rem;color:#91a0ae}
.fuss .brand svg *{stroke:#fff}.fuss .brand svg .pin{fill:var(--acc);stroke:none}