/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Child-Theme fuer GENLOC.NETWORK
Author: GENLOC.NETWORK
Author URI: https://genloc.network
Template: blocksy
Version: 2.29.0
Text Domain: blocksy-child
*/

/* ═══════════════════════════════════════════════════
   GENLOC.NETWORK · Mission Control
   Quelle der Sollwerte: relaunch-prototype/css/style.css
   Jede Regel ist kommentiert, wozu sie dient.
   Spezifitaet: Selektoren sind bewusst mit body/html body gescoped,
   weil dieses Stylesheet VOR Blocksy und Elementor laedt und sonst
   deren spaeter geladene Regeln gewinnen wuerden.
   Cache-Busting: bei jeder Aenderung die Version oben hochzaehlen.
   ═══════════════════════════════════════════════════ */

/* Schriften: lokale woff2 aus dem Child-Theme (DSGVO, kein CDN) */
@font-face {
  font-family: 'Orbitron';
  src: url('assets/fonts/orbitron-regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Klein';
  src: url('assets/fonts/klein-regular.woff2') format('woff2');
  font-weight: 300 400; font-display: swap;
}
@font-face {
  font-family: 'Klein';
  src: url('assets/fonts/klein-medium.woff2') format('woff2');
  font-weight: 500 700; font-display: swap;
}
/* Design-Tokens, identisch zum Prototyp (Referenz fuer alle Sollwerte) */
:root {
  --bg: #04060a;
  --ink: #e9edf2;
  --ink-dim: #ced3d9;
  --accent: #ff4400;
  --accent-dim: rgba(255, 68, 0, 0.35);
  /* Terminal-Gruen: EDV-Pendant zum Bernstein der 70er, Signalfarbe der Rettung-Sektion */
  --terminal: #33ff33;
  --terminal-rgb: 51, 255, 51;
  /* Markenfarbe von WhatsApp, nur fuer den Sofortkontakt-Button */
  --whatsapp: #25d366;
  --line: rgba(233, 237, 242, 0.12);
  --line-soft: rgba(233, 237, 242, 0.07);
  --font-sans: 'Klein', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Orbitron', 'Klein', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 84rem;
}

/* Dunkler Grundton und Hausschrift fuer die ganze Site.
   html body noetig, um Blocksys spaeter geladene body-Regel zu schlagen. */
html body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
}

/* Blocksy setzt overflow-x hidden auf den body; zusammen mit
   overflow-y auto wird der body dadurch selbst zum Scroll-Container
   und ScrollTrigger-Pins springen beim Loesen (bekannt aus dem
   Buslove-Projekt). clip klemmt seitlich genauso, erzeugt aber
   keinen Scroll-Container; gescrollt wird wieder das Viewport. */
html body { overflow-x: clip; overflow-y: visible; }

/* Text-Selektion in Markenfarbe, wie im Prototyp */
::selection { background: var(--accent); color: #04140f; }

/* HUD-Label-Stil: klein und versal in der Hausschrift Klein (Vorgabe 14.08.2026,
   loest Space Mono ab). Laufweite enger als bei Space Mono, dafuer Medium,
   sonst wirken Versalien in Klein zu duenn. */
body .mono {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Akzentfarbe fuer einzelne Woerter (z. B. im Hero-h1) */
body .accent { color: var(--accent); }

/* ═══════════ HERO ═══════════ */

/* Hero fuellt den ersten Viewport (min-height nativ am Elementor-Container),
   Inhalt vertikal zentriert, seitliches Polster wie im Prototyp */
body .hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--gutter) 0;
  position: relative;
}

/* Innerer Content-Rahmen des Hero (gemeinsame Maximalbreite der Site) */
body .hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}

/* Kicker-Zeile ueber der Headline (Mono-Label mit Puls-Punkt) */
body .hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-dim);
  margin-bottom: clamp(1.5rem, 4vh, 2.8rem);
}

/* Pulsierender Status-Punkt im Kicker */
body .kicker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
  flex: none;
  display: inline-block;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Hero-Headline in Orbitron, Werte identisch zum Prototyp.
   Klasse sitzt am Elementor-Widget-Wrapper, die h1 liegt darin. */
body h1.hero-title,
body .hero-title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 5rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 1px;
  margin-bottom: 0;
  hyphens: manual;
  color: var(--ink);
}

/* Abstand unter der Headline liegt auf dem Widget-Wrapper */
body .hero-title { margin-bottom: clamp(2rem, 6vh, 3.5rem); }

/* Untere Hero-Zeile: Copy links, CTAs rechts, auf Mobil umbrechend */
body .hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

/* Hero-Fliesstext (gedimmt, begrenzte Zeilenbreite).
   Doppelklasse noetig, damit die 34rem gegen die spaeter folgende
   Breiten-Hilfsregel (.hero-row > .elementor-element) gewinnen. */
body .elementor-widget.elementor-element.hero-copy {
  max-width: 34rem;
  color: var(--ink-dim);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 300;
}
body .hero-copy p { margin: 0; color: inherit; font: inherit; }

/* CTA-Gruppe im Hero. width auto: der Elementor-Container ist sonst
   100% breit und wuerde in der hero-row auf eine eigene Zeile brechen */
body .e-con.hero-ctas { width: auto; }
body .hero-ctas {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}

/* Breite der Widgets in den Hero-Flex-Zeilen regelt Elementor nativ
   (Advanced/Breite: auto), hier keine eigene Regel noetig. */

/* ═══════════ BUTTONS ═══════════ */
/* Auf Elementor-Button-Widgets angewendet: CSS-Klasse am Widget setzt
   .btn-warp bzw. .btn-ghost, gestylt wird der innere <a>.
   body-Scope schlaegt Elementors Kit-Regeln (.elementor-kit-X .elementor-button). */

/* Primaerbutton (Warp): scharfkantiger Outline-Button, Label in Klein versal */
body .btn-warp .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.2rem;
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  overflow: hidden;
  background: none;
  background-color: transparent;
  transition: border-color 0.3s;
}

/* Button-Label: Klein Medium in Akzentfarbe, liegt ueber dem Sweep */
body .btn-warp .elementor-button-text {
  position: relative;
  z-index: 2;
  color: var(--accent);
  transition: color 0.3s;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.6;
}

/* Sweep-Flaeche: faehrt bei Hover von links ein (::before statt Extra-Span) */
body .btn-warp .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  z-index: 1;
}
body .btn-warp .elementor-button:hover,
body .btn-warp .elementor-button:focus-visible { border-color: var(--accent); background: none; background-color: transparent; }
body .btn-warp .elementor-button:hover::before,
body .btn-warp .elementor-button:focus-visible::before { transform: translateX(0); }
body .btn-warp .elementor-button:hover .elementor-button-text,
body .btn-warp .elementor-button:focus-visible .elementor-button-text { color: #03110d; }

/* Sekundaerbutton (Ghost): Textlink mit 1px Unterstrich, Hover in Akzent */
body .btn-ghost .elementor-button {
  position: relative;
  color: var(--ink-dim);
  padding: 0.4rem 0;
  border: none;
  border-radius: 0;
  background: none;
  background-color: transparent;
  transition: color 0.25s;
}
body .btn-ghost .elementor-button-text {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Medium wie bei .mono, Klein wirkt in Versalien sonst zu duenn */
  font-weight: 500;
  color: inherit;
}
body .btn-ghost .elementor-button::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--line);
  transition: background 0.25s;
}
body .btn-ghost .elementor-button:hover,
body .btn-ghost .elementor-button:focus-visible { color: var(--ink); background: none; background-color: transparent; }
body .btn-ghost .elementor-button:hover::after,
body .btn-ghost .elementor-button:focus-visible::after { background: var(--accent); }

/* CTA-Paare (Haupt-CTA + Sofortkontakt) atmen wie im Prototyp: 2.2rem statt
   Elementors 20px-Standardluecke. Greift automatisch auf jeder Seite, die den
   Sofortkontakt-Button enthaelt. */
body .e-con:has(> .elementor-widget.btn-whatsapp) {
  gap: 2.2rem;
  align-items: center;
}

/* Sofortkontakt: zweiter Button neben dem Haupt-CTA, in WhatsApp-Gruen.
   Gleiche Geometrie wie .btn-warp, damit beide auf einer Linie sitzen.
   Kein btn-warp, also bewusst kein Sternenfeld-Schub beim Hover. */
body .btn-whatsapp .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.2rem;
  border: 1px solid rgba(37, 211, 102, 0.45);
  border-radius: 0;
  background: none;
  background-color: transparent;
  color: var(--whatsapp);
  overflow: hidden;
  transition: border-color 0.3s, color 0.3s;
}
body .btn-whatsapp .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
body .btn-whatsapp .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  /* Elementors eigener Abstand faellt weg, den Abstand macht das gap oben */
  margin: 0;
  font-size: 1.05rem;
  color: inherit;
}
body .btn-whatsapp .elementor-button-text {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: inherit;
}
/* Fuellung wischt von links ein, wie beim Warp-Button */
body .btn-whatsapp .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--whatsapp);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  z-index: 1;
}
body .btn-whatsapp .elementor-button:hover,
body .btn-whatsapp .elementor-button:focus-visible {
  border-color: var(--whatsapp);
  color: #04140b;
  background: none;
  background-color: transparent;
}
body .btn-whatsapp .elementor-button:hover::before,
body .btn-whatsapp .elementor-button:focus-visible::before { transform: translateX(0); }
body .btn-whatsapp .elementor-button:after { display: none !important; }

/* Scroll-Hinweis unten rechts im Hero (Mono-Miniatur mit Lauflinie) */
body .hero-scrollcue {
  position: absolute;
  bottom: 4.5rem;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink-dim);
  font-size: 0.6rem;
}
body .scrollcue-line {
  width: 1px;
  height: 3.5rem;
  background: var(--line);
  position: relative;
  overflow: hidden;
  display: block;
}
body .scrollcue-line::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--accent);
  animation: scrollcue 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes scrollcue {
  0% { top: -50%; }
  100% { top: 110%; }
}

/* ═══════════ UEBER UNS ═══════════ */

/* Kleinere Hero-Headline der Unterseiten */
body .hero-title-sm .elementor-heading-title,
body h1.hero-title-sm { font-size: clamp(1.6rem, 4vw, 4rem); }

/* Werte: 4 Zellen mit 1px-Fugen (wie Telemetrie) */
body .value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
body .e-con.value {
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.5rem, 2.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 13rem;
}
body .value-no { color: var(--accent); }
body .value-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
body .value-copy {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.92rem;
}

/* Logbuch: Lead-Absatz und Eintragszeilen mit Hover-Linie */
body .logbuch-lead {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 44rem;
  margin: -1.5rem 0 clamp(2.5rem, 6vh, 4rem);
}
body .e-con.log-entry {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 2rem;
  padding: clamp(1.8rem, 4vh, 2.8rem) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  width: 100%;
}
body .log-list > .e-con.log-entry:last-child { border-bottom: 1px solid var(--line); }
body .e-con.log-entry::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
body .e-con.log-entry:hover { padding-left: 1rem; }
body .e-con.log-entry:hover::before { width: 100%; }
body .log-no { color: var(--accent); padding-top: 0.3rem; }
body .log-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
body .elementor-widget.log-title { margin-bottom: 0.7rem; }
body .log-copy {
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 42rem;
}

/* Meilensteine: vertikale Timeline mit Leuchtpunkten */
body .timeline {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  margin-left: 0.4rem;
}
body .e-con.timeline-entry {
  position: relative;
  padding: 0 0 clamp(2.2rem, 5vh, 3.2rem) clamp(1.8rem, 4vw, 3.5rem);
  display: block;
}
body .e-con.timeline-entry::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0.85em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-dim);
}
body .timeline-year {
  display: block;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body .timeline-copy {
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 36rem;
}
/* Heute-Eintrag in Akzent (steht nach .timeline-year und gewinnt daher) */
body .timeline-year.accent { color: var(--accent); }

/* Crew-Karten: 3 Zellen, Monogramm in Mono-Orange */
body .crew-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
body .e-con.crew-card {
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.8rem, 3vw, 2.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background 0.3s;
}
body .e-con.crew-card:hover { background: rgba(255, 68, 0, 0.04); }
body .crew-monogram {
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1.4rem;
  opacity: 0.85;
  display: block;
}
body .crew-name .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
body .crew-rank { color: var(--accent); margin-bottom: 0.6rem; }
body .crew-duties {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.92rem;
}

/* Antrieb-CTA: Rettungs-Kasten in Akzent-Variante */
body .e-con.rettung-inner.antrieb-inner {
  border-color: var(--accent-dim);
  /* !important wie bei .rettung-inner, siehe Kommentar dort */
  background-image: linear-gradient(120deg, rgba(255, 68, 0, 0.06), rgba(5, 8, 12, 0.78) 55%) !important;
}
/* zwei Klassen, damit die Regel gegen das spaeter stehende body .rettung-signal gewinnt */
body .rettung-signal.antrieb-signal { color: var(--accent); }
body .antrieb-signal .signal-dot {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
body .antrieb .rettung-title .elementor-heading-title { max-width: 26ch; }

/* ═══════════ DIENSTLEISTUNGEN HUB ═══════════ */

/* Verlinkte Hub-Karten: 3-Spalten-Grid mit Hover-Linie (wie module) */
body .e-con.service-hub-card {
  display: grid;
  grid-template-columns: 6rem 1fr 10rem;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 5vh, 3.5rem) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  width: 100%;
}
body .service-hub-grid > .e-con.service-hub-card:last-child { border-bottom: 1px solid var(--line); }
body .e-con.service-hub-card::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
body .e-con.service-hub-card:hover { padding-left: 1rem; }
body .e-con.service-hub-card:hover::before { width: 100%; }
body .service-hub-no { color: var(--accent); }
body .service-hub-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
body .elementor-widget.service-hub-title { margin-bottom: 0.5rem; }
body .service-hub-claim { color: var(--accent); font-weight: 300; margin-bottom: 0.6rem; }
body .service-hub-copy { color: var(--ink-dim); font-weight: 300; max-width: 40rem; }
body .service-hub-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-dim);
  transition: color 0.3s, gap 0.3s;
  white-space: nowrap;
}
body .e-con.service-hub-card:hover .service-hub-cta { color: var(--accent); gap: 1rem; }

/* Breadcrumb-Kicker der Detailseiten */
body .sub-crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-dim);
  margin-bottom: clamp(1.5rem, 4vh, 2.8rem);
}
body .sub-crumb a { color: var(--ink-dim); transition: color 0.25s; }
body .sub-crumb a:hover { color: var(--accent); }
body .sub-crumb span { color: var(--line); }

/* ═══════════ SERVICE-DETAIL: PROZESS + SYSTEM-KARTEN ═══════════ */

body .intro-lead {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 44rem;
  margin: -1.5rem 0 clamp(2.5rem, 6vh, 4rem);
}

/* Prozess-Liste: nummerierte Kreise an vertikaler Linie */
body .process-list {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  margin-left: 0.4rem;
}
body .e-con.process-step {
  position: relative;
  padding: 0 0 clamp(2rem, 4.5vh, 3rem) clamp(1.8rem, 4vw, 3.5rem);
  display: block;
}
body .e-con.process-step::before {
  content: attr(data-step);
  position: absolute;
  left: -0.85rem;
  top: 0.15em;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Elementor kann keine data-Attribute setzen: Nummer als Span im Titel-Widget */
body .process-no {
  position: absolute;
  left: -0.85rem;
  top: 0.15em;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .process-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
body .elementor-widget.process-title { margin-bottom: 0.5rem; }
body .process-copy { color: var(--ink-dim); font-weight: 300; max-width: 38rem; }

/* System-Karten: 3er-Raster mit 1px-Fugen */
body .system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
body .e-con.system-card {
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.6rem, 2.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
body .system-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  color: var(--accent);
  margin: 0;
}
body .system-copy { color: var(--ink-dim); font-weight: 300; font-size: 0.92rem; }

@media (max-width: 980px) {
  /* Kennzahlen-Leiste auf Phone/Tablet als 2x2 statt 4 Spalten
     (Doppelklasse, weil die 4-Spalten-Basisregel spaeter in der Datei steht) */
  body .e-con.stats-grid { grid-template-columns: 1fr 1fr; }
  /* Crew-Zweispalter (Text + All-inclusive-Kasten) untereinander */
  body .e-con.crew-grid { grid-template-columns: 1fr; }
  /* Flugplan: Phasen untereinander statt 4 gequetschter Spalten
     (Prototyp-Mobilregel; der Scroll-Pin ist ohnehin Desktop-only) */
  body .e-con.flugplan-track { flex-direction: column; }
  /* nowrap zwingend: mit wrap + Spaltenrichtung kippen die Kinder
     sonst seitlich in neue Spalten aus dem Viewport */
  body .e-con.flugplan-track > .e-con.phase {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
  }
  /* Modul-Zeilen: schmale Nummernspalte, Pfeil weg, engerer Gap
     (Prototyp-Mobilregel), damit der Text die Breite nutzt */
  body .module-list > .e-con.module,
  body .e-con.module { grid-template-columns: 4rem 1fr; gap: 1.2rem; }
  body .module-list > .e-con.module .module-arrow { display: none; }
  body .value-grid { grid-template-columns: 1fr 1fr; }
  body .e-con.value { min-height: 0; }
  body .crew-cards { grid-template-columns: 1fr; }
  body .e-con.log-entry { grid-template-columns: 4.5rem 1fr; gap: 1.2rem; }
  body .e-con.service-hub-card { grid-template-columns: 4rem 1fr; }
  body .service-hub-cta { display: none; }
  body .system-grid { grid-template-columns: 1fr; }
}
/* Harte <br>-Umbrueche der Ueberschriften stammen aus dem Desktop-Layout;
   sobald die erste Zeile nicht mehr in eine Zeile passt, kollidieren sie
   mit dem natuerlichen Umbruch (Waisenwoerter wie ein einzelnes "mehr").
   Unterhalb des Desktop-Layouts fliesst der Text deshalb frei. */
@media (max-width: 1024px) {
  body .section-title .elementor-heading-title br,
  body .rettung-title .elementor-heading-title br,
  body .finale-title .elementor-heading-title br { display: none; }
}

@media (max-width: 560px) {
  body .value-grid { grid-template-columns: 1fr; }
  /* Ganz schmale Screens: Nummern ueber den Text stellen,
     damit die volle Breite fuer den Inhalt bleibt */
  body .module-list > .e-con.module { grid-template-columns: 1fr; gap: 0.6rem; }
  body .log-list > .e-con.log-entry { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ═══════════ PREISE / ABO ═══════════ */

/* Monats/Jahres-Toggle (Logik in gn-chrome.js, 12 bzw. 10 Raten) */
body .price-toggle {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
body .price-toggle-label { color: var(--ink-dim); transition: color 0.25s; }
body .price-toggle-label.is-active { color: var(--ink); }
body .price-toggle-switch {
  position: relative;
  width: 3.4rem;
  height: 1.7rem;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
}
body .price-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: calc(1.7rem - 6px);
  height: calc(1.7rem - 6px);
  background: var(--accent);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
body .price-toggle-switch.is-yearly::after { transform: translateX(1.7rem); }
body .price-toggle-save { color: var(--accent); font-size: 0.62rem; }
body .price-yearly-note {
  color: var(--ink-dim);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  margin-top: -0.6rem;
  margin-bottom: 1.3rem;
  opacity: 0.85;
}
body .price-yearly-note .accent { opacity: 1; }

/* Einleitung ueber dem Glossar-Raster: Lesegroesse wie der uebrige Fliesstext,
   nicht die Fussnoten-Groesse von .form-note (11px), die dort vorher stand. */
body .glossary-intro {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink-dim);
  max-width: 46rem;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}

/* Weiterfuehrender Link je Begriff im Raster, fuehrt auf die Einzelseite */
body .glossary-more {
  display: inline-block;
  margin-top: 0.9rem;
  padding-bottom: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: color 0.25s, border-color 0.25s;
}
body .glossary-more:hover,
body .glossary-more:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ═══════════ GLOSSAR-EINZELSEITEN ═══════════ */

/* Die Begriffsseiten laufen ueber Blocksys Standard-Template, nicht ueber
   Elementor. Ohne diese Regeln lief die Ueberschrift unter den fixierten
   Header (79px Ueberlappung) und es standen Autor und Datum darueber. */
body.single-glossary .entry-header {
  padding-top: clamp(9rem, 16vh, 12rem);
}
body.single-glossary .entry-header .page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ink);
}
/* Autor und Datum sind bei einem Lexikon-Eintrag ohne Aussage */
body.single-glossary .entry-meta,
body.single-glossary .ct-share-box,
body.single-glossary .post-navigation { display: none; }

body.single-glossary .entry-content {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.8;
  color: var(--ink-dim);
  max-width: 46rem;
}

/* Rueckweg ins Glossar, wird vom Plugin GENLOC Glossar angehaengt */
body.single-glossary .glossar-zurueck {
  display: inline-block;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: 0.4rem 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: color 0.25s, border-color 0.25s;
}
body.single-glossary .glossar-zurueck:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
body.single-glossary .glossar-kategorie {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Footer: die Navigationsspalte ist entfallen (der Header ist klebrig und
   verlinkt dieselben Seiten). Blocksy laesst den leeren Bereich als
   "ghost"-Spalte stehen, die hier keinen Platz mehr belegen soll.
   Die verbliebenen drei Spalten bekommen dadurch spuerbar mehr Breite. */
body #footer [data-column="ghost"] { display: none; }

/* Footer auf dieselbe Breite wie Header und Inhalt bringen. Blocksy gibt dem
   Footer-Container 90vw, waehrend Header und Inhalt volle Breite mit 56px
   Innenabstand nutzen. Dadurch stand der Footer sichtbar schmaler. */
body #footer .ct-container {
  width: 100% !important;
  max-width: 1456px !important;
}
body #footer [data-row="middle"] > .ct-container {
  /* Erste Spalte traegt Logo und Beschreibung, deshalb etwas breiter,
     die drei Textspalten teilen sich den Rest zu gleichen Teilen.
     !important noetig: dieses Stylesheet laedt vor Blocksy, dessen Regel
     setzt die Spalten aus der Customizer-Variable repeat(5, 1fr). */
  grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
}
/* Mobil: Logo und Beschreibung ueber die volle Breite, darunter Anschrift und
   Kontakt nebeneinander, Rechtliches wieder ueber die volle Breite. Ohne
   !important gewinnen Blocksys eigene Mobilregeln, dann stehen alle drei
   Textspalten in 52px-Saeulen nebeneinander. */
@media (max-width: 800px) {
  body #footer [data-row="middle"] > .ct-container {
    grid-template-columns: 1fr 1fr !important;
    column-gap: clamp(1.5rem, 6vw, 2.5rem) !important;
    row-gap: clamp(2rem, 6vh, 3rem) !important;
  }
  body #footer [data-column="widget-area-1"],
  body #footer [data-column="widget-area-5"] {
    grid-column: 1 / -1;
  }
}
/* Anschrift und Kontakt stehen mobil nebeneinander und haben beide drei
   Zeilen, sahen aber unterschiedlich lang aus: die Anschrift ist ein Absatz
   mit enger Zeilenhoehe, der Kontakt eine Liste mit Abstand zwischen den
   Punkten. Hier auf gleiche Hoehe gebracht, rund 89px, indem die Anschrift
   luftiger und der Kontakt enger gesetzt wird. */
@media (max-width: 800px) {
  /* Beide Bloecke auf denselben Rhythmus: gleiche Schriftgroesse, gleiche
     Zeilenhoehe, kein zusaetzlicher Listenabstand. Dadurch sind drei Zeilen
     hier wie dort exakt gleich hoch, unabhaengig von der Geraetebreite.
     Nur den Abstand zu justieren reichte nicht, weil die Kontaktliste mit
     16px gesetzt war und die Anschrift mit 14.08px. */
  body #footer [data-column="widget-area-2"] .footer-col p,
  body #footer [data-column="widget-area-3"] .footer-col ul,
  body #footer [data-column="widget-area-3"] .footer-col li,
  body #footer [data-column="widget-area-3"] .footer-col a {
    font-size: 0.88rem;
    line-height: 2.1;
  }
  body #footer [data-column="widget-area-3"] .footer-col ul { gap: 0; }
  /* Blocksys Listenlayout legt je Punkt ein paar Pixel auf die Zeilenhoehe
     drauf, die Groesse schwankt. Deshalb bekommt jeder Punkt exakt die
     Zeilenhoehe des Anschrift-Absatzes als feste Hoehe (2.1em). Drei Punkte
     sind damit rechnerisch genauso hoch wie drei Textzeilen, unabhaengig
     von Geraet und Schriftgroesse. */
  body #footer [data-column="widget-area-3"] .footer-col li {
    height: 2.1em;
    display: flex;
    align-items: center;
  }
}

/* Rechtliches steht mobil ueber die volle Breite. Drei kurze Links
   untereinander verschenken diese Breite, deshalb nebeneinander in einer
   Zeile, getrennt durch einen dezenten Mittelpunkt. */
@media (max-width: 800px) {
  body #footer [data-column="widget-area-5"] .footer-col ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.4rem;
  }
  body #footer [data-column="widget-area-5"] .footer-col li {
    position: relative;
    height: auto;
  }
  body #footer [data-column="widget-area-5"] .footer-col li + li::before {
    content: '\00b7';
    position: absolute;
    left: -0.85rem;
    color: var(--line);
  }
}

/* Sehr schmale Geraete: alles untereinander, zwei Spalten waeren zu eng */
@media (max-width: 360px) {
  body #footer [data-row="middle"] > .ct-container {
    grid-template-columns: 1fr !important;
  }
}

/* Interne Textlinks im Fliesstext: erkennbar, aber ohne den Lesefluss zu zerhacken.
   Haarlinie in Akzent-Dim, die beim Ueberfahren voll aufleuchtet. */
body .text-link {
  color: inherit;
  border-bottom: 1px solid var(--accent);
  transition: color 0.25s, border-color 0.25s;
}
body .text-link:hover,
body .text-link:focus-visible { color: var(--accent); }

/* Sichtbarer Absprung je System-Karte. Bewusst ein <span> statt <a>: die ganze
   Karte ist bereits ein Link, ein Link im Link waere ungueltiges Markup. */
body .module-cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.4rem 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: color 0.25s, border-color 0.25s;
}
body .module:hover .module-cta,
body .module:focus-visible .module-cta {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Die Plakette "Bestes Angebot" ist absolut positioniert, ihr Elementor-Wrapper
   zaehlte in der Flex-Spalte der Karte aber weiter als Element und erzeugte eine
   zusaetzliche Luecke von einem gap (20px). Dadurch sass der Inhalt der
   hervorgehobenen Karte tiefer als bei den Nachbarn. display:contents loest den
   Wrapper auf, die Plakette richtet sich danach direkt an der Karte aus. */
body .price-card > .elementor-element:has(> .price-badge) { display: contents; }

/* "2 Monate geschenkt" bei jaehrlicher Zahlung: bewusst als gefuellte Plakette,
   damit der Vorteil sofort ins Auge faellt und nicht in der Kleinschrift untergeht. */
body .price-gift {
  display: table;
  margin-top: 0.6rem;
  padding: 0.3rem 0.65rem;
  background: var(--accent);
  color: #04060a;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 1;
}

/* Preiskarten-Raster (4er Standard, 3er fuer das Abo) */
body .price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  align-items: stretch;
}
body .price-grid-3 { grid-template-columns: repeat(3, 1fr); }
body .e-con.price-card {
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.6rem, 2vw, 2.2rem);
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Hervorgehobene Karte: Akzent-Rahmen statt Schatten (Design-Regel) */
body .e-con.price-card.is-featured {
  background: rgba(255, 68, 0, 0.04);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
body .price-badge {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--accent);
  color: #03110d;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
}
body .price-name .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
body .price-amount {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body .price-amount span {
  font-size: 0.9rem;
  color: var(--ink-dim);
  font-weight: 400;
}
body .price-desc {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.85rem;
  margin-bottom: 1.4rem;
  min-height: 3.2em;
}
body .price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 0 1.6rem;
  padding: 0;
  flex: 1;
}
body .price-features li {
  color: var(--ink-dim);
  font-size: 0.82rem;
  font-weight: 300;
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
  list-style: none;
}
body .price-features li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--accent);
}
body .e-con.price-card .btn-ghost { align-self: flex-start; }

/* Fussnote unter den Paketen */
body .form-note {
  color: var(--ink-dim);
  font-size: 0.7rem;
  opacity: 0.8;
  margin-top: 1.5rem;
  max-width: 52rem;
}

/* Konditionen als Kacheln (Kundenvorgabe statt Listenform):
   1px-Fugen-Raster wie die System-Karten, Mono-Label als Kacheltitel */
body .terms-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
body .e-con.terms-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  transition: background 0.3s;
}
body .e-con.terms-row:hover { background: rgba(255, 68, 0, 0.04); }
body .terms-label {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.6rem;
}
@media (max-width: 980px) { body .terms-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body .terms-list { grid-template-columns: 1fr; } }
body .terms-value {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.92rem;
}
body .terms-value strong { color: var(--ink); font-weight: 500; }

/* Beispielrechnung-Box in Akzent-Optik */
body .e-con.calc-box {
  border: 1px solid var(--accent-dim);
  background: linear-gradient(120deg, rgba(255, 68, 0, 0.06), rgba(5, 8, 12, 0.78) 55%);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  max-width: 46rem;
}
body .calc-box-title { color: var(--accent); margin-bottom: 1rem; display: block; }
body .e-con.calc-box p {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}
body .e-con.calc-box .calc-result {
  color: var(--ink);
  font-weight: 500;
  font-size: 1.05rem;
  margin-top: 0.8rem;
  font-variant-numeric: tabular-nums;
}
body .e-con.calc-box .calc-result .accent { font-weight: 700; }

/* Lizenz-Karten: 2-Spalten-Variante des System-Grids */
body .license-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

@media (max-width: 980px) {
  body .price-grid, body .price-grid-3 { grid-template-columns: 1fr 1fr; }
  body .e-con.terms-row { grid-template-columns: 1fr; gap: 0.4rem; }
  body .license-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body .price-grid, body .price-grid-3 { grid-template-columns: 1fr; }
}

/* ═══════════ PORTFOLIO ═══════════ */

/* Verlinkte Referenz-Zeilen mit Hover-Linie (Muster wie module) */
body .e-con.portfolio-card {
  display: grid;
  grid-template-columns: 6rem 1fr 14rem;
  gap: 2rem;
  padding: clamp(2rem, 4.5vh, 3.2rem) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  width: 100%;
}
body .portfolio-grid > .e-con.portfolio-card:last-child { border-bottom: 1px solid var(--line); }
body .e-con.portfolio-card::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
body .e-con.portfolio-card:hover { padding-left: 1rem; }
body .e-con.portfolio-card:hover::before { width: 100%; }
body .portfolio-no { color: var(--accent); padding-top: 0.3rem; }
body .portfolio-name .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
body .elementor-widget.portfolio-name { margin-bottom: 0.9rem; }
body .portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}
body .portfolio-tags span {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 0.35rem 0.7rem;
}
body .portfolio-link {
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-dim);
  transition: color 0.3s, gap 0.3s;
  white-space: nowrap;
}
body .e-con.portfolio-card:hover .portfolio-link { color: var(--accent); gap: 1rem; }
@media (max-width: 980px) {
  body .e-con.portfolio-card { grid-template-columns: 4rem 1fr; }
  body .portfolio-link { display: none; }
}

/* ═══════════ BLOG (statisches Listing, spaeter dynamisch) ═══════════ */

body .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
body .e-con.blog-card {
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.6rem, 2.2vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.3s;
}
body .e-con.blog-card:hover { background: rgba(255, 68, 0, 0.04); }
body .blog-meta { display: flex; gap: 1rem; color: var(--ink-dim); }
body .blog-meta .accent { color: var(--accent); }
body .blog-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
body .elementor-widget.blog-title { flex: 1; }
body .blog-excerpt { color: var(--ink-dim); font-weight: 300; font-size: 0.88rem; }
body .blog-readmore a, body a.blog-readmore, body .blog-readmore {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  transition: gap 0.3s;
}
body .e-con.blog-card:hover .blog-readmore { gap: 0.9rem; }
@media (max-width: 980px) { body .blog-grid { grid-template-columns: 1fr; } }

/* ═══════════ GLOSSAR ═══════════ */

body .glossary-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
body .glossary-chip {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  background: none;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
  border-radius: 0;
}
body .glossary-chip:hover { color: var(--ink); }
body .glossary-chip.is-active { color: var(--accent); border-color: var(--accent-dim); }
body .glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
/* Gilt fuer beide Bauformen: fruehere Elementor-Container und die schlichten
   Divs, die das Glossar-Plugin erzeugt. Ohne die zweite Variante standen die
   Begriffe ohne Innenabstand und ohne Kartenflaeche im Raster. */
body .e-con.glossary-term,
body .glossary-grid > .glossary-term {
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: opacity 0.3s, background 0.3s;
}
body .e-con.glossary-term:hover { background: rgba(255, 68, 0, 0.04); }
body .e-con.glossary-term.is-hidden,
body .glossary-term.is-hidden { display: none; }
body .glossary-cat { color: var(--accent); font-size: 0.6rem; display: block; margin-bottom: 0.7rem; }
body h3.glossary-word {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
body .glossary-def {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.92rem;
  margin: 0;
  /* Netz unter der serverseitigen Kuerzung: hoechstens vier Zeilen, damit
     alle Karten gleich hoch bleiben, egal wie lang die Erklaerung ist. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Der Mehr-Link soll unten buendig stehen, auch wenn der Text kuerzer ist */
body .glossary-grid > .glossary-term { justify-content: flex-start; }
body .glossary-grid > .glossary-term .glossary-more { margin-top: auto; padding-top: 0.9rem; }
@media (max-width: 980px) { body .glossary-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body .glossary-grid { grid-template-columns: 1fr; } }

/* ═══════════ KONTAKT (Fluent Forms im HUD-Look) ═══════════ */

/* Zweispalter: Formular links, Direktkontakt rechts */
body .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 980px) {
  body .contact-grid { grid-template-columns: 1fr; }
}

/* Fluent-Forms-Elemente auf die Prototyp-Formularoptik gemappt */
body .fluentform .ff-el-input--label label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
body .fluentform .ff-el-form-control {
  background: rgba(233, 237, 242, 0.03);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s, background 0.25s;
}
body .fluentform textarea.ff-el-form-control { resize: vertical; min-height: 8rem; }
body .fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 68, 0, 0.03);
  box-shadow: none;
}
body .fluentform .ff-el-form-check-label,
body .fluentform .ff_t_c {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.6;
}
body .fluentform .ff-el-group { margin-bottom: 1.6rem; }

/* Absende-Button im Warp-Look (gleiche Optik wie .btn-warp).
   Dreifachklasse plus !important auf den kritischen Werten, weil
   Fluent Forms formular-spezifische Button-Styles nachlaedt. */
body .fluentform .ff-btn.ff-btn-submit.ff_btn_style,
body .fluentform .ff-btn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.2rem;
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  overflow: hidden;
  background: none !important;
  color: var(--accent) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--accent-dim) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
  z-index: 0;
}
body .fluentform .ff-btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  z-index: -1;
}
body .fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover,
body .fluentform .ff-btn-submit:hover { border-color: var(--accent) !important; color: #03110d !important; }
body .fluentform .ff-btn-submit:hover::before { transform: translateX(0); }

/* Erfolgs-/Fehlermeldungen dezent im HUD-Stil */
body .fluentform .ff-message-success {
  background: rgba(255, 68, 0, 0.06);
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  color: var(--ink);
}
body .fluentform .error.text-danger { color: var(--accent); font-size: 0.78rem; }

/* Direktkontakt-Spalte */
body .contact-side {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
body .contact-block-title {
  color: var(--accent);
  margin-bottom: 0.9rem;
  display: block;
}
body .contact-block a, body .contact-block p {
  display: block;
  color: var(--ink-dim);
  font-weight: 300;
  margin: 0 0 0.3rem;
  transition: color 0.25s;
}
body .contact-block a:hover { color: var(--accent); }

/* ═══════════ FLIESSTEXT-SEITEN (Impressum, Datenschutz, AGB) ═══════════ */

/* Lesespalte fuer Rechtstexte */
body .gn-prose {
  max-width: 44rem;
  color: var(--ink-dim);
  font-weight: 300;
}
body .gn-prose p { margin: 0 0 1.2rem; }
body .gn-prose h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2.2rem 0 0.9rem;
}
body .gn-prose h2:first-child { margin-top: 0; }

/* Link-Auszeichnung im Fliesstext: Ink mit Akzent-Unterstrich,
   bei Hover komplett Akzent (Ghost-Link-Logik des Design-Systems) */
body .gn-prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--accent-dim);
  transition: color 0.25s, border-color 0.25s;
}
body .gn-prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ═══════════ WORDPRESS-ANPASSUNGSSCHICHT ═══════════ */

/* Elementor-Ueberschriften erben die Ink-Farbe statt Theme-Defaults.
   :where() drueckt die Spezifitaet auf (0,0,1): sonst gewinnt diese
   spaete Regel das Unentschieden gegen die Farbklassen und Headings
   in verlinkten Karten (Portfolio, Hub) erben das Blocksy-Linkblau. */
body :where(.elementor-widget-heading .elementor-heading-title) { color: inherit; }

/* Kein grauer Elementor-Default auf Text-Widgets innerhalb des Hero */
body .hero .elementor-widget-text-editor { color: inherit; }

/* ═══════════ GLOBALES CHROME (Canvas, Preloader, HUD, Cursor) ═══════════ */
/* Markup wird von gn-chrome.js injiziert; Werte 1:1 aus dem Prototyp. */

/* WebGL-Sternenfeld liegt fix hinter allem */
body #scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Seiteninhalt muss ueber dem Canvas liegen */
body .elementor { position: relative; z-index: 10; }

/* Warp-Flash: radiale Aura bei Warp-Spruengen und Meilensteinen */
body .warp-flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: radial-gradient(ellipse at center, rgba(210, 255, 250, 0.95), rgba(255, 68, 0, 0.4) 45%, rgba(4, 6, 10, 0) 75%);
  opacity: 0;
  pointer-events: none;
}

/* Filmkorn-Overlay am 14.08.2026 entfernt: das Rauschen lag mit 2 Prozent Weiss
   ueber jedem Pixel und verfaelschte die gemessene Markenfarbe (#ff4400 wurde
   als #ff4603 gemessen). Die Farben werden jetzt unveraendert wiedergegeben. */

/* Preloader: dunkler Vollbild-Vorhang mit Logo, Statuszeilen, Balken */
body .preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
body .preloader-inner {
  width: min(22rem, 80vw);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body .preloader-logo {
  width: min(15rem, 60vw);
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 68, 0, 0.35));
}
body .preloader-lines {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ink-dim);
  font-size: 0.62rem;
}
body .preloader-lines span { opacity: 0; }
body .preloader-bar {
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
body .preloader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
}
body .preloader-pct {
  color: var(--ink-dim);
  font-size: 0.62rem;
  text-align: right;
}

/* Velocity-HUD unten (VEL-Anzeige links, Koordinaten rechts) */
body .hud-bottom {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.2rem var(--gutter);
  pointer-events: none;
  color: var(--ink-dim);
  font-size: 0.62rem;
}
body .hud-velocity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
body .hud-vel-label { color: var(--accent); }
body #velocityReadout { min-width: 4.5em; display: inline-block; }
body .hud-vel-bar {
  width: 5rem;
  height: 1px;
  background: var(--line);
  display: inline-block;
  overflow: hidden;
}
body .hud-vel-bar span {
  display: block;
  height: 100%;
  width: 4%;
  background: var(--accent);
  transition: width 0.2s;
}
@media (max-width: 980px) {
  body .hud-coords { display: none; }
}

/* Nach-oben-Rakete mit Triebwerksflackern */
body .to-top {
  position: fixed;
  right: calc(var(--gutter) * 0.75);
  bottom: 4.2rem;
  z-index: 55;
  width: 44px;
  height: 58px;
  padding: 2px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
}
body .to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body .to-top svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
body .to-top-body {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  opacity: 0.85;
  transition: stroke 0.3s, opacity 0.3s;
}
body .to-top-flame {
  stroke: #ff4400;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(255, 68, 0, 0.55));
  animation: flameFlicker 1.6s steps(1, end) infinite;
  transition: filter 0.25s;
}
@keyframes flameFlicker {
  0%   { opacity: 0.45; }
  11%  { opacity: 0.85; }
  23%  { opacity: 0.55; }
  36%  { opacity: 0.95; }
  49%  { opacity: 0.4; }
  62%  { opacity: 0.8; }
  74%  { opacity: 0.6; }
  88%  { opacity: 1; }
  100% { opacity: 0.45; }
}
body .to-top:hover .to-top-flame,
body .to-top:focus-visible .to-top-flame {
  animation: flameThrust 0.1s steps(2, end) infinite;
  filter: drop-shadow(0 0 8px #ff4400) drop-shadow(0 0 20px rgba(255, 68, 0, 0.85));
}
@keyframes flameThrust {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
body .to-top:hover .to-top-body,
body .to-top:focus-visible .to-top-body { stroke: #ffffff; }
body .to-top:hover svg,
body .to-top:focus-visible svg { animation: rocketTremble 0.14s linear infinite; }
@keyframes rocketTremble {
  0%   { transform: translate(0.5px, -0.4px); }
  25%  { transform: translate(-0.5px, 0.4px); }
  50%  { transform: translate(0.5px, 0.5px); }
  75%  { transform: translate(-0.4px, -0.5px); }
  100% { transform: translate(0.5px, -0.4px); }
}

/* Start: die Rakete duckt sich kurz, zuendet und verlaesst das Bild nach oben.
   Erst danach folgt die Seite (Wunsch 14.08.2026, Dauer 1 Sekunde).
   Steht bewusst nach .to-top.is-visible, sonst gewinnt dessen transform. */
body .to-top.is-launching {
  pointer-events: none;
  animation: rocketLiftoff 1s cubic-bezier(0.42, 0, 0.7, 1) forwards;
}
@keyframes rocketLiftoff {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  16%  { transform: translateY(7px) scale(0.93); opacity: 1; }
  34%  { transform: translateY(-16px) scale(1.05); opacity: 1; }
  100% { transform: translateY(-160vh) scale(0.7); opacity: 0; }
}
/* Volle Schubduese waehrend des Starts, haerter als beim Hover */
body .to-top.is-launching .to-top-flame {
  animation: flameThrust 0.06s steps(2, end) infinite;
  filter: drop-shadow(0 0 10px #ff4400) drop-shadow(0 0 26px rgba(255, 68, 0, 0.9));
}
body .to-top.is-launching .to-top-body {
  stroke: #ffffff;
  opacity: 1;
}
body .to-top.is-launching svg {
  animation: rocketTremble 0.09s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body .to-top.is-launching { animation: none; }
}
@media (max-width: 980px) {
  body .to-top { right: 1rem; bottom: 3.4rem; width: 38px; height: 50px; }
}

/* Custom-Cursor (nur bei echter Maus) */
body .cursor { display: none; }
@media (pointer: fine) {
  body .cursor { display: block; }
  body .cursor-dot, body .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    z-index: 90;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  body .cursor-dot { width: 5px; height: 5px; background: var(--accent); }
  body .cursor-ring {
    width: 34px; height: 34px;
    border: 1px solid rgba(255, 68, 0, 0.4);
    transition: width 0.25s, height 0.25s, border-color 0.25s;
  }
  body .cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--accent); }
}

/* Headline-Zeilen-Reveal: nur wenn die Motion-Schicht laeuft
   (gn-motion setzt gn-chrome.js), sonst bleiben die Zeilen sichtbar */
html.gn-motion body .h-line-inner { transform: translateY(115%); }
html.gn-reduced body .h-line-inner { transform: none; }

/* Headline-Zeilen als Bloecke mit Clipping-Fenster fuer den Reveal */
body .h-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
body .h-line-inner { display: inline-block; }

/* ═══════════ BLOCKSY-HEADER ALS HUD ═══════════ */

/* Header schwebt fix ueber dem Sternenfeld statt als weisser Balken */
body .ct-header,
body #header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
}
/* ID-Spezifitaet noetig, Blocksys Row-Hintergrund gewinnt sonst */
body #header [data-row],
body #header [data-row] > .ct-container { background: transparent; }

/* Header-Container in derselben Flucht wie die Sections:
   Row-Polster raus, gemeinsame Maxbreite, vertikal zentriert */
body #header [data-row] { padding: 0; }
body #header [data-row] > .ct-container {
  width: 100%; /* Blocksy setzt sonst eine schmalere Container-width-Variable */
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0.6rem var(--gutter);
  align-items: center;
}
body #header [data-column],
body #header [data-items] {
  display: flex;
  align-items: center;
}

/* Logo vertikal mittig: Blocksys Logo-Container ist 50px hoch,
   das 14px-SVG sass sonst oben statt auf der Nav-Mittellinie */
body #header .site-branding,
body #header .site-logo-container {
  display: flex;
  align-items: center;
  height: auto;
  margin: 0;
}

/* Blocksys 10px-Nachlauf-Margin der Header-Elemente entfernen,
   damit die Nav buendig auf der rechten Inhaltskante endet */
body #header [data-items] > * { margin-right: 0; }

/* Neben dem SVG-Logo keinen Site-Title-Text doppelt zeigen */
body #header .site-title-container { display: none; }

/* Milchglas-Hintergrund sobald Inhalt hinter den Header scrollt
   (Klasse is-scrolled setzt gn-chrome.js) */
body #header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 6, 10, 0.65);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
body #header.is-scrolled::before { opacity: 1; }

/* Logo: SVG klein wie im Prototyp; Text-Fallback in Orbitron */
body .ct-header .site-branding img,
body .ct-header .custom-logo { height: 14px !important; width: auto; max-height: none; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)); }
body .ct-header .site-title a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--ink);
}

/* Blocksys Link-Farbvariablen im Menue komplett auf die eigene Palette
   umbiegen. Blocksy faerbt Menuepunkte in diversen Zustaenden (hover,
   focus-within, offenes Dropdown) ueber diese Variablen blau; ein
   Zustand blieb nach dem Verlassen eines Dropdown-Elternpunkts haengen. */
body #header .menu-container a,
body #offcanvas .mobile-menu a {
  --theme-link-initial-color: var(--ink-dim);
  --theme-link-hover-color: var(--ink);
  --theme-link-active-color: var(--accent);
}

/* Hauptnavigation im Mono-HUD-Stil */
body .ct-header .menu-container > ul { display: flex; gap: 1.9rem; align-items: center; }
body .ct-header .menu-container > ul > li > a {
  position: relative;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.25s;
  padding: 0.4rem 0;
}
body .ct-header .menu-container > ul > li > a:hover,
body .ct-header .menu-container > ul > li > a:focus-visible { color: var(--ink); }
body .ct-header .menu-container > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  /* Blocksy nutzt dasselbe ::after als Menue-Indikator und setzt dessen
     Deckkraft bei Menuetyp 1 auf 0 (--menu-indicator-opacity). Ohne diese
     Zeile faehrt unser Unterstrich zwar aus, bleibt aber unsichtbar. */
  opacity: 1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
}
body .ct-header .menu-container > ul > li > a:hover::after { transform: scaleX(1); transform-origin: left; }
/* Aktiver Menuepunkt in Akzentfarbe (Kundenvorgabe) inkl. Unterstrich */
body .ct-header .menu-container > ul > li.current-menu-item > a,
body .ct-header .menu-container > ul > li.current_page_item > a,
body .ct-header .menu-container > ul > li.current-menu-ancestor > a { color: var(--accent); }
body .ct-header .menu-container > ul > li.current-menu-item > a::after,
body .ct-header .menu-container > ul > li.current_page_item > a::after,
body .ct-header .menu-container > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Dropdown-Pfeil im Desktop-Menue weiss (Kundenvorgabe) */
body .ct-header .menu-container .ct-toggle-dropdown-desktop .ct-icon { fill: var(--ink); }

/* Letzter Menuepunkt (Kontakt) als Akzent-CTA */
body .ct-header .menu-container > ul > li:last-child > a { color: var(--accent); }

/* Dropdown im HUD-Look (dunkles Panel, 1px-Rahmen) */
body .ct-header .menu-container .sub-menu {
  background: rgba(4, 6, 10, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 0.6rem 0;
  min-width: 13rem;
}
body .ct-header .menu-container .sub-menu a {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.55rem 1.2rem;
}
body .ct-header .menu-container .sub-menu a:hover { background: rgba(255, 68, 0, 0.06); color: var(--accent); }

/* Aktiver Unterpunkt im Dropdown: Akzent statt Blocksy-Blau */
body .ct-header .menu-container .sub-menu li.current-menu-item > a,
body .ct-header .menu-container .sub-menu li.current_page_item > a,
body #offcanvas .mobile-menu .sub-menu li.current-menu-item > a,
body #offcanvas .mobile-menu .sub-menu li.current_page_item > a { color: var(--accent); }

/* ═══════════ BLOCKSY-FOOTER DUNKEL ═══════════ */
/* Vorstufe: dunkler Sockel mit Statuszeile; der volle 5-Spalten-Footer
   aus dem Mockup folgt als eigener Schritt. */
body #footer,
body #footer [data-row],
body #footer [data-row] > .ct-container {
  background: transparent;
}
body #footer {
  position: relative;
  z-index: 10;
  background: rgba(5, 8, 12, 0.85);
  border-top: 1px solid var(--line-soft);
  color: var(--ink-dim);
}
body .ct-footer .ct-footer-copyright {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 1.6rem 0;
}
body .ct-footer .ct-footer-copyright a { color: var(--ink); }

/* ═══════════ FOOTER: 5-SPALTEN-AUSBAU (Mockup) ═══════════ */
/* Inhalte liegen als HTML-Block-Widgets in ct-footer-sidebar-1 bis -5 */

/* Spaltenraster wie im Prototyp: Brand doppelt so breit */
body #footer [data-row="middle"] > .ct-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) var(--gutter) clamp(2.5rem, 5vh, 4rem);
}
body #footer [data-row="middle"] { border-bottom: 1px solid var(--line-soft); }

/* Brand-Block: Logo, Kurztext, Koordinaten */
body #footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}
body #footer .footer-brand img { height: 13px; width: auto; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)); }
/* Klein explizit setzen: Blocksys Widget-Styles wuerden sonst die
   Systemschrift in die Footer-Texte druecken */
body #footer .footer-brand p,
body #footer .footer-col p,
body #footer .footer-col li a {
  font-family: var(--font-sans);
}
body #footer .footer-brand p {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.88rem;
  max-width: 20rem;
  margin: 0;
}
body #footer .footer-coords { color: var(--ink-dim); font-size: 0.6rem; }

/* Spaltentitel im Mono-HUD-Stil in Akzentfarbe */
body #footer .footer-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin: 0 0 1.1rem;
}
body #footer .footer-col p {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
}
body #footer .footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
}
body #footer .footer-col li { margin: 0; }
body #footer .footer-col li a {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.88rem;
  transition: color 0.25s;
}
body #footer .footer-col li a:hover { color: var(--ink); }

/* Unterzeile: Copyright links, Statuszeile mit Puls-Punkt rechts */
body #footer .ct-footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 1.6rem var(--gutter);
}
body #footer .footer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Responsive-Kollaps wie im Prototyp */
@media (max-width: 980px) {
  body #footer [data-row="middle"] > .ct-container { grid-template-columns: 1fr 1fr; }
  /* Grid-Kind ist Blocksys Spalten-Wrapper, nicht das innere div */
  body #footer [data-row="middle"] > .ct-container > [data-column]:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body #footer [data-row="middle"] > .ct-container { grid-template-columns: 1fr; }
}

/* ═══════════ MOBILES OVERLAY-MENUE (Blocksy-Offcanvas im HUD-Look) ═══════════ */

/* Suche im Header: sichtbar und im HUD-Look. Das Mockup sah keine Suche vor,
   bei ueber 120 Glossarbegriffen braucht es sie aber. Blocksys Toggle bringt
   display:flex selbst mit, hier wird nur die Farbe gesetzt, weil der Default
   schwarz ist und auf dem dunklen Header unsichtbar waere. */
body #header .ct-header-search {
  color: var(--ink, #e9edf2);
  transition: color .25s ease;
}
body #header .ct-header-search .ct-icon { fill: currentColor; }
body #header .ct-header-search:hover,
body #header .ct-header-search:focus-visible { color: var(--accent, #ff4400); }

/* Suchfenster (#search-modal): Blocksy liefert es in seiner Standardpalette
   aus, also blau (#2872fa) und mit runden Ecken. Beides passt nicht zum
   HUD-Look. Hier auf Kantenlosigkeit und die Hausfarben umgestellt.
   Der dunkle Overlay-Hintergrund von Blocksy bleibt, der passt bereits. */
#search-modal .ct-search-form-inner,
#search-modal .ct-pseudo-input {
  border-color: rgba(233, 237, 242, 0.25);
  border-radius: 0;
  transition: border-color .25s ease;
}
#search-modal .ct-search-form-inner:focus-within,
#search-modal .ct-pseudo-input:focus-within { border-color: var(--accent, #ff4400); }
#search-modal input[name="s"] { color: var(--ink, #e9edf2); }
#search-modal button[type="submit"] {
  background: transparent;
  color: var(--ink, #e9edf2);
  border-radius: 0;
  transition: color .25s ease;
}
#search-modal button[type="submit"]:hover { color: var(--accent, #ff4400); }
#search-modal .ct-toggle-close { color: var(--ink, #e9edf2); }
/* Treffer der Live-Suche: Blocksy faerbt Links beim Hover in seiner
   Standardpalette blau ein. Hier auf die Hausfarbe umgestellt. */
#search-modal a { color: var(--ink, #e9edf2); transition: color .2s ease; }
#search-modal a:hover,
#search-modal a:focus-visible { color: var(--accent, #ff4400) !important; }
/* Blocksy setzt beim Fokus ein blaues Outline und runde Ecken aus seiner
   Standardpalette, beides mit hoeherer Spezifitaet als unsere Regeln oben.
   Deshalb hier gezielt nachgezogen. Das Outline wird NICHT entfernt, nur
   eingefaerbt, damit die Tastaturbedienung sichtbar bleibt. */
#search-modal .ct-search-form-inner,
#search-modal .ct-pseudo-input,
#search-modal input[name="s"],
#search-modal button[type="submit"] { border-radius: 0 !important; }
#search-modal .ct-search-form-inner:focus-within,
#search-modal .ct-pseudo-input:focus-within,
#search-modal input[name="s"]:focus,
#search-modal input[name="s"]:focus-visible { outline-color: var(--accent, #ff4400) !important; }

/* Burger-Trigger im HUD-Look */
body #header .ct-header-trigger .ct-icon,
body #header [data-toggle-panel="#offcanvas"] svg { fill: var(--ink); }

/* Panel: dunkles Milchglas ueber die volle Flaeche */
body #offcanvas .ct-panel-inner {
  background: rgba(4, 6, 10, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* Blocksys eigenes Schliessen-X ausblenden: der Burger im Header wird
   beim Oeffnen selbst zum X und bleibt ueber dem Panel klickbar
   (gemessen per elementFromPoint); zwei X waren doppelt gemoppelt */
body #offcanvas .ct-panel-actions { display: none; }
body #offcanvas .ct-toggle-close {
  background: none;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
}
body #offcanvas .ct-toggle-close svg { fill: var(--ink); }
body #offcanvas .ct-toggle-close:hover { border-color: var(--accent); }
body #offcanvas .ct-toggle-close:hover svg { fill: var(--accent); }

/* Grosse Menuepunkte mit Mono-Nummerierung wie im Prototyp-Overlay.
   Achtung Markup: Punkte mit Untermenue stecken in span.ct-sub-menu-parent,
   deshalb ueberall beide Pfade selektieren. Gezaehlt wird am li. */
body #offcanvas .mobile-menu > ul {
  counter-reset: gn-ov;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  text-align: left;
}
body #offcanvas .mobile-menu > ul > li { counter-increment: gn-ov; width: 100%; }
body #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent { display: flex; align-items: baseline; gap: 0.8rem; justify-content: flex-start; }
body #offcanvas .mobile-menu > ul > li > a,
body #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > a {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1.1rem;
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.25s;
  text-transform: none; /* Blocksy versalisiert sonst, Mockup ist normal geschrieben */
}
body #offcanvas .mobile-menu > ul > li > a::before,
body #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > a::before {
  content: counter(gn-ov, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex: none;
}
body #offcanvas .mobile-menu > ul > li > a:hover,
body #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > a:hover,
body #offcanvas .mobile-menu > ul > li.current-menu-item > a { color: var(--accent); }
body #offcanvas .mobile-menu > ul > li:last-child > a { color: var(--accent); }

/* Dropdown-Pfeil dezent im HUD-Look */
body #offcanvas .ct-toggle-dropdown-mobile { background: none; border: none; }
body #offcanvas .ct-toggle-dropdown-mobile svg { fill: var(--accent); }

/* Untermenues: standardmaessig ZU (Kundenvorgabe); Blocksy setzt beim
   Aufklappen li.dropdown-active, erst dann wird das Untermenue sichtbar */
body #offcanvas .mobile-menu .sub-menu { display: none; }
body #offcanvas .mobile-menu li.dropdown-active > .sub-menu,
body #offcanvas .mobile-menu li.dropdown-active > .ct-sub-menu-parent + .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.2rem 0 0.8rem 2.6rem;
  background: none;
  border: none;
}
body #offcanvas .mobile-menu .sub-menu li { list-style: none; }
body #offcanvas .mobile-menu .sub-menu li::before,
body #offcanvas .mobile-menu .sub-menu li::marker { display: none; content: none; }
body #offcanvas .mobile-menu .sub-menu a {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  justify-content: flex-start;
  text-align: left;
}
body #offcanvas .mobile-menu .sub-menu a:hover { color: var(--accent); }

/* Reduced Motion: statisches Sternenfeld-Bild statt WebGL */
@media (prefers-reduced-motion: reduce) {
  html body {
    background: var(--bg) url('assets/img/starfield-mobile-fallback.webp') center / cover no-repeat fixed;
  }
}

/* Scroll-Sperre bei geoeffnetem Overlay (Klasse aus Blocksy/Scripts) */
body.no-scroll { overflow: hidden; }

/* ═══════════ SECTION-GRUNDGERUEST ═══════════ */

/* Section-Basislayout. Maxbreite = Inhalt (84rem) PLUS Seitenpolster,
   damit der Inhalt auf grossen Screens in einer Flucht mit der
   Navigation liegt (Kundenvorgabe: mindestens Navigationsbreite;
   der Prototyp hatte hier eine doppelte Einrueckung). */
/* Doppelklasse .e-con.gn-section noetig: Elementors Regel
   :is(...,[data-elementor-id]) > .e-con hat (0,2,0) und wuerde die
   Maxbreite sonst auf 100% zuruecksetzen */
body .e-con.gn-section,
body .gn-section {
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-left: auto;
  margin-right: auto;
}

/* Sektionskopf: Nummer + Label ueber einer 1px-Linie */
body .section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
body .section-no { color: var(--accent); }
body .section-label { color: var(--ink-dim); }

/* Sektions-Headline in Orbitron (Klasse am Heading-Widget-Wrapper) */
body .section-title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  font-weight: 400;
  /* Orbitron braucht mehr Durchschuss als eine Textschrift: bei 1.18 stiess die
     Unterlaenge des g an die Versalien der Folgezeile ('Haeufig gestellte' ueber
     'Fragen.'), bei Umlauten noch enger. Unter 1025px entfallen die harten <br>,
     dort brechen die Titel frei um und sind haeufiger mehrzeilig. */
  line-height: 1.3;
  letter-spacing: 1px;
  color: var(--ink);
  margin: 0;
}
body .elementor-widget.section-title { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }

/* Text-Widgets in allen Sections erben die Section-Farbe.
   :where() drueckt die Spezifitaet auf (0,0,1), damit Farbklassen wie
   .module-claim (0,1,1) gewinnen; ohne :where() erbten Texte in
   verlinkten Containern die blaue Blocksy-Linkfarbe. */
body :where(.gn-section .elementor-widget-text-editor) { color: inherit; }
body :where(.gn-section .elementor-widget-text-editor) p { margin: 0; }

/* ═══════════ 02 TELEMETRIE ═══════════ */

/* Kennzahlen-Leiste: 4 Zellen mit 1px-Fugen ueber den Grid-Gap */
body .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

/* Einzelne Kennzahl-Zelle (Klasse am Widget-Wrapper) */
body .stats-grid > .stat {
  background: rgba(6, 9, 14, 0.82);
  padding: clamp(1.5rem, 3vw, 2.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Zahl im Counter-Widget: gross, mager, linksbuendig wie im Prototyp */
/* Zahlen in Orbitron (Kundenvorgabe, abweichend vom Prototyp) */
body .stat .elementor-counter-number-wrapper {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  justify-content: flex-start;
  font-family: var(--font-display);
}

/* Counter linksbuendig wie im Prototyp (Elementor zentriert per Default) */
body .stat .elementor-counter { text-align: left; }
body .stats-grid .stat .elementor-counter-number-wrapper { justify-content: flex-start; }

/* Counter-Beschriftung im Mono-HUD-Stil */
body .stat .elementor-counter-title {
  margin-top: 0.8rem;
  justify-content: flex-start;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: left;
}

/* Statische 24/7-Zelle (Text-Widget, gleiche Optik wie die Counter) */
/* 24/7-Zelle identisch zu den Countern: Orbitron (Kundenvorgabe) */
body .stat-value {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
}
body .stat-slash { color: var(--accent); font-weight: 300; }

/* Text-Variante der Kennzahl-Zelle (Hosting-Seite): Klein statt Orbitron,
   kleiner, halbfett; steht nach .stat-value und gewinnt daher */
body .stat-value.stat-value-sm {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Kein margin-top: den Abstand liefert bereits der Flex-Gap der Zelle
   (sonst stuende das Label tiefer als bei den Counter-Zellen) */
body .stat .stat-label {
  color: var(--ink-dim);
  display: block;
}

/* ═══════════ 03 LEISTUNGEN ═══════════ */

/* Verlinkte Leistungs-Zeile: 3-Spalten-Grid, 1px-Trennlinien oben */
body .e-con.module {
  display: grid;
  grid-template-columns: 6rem 1fr 3rem;
  gap: 2rem;
  align-items: start;
  padding: clamp(1.8rem, 4vh, 3rem) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  width: 100%;
}
body .module-list > .e-con.module:last-child { border-bottom: 1px solid var(--line); }

/* Orange Fortschrittslinie, die bei Hover ueber die Trennlinie laeuft */
body .e-con.module::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
body .e-con.module:hover { padding-left: 1rem; }
body .e-con.module:hover::before { width: 100%; }

body .module-no { color: var(--accent); padding-top: 0.4rem; }

/* Titel der Leistung: Hausschrift, nicht Orbitron */
body .module-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
body .elementor-widget.module-title { margin-bottom: 0.3rem; }

body .module-claim {
  color: var(--accent);
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  margin-bottom: 0.9rem;
}

body .module-copy {
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 38rem;
}

/* Pfeil rechts, wandert bei Hover nach aussen */
body .module-arrow {
  color: var(--ink-dim);
  font-size: 1.2rem;
  padding-top: 0.5rem;
  transition: color 0.3s, transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
body .e-con.module:hover .module-arrow {
  color: var(--accent);
  transform: translateX(0.5rem);
}

/* ═══════════ 04 FLUGPLAN ═══════════ */

/* 4 Phasen nebeneinander. Abweichung zum Prototyp: statisches
   4-Spalten-Grid statt GSAP-Scroll-Pin (wie in der Divi-Fassung). */
body .flugplan-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
body .flugplan-track > .e-con.phase { flex: 1 1 0; width: auto; min-width: 0; }

/* Flugplan-Pin-Modus: Das Script setzt html.gn-flugplan-pin nur ab
   981px und ohne prefers-reduced-motion. Erst dann bekommen die
   Phasen ihre Prototyp-Festbreite (Track laeuft ueber und wird per
   GSAP horizontal gescrubbt). Ohne die Klasse bleibt das statische
   4-Spalten-Grid als Fallback (Mobil, kein JS, reduzierte Bewegung). */
html.gn-flugplan-pin body .flugplan { overflow: hidden; }

/* Elementor gibt Containern serienmaessig transition: transform 0.4s.
   ScrollTrigger setzt beim Pinnen/Loesen Transforms direkt; die
   CSS-Transition animiert sie nach und liess die Section beim
   Verlassen des Pins kurz verspringen. Deshalb hier hart aus. */
body .flugplan,
body .flugplan-track { transition: none; }
html.gn-flugplan-pin body .flugplan-track { flex-wrap: nowrap; will-change: transform; }
html.gn-flugplan-pin body .flugplan-track > .e-con.phase { flex: 0 0 clamp(17rem, 30vw, 24rem); }

/* Phasen-Karte: 1px-Rahmen statt Card-Schatten */
body .e-con.phase {
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 2.5vw, 2.4rem);
  background: rgba(6, 9, 14, 0.82);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: clamp(15rem, 32vh, 19rem);
  transition: border-color 0.3s;
}
body .e-con.phase:hover { border-color: var(--accent-dim); }

body .phase-no { color: var(--accent); }

body .phase-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

body .phase-copy {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.95rem;
}

/* ═══════════ 05 CREW ═══════════ */

/* Zweispalter: Text links, All-inclusive-Kasten rechts */
body .crew-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  margin-bottom: clamp(4rem, 10vh, 7rem);
}

body .crew-copy {
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 36rem;
  margin-bottom: 1.4rem;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
}
body .elementor-widget.crew-copy:last-child { margin-bottom: 0; }

/* All-inclusive-Kasten mit 1px-Rahmen */
body .e-con.crew-inclusive {
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 2.5vw, 2.4rem);
  background: rgba(6, 9, 14, 0.82);
}

/* Kastentitel im Mono-HUD-Stil in Akzentfarbe */
body .inclusive-title .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--accent);
  margin: 0;
}
body .elementor-widget.inclusive-title { margin-bottom: 1rem; }

body .inclusive-copy {
  color: var(--ink-dim);
  font-weight: 300;
  font-size: 0.92rem;
  margin-bottom: 1.4rem;
}

/* Leistungsliste: 1px-Linien, Plus in Akzentfarbe statt Bullets */
body .inclusive-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body .inclusive-list li {
  padding: 0.65rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  list-style: none;
}
body .inclusive-list li::before {
  content: '+';
  color: var(--accent);
  margin-right: 0.8rem;
}

/* Platzhalter fuer die Kundenstimmen (spaeter wp-social-ninja-pro) */
body .stimmen-placeholder {
  border: 1px dashed var(--line);
  padding: clamp(2rem, 4vw, 3rem);
  color: var(--ink-dim);
}

/* ═══════════ 06 PROJEKTRETTUNG ═══════════ */

/* Notsignal-Kasten: einzige Stelle mit Terminal-Gruen (Notsignal-Farbe) */
body .e-con.rettung-inner {
  border: 1px solid rgba(var(--terminal-rgb), 0.25);
  /* !important noetig: eine Regel aus Elementor/Blocksy setzt den Container-Hintergrund
     mit !important auf none, sonst fehlt der Verlauf komplett (geprueft 14.08.2026) */
  background-image: linear-gradient(120deg, rgba(var(--terminal-rgb), 0.07), rgba(5, 8, 12, 0.78) 55%) !important;
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

body .rettung-signal {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--terminal);
}
/* Im Notsignal-Kasten laeuft auch der Button-Unterstrich in Terminal-Gruen.
   Der Antrieb-Kasten traegt dieselbe Basisklasse, bleibt aber orange. */
body .rettung-inner:not(.antrieb-inner) .btn-ghost .elementor-button::after {
  background: rgba(var(--terminal-rgb), 0.45);
}
body .rettung-inner:not(.antrieb-inner) .btn-ghost .elementor-button:hover::after,
body .rettung-inner:not(.antrieb-inner) .btn-ghost .elementor-button:focus-visible::after {
  background: var(--terminal);
}

body .signal-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terminal);
  box-shadow: 0 0 12px var(--terminal);
  animation: pulse 1.1s ease-in-out infinite;
  flex: none;
  display: inline-block;
}

body .rettung-title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--ink);
  margin: 0;
}

body .rettung-copy {
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 40rem;
  margin-bottom: 0.8rem;
}

/* ═══════════ 07 FAQ ═══════════ */

/* Elementor-Toggle-Widget im Prototyp-Look: Linien statt Boxen.
   Toggle statt Accordion, weil das Accordion das erste Item immer
   offen laesst; im Mockup sind alle Fragen geschlossen. */
body .faq-acc .elementor-toggle-item {
  border: none;
  border-top: 1px solid var(--line);
  background: none;
}
body .faq-acc .elementor-toggle-item:last-child { border-bottom: 1px solid var(--line); }

/* Frage-Zeile: Hausschrift, linksbuendig, Plus rechts, Hover in Akzent */
body .faq-acc .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.3rem, 2.5vh, 1.7rem) 0;
  background: none;
  border: none;
  color: var(--ink);
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Elementors Toggle-CSS setzt hier line-height:1. Bei einzeiligen Fragen
     faellt das nicht auf, weil das Plus die Zeilenhoehe bestimmt; sobald eine
     Frage umbricht (auf Mobil rund die Haelfte), kleben die Zeilen aneinander.
     Der Selektor hat (0,3,1) und schlaegt Elementors (0,2,0) unabhaengig von
     der Ladereihenfolge. Der innere <a> erbt den Wert ueber font: inherit. */
  line-height: 1.55;
  cursor: pointer;
}

/* Innerer Fragetext: erbt Schrift und Farbe, fuellt die Zeile links */
body .faq-acc .elementor-tab-title a,
body .faq-acc .elementor-toggle-title {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  flex: 1 1 auto;
  text-align: left;
}
body .faq-acc .elementor-tab-title:hover,
body .faq-acc .elementor-tab-title:hover a { color: var(--accent); }

/* Plus-Zeichen per CSS statt Icon-Font (kein FontAwesome-Load) */
body .faq-acc .elementor-tab-title .elementor-toggle-icon,
body .faq-acc .elementor-tab-title .elementor-accordion-icon { display: none; }
body .faq-acc .elementor-tab-title::after {
  content: '+';
  flex: none;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
}
body .faq-acc .elementor-tab-title.elementor-active::after { transform: rotate(135deg); }

/* Antwort-Text: gedimmt, begrenzte Zeilenbreite, keine Boxen */
body .faq-acc .elementor-tab-content {
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 42rem;
  padding: 0 0 clamp(1.3rem, 2.5vh, 1.7rem) 0;
  border: none;
  background: none;
}

/* ═══════════ 08 FINALE ═══════════ */

/* Finale: volle Breite, Inhalt zentriert, Nebelvideo im Hintergrund */
body .e-con.finale {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  position: relative;
}

/* Video gedimmt und weich eingeblendet wie im Prototyp
   (Opacity + Screen-Blend + Verlaufsmaske oben/unten) */
body .finale .elementor-background-video-container { opacity: 1; }
body .finale .elementor-background-video-container video {
  opacity: 0.5;
  mix-blend-mode: screen;
}
body .finale .elementor-background-video-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg), rgba(4, 6, 10, 0.25) 30%, rgba(4, 6, 10, 0.35) 75%, var(--bg));
}

/* Innerer Rahmen: zentrierte Textspalte */
body .e-con.finale-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
  position: relative;
  z-index: 1;
}

body .finale-kicker { color: var(--ink-dim); }

body .finale-title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6.2vw, 5.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 1px;
  color: var(--ink);
  margin: 0;
}

body .finale-copy {
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 34rem;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
}

body .e-con.finale-ctas { margin-top: 1rem; width: auto; }


/* SUCHERGEBNISSEITE */
/* Blocksy liefert die Trefferliste in seinem Standard-Layout aus: weisse
   Karten mit dunkler Schrift, dazu Autor und Datum. Auf dem dunklen HUD ist
   das ein Bruch. Hier auf die Werte der Glossar-Kacheln umgestellt
   (gleicher Grund rgba(6,9,14,.82), gleiche Polsterung, keine Rundung).
   Autor und Datum sind ausgeblendet: Treffer sind meist Glossarbegriffe
   oder Seiten, wo "admin" und ein Beitragsdatum nichts aussagen. */
body.search .page-title,
body.search .entry-title,
body.search .entry-title a { color: var(--ink, #e9edf2); }

body.search .entries { gap: 1.5rem; }

body.search .entry-card {
  background: rgba(6, 9, 14, 0.82);
  border: 1px solid var(--line-soft, rgba(233,237,242,0.07));
  border-radius: 0;
  padding: 32px;
  color: var(--ink-dim, #ced3d9);
  transition: background .25s ease, border-color .25s ease;
}
body.search .entry-card:hover {
  background: rgba(6, 9, 14, 0.95);
  border-color: var(--line, rgba(233,237,242,0.12));
}
body.search .entry-card:hover .entry-title a { color: var(--accent, #ff4400); }

/* Der gesuchte Begriff wird von WordPress in <strong> gesetzt. */
/* Blocksy faerbt .entry-excerpt in entries.min.css mit var(--theme-text-color),
   das ist sein Standard-Dunkelblau rgb(58,79,102). Auf dunklem Grund kaum
   lesbar, deshalb hier auf die hellste Textfarbe des Designs gesetzt. */
body.search .entry-card .entry-excerpt,
body.search .entry-card .entry-excerpt p { color: var(--ink, #e9edf2); }

body.search .entry-card strong { color: var(--accent, #ff4400); font-weight: 500; }

/* Autor und Datum raus, ausdruecklicher Wunsch. */
body.search .entry-meta { display: none; }

/* Frueher trug der Header hier einen eigenen Grund, weil der Suchseite das
   Sternenfeld fehlte. Seit das Chrome ueber die functions.php auf allen
   Seiten laeuft, ist das nicht mehr noetig, der Header bleibt transparent
   wie ueberall sonst. */

/* Ohne Hero-Bereich rutscht die Ueberschrift sonst unter den festen Header. */
body.search .hero-section,
body.search main,
body.search #main-container > .ct-container { padding-top: clamp(7rem, 12vw, 11rem); }


/* OFFCANVAS UEBER DEM HEADER */
/* Das mobile Overlay-Menue traegt selbst die Klasse .ct-header und erbt
   dadurch dieselbe Stapelebene 50 wie der feste Header. Ergebnis: das Menue
   oeffnet sich HINTER dem Header, Logo und Lupe lagen darueber.
   Hier eine Ebene hoeher gesetzt, damit das Vollbildmenue wie vorgesehen
   ueber allem liegt. Das Suchfenster liegt mit 999999 ohnehin darueber. */
body #offcanvas.ct-panel { z-index: 60; }


/* BLOGBEITRAEGE */
/* Beitraege rendert WordPress selbst, nicht Elementor. Dadurch fehlt der
   dunkle Inhaltsgrund der uebrigen Seiten und der Text lag direkt auf dem
   Sternenfeld, streckenweise unlesbar. Hier auf denselben Grund wie die
   Glossar-Kacheln gesetzt und auf eine lesbare Spaltenbreite begrenzt. */
body.single-post article {
  background: rgba(6, 9, 14, 0.86);
  border: 1px solid var(--line-soft, rgba(233,237,242,0.07));
  max-width: 62rem;
  margin: 0 auto clamp(3rem, 8vw, 6rem);
  padding: clamp(1.8rem, 5vw, 3.5rem);
}

/* Blocksy faerbt Ueberschriften mit rgb(25,42,61), auf dunklem Grund blind. */
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .page-title { color: var(--ink, #e9edf2); }
body.single-post .entry-content p,
body.single-post .entry-content li { color: var(--ink-dim, #ced3d9); }
body.single-post .entry-content a { color: var(--accent, #ff4400); }

/* Autor samt Gravatar und die Kategorie raus. Der Gravatar laedt zusaetzlich
   von einem fremden Server, das ist hier unnoetig. Datum bleibt. */
body.single-post .entry-meta .meta-author,
body.single-post .entry-meta .meta-categories { display: none; }

/* Beitragsbild mit Bildnachweis darunter. */
body.single-post .entry-content figure.gn-beitragsbild { margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); }
body.single-post .entry-content figure.gn-beitragsbild img { width: 100%; height: auto; display: block; }
body.single-post .entry-content figure.gn-beitragsbild figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-dim, #ced3d9);
  opacity: 0.85;
}