/* CyberSec42 Kopf- und Fußzeile ("chrome"), Stand 28.10.2026.
   Vorlage: vercel.com (Mega-Menü als volle Fläche mit Spalten-Labels, Footer-Spaltenraster,
   Mobil-Panel mit großen Zeilen und CTA unten), dunkel umgesetzt wie linear.app (solide Leiste
   mit Haarlinie), Mono-Labels und Fußleiste nach trailofbits.com.
   Bewusst ohne backdrop-filter, Glow, Verlaufsschrift und Badge-Pillen.
   Alle Regeln hängen an header.cx / .cx-foot, damit site.css, pages.css, legal.css,
   nav.css und die Inline-Styles der Startseiten nicht durchschlagen. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibmplexmono-400.woff2') format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibmplexmono-500.woff2') format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibmplexmono-600.woff2') format('woff2')}

:root{
  --cx-bg:#040605;          /* Leiste, Panels, Footer */
  --cx-bg-2:#0a0d0b;        /* Hover-Flächen */
  --cx-line:rgba(255,255,255,.10);
  --cx-line-2:rgba(255,255,255,.16);
  --cx-text:#f2f4f1;        /* 18.6:1 auf --cx-bg */
  --cx-soft:#b9beb7;        /* 10.6:1 */
  --cx-mute:#8c928a;        /* 6.3:1, nur Mono-Labels und Kleintext */
  --cx-mint:#34d399;        /* 11.4:1 */
  --cx-mint-hi:#6ee7b7;
  --cx-ink:#03140d;         /* Schrift auf Mint */
  --cx-max:1220px;
  --cx-gut:clamp(16px,4vw,40px);
  --cx-gut-d:40px;
  --cx-h:72px;
  --cx-mono:Inter,system-ui,-apple-system,sans-serif;
  --cx-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (max-width:920px){:root{--cx-h:64px}}

/* Anker unter der festen Leiste nicht verstecken */
:target{scroll-margin-top:calc(var(--cx-h) + 16px)}

/* ---------- Skip-Link ---------- */
.cx-skip{position:fixed;left:12px;top:-80px;z-index:1000;background:var(--cx-mint);color:var(--cx-ink);font:600 14px/1 var(--cx-sans);padding:14px 18px;border-radius:10px;text-decoration:none;transition:top .15s}
.cx-skip:focus,.cx-skip:focus-visible{top:12px;outline:2px solid #fff;outline-offset:2px}

/* ---------- Leiste ---------- */
header.cx{position:fixed;top:0;left:0;right:0;z-index:90;margin:0;padding:0;border:0;
  background:var(--cx-bg);border-bottom:1px solid var(--cx-line);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:var(--cx-sans);line-height:1.2;transition:background-color .2s ease,border-color .2s ease}
/* Mit JS: oben auf der Seite durchsichtig, sobald gescrollt oder ein Menü offen ist, solide */
html.cx-js header.cx:not(.is-scrolled):not(.is-open):not(.cx-flow){background:transparent;border-bottom-color:transparent}
/* Rechtsseiten: Leiste liegt im Fluss (die Seiten haben keinen Abstand für eine feste Leiste) */
header.cx.cx-flow{position:sticky}

header.cx *,header.cx *::before,header.cx *::after{box-sizing:border-box}
header.cx a{text-decoration:none}
header.cx ul{list-style:none;margin:0;padding:0}
header.cx li,.cx-foot li{margin:0;padding:0;font-size:inherit;line-height:inherit}
header.cx p{margin:0}

header.cx .cx-bar{display:flex;align-items:center;gap:8px;height:var(--cx-h);max-width:var(--cx-max);margin:0 auto;padding:0 var(--cx-gut);justify-content:flex-start}

/* Logo */
header.cx .cx-logo{display:inline-flex;align-items:center;gap:10px;color:var(--cx-text);font:600 17px/1 var(--cx-sans);letter-spacing:-.015em;flex:none;margin-right:28px;min-height:44px}
header.cx .cx-logo svg{filter:none;animation:none;flex:none}
header.cx .cx-logo .m{width:24px;height:24px;display:grid;place-items:center}
header.cx .cx-logo b{font-weight:600;color:var(--cx-mint)}

/* Desktop-Navigation */
header.cx .cx-nav>ul{display:flex;align-items:center;gap:4px}
header.cx .cx-nav>ul>li{position:static;display:flex;align-items:center}
header.cx .cx-nav a.cx-top,header.cx .cx-trg{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border-radius:8px;
  font:450 14.5px/1 var(--cx-sans);letter-spacing:-.005em;color:var(--cx-soft);background:none;border:0;cursor:pointer;transition:color .15s,background-color .15s}
header.cx .cx-nav a.cx-top:hover,header.cx .cx-trg:hover,header.cx .cx-trg[aria-expanded="true"]{color:var(--cx-text);background:rgba(255,255,255,.05)}
header.cx .cx-nav a.cx-top[aria-current]{color:var(--cx-text)}
header.cx .cx-nav a.cx-top[aria-current]::after,header.cx .cx-trg.cx-cur::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--cx-mint);margin-left:2px}
header.cx .cx-trg svg{transition:transform .2s ease;opacity:.75}
header.cx .cx-trg[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Mega-Menü: volle Breite unter der Leiste */
header.cx .cx-mega{position:absolute;left:0;right:0;top:100%;background:var(--cx-bg);border-top:1px solid var(--cx-line);border-bottom:1px solid var(--cx-line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
/* Ohne JS: Hover und Tastaturfokus öffnen. Mit JS steuert aria-expanded. */
html:not(.cx-js) header.cx .cx-has:hover .cx-mega,
html:not(.cx-js) header.cx .cx-has:focus-within .cx-mega,
header.cx .cx-trg[aria-expanded="true"]+.cx-mega{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
header.cx .cx-mega-in{max-width:var(--cx-max);margin:0 auto;padding:36px var(--cx-gut) 40px;display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:48px}
header.cx .cx-mega-intro{display:flex;flex-direction:column;gap:14px;padding-top:4px}
header.cx .cx-mega-intro p{color:var(--cx-soft);font:400 15px/1.55 var(--cx-sans);max-width:30ch}
header.cx .cx-more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cx-mint);font:500 14.5px/1 var(--cx-sans);margin-top:auto}
header.cx .cx-more:hover{color:var(--cx-mint-hi)}
header.cx .cx-more span{transition:transform .2s ease}
header.cx .cx-more:hover span{transform:translateX(3px)}
header.cx .cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--cx-line);border:1px solid var(--cx-line);border-radius:14px;overflow:hidden}
header.cx .cx-grid li{background:var(--cx-bg)}
header.cx .cx-grid a{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:6px;padding:22px 48px 22px 22px;height:100%;color:var(--cx-text);transition:background-color .15s}
header.cx .cx-grid a:hover{background:var(--cx-bg-2)}
header.cx .cx-no{grid-row:1/3;font:500 12px/1.6 Inter,system-ui,-apple-system,sans-serif;color:var(--cx-mute);letter-spacing:0;padding-top:1px}
header.cx .cx-grid b{font:550 16px/1.3 var(--cx-sans);letter-spacing:-.01em;color:var(--cx-text);transition:color .15s}
header.cx .cx-grid a:hover b{color:var(--cx-mint)}
header.cx .cx-grid .cx-d{font:400 14px/1.5 var(--cx-sans);color:var(--cx-soft)}
header.cx .cx-grid a::after{content:"\2192";position:absolute;right:22px;top:21px;color:var(--cx-mute);font:400 16px/1 var(--cx-sans);transition:transform .2s ease,color .2s ease}
header.cx .cx-grid a:hover::after{transform:translateX(3px);color:var(--cx-mint)}
header.cx .cx-tag{display:inline-block;margin-left:8px;font:500 12px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:0;color:var(--cx-mute);vertical-align:2px}

/* Mono-Label (gemeinsam) */
.cx-lbl{font:500 12px/1.4 Inter,system-ui,-apple-system,sans-serif !important;letter-spacing:0 !important;color:var(--cx-mute) !important;margin:0 !important}

/* Rechte Seite */
header.cx .cx-right{margin-left:auto;display:flex;align-items:center;gap:12px}
header.cx .lang.cx-lang{display:flex;align-items:center;gap:0;margin:0;padding:3px;border:1px solid var(--cx-line-2);border-radius:9px;font:500 12px/1 Inter,system-ui,-apple-system,sans-serif;letter-spacing:0;background:none}
header.cx .cx-lang a,header.cx .cx-lang button{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--cx-soft);font:inherit;letter-spacing:inherit;cursor:pointer;transition:color .15s,background-color .15s}
header.cx .cx-lang a:hover,header.cx .cx-lang button:hover{color:var(--cx-text)}
header.cx .cx-lang a.on,header.cx .cx-lang button.on{background:rgba(52,211,153,.14);color:var(--cx-mint)}

/* CTA */
header.cx .cx-cta,.cx-foot .cx-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:10px;border:0;
  background:var(--cx-mint);color:var(--cx-ink) !important;font:600 14px/1 var(--cx-sans);letter-spacing:-.005em;white-space:nowrap;box-shadow:none;filter:none;transition:background-color .15s}
header.cx .cx-cta:hover,.cx-foot .cx-cta:hover{background:var(--cx-mint-hi);transform:none}
header.cx .cx-cta .cx-arr,.cx-foot .cx-cta .cx-arr{transition:transform .2s ease}
header.cx .cx-cta:hover .cx-arr,.cx-foot .cx-cta:hover .cx-arr{transform:translateX(3px)}
header.cx .cx-cta-s{display:none}

/* ---------- Mobil ---------- */
header.cx .cx-bar .cx-m{display:none;position:static;margin:0}
header.cx .cx-m>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--cx-line-2);border-radius:10px;cursor:pointer;color:var(--cx-text);background:none}
header.cx .cx-m>summary::-webkit-details-marker{display:none}
header.cx .cx-m .cx-burger{position:relative;display:block;width:18px;height:12px;background:none;border-radius:0;font-style:normal}
header.cx .cx-burger::before,header.cx .cx-burger::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .2s ease,top .2s ease}
header.cx .cx-burger::before{top:2px}
header.cx .cx-burger::after{top:9px}
header.cx .cx-m[open]>summary{border-color:var(--cx-mint)}
header.cx .cx-m[open] .cx-burger::before{top:5.5px;transform:rotate(45deg)}
header.cx .cx-m[open] .cx-burger::after{top:5.5px;transform:rotate(-45deg)}

header.cx .cx-panel{position:fixed;left:0;right:0;top:var(--cx-h);bottom:0;z-index:89;background:var(--cx-bg);border-top:1px solid var(--cx-line);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;padding:22px var(--cx-gut) calc(24px + env(safe-area-inset-bottom))}
header.cx .cx-panel .cx-lbl{display:block;margin:0 0 6px !important}
header.cx .cx-plist{border-top:1px solid var(--cx-line);margin-bottom:22px}
header.cx .cx-plist li{border-bottom:1px solid var(--cx-line)}
header.cx .cx-plist a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:12px 32px 12px 0;position:relative;color:var(--cx-text)}
header.cx .cx-plist a::after{content:"\2192";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--cx-mute);font:400 18px/1 var(--cx-sans)}
header.cx .cx-m .cx-plist b{display:block;font:550 17px/1.3 var(--cx-sans);letter-spacing:-.01em}
header.cx .cx-m .cx-plist span{display:block;font:400 14px/1.45 var(--cx-sans);color:var(--cx-soft)}
header.cx .cx-plist a.cx-pall{min-height:52px;color:var(--cx-mint)}
header.cx .cx-plist a.cx-pall b{font-weight:500;font-size:16px}
header.cx .cx-pmain{margin-bottom:22px}
header.cx .cx-pmain li{border-bottom:1px solid var(--cx-line)}
header.cx .cx-pmain a{display:flex;align-items:center;min-height:60px;font:500 24px/1.2 var(--cx-sans);letter-spacing:-.02em;color:var(--cx-text)}
header.cx .cx-pmain a[aria-current]{color:var(--cx-mint)}
header.cx .cx-prow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
header.cx .cx-panel .lang.cx-lang a,header.cx .cx-panel .lang.cx-lang button{min-width:56px;height:44px;font-size:13px}
header.cx .cx-pfoot{margin-top:auto;position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;background:var(--cx-bg);border-top:1px solid var(--cx-line);margin-left:calc(-1 * var(--cx-gut));margin-right:calc(-1 * var(--cx-gut));padding:14px var(--cx-gut) calc(18px + env(safe-area-inset-bottom))}
header.cx .cx-pfoot .cx-cta{height:54px;font-size:16px;width:100%}
header.cx .cx-pmail{display:flex;align-items:center;justify-content:center;min-height:44px;font:500 13px/1 Inter,system-ui,-apple-system,sans-serif;color:var(--cx-soft);letter-spacing:0}

@media (max-width:920px){
  header.cx .cx-nav,header.cx .cx-right>.cx-lang{display:none}
  header.cx .cx-bar .cx-m{display:block}
  header.cx .cx-logo{margin-right:auto}
  header.cx .cx-right{gap:8px}
  header.cx .cx-right>.cx-cta{padding:0 14px}
  header.cx .cx-right>.cx-cta .cx-cta-l{display:none}
  header.cx .cx-right>.cx-cta .cx-cta-s{display:inline}
  header.cx .cx-right>.cx-cta .cx-arr{display:none}
}
@media (min-width:921px){header.cx .cx-panel{display:none}}
@media (max-width:359px){
  header.cx .cx-logo{font-size:15.5px;gap:8px}
  header.cx .cx-right>.cx-cta{padding:0 12px;font-size:13.5px}
}
html.cx-lock,html.cx-lock body{overflow:hidden}

/* Fokus */
header.cx a:focus-visible,header.cx button:focus-visible,header.cx summary:focus-visible,
.cx-foot a:focus-visible{outline:2px solid var(--cx-mint);outline-offset:3px;border-radius:8px}
header.cx .cx-grid a:focus-visible{outline-offset:-3px;border-radius:12px}
header.cx .cx-m .cx-pfoot .cx-arr,header.cx .cx-m .cx-pfoot .cx-cta span{display:inline}
header.cx a:focus:not(:focus-visible),header.cx button:focus:not(:focus-visible),header.cx summary:focus:not(:focus-visible){outline:none}

/* ---------- Footer ---------- */
footer.cx-foot{display:block;margin:96px 0 0;padding:0;border:0;border-top:1px solid var(--cx-line);background:var(--cx-bg);color:var(--cx-soft);font-family:var(--cx-sans);font-size:15px;line-height:1.5;letter-spacing:normal;text-align:left}
.cx-foot *,.cx-foot *::before,.cx-foot *::after{box-sizing:border-box}
.cx-foot a{text-decoration:none}
.cx-foot ul{list-style:none;margin:0;padding:0}
.cx-foot p{margin:0}
.cx-foot .cx-fin{max-width:var(--cx-max);margin:0 auto;padding:72px var(--cx-gut) 28px}

.cx-foot .cx-ftop{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;padding-bottom:56px;border-bottom:1px solid var(--cx-line)}
.cx-foot .cx-fclaim{font:300 clamp(30px,3.4vw,46px)/1.1 var(--cx-sans);letter-spacing:-.035em;color:var(--cx-text);margin:14px 0 0 !important}
.cx-foot .cx-fclaim em{display:block;font-style:normal;color:var(--cx-mint)}
.cx-foot .cx-fact{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 24px}
.cx-foot .cx-fact .cx-cta{height:52px;padding:0 22px;font-size:15px}
.cx-foot .cx-mail{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 Inter,system-ui,-apple-system,sans-serif;color:var(--cx-text);letter-spacing:0;border-bottom:1px solid var(--cx-line-2);transition:color .15s,border-color .15s}
.cx-foot .cx-mail:hover{color:var(--cx-mint);border-color:var(--cx-mint)}

.cx-foot .cx-fgrid{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;gap:40px;padding:48px 0 52px}
.cx-foot .cx-fcol h2{margin:0 0 14px !important}
.cx-foot .cx-fcol li a{display:flex;width:fit-content;align-items:center;min-height:36px;padding:2px 0;color:var(--cx-soft);font:400 15px/1.35 var(--cx-sans);transition:color .15s}
.cx-foot .cx-fcol li a:hover{color:var(--cx-text)}
.cx-foot .cx-fcol li a[aria-current]{color:var(--cx-mint)}
.cx-foot .cx-fcontact p{color:var(--cx-soft);font:400 15px/1.55 var(--cx-sans);margin:0 0 14px}
.cx-foot .cx-fcontact .cx-mail{margin-bottom:6px}
.cx-foot .cx-fcontact .cx-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cx-mint);font:500 15px/1 var(--cx-sans)}
.cx-foot .cx-fcontact .cx-link:hover{color:var(--cx-mint-hi)}
.cx-foot .cx-fcontact .cx-link span{transition:transform .2s ease}
.cx-foot .cx-fcontact .cx-link:hover span{transform:translateX(3px)}

.cx-foot .cx-trust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:18px 0;border-top:1px solid var(--cx-line);border-bottom:1px solid var(--cx-line);font:500 12.5px/1.6 Inter,system-ui,-apple-system,sans-serif;letter-spacing:0;color:var(--cx-soft)}
.cx-foot .cx-trust .cx-lbl{margin-right:4px !important}
.cx-foot .cx-trust a{color:var(--cx-text);border-bottom:1px solid var(--cx-line-2);min-height:24px;display:inline-flex;align-items:center}
.cx-foot .cx-trust a:hover{color:var(--cx-mint);border-color:var(--cx-mint)}
.cx-foot .cx-trust .cx-go{color:var(--cx-mint);border:0}
.cx-foot .cx-sq{width:7px;height:7px;background:var(--cx-mint);flex:none}

.cx-foot .cx-fbot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 32px;padding-top:24px;font:400 12px/1.6 Inter,system-ui,-apple-system,sans-serif;letter-spacing:0;color:var(--cx-mute)}
.cx-foot .cx-fbot .cx-fmark{display:inline-flex;align-items:center;gap:10px;color:var(--cx-soft)}
.cx-foot .cx-fbot svg{flex:none}

@media (max-width:980px){
  .cx-foot .cx-ftop{grid-template-columns:1fr;align-items:start}
  .cx-foot .cx-fact{justify-content:flex-start}
  .cx-foot .cx-fgrid{grid-template-columns:1fr 1fr;gap:36px 24px}
}
@media (max-width:560px){
  footer.cx-foot{margin-top:64px}
  .cx-foot .cx-fin{padding-top:52px}
  .cx-foot .cx-ftop{padding-bottom:40px}
  .cx-foot .cx-fact{flex-direction:column;align-items:stretch}
  .cx-foot .cx-fact .cx-cta{width:100%}
  .cx-foot .cx-fact .cx-mail{justify-content:center;border:0}
  .cx-foot .cx-fgrid{grid-template-columns:1fr;gap:32px;padding:40px 0}
  .cx-foot .cx-fcol li a{min-height:44px}
  .cx-foot .cx-fbot{flex-direction:column;align-items:flex-start}
}

/* Touch-Geräte: alle Ziele mindestens 44 px, auch Tablets im Querformat */
@media (pointer:coarse){
  .cx-foot .cx-fcol li a,.cx-foot .cx-trust a{min-height:44px}
  header.cx .cx-lang a,header.cx .cx-lang button{height:44px;min-width:48px}
}
@media (prefers-reduced-motion:reduce){
  header.cx,header.cx *,.cx-foot *,.cx-skip{transition:none !important;animation:none !important}
}
@media print{header.cx,.cx-skip{position:static}}

/* Lange Knopftexte duerfen mobil umbrechen statt die Seite zu verbreitern (28.10.2026) */
.btn{max-width:100%;white-space:normal;text-align:center}