/* Hedgehog AI – geteiltes Stylesheet für Unterseiten (Fonts lokal, keine externen Requests) */
@font-face{font-family:'DM Serif Display';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/DMSerifDisplay-400.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/DMSerifDisplay-400i.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:300;font-display:swap;src:url(fonts/IBMPlexSans-300.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400.woff2) format('woff2')}
:root{--navy:#0a1628;--navy-mid:#111e38;--navy-light:#1a2d50;--gold:#c9a84c;--gold-light:#e2c47a;--gold-dim:rgba(201,168,76,.15);--white:#f0ede8;--white-dim:rgba(240,237,232,.6);--white-faint:rgba(240,237,232,.12);--red:#c0392b;--green:#1e7a4a;--gray:#f4f5f7;--text-dark:#1a1a2e}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--navy);color:var(--white);overflow-x:clip;line-height:1.6}
a{color:var(--gold)}
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(10,22,40,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(201,168,76,.1)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo img{width:40px;height:40px;object-fit:contain;border-radius:50%}
.nav-logo-text{font-family:'DM Serif Display',serif;font-size:22px;color:var(--white)}
.nav-logo-text span{color:var(--gold)}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;white-space:nowrap}
.nav-links a{color:var(--white-dim);text-decoration:none;font-size:14px;font-weight:400;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-links a.nav-cta{background:var(--gold);color:var(--navy);padding:9px 18px;border-radius:4px;font-weight:600}
@media(max-width:900px){.nav-links{display:none}nav{padding:14px 20px}}
.section-inner{max-width:1100px;margin:0 auto;padding:0 48px}
@media(max-width:768px){.section-inner{padding:0 20px}}
section{position:relative;padding:88px 0}
section.tight{padding:56px 0}
section.alt{background:var(--navy-mid)}
.section-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
h1,.h1{font-family:'DM Serif Display',serif;font-size:clamp(34px,5vw,62px);line-height:1.08;letter-spacing:-.02em;color:var(--white);margin-bottom:22px}
h1 em,.h1 em{color:var(--gold);font-style:italic}
h2,.section-h2{font-family:'DM Serif Display',serif;font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--white);margin-bottom:18px}
h3{font-size:17px;font-weight:600;color:var(--white);margin-bottom:8px}
.lead{font-size:18px;line-height:1.7;color:var(--white-dim);font-weight:300;max-width:none;margin-bottom:36px}
p{color:var(--white-dim);font-weight:300;font-size:16px}
.hero{padding:150px 0 70px}
.hero .kicker{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);padding:6px 12px;border-radius:20px;margin-bottom:22px}
.btn-primary{display:inline-block;background:var(--gold);color:var(--navy);font-size:15px;font-weight:600;padding:14px 30px;border-radius:4px;text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .15s;letter-spacing:.02em}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-1px)}
.btn-secondary{display:inline-block;background:transparent;color:var(--white);font-size:15px;padding:14px 30px;border-radius:4px;text-decoration:none;border:1px solid rgba(240,237,232,.25);cursor:pointer;transition:border-color .2s,color .2s}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.card{background:var(--navy-mid);border:1px solid rgba(201,168,76,.12);border-radius:8px;padding:28px 26px;transition:border-color .25s,transform .2s}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card.gold{border-color:var(--gold);background:var(--navy-light)}
.card .num{font-family:'DM Serif Display',serif;font-size:40px;color:var(--gold);line-height:1;margin-bottom:8px}
.card .ico{font-size:28px;margin-bottom:12px;display:block}
.card p{font-size:14px;line-height:1.65}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}
@media(max-width:640px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--navy-mid);border:1px solid var(--gold-dim);border-radius:8px;padding:20px 22px}
.kpi b{display:block;font-family:'DM Serif Display',serif;font-size:30px;color:var(--gold);line-height:1.1;margin-bottom:6px}
.kpi span{font-size:13px;color:var(--white-dim)}
.steps{counter-reset:s;display:grid;gap:14px}
.step{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;background:var(--navy-mid);border:1px solid rgba(201,168,76,.12);border-radius:8px;padding:20px 22px}
.step::before{counter-increment:s;content:counter(s);font-family:'DM Serif Display',serif;font-size:30px;color:var(--gold);line-height:1}
.step p{font-size:15px}
.scenario{background:var(--navy-light);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:28px 32px;font-size:17px;line-height:1.75;color:var(--white)}
.scenario em{color:var(--gold);font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:12px}
.faq-item{border-top:1px solid var(--white-faint);padding:20px 0}
.faq-item h3{font-size:16px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.faq-item h3::after{content:'+';color:var(--gold);font-weight:300;font-size:22px;line-height:1}
.faq-item.open h3::after{content:'–'}
.faq-item p{display:none;margin-top:12px;font-size:15px}
.faq-item.open p{display:block}
/* Rechner */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.panel{background:var(--navy-mid);border:1px solid rgba(201,168,76,.18);border-radius:10px;padding:26px}
.panel label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--white-dim);margin:16px 0 6px}
.panel label:first-child{margin-top:0}
.panel .v{float:right;color:var(--gold);font-weight:600;font-family:'IBM Plex Sans',sans-serif;text-transform:none;letter-spacing:0;font-size:13px}
.panel input[type=range]{width:100%;accent-color:var(--gold)}
.panel select,.panel input[type=number],.panel input[type=text]{width:100%;padding:11px 12px;border-radius:6px;border:1px solid rgba(240,237,232,.2);background:var(--navy);color:var(--white);font-size:15px;font-family:inherit}
.panel .note{font-size:12px;color:var(--white-dim);margin-top:12px;line-height:1.5}
.result{background:var(--white);color:var(--text-dark);border-radius:10px;padding:26px}
.result .big{font-family:'DM Serif Display',serif;font-size:clamp(36px,4.5vw,54px);line-height:1;color:var(--navy);margin:6px 0 4px}
.result .big small{font-size:15px;font-family:'IBM Plex Sans',sans-serif;color:#5A6472;font-weight:500}
.result .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5A6472}
.result .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:18px 0}
@media(max-width:480px){.result .row{grid-template-columns:1fr}}
.result .tile{background:var(--gray);border-radius:8px;padding:12px 14px}
.result .tile b{display:block;font-size:20px;color:var(--navy)}
.result .tile span{font-size:12px;color:#5A6472}
.result p{color:#3a4250;font-size:14px;font-weight:400}
.result .lead-line{font-size:16px;color:var(--navy);font-weight:500;margin:10px 0}
.chart{width:100%;height:auto;margin:10px 0}
.vorsprung{background:var(--navy);color:var(--white);border-radius:8px;padding:16px 18px;margin-top:14px;border:1px solid var(--gold)}
.vorsprung b{color:var(--gold)}
.chip{display:inline-block;background:#FBF6E4;color:#8a6d0f;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;margin-bottom:8px}
.uc-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.uc-pick{grid-template-columns:1fr}}
.uc-pick label{display:flex;gap:10px;align-items:flex-start;background:var(--navy);border:1px solid rgba(240,237,232,.14);border-radius:8px;padding:10px 12px;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;text-transform:none;letter-spacing:0;font-size:13px;color:var(--white);margin:0;transition:border-color .2s}
.uc-pick label:hover,.uc-pick label.on{border-color:var(--gold)}
.uc-pick input{margin-top:3px;accent-color:var(--gold)}
.uc-pick small{display:block;color:var(--white-dim);font-size:11px}
.pkg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:800px){.pkg{grid-template-columns:1fr}}
.pkg .card b{font-family:'DM Serif Display',serif;font-size:26px;color:var(--gold);display:block;margin:6px 0 10px}
.timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:20px}
@media(max-width:800px){.timeline{grid-template-columns:repeat(2,1fr)}}
.tl{background:var(--navy-mid);border-top:2px solid var(--gold);padding:12px 10px;font-size:12px;color:var(--white-dim)}
.tl b{display:block;color:var(--white);font-size:13px;margin-bottom:4px}
.cta-box{background:var(--navy-light);border:1px solid var(--gold);border-radius:8px;padding:44px 48px;text-align:center}
.cta-box h2{font-size:clamp(24px,2.6vw,34px)}
.cta-box p{max-width:720px;margin:0 auto 22px}
@media(max-width:640px){.cta-box{padding:30px 20px}}
.sov{border-left:3px solid var(--gold);padding:14px 18px;background:var(--navy-mid);border-radius:0 8px 8px 0;font-size:14px;color:var(--white-dim)}
.sov b{color:var(--white)}
footer{background:#060e1c;padding:48px;border-top:1px solid rgba(201,168,76,.1)}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.footer-logo{font-family:'DM Serif Display',serif;font-size:22px;color:var(--white)}
.footer-logo span{color:var(--gold)}
.footer-tagline{font-size:13px;color:var(--white-dim);margin-top:4px}
.footer-links{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--white-dim);text-decoration:none;font-size:13px}
.footer-links a:hover{color:var(--gold)}
.footer-copy{max-width:1100px;margin:28px auto 0;font-size:12px;color:rgba(240,237,232,.35)}
.breadcrumb{font-size:13px;color:var(--white-dim);margin-bottom:14px}
.breadcrumb a{color:var(--white-dim);text-decoration:none}
.breadcrumb a:hover{color:var(--gold)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.badge{display:inline-block;background:var(--gold);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-left:8px;vertical-align:middle}
table.cmp{width:100%;border-collapse:collapse;font-size:14px}
table.cmp th,table.cmp td{padding:12px 10px;border-bottom:1px solid var(--white-faint);text-align:left;vertical-align:top}
table.cmp th{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
table.cmp td{color:var(--white-dim)}
table.cmp td:first-child{color:var(--white);font-weight:500}
.score{display:grid;gap:10px}
.score label{display:flex;gap:12px;align-items:flex-start;background:var(--navy-mid);border:1px solid rgba(240,237,232,.12);border-radius:8px;padding:14px 16px;cursor:pointer;font-size:15px;color:var(--white)}
.score input{margin-top:4px;accent-color:var(--gold)}
.ampel{font-family:'DM Serif Display',serif;font-size:28px;margin-top:20px}
.mascot-inline{width:min(200px,42vw);height:auto;display:block;margin:0 0 18px;background:var(--navy);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.leadbox{background:var(--navy-light);border:1px solid var(--gold);border-radius:10px;padding:26px 28px;margin-top:26px}
.leadbox h3{font-family:'DM Serif Display',serif;font-size:22px;color:var(--white);margin-bottom:8px}
.leadbox p{font-size:14px;margin-bottom:14px}
.leadgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:640px){.leadgrid{grid-template-columns:1fr}}
.leadform label{display:block;font-size:12px;color:var(--white-dim);margin-bottom:4px;font-weight:500}
.leadform input[type=text],.leadform input[type=email],.leadform input[type=tel]{width:100%;padding:11px 12px;border-radius:6px;border:1px solid rgba(240,237,232,.22);background:var(--navy);color:var(--white);font:inherit;font-size:15px}
.leadform input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.leadconsent{display:flex!important;gap:10px;align-items:flex-start;font-size:13px;color:var(--white-dim);margin:6px 0 14px;font-weight:300!important}
.leadconsent input{width:auto;margin-top:3px;accent-color:var(--gold)}
.leadconsent a{color:var(--gold)}
.leadnote{font-size:12px;color:var(--white-dim);margin:10px 0 0}
.treppe{display:grid;gap:14px}
.stufe{background:var(--navy-mid);border:1px solid rgba(201,168,76,.14);border-left:3px solid rgba(201,168,76,.3);border-radius:0 10px 10px 0;padding:22px 26px;transition:border-color .25s,background .25s}
.stufe.empf{border-color:var(--gold);border-left-color:var(--gold);background:var(--navy-light);box-shadow:0 0 0 1px rgba(201,168,76,.25)}
.stufe-kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.stufe-nr{font-family:'DM Serif Display',serif;font-size:26px;color:var(--gold);width:34px;flex-shrink:0}
.stufe-ico{font-size:22px;width:30px;text-align:center;flex-shrink:0}
.stufe-kopf h3{margin:0;font-size:18px}
.stufe-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold);letter-spacing:.04em}
.stufe-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}
@media(max-width:800px){.stufe-grid{grid-template-columns:1fr;gap:12px}}
.stufe-grid em{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-style:normal;margin-bottom:5px}
.stufe-grid p{font-size:14px;line-height:1.6}
button.card{background:var(--navy-mid);border:1px solid rgba(201,168,76,.12)}
button.card.gold{border-color:var(--gold);background:var(--navy-light)}
.honigtopf{position:absolute;left:-9999px}
.fehlerhinweis{background:#3a1c1c;border:1px solid var(--red);border-radius:8px;padding:14px 16px;margin-bottom:18px;font-size:14px;color:var(--white)}

/* ===== Hedgehog AI – geteilte UI: Menü, Suche, Infografik, System-Fluss, Schaltzentrale ===== */
:root{--hh-navy:#0a1628;--hh-navy-mid:#111e38;--hh-navy-light:#1a2d50;--hh-gold:#c9a84c;--hh-gold-light:#e2c47a;--hh-white:#f0ede8;--hh-dim:rgba(240,237,232,.62);--hh-faint:rgba(240,237,232,.12)}

/* ---------- Menü ---------- */
nav.hh-nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 40px;background:rgba(10,22,40,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(201,168,76,.12)}
nav.hh-nav .nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
nav.hh-nav .nav-logo img{width:40px;height:40px;border-radius:50%;object-fit:contain}
nav.hh-nav .nav-logo-text{font-family:'DM Serif Display',serif;font-size:22px;color:var(--hh-white)}
nav.hh-nav .nav-logo-text span{color:var(--hh-gold)}
.hh-menu{display:flex;align-items:center;justify-content:space-between;flex:1;gap:18px;min-width:0}
.hh-menu-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.hh-menu-list>li{position:relative}
.hh-top{appearance:none;background:none;border:0;color:var(--hh-dim);font:inherit;font-size:14px;letter-spacing:.03em;padding:10px 14px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.hh-top:hover,.hh-top:focus-visible,.hh-has-sub.open>.hh-top{color:var(--hh-white);background:rgba(240,237,232,.06)}
.hh-top .hh-caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;opacity:.7}
.hh-has-sub.open>.hh-top .hh-caret{transform:rotate(225deg) translateY(-2px)}
.hh-sub{position:absolute;top:calc(100% + 10px);left:0;min-width:280px;background:#0e1b32;border:1px solid rgba(201,168,76,.22);border-radius:12px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:5}
.hh-sub::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.hh-has-sub.open>.hh-sub{opacity:1;visibility:visible;transform:none}
.hh-sub-wide{min-width:720px;display:grid;grid-template-columns:1fr 1fr 250px;gap:10px 22px}
.hh-sub-head{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-gold);margin:6px 10px 6px;grid-column:1/-1}
.hh-sub ul{list-style:none;margin:0;padding:0}
.hh-sub li a,.hh-sub a.hh-item{display:flex;gap:10px;align-items:baseline;color:var(--hh-white);text-decoration:none;font-size:13.5px;padding:7px 10px;border-radius:6px;line-height:1.35;transition:background .15s,color .15s}
.hh-sub li a:hover,.hh-sub a.hh-item:hover{background:rgba(201,168,76,.12);color:var(--hh-gold-light)}
.hh-sub li a .n{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--hh-gold);min-width:18px}
.hh-sub li a small,.hh-sub a.hh-item small{display:block;color:var(--hh-dim);font-size:12px;font-weight:300}
.hh-sub-feature{border-left:1px solid var(--hh-faint);padding-left:16px;display:flex;flex-direction:column;gap:6px}
.hh-sub-feature .hh-sub-head{margin-left:0}
a.hh-feature{display:block;background:var(--hh-navy-light);border:1px solid rgba(201,168,76,.25);border-radius:8px;padding:12px 14px;text-decoration:none;color:var(--hh-white);font-size:13.5px;line-height:1.35;transition:border-color .2s,transform .15s}
a.hh-feature:hover{border-color:var(--hh-gold);transform:translateY(-1px)}
a.hh-feature b{display:block;color:var(--hh-gold);margin-bottom:2px}
a.hh-feature small{color:var(--hh-dim);font-weight:300;font-size:12px}
.hh-nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hh-nav-right .nav-cta{background:var(--hh-gold);color:var(--hh-navy)!important;font-weight:600!important;padding:9px 18px;border-radius:4px;text-decoration:none;font-size:14px;white-space:nowrap}
.hh-nav-right .nav-cta:hover{background:var(--hh-gold-light)}
.hh-search-btn{appearance:none;background:rgba(240,237,232,.06);border:1px solid var(--hh-faint);color:var(--hh-dim);font:inherit;font-size:13px;padding:8px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:border-color .2s,color .2s}
.hh-search-btn:hover{border-color:var(--hh-gold);color:var(--hh-white)}
.hh-search-btn kbd{font-family:'IBM Plex Mono',monospace;font-size:10px;border:1px solid var(--hh-faint);border-radius:3px;padding:1px 5px;color:var(--hh-dim)}
.hh-burger{display:none;appearance:none;background:none;border:1px solid var(--hh-faint);border-radius:6px;width:42px;height:38px;cursor:pointer;position:relative;flex-shrink:0}
.hh-burger span,.hh-burger span::before,.hh-burger span::after{position:absolute;left:10px;width:20px;height:2px;background:var(--hh-white);transition:transform .25s,opacity .2s;content:''}
.hh-burger span{top:17px}.hh-burger span::before{top:-6px;left:0}.hh-burger span::after{top:6px;left:0}
.hh-burger[aria-expanded=true] span{background:transparent}
.hh-burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.hh-burger[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1500px){nav.hh-nav{padding:12px 24px}.hh-top{padding:10px 10px;font-size:13px}}
@media(max-width:1180px){.hh-search-btn span{display:none}.hh-search-btn kbd{display:none}}
@media(max-width:1050px){
  .hh-burger{display:block}
  .hh-menu{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 66px);background:#0a1628;border-bottom:1px solid rgba(201,168,76,.2);box-shadow:0 30px 60px rgba(0,0,0,.6);flex-direction:column;align-items:stretch;justify-content:flex-start;padding:12px 20px 32px;overflow-y:auto;transform:translateX(103%);transition:transform .25s;gap:14px}
  .hh-menu.open{transform:none}
  .hh-menu-list{flex-direction:column;align-items:stretch;gap:2px}
  .hh-top{width:100%;justify-content:space-between;font-size:16px;padding:14px 10px;border-bottom:1px solid var(--hh-faint);border-radius:0}
  .hh-sub{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;border:0;background:rgba(240,237,232,.03);border-radius:8px;min-width:0;padding:8px}
  .hh-has-sub.open>.hh-sub{display:block}
  .hh-sub-wide{display:grid;grid-template-columns:1fr;gap:0}
  .hh-sub-feature{border-left:0;padding-left:0;margin-top:10px}
  .hh-nav-right{flex-direction:column;align-items:stretch;gap:10px}
  .hh-nav-right .nav-cta{text-align:center;padding:14px}
  .hh-search-btn{justify-content:center;padding:12px}.hh-search-btn span{display:inline}
}
section[id],div[id],h2[id]{scroll-margin-top:86px}
.hh-nav-spacer{height:66px}

/* ---------- Suche ---------- */
.hh-search{position:fixed;inset:0;z-index:2000;background:rgba(6,14,28,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:90px 16px 20px}
.hh-search[hidden]{display:none}
.hh-search-box{width:min(760px,100%);background:#0e1b32;border:1px solid rgba(201,168,76,.3);border-radius:14px;box-shadow:0 40px 80px rgba(0,0,0,.6);overflow:hidden}
.hh-search-head{display:flex;align-items:center;gap:12px;padding:6px 8px 6px 18px;border-bottom:1px solid var(--hh-faint)}
.hh-search-head svg{flex-shrink:0;opacity:.7}
.hh-search-head input{flex:1;background:none;border:0;color:var(--hh-white);font:inherit;font-size:18px;padding:14px 0;outline:none;min-width:0}
.hh-search-head input::placeholder{color:var(--hh-dim)}
.hh-search-close{appearance:none;background:none;border:1px solid var(--hh-faint);color:var(--hh-dim);border-radius:6px;font:inherit;font-size:12px;padding:6px 10px;cursor:pointer}
.hh-search-close:hover{color:var(--hh-white);border-color:var(--hh-gold)}
.hh-search-terms{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 0}
.hh-search-terms:empty{display:none}
.hh-search-terms button{appearance:none;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.28);color:var(--hh-gold-light);border-radius:20px;font:inherit;font-size:12.5px;padding:4px 11px;cursor:pointer}
.hh-search-terms button:hover{background:rgba(201,168,76,.22)}
.hh-search-terms button b{font-weight:600;color:var(--hh-white)}
.hh-search-list{list-style:none;margin:0;padding:10px;max-height:min(56vh,520px);overflow-y:auto}
.hh-search-list li a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--hh-white)}
.hh-search-list li a:hover,.hh-search-list li.active a{background:rgba(201,168,76,.12)}
.hh-search-list .cat{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--hh-gold);width:92px}
.hh-search-list .t{font-size:15px;line-height:1.3}
.hh-search-list .t small{display:block;color:var(--hh-dim);font-size:12.5px;font-weight:300;margin-top:2px}
.hh-search-list mark{background:none;color:var(--hh-gold-light);font-weight:600}
.hh-search-list .go{color:var(--hh-dim);font-size:12px}
.hh-search-foot{padding:8px 18px 12px;font-size:11.5px;color:var(--hh-dim);display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--hh-faint)}
.hh-search-foot kbd{font-family:'IBM Plex Mono',monospace;border:1px solid var(--hh-faint);border-radius:3px;padding:0 5px;font-size:10px}
.hh-search-empty{padding:22px 18px;color:var(--hh-dim);font-size:14px}
@media(max-width:640px){.hh-search{padding:70px 8px 8px}.hh-search-list .cat{display:none}.hh-search-list li a{grid-template-columns:1fr auto}}

/* ---------- Infografik ---------- */
.ig{margin:0}
.ig-frame{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(201,168,76,.25);background:#0b1730;box-shadow:0 30px 60px rgba(0,0,0,.45);cursor:zoom-in;transform:perspective(1400px) rotateX(0) rotateY(0);transition:transform .35s ease,box-shadow .35s;isolation:isolate}
.ig-frame img{display:block;width:100%;height:auto;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1),transform .9s ease;transform:scale(1.04)}
.ig-frame.on img{clip-path:inset(0 0 0 0);transform:scale(1)}
.ig-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(226,196,122,.22) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.ig-frame.on::after{animation:igSweep 1.6s .4s ease-out forwards}
@keyframes igSweep{to{transform:translateX(120%)}}
.ig-frame::before{content:'';position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(201,168,76,0);transition:box-shadow .3s;z-index:2;pointer-events:none}
.ig-frame:hover::before{box-shadow:inset 0 0 0 1px rgba(201,168,76,.6),inset 0 0 60px rgba(201,168,76,.08)}
.ig-frame:hover{box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(201,168,76,.3)}
.ig-zoom{position:absolute;right:12px;bottom:12px;z-index:3;appearance:none;background:rgba(10,22,40,.85);border:1px solid rgba(201,168,76,.45);color:var(--hh-gold-light);font:inherit;font-size:12px;padding:7px 11px;border-radius:6px;cursor:zoom-in;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.ig-frame:hover .ig-zoom,.ig-frame:focus-within .ig-zoom{opacity:1;transform:none}
.ig figcaption{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--hh-dim);margin-top:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}
.ig figcaption b{color:var(--hh-gold);font-weight:500}
.ig-lightbox{position:fixed;inset:0;z-index:3000;background:rgba(4,10,20,.94);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;overflow:auto}
.ig-lightbox[hidden]{display:none}
.ig-lightbox img{max-width:100%;max-height:calc(100vh - 48px);border-radius:8px;box-shadow:0 40px 100px rgba(0,0,0,.8);transition:transform .3s;transform-origin:var(--ox,50%) var(--oy,50%)}
.ig-lightbox.zoom img{transform:scale(2);cursor:zoom-out;max-height:none}
.ig-lightbox .ig-close{position:fixed;top:16px;right:16px;appearance:none;background:rgba(10,22,40,.9);border:1px solid rgba(201,168,76,.45);color:var(--hh-white);font:inherit;font-size:13px;padding:8px 14px;border-radius:6px;cursor:pointer}
.ig-lightbox .ig-hint{position:fixed;bottom:14px;left:0;right:0;text-align:center;font-size:12px;color:var(--hh-dim);font-family:'IBM Plex Mono',monospace}

/* ---------- System-Fluss ---------- */
.flow{background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.08),transparent 60%),#0b1730;border:1px solid rgba(201,168,76,.2);border-radius:14px;padding:14px 8px 6px;overflow-x:auto;position:relative}
.flow svg{display:block;width:100%;min-width:760px;height:auto;font-family:'IBM Plex Sans',sans-serif}
.flow .fl-boundary{fill:rgba(201,168,76,.04);stroke:rgba(201,168,76,.45);stroke-width:1.5;stroke-dasharray:6 5;rx:16}
.flow .fl-boundary-lbl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;fill:#c9a84c;text-transform:uppercase}
.flow .fl-path{fill:none;stroke:rgba(240,237,232,.22);stroke-width:1.6;transition:stroke .25s,stroke-width .25s}
.flow .fl-path.hot{stroke:#e2c47a;stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(226,196,122,.7))}
.flow .fl-dot{fill:#e2c47a;filter:drop-shadow(0 0 4px rgba(226,196,122,.9))}
.flow .fl-dot.hot{fill:#fff}
.flow .fl-node{cursor:default}
.flow .fl-node rect{fill:#122142;stroke:rgba(240,237,232,.18);stroke-width:1;rx:10;transition:stroke .25s,fill .25s}
.flow .fl-node:hover rect,.flow .fl-node.hot rect{stroke:#e2c47a;fill:#17284f}
.flow .fl-node text{fill:#f0ede8;font-size:13px}
.flow .fl-node .ico{font-size:18px}
.flow .fl-node .sub{fill:rgba(240,237,232,.62);font-size:11px}
.flow .fl-core{fill:#0f1e3d;stroke:#c9a84c;stroke-width:1.5;rx:14}
.flow .fl-core-lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;fill:#c9a84c}
.flow .fl-step rect{fill:rgba(201,168,76,.1);stroke:rgba(201,168,76,.35);rx:7}
.flow .fl-step text{fill:#f0ede8;font-size:12px}
.flow .fl-step .k{font-family:'IBM Plex Mono',monospace;fill:#c9a84c;font-size:10px}
.flow .fl-pulse{fill:none;stroke:#c9a84c;stroke-width:1;opacity:0;transform-origin:center;animation:flPulse 3s infinite}
@keyframes flPulse{0%{opacity:.6;transform:scale(.96)}100%{opacity:0;transform:scale(1.08)}}
.flow .fl-cloud{opacity:.55}
.flow .fl-cloud text{fill:rgba(240,237,232,.55);font-size:11px;font-family:'IBM Plex Mono',monospace}
.flow .fl-cloud .x{stroke:#c0392b;stroke-width:3;stroke-linecap:round}
.flow .fl-cloud path.c{fill:none;stroke:rgba(240,237,232,.4);stroke-width:1.4;stroke-dasharray:4 4}
.flow-legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--hh-dim);margin-top:12px;min-height:22px}
.flow-legend b{color:var(--hh-white);font-weight:500}
.flow-legend .fl-msg{flex:1;min-width:240px}
.flow-legend .fl-key{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){.flow .fl-dot{display:none}.flow .fl-pulse{animation:none}.ig-frame img{clip-path:none;transform:none}.ig-frame::after{display:none}}

/* ---------- Schaltzentrale ---------- */
.sz{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
@media(max-width:1000px){.sz{grid-template-columns:1fr}}
.sz-stage{position:relative;aspect-ratio:1/1;max-width:720px;margin:0 auto;width:100%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(201,168,76,.12),rgba(10,22,40,0) 62%)}
.sz-stage::before{content:'';position:absolute;inset:-3%;border-radius:50%;background:radial-gradient(circle,transparent 58%,rgba(10,22,40,.35) 60%,transparent 62%),repeating-conic-gradient(from 0deg,rgba(201,168,76,.06) 0deg 0.6deg,transparent 0.6deg 15deg);pointer-events:none;animation:szSpin 120s linear infinite}
@keyframes szSpin{to{transform:rotate(360deg)}}
.sz-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sz-svg .orbit{fill:none;stroke:rgba(201,168,76,.25);stroke-width:1}
.sz-svg .orbit.dash{stroke-dasharray:2 7;stroke:rgba(240,237,232,.25)}
.sz-svg .spoke{stroke:rgba(240,237,232,.16);stroke-width:1.2;transition:stroke .3s,stroke-width .3s}
.sz-svg .spoke.hot{stroke:var(--c,#e2c47a);stroke-width:2.4;filter:drop-shadow(0 0 6px var(--c,#e2c47a))}
.sz-svg .spoke.dim{stroke:rgba(240,237,232,.07)}
.sz-svg .pk{fill:#e2c47a;filter:drop-shadow(0 0 4px rgba(226,196,122,.9))}
.sz-svg .pk.hot{fill:#fff;r:5}
.sz-hub{position:absolute;left:50%;top:50%;width:32%;height:32%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a3f6b,#0f1e3d 70%);border:2px solid var(--hh-gold);box-shadow:0 0 0 8px rgba(201,168,76,.08),0 0 60px rgba(201,168,76,.25),inset 0 0 30px rgba(201,168,76,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%;z-index:2}
.sz-hub::before{content:'';position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(201,168,76,.35);animation:szHub 3.2s ease-out infinite}
.sz-hub::after{content:'';position:absolute;inset:-28%;border-radius:50%;border:1px dashed rgba(240,237,232,.18);animation:szSpin 60s linear infinite reverse}
@keyframes szHub{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.sz-hub .k{font-family:'IBM Plex Mono',monospace;font-size:clamp(7px,1.1vw,10px);letter-spacing:.14em;text-transform:uppercase;color:var(--hh-gold);margin-bottom:4px}
.sz-hub .t{font-family:'DM Serif Display',serif;font-size:clamp(11px,1.9vw,19px);line-height:1.1;color:var(--hh-white)}
.sz-hub .s{font-size:clamp(8px,1.1vw,11px);color:var(--hh-dim);margin-top:5px;line-height:1.3}
.sz-node{position:absolute;left:calc(50% + var(--x)*1%);top:calc(50% + var(--y)*1%);width:17%;height:17%;transform:translate(-50%,-50%) scale(1);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d3057,#0e1b36 75%);border:2px solid var(--c);box-shadow:0 0 0 4px rgba(10,22,40,.9),0 0 22px color-mix(in srgb,var(--c) 45%,transparent);color:var(--hh-white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;appearance:none;font:inherit;padding:6%;z-index:3;transition:transform .32s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s,background .3s;text-align:center}
.sz-node .i{font-size:clamp(14px,2.6vw,26px);line-height:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.sz-node .n{font-size:clamp(8px,1.15vw,12px);font-weight:600;line-height:1.15;letter-spacing:.01em}
.sz-node .num{position:absolute;top:-6%;right:-4%;background:var(--c);color:#0a1628;font-family:'IBM Plex Mono',monospace;font-size:clamp(8px,1vw,11px);font-weight:700;width:1.9em;height:1.9em;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #0a1628}
.sz-node::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--c);opacity:0;transform:scale(.9)}
.sz-node:hover,.sz-node:focus-visible,.sz-node.active{transform:translate(-50%,-50%) scale(1.28);z-index:6;box-shadow:0 0 0 4px rgba(10,22,40,.9),0 0 46px color-mix(in srgb,var(--c) 70%,transparent),0 20px 40px rgba(0,0,0,.5);background:radial-gradient(circle at 50% 35%,#2a4174,#132447 75%);outline:none}
.sz-node:hover::after,.sz-node.active::after{animation:szRing 1.1s ease-out infinite}
@keyframes szRing{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
.sz-node.dim{opacity:.55;filter:saturate(.6)}
.sz-panel{background:linear-gradient(180deg,#0f1f3c,#0b1730);border:1px solid rgba(201,168,76,.3);border-radius:14px;padding:22px 24px;position:sticky;top:90px;box-shadow:0 30px 60px rgba(0,0,0,.4);min-height:420px}
.sz-panel::before{content:'';position:absolute;inset:8px;border-radius:10px;pointer-events:none;background:linear-gradient(90deg,var(--hh-gold) 0 12px,transparent 12px) top left/14px 1.5px no-repeat,linear-gradient(0deg,var(--hh-gold) 0 12px,transparent 12px) top left/1.5px 14px no-repeat,linear-gradient(270deg,var(--hh-gold) 0 12px,transparent 12px) top right/14px 1.5px no-repeat,linear-gradient(0deg,var(--hh-gold) 0 12px,transparent 12px) top right/1.5px 14px no-repeat,linear-gradient(90deg,var(--hh-gold) 0 12px,transparent 12px) bottom left/14px 1.5px no-repeat,linear-gradient(180deg,var(--hh-gold) 0 12px,transparent 12px) bottom left/1.5px 14px no-repeat,linear-gradient(270deg,var(--hh-gold) 0 12px,transparent 12px) bottom right/14px 1.5px no-repeat,linear-gradient(180deg,var(--hh-gold) 0 12px,transparent 12px) bottom right/1.5px 14px no-repeat;opacity:.7}
.sz-panel .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-gold);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sz-panel .k::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--pc,var(--hh-gold));box-shadow:0 0 10px var(--pc,var(--hh-gold));animation:szBlink 1.6s infinite}
@keyframes szBlink{50%{opacity:.35}}
.sz-panel h3{font-family:'DM Serif Display',serif;font-size:24px;line-height:1.15;color:var(--hh-white);margin:0 0 10px;font-weight:400}
.sz-panel .teile{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.sz-panel .teile span{font-size:11.5px;border:1px solid rgba(240,237,232,.2);border-radius:20px;padding:3px 9px;color:var(--hh-dim);font-family:'IBM Plex Mono',monospace}
.sz-panel .nutzen{font-size:14.5px;line-height:1.6;color:var(--hh-white);font-weight:300;margin:0 0 16px;border-left:2px solid var(--pc,var(--hh-gold));padding-left:12px}
.sz-panel .ucs{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.sz-panel .ucs a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:rgba(240,237,232,.04);border:1px solid rgba(240,237,232,.1);border-radius:8px;padding:9px 12px;text-decoration:none;color:var(--hh-white);font-size:13.5px;transition:border-color .2s,background .2s;animation:szIn .35s both}
.sz-panel .ucs a:hover{border-color:var(--hh-gold);background:rgba(201,168,76,.1)}
.sz-panel .ucs a .no{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--hh-gold)}
.sz-panel .ucs a small{display:block;color:var(--hh-dim);font-size:11.5px;font-weight:300}
.sz-panel .ucs a .p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--hh-dim);white-space:nowrap}
@keyframes szIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.sz-panel .ucs li:nth-child(2) a{animation-delay:.06s}.sz-panel .ucs li:nth-child(3) a{animation-delay:.12s}.sz-panel .ucs li:nth-child(4) a{animation-delay:.18s}.sz-panel .ucs li:nth-child(5) a{animation-delay:.24s}
.sz-panel .btn-primary{width:100%;text-align:center;font-size:14px;padding:12px 16px}
.sz-panel .hint{font-size:12px;color:var(--hh-dim);margin-top:10px;line-height:1.5}
.sz-panel.idle h3{font-size:20px}
.sz-panel .idle-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sz-panel .idle-list button{appearance:none;background:rgba(240,237,232,.04);border:1px solid rgba(240,237,232,.12);border-radius:8px;color:var(--hh-white);font:inherit;font-size:12.5px;padding:8px 10px;cursor:pointer;text-align:left;display:flex;gap:8px;align-items:center;transition:border-color .2s}
.sz-panel .idle-list button:hover{border-color:var(--c)}
.sz-panel .idle-list button i{font-style:normal;width:22px;text-align:center}
.sz-status{position:absolute;left:2%;top:2%;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--hh-gold);display:flex;align-items:center;gap:8px;z-index:4;pointer-events:none}
.sz-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#3fb59a;box-shadow:0 0 8px #3fb59a;animation:szBlink 1.2s infinite}
@media(max-width:760px){.sz-status{position:static;margin:0 0 10px;justify-content:center}.sz-stage{margin-top:4px}}
@media(max-width:520px){.sz-node .n{display:none}.sz-node{width:15%;height:15%}.sz-hub .s{display:none}}

/* ---------- Glossar ---------- */
.gl-bar{position:sticky;top:66px;z-index:20;background:var(--hh-navy);padding:14px 0 12px;margin:0 0 18px;border-bottom:1px solid rgba(201,168,76,.14)}
.gl-suche{display:flex;align-items:center;gap:10px;background:var(--hh-navy);border:1px solid rgba(201,168,76,.28);border-radius:10px;padding:0 14px;margin-bottom:14px}
.gl-suche:focus-within{border-color:var(--hh-gold);box-shadow:0 0 0 3px rgba(201,168,76,.12)}
.gl-suche svg{color:var(--hh-gold);flex-shrink:0;opacity:.85}
.gl-suche input{flex:1;background:none;border:0;color:var(--hh-white);font:inherit;font-size:16px;padding:14px 0;outline:none;min-width:0}
.gl-suche input::placeholder{color:rgba(240,237,232,.45)}
.gl-suche input::-webkit-search-cancel-button{display:none}
.gl-suche button{appearance:none;background:none;border:0;color:var(--hh-dim);font:inherit;font-size:16px;cursor:pointer;padding:6px 2px}
.gl-suche button:hover{color:var(--hh-gold)}
.gl-kats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.gl-chip{appearance:none;background:rgba(240,237,232,.05);border:1px solid rgba(240,237,232,.14);color:var(--hh-dim);font:inherit;font-size:13px;padding:7px 13px;border-radius:20px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;display:flex;align-items:center;gap:7px}
.gl-chip b{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;opacity:.7}
.gl-chip:hover{color:var(--hh-white);border-color:rgba(201,168,76,.5)}
.gl-chip.on{background:rgba(201,168,76,.16);border-color:var(--hh-gold);color:var(--hh-gold-light)}
.gl-az{display:flex;flex-wrap:wrap;gap:4px}
.gl-buchstabe{appearance:none;background:none;border:1px solid rgba(240,237,232,.12);color:var(--hh-dim);font-family:'IBM Plex Mono',monospace;font-size:12px;width:28px;height:28px;border-radius:5px;cursor:pointer;transition:border-color .2s,color .2s}
.gl-buchstabe:hover:not(:disabled){border-color:var(--hh-gold);color:var(--hh-gold)}
.gl-buchstabe:disabled{opacity:.25;cursor:default}
.gl-count{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--hh-dim);margin:10px 0 0}
.gl-liste{display:grid;gap:14px}
.gl-item{background:var(--hh-navy-mid);border:1px solid rgba(201,168,76,.12);border-left:3px solid rgba(201,168,76,.35);border-radius:0 10px 10px 0;padding:24px 28px;scroll-margin-top:230px}
.gl-item:target,.gl-item.ziel{border-color:var(--hh-gold);border-left-color:var(--hh-gold);background:var(--hh-navy-light);box-shadow:0 0 0 1px rgba(201,168,76,.3)}
.gl-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.gl-head h3{font-family:'DM Serif Display',serif;font-size:23px;font-weight:400;color:var(--hh-white);margin:0;line-height:1.2}
.gl-anchor{color:inherit;text-decoration:none}
.gl-anchor:hover{color:var(--hh-gold)}
.gl-anchor::after{content:'#';margin-left:8px;color:var(--hh-gold);opacity:0;font-family:'IBM Plex Mono',monospace;font-size:15px;transition:opacity .2s}
.gl-head h3:hover .gl-anchor::after{opacity:.6}
.gl-kat{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:4px;white-space:nowrap;border:1px solid}
.gl-kat-recht{color:#d9a534;border-color:rgba(217,165,52,.4);background:rgba(217,165,52,.08)}
.gl-kat-sicher{color:#e0703a;border-color:rgba(224,112,58,.4);background:rgba(224,112,58,.08)}
.gl-kat-technik{color:#5b8def;border-color:rgba(91,141,239,.4);background:rgba(91,141,239,.08)}
.gl-kat-betrieb{color:#3fb59a;border-color:rgba(63,181,154,.4);background:rgba(63,181,154,.08)}
.gl-kat-geschaeft{color:#a06ad8;border-color:rgba(160,106,216,.4);background:rgba(160,106,216,.08)}
.gl-alt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:rgba(240,237,232,.45);margin:0 0 12px}
.gl-def{font-size:15.5px;line-height:1.7;color:var(--hh-dim);font-weight:300}
.gl-def b{color:var(--hh-white);font-weight:500}
.gl-b,.gl-h{margin-top:16px;padding-left:14px;border-left:2px solid rgba(201,168,76,.35)}
.gl-h{border-left-color:rgba(63,181,154,.5)}
.gl-b em,.gl-h em{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--hh-gold);font-style:normal;margin-bottom:6px}
.gl-h em{color:#3fb59a}
.gl-b p,.gl-h p{font-size:15px;line-height:1.7;color:var(--hh-dim);font-weight:300;margin:0}
.gl-b p b,.gl-h p b{color:var(--hh-white);font-weight:500}
.gl-q{font-size:12.5px;line-height:1.6;color:rgba(240,237,232,.5);margin:16px 0 0;padding:10px 12px;background:rgba(240,237,232,.03);border-radius:6px;font-weight:300}
.gl-q b{color:var(--hh-dim);font-weight:500}
.gl-see{font-size:13px;color:var(--hh-dim);margin:14px 0 0;line-height:1.8}
.gl-see span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,237,232,.4);margin-right:6px}
.gl-see a{color:var(--hh-gold);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.25)}
.gl-see a:hover{border-bottom-color:var(--hh-gold)}
.gl-leer{background:var(--hh-navy-mid);border:1px solid rgba(201,168,76,.2);border-radius:10px;padding:24px 26px;font-size:15px;color:var(--hh-dim);font-weight:300}
.gl-hinweis{font-size:12.5px;color:rgba(240,237,232,.45);margin-top:22px;line-height:1.6;font-weight:300}
@media(max-width:640px){.gl-bar{position:static;padding:12px 0 8px}.gl-item{padding:20px 18px}.gl-head h3{font-size:20px}.gl-az{display:none}}

/* ---------- Interaktives Schutzschild (#solution) ---------- */
.ig-wrap{position:relative}
.ig-toggle{display:flex;flex-direction:column;gap:6px;background:var(--hh-navy-mid);border:1px solid rgba(201,168,76,.2);border-radius:10px;padding:6px;margin-bottom:18px}
@media(min-width:520px){.ig-toggle{flex-direction:row;gap:0}}
.ig-tg{flex:1;appearance:none;background:none;border:1px solid transparent;border-radius:7px;color:var(--hh-dim);font:inherit;font-size:13px;padding:10px 14px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.ig-tg:hover{color:var(--hh-white)}
.ig-tg.on{color:var(--hh-white);border-color:var(--hh-gold);background:rgba(201,168,76,.12);box-shadow:0 0 20px -8px rgba(201,168,76,.8)}
.ig-wrap[data-modus=cloud] .ig-tg.on{border-color:#c0392b;background:rgba(192,57,43,.14);box-shadow:0 0 20px -8px rgba(192,57,43,.9)}
.ig-svg{width:100%;height:auto;overflow:visible}
/* Server */
.ig-server rect{fill:var(--hh-navy-light);stroke:var(--hh-gold);stroke-width:1.5}
.ig-server .ig-bar{fill:var(--hh-gold);stroke:none;opacity:.8}
.ig-server .ig-bar.dim{opacity:.3}.ig-server .ig-bar.dim2{opacity:.2}
.ig-led{fill:#1e7a4a;stroke:none;transition:fill .4s}
.ig-wrap[data-modus=cloud] .ig-led{fill:#c0392b}
.ig-label{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--hh-gold);opacity:.6;letter-spacing:3px}
/* Ring + Stacheln */
.ig-ring{fill:rgba(201,168,76,.04);stroke:var(--hh-gold);stroke-width:2;transition:stroke-dasharray .4s,opacity .4s,stroke-width .4s,fill .4s}
.ig-wrap[data-modus=cloud] .ig-ring{stroke-dasharray:9 12;opacity:.4;stroke-width:1;fill:transparent}
.ig-ring-puls{fill:none;stroke:var(--hh-gold);stroke-width:1;opacity:0;transform-origin:220px 220px;animation:igPuls 3s ease-out infinite}
.ig-wrap[data-modus=cloud] .ig-ring-puls{animation:none}
@keyframes igPuls{0%{opacity:.45;transform:scale(.97)}100%{opacity:0;transform:scale(1.1)}}
.ig-stachel{stroke:var(--hh-gold);stroke-width:2;stroke-linecap:round;opacity:.7;transform-origin:220px 220px;transition:opacity .35s,transform .45s;transition-delay:calc(var(--i)*20ms)}
.ig-wrap[data-modus=cloud] .ig-stachel{opacity:0;transform:scale(.93)}
.ig-schloss circle{fill:var(--hh-navy);stroke:var(--hh-gold);stroke-width:2}
.ig-schloss rect{fill:var(--hh-gold)}
.ig-schloss path{stroke:var(--hh-gold);stroke-width:2}
.ig-schloss{opacity:1;transition:opacity .35s,transform .35s;transform-origin:220px 88px}
.ig-wrap[data-modus=cloud] .ig-schloss{opacity:0;transform:scale(.5)}
/* Externe Ziele */
.ig-ziel circle{fill:rgba(192,57,43,.1);stroke:#c0392b;stroke-width:1.4;stroke-dasharray:4 4}
.ig-ziel-ico{font-size:14px;fill:var(--hh-dim)}
.ig-ziel-lbl{font-size:10.5px;fill:rgba(192,57,43,.85);font-family:'IBM Plex Mono',monospace}
.ig-ziel-x{opacity:0;transition:opacity .35s}
.ig-ziel-x line{stroke:var(--hh-gold);stroke-width:2.5;stroke-linecap:round}
.ig-aussen{transition:opacity .4s}
.ig-wrap[data-modus=igel] .ig-aussen{opacity:.32}
.ig-wrap[data-modus=igel] .ig-ziel circle{stroke:rgba(240,237,232,.35)}
.ig-wrap[data-modus=igel] .ig-ziel-lbl{fill:rgba(240,237,232,.4)}
.ig-wrap[data-modus=igel] .ig-ziel-x{opacity:1}
/* Datenwege */
.ig-leck{fill:none;stroke:rgba(192,57,43,.45);stroke-width:1.4;stroke-dasharray:5 6}
.ig-abfluss{opacity:1;transition:opacity .4s}
.ig-wrap[data-modus=igel] .ig-abfluss{opacity:0;pointer-events:none}
.ig-punkt-raus{fill:#e0703a;filter:drop-shadow(0 0 4px rgba(224,112,58,.9))}
.ig-innen{fill:none;stroke:rgba(201,168,76,.3);stroke-width:1.3;stroke-dasharray:4 5}
.ig-punkt-innen{fill:var(--hh-gold-light);filter:drop-shadow(0 0 4px rgba(226,196,122,.9))}
.ig-innenwege{opacity:1;transition:opacity .4s}
.ig-wrap[data-modus=cloud] .ig-innenwege{opacity:0}
/* Hotspots */
.ig-hotspot{cursor:pointer}
.ig-hotspot-kreis{fill:var(--hh-navy);stroke:var(--hh-gold);stroke-width:2;transition:transform .25s,stroke .25s}
.ig-hotspot{transform-box:fill-box}
.ig-hotspot-puls{fill:none;stroke:var(--hh-gold);stroke-width:1.2;opacity:0;transform-origin:center;animation:igPuls 2.6s ease-out infinite}
.ig-hotspot-ico path{fill:none;stroke:var(--hh-gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ig-hotspot-lbl{font-size:10.5px;fill:rgba(201,168,76,.85);font-family:'IBM Plex Sans',sans-serif;font-weight:500}
.ig-hotspot:hover .ig-hotspot-kreis,.ig-hotspot:focus-visible .ig-hotspot-kreis,.ig-hotspot.on .ig-hotspot-kreis{stroke:var(--hh-gold-light);filter:drop-shadow(0 0 10px rgba(201,168,76,.8))}
.ig-hotspot.on .ig-hotspot-kreis{fill:var(--hh-navy-light)}
.ig-hotspot:focus{outline:none}
.ig-hotspot:focus-visible .ig-hotspot-kreis{stroke:var(--hh-gold-light);stroke-width:3}
.ig-wrap[data-modus=cloud] .ig-hotspot-kreis{stroke:rgba(240,237,232,.4)}
.ig-wrap[data-modus=cloud] .ig-hotspot-ico path{stroke:rgba(240,237,232,.5)}
.ig-wrap[data-modus=cloud] .ig-hotspot-lbl{fill:rgba(240,237,232,.4)}
.ig-wrap[data-modus=cloud] .ig-hotspot-puls{animation:none}
/* Status */
.ig-status{display:flex;align-items:center;gap:10px;margin:14px 0 6px;padding:11px 14px;border-radius:9px;font-size:14px;border:1px solid var(--hh-gold);background:rgba(201,168,76,.09);color:var(--hh-white);transition:border-color .3s,background .3s}
.ig-wrap[data-modus=cloud] .ig-status{border-color:#c0392b;background:rgba(192,57,43,.12)}
.ig-dot{width:9px;height:9px;border-radius:50%;background:var(--hh-gold);box-shadow:0 0 10px var(--hh-gold);animation:igBlink 1.6s infinite;flex-shrink:0}
.ig-wrap[data-modus=cloud] .ig-dot{background:#c0392b;box-shadow:0 0 10px #c0392b}
@keyframes igBlink{50%{opacity:.3}}
.ig-hint{font-size:12.5px;color:var(--hh-dim);margin:0}
/* Hervorhebung des zugehörigen Schrittes */
.step-item{transition:border-color .25s,background .25s,transform .25s}
.step-item.step-hover{border-color:rgba(201,168,76,.45)}
.step-item.step-aktiv{border-color:var(--hh-gold)!important;background:rgba(201,168,76,.07);box-shadow:0 0 0 1px rgba(201,168,76,.35)}
@media(prefers-reduced-motion:reduce){.ig-punkt,.ig-ring-puls,.ig-hotspot-puls,.ig-dot{animation:none;display:none}.ig-status .ig-dot{display:block;animation:none}}

/* ---------- Vergleichs-Simulator (#vergleich) ---------- */
.sim-steuer{background:var(--hh-navy-mid);border:1px solid rgba(201,168,76,.16);border-radius:14px;padding:22px 24px;margin-bottom:22px}
.sim-schritt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,237,232,.42);margin:0 0 10px}
.sim-tabs,.sim-fragen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.sim-tab,.sim-frage{appearance:none;background:rgba(240,237,232,.04);border:1px solid rgba(240,237,232,.14);border-radius:10px;color:var(--hh-dim);font:inherit;font-size:13px;padding:9px 14px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;text-align:left}
.sim-frage{font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.sim-tab:hover,.sim-frage:hover{color:var(--hh-white);border-color:rgba(201,168,76,.5)}
.sim-tab.on{background:rgba(201,168,76,.14);border-color:var(--hh-gold);color:var(--hh-white)}
.sim-frage.on{background:rgba(201,168,76,.1);border-color:var(--hh-gold);color:var(--hh-white)}
.sim-start{display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(240,237,232,.1);padding-top:18px}
@media(min-width:700px){.sim-start{flex-direction:row;align-items:center}}
.sim-prompt{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:var(--hh-navy);border:1px solid rgba(240,237,232,.16);border-radius:10px;padding:12px 15px}
.sim-prompt span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,237,232,.35);flex-shrink:0}
.sim-prompt b{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--hh-white);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#simRun{flex-shrink:0;white-space:nowrap}
.sim-split{display:grid;gap:18px}
@media(min-width:960px){.sim-split{grid-template-columns:1fr 1fr;align-items:stretch}}
.sim-panel{display:flex;flex-direction:column;border-radius:14px;border:1px solid;overflow:hidden}
.sim-cloud{border-color:rgba(192,57,43,.3);background:rgba(192,57,43,.04)}
.sim-lokal{border-color:rgba(201,168,76,.42);background:rgba(201,168,76,.05);box-shadow:0 0 50px -22px rgba(201,168,76,.8)}
.sim-panel header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid}
.sim-cloud header{border-color:rgba(192,57,43,.22)}
.sim-lokal header{border-color:rgba(201,168,76,.28)}
.sim-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;border:1px solid}
.sim-cloud .sim-ico{border-color:rgba(192,57,43,.4);background:rgba(192,57,43,.1)}
.sim-lokal .sim-ico{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.1)}
.sim-panel header b{display:block;font-size:15px;color:var(--hh-white);font-weight:600}
.sim-panel header span:last-child{font-size:11.5px;color:var(--hh-dim)}
.sim-cloud header div span:last-child{color:rgba(192,57,43,.9)}
.sim-lokal header div span:last-child{color:rgba(201,168,76,.95)}
.sim-body{flex:1;padding:20px}
.sim-leer,.sim-warte{font-size:14px;color:rgba(240,237,232,.4);margin:0;font-style:italic}
.sim-warte{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:13px;animation:igBlink 1.2s infinite}
.sim-antwort{font-size:14.5px;line-height:1.7;color:var(--hh-white);margin:0;font-weight:300;display:inline}
.sim-antwort.dim{color:var(--hh-dim)}
.sim-caret{display:inline-block;width:2px;height:15px;background:var(--hh-gold);vertical-align:-2px;margin-left:2px;animation:igBlink .6s infinite}
.sim-cloud .sim-caret{background:#c0392b}
.sim-hinweis{margin:16px 0 0;padding:11px 13px;border:1px solid rgba(192,57,43,.28);background:rgba(192,57,43,.06);border-radius:8px;font-size:12.5px;line-height:1.6;color:rgba(240,237,232,.75)}
.sim-quellen{margin-top:16px}
.sim-quellen-kopf{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-gold);margin:0 0 8px}
.sim-quellen ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sim-quellen li{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--hh-dim);background:var(--hh-navy);border:1px solid rgba(240,237,232,.1);border-radius:7px;padding:7px 11px;overflow:hidden;text-overflow:ellipsis;animation:simIn .3s both}
.sim-quellen li:nth-child(2){animation-delay:.07s}.sim-quellen li:nth-child(3){animation-delay:.14s}.sim-quellen li:nth-child(4){animation-delay:.21s}
@keyframes simIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sim-panel footer{display:flex;flex-wrap:wrap;gap:7px;padding:15px 20px;border-top:1px solid}
.sim-cloud footer{border-color:rgba(192,57,43,.22)}
.sim-lokal footer{border-color:rgba(201,168,76,.28)}
.sim-badge{font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:4px 9px;border-radius:6px;border:1px solid}
.sim-badge.risk{border-color:rgba(192,57,43,.45);background:rgba(192,57,43,.1);color:#e08a80}
.sim-badge.warn{border-color:rgba(224,112,58,.45);background:rgba(224,112,58,.1);color:#e0a070}
.sim-badge.safe{border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.1);color:var(--hh-gold-light)}
@media(prefers-reduced-motion:reduce){.sim-warte,.sim-caret,.sim-quellen li{animation:none}}
/* Lösungs-Sektion: Grafik oben ausrichten und beim Lesen der Schritte mitlaufen lassen */
@media(min-width:901px){
  .solution-layout{align-items:start!important}
  .solution-visual{position:sticky;top:90px}
}
.igel-container{aspect-ratio:auto!important;max-width:460px!important;margin:0 auto}
.ig-wrap{max-width:460px;margin:0 auto}

/* ---------- v11: Sektionsrhythmus für die nachträglich ergänzten Abschnitte ----------
   Die Startseite gibt jeder Sektion ihre Abstände über eine eigene ID-Regel.
   Neu ergänzte Sektionen hatten deshalb padding:0 und liefen ineinander. */
#vergleich{background:var(--navy-mid);padding:100px 0;border-top:1px solid rgba(201,168,76,0.1)}
#souveraenitaet{background:var(--navy);padding:100px 0;border-top:1px solid rgba(201,168,76,0.1)}
#digital-transformation{background:var(--navy-mid);padding:100px 0;border-top:1px solid rgba(201,168,76,0.1)}
@media(max-width:768px){#vergleich,#souveraenitaet,#digital-transformation{padding:64px 0}}
/* Abschluss-Kasten einer Sektion darf nicht am nächsten Abschnitt kleben */
#vergleich .sov{margin-bottom:0}

/* ---------- v11: Maskottchen nahtlos in den Hero einbetten ----------
   Das Video ist ein deckendes Rechteck in Navy. Farblich stimmt es exakt mit dem
   Hero überein (gemessen: 10,22,40), sichtbar war allein das fehlende Raster:
   .hero-grid lag UNTER dem Video und brach an dessen Kante ab. Das Raster liegt
   jetzt darüber und läuft durch – dadurch verschwindet die Kante vollständig.
   Bewusst kein filter/mask/blend auf dem <video>: das erzeugt in Chrome Flackern. */
#hero .hero-grid{z-index:2}
#hero .hero-inner{z-index:3}
/* Fazit-Kasten unter dem Vergleich (eigene Klasse, damit sie nicht mit der
   .sov-Regel der Unterseiten kollidiert) */
.sim-fazit{margin-top:26px;border-left:3px solid var(--hh-gold);border-radius:0 10px 10px 0;background:var(--hh-navy);padding:18px 22px;font-size:14.5px;line-height:1.7;color:var(--hh-dim);font-weight:300}
.sim-fazit b{color:var(--hh-white);font-weight:600}
.sim-fazit a{color:var(--hh-gold);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.3);white-space:nowrap}
.sim-fazit a:hover{border-bottom-color:var(--hh-gold)}

/* ---------- Terminwahl (danke.php) ---------- */
.tw{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:22px}
.tw-tag{border:1px solid rgba(240,237,232,.12);border-radius:12px;padding:16px 16px 14px;background:rgba(255,255,255,.025)}
.tw-tag h3{font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;margin-bottom:12px;color:var(--hh-gold,#c9a84c)}
.tw-slots{display:flex;flex-wrap:wrap;gap:7px}
.tw-slot{display:inline-flex;align-items:center;justify-content:center;min-width:66px;padding:9px 10px;border:1px solid rgba(201,168,76,.28);border-radius:7px;background:rgba(201,168,76,.06);color:#e2c47a;text-decoration:none;font:600 13.5px/1 'IBM Plex Mono',monospace;transition:background .18s,transform .18s,border-color .18s}
.tw-slot:hover,.tw-slot:focus-visible{background:#c9a84c;color:#0a1628;border-color:#c9a84c;transform:translateY(-2px);outline:none}
@media(max-width:520px){.tw{grid-template-columns:1fr}.tw-slot{min-width:72px;padding:11px 10px}}

/* v14: Vergleichstabelle auf schmalen Displays ohne Überlauf */
@media(max-width:520px){table.cmp{font-size:13px;table-layout:fixed}table.cmp th,table.cmp td{padding:10px 6px;overflow-wrap:anywhere;hyphens:auto}table.cmp th{letter-spacing:.04em}}