/* Lokal gehostete Schriftarten - ersetzt Google Fonts CDN (fonts.googleapis.com/
   fonts.gstatic.com), damit Besucherdaten (IP-Adresse) nicht an US-Server
   gehen. Dateien muessen im Ordner /fonts/ liegen, siehe Anleitung. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-v13-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/barlow-condensed-v13-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2');
}

:root {
  --ink: #050505;
  --line: rgba(255,255,255,0.10);
  --text-main: #ffffff;
  --text-muted: #9a9a9f;
  --civil: #1c5a82;
  --civil-bright: #2980b9;
  --mil: #8b1a1a;
  --mil-bright: #c22127;
  /* --mil-bright erreicht auf dunklem Hintergrund nur 3.4:1 Kontrast - genug
     fuer grosse/fette Ueberschriften (WCAG-Grenze 3:1), nicht fuer normalen
     Fliesstext (Grenze 4.5:1). Eigene, hellere Variante fuer Fliesstext
     (5:1), --mil-bright bleibt fuer Ueberschriften unveraendert. */
  --mil-bright-text: #d94f52;
  --landing-bright: #43c98b;
  --faq-bright: #8a97a0;
  --programs-bright: #8a97a0;
  --contact: #384042;
  --contact-bright: #8a97a0;
  --legal: #384042;
  --legal-bright: #8a97a0;
  --social: #384042;
  --social-bright: #8a97a0;
  --history: #384042;
  --history-bright: #8a97a0;
  --font-display: 'Barlow Condensed', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* iOS Safari ignoriert reines overflow:hidden auf html/body oft (Rubber-Banding
   scrollt trotzdem). Robuster Fix: body wird bei gesperrtem Scroll komplett
   fixiert; die vorherige Scroll-Position wird in JS gemerkt und beim Entsperren
   wiederhergestellt (siehe Script unten). */
html.locked, html.locked body { overflow: hidden; }
body.scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

body {
  background-color: var(--ink);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---------- HINTERGRUND: technisches Blaupausen-Raster ----------
   Rein dekoratives, ruhiges Gitter im Stil einer technischen Zeichnung
   (passend zu Maschinenbau/Werkstatt bzw. Logistik/Einsatz) statt einer
   Animation oder eines Software-Nachbaus - keine Fake-Daten, keine
   Bewegung, kein "Game-Look". Farbe des Rasters folgt dezent dem
   jeweiligen Seitentyp (Zivil = Blau, Militaer = Rot, sonst neutral),
   siehe body[data-spine] weiter unten. */
.blueprint-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  --bp-line: rgba(255,255,255,0.0495);
  --bp-line-soft: rgba(255,255,255,0.0225);
  background-image:
    repeating-linear-gradient(0deg, var(--bp-line) 0, var(--bp-line) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(90deg, var(--bp-line) 0, var(--bp-line) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(0deg, var(--bp-line-soft) 0, var(--bp-line-soft) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, var(--bp-line-soft) 0, var(--bp-line-soft) 1px, transparent 1px, transparent 24px);
}
/* Zwei sehr dezente "Zirkel"-Bögen in gegenüberliegenden Ecken, wie
   Konstruktionshilfslinien auf einer technischen Zeichnung. */
.blueprint-bg::before,
.blueprint-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--bp-line);
}
.blueprint-bg::before { top: -220px; right: -220px; width: 440px; height: 440px; }
.blueprint-bg::after { bottom: -160px; left: -160px; width: 320px; height: 320px; border-color: var(--bp-line-soft); }

body[data-spine="civil"] .blueprint-bg { --bp-line: rgba(41,128,185,0.099); --bp-line-soft: rgba(41,128,185,0.045); }
body[data-spine="military"] .blueprint-bg { --bp-line: rgba(194,33,39,0.099); --bp-line-soft: rgba(194,33,39,0.045); }

/* Dezente Abdunklung für Textlesbarkeit in der Bildmitte, symmetrisch
   (nicht mehr rechtslastig, da der Hero jetzt zentriert ist). */
.spine-scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 48%,
    rgba(5,5,5,0.55) 0%,
    rgba(5,5,5,0.72) 55%,
    rgba(5,5,5,0.88) 100%);
}

main {
  position: relative;
  z-index: 3;
}

/* Sehr dezenter Farb-Hinweis auf die zwei Welten: links ein Hauch Blau
   (Zivil/Leidang), rechts ein Hauch Rot (Militaer/Tactical). Liegt bewusst
   direkt auf #landing (im main-Stacking-Kontext, ueber dem .spine-scrim-Layer,
   sonst wird die Abdunklung des Scrims das Schimmern komplett auffressen). */
#landing {
  background: linear-gradient(90deg,
    rgba(41,128,185,0.144) 0%,
    rgba(41,128,185,0.063) 26%,
    transparent 46%,
    transparent 54%,
    rgba(194,33,39,0.063) 74%,
    rgba(194,33,39,0.144) 100%);
}

/* Garantiert KEIN Durchscheinen des Landing-Textes: sobald eine Zone aktiv
   ist, wird #landing komplett unsichtbar (nicht nur überdeckt). */
#landing.hidden-behind-zone {
  visibility: hidden;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 7vw 60px;
}

.hero-inner {
  max-width: 1180px;
  text-align: center;
}

.hero-logo {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  margin: 0 auto 22px;
  display: block;
  filter: drop-shadow(0 8px 26px rgba(194,33,39,0.35));
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- VERSTECKTER LOGIN (Logo-Trigger, linke Haelfte = Zivil/Leidang) ---------- */
.zone-view--login {
  background: radial-gradient(circle at 50% 20%, rgba(194,33,39,0.24), rgba(5,5,5,0.98) 55%);
}
.zone-view--login .eyebrow { color: #ff6b6b; }
.zone-view--login .tool-detail-back { color: #ff6b6b; border-color: #ff6b6b; }

.zone-view--login-mil {
  background: radial-gradient(circle at 50% 20%, rgba(139,26,26,0.24), rgba(5,5,5,0.98) 55%);
}
.zone-view--login-mil .eyebrow { color: var(--mil-bright); }
.zone-view--login-mil .tool-detail-back { color: var(--mil-bright); border-color: var(--mil-bright); }
.zone-view--login-mil .login-card { border-color: rgba(139,26,26,0.5); }
.zone-view--login-mil .login-tab.active { color: #fff; border-bottom-color: var(--mil-bright); }
.zone-view--login-mil .login-field input:focus { border-color: var(--mil-bright); }
.zone-view--login-mil .login-submit { background: var(--mil); }
.zone-view--login-mil .login-submit:hover { background: var(--mil-bright); }

.login-card {
  width: min(380px, 92vw);
  margin: 0 auto;
  background: rgba(56,64,66,0.85);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(194,33,39,0.5);
  border-radius: 6px;
  padding: 32px 28px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
  animation: loginIn .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #C22127;
  margin-bottom: 6px;
}

.login-title {
  font-family: var(--font-display, Arial, sans-serif);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.login-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid #4a5254;
}
.login-tab {
  flex: 1;
  background: none;
  border: none;
  color: #9aa0a2;
  padding: 8px 4px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.login-tab.active { color: #fff; border-bottom-color: #C22127; }

.login-field { margin-bottom: 16px; }

.login-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9aa0a2;
  margin-bottom: 6px;
  font-family: Arial, sans-serif;
}

.login-field input {
  width: 100%;
  box-sizing: border-box;
  background: #22282a;
  border: 1px solid #4a5254;
  color: #fff;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  border-radius: 3px;
  outline: none;
  transition: border-color .2s;
}
.login-field input:focus { border-color: #C22127; box-shadow: 0 0 0 3px rgba(194,33,39,0.25); }

.login-submit {
  width: 100%;
  background: #C22127;
  color: #fff;
  border: none;
  padding: 12px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 6px;
  transition: background .2s;
}
.login-submit:hover { background: #a11c21; }
.login-submit:disabled { background: #6a2f31; cursor: wait; }

.login-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9aa0a2;
  margin-top: 12px;
  min-height: 16px;
}
.login-msg.error { color: #ff6b6b; }
.login-msg.ok { color: #6bce7a; }

.login-note {
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #6b7274;
  margin-top: 14px;
  line-height: 1.5;
}

.login-no-access {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 11px 26px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zone-view--login .login-no-access { background: #ff6b6b; color: #050505; }
.zone-view--login-mil .login-no-access { background: var(--mil-bright); color: #fff; }
.login-no-access:hover { transform: translateY(-2px); }
.zone-view--login .login-no-access:hover { box-shadow: 0 10px 26px rgba(255,107,107,0.35); }
.zone-view--login-mil .login-no-access:hover { box-shadow: 0 10px 26px rgba(194,33,39,0.35); }

/* ---------- FUNKEN (Spark-Burst beim Entdecken des versteckten Logo-Logins) ---------- */
.spark {
  position: fixed;
  left: 0; top: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(194,33,39,0.9), 0 0 12px 3px rgba(194,33,39,0.5);
  pointer-events: none;
  z-index: 10000;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 26px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.92;
  font-size: clamp(56px, 10vw, 148px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 6px 30px rgba(0,0,0,0.85);
}

.wordmark .sub {
  display: block;
  font-weight: 600;
  font-size: clamp(15px, 2.1vw, 26px);
  letter-spacing: 0.38em;
  color: var(--text-muted);
  margin-top: 14px;
  text-transform: uppercase;
}

.mission {
  margin: 34px auto 0;
  max-width: 640px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--text-muted);
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}

.hero-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 34px;
  border-radius: 999px;
  background: var(--landing-bright);
  color: #050505;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(67,201,139,0.35); }

.mission strong { color: var(--text-main); font-weight: 600; }

/* ---------- ZONEN-WAHL ---------- */
.choice {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.zone-btn {
  position: relative;
  border: none;
  background: rgba(6,6,6,0.55);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 60px 30px;
  font-family: inherit;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.4s ease;
}

.zone-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.zone-btn--civil::before { background: radial-gradient(circle at 50% 50%, rgba(28,90,130,0.22), transparent 70%); }
.zone-btn--military::before { background: radial-gradient(circle at 50% 50%, rgba(139,26,26,0.22), transparent 70%); }
.zone-btn:hover::before { opacity: 1; }
.zone-btn:hover { background: rgba(6,6,6,0.7); }

.zone-btn--civil { border-right: 1px solid var(--line); }

.zone-icon {
  width: 84px;
  height: 84px;
  color: var(--text-muted);
  transition: color 0.35s ease, transform 0.35s ease;
}

.zone-btn--civil:hover .zone-icon { color: var(--civil-bright); transform: scale(1.06); }
.zone-btn--military:hover .zone-icon { color: var(--mil-bright); transform: scale(1.06); }

.zone-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 52px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zone-btn--civil .zone-label { color: var(--civil-bright); }
.zone-btn--military .zone-label { color: var(--mil-bright); }

.zone-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 300px;
}

.zone-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

@media (max-width: 860px) {
  .choice { grid-template-columns: 1fr; }
  .zone-btn { min-height: 50svh; }
  .zone-btn--civil { border-right: none; border-bottom: 1px solid var(--line); }
}

/* Inhalte innerhalb der Kontakt-/Rechtliches-Zonen-Views */
.contact-form {
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-field input,
.form-field textarea,
.form-field select {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--text-main);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  border-radius: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239a9a9f'><path d='M5 7l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

.form-field select option {
  background: #111111;
  color: var(--text-main);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--contact);
  box-shadow: 0 0 0 3px rgba(138,151,160,0.25);
}

.form-field textarea { resize: vertical; min-height: 110px; }

/* Textfarbe #1a1400 auf dem dunklen Grau-Hintergrund (--contact) ergab nur
   1.73:1 Kontrast - der Button-Text war praktisch unlesbar, ausser genau im
   Hover-Zustand (galt auf Touch-Geraeten also so gut wie nie). Fix: helle
   Schrift im Ruhezustand (10.6:1), dunkle Schrift beim Hover auf dem
   helleren --contact-bright (6.8:1) - beide Zustaende bestehen WCAG AA. */
.btn-send {
  align-self: flex-start;
  background: var(--contact);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 13px 24px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  margin-top: 4px;
}

.btn-send:hover { background: var(--contact-bright); color: #050505; }

.contact-form-status { font-size: 13px; margin: 10px 0 0; min-height: 1em; }
.contact-form-status-ok { color: #3a9d4f; }
.contact-form-status-warn { color: #b3781c; }

/* Verstecktes Feld gegen automatisierte Formularausfuellung (contact-send.php
   prueft es serverseitig) - bewusst nicht display:none/visibility:hidden,
   da einfache Bots genau danach filtern; stattdessen aus dem sichtbaren
   Bereich verschoben und fuer Screenreader ausgeblendet. */
.form-field-honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  left: -9999px;
}

.legal-block { max-width: 480px; width: 100%; margin: 0 auto 30px; text-align: left; }
.legal-block:last-child { margin-bottom: 0; }

.legal-block h2,
.legal-block h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 20px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 10px;
}

.zone-view--legal .legal-block h2,
.zone-view--legal .legal-block h3 { color: var(--legal-bright); }
.zone-view--social .legal-block h2,
.zone-view--social .legal-block h3 { color: var(--social-bright); }
.zone-view--history .legal-block h2,
.zone-view--history .legal-block h3 { color: var(--history-bright); }
.zone-view--programs .legal-block h2,
.zone-view--programs .legal-block h3 { color: var(--programs-bright); }
.zone-view--faq .legal-block h2,
.zone-view--faq .legal-block h3 { color: var(--faq-bright); }

.legal-block p {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-block a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.legal-block a:hover { color: var(--legal-bright); }
/* .hero-cta (der grosse "Demo anfordern"-Button, z.B. auf Firmengeschichte
   in einem .legal-block platziert) soll wie ein Button aussehen, nicht wie
   ein unterstrichener Fliesstext-Link. Ohne diese Regel gewinnt die
   generische ".legal-block a"-Regel durch hoehere Spezifitaet: gedaempfter
   Text auf gruenem Grund, kaum lesbar - genau das war der Bug. */
.legal-block .hero-cta,
.legal-block .hero-cta:hover { color: #050505; text-decoration: none; }

.legal-doc {
  max-width: 720px;
  width: 100%;
  margin: 0 auto 18px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}

.legal-doc-toggle {
  width: 100%;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--legal-bright);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-family: var(--font-display);
}

.legal-doc-icon {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
  flex-shrink: 0;
}

.legal-doc-toggle .doc-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
  color: var(--text-muted);
  letter-spacing: normal;
  display: block;
  margin-top: 4px;
}

.legal-doc-body {
  display: none;
  padding: 4px 22px 26px;
  border-top: 1px solid var(--line);
}

.legal-doc.open .legal-doc-body { display: block; }

.legal-doc-body table.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 22px;
  font-size: 12.5px;
}
.legal-doc-body table.info-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  vertical-align: top;
}
.legal-doc-body table.info-table td:first-child {
  width: 36%;
  color: var(--text-main);
  opacity: 0.7;
}

.legal-doc-body h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 22px 0 6px;
}
.legal-doc-body h4:first-of-type { margin-top: 8px; }

.legal-doc-body p, .legal-doc-body li {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

.legal-doc-body strong { color: var(--text-main); font-weight: 700; }

.legal-doc-notice {
  margin-top: 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--legal-bright);
  background: rgba(138,151,160,0.08);
  font-size: 12.5px;
  color: var(--text-muted);
}

.legal-doc-body a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc-body a:hover { color: var(--legal-bright); }

.mini-footer {
  border-top: 1px solid var(--line);
  padding: 26px 6vw;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}
.mini-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.mini-footer a:hover { color: var(--text-main); }

/* ---------- Kompakte Footer-Navigation (ersetzt die drei wiederholten
   Karteikarten-Reihen "Firmengeschichte/Social", "Kontakt/Rechtliches" und
   "Programme/FAQ" auf der Startseite; erscheint auf allen 9 Seiten oberhalb
   der Copyright-Zeile) ---------- */
.footnav {
  position: relative;
  max-width: 980px;
  margin: 30px auto 0;
  padding: 46px 6vw 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
}
.footnav h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
/* padding oben+unten zusammen mit der Zeilenhoehe ergibt mindestens 24px
   Trefferflaeche (WCAG 2.2, 2.5.8) - 5px reichte gemessen nur fuer ca. 17px. */
.footnav a {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  padding: 8px 0;
}
.footnav a:hover { color: var(--text-main); }
@media (max-width: 720px) {
  .footnav { grid-template-columns: 1fr 1fr; text-align: left; }
}

/* ---------- ZONEN-VIEWS (eigene, abgeschottete Welten) ---------- */
.zone-view {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 110px 6vw 60px;
  background: rgba(5,5,5,0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.zone-view.active { opacity: 1; visibility: visible; pointer-events: auto; }

.zone-view--civil { background: radial-gradient(circle at 50% 20%, rgba(28,90,130,0.22), rgba(5,5,5,0.98) 55%); }
.zone-view--military { background: radial-gradient(circle at 50% 20%, rgba(139,26,26,0.24), rgba(5,5,5,0.98) 55%); }
.zone-view--contact { background: radial-gradient(circle at 50% 20%, rgba(138,151,160,0.14), rgba(5,5,5,0.98) 55%); }
.zone-view--legal { background: radial-gradient(circle at 50% 20%, rgba(138,151,160,0.14), rgba(5,5,5,0.98) 55%); }
.zone-view--social { background: radial-gradient(circle at 50% 20%, rgba(138,151,160,0.14), rgba(5,5,5,0.98) 55%); }
.zone-view--history { background: radial-gradient(circle at 50% 20%, rgba(138,151,160,0.14), rgba(5,5,5,0.98) 55%); }
.zone-view--programs { background: radial-gradient(circle at 50% 20%, rgba(138,151,160,0.14), rgba(5,5,5,0.98) 55%); }
.zone-view--faq { background: radial-gradient(circle at 50% 20%, rgba(138,151,160,0.14), rgba(5,5,5,0.98) 55%); }

.zone-view-inner { max-width: 1600px; width: 100%; text-align: center; margin-bottom: 44px; }

.zone-view .eyebrow { font-weight: 500; margin-bottom: 18px; }
.zone-view--civil .eyebrow { color: var(--civil-bright); }
.zone-view--military .eyebrow { color: var(--mil-bright); }
.zone-view--contact .eyebrow { color: var(--contact-bright); }
.zone-view--legal .eyebrow { color: var(--legal-bright); }
.zone-view--social .eyebrow { color: var(--social-bright); }
.zone-view--history .eyebrow { color: var(--history-bright); }
.zone-view--programs .eyebrow { color: var(--programs-bright); }
.zone-view--faq .eyebrow { color: var(--faq-bright); }

.social-icons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}
.social-icon-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 260px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-main);
  text-decoration: none;
  text-align: left;
  transition: border-color .2s, background .2s, transform .2s;
}
.social-icon-link svg { width: 32px; height: 32px; }
.social-icon-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-main);
}
.social-icon-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.zone-view--social .social-icon-link:hover {
  border-color: var(--social-bright);
  background: rgba(138,151,160,0.08);
  transform: translateY(-3px);
}
.zone-view--social .social-icon-link:hover svg { color: var(--social-bright); }

@media (max-width: 640px) {
  .social-icon-link { width: 100%; }
}

.zone-view h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.tool-grid {
  max-width: 1600px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.tool-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.zone-view--civil .tool-card:hover { border-color: var(--civil); background: rgba(28,90,130,0.06); }
.zone-view--military .tool-card:hover { border-color: var(--mil); background: rgba(139,26,26,0.06); }

/* Platzhalter für künftige 3 Bilder + Demo-Video pro Tool */
.tool-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 14px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 900px;
}

.tool-media-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

/* Karten ohne Medien (data-no-media, initToolGallery() steigt frueh aus,
   siehe tool-detail.js) zeigten trotzdem drei Punkte und ein Abspieldreieck
   - vier fokussierbare, aber wirkungslose Bedienelemente auf einer leeren
   Flaeche, die wie ein Ladefehler aussieht. */
.tool-media:not(.has-media) .tool-media-dots { display: none; }

.tool-media-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.3s ease, transform 0.3s ease;
}

.tool-media.has-media .tool-media-dots span.dot.active {
  background: #ffffff;
  transform: scale(1.3);
}
.tool-media.has-media .tool-media-dots .play.active {
  border-left-color: #ffffff !important;
}

.tool-media-dots .play {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  margin-left: 4px;
}

.zone-view--civil .tool-media-dots .play { border-color: transparent transparent transparent var(--civil-bright); }
.zone-view--military .tool-media-dots .play { border-color: transparent transparent transparent var(--mil-bright); }

.tool-media-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tool-media-track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

/* Echte 3D-Drehung fuer die automatisch rotierenden Karten (Kreisel-Effekt).
   Die Detailseite nutzt weiterhin das flache Schieben mit Pfeilen. */
.tool-media-track--3d {
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.tool-media-track--3d .tool-media-slide {
  position: absolute;
  inset: 0;
  flex: none;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.tool-media-track--3d .tool-media-slide img,
.tool-media-track--3d .tool-media-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-media-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.tool-media-slide img, .tool-media-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tool-media.has-media {
  cursor: pointer;
  background: #000;
}
.tool-media.has-media .tool-media-label { display: none; }
.tool-media.has-media .tool-media-dots {
  position: absolute;
  bottom: 10px;
  left: 12px;
  z-index: 2;
}
.tool-media.has-media .tool-media-dots span.dot { background: rgba(255,255,255,0.4); }
.tool-media.has-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 45%);
  pointer-events: none;
}

/* -------- Lightbox -------- */
.mss-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(3,3,3,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.mss-lightbox.open { display: flex; }
.mss-lightbox-stage {
  max-width: 1100px;
  max-height: 82vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mss-lightbox-stage img, .mss-lightbox-stage video {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.mss-lightbox-title {
  position: absolute;
  top: 24px;
  left: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
  font-size: 15px;
}
.mss-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text-main);
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
}
.mss-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
}
.mss-lightbox-nav.prev { left: 18px; }
.mss-lightbox-nav.next { right: 18px; }
.mss-lightbox-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.mss-lightbox-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
}
.mss-lightbox-dots span.active { background: var(--text-main); }

/* -------- Programm-Detailseite (taucht wie eine Zone ein) -------- */
#toolDetailView .zone-view-inner { margin-bottom: 28px; }

.tool-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 30px;
}
.tool-detail-back:hover { color: var(--text-main); border-color: rgba(255,255,255,0.3); }
.zone-view--civil .tool-detail-back { color: var(--civil-bright); border-color: var(--civil-bright); }
.zone-view--military .tool-detail-back { color: var(--mil-bright); border-color: var(--mil-bright); }

.tool-detail-media-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.tool-detail-media {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 relativ zur Wrapper-Breite (siehe .tool-detail-media-wrap) */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
}
#detailMedia:fullscreen { padding-top: 0; width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
#detailMedia:fullscreen .tool-media-slide img,
#detailMedia:fullscreen .tool-media-slide video { object-fit: contain; background: #000; }
#detailMedia:-webkit-full-screen { padding-top: 0; width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
#detailMedia:-webkit-full-screen .tool-media-slide img,
#detailMedia:-webkit-full-screen .tool-media-slide video { object-fit: contain; background: #000; }
.tool-detail-media .tool-media-track { position: absolute; inset: 0; }
.tool-detail-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 5;
}
.tool-detail-media-nav.prev { left: 16px; }
.tool-detail-media-nav.next { right: 16px; }
.tool-detail-media-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.tool-detail-media-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
}
.tool-detail-media-dots span.active { background: #fff; }

.tool-detail-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 30px 0 12px;
}
.tool-detail-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--text-main);
  margin: 0 0 18px;
  text-align: center;
}
.zone-view--civil .tool-detail-title { color: var(--civil-bright); }
.zone-view--military .tool-detail-title { color: var(--mil-bright); }
.tool-detail-desc {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.td-intro {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--text-main);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 30px;
}
.zone-view--civil .td-intro { color: var(--civil-bright); }
.zone-view--military .td-intro { color: var(--mil-bright-text); }

.td-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 34px;
}
.td-checklist li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.65;
}
.td-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.zone-view--civil .td-checklist li::before { color: var(--civil-bright); }
.zone-view--military .td-checklist li::before { color: var(--mil-bright); }
.td-checklist li strong { color: var(--text-main); font-weight: 700; }
.zone-view--civil .td-checklist li strong { color: var(--civil-bright); }
.zone-view--military .td-checklist li strong { color: var(--mil-bright); }

.td-cta {
  display: block;
  margin: 0 auto 46px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #050505;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zone-view--civil .td-cta { background: var(--civil-bright); }
.zone-view--military .td-cta { background: var(--mil-bright); color: #fff; }
.td-cta:hover { transform: translateY(-2px); }
.zone-view--civil .td-cta:hover { box-shadow: 0 10px 26px rgba(41,128,185,0.35); }
.zone-view--military .td-cta:hover { box-shadow: 0 10px 26px rgba(194,33,39,0.35); }

.tool-card-cta {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #050505;
  margin-top: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zone-view--civil .tool-card-cta { background: var(--civil-bright); }
.zone-view--military .tool-card-cta { background: var(--mil-bright); color: #fff; }
.tool-card-cta:hover { transform: translateY(-2px); }
.zone-view--civil .tool-card-cta:hover { box-shadow: 0 10px 26px rgba(41,128,185,0.35); }
.zone-view--military .tool-card-cta:hover { box-shadow: 0 10px 26px rgba(194,33,39,0.35); }

.td-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--text-main);
  text-align: center;
  margin-bottom: 26px;
  position: relative;
  padding-bottom: 14px;
}
.zone-view--civil .td-section-title { color: var(--civil-bright); }
.zone-view--military .td-section-title { color: var(--mil-bright); }
.td-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 2px;
}
.zone-view--civil .td-section-title::after { background: var(--civil-bright); }
.zone-view--military .td-section-title::after { background: var(--mil-bright); }

.td-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 40px;
}

.td-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 24px 26px;
  background: rgba(255,255,255,0.02);
}
.zone-view--civil .td-feature-card { border-left-color: var(--civil-bright); }
.zone-view--military .td-feature-card { border-left-color: var(--mil-bright); }
.td-feature-card-body { flex: 1 1 auto; min-width: 0; }
.td-feature-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #050505;
}
.zone-view--civil .td-feature-num { background: var(--civil-bright); }
.zone-view--military .td-feature-num { background: var(--mil-bright); color: #fff; }
.td-feature-card h4 {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}
.zone-view--civil .td-feature-card h4 { color: var(--civil-bright); }
.zone-view--military .td-feature-card h4 { color: var(--mil-bright); }
.td-feature-card p { font-size: clamp(14px, 1vw, 16px); line-height: 1.7; }

@media (max-width: 640px) {
  .td-feature-card { flex-direction: column; gap: 12px; }
}

.td-sublist { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.td-sublist li { font-size: 14px; padding-left: 16px; position: relative; }
.td-sublist li::before {
  content: '–';
  position: absolute;
  left: 0;
}
.td-sublist--labeled li { padding-left: 0; margin-bottom: 10px; }
.td-sublist--labeled li::before { content: none; }
.td-sublist--labeled li strong { color: var(--text-main); font-weight: 700; }
.zone-view--civil .td-sublist--labeled li strong { color: var(--civil-bright); }
.zone-view--military .td-sublist--labeled li strong { color: var(--mil-bright); }

.td-outro {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 34px;
}
.td-outro h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--text-main);
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 14px;
}
.zone-view--civil .td-outro h3 { color: var(--civil-bright); }
.zone-view--military .td-outro h3 { color: var(--mil-bright); }
.td-outro h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 2px;
}
.zone-view--civil .td-outro h3::after { background: var(--civil-bright); }
.zone-view--military .td-outro h3::after { background: var(--mil-bright); }
.td-outro p { text-align: center; margin: 0 auto 24px; max-width: 500px; }
.td-outro .td-cta { margin-bottom: 0; }

.tool-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tool-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 10px;
  row-gap: 10px;
}

.tool-card-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tool-details-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}
.zone-view--civil .tool-details-btn {
  color: var(--civil-bright);
  border: 1px solid var(--civil-bright);
}
.zone-view--military .tool-details-btn {
  color: var(--mil-bright);
  border: 1px solid var(--mil-bright);
}
.zone-view--civil .tool-details-btn:hover { background: rgba(41,128,185,0.15); }
.zone-view--military .tool-details-btn:hover { background: rgba(194,33,39,0.15); }

/* Dezentes Pulsieren beim Hover/Fokus auf die Karte -- macht darauf
   aufmerksam, dass es zu diesem Programm eine Detailansicht gibt. */
@keyframes toolCardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 0 6px rgba(255,255,255,0.05); }
}
.zone-view--civil .tool-card:hover,
.zone-view--civil .tool-card:active { animation: toolCardPulseCivil 1.4s ease-in-out infinite; }
.zone-view--military .tool-card:hover,
.zone-view--military .tool-card:active { animation: toolCardPulseMil 1.4s ease-in-out infinite; }

@keyframes toolCardPulseCivil {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,128,185,0); }
  50% { box-shadow: 0 0 0 7px rgba(41,128,185,0.18); }
}
@keyframes toolCardPulseMil {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194,33,39,0); }
  50% { box-shadow: 0 0 0 7px rgba(194,33,39,0.18); }
}

.tool-row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.5vw, 22px);
  letter-spacing: 0.01em;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.zone-view--civil .tool-row-title { color: var(--civil-bright); }
.zone-view--military .tool-row-title { color: var(--mil-bright); }

.tool-row-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.tool-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 5px 9px;
  border-radius: 3px;
  white-space: nowrap;
}

.tool-badge--live {
  color: #2f9e6e;
  border-color: #2f9e6e;
  background: rgba(47,158,110,0.1);
}

/* ---------- TOPBAR (fixe, immer sichtbare Leiste: Logo+Name links,
   Hover-Icon-Navigation, "Demo anfordern" ganz rechts) ---------- */
.site-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(13px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) 13px calc(22px + env(safe-area-inset-left));
  background: rgba(5,5,5,0.74);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--text-main);
}
.topbar-brand img {
  width: 32px;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 10px rgba(194,33,39,0.4));
}
.topbar-brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.topbar-brand-text small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.09em;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 3px;
}
.topbar-brand:hover .topbar-brand-text { color: var(--text-main); }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }

.topbar-link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 9px;
  flex: 0 0 auto;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 2px;
  transition: color 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
}

.topbar-link:hover,
.topbar-link:focus-visible {
  background: rgba(255,255,255,0.07);
  color: var(--text-main);
}

.topbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.topbar-icon svg { width: 100%; height: 100%; }

.topbar-label {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.28s ease, opacity 0.2s ease, margin-left 0.28s ease;
}

/* Das Ausklappen des Labels beim Hover verschiebt per Layout alle Icons
   rechts davon (flex-Zeile, jedes Label wird breiter). Auf Touch-Geraeten
   (Tablet/Handy) loest schon ein Tap :hover aus ("sticky hover" in mobilen
   Browsern) - waehrend des Ausklappens rutscht dann das naechste Icon unter
   den Finger, wodurch ein Tippen auf ein Icon auch den Nachbarn rechts davon
   mit-aktiviert. Fix: das animierte Ausklappen gibt es nur noch fuer echte
   Maus-/Trackpad-Geraete (hover:hover + pointer:fine). Auf Touch-Geraeten
   bleibt es bei den kompakten Icons ohne Layout-Sprung - matcht damit auch
   das bestehende Verhalten unter 640px (dort ohnehin per display:none aus). */
@media (hover: hover) and (pointer: fine) {
  .topbar-link:hover .topbar-label,
  .topbar-link:focus-visible .topbar-label {
    max-width: 170px;
    opacity: 1;
    margin-left: 8px;
  }
}

.topbar-link.current .topbar-label {
  max-width: 170px;
  opacity: 1;
  margin-left: 8px;
}

.topbar-link.current { color: var(--text-main); }
.topbar-link[data-nav-mode="landing"].current { color: var(--landing-bright); }
.topbar-link[data-nav-mode="civil"].current { color: var(--civil-bright); }
/* --mil-bright liegt auf dunklem Grund nur bei 3.4:1 Kontrast (siehe Begruendung
   bei --mil-bright-text weiter oben) - fuer den 11px-Navigationstext braucht es
   4.5:1, deshalb hier die dafuer vorgesehene hellere Variante statt der
   Ueberschriftenfarbe. */
.topbar-link[data-nav-mode="military"].current { color: var(--mil-bright-text); }
.topbar-link[data-nav-mode="contact"].current { color: var(--contact-bright); }
.topbar-link[data-nav-mode="legal"].current { color: var(--legal-bright); }
.topbar-link[data-nav-mode="social"].current { color: var(--social-bright); }
.topbar-link[data-nav-mode="history"].current { color: var(--history-bright); }
.topbar-link[data-nav-mode="programs"].current { color: var(--programs-bright); }
.topbar-link[data-nav-mode="faq"].current { color: var(--faq-bright); }

/* Bewusst EINE neutrale Farbe fuer alle neun Seiten statt an --mil-bright
   gekoppelt (der urspruengliche Zustand) - die Website trennt zivil/militaerisch
   sonst konsequent farblich, und ausgerechnet der auffaelligste Knopf haette auf
   jeder zivilen Seite die militaerische Farbe getragen. --landing-bright hat
   ausserdem den besten Kontrast aller Akzentfarben (9.56:1). */
.topbar-cta {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 10px 18px;
  border: 1px solid var(--landing-bright);
  background: var(--landing-bright);
  color: #050505;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.topbar-cta:hover {
  background: #34b57a;
  box-shadow: 0 8px 22px rgba(67,201,139,0.35);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .topbar-brand-text small { display: none; }
  .topbar-cta { padding: 9px 14px; }
}

@media (max-width: 640px) {
  .site-topbar { gap: 8px; padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
  .topbar-brand-text { display: none; }
  .topbar-brand img { width: 28px; }
  .topbar-link { padding: 0 7px; }
  .topbar-label { display: none; }
  .topbar-link.current { background: rgba(255,255,255,0.07); }
  .topbar-cta { padding: 9px 12px; font-size: 10px; }
  /* Unter 640px passen nicht alle neun Symbole in die Breite und die
     Leiste ist waagrecht wischbar (overflow-x: auto) - die Scrollleiste
     selbst ist aber bewusst ausgeblendet (siehe .topbar-nav weiter oben),
     ohne diesen Verlauf sieht die Leiste dadurch vollstaendig aus und
     niemand wischt in einer Leiste, von der er nicht weiss, dass sie
     weitergeht. Rein optisch, blockiert keine Klicks (mask betrifft nur
     die Darstellung, nicht die Interaktion). */
  .topbar-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  }
}

/* ---------- Mobile: Split-Layout ergibt keinen Sinn -> zentriert, voller Scrim ---------- */
@media (max-width: 760px) {
  .spine-scrim { background: rgba(5,5,5,0.72); }
  .hero { justify-content: center; padding: 90px 24px 60px; }
  .hero-inner { text-align: center; }
  .zone-view { align-items: stretch; padding: 110px 20px 50px; }
  .zone-view-inner { text-align: center; }
  .tool-grid { grid-template-columns: 1fr; }
}

/* ---------- DIVE OVERLAY ---------- */


/* PAGE-MODE */
.zone-view.is-page { position: static; z-index: auto; opacity: 1; visibility: visible; pointer-events: auto; overflow: visible; min-height: 100vh; }
.zone-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); margin-bottom: 16px; }
.td-feature-card h3 { font-family: var(--font-display); font-size: clamp(16px, 1.3vw, 19px); font-weight: 700; color: var(--text-main); margin-bottom: 10px; }
.zone-view--civil .td-feature-card h3 { color: var(--civil-bright); }
.zone-view--military .td-feature-card h3 { color: var(--mil-bright); }

/* Aus index.html ausgelagerte Inline-Styles */
.info-box {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 28px 30px;
  background: rgba(255,255,255,0.02);
  text-align: left;
  max-width: 820px;
  margin: 6vh auto 0;
}
.info-box--programs { border-left-color: var(--civil-bright); }
.info-box--faq { border-left-color: var(--mil-bright); margin-top: 30px; }
.program-block { margin-bottom: 24px; }
.program-block:last-child { margin-bottom: 0; }
.program-usps { list-style: none; margin: 0; padding: 0; }
.program-usps li { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; padding-left: 20px; position: relative; margin-bottom: 6px; }
.program-usps li::before { content: "→"; position: absolute; left: 0; color: var(--civil-bright); }
.faq-item { margin-bottom: 20px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-answer { font-family: var(--font-body); font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.terms-row { display: flex; align-items: flex-start; gap: 8px; }
.terms-checkbox { margin-top: 3px; width: auto; }
.terms-label { text-transform: none; letter-spacing: normal; font-size: 12px; color: #c7cbcc; }
.terms-link { color: #ff8a8a; }

/* Aus leidang.html / militaer.html ausgelagerte Inline-Styles */
.product-title--leidang { font-size: clamp(2rem, 5.5vw, 3.6rem); }
.product-title--tactical { font-size: clamp(1.8rem, 4.8vw, 3.2rem); }
.product-title-sub { font-size: 0.5em; display: block; font-weight: 600; opacity: 0.85; letter-spacing: 0.5px; margin-top: 6px; }
.product-mission--leidang { max-width: 760px; margin: 14px auto 0; }
.product-mission--tactical { max-width: 780px; margin: 14px auto 0; }
.product-tool-grid { max-width: 1000px; }

/* Aus kontakt.html ausgelagertes Inline-Style */
.zone-lead { max-width: 620px; margin: 10px auto 0; line-height: 1.55; opacity: .85; }

.direct-contact {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.direct-contact-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--contact-bright);
  color: #050505;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.direct-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(245,197,24,0.35); }
.direct-contact-name {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* IT-Audit-Nachpruefung, Barrierefreiheit: nur fuer Screenreader/Crawler
   sichtbare Ueberschriften - fuegt eine korrekte Gliederung ein, ohne das
   bestehende visuelle Design zu veraendern (die Kacheln sprechen fuer sich
   selbst, brauchen visuell keine zusaetzliche Ueberschrift darueber). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* IT-Audit-Nachpruefung, Barrierefreiheit: Tastatur-Alternative zum bisher
   nur per Doppelklick (Maus) erreichbaren Login. Wie ein klassischer
   "Skip-Link": unsichtbar/aus dem Fluss genommen, bis ein Tastaturnutzer
   per Tab dorthin gelangt - dann sichtbar und klar beschriftet. Verrät den
   Zugang nicht an gewoehnliche Maus-Besucher, bleibt aber fuer Tastatur-
   und Screenreader-Nutzung vollstaendig erreichbar. */
.kbd-login-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #050505;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--civil-bright);
  font-size: 13px;
  text-decoration: none;
}
.kbd-login-link:focus {
  left: 50%;
  transform: translateX(-50%);
}
#kbdLoginMil:focus { top: 50px; border-color: var(--mil-bright); }

/* IT-Audit-Nachpruefung, Barrierefreiheit: Skip-Link zum Hauptinhalt - wie
   der Tastatur-Login-Link unsichtbar bis fokussiert, verrringert bei
   Tastaturnutzung die Zahl der Tab-Stopps bis zum eigentlichen Inhalt
   erheblich (sonst muesste man durch das ganze Menue tabben). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #050505;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  text-decoration: none;
  font-size: 14px;
}
.skip-link:focus { left: 0; }

/* IT-Audit-Nachpruefung, Barrierefreiheit: bisher war prefers-reduced-motion
   nur in JavaScript umgesetzt (3D-Hintergrund, Funken-Effekt, Karussells) -
   im CSS liefen scroll-behavior:smooth, die Login-Einblendung und die
   ENDLOS laufenden Kachel-Pulse-Animationen weiterhin unveraendert. Dieser
   Block faengt das global ab, unabhaengig davon, wo eine Animation
   definiert ist oder noch definiert werden wird. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}