@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-variable.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--grund:#F7F9FC;--alt:#EDF2F9;--text:#14213D;--text-2:#4A5872;--akzent:#004AAD;--akzent-2:#2E6BC6;--akzent-hell:#DCE7F6;--weiss:#FFFFFF;--linie:#D8E0EC;--navy:#0D2240;
--schrift:Archivo,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r:20px;--r-knopf:999px;--schatten:0 10px 30px rgba(13,34,64,.08);--abschnitt:clamp(4rem,8vw,7rem)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--schrift);font-size:1.125rem;line-height:1.7;color:var(--text);background:var(--grund)}
a{color:var(--akzent);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--akzent-2);outline-offset:3px;border-radius:6px}
.icon{vertical-align:-4px;flex:none}
.huelle{max-width:1200px;margin:0 auto;padding:0 24px}
.kopf{background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;flex-wrap:wrap}
.marke{font-weight:700;font-size:1.25rem;color:var(--text);text-decoration:none;display:flex;gap:10px;align-items:center;letter-spacing:-.01em}
.marke .icon{color:var(--akzent)}.marke span{font-weight:400;color:var(--text-2)}
.kopf nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.kopf nav a{color:var(--text);text-decoration:none;padding:10px 14px;border-radius:var(--r-knopf);min-height:44px;display:inline-flex;align-items:center;gap:6px;font-size:1rem}
.kopf nav a:hover{background:var(--akzent-hell)}
main{padding:16px 0 0}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.1;margin:16px 0 20px}
h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;margin:56px 0 14px}
h3{font-size:1.3rem;line-height:1.3;margin:32px 0 10px}
p,li{max-width:68ch}.lead{font-size:1.15rem;color:var(--text-2);margin-top:0}
.etikett{display:block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent)}
.brotkrumen{font-size:.9rem;color:var(--text-2);margin:16px 0 0}.brotkrumen ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.brotkrumen li+li::before{content:"›";margin-right:6px}.brotkrumen a{color:var(--text-2)}
.knopf{font:inherit;font-size:1.05rem;font-weight:600;background:var(--akzent);color:var(--weiss);border:2px solid var(--akzent);border-radius:var(--r-knopf);padding:14px 30px;min-height:56px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 20px rgba(0,74,173,.18)}
.knopf:hover{background:#003C8C;border-color:#003C8C;color:var(--weiss)}
.knopf.rand{background:transparent;color:var(--akzent);box-shadow:none;border-color:var(--linie)}.knopf.rand:hover{border-color:var(--akzent);background:var(--weiss)}
.knopf.hell{background:var(--weiss);color:var(--navy);border-color:var(--weiss)}.knopf.hell:hover{background:var(--akzent-hell)}
.knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.band{padding:var(--abschnitt) 0}.band>h2:first-child{margin-top:0}
.band.alt{background:var(--alt);box-shadow:0 0 0 100vmax var(--alt);clip-path:inset(0 -100vmax)}
.band.dunkel{background:var(--navy);color:var(--weiss);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax)}
.band.dunkel h2{color:var(--weiss)}.band.dunkel .lead{color:#C4D2E8}
.band.schluss{text-align:center}.band.schluss .lead{margin:0 auto 28px}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(24px,5vw,56px) 0 var(--abschnitt);position:relative}
.hero::before{content:"";position:absolute;right:-18%;top:-8%;width:46vw;max-width:640px;aspect-ratio:1;border-radius:50%;background:var(--akzent-hell);opacity:.6;z-index:-1}
.unterzeile{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.35;color:var(--akzent);font-weight:500;margin:0 0 18px}
.einleitung p{color:var(--text-2);margin:0 0 8px}
.vorteile{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.vorteile li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-knopf);background:var(--weiss);box-shadow:var(--schatten);font-size:.92rem;font-weight:500}
.vorteile .icon{color:var(--akzent);width:18px;height:18px}
.hero-karte{background:var(--weiss);border-radius:var(--r);box-shadow:var(--schatten);padding:28px}
.hero-karte ol{list-style:none;padding:0;margin:12px 0 0}
.hero-karte li a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--text);font-weight:600;font-size:1rem;line-height:1.35}
.hero-karte li:last-child a{border-bottom:0}.hero-karte li a:hover{color:var(--akzent)}.hero-karte small{font-weight:400;color:var(--text-2);white-space:nowrap;font-size:.85rem}
.suchform{display:flex;gap:8px;max-width:600px;margin-top:24px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-knopf);padding:6px}
.suchform input{flex:1;font:inherit;padding:10px 18px;border:0;border-radius:var(--r-knopf);min-height:48px;background:transparent;min-width:0;color:var(--text)}
.suchform input:focus-visible{outline:none}.suchform:focus-within{border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-hell)}
.suchform .knopf{min-height:48px;padding:10px 22px;box-shadow:none}
.zeitleiste{list-style:none;padding:0;margin:48px 0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.zeitleiste::before{content:"";position:absolute;left:8px;right:0;top:8px;height:2px;background:linear-gradient(90deg,var(--akzent-2),var(--akzent-hell))}
.zeitleiste li{position:relative;padding-top:36px;color:var(--text-2);font-size:1rem}
.zeitleiste li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 5px var(--weiss),0 0 0 6px var(--linie)}
.zeitleiste strong{display:block;font-size:1.3rem;font-weight:600;color:var(--text);margin:6px 0 8px;letter-spacing:-.01em}
.liste{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.liste li{border-top:1px solid var(--linie);max-width:none}.liste li:nth-last-child(-n+2){border-bottom:1px solid var(--linie)}
.liste a{display:block;padding:20px 0;text-decoration:none;color:var(--text)}
.liste a strong{display:block;font-size:1.15rem;font-weight:600;margin:4px 0;letter-spacing:-.01em}.liste a:hover strong{color:var(--akzent);text-decoration:underline}
.liste a span:not(.etikett){display:block;color:var(--text-2);font-size:.98rem;line-height:1.55}
.begriffswolke{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:28px 0;list-style:none}
.begriffswolke a{display:inline-flex;min-height:44px;align-items:center;padding:8px 18px;border-radius:var(--r-knopf);background:var(--weiss);border:1px solid var(--linie);text-decoration:none;color:var(--text);font-weight:500;font-size:1rem}
.begriffswolke a:hover{border-color:var(--akzent);color:var(--akzent)}
article{max-width:780px;padding-bottom:var(--abschnitt)}
.mit-leiste{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,4vw,64px);align-items:start}.mit-leiste>article{min-width:0}
.seitenleiste{display:grid;gap:28px;padding:24px 0 var(--abschnitt);font-size:1rem}
.leiste-block h2{font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin:0 0 10px}
.leiste-block ul{list-style:none;padding:0;margin:0}
.leiste-artikel li{padding:12px 0;border-top:1px solid var(--linie)}.leiste-artikel li:last-child{border-bottom:1px solid var(--linie)}
.leiste-artikel .etikett{font-size:.7rem;margin-bottom:4px}.leiste-artikel a{color:var(--text);text-decoration:none;font-weight:600;line-height:1.35;display:block}.leiste-artikel a:hover{color:var(--akzent);text-decoration:underline}
.leiste-themen a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.leiste-themen a:hover{background:var(--alt)}.leiste-themen a[aria-current]{background:var(--akzent-hell);color:var(--akzent);font-weight:600}
.leiste-themen span{color:var(--text-2);font-size:.88rem}
.banner{background:var(--navy);color:#C4D2E8;border-radius:var(--r);padding:24px}
.banner .etikett{color:#9DB8E0}.banner strong{display:block;color:var(--weiss);font-size:1.25rem;line-height:1.3;margin:6px 0 8px}.banner p{margin:0 0 16px;font-size:.95rem}
.banner .knopf{min-height:48px;padding:10px 22px;width:100%}
.leiste-begriffe{display:flex;flex-wrap:wrap;gap:8px}.leiste-begriffe a{display:inline-flex;padding:6px 14px;border-radius:var(--r-knopf);background:var(--weiss);border:1px solid var(--linie);color:var(--text);text-decoration:none;font-size:.92rem}
.leiste-begriffe a:hover{border-color:var(--akzent);color:var(--akzent)}
.leiste-links li{padding:6px 0}.leiste-links a{font-size:.95rem}article h1{font-size:clamp(2.1rem,4vw,3.1rem)}
.artikel-kopf .meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--text-2);font-size:.95rem;margin:0 0 8px}
.artikel-kopf .meta span:first-child{color:var(--akzent);font-weight:600}
.ebenen{margin:32px 0}.ebenen>input{position:absolute;opacity:0;pointer-events:none}
.ebenen>label{display:inline-flex;align-items:center;min-height:48px;padding:10px 22px;cursor:pointer;background:var(--weiss);border:1px solid var(--linie);font-weight:600;margin:0 8px 8px 0;border-radius:var(--r-knopf);font-size:1rem}
.ebenen>input:checked+label{background:var(--akzent);border-color:var(--akzent);color:var(--weiss)}
.ebenen>input:focus-visible+label{outline:3px solid var(--akzent-2);outline-offset:2px}
.ebene{margin-top:16px}.ebene-it{display:none}
#ebene-it:checked~.ebene-kurz{display:none}#ebene-it:checked~.ebene-it{display:block}
.toc{border-left:3px solid var(--akzent);padding:4px 0 4px 20px;margin:16px 0 24px;font-size:1rem}.toc strong{font-weight:600}
.toc ol{margin:8px 0 0;padding-left:22px}.toc li{margin:4px 0}.toc li.unter{margin-left:18px;list-style-type:circle}
.hinweis{background:var(--alt);border-radius:var(--r);padding:32px;margin:56px 0}
.hinweis p{margin:6px 0}.hinweis strong{font-size:1.3rem;font-weight:600}.hinweis .knopf{margin-top:16px}
details{border-bottom:1px solid var(--linie)}details:first-of-type{border-top:1px solid var(--linie)}
summary{cursor:pointer;font-weight:600;font-size:1.08rem;padding:18px 40px 18px 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:1.6rem;color:var(--akzent);font-weight:400}
details[open] summary::after{content:"–"}details>*:not(summary){margin-top:0;color:var(--text-2)}
a.glossar{color:inherit;text-decoration:underline dotted var(--akzent-2);text-decoration-thickness:2px}a.glossar:hover{color:var(--akzent)}
table{border-collapse:collapse;width:100%;margin:20px 0;font-size:.98rem;display:block;overflow-x:auto}th,td{border-bottom:1px solid var(--linie);padding:10px 12px;text-align:left;vertical-align:top}th{font-weight:600}
blockquote{margin:20px 0;padding:4px 20px;border-left:3px solid var(--akzent);color:var(--text-2)}
code{background:var(--alt);padding:1px 6px;border-radius:6px;font-size:.92em}pre{background:var(--navy);color:var(--weiss);padding:16px;border-radius:14px;overflow-x:auto}
.buchstaben{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.buchstaben a{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-knopf);background:var(--weiss);border:1px solid var(--linie);text-decoration:none;font-weight:600}
.buchstaben a:hover{border-color:var(--akzent)}
.begriffe{list-style:none;padding:0;max-width:780px}.begriffe li{padding:16px 0;border-bottom:1px solid var(--linie);max-width:none}
main>.huelle>h1+.lead,main>.huelle>h1+p{margin-bottom:8px}main>.huelle>.liste:last-child,main>.huelle>.begriffe:last-child{margin-bottom:var(--abschnitt)}
.fuss{background:var(--navy);color:#C4D2E8;font-size:.95rem;padding:clamp(48px,7vw,72px) 0 32px}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fuss strong{display:block;color:var(--weiss);margin-bottom:12px;font-weight:600}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.fuss a{color:#E4ECF7;text-decoration:none}.fuss a:hover{color:var(--weiss);text-decoration:underline}
.fuss .unten{border-top:1px solid #253C5E;margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:980px){.mit-leiste{grid-template-columns:1fr}.seitenleiste{padding-top:0}article{padding-bottom:24px}}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero::before{display:none}.zeitleiste{grid-template-columns:1fr;gap:28px}.zeitleiste::before{left:8px;right:auto;top:8px;bottom:8px;width:2px;height:auto}.zeitleiste li{padding:0 0 0 40px}.fuss-raster{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.liste{grid-template-columns:1fr}.liste li:nth-last-child(2){border-bottom:0}}
@media (max-width:640px){body{font-size:1.0625rem}h1{hyphens:auto;overflow-wrap:break-word}.hero h1{font-size:2.05rem;hyphens:manual}.marke span{display:none}.suchform{flex-direction:column;border-radius:var(--r)}.knoepfe .knopf{width:100%}
.fuss-raster{grid-template-columns:1fr}.hero-karte,.hinweis{padding:22px}.kopf .huelle{min-height:64px}.kopf nav a{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}