/* ===== Design-Tokens ===== */
:root{--bg:#ffffff;--bg-alt:#f5f5f7;--fg:#1d1d1f;--fg2:#6e6e73;--line:#d2d2d7;--accent:#0a7d8c;--accent-h:#086a77;--on-accent:#ffffff;--link:#0a6e7c;--card:#ffffff;--ok:#1f9d6b;--warn:#f5a524;--nav-bg:rgba(255,255,255,.82);--tone:#0a7d8c;--tone-soft:#e2f4f6;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--r-lg:28px;--r-md:20px;--r-sm:12px}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1013;--bg-alt:#1a1b20;--fg:#f5f5f7;--fg2:#a1a1a6;--line:#34353b;--accent:#36c2d4;--accent-h:#5bd0e0;--on-accent:#03222a;--link:#6fd6e4;--card:#1a1b20;--nav-bg:rgba(15,16,19,.78);--tone:#5fd3e3;--tone-soft:#0f2f35}
}
body.t-teal{--tone:#0f8f7d;--tone-soft:#e3f6f2}
body.t-indigo{--tone:#4f46e5;--tone-soft:#ecebfd}
body.t-amber{--tone:#b45309;--tone-soft:#fff1de}
body.t-violet{--tone:#3a64ed;--tone-soft:#eaeffe}
body.t-green{--tone:#0f8a5f;--tone-soft:#e2f6ec}
body.t-rose{--tone:#c01048;--tone-soft:#ffe8ee}
@media (prefers-color-scheme:dark){
  body.t-teal{--tone:#4fd1bd;--tone-soft:#10302b}
  body.t-indigo{--tone:#9a9bff;--tone-soft:#1c1c46}
  body.t-amber{--tone:#fbbf6a;--tone-soft:#3a2a10}
  body.t-violet{--tone:#a5baff;--tone-soft:#1d274a}
  body.t-green{--tone:#58d6a0;--tone-soft:#10301f}
  body.t-rose{--tone:#ff7a9c;--tone-soft:#3a1420}
}

/* ===== Basis ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.5rem var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration:underline}}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em}
p{margin:0 0 1rem}
.wrap{width:min(1180px,100% - 44px);margin-inline:auto}
.narrow{width:min(1180px,100% - 44px);margin-inline:auto}
.narrow>*{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:0.5rem 1rem;border-radius:8px;z-index:200}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.5rem;height:1.5rem;flex:none}
.eyebrow{color:var(--tone);font-weight:600;font-size:1rem;line-height:1.5rem;margin:0 0 0.25rem}
.more{color:var(--link);font-size:1rem;line-height:1.5rem;display:inline-flex;gap:0.25rem;align-items:center}
.more::after{content:"›";font-size:1.25rem;line-height:1.75rem;transform:translateY(-1px)}
@media (hover:hover) and (pointer:fine){a:hover .more,.more:hover{text-decoration:underline}}

/* ===== Lokale Navigation (Unterseiten) ===== */
.lnav{position:sticky;top:44px;z-index:90;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.lnav-in{max-width:1224px;margin:auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:1.5rem}
.lnav-title{font-weight:600;font-size:1.25rem;line-height:1.75rem;letter-spacing:-.02em;white-space:nowrap}
.lnav nav{display:flex;gap:1.5rem;align-items:center;overflow-x:auto;scrollbar-width:none}
.lnav nav::-webkit-scrollbar{display:none}
.lnav nav a{color:var(--fg);opacity:.78;font-size:0.75rem;line-height:1rem;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.lnav nav a:hover{opacity:1;text-decoration:none}}
.pill{display:inline-block;background:var(--accent);color:var(--on-accent)!important;opacity:1!important;border-radius:8px;padding:0.25rem 0.75rem;font-weight:600}
@media (hover:hover) and (pointer:fine){.pill:hover{background:var(--accent-h)}}
@media (max-width:640px){.lnav-title{font-size:1.125rem;line-height:1.75rem}.lnav-in{gap:0.75rem}}

/* ===== Buttons ===== */
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:12px;padding:0.75rem 1.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;border:0;cursor:pointer;font-family:inherit}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--accent-h);text-decoration:none}}
.btn-o{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
@media (hover:hover) and (pointer:fine){.btn-o:hover{background:var(--tone-soft)}}
.row{display:flex;gap:0.75rem 1.5rem;flex-wrap:wrap;align-items:center}

/* ===== Hero ===== */
.hero{padding:3rem 0 1rem}
.hero h1{font-size:1.875rem;line-height:2.25rem;letter-spacing:-.03em;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.hero h1 span{color:var(--fg2)}
.hero .lead{font-size:1.25rem;line-height:1.75rem;color:var(--fg2);margin:0.75rem 0 0;max-width:30ch;letter-spacing:-.015em}
.hero-c{text-align:center}
.hero-c .lead{margin-inline:auto;max-width:34ch}
.hero-c .row{justify-content:center;margin-top:1.5rem}
.hero-img{margin-top:1.5rem;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-alt)}
.hero-img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:900px){.hero-img img{aspect-ratio:2/1;object-position:center}}

/* Kategorie-Leiste */
.cats{display:flex;gap:0.25rem;overflow-x:auto;padding:2rem 0.25rem 0.75rem;scrollbar-width:none;justify-content:flex-start}
.cats::-webkit-scrollbar{display:none}
@media (min-width:1100px){.cats{justify-content:space-between}}
.cat{display:flex;flex-direction:column;align-items:center;gap:0.75rem;color:var(--fg);font-size:0.875rem;line-height:1.25rem;font-weight:600;min-width:96px;text-align:center}
@media (hover:hover) and (pointer:fine){.cat:hover{text-decoration:none}}
.cat i{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);color:var(--tone);transition:transform 500ms cubic-bezier(0.22,1,0.36,1)}
@media (hover:hover) and (pointer:fine){.cat:hover i{transform:scale(1.06)}}
.cat svg{width:40px;height:40px;stroke-width:1.4}

/* ===== Sektionen ===== */
section{padding:3rem 0}
.alt{background:var(--bg-alt)}
.sec-head{margin-bottom:1.5rem}
.sec-title{font-size:1.875rem;line-height:2.25rem;letter-spacing:-.025em}
.sec-sub{font-size:1.125rem;line-height:1.75rem;color:var(--fg2);margin:0.5rem 0 0;max-width:36ch}
.center{text-align:center}.center .sec-sub{margin-inline:auto}

/* ===== Kacheln ===== */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem}
.tiles-3{grid-template-columns:repeat(3,1fr)}
.tile{display:flex;flex-direction:column;background:var(--bg-alt);border-radius:var(--r-lg);overflow:hidden;color:var(--fg);text-align:center}
.alt .tile{background:var(--card)}
@media (hover:hover) and (pointer:fine){.tile:hover{text-decoration:none}}
.tile-t{padding:1.5rem 1.5rem 1.5rem}
.tile h3{font-size:1.5rem;line-height:2rem;letter-spacing:-.025em}
.tile p{margin:0.5rem auto 0.75rem;color:var(--fg2);font-size:1rem;line-height:1.5rem;max-width:34ch}
.tile .eyebrow{font-size:0.875rem;line-height:1.25rem}
.tile img{display:block;width:100%;margin-top:auto;aspect-ratio:3/2;object-fit:cover}
.tiles-3 .tile h3{font-size:1.5rem;line-height:2rem}
.tiles-3 .tile img{aspect-ratio:3/2}
@media (max-width:860px){.tiles,.tiles-3{grid-template-columns:1fr}}

/* ===== Karten ===== */
.cards{display:grid;gap:0.75rem;grid-template-columns:repeat(12,minmax(0,1fr))}
.cards>*{grid-column:span 12}
.card{background:var(--bg-alt);border-radius:var(--r-md);padding:1.5rem 1.5rem}
.alt .card{background:var(--card)}
.card .ico{width:52px;height:52px;border-radius:12px;background:var(--tone-soft);color:var(--tone);display:grid;place-items:center;margin-bottom:1rem}
.card .ico svg{width:28px;height:28px}
.card h3{font-size:1.25rem;line-height:1.75rem;letter-spacing:-.015em;margin-bottom:0.5rem}
.card p{color:var(--fg2);font-size:1rem;line-height:1.5rem;margin:0}
.card ul{margin:0.5rem 0 0;padding-left:1rem;color:var(--fg2);font-size:0.875rem;line-height:1.25rem}
.card li{margin:0.25rem 0}

/* ===== Ablauf ===== */
.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.75rem;counter-reset:s;--k:1}
.flow>li{flex:1 1 calc((100% - 14px*(var(--k) - 1))/var(--k));min-width:0}
.flow li{position:relative;background:var(--bg-alt);border-radius:var(--r-md);padding:1.5rem 1rem 1.5rem;counter-increment:s}
.alt .flow li{background:var(--card)}
.flow li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tone);color:#fff;font-weight:600;font-size:0.875rem;line-height:1.25rem;margin-bottom:0.75rem}
.flow h3{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01em;margin-bottom:0.5rem}
.flow p{margin:0;color:var(--fg2);font-size:0.875rem;line-height:1.25rem}

/* ===== Tabellen ===== */
.tbl{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:0.875rem;line-height:1.25rem}
th,td{padding:1rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-weight:600;background:var(--bg-alt);font-size:0.875rem;line-height:1.25rem}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600;white-space:nowrap}
td{color:var(--fg2)}td:first-child{color:var(--fg)}

/* ===== Zwei-Spalten ===== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:1.5rem;align-items:center}
.split.top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.figure{background:var(--bg-alt);border-radius:var(--r-lg);padding:0.75rem}
.alt .figure{background:var(--card)}
.figure svg{display:block;width:100%;height:auto}
figcaption{font-size:0.75rem;line-height:1rem;color:var(--fg2);margin-top:0.75rem;text-align:center}

/* ===== Akkordeon ===== */
details.acc{border-bottom:1px solid var(--line)}
details.acc:first-of-type{border-top:1px solid var(--line)}
details.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0.25rem;font-size:1.25rem;line-height:1.75rem;font-weight:600;letter-spacing:-.015em}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--fg2);border-bottom:2px solid var(--fg2);transform:rotate(45deg) translateY(-3px);transition:transform 500ms cubic-bezier(0.22,1,0.36,1)}
details.acc[open] summary::after{transform:rotate(225deg) translateY(-3px)}
details.acc .acc-b{padding:0 0.25rem 1.5rem;color:var(--fg2);max-width:70ch}
details.acc .acc-b p:last-child{margin-bottom:0}
details.acc.on summary{color:var(--tone)}

/* ===== Check-Widget ===== */
.check{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:start}
@media (max-width:900px){.check{grid-template-columns:1fr}}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:600;font-size:1.25rem;line-height:1.75rem;margin-bottom:0.75rem;padding:0}
.opt{display:flex;gap:0.75rem;align-items:flex-start;padding:1rem 1rem;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:0.5rem;cursor:pointer;transition:box-shadow 300ms cubic-bezier(0.22,1,0.36,1),background 300ms cubic-bezier(0.22,1,0.36,1)}
.alt .opt{background:var(--card)}
@media (hover:hover) and (pointer:fine){.opt:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}}
.opt input{width:1.35rem;height:1.35rem;margin-top:0.125rem;accent-color:var(--ok);flex:none}
.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.result{background:var(--card);border-radius:var(--r-lg);padding:1.5rem;position:sticky;top:120px;box-shadow:inset 0 0 0 1px var(--line)}
.ring{display:flex;gap:1rem;align-items:center}
.ring svg{width:112px;height:112px;flex:none;transform:rotate(-90deg)}
.ring .track{stroke:var(--tone-soft)}
.ring .fill{stroke:var(--ok);transition:none}
.ring strong{display:block;font-size:1.875rem;line-height:2.25rem;letter-spacing:-.03em}
.ring span{display:block;color:var(--fg2);font-size:0.875rem;line-height:1.25rem;margin-top:0.25rem}
.tip{border-left:4px solid var(--warn);padding:0.125rem 0 0.125rem 0.75rem;margin-top:1rem;font-size:0.875rem;line-height:1.25rem}
.tip b{display:block;margin-bottom:0.125rem}
.note{font-size:0.75rem;line-height:1rem;color:var(--fg2);margin:1rem 0 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Rechner ===== */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;margin-bottom:0.25rem}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:0.75rem 0.75rem;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.field small{display:block;color:var(--fg2);margin-top:0.25rem;font-size:0.75rem;line-height:1rem}
.out{background:var(--card);border-radius:var(--r-lg);padding:2rem;box-shadow:inset 0 0 0 1px var(--line)}
.out .big{font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.04em;color:var(--tone)}
.out dl{margin:1rem 0 0;display:grid;grid-template-columns:1fr auto;gap:0.5rem 1rem;font-size:0.875rem;line-height:1.25rem}
.out dt{color:var(--fg2)}.out dd{margin:0;font-weight:600;text-align:right}
.warn{margin-top:1rem;padding:0.75rem 0.75rem;border-radius:12px;background:color-mix(in srgb,var(--warn) 16%,var(--card));font-size:0.875rem;line-height:1.25rem}

/* ===== Glossar ===== */
.search{width:100%;max-width:520px;padding:1rem 1rem;font:inherit;font-size:1rem;line-height:1.5rem;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);margin-bottom:1.5rem}
.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.gloss{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1.5rem;margin:0}
.gloss div{padding:1rem 0;border-top:1px solid var(--line)}
.gloss div[hidden]{display:none}
.gloss dt{font-weight:600;font-size:1.125rem;line-height:1.75rem;letter-spacing:-.015em}
.gloss dd{margin:0.25rem 0 0;color:var(--fg2);font-size:1rem;line-height:1.5rem}
@media (max-width:760px){.gloss{grid-template-columns:1fr}}

/* ===== Vorteile / Hilfe ===== */
.benefit{display:flex;flex-direction:column;gap:0.25rem}
.cta-band{background:var(--tone-soft);border-radius:var(--r-lg);padding:2rem;text-align:center}
.cta-band h2{font-size:1.5rem;line-height:2rem;letter-spacing:-.025em}
.cta-band p{color:var(--fg2);font-size:1.25rem;line-height:1.75rem;margin:0.75rem auto 1.5rem;max-width:36ch}
.cta-band .row{justify-content:center}

/* ===== Diagramme ===== */
.dg text{font-family:var(--font)}
.dg .lbl{font-size:12px;font-weight:600}
.dg .sm{font-size:12px}
.ring-g{cursor:pointer}
.ring-g circle{transition:stroke 300ms cubic-bezier(0.22,1,0.36,1)}
.ring-g.on circle{stroke:#f5a524;stroke-width:5}

/* ===== Footer ===== */
footer{background:var(--bg-alt);padding:2.5rem 0 2rem;font-size:0.75rem;line-height:1rem;color:var(--fg2)}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
footer h4{font-size:0.75rem;line-height:1rem;color:var(--fg);margin-bottom:0.5rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0.5rem 0}
footer a{color:var(--fg2)}
@media (hover:hover) and (pointer:fine){footer a:hover{color:var(--fg);text-decoration:underline}}
.f-bot{padding-top:1rem;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;justify-content:space-between}
mark{background:#fff0a8;color:#1d1d1f;padding:0 0.25rem;border-radius:4px}
.legal h2{font-size:1.5rem;line-height:2rem;margin:3rem 0 1rem}.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.125rem;line-height:1.75rem;margin:2rem 0 0.5rem}
.legal p{color:var(--fg2);max-width:70ch;font-size:1rem;line-height:1.5rem}
.lab text{fill:var(--fg)}
.lab.on text{fill:var(--tone)}
.lab{cursor:pointer}
.dg .zt{font-size:14px;font-weight:600;fill:var(--fg)}
.dg .zs{font-size:12px;fill:var(--fg2)}
.dg .edge{stroke:var(--fg2);stroke-width:1.6;fill:none}
.dg .node>rect,.dg .nbox{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.dg .nb2{fill:var(--bg-alt);stroke:var(--line);stroke-width:1.5}
.fig-note{display:flex;gap:0.5rem;align-items:flex-start;font-size:0.875rem;line-height:1.25rem;color:var(--fg2);margin-top:1rem}
.list-ic{list-style:none;margin:0;padding:0;display:grid;gap:0.75rem}
.list-ic li{display:flex;gap:0.75rem;align-items:flex-start}
.list-ic svg{width:1.4rem;height:1.4rem;color:var(--ok);margin-top:0.125rem}
.src{font-size:0.75rem;line-height:1rem;color:var(--fg2);margin-top:1rem;max-width:80ch}
.callout{background:var(--card);border-radius:var(--r-md);padding:1.5rem 1.5rem;box-shadow:inset 0 0 0 1px var(--line);display:flex;gap:1rem;align-items:flex-start}
.callout svg{width:1.7rem;height:1.7rem;color:var(--warn);margin-top:0.125rem}
.callout h3{font-size:1.125rem;line-height:1.75rem;margin-bottom:0.25rem}.callout p{margin:0;color:var(--fg2);font-size:1rem;line-height:1.5rem}
.mt{margin-top:1rem}
.split>*,.calc>*,.check>*,.tiles>*,.cards>*,.flow>*{min-width:0}
.lnav nav{min-width:0}.lnav-in{overflow:hidden}
.lab.on .bd{stroke:#f5a524;fill:#fff3d6}.lab text{fill:#0A3D91!important}
.dg .zt2{font-size:20px;font-weight:600;fill:var(--fg)}
.dg .zs2{font-size:16px;fill:var(--fg2)}
.tbl.compact table{min-width:0}.tbl.compact td:first-child{white-space:normal}
@media (max-width:760px){.figure.sc{overflow-x:auto}.figure.sc svg{min-width:640px}}

.f-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cat{min-width:84px}.cat i{width:76px;height:76px}.cat svg{width:34px;height:34px}
.cat{flex:1 0 84px}

/* ===== Globale Navigation (Muster: schlanke Leiste, Flyouts, Curtain) ===== */
.gn{position:sticky;top:0;z-index:1000;height:44px;--gn-h:0px;--gn-t:.36s}
.gn-bg{position:absolute;left:0;right:0;top:0;height:44px;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 color-mix(in srgb,var(--line) 70%,transparent);transition:background-color 300ms cubic-bezier(0.22,1,0.36,1)}
.gn.is-open .gn-bg,.gn.search-open .gn-bg{height:calc(44px + var(--gn-h));background:color-mix(in srgb,var(--bg) 97%,transparent)}
.gn-nav{position:relative;max-width:1224px;height:44px;margin:auto;padding:0 1.5rem}
.gn-list{display:flex;justify-content:space-between;align-items:center;height:44px;list-style:none;margin:0;padding:0}
.gn-item{display:block;height:44px;transition:opacity 300ms cubic-bezier(0.22,1,0.36,1)}
.gn-logo{display:flex;align-items:center;gap:0.5rem;height:44px;padding-right:0.5rem;color:var(--fg)}
@media (hover:hover) and (pointer:fine){.gn-logo:hover{text-decoration:none}}.gn-logo img{width:26px;height:26px;border-radius:6px;display:block}.gn-name{font-size:0.75rem;line-height:1rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.gn-link{display:flex;align-items:center;height:44px;padding:0 0.75rem;white-space:nowrap;font-size:0.75rem;line-height:1rem;letter-spacing:-.01em;color:var(--fg);opacity:.8;transition:opacity 300ms cubic-bezier(0.22,1,0.36,1)}
.gn-item.is-open>.gn-link{opacity:1;text-decoration:none}@media (hover:hover) and (pointer:fine){.gn-link:hover{opacity:1;text-decoration:none}}.gn-link[aria-current]{opacity:1;box-shadow:inset 0 -2px 0 var(--accent)}
.gn-tools,.gn-burgerli{display:flex;align-items:center}
.gn-searchbtn{display:grid;place-items:center;width:40px;height:44px;margin-right:-0.5rem;background:none;border:0;color:var(--fg);opacity:.8;cursor:pointer}
@media (hover:hover) and (pointer:fine){.gn-searchbtn:hover{opacity:1}}
.gn-burger{display:none;width:44px;height:44px;margin-right:-0.75rem;background:none;border:0;cursor:pointer;color:var(--fg)}
.gn-burger span{display:block;width:18px;height:1.5px;background:currentColor;margin:0.25rem auto;transition:transform 500ms cubic-bezier(0.22,1,0.36,1),opacity 300ms cubic-bezier(0.22,1,0.36,1)}
.gn-burger[aria-expanded=true] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.gn-burger[aria-expanded=true] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
.gn.search-open .gn-has,.gn.search-open .gn-plain{opacity:0;pointer-events:none}

/* Flyouts */
.gn-fly,.gn-search{position:absolute;left:0;right:0;top:44px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 300ms cubic-bezier(0.22,1,0.36,1),visibility 0s .22s}
.gn-has.is-open>.gn-fly,.gn.search-open .gn-search{visibility:visible;opacity:1;pointer-events:auto;transition:opacity 300ms cubic-bezier(0.22,1,0.36,1) .05s,visibility 0s}
.gn-has{position:static}
.gn-fly-in{max-width:1224px;margin:auto;padding:1.5rem 1.5rem 3rem;display:grid;grid-template-columns:1.6fr 1fr;gap:2.5rem}
.gn-h{font-size:0.75rem;line-height:1rem;color:var(--fg2);margin:0 0 0.75rem;letter-spacing:-.01em}
.gn ul{list-style:none;margin:0;padding:0}
.gn-big a{display:block;font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:.004em;color:var(--fg);padding:0.25rem 0}
.gn-small a{display:block;font-size:0.875rem;line-height:1.25rem;font-weight:600;color:var(--fg);padding:0.25rem 0}
@media (hover:hover) and (pointer:fine){.gn-big a:hover,.gn-small a:hover{color:var(--link);text-decoration:none}}
.gn-fly .gn-h,.gn-fly li,.gn-sr .gn-h,.gn-sr li,.gn-sf{opacity:0;transform:translateY(-8px);transition:opacity 300ms cubic-bezier(0.22,1,0.36,1),transform 500ms cubic-bezier(0.22,1,0.36,1)}
.gn-has.is-open .gn-fly .gn-h,.gn-has.is-open .gn-fly li,.gn.search-open .gn-sr .gn-h,.gn.search-open .gn-sr li,.gn.search-open .gn-sf{opacity:1;transform:none;transition:opacity 300ms var(--ease),transform 500ms var(--ease)}
.gn-has.is-open>.gn-link{opacity:1}

/* Suche */
.gn-search-in{max-width:1224px;margin:auto;padding:0.5rem 1.5rem 3rem}
.gn-sf{display:flex;align-items:center;gap:0.75rem;border-bottom:1px solid var(--line);padding:0.25rem 0 0.5rem;margin:0}
.gn-si{color:var(--fg2);display:grid;place-items:center}.gn-si svg{width:24px;height:24px}
.gn-sf input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:inherit;font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.01em;padding:0.25rem 0;outline:none}
.gn-sf input::placeholder{color:var(--fg2);opacity:.7}
.gn-sf input::-webkit-search-cancel-button{display:none}
.gn-sc{background:none;border:0;color:var(--link);font:inherit;font-size:0.875rem;line-height:1.25rem;cursor:pointer;padding:0.25rem}
.gn-sr{padding-top:1.5rem}
.gn-sr li{--i:1}
.gn-sr a{display:block;color:var(--fg);padding:0.5rem 0;font-size:1rem;line-height:1.5rem;font-weight:600;letter-spacing:-.01em}
.gn-sr a.sel{color:var(--link);text-decoration:none}@media (hover:hover) and (pointer:fine){.gn-sr a:hover{color:var(--link);text-decoration:none}}
.gn-sr small{display:block;font-weight:400;font-size:0.75rem;line-height:1rem;color:var(--fg2)}
.gn-sr mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* Curtain */
.gn-curtain{position:fixed;left:0;right:0;top:44px;bottom:0;z-index:999;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity 300ms cubic-bezier(0.22,1,0.36,1),visibility 0s .36s}
html.gn-open .gn-curtain{opacity:1;visibility:visible;transition-delay:0s}

/* Mobile-Navigation */
.gn-mobile{display:none}
@media all{
  .gn .gn-burgerli{display:flex}
  .gn-has,.gn-plain{display:none}
  .gn-list{justify-content:flex-start}
  .gn-home{margin-right:auto}
  .gn-burger{display:block}
  .gn-fly{display:none}
  .gn-mobile{display:block;position:fixed;left:0;right:0;top:44px;bottom:0;background:var(--bg);overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;transition:opacity 300ms cubic-bezier(0.22,1,0.36,1),visibility 0s .3s}
  .gn.mob-open .gn-mobile{visibility:visible;opacity:1;transition:opacity 300ms cubic-bezier(0.22,1,0.36,1),visibility 0s}
  .gn.mob-open .gn-bg{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .gn-mobile-in{padding:0.75rem 1.5rem 4rem}
  .gn-mfield{display:flex;align-items:center;gap:0.5rem;width:100%;text-align:left;background:var(--bg-alt);border:0;border-radius:12px;padding:0.75rem 0.75rem;font:inherit;font-size:1rem;line-height:1.5rem;color:var(--fg2);cursor:pointer}
  .gn-mfield svg{width:17px;height:17px}
  .gn-mlist{margin-top:1rem}
  .gn-mlist>li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(-8px)}
  .gn.mob-open .gn-mlist>li{opacity:1;transform:none;transition:opacity 300ms var(--ease),transform 500ms var(--ease)}
  .gn-acc,.gn-macc-link{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;padding:1rem 0;font:inherit;font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:.004em;color:var(--fg);text-align:left;cursor:pointer}
  @media (hover:hover) and (pointer:fine){.gn-macc-link:hover{text-decoration:none}}
  .gn-acc::after{content:"";width:10px;height:10px;border-right:2px solid var(--fg2);border-bottom:2px solid var(--fg2);transform:rotate(45deg) translateY(-3px);transition:transform 500ms cubic-bezier(0.22,1,0.36,1);flex:none}
  .gn-acc[aria-expanded=true]::after{transform:rotate(225deg) translateY(-3px)}
  .gn-mlist ul{padding:0 0 1rem}
  .gn-mlist ul a{display:block;padding:0.5rem 0;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--fg)}
  .gn-mlist ul[hidden]{display:none}
  .gn-search{position:fixed;top:44px;bottom:0;background:var(--bg);overflow:auto}
  .gn-sf input{font-size:1.25rem;line-height:1.75rem}
  html.gn-lock{overflow:hidden}
  .gn.search-open .gn-burgerli,.gn.search-open .gn-tools{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.gn *,.gn-curtain{transition:none!important}}

/* ===== KI-Bereich ===== */
body.t-purple{--tone:#2851d9;--tone-soft:#eaeffe}
@media (prefers-color-scheme:dark){body.t-purple{--tone:#9cb3ff;--tone-soft:#1a2445}}
.pick label{display:block;font-weight:600;font-size:1.25rem;line-height:1.75rem;margin-bottom:0.5rem}
.pick select{width:100%;font:inherit;padding:1rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.pick select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.pick-out{margin-top:1rem;padding:1.5rem 1.5rem;border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-left:8px solid var(--lc,var(--line))}
.pick-out h3{font-size:1.5rem;line-height:2rem;margin:0.5rem 0 0.5rem}
.pick-out p{margin:0;color:var(--fg2)}
.pick-out .lvl{display:inline-block;background:var(--lc);color:#fff;font-weight:600;font-size:0.75rem;line-height:1rem;border-radius:9999px;padding:0.25rem 0.75rem}
.pick-out.lv-g,.pick-out.lv-m{--lc:#1f9d6b}.pick-out.lv-y,.pick-out.lv-t{--lc:#b7791f}.pick-out.lv-r{--lc:#d92d20}.pick-out.lv-h{--lc:#d97706}.pick-out.lv-x{--lc:#8a1c14}
.pick .note{margin-top:0.75rem}
.tlight{display:flex;gap:0.25rem;margin:0 0 0.5rem}
.tlight i{width:14px;height:14px;border-radius:50%}
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--feature-bg);border-radius:var(--r-lg);overflow:hidden;color:#fff;text-decoration:none}
@media (hover:hover) and (pointer:fine){.feature:hover{text-decoration:none}}
.feature .ft{padding:1.5rem}
.feature h3{font-size:1.875rem;line-height:2.25rem;letter-spacing:-.03em;color:#fff}
.feature p{color:#e0e7ff;font-size:1.25rem;line-height:1.75rem;max-width:30ch;margin:0.75rem 0 1.5rem}
.feature .more{color:#fff}
.feature img{width:100%;height:100%;object-fit:cover;display:block}
.feature .tag{display:inline-block;background:rgba(255,255,255,.18);border-radius:9999px;padding:0.25rem 0.75rem;font-weight:600;font-size:0.875rem;line-height:1.25rem;margin-bottom:0.75rem}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature img{aspect-ratio:3/2}}
.sub-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:0.75rem;margin-top:0.75rem}
.sub-tile{background:var(--bg-alt);border-radius:var(--r-md);padding:1.5rem 1.5rem 1.5rem;color:var(--fg);display:block}
@media (hover:hover) and (pointer:fine){.sub-tile:hover{text-decoration:none;background:var(--tone-soft)}}
.sub-tile h3{font-size:1.25rem;line-height:1.75rem;margin-bottom:0.5rem}.sub-tile p{margin:0 0 0.5rem;color:var(--fg2);font-size:0.875rem;line-height:1.25rem}
.stand{display:inline-block;background:var(--tone-soft);color:var(--tone);border-radius:9999px;padding:0.25rem 0.75rem;font-weight:600;font-size:0.875rem;line-height:1.25rem;margin-top:0.75rem}
td ul{margin:0;padding-left:1rem}td li{margin:0.125rem 0}
.tbl td{min-width:140px}
.alt .sub-tile{background:var(--card)}@media (hover:hover) and (pointer:fine){.alt .sub-tile:hover{background:var(--tone-soft)}}

.f-brand{display:flex;align-items:center;gap:0.75rem;padding-bottom:1.5rem}
.f-brand img{border-radius:12px;display:block}
.f-brand b{display:block;color:var(--fg);font-size:1rem;line-height:1.5rem;letter-spacing:-.01em}
.f-brand span{display:block;color:var(--fg2);font-size:0.75rem;line-height:1rem;margin-top:0.125rem}

.gn-list{gap:0}.gn-burgerli{display:none}
.gn-home{margin-right:0.25rem}
.gn-mlist a.gn-macc-link{font-size:1.25rem;line-height:1.75rem;padding:0.75rem 0}
.gn-mlist a.gn-macc-link[aria-current]{color:var(--accent)}

.gn-name{display:inline}

.legal h1{font-size:1.875rem;line-height:2.25rem;letter-spacing:-.025em;margin:0 0 1.5rem}

.msg{display:none;margin:0 0 1.5rem;padding:1rem 1rem;border-radius:var(--r-sm);font-size:1rem;line-height:1.5rem}
.msg:target{display:block}
.msg.ok{background:color-mix(in srgb,var(--ok) 14%,var(--card));box-shadow:inset 0 0 0 1.5px var(--ok)}
.msg.err{background:color-mix(in srgb,#d92d20 12%,var(--card));box-shadow:inset 0 0 0 1.5px #d92d20}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== Mobil: Navigation, Abschnittsmenü, Tabellen, Lesbarkeit ===== */
:root{--fg2:#515157}
@media (prefers-color-scheme:dark){:root{--fg2:#b4b4ba}}
.lnav-btn,.lnav-menu{display:none}
@media all{
  .gn .gn-home{margin-right:auto}
  .gn .gn-name{display:inline}
  .gn-searchbtn{margin-right:0.125rem;width:44px}
  .gn-burger{margin-right:-0.75rem}
}
@media (max-width:760px){
  /* Abschnittsmenü statt abgeschnittener Leiste */
  .lnav-in{height:48px;gap:0.75rem}
  .lnav nav{display:none}
  .lnav-title{font-size:1.125rem;line-height:1.75rem;overflow:hidden;text-overflow:ellipsis}
  .lnav-btn{display:inline-flex;align-items:center;gap:0.5rem;flex:none;background:var(--bg-alt);border:0;border-radius:9999px;padding:0.5rem 1rem;font:inherit;font-size:0.875rem;line-height:1.25rem;font-weight:600;color:var(--fg);cursor:pointer}
  .lnav-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 500ms cubic-bezier(0.22,1,0.36,1)}
  .lnav-btn[aria-expanded=true]::after{transform:rotate(225deg) translateY(-2px)}
  .lnav-menu{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:0.25rem 1.5rem 1.5rem;max-height:calc(100dvh - 7rem);overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.1)}
  .lnav.open .lnav-menu{display:block}
  .lnav-menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
  .lnav-menu li a{display:block;padding:0.75rem 0;border-bottom:1px solid var(--line);color:var(--fg);font-size:1rem;line-height:1.5rem;font-weight:500}
  @media (hover:hover) and (pointer:fine){.lnav-menu li a:hover{text-decoration:none;color:var(--link)}}
  .lnav-menu .pill{display:inline-block;margin-top:1rem;padding:0.5rem 1rem;font-size:1rem;line-height:1.5rem}
  html{scroll-padding-top:6.25rem}

  /* Tabellen als lesbare Karten */
  .tbl{overflow:visible;border:0;background:transparent;border-radius:0}
  table,tbody,tr,td{display:block;width:100%;min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr{background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);padding:1rem 1rem 0.75rem;margin-bottom:0.75rem}
  .alt tr{background:var(--card)}
  td,td:first-child{border:0;padding:0.25rem 0;white-space:normal;font-size:1rem;line-height:1.5rem;color:var(--fg2)}
  td:first-child{font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--fg);padding-bottom:0.5rem}
  td[data-label]:not([data-label=""]):not(:first-child)::before{content:attr(data-label);display:block;font-size:0.75rem;line-height:1rem;font-weight:600;color:var(--fg);opacity:.62;margin-bottom:0}
  td:empty{display:none}

  /* Lesbarkeit */
  body{}
  .card{padding:1.5rem 1.5rem}
  .card h3{font-size:1.25rem;line-height:1.75rem}
  .card p,.card ul{font-size:1rem;line-height:1.5rem}
  .flow li{padding:1rem 1rem 1.5rem}
  .flow p{font-size:1rem;line-height:1.5rem}
  .sec-sub{font-size:1.125rem;line-height:1.75rem}
  .gloss dd{font-size:1rem;line-height:1.5rem}
  details.acc summary{font-size:1.125rem;line-height:1.75rem;padding:1rem 0.125rem}
  details.acc .acc-b{font-size:1rem;line-height:1.5rem}
  .list-ic li{font-size:1rem;line-height:1.5rem}
  .src,.note,.figure figcaption{font-size:0.875rem;line-height:1.25rem}
  .opt{padding:1rem}
  .figure{padding:0.75rem}
  .figure.sc svg{min-width:820px}
  .figure.sc figcaption::before{content:"Zum Verschieben seitlich wischen";display:block;color:var(--accent);font-weight:600;margin-bottom:0.25rem}
  .callout{padding:1rem}
  .tile-t{padding:1.5rem 1rem 1rem}
  .cta-band{padding:2rem 1.5rem}
}

@media (max-width:760px){
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 0.25rem;overflow:visible;padding:1.5rem 0 0.5rem}
  .cat{min-width:0;flex:none;font-size:0.875rem;line-height:1.25rem}
  .cat i{width:72px;height:72px}
  .cat svg{width:32px;height:32px}
}

/* Typografie: ausgewogene Zeilenumbrüche */
h1,h2,h3,.lead,.sec-sub,.tile p,.cta-band p{text-wrap:balance}
p,li,dd,td{text-wrap:pretty}

.wrap .narrow{width:auto;margin-inline:0}
@media (max-width:760px){.lnav-btn{min-height:44px;padding:0.5rem 1rem}}

/* Abschnittsmenü der Unterseiten schon auf Tablets (die Leiste mit allen Abschnitten passt dort nicht) */
@media (max-width:1199px){
  .lnav-in{height:48px;gap:0.75rem}
  .lnav nav{display:none}
  .lnav-title{overflow:hidden;text-overflow:ellipsis}
  .lnav-btn{display:inline-flex;align-items:center;gap:0.5rem;flex:none;min-height:44px;background:var(--bg-alt);border:0;border-radius:9999px;padding:0.5rem 1rem;font:inherit;font-size:0.875rem;line-height:1.25rem;font-weight:600;color:var(--fg);cursor:pointer}
  .lnav-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 500ms cubic-bezier(0.22,1,0.36,1)}
  .lnav-btn[aria-expanded=true]::after{transform:rotate(225deg) translateY(-2px)}
  .lnav-menu{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:0.25rem 1.5rem 1.5rem;max-height:calc(100dvh - 7rem);overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.1)}
  .lnav.open .lnav-menu{display:block}
  .lnav-menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 1.5rem}
  .lnav-menu li a{display:block;padding:0.75rem 0;border-bottom:1px solid var(--line);color:var(--fg);font-size:1rem;line-height:1.5rem;font-weight:500}
  @media (hover:hover) and (pointer:fine){.lnav-menu li a:hover{text-decoration:none;color:var(--link)}}
  .lnav-menu .pill{display:inline-block;margin-top:1rem;padding:0.5rem 1rem;font-size:1rem;line-height:1.5rem}
}

/* Raster: Karten und Schritte füllen jede Zeile gleichmäßig, es bleibt keine Karte allein stehen */
.cards.one>*{grid-column:1/-1}
@media (min-width:700px){
  .cards>*{grid-column:span 6}
  .cards.one>*{grid-column:1/-1}
  .flow{--k:2}
}
@media (min-width:1100px){
  .cards[data-n="1"]>*{grid-column:span 12}
  .cards[data-n="2"]>*{grid-column:span 6}
  .cards[data-n="3"]>*,.cards[data-n="6"]>*,.cards[data-n="9"]>*{grid-column:span 4}
  .cards[data-n="4"]>*,.cards[data-n="8"]>*{grid-column:span 3}
  .cards[data-n="5"]>*{grid-column:span 4}
  .cards[data-n="5"]>:nth-child(n+4){grid-column:span 6}
  .cards[data-n="7"]>*{grid-column:span 4}
  .cards[data-n="7"]>:nth-child(-n+4){grid-column:span 3}
  .cards[data-n="7"]>:nth-child(n+5){grid-column:span 4}
  .cards.one>*{grid-column:1/-1}
  .flow[data-n="3"]{--k:3}
  .flow[data-n="4"]{--k:4}
  .flow[data-n="5"]{--k:5}
  .flow[data-n="6"]{--k:6}
  .flow[data-n="7"],.flow[data-n="8"]{--k:4}
}
.card h3,.flow h3,.sub-tile h3,.tile h3{overflow-wrap:break-word;hyphens:manual}

@media (min-width:700px) and (max-width:1099px){
  .cards:not(.one)>:last-child:nth-child(odd){grid-column:span 12}
}

@media all{
  .gn-mlist ul li.s a{font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--fg2);padding:0.25rem 0}
  .gn-mlist ul li.s.first{margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--line)}
}

/* THEME-FORCE */
html[data-theme="dark"]{color-scheme:dark}html[data-theme="light"]{color-scheme:light}
html[data-theme="light"]{--bg:#ffffff;--bg-alt:#f5f5f7;--fg:#1d1d1f;--fg2:#6e6e73;--line:#d2d2d7;--accent:#0a7d8c;--accent-h:#086a77;--on-accent:#ffffff;--link:#0a6e7c;--card:#ffffff;--ok:#1f9d6b;--warn:#f5a524;--nav-bg:rgba(255,255,255,.82);--tone:#0a7d8c;--tone-soft:#e2f4f6;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--r-lg:28px;--r-md:20px;--r-sm:12px}
html[data-theme="light"] body.t-teal{--tone:#0f8f7d;--tone-soft:#e3f6f2}
html[data-theme="light"] body.t-indigo{--tone:#4f46e5;--tone-soft:#ecebfd}
html[data-theme="light"] body.t-amber{--tone:#b45309;--tone-soft:#fff1de}
html[data-theme="light"] body.t-violet{--tone:#3a64ed;--tone-soft:#eaeffe}
html[data-theme="light"] body.t-green{--tone:#0f8a5f;--tone-soft:#e2f6ec}
html[data-theme="light"] body.t-rose{--tone:#c01048;--tone-soft:#ffe8ee}
html[data-theme="light"] body.t-purple{--tone:#2851d9;--tone-soft:#eaeffe}
html[data-theme="light"]{--fg2:#515157}
html[data-theme="dark"]{--bg:#0f1013;--bg-alt:#1a1b20;--fg:#f5f5f7;--fg2:#a1a1a6;--line:#34353b;--accent:#36c2d4;--accent-h:#5bd0e0;--on-accent:#03222a;--link:#6fd6e4;--card:#1a1b20;--nav-bg:rgba(15,16,19,.78);--tone:#5fd3e3;--tone-soft:#0f2f35}
html[data-theme="dark"] body.t-teal{--tone:#4fd1bd;--tone-soft:#10302b}
html[data-theme="dark"] body.t-indigo{--tone:#9a9bff;--tone-soft:#1c1c46}
html[data-theme="dark"] body.t-amber{--tone:#fbbf6a;--tone-soft:#3a2a10}
html[data-theme="dark"] body.t-violet{--tone:#a5baff;--tone-soft:#1d274a}
html[data-theme="dark"] body.t-green{--tone:#58d6a0;--tone-soft:#10301f}
html[data-theme="dark"] body.t-rose{--tone:#ff7a9c;--tone-soft:#3a1420}
html[data-theme="dark"] body.t-purple{--tone:#9cb3ff;--tone-soft:#1a2445}
html[data-theme="dark"]{--fg2:#b4b4ba}

/* ===== Mobile Navigation im Stil großer Shop-Seiten: 48 px Leiste, drei Striche, große Liste ===== */
.gn-prefbtn{display:grid;place-items:center;width:40px;height:44px;margin-right:0.125rem;background:none;border:0;color:var(--fg);opacity:.8;cursor:pointer;font:inherit;font-size:0.75rem;line-height:1rem;font-weight:600}
@media (hover:hover) and (pointer:fine){.gn-prefbtn:hover{opacity:1}}
.gn-tools2{display:flex;align-items:center}
.gn-pref{position:absolute;right:22px;top:50px;width:340px;max-width:calc(100vw - 24px);background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.18);padding:1rem 1rem 0.75rem;z-index:1100}
.gn-pref[hidden]{display:none}
.seg{display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1;padding:0.5rem 0.25rem;background:none;border:0;border-right:1px solid var(--line);font:inherit;font-size:0.875rem;line-height:1.25rem;cursor:pointer;color:var(--fg);min-height:44px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
.offl{display:flex;gap:0.5rem;align-items:center;margin-top:0.75rem;font-size:0.875rem;line-height:1.25rem;cursor:pointer}
.offl input{width:1.2rem;height:1.2rem;accent-color:var(--accent)}
.gn-pref .note{margin:0.5rem 0 0}
.gn-mpref{display:none}
.gn-burger span{display:block;width:20px;height:1.5px;background:currentColor;margin:0.25rem auto;transition:transform 500ms cubic-bezier(0.22,1,0.36,1),opacity 300ms cubic-bezier(0.22,1,0.36,1)}
.gn .gn-burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.gn .gn-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.gn .gn-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media all{
  .gn,.gn-nav,.gn-list,.gn-logo,.gn-searchbtn,.gn-burger,.gn-bg{height:48px}
  .gn-bg{min-height:48px}
  .gn-mobile{top:48px}.gn-curtain{top:48px}.lnav{top:48px}.gn-search{top:48px}
  .gn .gn-name{display:none}
  .gn-tools2{display:none}
  .gn-searchbtn{width:48px;margin-right:0}
  .gn-burger{width:48px;margin-right:-0.75rem}
  .gn-mobile-in{padding:1.5rem 1.5rem 4rem}
  .gn-mlist{margin-top:0}
  .gn-mlist>li{border-bottom:0}
  .gn-acc,.gn-macc-link{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:.004em;padding:0.75rem 0}
  .gn-acc::after{width:9px;height:9px;opacity:.6}
  .gn-mlist ul{padding:0.125rem 0 0.5rem}
  .gn-mlist ul a{font-size:1.125rem;line-height:1.75rem;font-weight:500;padding:0.5rem 0}
  .gn-mlist ul li.s a{font-size:1rem;line-height:1.5rem;color:var(--fg2);padding:0.25rem 0}
  .gn-mpref{display:block;margin-top:1.5rem;background:none;border:0;color:var(--link);font:inherit;font-size:1rem;line-height:1.5rem;cursor:pointer;padding:0.5rem 0}
  .gn-pref{position:fixed;left:12px;right:12px;top:58px;width:auto;max-width:none}
  html{scroll-padding-top:6.5rem}
}

/* ===== Neue Bausteine ===== */
.crumbs{padding:0.75rem 0 0;font-size:0.75rem;line-height:1rem;color:var(--fg2)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0.125rem 0.5rem;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:0.5rem;color:var(--fg2)}
.crumbs a{color:var(--fg2)}.crumbs [aria-current]{color:var(--fg)}
.tldr{padding:0 0 1.5rem}
.tldr-box{background:var(--tone-soft);border-radius:var(--r-md);padding:1.5rem 1.5rem;max-width:860px}
.tldr-box h2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01em;margin-bottom:0.5rem;color:var(--tone)}
.tldr-box ul{margin:0;padding-left:1rem}.tldr-box li{margin:0.25rem 0}
.pagefoot{padding:2rem 0 4rem;border-top:1px solid var(--line)}
.pf-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1.5rem 3rem}
@media (max-width:760px){.pf-grid{grid-template-columns:1fr}}
.pagefoot h2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01em;margin-bottom:0.5rem}
.pagefoot ul{list-style:none;margin:0.5rem 0 0;padding:0}.pagefoot li{margin:0.25rem 0;font-size:0.875rem;line-height:1.25rem}
.pagefoot p{font-size:0.875rem;line-height:1.25rem;color:var(--fg2)}
.btn-s{display:inline-block;border:1.5px solid var(--accent);color:var(--link);border-radius:8px;padding:0.5rem 1rem;font-weight:600;font-size:0.875rem;line-height:1.25rem;margin:0.25rem 0.5rem 0.25rem 0;min-height:40px}
@media (hover:hover) and (pointer:fine){.btn-s:hover{background:var(--tone-soft);text-decoration:none}}
.rprog{position:fixed;left:0;right:0;top:44px;height:3px;z-index:998;pointer-events:none}
.rprog i{display:block;height:100%;width:0;background:var(--accent)}
@media all{.rprog{top:48px}}
.totop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);box-shadow:0 6px 20px rgba(0,0,0,.25);display:none;place-items:center;z-index:90;cursor:pointer}
.totop.on{display:grid}.totop svg{width:20px;height:20px}
.toc-rail{display:none}
@media (min-width:1500px){.toc-rail{display:block;position:fixed;right:16px;top:150px;width:130px;font-size:0.75rem;line-height:1rem;z-index:50}
  .toc-rail a{display:block;padding:0.25rem 0 0.25rem 0.75rem;border-left:2px solid var(--line);color:var(--fg2)}
  @media (hover:hover) and (pointer:fine){.toc-rail a:hover{color:var(--fg);text-decoration:none}}.toc-rail a[aria-current]{border-color:var(--accent);color:var(--fg);font-weight:600}}
.lnav nav a[aria-current]{opacity:1;font-weight:600;color:var(--fg)}
.lnav-menu li a[aria-current]{color:var(--tone);font-weight:600}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 300ms cubic-bezier(0.22,1,0.36,1),transform 500ms cubic-bezier(0.22,1,0.36,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}
.tool{background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);padding:1rem}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
@media (max-width:900px){.tool-grid{grid-template-columns:1fr}}
.meter{height:10px;border-radius:6px;background:var(--bg-alt);overflow:hidden;margin:0.5rem 0}
.meter i{display:block;height:100%;width:0;background:var(--lc,#d92d20);transition:background 300ms cubic-bezier(0.22,1,0.36,1)}
.res-big{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.02em;margin:0.25rem 0}
.q-msg{background:var(--bg-alt);border-radius:var(--r-md);padding:1rem 1rem;font-size:1rem;line-height:1.5rem;border-left:5px solid var(--tone);white-space:pre-line;margin:0.75rem 0}
.alt .q-msg{background:var(--bg)}
.q-opts{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.25rem}
.q-opts button{font:inherit;font-weight:600;padding:0.75rem 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;min-height:44px}
@media (hover:hover) and (pointer:fine){.q-opts button:hover:not(:disabled){border-color:var(--accent)}}
.q-opts button.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--card))}
.q-opts button.bad{border-color:#d92d20;background:color-mix(in srgb,#d92d20 10%,var(--card))}
.q-fb{margin-top:0.75rem;padding:0.75rem 1rem;border-radius:var(--r-sm);background:var(--bg-alt)}
.q-meta{color:var(--fg2);font-size:0.875rem;line-height:1.25rem;margin:0 0 0.25rem}
.inv-wrap{overflow-x:auto}.inv input,.inv select{width:100%;font:inherit;padding:0.5rem 0.5rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);min-height:40px}
.inv{min-width:860px}.inv th,.inv td{padding:0.5rem 0.25rem;border-bottom:1px solid var(--line)}
.row-btns{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}
.sign{background:#fff;color:#000;border:6px solid #000;border-radius:6px;padding:1.5rem 1.5rem;max-width:560px;text-align:center;font-family:var(--font)}
.sign svg{width:84px;height:84px;margin-bottom:0.25rem}.sign h3{font-size:1.875rem;line-height:2.25rem;margin:0 0 0.5rem;color:#000}
.sign p{color:#000;margin:0.25rem auto;font-size:1rem;line-height:1.5rem;max-width:none}.sign small{display:block;margin-top:0.5rem;font-size:0.75rem;line-height:1rem;color:#222}
.ol-list{margin:0.5rem 0 0;padding-left:1rem}.ol-list li{margin:0.25rem 0}
.pick-out .oblig{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--line)}
.pick-out .oblig h4{font-size:0.875rem;line-height:1.25rem;margin:0 0 0.25rem}
.paths{display:grid;gap:0.75rem}
.path{background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);padding:1rem}
.alt .path{background:var(--card)}
.path h3{font-size:1.5rem;line-height:2rem;margin-bottom:0.25rem}.path .meta{color:var(--fg2);font-size:0.875rem;line-height:1.25rem;margin:0 0 0.75rem}
.path ol{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.path li{display:flex;gap:0.75rem;align-items:flex-start}
.path li input{width:1.3rem;height:1.3rem;margin-top:0.25rem;accent-color:var(--ok);flex:none}
.path li a{font-weight:600}.path li span{display:block;color:var(--fg2);font-size:0.875rem;line-height:1.25rem}
.dl{display:flex;gap:1rem;align-items:flex-start}
.dl .ico{flex:none}
.dl b{display:block}.dl small{color:var(--fg2)}
.chg{border-top:1px solid var(--line);padding:1.5rem 0}.chg:first-of-type{border-top:0}
.chg time{color:var(--fg2);font-size:0.875rem;line-height:1.25rem}.chg h3{font-size:1.25rem;line-height:1.75rem;margin:0.25rem 0 0.25rem}
.faq-all details.acc .acc-b a{word-break:break-word}
.faq-src{font-size:0.875rem;line-height:1.25rem;color:var(--fg2);margin-top:0.5rem}
.term-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.az{display:flex;flex-wrap:wrap;gap:0.25rem 0.5rem;margin:0 0 1.5rem}
.az a{padding:0.25rem 0.5rem;border-radius:8px;background:var(--bg-alt);font-weight:600;font-size:0.875rem;line-height:1.25rem}
.en-bar{position:sticky;top:0;z-index:100;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--line)}
.en-bar-in{max-width:1224px;margin:auto;height:48px;display:flex;align-items:center;gap:1.5rem;padding:0 1.5rem}
.en-bar a{color:var(--fg);font-size:0.875rem;line-height:1.25rem}.en-bar .brand{display:flex;align-items:center;gap:0.5rem;font-weight:600;margin-right:auto}
.en-bar .brand img{width:26px;height:26px;border-radius:6px}

/* ===== Druckansicht ===== */
@media print{
  .gn,.gn-curtain,.lnav,.rprog,.totop,.toc-rail,footer,.cta-band,.pagefoot .fb,.crumbs,.skip,.row-btns,.en-bar{display:none!important}
  body{background:#fff!important;color:#000!important}
  a{color:#000!important;text-decoration:underline}
  section{padding:0.75rem 0!important}.alt,.tile,.card,.flow li,.figure{background:#fff!important}
  .tbl{overflow:visible;border:0}.figure.sc svg{min-width:0!important}
  .js .rv{opacity:1!important;transform:none!important}
  .hero-img,.tile img,.feature img{display:none!important}
  .pick-out,.card,.flow li,.q-msg{break-inside:avoid}
  body.printing main>*:not(.print-target){display:none!important}
  body.printing .print-target .wrap>*:not(.print-me){display:none!important}
  body.printing .print-target{padding:0!important}
}
.gn-sr .gh{font-size:0.75rem;line-height:1rem;font-weight:600;color:var(--fg2);margin:0.75rem 0 0.125rem;opacity:1;transform:none}
.gloss dt a{color:inherit}@media (hover:hover) and (pointer:fine){.gloss dt a:hover{color:var(--link);text-decoration:none}}
body.printing .print-me #sign-gen,body.printing .print-me .row-btns,body.printing .print-me .note{display:none!important}

.tool-grid>*{min-width:0}.check{min-width:0}.check .result,.check .ring>div{min-width:0}
.check .ring{flex-wrap:wrap}.check .ring>div{flex:1 1 120px}

/* Kontrast-Korrekturen (WCAG AA) */
.tldr-box h2{color:var(--fg)}
.eyebrow{color:var(--tone)}
body.t-teal .eyebrow,body.t-indigo .eyebrow{filter:none}
@media (prefers-color-scheme:light){html:not([data-theme="dark"]) .eyebrow{color:color-mix(in srgb,var(--tone) 78%,#000)}}
html[data-theme="light"] .eyebrow{color:color-mix(in srgb,var(--tone) 78%,#000)}
.btn-s{color:var(--link)}
html[data-theme="dark"] .btn-s{color:var(--link)}
.feature .tag,.tag{background:rgba(255,255,255,.22);color:#fff}
.legal h2{font-size:1.25rem;line-height:1.75rem;letter-spacing:-.01em;margin:2rem 0 0.5rem}

button.btn-s{background:transparent;font-family:inherit;cursor:pointer}

/* Navigation überall wie auf dem Handy: Logo links, Suche und drei Striche rechts, große Liste */
@media (min-width:834px){
  .gn-pref{position:absolute;left:auto;right:22px;top:54px;width:340px}
  .gn-mobile-in{max-width:1224px;margin:0 auto}
  .gn-mobile-in .gn-mlist{max-width:760px}
}

.tldr-box .stand{margin:0.5rem 0 0;font-size:0.875rem;line-height:1.25rem;color:var(--fg2)}.kteaser{padding:0 0 1.5rem}.kteaser .callout{max-width:860px}
.lead-row{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;margin-top:1.5rem}
.pagefoot p,.pagefoot li,.faq-src{overflow-wrap:anywhere}
.kteaser .callout{display:block;white-space:normal}.kteaser .callout a{white-space:normal;overflow-wrap:anywhere}

/* Logo: nur der Hase, Farbe folgt dem Farbschema */
:root{--brand:#0b2a5b}
@media (prefers-color-scheme:dark){:root{--brand:#ffffff}}
html[data-theme="dark"]{--brand:#ffffff}html[data-theme="light"]{--brand:#0b2a5b}
.gn-logo{color:var(--brand)}.gn-logo svg{display:block;height:34px;width:auto}
.f-brand svg{display:block;color:var(--brand);flex:none}
.en-bar .brand{color:var(--brand)}.en-bar .brand svg{display:block;height:28px;width:auto}


/* ===== Responsive Typo und Abstände (auf Skala gerundet) ===== */
@media (min-width:640px){
.hero{padding:4rem 0 1.5rem}
.hero h1{font-size:3rem;line-height:1}
.hero-img{margin-top:2rem}
.cats{gap:0.5rem}
.sec-head{margin-bottom:2rem}
.tile-t{padding:2rem 1.5rem 1.5rem}
.split{gap:2.5rem}
.figure{padding:1.5rem}
.check{gap:2rem}
.calc{gap:2rem}
.gloss{gap:0 2.5rem}
.cta-band{padding:3rem}
.cta-band h2{font-size:1.875rem;line-height:2.25rem}
.mt{margin-top:1.5rem}
.feature .ft{padding:2.5rem}
.feature h3{font-size:2.25rem;line-height:2.5rem}
.legal h1{font-size:2.25rem;line-height:2.5rem}
.tldr{padding:0 0 2rem}
.tool{padding:1.5rem}
.tool-grid{gap:2rem}
.path{padding:1.5rem}
}
@media (min-width:1024px){
.hero{padding:5rem 0 2rem}
.hero h1{font-size:3.75rem;line-height:1}
.hero .lead{font-size:1.5rem;line-height:2rem}
.hero-img{margin-top:3rem}
.cats{gap:1rem}
section{padding:5rem 0}
.sec-head{margin-bottom:2.5rem}
.sec-title{font-size:3rem;line-height:1}
.sec-sub{font-size:1.5rem;line-height:2rem}
.tile-t{padding:3rem 2.5rem 1.5rem}
.tile h3{font-size:2.25rem;line-height:2.5rem}
.split{gap:4rem}
.figure{padding:2rem}
.check{gap:3rem}
.calc{gap:3rem}
.out .big{font-size:3.75rem;line-height:1}
.gloss{gap:0 4rem}
.cta-band{padding:4rem}
.cta-band h2{font-size:2.25rem;line-height:2.5rem}
.mt{margin-top:2rem}
.feature .ft{padding:4rem}
.feature h3{font-size:3rem;line-height:1}
.legal h1{font-size:3rem;line-height:1}
.tldr{padding:0 0 2.5rem}
.tool{padding:2rem}
.tool-grid{gap:3rem}
.path{padding:2rem}
}


/* =====================================================================
   DESIGN-SYSTEM (landing-page-design Skill)
   Eine Schrift, Tailwind-Typoskala, benannte Textstile, Spacing-Tokens,
   Tailwind-Radien, flache Hintergründe, eine Bewegungskurve.
   ===================================================================== */

/* ---------- Schrift (lokal, ohne externe Server) ---------- */

/* ---------- Tokens ---------- */
:root,html[data-theme="light"]{
  
  --ease:cubic-bezier(0.22,1,0.36,1);
  --r-lg:24px;--r-md:16px;--r-sm:12px;
  --feature-bg:#0a3d45;
  --s-25:2px;--s-50:4px;--s-75:8px;--s-100:12px;--s-200:16px;--s-300:24px;--s-400:32px;--s-500:40px;--s-600:48px;--s-700:64px;--s-800:80px;--s-900:96px;
  --hero-from:#000000;--hero-to:#666666;
  --nav-bg:rgba(255,255,255,.72);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;--bg-alt:#181818;--card:#1F1F1F;--line:#313131;
    --nav-bg:rgba(24,24,24,.72);--feature-bg:#1F1F1F;
    --hero-from:#FFFFFF;--hero-to:#9B9B9B;
  }
}
html[data-theme="dark"]{
  --bg:#000000;--bg-alt:#181818;--card:#1F1F1F;--line:#313131;
  --nav-bg:rgba(24,24,24,.72);--feature-bg:#1F1F1F;
  --hero-from:#FFFFFF;--hero-to:#9B9B9B;
}
html{font-synthesis:none}
body{font-family:var(--font);letter-spacing:0}
em,i,cite,dfn,var,address{font-style:normal}
b,strong,th,dt{font-weight:600}
.alt .q-msg{background:var(--card)}

/* ---------- Benannte Textstile ---------- */
.heading-1{font-size:3.75rem;line-height:1;font-weight:600}
.heading-2{font-size:3rem;line-height:1;font-weight:600}
.heading-3{font-size:2.25rem;line-height:2.5rem;font-weight:600}
.heading-4{font-size:1.875rem;line-height:2.25rem;font-weight:600}
.heading-5{font-size:1.5rem;line-height:2rem;font-weight:600}
.heading-6{font-size:1.25rem;line-height:1.75rem;font-weight:600}
.title-1{font-size:1.25rem;line-height:1.75rem;font-weight:500}
.title-2{font-size:1.125rem;line-height:1.75rem;font-weight:500}
.title-3{font-size:1rem;line-height:1.5rem;font-weight:500}
.title-4{font-size:.875rem;line-height:1.25rem;font-weight:500}
.title-5{font-size:.75rem;line-height:1rem;font-weight:500}
.body-1{font-size:1rem;line-height:1.5rem;font-weight:600}
.body-2{font-size:1rem;line-height:1.5rem;font-weight:500}
.body-3{font-size:1rem;line-height:1.5rem;font-weight:400}
.body-4{font-size:.875rem;line-height:1.25rem;font-weight:600}
.body-5{font-size:.875rem;line-height:1.25rem;font-weight:500}
.body-6{font-size:.875rem;line-height:1.25rem;font-weight:400}
.button-lg{font-size:1.125rem;line-height:1.75rem;font-weight:600}
.button-md{font-size:1rem;line-height:1.5rem;font-weight:600}
.button-sm{font-size:.875rem;line-height:1.25rem;font-weight:600}
.button-xsm{font-size:.75rem;line-height:1rem;font-weight:600}
.caption-1{font-size:.875rem;line-height:1.25rem;font-weight:500}
.caption-2{font-size:.875rem;line-height:1.25rem;font-weight:400}
.caption-3{font-size:.75rem;line-height:1rem;font-weight:600}
.caption-4{font-size:.75rem;line-height:1rem;font-weight:500}
.caption-5{font-size:.75rem;line-height:1rem;font-weight:400}

/* Zuordnung der bestehenden Bausteine zu den Textstilen */
/* Body 3 */ body,.card p,.callout p,.tile p,.legal p,.gloss dd,details.acc .acc-b,.list-ic li,.pagefoot p,.pagefoot li,.card ul,.flow p{font-size:1rem;line-height:1.5rem;font-weight:400}
/* Body 6 */ .sub-tile p,.out dl,td,table,.q-meta,.path .meta,.path li span,.chg time,.fig-note,.tip{font-size:.875rem;line-height:1.25rem;font-weight:400}
/* Body 4 */ th,.out dt,.pick-out .oblig h4{font-size:.875rem;line-height:1.25rem;font-weight:600}
/* Body 1 */ .eyebrow,.tile .eyebrow,.field label,td:first-child{font-size:1rem;line-height:1.5rem;font-weight:600}
/* Body 2 */ .more,.lnav-menu li a,.gn-mlist ul li.s a{font-size:1rem;line-height:1.5rem;font-weight:500}
/* Title 1 */ .hero .lead,.sec-sub,.cta-band p,.feature p{font-size:1.25rem;line-height:1.75rem;font-weight:500}
/* Title 4 */ .gn-name,.cat,.lnav nav a,.crumbs{font-size:.875rem;line-height:1.25rem;font-weight:500}
/* Caption 2 */ figcaption,.note,.src,.field small,.faq-src,.f-brand span,.warn{font-size:.875rem;line-height:1.25rem;font-weight:400}
/* Caption 3 */ .tag,.feature .tag,.stand,.pick-out .lvl,footer h4,.gn-h,.gn-sr .gh{font-size:.75rem;line-height:1rem;font-weight:600}
/* Caption 5 */ footer,.f-bot,footer li{font-size:.75rem;line-height:1rem;font-weight:400}
/* Heading 6 */ .card h3,.sub-tile h3,.callout h3,.flow h3,details.acc summary,legend,.pick label,.chg h3,.tldr-box h2,.pagefoot h2,.legal h2,.f-brand b,.gloss dt{font-size:1.25rem;line-height:1.75rem;font-weight:600}
/* Heading 5 */ .tiles-3 .tile h3,.path h3,.pick-out h3,.res-big,.gn-acc,.gn-macc-link,.gn-big a,.gn-sf input{font-size:1.5rem;line-height:2rem;font-weight:600}
/* Title 2 */ .gn-mlist ul a,.gn-sr a,.legal h3{font-size:1.125rem;line-height:1.75rem;font-weight:500}
/* Button md */ .btn{font-size:1rem;line-height:1.5rem;font-weight:600}
/* Button sm */ .btn-s,.pill,.lnav-btn,.lnav-menu .pill,.q-opts button,.seg button,.gn-mpref,.gn-sc,.az a{font-size:.875rem;line-height:1.25rem;font-weight:600}

/* Überschriften: Heading 4 → 3 → 2 (Abschnitte), Heading 3 → 2 → 1 (Hero) */
.sec-title,.cta-band h2,.legal h1{font-size:1.875rem;line-height:2.25rem;font-weight:600;letter-spacing:-.02em}
.tile h3{font-size:1.5rem;line-height:2rem;letter-spacing:-.02em}
.feature h3{font-size:1.875rem;line-height:2.25rem;letter-spacing:-.02em}
.out .big{font-size:3rem;line-height:1}
.ring strong{font-size:2.25rem;line-height:2.5rem}
@media (min-width:640px){
  .sec-title,.cta-band h2,.legal h1{font-size:2.25rem;line-height:2.5rem}
  .feature h3{font-size:2.25rem;line-height:2.5rem}
}
@media (min-width:1024px){
  .sec-title,.legal h1{font-size:3rem;line-height:1}
  .cta-band h2{font-size:2.25rem;line-height:2.5rem}
  .tile h3{font-size:2.25rem;line-height:2.5rem}
  .tiles-3 .tile h3{font-size:1.875rem;line-height:2.25rem}
  .feature h3{font-size:3rem;line-height:1}
  .out .big{font-size:3.75rem;line-height:1}
  .hero .lead,.sec-sub{font-size:1.25rem;line-height:1.75rem}
}

/* Zeilenumbrüche: keine Waisen, keine Silbentrennung */
h1,h2,h3,h4,legend,summary,.lead,.sec-sub,.tagline p{text-wrap:balance}
p,li,dd,td,figcaption,small{text-wrap:pretty}
*{hyphens:manual;-webkit-hyphens:manual}

/* ---------- Layout-Raster ---------- */
.wrap,.narrow{width:min(1180px,100% - 32px)}
@media (min-width:640px){.wrap,.narrow{width:min(1180px,100% - 48px)}}
section{padding:3rem 0}
@media (min-width:640px){section{padding:4rem 0}}
@media (min-width:1024px){section{padding:6rem 0}}
.tiles,.cards,.sub-tiles,.flow{gap:1rem}
.card{padding:1.5rem}
.sub-tile{padding:1.5rem}

/* ---------- Hero ---------- */
.hero{padding:3rem 0 1.5rem}
@media (min-width:640px){.hero{padding:4rem 0 2rem}}
@media (min-width:1024px){.hero{padding:6rem 0 2rem}}
.hero h1{
  font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.03em;max-width:680px;
  background:linear-gradient(90deg,var(--hero-from),var(--hero-to));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--fg);padding-bottom:0.25rem
}
.hero h1 span{color:inherit;-webkit-text-fill-color:transparent}
@media (min-width:640px){.hero h1{font-size:3rem;line-height:1}}
@media (min-width:1024px){.hero h1{font-size:3.75rem;line-height:1}}
.hero .lead{max-width:680px;margin:1rem 0 0}
.hero-c h1,.hero-c .lead{margin-inline:auto}
.hero-c .row{margin-top:1.5rem}
.lead-row{margin-top:1.5rem;gap:1rem}
@media (forced-colors:active){.hero h1,.hero h1 span{-webkit-text-fill-color:currentColor;background:none}}

/* ---------- Buttons und Zustände ---------- */
.btn{padding:0.5rem 0.75rem;border-radius:12px;min-height:40px;transition:background-color 300ms var(--ease),transform 500ms var(--ease),box-shadow 300ms var(--ease)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}
.btn:active,.btn-s:active,.pill:active,.lnav-btn:active,.q-opts button:active,.seg button:active,.sub-tile:active,.tile:active,.feature:active,.cat:active{transform:scale(.98)}
.btn-s{padding:0.5rem 0.75rem;border-radius:12px;transition:background-color 300ms var(--ease),transform 500ms var(--ease)}
.pill{padding:0.25rem 0.75rem;border-radius:8px;transition:background-color 300ms var(--ease),transform 500ms var(--ease)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
a.tile,a.sub-tile,a.feature,a.card{transition:transform 500ms var(--ease),background-color 300ms var(--ease),box-shadow 300ms var(--ease)}
@media (hover:hover){
  a.tile:hover,a.feature:hover{transform:translateY(-4px)}
  a.sub-tile:hover{transform:translateY(-2px)}
}
.cat i{transition:transform 500ms var(--ease),background-color 300ms var(--ease)}
@media (hover:hover) and (pointer:fine){.cat:hover i{transform:scale(1.04)}}
.q-opts button,.seg button{transition:background-color 300ms var(--ease),border-color 300ms var(--ease),transform 500ms var(--ease)}
.q-opts button:disabled{cursor:not-allowed;opacity:.72}

/* ---------- Kein einseitiger Rand an Karten, keine Verläufe ---------- */
.feature{background:var(--feature-bg)}
.tip{border:1px solid color-mix(in srgb,var(--warn) 60%,var(--line));border-left-width:1px;border-radius:12px;padding:0.75rem 1rem;margin-top:1.5rem;background:color-mix(in srgb,var(--warn) 8%,transparent)}
.pick-out{border:2px solid var(--lc,var(--line));border-left-width:2px;box-shadow:none;padding:1.5rem}
.q-msg{border:1px solid color-mix(in srgb,var(--tone) 45%,var(--line));border-left-width:1px;padding:1rem 1.5rem}

/* ---------- Schwebende Navigation ---------- */
.gn{position:sticky;top:0;height:64px;padding-top:0.5rem;z-index:1000}
.gn-bg{
  top:8px;left:50%;right:auto;width:min(100% - 24px,760px);height:48px;min-height:48px;transform:translateX(-50%);
  border-radius:9999px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.08);
  background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  transition:background-color 300ms var(--ease),box-shadow 300ms var(--ease);z-index:3
}
.gn.is-open .gn-bg,.gn.search-open .gn-bg,.gn.mob-open .gn-bg{height:48px;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.gn-nav{max-width:760px;width:min(100% - 24px,760px);margin:0 auto;padding:0 0.5rem 0 1.5rem;height:48px;position:static}
.gn-list{position:relative;z-index:4;height:48px}
.gn-logo{height:48px;gap:0.5rem}
.gn-logo svg{height:28px}
@media (min-width:640px){.gn .gn-name{display:inline}}
.gn-searchbtn,.gn-burger{height:48px;width:48px;margin-right:0;border-radius:9999px;transition:opacity 300ms var(--ease),background-color 300ms var(--ease)}
@media (hover:hover) and (pointer:fine){.gn-searchbtn:hover,.gn-burger:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}}
.gn-burger span{transition:transform 500ms var(--ease),opacity 300ms var(--ease)}

/* Menü als Vollbild-Panel, Links laufen nacheinander ein */
.gn-mobile,.gn-search{top:0;padding-top:4.5rem;z-index:2;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);transition:opacity 300ms var(--ease),visibility 0s 300ms}
.gn.mob-open .gn-mobile,.gn.search-open .gn-search{transition:opacity 300ms var(--ease),visibility 0s}
.gn-mobile-in{padding:1.5rem 1.5rem 4rem}
.gn-mlist>li{opacity:0;transform:translateY(24px)}
.gn.mob-open .gn-mlist>li{opacity:1;transform:none;transition:opacity 500ms var(--ease) min(calc(var(--k,0) * 60ms),400ms),transform 500ms var(--ease) min(calc(var(--k,0) * 60ms),400ms)}
.gn-fly .gn-h,.gn-fly li,.gn-sr .gn-h,.gn-sr li,.gn-sf{opacity:0;transform:translateY(24px);transition:opacity 300ms var(--ease),transform 500ms var(--ease)}
.gn-has.is-open .gn-fly .gn-h,.gn-has.is-open .gn-fly li,.gn.search-open .gn-sr .gn-h,.gn.search-open .gn-sr li,.gn.search-open .gn-sf{opacity:1;transform:none;transition:opacity 500ms var(--ease) min(calc(var(--i,0) * 60ms),400ms),transform 500ms var(--ease) min(calc(var(--i,0) * 60ms),400ms)}
.gn-search-in{padding:1rem 1.5rem 3rem}
.gn-mfield{border-radius:12px;padding:0.75rem 1rem}
.gn-curtain{top:0}
.gn-pref{top:64px;border-radius:16px;padding:1rem}
@media (min-width:834px){.gn-pref{top:64px;right:max(16px,calc(50% - 380px))}}
.gn-mlist a.gn-macc-link[aria-current],.gn-mlist ul a[aria-current]{color:var(--accent)}

/* Abschnittsleiste der Unterseiten sitzt unter der schwebenden Leiste */
.lnav{top:64px;border:0;background:var(--nav-bg);box-shadow:0 1px 0 color-mix(in srgb,var(--line) 70%,transparent)}
.lnav-in{padding:0 1.5rem;gap:1.5rem}
.lnav-btn{border-radius:9999px;padding:0.5rem 1rem}
.lnav-menu{padding:0.25rem 1.5rem 1.5rem;border:0;box-shadow:0 16px 40px rgba(0,0,0,.12)}
html{scroll-padding-top:8rem}
.rprog{top:0;height:2px}
.rprog i{width:100%!important;transform:scaleX(var(--p,0));transform-origin:0 50%}
.en-bar{top:0}

/* ---------- Bewegung ---------- */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.js .rv.in{opacity:1;transform:none}
.ring .fill{transition:none}
.meter i{transition:background-color 300ms var(--ease)}
details.acc summary::after,.gn-acc::after,.lnav-btn::after{transition:transform 500ms var(--ease)}

/* ---------- Tagline-Abschnitt (Wort für Wort) ---------- */
.tagline{padding:6rem 0}
@media (min-width:1024px){.tagline{padding:6rem 0 6rem}}
.tagline p{max-width:680px;margin:0;font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
@media (min-width:640px){.tagline p{font-size:3rem;line-height:1}}
@media (min-width:1024px){.tagline p{font-size:3.75rem;line-height:1}}
.tagline .w{opacity:.3;transition:opacity 500ms var(--ease)}
.tagline .w.on{opacity:1}
.tagline .src{max-width:680px;margin-top:1.5rem}

/* ---------- Über mich (Startseite) ---------- */
.about-link{margin-top:1rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;scroll-behavior:auto!important}
  .js .rv,.gn-mlist>li,.gn-fly li,.gn-sr li{transform:none!important}
  .tagline .w{opacity:1!important}
  @media (hover:hover) and (pointer:fine){a.tile:hover,a.feature:hover,a.sub-tile:hover,.btn:hover{transform:none}}
}
.sec-sub{max-width:680px}
.cta-band p{max-width:560px}

/* ===== Grafiken nie beschneiden ===== */
.hero-img{max-width:960px;margin-inline:auto}
.hero-img img,.tile img,.tiles-3 .tile img{aspect-ratio:3/2;height:auto;object-fit:contain}
@media (min-width:900px){.hero-img img{aspect-ratio:3/2}}
.feature{align-items:center}
.feature img{height:auto;aspect-ratio:3/2;object-fit:contain;align-self:center}

/* ===== Navigation: volle Breite, deckend, nichts scheint durch ===== */
.gn{height:48px;padding-top:0;background:var(--bg)}
.gn-bg{top:0;left:0;right:0;width:100%;height:48px;transform:none;border:0;border-radius:0;box-shadow:0 1px 0 var(--line);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.gn.is-open .gn-bg,.gn.search-open .gn-bg,.gn.mob-open .gn-bg{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.gn-nav{max-width:1224px;width:100%;margin:0 auto;padding:0 0.75rem 0 1.5rem}
.gn .gn-name{display:inline}
.gn-mobile,.gn-search{top:48px;padding-top:0;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.gn-curtain{top:48px}
.gn-pref{top:56px}
@media (min-width:834px){.gn-pref{top:56px;right:max(16px,calc(50% - 600px))}}
.lnav{top:48px;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
.lnav-menu{background:var(--bg)}
.rprog{top:48px}
html{scroll-padding-top:7rem}
.feature img{margin:1rem;width:calc(100% - 32px);border-radius:8px}
@media (min-width:861px){.feature img{margin:1rem 1rem 1rem 0;width:calc(100% - 16px)}}

/* =====================================================================
   LESBARKEIT UND WOHLFÜHLEN (110 Vorschläge, November 2026)
   ===================================================================== */
/* Body 7: längere Fließtexte (Tailwind text-lg) */
.body-7{font-size:1.125rem;line-height:1.75rem;font-weight:400}
details.acc .acc-b,details.acc .acc-b p,details.acc .acc-b li,.legal p,.legal li,.narrow p,.narrow li,.split p:not(.eyebrow):not(.note):not(.src),.split li,.tldr-box li,.wrap>p:not(.note):not(.src):not(.stand):not(.lead){font-size:1.125rem;line-height:1.75rem}
main p,main li,main dd{max-width:70ch}
.hero .lead{max-width:680px}
/* Einleitungsabsatz nach Abschnittskopf (Title 2) */
.sec-head+p{font-size:1.125rem;line-height:1.75rem;font-weight:500;color:var(--fg)}
/* Zahlen in gleicher Breite */
table,.out,.ring strong,.res-big,.big,time,.stand,.meta-line,.q-meta,.path .meta{font-variant-numeric:tabular-nums}
/* Überschrift und Absatz als Einheit, mehr Luft vor neuen Zwischenüberschriften */
h2+p,h3+p,h4+p{margin-top:0.5rem}
.acc-b h3,.acc-b h4,.legal h2,.legal h3,.narrow h2,.narrow h3,.wrap>h3{margin-top:2.5rem;margin-bottom:0}
.acc-b>h3:first-child,.legal>h2:first-child{margin-top:0}
/* Listen: Abstand und eigene Aufzählungszeichen */
main ul:not([class])>li,main ol:not([class])>li{margin:0.5rem 0}
main ul:not([class])>li::marker{color:var(--accent)}
main ol:not([class])>li::marker{color:var(--accent);font-weight:600}
/* Abschnitte auf dem Handy luftiger */
section{padding:4rem 0}
.sec-head{margin-bottom:2rem}
@media (min-width:1024px){section{padding:6rem 0}.sec-head{margin-bottom:2.5rem}}
.out .big{font-size:2.25rem;line-height:2.5rem}
@media (min-width:640px){.out .big{font-size:3rem;line-height:1}}
@media (min-width:1024px){.out .big{font-size:3.75rem;line-height:1}}

/* Farben: Grautext dunkler, Dunkelmodus weicher, Themenwelten */
:root,html[data-theme="light"]{--fg2:#4A4A50}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#181818;--bg-alt:#1F1F1F;--card:#272727;--line:#313131;--fg:#ECECEC;--fg2:#B8B8BE;--nav-bg:#181818;--feature-bg:#272727}}
html[data-theme="dark"]{--bg:#181818;--bg-alt:#1F1F1F;--card:#272727;--line:#313131;--fg:#ECECEC;--fg2:#B8B8BE;--nav-bg:#181818;--feature-bg:#272727}
body.t-blue{--tone:#1769c9;--tone-soft:#e5effb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.t-blue{--tone:#7db2ff;--tone-soft:#16263d}}
html[data-theme="dark"] body.t-blue{--tone:#7db2ff;--tone-soft:#16263d}
html[data-theme="light"] body.t-blue{--tone:#1769c9;--tone-soft:#e5effb}
/* Icons und Illustrationen im Dunkelmodus */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cat i svg{filter:brightness(1.9) saturate(.8)}:root:not([data-theme="light"]) main img[src*="ill-"]{filter:brightness(.88)}}
html[data-theme="dark"] .cat i svg{filter:brightness(1.9) saturate(.8)}
html[data-theme="dark"] main img[src*="ill-"]{filter:brightness(.88)}
svg.ic,.cat svg,.card .ico svg{stroke-width:1.6}
/* Ampeln zusätzlich mit Symbol */
.pick-out .lvl::before{display:inline-block;margin-right:0.25rem}
.pick-out.lv-g .lvl::before,.pick-out.lv-m .lvl::before{content:"✓"}
.pick-out.lv-y .lvl::before,.pick-out.lv-t .lvl::before,.pick-out.lv-h .lvl::before{content:"!"}
.pick-out.lv-r .lvl::before,.pick-out.lv-x .lvl::before{content:"✕"}
@media (hover:hover) and (pointer:fine){.sub-tile:hover,.alt .sub-tile:hover{background:color-mix(in srgb,var(--tone) 6%,var(--card))}}
mark{background:color-mix(in srgb,var(--accent) 18%,transparent);color:inherit;border-radius:4px;padding:0 0.125rem}
blockquote,.merksatz{margin:1.5rem 0;padding:1rem 1.5rem;border-radius:16px;background:var(--tone-soft);color:var(--fg);font-size:1.125rem;line-height:1.75rem}
/* Tabellen: zarte Zebrastreifen am Desktop */
@media (min-width:761px){tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--fg) 3%,transparent)}}
/* Fortschrittsbalken deutlicher */
.rprog{height:3px}
/* Links im Fließtext unterstrichen, externe mit Pfeil */
main p a:not(.btn):not(.btn-s):not(.more):not(.pill),main li a:not(.btn):not(.btn-s):not(.more),main dd a,details .acc-b a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
main a[href^="http"]:not([href*="sicherheitsdenker.de"]):not(.btn):not(.btn-s)::after{content:"↗";display:inline-block;margin-left:0.125rem;font-size:.8em;text-decoration:none}
/* Glossarbegriffe und Abkürzungen */
a.gl{color:inherit;text-decoration:underline dotted;text-decoration-color:var(--accent);text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){a.gl:hover{color:var(--link)}}
abbr[title]{text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px;cursor:help;position:relative;border-radius:4px}
abbr[title]:focus::after{content:attr(title);position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:max-content;max-width:min(280px,80vw);background:var(--fg);color:var(--bg);padding:0.5rem 0.75rem;border-radius:8px;font-size:.875rem;line-height:1.25rem;font-weight:400;white-space:normal;box-shadow:0 8px 24px rgba(0,0,0,.18)}@media (hover:hover) and (pointer:fine){abbr[title]:hover::after{content:attr(title);position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:max-content;max-width:min(280px,80vw);background:var(--fg);color:var(--bg);padding:0.5rem 0.75rem;border-radius:8px;font-size:.875rem;line-height:1.25rem;font-weight:400;white-space:normal;box-shadow:0 8px 24px rgba(0,0,0,.18)}}
/* Quellen: Kürzel der Herausgeber */
.src a[data-q]::before,.acc-b a[data-q]::before,main li a[data-q]::before{content:attr(data-q);display:inline-block;margin-right:0.25rem;padding:0 0.25rem;border-radius:4px;background:var(--tone-soft);color:var(--tone);font-size:.75rem;line-height:1rem;font-weight:600;text-decoration:none;vertical-align:1px}
/* Kopfzeile jeder Themenseite: Lesezeit und Stand */
.meta-line{margin:1rem 0 0;color:var(--fg2);font-size:.875rem;line-height:1.25rem}
.hero-c .meta-line{margin-inline:auto}
.hero-q{color:var(--tone)}
/* Kurzfassung: wichtigster Satz hervorgehoben */
.tldr-box li.key{font-weight:600;color:var(--fg)}
.tldr-box li.key::marker{content:"→  "}
/* Inhaltsverzeichnis */
.toc{margin-top:1.5rem;max-width:860px}
.toc h2{font-size:1rem;line-height:1.5rem;font-weight:600;margin:0 0 0.5rem}
.toc ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem}
.toc li{margin:0}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0.5rem 1rem;border-radius:9999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font-size:.875rem;line-height:1.25rem;font-weight:500;text-decoration:none!important}
@media (hover:hover) and (pointer:fine){.toc a:hover{background:color-mix(in srgb,var(--tone) 8%,var(--card))}}
/* Ankerlinks an Überschriften */
.sec-title{position:relative}
.anchor{margin-left:0.5rem;color:var(--fg2);opacity:0;font-weight:500;text-decoration:none!important;transition:opacity 300ms var(--ease)}
.anchor:focus-visible{opacity:1}@media (hover:hover) and (pointer:fine){.sec-title:hover .anchor{opacity:1}}
@media (hover:none){.anchor{opacity:.5}}
/* Themen-Icon über Abschnittstiteln */
.sec-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--tone-soft);color:var(--tone);margin-bottom:0.75rem}
.sec-ico svg{width:24px;height:24px}
.center .sec-ico,.hero-c .sec-ico{margin-inline:auto}
/* Bildunterschriften */
figure.hero-img{margin-left:auto;margin-right:auto}
.hero-cap{max-width:680px;margin:0.75rem auto 0;text-align:center;color:var(--fg2);font-size:.875rem;line-height:1.25rem}
/* Lernpfad-Hinweis und Weiterlesen */
.lp-bar{margin-top:1rem}
.lp-bar p{display:flex;flex-wrap:wrap;gap:0.25rem 0.75rem;align-items:center;margin:0 0 0.5rem;padding:0.75rem 1rem;border-radius:12px;background:var(--tone-soft);font-size:.875rem;line-height:1.25rem;max-width:none}
.lp-bar b{color:var(--tone)}
.next-read .tiles{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.next-read .tiles{grid-template-columns:1fr}}
.next-read .sub-tile p{margin-bottom:0.5rem}
/* Downloads mit Typ und Größe */
.dl-meta{display:block;color:var(--fg2);font-size:.75rem;line-height:1rem;font-weight:400;margin-top:0.25rem}
/* Fußzeile: Datenschutz-Symbol */
.f-bot .priv{display:inline-flex;gap:0.5rem;align-items:center}
.f-bot .priv svg{width:16px;height:16px;flex:none;color:var(--ok)}
/* Akkordeon öffnet weich, Sprungziel kurz markiert */
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
details.acc[open] .acc-b{animation:accIn 500ms var(--ease)}
@keyframes hl{0%{background-color:color-mix(in srgb,var(--accent) 22%,transparent)}100%{background-color:transparent}}
:target>.wrap>.sec-head .sec-title,h2:target,h3:target,details:target summary{animation:hl 1600ms var(--ease);border-radius:8px}
/* Erfolgsmeldung mit Häkchen */
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.msg.ok b::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;margin-right:0.5rem;border-radius:9999px;background:var(--ok);color:#fff;font-size:.875rem;animation:pop 500ms var(--ease)}
/* Formularfehler direkt am Feld */
.field .ferr{display:block;margin-top:0.25rem;color:#c4251a;font-size:.875rem;line-height:1.25rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field .ferr{color:#ff8a80}}
html[data-theme="dark"] .field .ferr{color:#ff8a80}
.field [aria-invalid="true"]{border-color:#c4251a;box-shadow:0 0 0 3px color-mix(in srgb,#c4251a 18%,transparent)}
/* Tippflächen und Ränder auf dem Handy */
.btn,.btn-s,.lnav-btn,.q-opts button,.seg button{min-height:44px}
.btn{padding:0.5rem 1rem;display:inline-flex;align-items:center}
@media (max-width:760px){
  footer li{margin:0}footer li a{display:inline-block;padding:0.75rem 0}
  .gn-nav{padding:0 0.25rem 0 1rem}.lnav-in{padding:0 1rem}.lnav-menu{padding:0.25rem 1rem 1rem}.gn-mobile-in{padding:1rem 1rem 4rem}.gn-search-in{padding:1rem 1rem 3rem}
}
/* Darstellungs-Schalter sichtbar */
.gn-tools2{display:flex!important}
.gn-prefbtn{width:48px;height:48px;border-radius:9999px;font-size:.875rem;font-weight:600}
@media (hover:hover) and (pointer:fine){.gn-prefbtn:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}}
.offl+.offl{margin-top:0.5rem}
/* Daumenleiste auf dem Handy */
.thumb{position:fixed;left:16px;bottom:16px;z-index:89;display:none}
@media (max-width:760px){.thumb.on{display:inline-flex}}
.thumb a{display:inline-flex;align-items:center;min-height:44px;padding:0.5rem 1rem;border-radius:9999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.875rem;line-height:1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.2);text-decoration:none}
/* Schaubilder auf dem Handy: Vollbild zum Ansehen */
.zoom-btn{display:none}
@media (max-width:760px){
  .figure.sc{position:relative}
  .zoom-btn{display:inline-flex;align-items:center;gap:0.5rem;margin:0.75rem auto 0;min-height:44px;padding:0.5rem 1rem;border:0;border-radius:9999px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
  .figure.sc{text-align:center}
}
.zoom{position:fixed;inset:0;z-index:2000;background:var(--bg);display:flex;flex-direction:column}
.zoom[hidden]{display:none}
.zoom-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0.5rem 0.5rem 0.5rem 1rem;box-shadow:0 1px 0 var(--line)}
.zoom-top p{margin:0;font-size:.875rem;line-height:1.25rem;color:var(--fg2)}
.zoom-top button{min-height:44px;padding:0.5rem 1rem;border:0;border-radius:9999px;background:var(--bg-alt);color:var(--fg);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.zoom-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:1rem;touch-action:pan-x pan-y pinch-zoom}
.zoom-body svg{display:block;width:auto;height:auto;min-width:880px;max-width:none}
/* Feedback direkt zählen */
.fb-done{color:var(--ok);font-weight:600}
/* Sprunglink sichtbar und freundlich */
.skip{padding:0.5rem 1rem;border-radius:9999px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2)}
/* Druck: Adressen externer Quellen ausgeben */
@media print{main a[href^="http"]:not([href*="sicherheitsdenker.de"])::after{content:" (" attr(href) ")";font-size:.75rem;color:#444}.thumb,.zoom-btn,.toc,.anchor{display:none!important}}
@media (prefers-reduced-motion:reduce){details.acc[open] .acc-b,:target,.msg.ok b::before{animation:none!important}}
.hero-after{padding:0 0 2rem}
.hero-after .hero-img{margin-top:0}
.tldr{padding:0 0 2rem}
.lp-bar+.hero{padding-top:2rem}
.lp-bar .lp{display:flex;flex-wrap:wrap;gap:0.25rem 0.75rem;align-items:center;margin:0 0 0.5rem;padding:0.5rem 1rem;border-radius:12px;background:var(--tone-soft);font-size:.875rem;line-height:1.25rem}
.lp-bar .lp b{color:var(--tone)}
.lp-bar .lp a{text-decoration:underline;text-underline-offset:3px}
.crumbs a,.toc a,main nav a,.sub-tile a,.lnav a{text-decoration:none!important}
body.t-green,html[data-theme="light"] body.t-green{--tone:#0b7350}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.t-green{--tone:#58d6a0}}
html[data-theme="dark"] body.t-green{--tone:#58d6a0}

/* ===== Saubere Mittelachse auf zentrierten Seiten ===== */
.hero-c .wrap>*{margin-left:auto;margin-right:auto}
.hero-c .eyebrow,.hero-c .meta-line,.hero-c .lead{text-align:center}
.tldr-box{margin-left:auto;margin-right:auto;max-width:760px}
.toc{margin-left:auto;margin-right:auto;max-width:760px;text-align:center}
.toc ol{justify-content:center}
.toc a{background:var(--tone-soft);box-shadow:none;color:var(--fg)}
@media (hover:hover) and (pointer:fine){.toc a:hover{background:color-mix(in srgb,var(--tone) 16%,var(--tone-soft))}}
.lp-bar{display:flex;flex-direction:column;align-items:center}
.lp-bar .lp{justify-content:center;text-align:center}

/* ===== Schaubilder bauen sich beim Hineinscrollen auf ===== */
.js .figure.rv .dg>*{opacity:0;transition:opacity 700ms var(--ease)}
.js .figure.rv.in .dg>*{opacity:1}
.js .figure.rv .dg .node{transform:translateY(16px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.js .figure.rv.in .dg .node{transform:none}
.js .figure.rv.in .dg>:nth-child(n+2){transition-delay:60ms}.js .figure.rv.in .dg>:nth-child(n+4){transition-delay:140ms}
.js .figure.rv.in .dg>:nth-child(n+6){transition-delay:220ms}.js .figure.rv.in .dg>:nth-child(n+8){transition-delay:300ms}
.js .figure.rv.in .dg>:nth-child(n+10){transition-delay:380ms}.js .figure.rv.in .dg>:nth-child(n+12){transition-delay:460ms}
.js .figure.rv.in .dg>:nth-child(n+16){transition-delay:560ms}.js .figure.rv.in .dg>:nth-child(n+20){transition-delay:660ms}
.js .figure.rv.in .dg>:nth-child(n+26){transition-delay:780ms}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.dg circle[r="64"]{transform-box:fill-box;transform-origin:center;animation:breathe 6s var(--ease) infinite}

/* ===== Seitennavigation rechts ===== */
@media (min-width:1500px){
  .toc-rail{top:128px;width:160px;font-size:.875rem;line-height:1.25rem}
  .toc-rail a{padding:0.25rem 0 0.25rem 0.75rem;color:var(--fg2)}
  .toc-rail a.rail-top{margin-bottom:0.5rem;border-left-color:transparent;color:var(--fg);font-weight:600}
  .toc-rail a[aria-current]{border-color:var(--accent);color:var(--fg);font-weight:600}
}

/* ===== Bewegung anhalten (Schalter unter "Aa") ===== */
html.still *,html.still *::before,html.still *::after{animation:none!important;transition-duration:1ms!important}
html.still .js .rv,html.still .rv{opacity:1!important;transform:none!important}
html.still .tagline .w{opacity:1}
@media (prefers-reduced-motion:reduce){.dg circle[r="64"]{animation:none}.js .figure.rv .dg>*{opacity:1;transform:none}}
.offl input{flex:none}

/* =====================================================================
   APPLE DESIGN (apple-design Skill, 7. November 2026)
   ===================================================================== */
:root{
  /* Kritisch gedämpfte Federn (Dämpfung 1.0), Antwortzeit 0,4 s und 0,3 s */
  --spring:linear(0,0.058,0.180,0.321,0.455,0.573,0.671,0.750,0.812,0.860,0.897,0.924,0.945,0.960,0.971,0.979,0.985,0.989,0.992,0.994,0.996,0.997,0.998,0.999,1);
  --spring-d:590ms;--spring-fast-d:440ms;
  /* Systemschrift: SF Pro auf Apple-Geräten, mit optischer Größenanpassung */
  --font:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI",sans-serif;
}
html[data-theme="light"],html[data-theme="dark"]{--font:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI",sans-serif}
html{font-optical-sizing:auto}

/* Laufweite je Größe: groß enger, klein leicht weiter */
.hero h1{letter-spacing:-.025em}
.sec-title,.tagline p,.feature h3,.tile h3,.legal h1{letter-spacing:-.022em}
.card h3,.sub-tile h3,.callout h3,.flow h3,details.acc summary,.gn-acc,.gn-macc-link{letter-spacing:-.012em}
body,p,li,dd{letter-spacing:0}
.meta-line,.hero-cap,figcaption,.note,.src,.dl-meta,.crumbs,footer,.f-bot,.tag,.stand,.lp-bar .lp,.gn-h,.field small,.ferr,abbr[title]::after,.caption-1,.caption-2,.caption-3,.caption-4,.caption-5,.title-5{letter-spacing:.01em}

/* Rückmeldung sofort beim Drücken */
a,button,input,select,textarea,label,summary{touch-action:manipulation}
.btn:active,.btn-s:active,.pill:active,.lnav-btn:active,.q-opts button:active,.seg button:active,.sub-tile:active,.tile:active,.feature:active,.cat:active,.toc a:active,.gn-burger:active,.gn-searchbtn:active,.gn-prefbtn:active,.zoom-btn:active,.thumb a:active,.totop:active{transform:scale(.97);transition:transform 100ms ease-out}

/* Kopfleiste: Schatten erst, wenn Inhalt darunter liegt */
.gn-bg{box-shadow:none;transition:box-shadow 300ms var(--ease)}
.lnav{box-shadow:none;transition:box-shadow 300ms var(--ease)}
html.scrolled body:not(:has(.lnav)) .gn-bg,html.scrolled .lnav{box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent),0 8px 24px rgba(0,0,0,.06)}
html:not(.scrolled) .lnav{box-shadow:0 1px 0 color-mix(in srgb,var(--line) 40%,transparent)}

/* Einfachheit: keine Pillen-Navigation, keine Icons über Überschriften */
.toc,.sec-ico{display:none!important}

/* Fenster wachsen aus ihrem Auslöser und gehen denselben Weg zurück */
.gn-pref{transform-origin:calc(100% - 7rem) 0;transition:opacity 200ms var(--ease),transform var(--spring-fast-d) var(--spring),display var(--spring-fast-d) allow-discrete,overlay var(--spring-fast-d) allow-discrete}
.gn-pref[hidden]{display:none;opacity:0;transform:scale(.9) translateY(-.5rem)}
@starting-style{.gn-pref:not([hidden]){opacity:0;transform:scale(.9) translateY(-.5rem)}}
.gn-search{transform-origin:calc(100% - 4.5rem) 0;transform:scale(.98) translateY(-.5rem);transition:opacity 300ms var(--ease),transform var(--spring-d) var(--spring),visibility 0s 300ms}
.gn.search-open .gn-search{transform:none;transition:opacity 300ms var(--ease),transform var(--spring-d) var(--spring),visibility 0s}
.gn-mobile{transform-origin:calc(100% - 1.5rem) 0;transform:scale(.98) translateY(-.5rem);transition:opacity 300ms var(--ease),transform var(--spring-d) var(--spring),visibility 0s 300ms}
.gn.mob-open .gn-mobile{transform:none;transition:opacity 300ms var(--ease),transform var(--spring-d) var(--spring),visibility 0s}
.gn-mobile.dragging,.zoom.dragging{transition:none!important}
.zoom{transform-origin:50% 100%;transition:opacity 300ms var(--ease),transform var(--spring-d) var(--spring),display var(--spring-d) allow-discrete}
.zoom[hidden]{display:none;opacity:0;transform:translateY(2rem) scale(.98)}
@starting-style{.zoom:not([hidden]){opacity:0;transform:translateY(2rem) scale(.98)}}
.zoom-grab{display:block;width:100%;height:1.75rem;border:0;background:none;cursor:grab;touch-action:none;position:relative}
.zoom-grab::before{content:"";position:absolute;left:50%;top:.625rem;width:2.5rem;height:.3125rem;margin-left:-1.25rem;border-radius:9999px;background:color-mix(in srgb,var(--fg) 25%,transparent)}
.gn-grab{display:block;width:3rem;height:.3125rem;margin:2rem auto 0;border-radius:9999px;background:color-mix(in srgb,var(--fg) 20%,transparent)}
details.acc[open] .acc-b{animation:accIn var(--spring-d) var(--spring)}

/* Lernpfad-Hinweis am Seitenende */
.lp-end{padding:2rem 0 0}

/* Weicher Wechsel zwischen Hell und Dunkel */
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color 400ms var(--ease),color 400ms var(--ease),border-color 400ms var(--ease),fill 400ms var(--ease),stroke 400ms var(--ease)!important}

/* Schaubilder: Kreis erscheint einmal mit Federwirkung statt Dauerpuls */
.dg circle[r="64"]{animation:none}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.js .figure.rv.in .dg circle[r="64"]{transform-box:fill-box;transform-origin:center;animation:popIn var(--spring-d) var(--spring) 300ms both}

/* Systemeinstellung: Transparenz reduzieren */
@media (prefers-reduced-transparency:reduce){
  .gn-curtain{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.5)}
  .gn-mobile,.gn-search,.gn-pref,.zoom,.lnav,.gn-bg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--bg)!important}
  .feature .tag,.tag{background:rgba(0,0,0,.35)}
}
/* Systemeinstellung: Kontrast erhöhen */
@media (prefers-contrast:more){
  :root{--fg2:var(--fg);--line:color-mix(in srgb,var(--fg) 55%,transparent)}
  .card,.sub-tile,.tile,.callout,.tldr-box,.figure,.tbl,.lp-bar .lp,.gn-pref,.result,.out,.tool,.path{box-shadow:inset 0 0 0 1px var(--fg)!important}
  a{text-decoration:underline}
  .btn,.btn-s{box-shadow:inset 0 0 0 2px var(--fg)}
}
/* Systemeinstellung: Bewegung reduzieren = sanft überblenden statt bewegen */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color,box-shadow!important;transition-duration:200ms!important;transition-timing-function:ease!important}
  .gn-mobile,.gn-search,.gn-pref,.zoom,.gn-mlist>li,.gn-fly li,.gn-sr li,.js .rv,.btn:active,.tile:active,.sub-tile:active{transform:none!important}
  .tagline .w{opacity:1!important}
}

/* =====================================================================
   3D-SCROLLGESCHICHTE (Startseite)
   ===================================================================== */
.story{padding:0;position:relative}
.story-track{height:520vh}
.story-stage{position:sticky;top:3rem;height:calc(100vh - 3rem);height:calc(100svh - 3rem);overflow:hidden;display:flex;align-items:center}
.story-grid{display:grid;grid-template-columns:5fr 7fr;gap:2rem;align-items:center;height:100%}
.story-text{position:relative;min-height:16rem}
.st{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(1.5rem);will-change:opacity,transform}
.st .eyebrow{color:var(--accent)}
.st-h{font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.022em;margin:0}
.st-p{margin-top:1rem;font-size:1.125rem;line-height:1.75rem;color:var(--fg2);max-width:28rem}
@media (min-width:1024px){.st-h{font-size:3rem;line-height:1}}
.story-dots{position:absolute;left:0;top:calc(100% + 1rem);display:flex;gap:.5rem}
.story-dots i{width:.5rem;height:.5rem;border-radius:9999px;background:var(--line);transition:background-color 300ms var(--ease),transform 300ms var(--ease)}
.story-dots i.on{background:var(--accent);transform:scale(1.3)}
.scene{position:relative;height:min(36rem,100%);perspective:75rem;perspective-origin:50% 40%}
.cam{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cam>*{position:absolute;left:50%;top:50%;transform-style:preserve-3d}

/* Szene 1: Mail */
.env{width:15rem;height:10rem;margin:-5rem 0 0 -7.5rem}
.env-b,.env-f{position:absolute;inset:0;border-radius:1rem}
.env-b{background:color-mix(in srgb,var(--accent) 22%,var(--card));transform:translateZ(-1rem);box-shadow:0 2rem 4rem rgba(0,0,0,.18)}
.env-f{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(0 30%,50% 65%,100% 30%,100% 100%,0 100%)}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;background:color-mix(in srgb,var(--accent) 12%,var(--card));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateX(var(--flap,0deg));box-shadow:inset 0 0 0 1px var(--line);border-radius:1rem 1rem 0 0}
.env-at{position:absolute;right:1rem;bottom:.75rem;font-size:1.25rem;line-height:1.75rem;font-weight:600;color:var(--accent);transform:translateZ(.25rem)}
.pkt{width:1.75rem;height:1.75rem;margin:-.875rem 0 0 -.875rem;border-radius:9999px;background:radial-gradient(circle at 35% 35%,#ff9a9e,#e5484d 60%,#b42318);box-shadow:0 0 2rem rgba(229,72,77,.6)}
.pkt.ok{background:radial-gradient(circle at 35% 35%,#a7f3d0,#1f9d6b 60%,#11684a);box-shadow:0 0 2rem rgba(31,157,107,.55)}
.ripple{width:8rem;height:8rem;margin:-4rem 0 0 -4rem;border-radius:9999px;border:2px solid var(--ok);opacity:0}

/* Szene 2: Schichten */
.plates{width:15rem;height:15rem;margin:-7.5rem 0 0 -7.5rem}
.pl{position:absolute;inset:0;border-radius:1.5rem;background:color-mix(in srgb,var(--accent) calc(8% + var(--i) * 3%),color-mix(in srgb,var(--card) 82%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,var(--line)),0 1.5rem 3rem rgba(0,0,0,.08);display:flex;align-items:flex-end;padding:1rem}
.pl span{font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--fg);letter-spacing:.01em}
.pl.hit{box-shadow:inset 0 0 0 2px var(--ok),0 0 3rem color-mix(in srgb,var(--ok) 40%,transparent)}

/* Szene 3: Schild mit Tiefe */
.shield{width:12rem;height:12rem;margin:-6rem 0 0 -6rem}
.shield svg{position:absolute;inset:0;width:100%;height:100%}
.sh-l{transform:translateZ(calc(var(--z) * -3.5px))}
.sh-l path{fill:color-mix(in srgb,var(--accent) 70%,#000)}
.sh-f path{fill:var(--accent)}


/* Szene 4: Themen-Karten */
.orbit{width:0;height:0}
.oc{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:9999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 .75rem 2rem rgba(0,0,0,.12);color:var(--fg);font-size:.875rem;line-height:1.25rem;font-weight:600;white-space:nowrap;text-decoration:none!important;opacity:0;pointer-events:none}
.oc svg{width:1.25rem;height:1.25rem;color:var(--accent);flex:none}
@media (hover:hover) and (pointer:fine){.oc:hover{box-shadow:inset 0 0 0 1px var(--accent),0 .75rem 2rem rgba(0,0,0,.14)}}
.story.done .oc{pointer-events:auto}

@media (max-width:860px){
  .story-track{height:480vh}
  .story-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1rem;padding-top:1.5rem;padding-bottom:1rem}
  .story-text{min-height:10.5rem}
  .st-h{font-size:1.875rem;line-height:2.25rem}
  .st-p{font-size:1rem;line-height:1.5rem;margin-top:.5rem}
  .story-dots{top:auto;bottom:0}
  .scene{height:100%;min-height:20rem}
  .env{transform-origin:center}
}
/* Ohne Bewegung: ruhige Fassung mit allen Texten */
.story.static .story-track{height:auto}
.story.static .story-stage{position:relative;top:0;height:auto;padding:4rem 0}
.story.static .story-grid{grid-template-columns:1fr;height:auto}
.story.static .story-text{min-height:0;display:grid;gap:2rem}
.story.static .st{position:relative;opacity:1;transform:none}
.story.static .story-dots{display:none}
.story.static .scene{height:24rem}
.story.static .oc{opacity:1;pointer-events:auto}

/* 3D-Neigung beim Hineinscrollen: große Grafiken und Kacheln kippen sanft auf */
.js .tilt,.js .tilt.rv,.js .tilt.rv.in{opacity:1;transform:perspective(75rem) rotateX(var(--rx,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transform-origin:50% 100%;transition:box-shadow 300ms var(--ease),background-color 300ms var(--ease)}
@media (hover:hover){.js a.tilt:hover{transform:perspective(75rem) rotateX(var(--rx,0deg)) translateY(calc(var(--ty,0px) - .25rem)) scale(var(--sc,1))}}
.js a.tilt:active{transform:perspective(75rem) rotateX(var(--rx,0deg)) translateY(var(--ty,0px)) scale(calc(var(--sc,1) * .97));transition:transform 100ms ease-out}

/* =====================================================================
   GLAS-PANELS MIT SPIEGELUNG (alle Themengrafiken)
   ===================================================================== */
.glass-wrap{display:block;perspective:75rem;perspective-origin:50% 30%;padding:1.5rem 1.5rem 22%;--dir:0;--glow:var(--tone)}
.glass{display:block;position:relative;transform-style:preserve-3d;--q:1;
  transform:translateY(calc((1 - var(--q)) * 2rem)) rotateY(calc(var(--dir) * (7deg + (1 - var(--q)) * 16deg))) rotateX(calc(3deg + (1 - var(--q)) * 12deg))}
.glass-in{display:block;position:relative;transform-style:preserve-3d;transition:transform var(--spring-d) var(--spring)}
.glass-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:1rem;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 55%,transparent),0 0 1.5rem color-mix(in srgb,var(--glow) 32%,transparent),0 1.75rem 3rem rgba(0,0,0,.16)}
/* Glanzkante oben links: Licht fängt sich im Glas */
.glass-in::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:3/2;border-radius:1rem;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.08) 22%,transparent 42%);mix-blend-mode:screen}
.glass-refl{position:absolute;left:0;top:100%;width:100%;height:auto;aspect-ratio:3/2;margin-top:.75rem;border-radius:1rem;pointer-events:none;
  transform:scaleY(-1);transform-origin:50% 50%;opacity:.32;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.3) 14%,transparent 30%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.3) 14%,transparent 30%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .glass-refl{opacity:.4}}
html[data-theme="dark"] .glass-refl{opacity:.4}
/* Beim Darüberfahren dreht sich das Panel gerade zum Betrachter */
@media (hover:hover){a:hover .glass-in,.glass-wrap:hover .glass-in{transform:rotateY(calc(var(--dir) * -7deg)) rotateX(-3deg) translateZ(1rem)}}

/* Ausrichtung: Panels schauen zur Mitte, wie Monitore im Halbkreis */
.tiles .tile:nth-child(odd) .glass-wrap{--dir:1}
.tiles .tile:nth-child(even) .glass-wrap{--dir:-1}
.tiles-3 .tile:nth-child(3n+1) .glass-wrap{--dir:1}
.tiles-3 .tile:nth-child(3n+2) .glass-wrap{--dir:0}
.tiles-3 .tile:nth-child(3n) .glass-wrap{--dir:-1}
.feature .glass-wrap{--dir:-1}
@media (max-width:860px){.tiles .tile .glass-wrap,.tiles-3 .tile .glass-wrap{--dir:0}.feature .glass-wrap{--dir:0}}

/* Bisherige Bild-Rahmen ersetzen */
.hero-img:has(.glass-wrap){overflow:visible;background:none;border-radius:0;max-width:960px}
.hero-img:has(.glass-wrap) img,.tile .glass-wrap img,.feature .glass-wrap img{margin:0;max-width:none}
.tile img.glass-img,.tile img.glass-refl{aspect-ratio:3/2;width:100%;object-fit:contain}
.tile .glass-wrap{margin-top:auto;padding:0 2rem 20%}
.feature .glass-wrap{align-self:center;padding:2rem 2rem 18%}
.feature img.glass-img,.feature img.glass-refl{width:100%;height:auto;border-radius:1rem}
.feature .glass-wrap{--glow:#b5c6fd}
.glass-hero{padding:2rem 1.5rem 17%}
.glass-hero .glass-img{box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 55%,transparent),0 0 2.5rem color-mix(in srgb,var(--glow) 30%,transparent),0 2.5rem 4rem rgba(0,0,0,.18)}
.hero-cap{margin-top:0}
@media (max-width:640px){.glass-wrap{padding-left:.5rem;padding-right:.5rem}.tile .glass-wrap{padding:0 1rem 20%}}

/* Systemeinstellungen */
@media (prefers-reduced-transparency:reduce){.glass-refl,.glass-in::after{display:none}.glass-wrap{padding-bottom:1.5rem}.hero-cap{margin-top:.75rem}}
@media (prefers-contrast:more){.glass-refl,.glass-in::after{display:none}.glass-img{box-shadow:0 0 0 2px var(--fg)}.glass-wrap{padding-bottom:1.5rem}.hero-cap{margin-top:.75rem}}
@media (prefers-reduced-motion:reduce){.glass{--q:1!important}.glass-in{transition:none}}
@media print{.glass-refl,.glass-in::after{display:none}.glass{transform:none}}

.more{display:inline;gap:0}
.more::after{display:inline-block;margin-left:.25rem}

/* ===== Weiche Seitenwechsel (View Transitions) ===== */
@view-transition{navigation:auto}
.gn{view-transition-name:kopfleiste}
::view-transition-old(root){animation:vt-out 180ms var(--ease) both}
::view-transition-new(root){animation:vt-in 360ms var(--spring) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(.75rem)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:150ms;transform:none}@keyframes vt-in{from{opacity:0}}}
html.still::view-transition-old(root),html.still::view-transition-new(root){animation:none}
.cam>*{pointer-events:none}.story .oc{pointer-events:none}.story.done .oc{pointer-events:auto}
.cam,.scene{pointer-events:none}
.feature .glass-wrap{padding-top:2.75rem}

/* =====================================================================
   PRÜFUNG NACH DESIGN-SKILL-ROLLEN (impeccable führend, 8. November 2026)
   ===================================================================== */
/* 1 · Hero-Überschrift einfarbig: Wirkung über Größe und Gewicht, kein Verlauf */
.hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--fg)}
.hero h1 span{color:var(--fg2);-webkit-text-fill-color:currentColor}

/* 2 · Farbwelten: KI Indigoblau (ohne Violett), Recht Marineblau, übrige Seiten Petrol */
body.t-purple,html[data-theme="light"] body.t-purple{--tone:#2f55d4;--tone-soft:#e7ecfc}
body.t-blue,html[data-theme="light"] body.t-blue{--tone:#24487e;--tone-soft:#e4eaf3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.t-purple{--tone:#8fa6ff;--tone-soft:#1a2445}:root:not([data-theme="light"]) body.t-blue{--tone:#93b2de;--tone-soft:#18233a}}
html[data-theme="dark"] body.t-purple{--tone:#8fa6ff;--tone-soft:#1a2445}
html[data-theme="dark"] body.t-blue{--tone:#93b2de;--tone-soft:#18233a}
.feature .glass-wrap{--glow:#b5c6fd}

/* 3 · Keine Icon-Kacheln über jeder Kartenüberschrift: kleines Icon in der Zeile der Überschrift */
.card:has(>.ico){display:grid;grid-template-columns:auto 1fr;column-gap:.625rem;align-items:start}
.card:has(>.ico)>*{grid-column:1/-1}
.card>.ico{grid-column:1;grid-row:1;width:auto;height:auto;margin:.25rem 0 0;background:none;border-radius:0;color:var(--tone)}
.card>.ico svg{width:1.25rem;height:1.25rem}
.card:has(>.ico)>h3{grid-column:2;grid-row:1;margin-bottom:.5rem}
.ico:empty{display:none}
.card:has(>.ico:empty)>h3{grid-column:1/-1}

/* 5 · Tippflächen mindestens 44 px, Optik bleibt gleich */
a.more{display:inline-flex;align-items:center;min-height:2.75rem}
.tile .more,.sub-tile .more,.feature .more{min-height:0}
.crumbs a{display:inline-block;padding:.75rem 0;margin:-.75rem 0}
.gloss dt a,.az a,.pagefoot li a,.src a,.list-ic a{display:inline-block;padding-block:.625rem;margin-block:-.625rem}
.az a{padding-inline:.625rem;margin-inline:-.25rem}
.anchor{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;margin-left:0}
.story .oc{min-height:2.75rem;padding:.625rem 1rem}
footer li a{padding-block:.875rem}
@media (min-width:761px){footer li a{display:inline-block;padding-block:.5rem}}
.lp-bar .lp a{display:inline-block;padding-block:.5rem}
.toc-rail a{display:block;padding-block:.5rem}
.fb .btn-s{min-height:2.75rem}

/* 6 · Kein grauer Aufblitz-Kasten beim Antippen (Rückmeldung kommt über :active) */
html{-webkit-tap-highlight-color:transparent}

/* 8 · Eingabefelder mit 16 px: kein automatisches Hineinzoomen auf dem iPhone */
.inv input,.inv select,.field input,.field select,.field textarea,.pick select,.search,.gn-mfield,input[type="number"],input[type="text"],input[type="email"],input[type="password"],input[type="datetime-local"],select,textarea{font-size:max(1rem,16px)}
.gn-sf input{font-size:1.5rem}

/* 10 · Hover-Rückmeldung schnell (200 ms), Einflug beim Scrollen bleibt langsam */
:root{--hover-d:200ms}
.btn{transition:background-color var(--hover-d) var(--ease),transform var(--hover-d) var(--ease),box-shadow var(--hover-d) var(--ease)}
.btn-s,.pill,.q-opts button,.seg button{transition:background-color var(--hover-d) var(--ease),border-color var(--hover-d) var(--ease),transform var(--hover-d) var(--ease)}
a.tile,a.sub-tile,a.feature,a.card{transition:transform var(--hover-d) var(--ease),background-color var(--hover-d) var(--ease),box-shadow var(--hover-d) var(--ease)}
.cat i{transition:transform var(--hover-d) var(--ease),background-color var(--hover-d) var(--ease)}
.glass-in{transition:transform 250ms var(--ease)}
.gn-searchbtn,.gn-burger,.gn-prefbtn{transition:opacity var(--hover-d) var(--ease),background-color var(--hover-d) var(--ease)}

/* 11 · Aufklapp-Bereiche: unterbrechbarer Übergang statt fester Animation */
details.acc[open] .acc-b{animation:none}
details.acc::details-content{opacity:0;transform:translateY(-.5rem);transition:opacity 220ms var(--ease),transform 220ms var(--ease),content-visibility 220ms allow-discrete}
details.acc[open]::details-content{opacity:1;transform:none}

/* 13 · Scrollbereiche halten ihr Scrollen bei sich */
.gn-mobile,.gn-search,.lnav-menu,.zoom-body,.gn-pref,.inv-wrap,.figure.sc{overscroll-behavior:contain}

/* 14 · Sichere Ränder für Notch und Home-Leiste */
.wrap,.narrow{width:min(1180px,100% - 2 * max(1rem,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))}
@media (min-width:640px){.wrap,.narrow{width:min(1180px,100% - 2 * max(1.5rem,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))}}
.gn-nav,.lnav-in{padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(.75rem,env(safe-area-inset-right,0px))}
@media (max-width:760px){.gn-nav{padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(.25rem,env(safe-area-inset-right,0px))}.lnav-in{padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}}
.thumb{left:calc(1rem + env(safe-area-inset-left,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
.totop{right:calc(1.125rem + env(safe-area-inset-right,0px));bottom:calc(1.125rem + env(safe-area-inset-bottom,0px))}
.gn-mobile-in{padding-bottom:calc(4rem + env(safe-area-inset-bottom,0px))}
footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
.zoom-top{padding-top:calc(.5rem + env(safe-area-inset-top,0px))}
.zoom-body{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}

/* 15 · Langes Drücken markiert keinen Text auf Bedienelementen (Inhalte bleiben markierbar) */
button,.btn,.btn-s,.pill,.lnav-btn,.gn-acc,.gn-macc-link,.seg button,.q-opts button,.story .oc,.cat,.gn-logo,.thumb a,.totop,.zoom-btn,.anchor{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* 16 · Dynamische Bildschirmhöhe statt fester 100vh */
.lnav-menu{max-height:calc(100dvh - 7rem)}
.story-stage{height:calc(100svh - 3rem)}

/* Fehlende Bewegung: Treffer im Glossar und in den FAQ blenden beim Filtern kurz ein */
@keyframes hitIn{from{opacity:0}to{opacity:1}}
.gloss>div:not([hidden]),.faq-all details:not([hidden]),.faq-all .acc:not([hidden]){animation:hitIn 180ms var(--ease) both}
@media (prefers-reduced-motion:reduce){.gloss>div,.faq-all details{animation:none!important}}
.path li a{display:inline-block;padding-block:.75rem;margin-block:-.75rem}.lp-bar .lp a{padding-block:.625rem}
.card:has(>.ico){align-content:start}
.more::after{content:"\00a0›";margin-left:0}

/* ===== STARTSEITE: CLAIM, NAVIGATOR, AKTUELL, EINSTIEG, WERKZEUGE ===== */
.hero .claim{margin:.75rem 0 0;font-size:1.25rem;line-height:1.75rem;font-weight:600;color:var(--tone,var(--accent))}
@media (min-width:761px){.hero .claim{font-size:1.5rem;line-height:2rem}}
.navq .nq-tabs{max-width:36rem;margin:0 0 1.5rem;background:var(--card)}
.navq .nq-tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
.nq-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}
html.js .nq-panels{display:block}
html.js .nq-panel[hidden]{display:none}
html.js .nq-panel>h3,html.js .nq-panel>p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:not(.js) .nq-tabs{display:none}
.nq-panel h3{font-size:1.25rem;line-height:1.75rem;margin:0}
.nq-panel>p{margin:0 0 .75rem;color:var(--fg2);font-size:.875rem;line-height:1.25rem}
.nq-panel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.75rem}
.nq-panel a,.path-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;padding:1rem 1.25rem;background:var(--card);border-radius:var(--r-md);color:var(--fg);text-decoration:none!important;box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--hover-d,200ms) var(--ease),box-shadow var(--hover-d,200ms) var(--ease)}
.nq-panel a b,.path-cta b{display:block;font-weight:600;font-size:1rem;line-height:1.5rem}
.nq-panel a small,.path-cta small{display:block;color:var(--fg2);font-size:.875rem;line-height:1.25rem}
.nq-panel a .ic,.path-cta .ic{flex:none;width:1.25rem;height:1.25rem;color:var(--fg2);transition:transform var(--hover-d,200ms) var(--ease)}
@media (hover:hover) and (pointer:fine){.nq-panel a:hover,.path-cta:hover{box-shadow:inset 0 0 0 1px var(--fg2)}.nq-panel a:hover .ic,.path-cta:hover .ic{transform:translateX(3px);color:var(--fg)}}
.nq-panel:not([hidden]){animation:hitIn 320ms var(--ease) both}
.now{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:861px){.now{grid-template-columns:3fr 2fr}}
.now-focus{display:block;background:var(--feature-bg);color:#fff;border-radius:var(--r-lg);padding:2rem;text-decoration:none!important}
.now-focus h3{font-size:1.5rem;line-height:2rem;margin:0 0 .5rem;color:#fff}
.now-focus p{color:rgba(255,255,255,.86);margin:0 0 1rem;max-width:40rem}
.now-focus .more{color:#fff}
.now-news{background:var(--bg-alt);border-radius:var(--r-lg);padding:2rem}
.now-news h3{font-size:1.25rem;line-height:1.75rem;margin:0 0 .75rem}
.news{list-style:none;margin:0 0 1rem;padding:0}
.news li{padding:.75rem 0;border-top:1px solid var(--line)}
.news li:first-child{border-top:0;padding-top:0}
.news time{display:block;color:var(--fg2);font-size:.75rem;line-height:1rem;font-weight:600}
.news a{color:var(--fg);font-weight:600;display:inline-block;padding-block:.25rem}
.now-news p .more+.more{margin-left:1.25rem}
.path-cta{margin-top:.75rem;background:var(--tone-soft,var(--bg-alt));box-shadow:none}
#anfang .sub-tile .eyebrow{font-size:.875rem;line-height:1.25rem}
.tools-h{font-size:1.25rem;line-height:1.75rem;margin:2.5rem 0 .75rem}
.tool-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tool-list a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1rem;border-radius:9999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font-size:.875rem;line-height:1.25rem;font-weight:500;text-decoration:none!important;transition:box-shadow var(--hover-d,200ms) var(--ease)}
@media (hover:hover) and (pointer:fine){.tool-list a:hover{box-shadow:inset 0 0 0 1px var(--fg2)}}
.nq-tabs button,.tool-list a,.nq-panel a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nq-panel ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.now-focus{display:flex;flex-direction:column;align-items:flex-start}
.now-focus .tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;margin-bottom:1rem}
.now-focus .more{margin-top:auto}
.news a{text-decoration:none!important}
@media (hover:hover) and (pointer:fine){.news a:hover{text-decoration:underline!important;text-underline-offset:.2em}}
.nq-panel li{margin:0}

/* ===== RUNDE 2: Zeitstrahl, Listen, Werkzeuge ===== */
.callout.blk{display:block;margin-top:1.5rem}
.callout.blk h3{margin:0 0 .5rem}
.callout.blk p+p,.callout.blk ul+p{margin-top:.75rem}
.ticks{list-style:none;margin:.5rem 0 0;padding:0}
.ticks li{position:relative;padding-left:1.5rem;margin:.375rem 0;font-size:.9375rem;line-height:1.4rem;color:var(--fg2)}
.ticks li::before{content:"";position:absolute;left:.25rem;top:.55rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--tone,var(--accent))}
.sub-tile .ticks li{font-size:.875rem;line-height:1.3rem}
.flabel{display:block;font-weight:600;margin-bottom:.25rem}
/* Zeitstrahl */
.tl{list-style:none;margin:0;padding:0;position:relative;max-width:46rem}
.tl::before{content:"";position:absolute;left:.6rem;top:.5rem;bottom:.5rem;width:2px;background:var(--line)}
.tl li{position:relative;padding:0 0 1.5rem 2.5rem}
.tl li::before{content:"";position:absolute;left:0;top:.25rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--tone,var(--accent))}
.alt .tl li::before{background:var(--bg-alt)}
.tl li.done::before{background:var(--tone,var(--accent))}
.tl li.now-mark::after{content:"heute";position:absolute;left:2.5rem;top:-1.6rem;font-size:.75rem;line-height:1rem;font-weight:600;color:var(--tone,var(--accent))}
.tl time{display:block;font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--tone,var(--accent))}
.tl h3{font-size:1.125rem;line-height:1.75rem;margin:.125rem 0}
.tl p{margin:0;color:var(--fg2);font-size:.9375rem;line-height:1.4rem}
.tl li.next h3{color:var(--fg)}
/* Zero Trust */
.zt-out{background:var(--card);border-radius:var(--r-md);padding:1.5rem;box-shadow:inset 0 0 0 1px var(--line)}
.zt-out .zt-v{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.25rem;line-height:1.75rem;margin:0 0 .75rem}
.zt-out .zt-v i{width:.75rem;height:.75rem;border-radius:50%;background:var(--c)}
.zt-out ol{margin:0;padding-left:1.25rem;color:var(--fg2)}
.zt-out li{margin:.375rem 0}
/* VLAN */
.vl-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.5rem}
.vl-map li{padding:.75rem 1rem;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;line-height:1.25rem;transition:background-color 250ms var(--ease),box-shadow 250ms var(--ease)}
.vl-map li b{display:block;font-size:1rem;line-height:1.5rem;color:var(--fg)}
.vl-map li small{color:var(--fg2)}
.vl-map li.src{box-shadow:inset 0 0 0 2px #d92d20}
.vl-map li.hit{background:color-mix(in srgb,#d92d20 12%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#d92d20 45%,var(--line))}
.vl-map li.safe{background:color-mix(in srgb,#1f9d6b 10%,var(--card))}
.vl-sum{margin:.75rem 0 0;font-weight:600}
/* USV */
.usv-out{background:var(--card);border-radius:var(--r-md);padding:1.5rem;box-shadow:inset 0 0 0 1px var(--line)}
.usv-out dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;align-items:baseline}
.usv-out dt{color:var(--fg2);font-size:.875rem}
.usv-out dd{margin:0;font-weight:600;font-size:1.125rem}
.usv-out p{margin:1rem 0 0;color:var(--fg2);font-size:.9375rem;line-height:1.4rem}
/* Abschlusstest */
.lp-test{margin-top:1rem}
.lp-test summary{font-weight:600}
.lp-test .tool{margin-top:.75rem}
.tl li.now-mark{padding-top:2rem}
.tl li.now-mark::before{top:2.25rem}
.tl li.now-mark::after{top:0;left:2.5rem;content:"Heute";font-size:.75rem;line-height:1rem;padding:.125rem .5rem;border-radius:9999px;background:var(--tone-soft,var(--bg-alt));color:var(--fg)}
.vl-map{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.vl-map li b{overflow-wrap:anywhere}
.q-next[hidden],.q-fb[hidden]{display:none!important}
#bedrohungen .sub-tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.callout.feeds .tool-list{margin-top:.75rem}
/* Startseite: Grafiken in den Kacheln auf 70 % */
.tile .glass-wrap{width:70%;margin-inline:auto;padding:0 0 14%}
@media (max-width:640px){.tile .glass-wrap{width:80%}}

/* ===== WEGWEISER ===== */
.wg-fab{position:fixed;z-index:95;right:calc(1.125rem + env(safe-area-inset-right,0px));bottom:calc(1.125rem + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1.25rem 0 1rem;border:0;border-radius:9999px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:.9375rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.22);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--hover-d,200ms) var(--ease),box-shadow var(--hover-d,200ms) var(--ease)}
.wg-fab svg{width:1.25rem;height:1.25rem;flex:none}
@media (hover:hover) and (pointer:fine){.wg-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.26)}}
.wg-fab:active{transform:scale(.97)}
.wg-open .wg-fab{opacity:0;pointer-events:none}
@media (max-width:640px){.wg-fab{padding:0;width:3rem;justify-content:center}.wg-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.has-wg .totop{bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
.wg{position:fixed;z-index:96;right:calc(1.125rem + env(safe-area-inset-right,0px));bottom:calc(1.125rem + env(safe-area-inset-bottom,0px));width:min(24rem,calc(100vw - 2.25rem));height:min(36rem,calc(100dvh - 6rem));display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.28);overflow:hidden;opacity:0;transform:translateY(12px) scale(.98);transform-origin:100% 100%;transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.wg.in{opacity:1;transform:none}
.wg[hidden]{display:none}
@media (max-width:640px){.wg{left:0;right:0;bottom:0;width:100%;height:min(85dvh,40rem);border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(24px)}}
.wg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem 1.25rem;border-bottom:1px solid var(--line)}
.wg-h h2{font-size:1.125rem;line-height:1.5rem;margin:0}
.wg-h p{margin:.125rem 0 0;font-size:.75rem;line-height:1rem;color:var(--fg2)}
.wg-x{flex:none;width:2.75rem;height:2.75rem;margin:-.5rem -.5rem 0 0;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--fg2);cursor:pointer}
.wg-x svg{width:1.25rem;height:1.25rem}
@media (hover:hover) and (pointer:fine){.wg-x:hover{background:var(--bg-alt);color:var(--fg)}}
.wg-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem 1rem .5rem;display:flex;flex-direction:column;gap:.5rem;scroll-behavior:smooth}
.wg-m{max-width:88%;padding:.625rem .875rem;border-radius:1rem;font-size:.9375rem;line-height:1.4rem;animation:hitIn 260ms var(--ease) both}
.wg-bot{align-self:flex-start;background:var(--bg-alt);border-bottom-left-radius:.375rem}
.wg-you{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:.375rem}
.wg-typing{display:inline-flex;gap:.25rem;padding:.75rem .875rem}
.wg-typing i{width:.4rem;height:.4rem;border-radius:50%;background:var(--fg2);opacity:.5;animation:wgDot 900ms infinite ease-in-out}
.wg-typing i:nth-child(2){animation-delay:150ms}.wg-typing i:nth-child(3){animation-delay:300ms}
@keyframes wgDot{0%,80%,100%{transform:none;opacity:.35}40%{transform:translateY(-3px);opacity:.9}}
.wg-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin:.125rem 0 .25rem}
.wg-chips button{min-height:2.5rem;padding:.375rem .875rem;border-radius:9999px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font:inherit;font-size:.875rem;line-height:1.25rem;cursor:pointer;text-align:left;transition:box-shadow var(--hover-d,200ms) var(--ease),background-color var(--hover-d,200ms) var(--ease)}
@media (hover:hover) and (pointer:fine){.wg-chips button:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--accent)}}
.wg-chips button:disabled{opacity:.45;cursor:default}
.wg-chips button.on{opacity:1;background:var(--tone-soft,var(--bg-alt));box-shadow:none}
.wg-cards{list-style:none;margin:0 0 .25rem;padding:0;display:grid;gap:.375rem;animation:hitIn 300ms var(--ease) both}
.wg-cards a{display:block;padding:.75rem .875rem;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);text-decoration:none!important;transition:box-shadow var(--hover-d,200ms) var(--ease)}
@media (hover:hover) and (pointer:fine){.wg-cards a:hover{box-shadow:inset 0 0 0 1px var(--accent)}}
.wg-cards b{display:block;font-size:.9375rem;line-height:1.3rem}
.wg-cards small{display:block;font-size:.75rem;line-height:1rem;color:var(--accent);font-weight:600;margin-top:.125rem}
.wg-cards span{display:block;font-size:.8125rem;line-height:1.2rem;color:var(--fg2);margin-top:.25rem}
.wg-f{display:flex;gap:.5rem;padding:.75rem 1rem 1rem;border-top:1px solid var(--line)}
.wg-f input{flex:1;min-width:0;min-height:2.75rem;padding:.5rem .875rem;border-radius:9999px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-size:max(1rem,16px)}
.wg-f input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.wg-f button{flex:none;width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);cursor:pointer}
.wg-f button svg{width:1.25rem;height:1.25rem}
.wg-tease{position:fixed;z-index:94;right:calc(1.125rem + env(safe-area-inset-right,0px));bottom:calc(5rem + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-start;gap:.25rem;max-width:min(17rem,calc(100vw - 2.25rem));padding:.25rem .25rem .25rem 0;background:var(--bg);border-radius:1rem 1rem .375rem 1rem;box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:opacity 260ms var(--ease),transform 260ms var(--ease)}
.wg-tease.in{opacity:1;transform:none}
.wg-tease[hidden]{display:none}
.wg-tease-b{border:0;background:none;color:var(--fg);font:inherit;font-size:.9375rem;line-height:1.35rem;text-align:left;padding:.625rem .25rem .625rem .875rem;cursor:pointer}
.wg-tease-x{flex:none;width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:none;color:var(--fg2);font-size:1.25rem;line-height:1;cursor:pointer}
.has-wg .totop{transition:bottom 200ms var(--ease)}
@media (prefers-reduced-motion:reduce){.wg,.wg-tease,.wg-m,.wg-cards{transition:none;animation:none}.wg-typing i{animation:none}}
@media print{.wg,.wg-fab,.wg-tease{display:none!important}}
section.wg{padding:0;margin:0}
@media (max-width:640px){section.wg{padding:0 0 env(safe-area-inset-bottom,0px)}}

/* ===== SPRACHUMSCHALTER ===== */
.gn-item.gn-lang{display:flex!important;align-items:center}
.gn-langbtn{display:grid;place-items:center;min-width:2.75rem;height:44px;padding:0 .5rem;border-radius:9999px;color:var(--fg)!important;opacity:.8;font-size:.8125rem;line-height:1rem;font-weight:600;letter-spacing:.04em;text-decoration:none!important;transition:opacity var(--hover-d,200ms) var(--ease),background-color var(--hover-d,200ms) var(--ease)}
@media (hover:hover) and (pointer:fine){.gn-langbtn:hover{opacity:1;background:color-mix(in srgb,var(--fg) 6%,transparent)}}
.gn.search-open .gn-lang{opacity:0;pointer-events:none}
.legal-note{margin:0 0 1.5rem;padding:.75rem 1rem;border-radius:var(--r-sm);background:var(--tone-soft,var(--bg-alt));font-size:.875rem;line-height:1.25rem;color:var(--fg)}
/* Hase im Wegweiser-Knopf: Symbol bringt eigenen viewBox mit, das äußere svg hat keinen (sonst verschiebt er sich nach links oben).
   Kontur hält die feinen Linien bei normaler Pixeldichte sichtbar. */
.wg-fab svg.wg-bunny{width:auto;height:1.5rem;aspect-ratio:263.2/401.8;overflow:visible;stroke:currentColor;stroke-width:10;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:640px){.wg-fab svg.wg-bunny{height:1.625rem}}