/* ==========================================================
   BB CyberSec – zentrales Stylesheet
   Farben, Typografie und Layout für alle Seiten
   ========================================================== */

/* Schriftarten werden lokal ausgeliefert (DSGVO – kein Google-Server-Abruf).
   Variable Fonts: eine Datei deckt alle Schriftstärken 400–700 ab. */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg:#05080d;
  --bg-alt:#0b121c;
  --bg-card:#0d1522;
  --line:#1a2635;
  --line-soft:rgba(57,255,157,0.18);
  --green:#2dff9e;
  --cyan:#3fd0ff;
  --text:#c9d6e3;
  --text-dim:#8294a6;
  --white:#f4f8fc;
  --mono:'JetBrains Mono','Courier New',monospace;
  --sans:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Farben, die vorher fest im Regelwerk standen. Als Variablen
     laesst sich die helle Ansicht umschalten, ohne jede Regel zu
     verdoppeln. --white heisst weiterhin so, meint aber „staerkste
     Textfarbe" – in der hellen Ansicht ist das fast Schwarz. */
  --schleier:rgba(45,255,158,0.05);
  --schleier-2:rgba(45,255,158,0.06);
  --schleier-3:rgba(45,255,158,0.10);
  --leuchten:rgba(45,255,158,0.25);
  --leuchten-stark:rgba(45,255,158,0.45);
  --leuchten-karte:rgba(45,255,158,0.09);
  --cyan-schleier:rgba(63,208,255,0.05);
  --cyan-glanz:rgba(63,208,255,0.08);
  --schatten:rgba(0,0,0,0.55);
  --schatten-karte:rgba(0,0,0,0.4);
  --kopf-bg:rgba(5,8,13,0.85);
  --kopf-bg-offen:rgba(5,8,13,0.97);
  --auf-gruen:#04110a;
  --gruen-2:#25e0c8;
  --rot:#ff6b6b;
  --terminal-bg:#070c13;
  --terminal-leiste:#0a1019;
  --raster:rgba(26,38,53,0.55);

  /* Eigene Lichtfarben, kraeftiger als die Schleier. Getrennt
     gehalten, weil die Schleier auch Knopf- und Kartenhintergruende
     faerben – dort waere dieselbe Staerke Matsch. */
  --licht-gruen:rgba(45,255,158,0.20);
  --licht-cyan:rgba(63,208,255,0.16);
  --licht-rand:rgba(45,255,158,0.11);
}

/* ----------------------------------------------------------
   Helle Ansicht
   Dunkel bleibt die Vorgabe – das ist die Marke. Hell kommt nur,
   wenn jemand den Schalter umlegt; die Wahl merkt sich der Browser.
   #2dff9e auf Weiss waere unlesbar, deshalb ein dunkleres Gruen.
   ---------------------------------------------------------- */
:root[data-theme="hell"]{
  --bg:#f7f9fb;
  --bg-alt:#eef2f7;
  --bg-card:#ffffff;
  --line:#dde4ec;
  --line-soft:rgba(12,116,70,0.30);
  --green:#0c7446;
  --cyan:#0a6a90;
  --text:#3d4b5a;
  --text-dim:#5a6878;
  --white:#0d1620;

  --schleier:rgba(12,116,70,0.06);
  --schleier-2:rgba(12,116,70,0.07);
  --schleier-3:rgba(12,116,70,0.09);
  --leuchten:rgba(12,116,70,0.18);
  --leuchten-stark:rgba(12,116,70,0.26);
  --leuchten-karte:rgba(12,116,70,0.10);
  --cyan-schleier:rgba(10,106,144,0.05);
  --cyan-glanz:rgba(10,106,144,0.07);
  --schatten:rgba(16,32,52,0.10);
  --schatten-karte:rgba(16,32,52,0.08);
  --kopf-bg:rgba(247,249,251,0.88);
  --kopf-bg-offen:rgba(247,249,251,0.98);
  --auf-gruen:#ffffff;
  --gruen-2:#0b8f77;
  --rot:#c0392b;
  --terminal-bg:#0d1620;
  --terminal-leiste:#182635;
  --raster:rgba(120,140,165,0.22);
  --licht-gruen:rgba(12,116,70,0.10);
  --licht-cyan:rgba(10,106,144,0.08);
  --licht-rand:rgba(12,116,70,0.06);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.65;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;}

::selection{background:var(--green);color:var(--bg);}

/* Dezentes Cyber-Grid als Hintergrund */
.grid-bg{
  position:relative;
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size:44px 44px;
}

/* Grüner Lichtschein hinter dem Hero */
.glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(600px 320px at 18% 20%, var(--schleier-3), transparent 70%),
    radial-gradient(560px 300px at 85% 75%, var(--cyan-glanz), transparent 70%);
}

/* ---------- Scroll-Einblendung ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Header ---------- */
header{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px 6%;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--kopf-bg);backdrop-filter:blur(10px);
  z-index:50;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{
  height:42px;width:42px;border-radius:10px;
  border:1px solid var(--line);
}
.logo{
  font-family:var(--mono);
  font-size:21px;font-weight:700;color:var(--white);
  letter-spacing:1px;white-space:nowrap;
}
.logo span{color:var(--green);}
nav ul{display:flex;gap:32px;list-style:none;}
nav a{font-size:15px;color:var(--text-dim);transition:color .2s;position:relative;}
nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .25s;
}
nav a:hover{color:var(--white);}
nav a:hover::after{width:100%;}

/* Mobile-Menü-Button */
.menu-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;cursor:pointer;
}
.menu-toggle span{
  display:block;width:20px;height:2px;background:var(--green);margin:4px 0;
  transition:transform .25s,opacity .25s;
}
.menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:13px 28px;border:1px solid var(--line-soft);
  border-radius:8px;color:var(--green);font-size:14px;letter-spacing:.5px;
  transition:all .22s;font-family:var(--mono);background:var(--schleier);
}
.btn:hover{border-color:var(--green);box-shadow:0 0 24px var(--leuchten);transform:translateY(-1px);}
.btn-solid{
  background:linear-gradient(100deg,var(--green),var(--gruen-2));
  color:var(--auf-gruen);border-color:transparent;font-weight:700;
}
.btn-solid:hover{box-shadow:0 0 34px var(--leuchten-stark);}
.btn-sm{padding:10px 20px;font-size:13px;}

/* ---------- Hero ---------- */
.hero{
  padding:96px 6% 100px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-inner{
  max-width:1200px;margin:0 auto;position:relative;
  display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;
}
.hero .tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);color:var(--cyan);font-size:12.5px;
  letter-spacing:2.5px;text-transform:uppercase;margin-bottom:24px;
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;
  background:var(--cyan-schleier);
}
.hero .tag::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}
.hero h1{
  font-size:clamp(34px,4.6vw,56px);color:var(--white);font-weight:700;
  line-height:1.16;margin-bottom:22px;letter-spacing:-0.5px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(92deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{max-width:540px;color:var(--text-dim);font-size:17px;margin-bottom:34px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* Terminal-Fenster im Hero */
.terminal{
  background:var(--terminal-bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 30px 80px var(--schatten), 0 0 60px var(--schleier-2);
  overflow:hidden;font-family:var(--mono);font-size:13.5px;
}
.terminal-bar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--terminal-leiste);
}
.terminal-bar i{width:11px;height:11px;border-radius:50%;display:block;}
.terminal-bar i:nth-child(1){background:#ff5f57;}
.terminal-bar i:nth-child(2){background:#febc2e;}
.terminal-bar i:nth-child(3){background:#28c840;}
.terminal-bar .title{margin-left:10px;color:var(--text-dim);font-size:12px;}
.terminal-body{padding:20px 22px;min-height:250px;line-height:1.9;}
.terminal-body .ln{display:block;white-space:pre-wrap;word-break:break-word;}
.terminal-body .prompt{color:var(--green);}
.terminal-body .cmd{color:var(--white);}
.terminal-body .out{color:var(--text-dim);}
.terminal-body .ok{color:var(--green);}
.terminal-body .warn{color:#ffcf5c;}
.cursor{
  display:inline-block;width:9px;height:17px;background:var(--green);
  vertical-align:text-bottom;animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* Kennzahlen-Leiste unter dem Hero */
.stats{
  border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.stats-inner{
  max-width:1100px;margin:0 auto;padding:34px 6%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;
}
.stat .num{
  font-family:var(--mono);font-size:30px;font-weight:700;color:var(--white);
}
.stat .num b{color:var(--green);font-weight:700;}
.stat .lbl{color:var(--text-dim);font-size:13.5px;margin-top:4px;}

/* ---------- Sektionen ---------- */
section{padding:96px 6%;border-bottom:1px solid var(--line);position:relative;}
.section-head{max-width:660px;margin:0 auto 60px;text-align:center;}
.section-head .eyebrow{
  font-family:var(--mono);color:var(--green);font-size:13px;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;
}
.section-head h2{font-size:clamp(28px,3.4vw,38px);color:var(--white);font-weight:700;letter-spacing:-0.4px;}
.section-head p{color:var(--text-dim);margin-top:14px;font-size:15.5px;}

/* ---------- Leistungen ---------- */
.services{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1200px;margin:0 auto;
}
.card{
  background:linear-gradient(160deg,var(--bg-card),var(--bg-alt));
  border:1px solid var(--line);border-radius:14px;padding:32px 26px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  opacity:0;transition:opacity .25s;
}
.card:hover{border-color:var(--line-soft);transform:translateY(-6px);box-shadow:0 20px 44px var(--schatten-karte);}
.card:hover::before{opacity:1;}
.card .icon{
  width:50px;height:50px;border:1px solid var(--line-soft);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;background:var(--schleier-2);
}
.card .icon svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:1.7;}
.card h3{color:var(--white);font-size:17.5px;margin-bottom:10px;}
.card p{color:var(--text-dim);font-size:14px;}

/* ---------- Ablauf ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1200px;margin:0 auto;
  counter-reset:step;
}
.step{
  border:1px solid var(--line);border-radius:14px;padding:30px 24px;background:var(--bg-alt);
  position:relative;
}
.step .no{
  font-family:var(--mono);font-size:13px;color:var(--cyan);letter-spacing:2px;margin-bottom:14px;
}
.step h3{color:var(--white);font-size:16.5px;margin-bottom:8px;}
.step p{color:var(--text-dim);font-size:13.5px;}

/* ---------- Über mich ---------- */
.about{
  max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:center;
}
.about-photo{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:18px;
  background:
    radial-gradient(circle at 50% 45%, var(--schleier-3), transparent 65%),
    var(--bg-alt);
}
/* mix-blend-mode:screen macht den schwarzen Logo-Hintergrund durchsichtig
   (kein filter hier – der würde den Blend-Modus aufheben) */
.about-photo img{width:72%;height:auto;mix-blend-mode:screen;}
.about h3{color:var(--white);font-size:28px;margin-bottom:6px;letter-spacing:-0.3px;}
.about .role{color:var(--cyan);font-family:var(--mono);font-size:14px;margin-bottom:22px;}
.about p{color:var(--text-dim);font-size:15.5px;margin-bottom:16px;}
.about-badges{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 22px;}
.about-badges span{
  font-family:var(--mono);font-size:12px;color:var(--green);
  border:1px solid var(--line-soft);border-radius:99px;padding:6px 14px;
  background:var(--schleier);
}

/* ---------- Zertifikate ---------- */
.certs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;max-width:1000px;margin:0 auto;
}
.cert-pill{
  border:1px solid var(--line);background:var(--bg-alt);color:var(--text);
  padding:16px 20px;border-radius:12px;font-size:14px;display:flex;align-items:center;gap:12px;
  transition:border-color .2s, background .2s;
}
.cert-pill:hover{border-color:var(--line-soft);background:var(--bg-card);}
.cert-pill::before{
  content:"✓";flex-shrink:0;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--auf-gruen);font-weight:700;
  background:linear-gradient(120deg,var(--green),var(--gruen-2));
}

/* ---------- Kontakt ---------- */
.contact-wrap{
  max-width:960px;margin:0 auto;
  background:linear-gradient(160deg,var(--bg-card),var(--bg-alt));
  border:1px solid var(--line);
  border-radius:18px;padding:54px;display:grid;grid-template-columns:1fr 1fr;gap:48px;
  position:relative;overflow:hidden;
}
.contact-wrap::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
}
.contact-wrap h3{color:var(--white);font-size:24px;margin-bottom:16px;}
.contact-wrap p{color:var(--text-dim);font-size:14.5px;margin-bottom:26px;}
.contact-item{margin-bottom:20px;font-size:14.5px;}
.contact-item .label{
  color:var(--green);font-family:var(--mono);font-size:11.5px;
  letter-spacing:1.5px;display:block;margin-bottom:3px;
}
.contact-item a:hover{color:var(--green);}

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.legal{max-width:760px;margin:0 auto;padding:70px 6%;}
.legal h1{color:var(--white);font-size:36px;margin-bottom:30px;letter-spacing:-0.4px;}
.legal h2{color:var(--white);font-size:20px;margin:34px 0 12px;}
.legal p, .legal li{color:var(--text-dim);font-size:15px;margin-bottom:10px;}
.legal ul{padding-left:22px;}
.legal a{color:var(--green);}

/* ---------- Footer ---------- */
footer{
  padding:42px 6%;text-align:center;color:var(--text-dim);font-size:13px;
}
footer .logo{font-size:16px;display:block;margin-bottom:10px;}
footer .footer-links{margin-top:12px;}
footer .footer-links a{color:var(--text-dim);margin:0 10px;transition:color .2s;}
footer .footer-links a:hover{color:var(--green);}

/* ---------- Mobil ---------- */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:48px;}
  .hero p{max-width:none;}
  .services{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .menu-toggle{display:block;}
  header .btn{display:none;}
  nav{
    position:fixed;inset:71px 0 auto 0;
    background:var(--kopf-bg-offen);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  nav.open{max-height:340px;}
  nav ul{flex-direction:column;gap:0;padding:10px 6%;}
  nav a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid var(--line);}
  nav li:last-child a{border-bottom:none;}
  .about{grid-template-columns:1fr;gap:40px;}
  .contact-wrap{grid-template-columns:1fr;padding:34px 28px;gap:34px;}
  .stats-inner{grid-template-columns:1fr;gap:20px;}
}
@media(max-width:560px){
  .services{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .hero{padding:64px 6% 72px;}
  section{padding:72px 6%;}
}

/* ==========================================================
   RADAR – Produktseite und Produktband auf der Startseite
   ========================================================== */

/* --- Fensterrahmen fuer Bildschirmfotos ---
   Die Anwendung selbst ist hell, diese Seite dunkel. Der Rahmen
   macht aus dem Bruch eine Absicht: Man sieht ein Fenster, kein
   fehlfarbenes Element. */
.fenster{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--bg-card);box-shadow:0 30px 70px var(--schatten);
}
.fenster-bar{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--bg-alt);border-bottom:1px solid var(--line);
}
.fenster-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);}
.fenster-bar .titel{
  margin-left:12px;font-family:var(--mono);font-size:12px;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fenster img{display:block;width:100%;height:auto;}
.bildzeile{
  margin-top:12px;font-size:13px;color:var(--text-dim);font-family:var(--mono);
}

/* --- Produkt-Hero --- */
.radar-hero h1{max-width:15ch;}
.radar-hero p{max-width:560px;}
.produkt-tag{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--green);border:1px solid var(--line-soft);border-radius:999px;
  padding:7px 16px;margin-bottom:26px;background:var(--schleier);
}

/* --- Zweispaltiger Block: Text neben Bild --- */
.duo{
  display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;
  max-width:1180px;margin:0 auto;
}
.duo.gedreht{grid-template-columns:1.15fr 1fr;}
.duo.gedreht .duo-text{order:2;}
.duo h3{font-size:clamp(22px,2.6vw,29px);color:var(--white);margin-bottom:18px;letter-spacing:-0.3px;}
.duo p{color:var(--text-dim);font-size:15.5px;line-height:1.75;margin-bottom:16px;}
.duo p strong{color:var(--text);font-weight:600;}

/* --- Zahlenpaar, das die Grundidee traegt --- */
.scores{display:flex;gap:26px;margin:26px 0 8px;flex-wrap:wrap;}
.score{
  border:1px solid var(--line);border-radius:12px;padding:18px 22px;
  background:var(--bg-card);min-width:140px;
}
.score .wert{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1;}
.score.hoch .wert{color:var(--rot);}
.score.niedrig .wert{color:var(--green);}
.score .was{
  font-family:var(--mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-dim);margin-top:10px;
}

/* --- Module --- */
.module{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;max-width:1180px;margin:0 auto;
}
.modul{
  border:1px solid var(--line);border-radius:12px;padding:22px 22px 24px;
  background:linear-gradient(160deg,var(--bg-card),var(--bg-alt));
}
.modul h4{color:var(--white);font-size:16px;margin-bottom:8px;}
.modul p{color:var(--text-dim);font-size:14px;line-height:1.65;}
.modul .paketzeile{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--green);
}

/* --- Laenderkarten --- */
.laender{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;max-width:1000px;margin:0 auto;
}
.land{
  border:1px solid var(--line);border-radius:12px;padding:26px;
  background:var(--bg-card);
}
.land .kuerzel{
  font-family:var(--mono);font-size:13px;letter-spacing:3px;color:var(--green);
  margin-bottom:12px;
}
.land h4{color:var(--white);font-size:17px;margin-bottom:10px;}
.land ul{list-style:none;color:var(--text-dim);font-size:14px;line-height:1.9;}
.land li::before{content:"·";color:var(--green);margin-right:9px;}

/* --- Pakete --- */
.pakete{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;max-width:1060px;margin:0 auto;
}
.paket{
  border:1px solid var(--line);border-radius:14px;padding:30px 26px;
  background:linear-gradient(160deg,var(--bg-card),var(--bg-alt));
  display:flex;flex-direction:column;
}
.paket.hervor{border-color:var(--line-soft);box-shadow:0 0 40px var(--leuchten-karte);}
.paket .name{font-family:var(--mono);font-size:14px;letter-spacing:2px;color:var(--green);}
.paket .preis{margin:18px 0 4px;color:var(--white);font-size:34px;font-weight:700;}
.paket .preis span{font-size:15px;color:var(--text-dim);font-weight:400;}
.paket .chf{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);}
.paket .umfang{
  margin:18px 0;padding-top:18px;border-top:1px solid var(--line);
  color:var(--text-dim);font-size:14.5px;line-height:1.7;
}
.paket ul{list-style:none;margin-bottom:22px;}
.paket li{color:var(--text-dim);font-size:14px;padding:5px 0 5px 20px;position:relative;}
.paket li::before{content:"›";position:absolute;left:0;color:var(--green);}
.paket .btn{margin-top:auto;text-align:center;}

/* --- Zugangsweg --- */
.zugang{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;max-width:1100px;margin:0 auto;counter-reset:schritt;
}
.zugang-schritt{border-left:2px solid var(--line);padding:4px 0 4px 22px;}
.zugang-schritt .nr{
  font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--green);
  margin-bottom:10px;
}
.zugang-schritt h4{color:var(--white);font-size:16px;margin-bottom:8px;}
.zugang-schritt p{color:var(--text-dim);font-size:14px;line-height:1.7;}

/* --- Was RADAR nicht ist --- */
.klartext{
  max-width:820px;margin:0 auto;border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:12px;
  padding:34px 34px 30px;background:var(--bg-card);
}
.klartext h3{color:var(--white);font-size:21px;margin-bottom:18px;}
.klartext li{
  color:var(--text-dim);font-size:15px;line-height:1.8;
  padding:9px 0 9px 26px;position:relative;list-style:none;
  border-bottom:1px solid var(--line);
}
.klartext li:last-child{border-bottom:0;}
.klartext li::before{
  content:"—";position:absolute;left:0;color:var(--green);font-family:var(--mono);
}
.klartext li strong{color:var(--text);font-weight:600;}

/* --- Abschluss-Aufruf --- */
.aufruf{max-width:720px;margin:0 auto;text-align:center;}
.aufruf h2{font-size:clamp(26px,3.2vw,36px);color:var(--white);margin-bottom:18px;}
.aufruf p{color:var(--text-dim);font-size:16px;margin-bottom:30px;}
.aufruf .hero-actions{justify-content:center;}

/* --- Produktband auf der Startseite --- */
.radar-band{background:linear-gradient(180deg,var(--bg-alt),var(--bg));}
.radar-band .duo{align-items:center;}
.radar-band .marke{
  font-family:var(--mono);font-size:12px;letter-spacing:3px;
  text-transform:uppercase;color:var(--green);margin-bottom:16px;
}

@media(max-width:900px){
  .duo,.duo.gedreht{grid-template-columns:1fr;gap:34px;}
  .duo.gedreht .duo-text{order:0;}
  .radar-hero .fenster{margin-top:38px;}
}

/* Abstaende zwischen gleichartigen Bloecken – ohne sie stossen
   Karten und Klartextkasten direkt aneinander. */
.duo + .duo{margin-top:78px;}
.laender + .klartext{margin-top:54px;}
.module + .klartext{margin-top:54px;}

/* ==========================================================
   Umschalter Hell / Dunkel
   ========================================================== */
.thema{
  display:inline-flex;align-items:center;gap:2px;margin-left:14px;
  border:1px solid var(--line);border-radius:999px;padding:3px;
  background:var(--bg-card);
}
.thema button{
  appearance:none;border:0;cursor:pointer;background:transparent;
  color:var(--text-dim);padding:7px 10px;border-radius:999px;
  line-height:0;transition:all .2s;
}
.thema svg{
  width:15px;height:15px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.thema button:hover{color:var(--text);}
.thema button[aria-pressed="true"]{
  background:var(--green);color:var(--auf-gruen);font-weight:700;
}
/* Bis das Skript die gemerkte Wahl gesetzt hat, ist kein Knopf
   markiert – das ist unauffaelliger als ein kurz falsch
   hervorgehobener. */
@media(max-width:860px){
  .thema{margin:0 10px 0 auto;}
  .thema button{padding:6px 8px;}
}

/* Bildschirmfotos sind hell aufgenommen. In der dunklen Ansicht
   sitzen sie in einem Rahmen, das traegt. In der hellen Ansicht
   braucht der Rahmen dagegen eine Kante, sonst verschwimmt er
   mit dem Untergrund. */
:root[data-theme="hell"] .fenster{border-color:var(--line);}
:root[data-theme="hell"] .fenster-bar i{background:var(--line);}

/* ==========================================================
   Rundgang – Reiter ohne JavaScript
   Radioknoepfe statt Skript: tastaturbedienbar, funktioniert auch
   ohne JS, und die CSP bleibt unberuehrt.
   ========================================================== */
.tour{max-width:1180px;margin:0 auto;}
.tour > input{position:absolute;opacity:0;pointer-events:none;}
.tour-reiter{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px;
}
.tour-reiter label{
  cursor:pointer;font-family:var(--mono);font-size:12.5px;letter-spacing:1px;
  color:var(--text-dim);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;transition:all .2s;background:var(--bg-card);
}
.tour-reiter label:hover{color:var(--text);border-color:var(--line-soft);}
.tour-buehne > figure{display:none;margin:0;}
.tour-buehne figcaption{
  margin-top:16px;color:var(--text-dim);font-size:15px;line-height:1.7;
  max-width:760px;
}
.tour-buehne figcaption b{color:var(--white);font-weight:600;display:block;margin-bottom:6px;}
/* Sichtbarkeit je gewaehltem Reiter */
.tour > input:nth-of-type(1):checked ~ .tour-buehne > figure:nth-of-type(1),
.tour > input:nth-of-type(2):checked ~ .tour-buehne > figure:nth-of-type(2),
.tour > input:nth-of-type(3):checked ~ .tour-buehne > figure:nth-of-type(3),
.tour > input:nth-of-type(4):checked ~ .tour-buehne > figure:nth-of-type(4),
.tour > input:nth-of-type(5):checked ~ .tour-buehne > figure:nth-of-type(5),
.tour > input:nth-of-type(6):checked ~ .tour-buehne > figure:nth-of-type(6){display:block;}
.tour > input:nth-of-type(1):checked ~ .tour-reiter label:nth-of-type(1),
.tour > input:nth-of-type(2):checked ~ .tour-reiter label:nth-of-type(2),
.tour > input:nth-of-type(3):checked ~ .tour-reiter label:nth-of-type(3),
.tour > input:nth-of-type(4):checked ~ .tour-reiter label:nth-of-type(4),
.tour > input:nth-of-type(5):checked ~ .tour-reiter label:nth-of-type(5),
.tour > input:nth-of-type(6):checked ~ .tour-reiter label:nth-of-type(6){
  color:var(--auf-gruen);background:var(--green);border-color:transparent;font-weight:700;
}
/* Tastaturbedienung sichtbar machen – sonst waere der Reiter
   erreichbar, aber niemand saehe wo er steht. */
.tour > input:focus-visible ~ .tour-reiter label{outline:1px dashed var(--line-soft);}
.tour > input:nth-of-type(1):focus-visible ~ .tour-reiter label:nth-of-type(1),
.tour > input:nth-of-type(2):focus-visible ~ .tour-reiter label:nth-of-type(2),
.tour > input:nth-of-type(3):focus-visible ~ .tour-reiter label:nth-of-type(3),
.tour > input:nth-of-type(4):focus-visible ~ .tour-reiter label:nth-of-type(4),
.tour > input:nth-of-type(5):focus-visible ~ .tour-reiter label:nth-of-type(5),
.tour > input:nth-of-type(6):focus-visible ~ .tour-reiter label:nth-of-type(6){
  outline:2px solid var(--green);outline-offset:3px;
}

/* ==========================================================
   Haeufige Fragen
   ========================================================== */
.fragen{max-width:840px;margin:0 auto;}
.fragen details{
  border:1px solid var(--line);border-radius:12px;background:var(--bg-card);
  margin-bottom:12px;overflow:hidden;
}
.fragen details[open]{border-color:var(--line-soft);}
.fragen summary{
  cursor:pointer;padding:20px 24px;color:var(--white);font-size:16.5px;
  font-weight:600;list-style:none;display:flex;align-items:flex-start;gap:14px;
}
.fragen summary::-webkit-details-marker{display:none;}
.fragen summary::before{
  content:"+";font-family:var(--mono);color:var(--green);font-weight:700;
  flex:0 0 auto;line-height:1.3;
}
.fragen details[open] summary::before{content:"–";}
.fragen summary:hover{color:var(--green);}
.fragen .antwort{padding:0 24px 22px 52px;color:var(--text-dim);font-size:15px;line-height:1.8;}
.fragen .antwort p + p{margin-top:12px;}
.fragen .antwort strong{color:var(--text);font-weight:600;}

/* Der Kopf traegt Marke, Navigation, Umschalter und Knopf. Auf der
   Produktseite wird das eng – also weniger Luft um den Umschalter. */
.thema{margin-left:10px;}
.thema button{padding:7px 9px;}

/* Der Farbverlauf im Titel wird in die Schrift geschnitten, die
   Schriftfarbe ist deshalb durchsichtig. Auf Weiss laufen Gruen und
   Cyan zu hell aus – in der hellen Ansicht also kraeftigere Toene,
   sonst ist das hervorgehobene Wort das am schlechtesten lesbare der
   ganzen Zeile. */
:root[data-theme="hell"] .hero h1 em{
  /* background-image, NICHT background: die Kurzschreibweise setzt
     auch background-clip zurueck – der Verlauf landete dann auf dem
     Kasten statt in der Schrift, und das Wort wurde zum gruenen
     Balken. */
  background-image:linear-gradient(92deg,#0a6a3f,#0a5f80);
}

/* ==========================================================
   Marke
   Das Zeichen liegt als schwarze und als helle Fassung vor; die
   Seite zeigt die passende. Zwei Bilder statt eines umgefaerbten:
   ein CSS-Filter wuerde bei einem spaeteren farbigen Logo falsche
   Farben erzeugen. Zusammen sind es 8 KB.
   ========================================================== */
.brand img.marke{height:30px;width:auto;border:0;border-radius:0;}
.marke.hell,.marke-voll.hell{display:none;}
:root[data-theme="hell"] .marke.dunkel,
:root[data-theme="hell"] .marke-voll.dunkel{display:none;}
:root[data-theme="hell"] .marke.hell{display:block;}
:root[data-theme="hell"] .marke-voll.hell{display:block;}

footer img.marke-voll{
  height:40px;width:auto;display:block;margin:0 auto 16px;
}
@media(max-width:600px){
  .brand img.marke{height:26px;}
  footer img.marke-voll{height:32px;}
}

/* ==========================================================
   Schaufenster – das Produktbild bekommt Platz und Licht
   Im Hero steht das Terminal; das Bildschirmfoto wirkt direkt
   darunter staerker als daneben, weil es die volle Breite hat.
   ========================================================== */
.schaufenster{
  padding:0 6% 96px;border-bottom:1px solid var(--line);position:relative;
  margin-top:-1px;
}
.schaufenster-inner{max-width:1200px;margin:0 auto;position:relative;}
.schaufenster .fenster{
  box-shadow:0 40px 90px var(--schatten), 0 0 80px var(--schleier-2);
}

/* ==========================================================
   Licht
   Der Hero lebt vom Leuchten hinter dem Inhalt. Zwei ruhige
   Atemzuege, versetzt – kein Blinken, kein Farbwechsel. Wer
   Bewegung abgestellt hat, bekommt das statische Bild.
   ========================================================== */
.hero .glow{
  background:
    radial-gradient(760px 420px at 12% 14%, var(--schleier-3), transparent 68%),
    radial-gradient(680px 380px at 88% 76%, var(--cyan-glanz), transparent 68%),
    radial-gradient(420px 260px at 62% 8%, var(--schleier), transparent 72%);
}
@media(prefers-reduced-motion:no-preference){
  .hero .glow{animation:atmen 9s ease-in-out infinite;}
  .schaufenster .glow{animation:atmen 11s ease-in-out infinite reverse;}
}
@keyframes atmen{
  0%,100%{opacity:.72;transform:scale(1);}
  50%    {opacity:1;  transform:scale(1.06);}
}

/* Ein Lichtstrahl wandert einmal quer durch das Raster – der
   Moment, in dem die Seite laedt. Danach ist Ruhe: eine Schleife
   waere Jahrmarkt, ein einzelner Durchlauf ist ein Auftakt. */
.hero.grid-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 42%, var(--schleier-3) 50%, transparent 58%);
  opacity:0;
}
@media(prefers-reduced-motion:no-preference){
  .hero.grid-bg::after{animation:strahl 2.4s ease-out .35s 1;}
}
@keyframes strahl{
  0%  {opacity:0;   transform:translateX(-60%);}
  35% {opacity:.9;}
  100%{opacity:0;   transform:translateX(60%);}
}

/* Das Terminal traegt den groessten Teil des Lichts – es soll
   leuchten, nicht nur stehen. */
.hero .terminal{
  box-shadow:0 34px 90px var(--schatten), 0 0 70px var(--schleier-3);
}

@media(max-width:900px){
  .schaufenster{padding-bottom:64px;}
}

/* Der pulsierende Punkt aus dem alten Hero – er signalisiert, dass
   da etwas laeuft, und war der Grund, warum das Etikett gewirkt hat.
   Beim Umbau auf .produkt-tag war er verlorengegangen. */
.produkt-tag::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);flex:0 0 auto;
}
@media(prefers-reduced-motion:no-preference){
  .produkt-tag::before{animation:pulse 2s infinite;}
}

/* ==========================================================
   Mehr Licht
   ========================================================== */
.hero .glow{
  background:
    radial-gradient(900px 520px at 10% 10%, var(--licht-gruen), transparent 66%),
    radial-gradient(820px 460px at 92% 78%, var(--licht-cyan), transparent 66%),
    radial-gradient(560px 340px at 58% 4%,  var(--licht-rand), transparent 70%),
    radial-gradient(420px 420px at 78% 40%, var(--licht-gruen), transparent 72%);
}
.schaufenster .glow{
  background:
    radial-gradient(780px 420px at 18% 30%, var(--licht-gruen), transparent 68%),
    radial-gradient(700px 400px at 84% 70%, var(--licht-cyan), transparent 68%);
}
/* Auch die uebrigen Raster-Abschnitte bekommen etwas ab – vorher
   verlief sich das Leuchten nach dem Hero im Nichts. */
section.grid-bg > .glow{
  background:
    radial-gradient(700px 380px at 15% 18%, var(--licht-rand), transparent 70%),
    radial-gradient(640px 360px at 86% 80%, var(--licht-cyan), transparent 70%);
}

/* Ein stehendes Licht hinter der Ueberschrift – es hebt die Zeile
   vom Raster ab, ohne dass man die Quelle sieht. */
.hero-inner::before{
  content:"";position:absolute;left:-6%;top:-12%;
  width:60%;height:120%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, var(--licht-rand), transparent 78%);
}

/* Terminal und Produktbild leuchten kraeftiger. */
.hero .terminal{
  box-shadow:0 34px 90px var(--schatten), 0 0 110px var(--licht-gruen);
}
.schaufenster .fenster{
  box-shadow:0 40px 90px var(--schatten), 0 0 120px var(--licht-gruen);
}

/* Der Hauptknopf glimmt jetzt auch im Ruhezustand, nicht erst beim
   Zeigen darauf. */
.btn-solid{box-shadow:0 0 26px var(--licht-rand);}
.btn-solid:hover{box-shadow:0 0 44px var(--leuchten-stark);}

/* Etwas mehr Bewegung im Atem. */
@keyframes atmen{
  0%,100%{opacity:.66;transform:scale(1);}
  50%    {opacity:1;  transform:scale(1.09);}
}

/* Im Kopf steht neben dem Zeichen nur noch „CyberSec" – das „BB"
   traegt das Zeichen selbst. Ohne den zweiten Wortteil gibt es
   nichts mehr zweifarbig abzusetzen, also durchgehend Gruen.
   Der vollstaendige Firmenname steht weiterhin im Seitentitel, in
   der Fusszeile und im Impressum. */
.brand .logo{color:var(--green);}

/* Hinweis unter dem Schnellcheck-CTA (Marketing) */
.hero-check-hinweis{margin-top:14px;font-size:13px;color:var(--text-schwach,#8a97a8);max-width:52ch;}