/* ==========================================================================
   Sicura Sicherheitstechnik — Design Tokens & Basis-Stile
   Stilrichtung: dunkel, selbstbewusst, technisch — inspiriert von
   ajax.systems (siehe design-briefing-ajax-inspiration.md). Basis ist
   durchgängig Schwarz, ein einziger Neongrün-Akzent wird bewusst sparsam
   für CTAs, Hover- und Status-Zustände eingesetzt. `.section--alt` bleibt
   ebenfalls dunkel und dient nur als minimal hellere Fläche zur Gliederung
   aufeinanderfolgender Abschnitte, indem sie ein paar Oberflächen-Variablen
   innerhalb ihres Scopes umdefiniert — jede Komponente (Cards, Buttons,
   Icons …) folgt dem automatisch, weil sie ausschließlich über
   CSS-Variablen eingefärbt ist.
   ========================================================================== */

/* Selbst gehostete Variable Fonts (keine Verbindung zu Google Fonts zur
   Laufzeit — siehe Datenschutzerklärung Abschnitt 4). Jede @font-face-Regel
   zeigt auf dieselbe Variable-Font-Datei und wählt daraus per font-weight
   die passende Schnittweite; das ist kein Duplikat-Download. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin-variable.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* ---- Farben: dunkle Basis (Header, Hero, Footer, Standard-Sections) ---- */
  --color-bg: #0a0a0b;
  --color-bg-deep: #000000;
  --color-surface: #141416;
  --color-surface-raised: #1c1c1f;
  --color-text: #ffffff;
  --color-text-muted: #b8b8bc;
  --color-text-faint: #86868c;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.20);

  --color-accent: #00c832; /* Logo-Gruen */
  --color-accent-dim: #00a82a;
  --color-accent-contrast: #071304;
  --color-accent-soft: rgba(0, 200, 50, 0.12);

  --color-danger: #ff6b52;
  --color-danger-bg: rgba(255, 107, 82, 0.12);
  --color-success: var(--color-accent);

  /* ---- Typografie ----
     Space Grotesk: Display-Ebene (H1/H2, kurze Zeilen) — Ersatz für die
     proprietäre "Ajax Space Font". Inter: Fließtext, UI, Buttons. */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.75rem, 2rem + 3.2vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-tiny: 0.8125rem;
  --fs-stat: clamp(2.75rem, 2rem + 3vw, 4.25rem);

  /* ---- Abstände (4/8pt-Rhythmus) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-padding: clamp(64px, 6vw + 24px, 128px);
  --container-width: 1180px;
  --container-padding: clamp(20px, 4vw, 48px);

  /* ---- Radien & Schatten ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 1px rgba(0, 200, 50, 0.4), 0 8px 32px rgba(0, 200, 50, 0.15);

  /* ---- Bewegung ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Typografie
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h3,
h4 {
  font-family: var(--font-sans);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.02em;
}

h1,
.h1 {
  font-size: var(--fs-h1);
}

h2,
.h2 {
  font-size: var(--fs-h2);
}

h3,
.h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px 1px rgba(0, 200, 50, 0.6);
  flex-shrink: 0;
}

/* Überschrift im Eyebrow-Stil (z. B. Herstellerunabhängig-Sektion): bleibt
   semantisch eine H2, sieht aber aus wie die kleine Zeile mit grünem Punkt. */
h2.eyebrow,
.section-head h2.eyebrow {
  margin-top: 0;
  font-family: var(--font-sans);
  line-height: 1.4;
  text-align: center;
}

p {
  max-width: 62ch;
}

/* ==========================================================================
   Layout-Hilfen
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--section-padding);
}

/* ---- Alternierende dunkle Sections ----
   Komplett schwarze Basis (Briefing Punkt 1: "fast durchgängig Schwarz").
   `.section--alt` bleibt dunkel, hebt sich aber als eigene, minimal hellere
   Fläche vom Seitenhintergrund ab – reine Rhythmus-/Gliederungsfunktion,
   kein Licht/Dunkel-Wechsel mehr. Card-/Icon-/Formular-Komponenten
   erben dafür unverändert ihre dunklen Grundfarben aus :root. */
.section--alt {
  background: #121214;

  --color-bg: #121214;
  --color-surface: #1c1c1f;
  --color-surface-raised: #232326;
  --color-border: rgba(255, 255, 255, 0.12);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  margin-top: var(--space-3);
}

.section-tagline {
  margin-top: var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--color-text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--duration-base) var(--ease-out);
}

.skip-link:focus-visible {
  top: var(--space-4);
}

/* Fokus-Stile */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-small);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
  transition-duration: 90ms;
}

/* Primärer CTA: die einzige Fläche, die den Signalakzent vollflächig trägt. */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--color-accent-dim);
  box-shadow: 0 0 0 1px rgba(0, 200, 50, 0.3), var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
}

.btn-ghost:hover {
  color: var(--color-accent);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: var(--space-4) var(--space-7);
  font-size: var(--fs-body);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: #fff;
}

/* Blur lebt auf einem Pseudo-Element statt direkt auf .site-header:
   backdrop-filter auf dem Header selbst würde einen neuen Containing
   Block erzeugen und das fixed-positionierte Mobilmenü (Kind des Headers)
   auf die Headerhöhe zusammenschrumpfen lassen. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}

/* ---- Transparenter Header über dem Video-Hero ----
   Nur auf Seiten mit `body.has-video-hero` (Startseite): der Header startet
   glasklar über dem Hero-Video und bekommt sein dunkles Glas erst, sobald
   über die Hero-Höhe hinausgescrollt wurde (.is-scrolled, per JS in
   script.js gesetzt). Text bleibt durchgehend hell, weil die ganze Website
   dunkel gestaltet ist — kein Farbumschlag nötig. */
body.has-video-hero .site-header:not(.is-scrolled)::before {
  opacity: 0;
}

/* Material fallbacks: bei reduzierter Transparenz/erhöhtem Kontrast wird aus
   dem Glas-Effekt eine nahezu blickdichte Fläche statt eines Weichzeichners. */
@media (prefers-reduced-transparency: reduce) {
  .site-header::before {
    background: var(--color-bg-deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-desktop {
    background: var(--color-bg-deep) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  .site-header::before {
    background: var(--color-bg-deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: rgba(255, 255, 255, 0.3);
  }
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

/* Scrollfortschritt: skaliert per Motion (motion-effects.js) von 0 auf 1
   entlang der Seitenhöhe. transform statt width, damit nichts neu layoutet. */
.nav-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 8px 0 rgba(0, 200, 50, 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.brand {
  display: flex;
  align-items: center;
  color: #fff;
}

/* Wort-Bild-Marke: helle Variante, da der Header dunkel ist.
   Hoehe steuert die Groesse, Breite ergibt sich aus dem Seitenverhaeltnis
   (1200:467). width/height im Markup verhindern Layout-Shift (CLS). */
.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  flex-shrink: 0;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-links a {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.68);
  padding-block: var(--space-2);
  transition: color var(--duration-base) var(--ease-out);
}

.nav-links a:hover {
  color: #fff;
}

.nav-links a[aria-current='page'] {
  color: #fff;
}

.nav-links a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 6px 0 rgba(0, 200, 50, 0.6);
}

.nav-cta {
  white-space: nowrap;
}

/* Sieben Menüpunkte: zwischen Tablet und großem Desktop Abstände
   verringern, damit Logo, Links und CTA in eine Zeile passen. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .nav-desktop {
    gap: var(--space-5);
  }

  .nav-links {
    gap: var(--space-4);
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: #fff;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

.icon-close {
  display: none;
}

.nav-toggle[aria-expanded='true'] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded='true'] .icon-close {
  display: block;
}

/* Burger-Menü bis 1024px: Ab sieben Menüpunkten reicht die Breite darunter
   nicht mehr für Logo, Links und CTA in einer Zeile. */
@media (max-width: 1024px) {
  .nav-desktop {
    position: fixed;
    inset: 84px 0 0 0;
    background: rgba(6, 6, 7, 0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-6) var(--container-padding);
    gap: var(--space-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
  }

  .nav-desktop.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .nav-links a {
    font-size: var(--fs-h3);
  }

  .nav-cta {
    width: 100%;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -84px;
  padding-top: calc(84px + clamp(56px, 8vw, 128px));
  padding-bottom: var(--section-padding);
  background: linear-gradient(160deg, #000000 0%, #0a0a0b 55%, #121214 100%);
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
}

/* ---- Start-Hero: bildschirmfüllend, Headline oben, Text + CTAs unten ---- */
.hero--idle {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(84px + clamp(8px, 2vw, 24px));
  padding-bottom: clamp(32px, 5vh, 64px);
}

.hero--idle .container {
  display: flex;
  max-width: 1440px;
  width: 100%;
}

.hero--idle .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
}

.hero--idle .hero-content > * + * {
  margin-top: 0;
}

.hero--idle h1 {
  max-width: 13em;
  margin-inline: auto;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  text-align: left;
}

.hero-bottom .lede {
  max-width: 48ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero-bottom .hero-actions {
  flex-shrink: 0;
  justify-content: flex-end;
  padding-top: 0;
}

.hero--idle .btn-secondary {
  background: rgba(0, 0, 0, 0.35);
}

.hero--idle .hero-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 32%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 38%),
    rgba(0, 0, 0, 0.2);
}

@media (max-width: 900px) {
  .hero-bottom {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .hero-bottom .lede {
    margin-inline: auto;
  }

  .hero-bottom .hero-actions {
    justify-content: center;
  }
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.6);
  justify-content: center;
}

.hero h1 {
  color: #fff;
}

.hero .lede {
  color: rgba(255, 255, 255, 0.78);
}

.hero .hero-meta {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.hero .hero-meta-item strong {
  color: #fff;
}

.hero .hero-meta-item span {
  color: rgba(255, 255, 255, 0.55);
}

.hero .btn-secondary {
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-accent);
}

/* ---- Hero-Hintergrund: Video mit Abdunkelung (Scrim) ---- */
.hero-liquid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Unterhalb Desktop-Breite: Video nicht als zugeschnittener Hintergrund,
   sondern vollständig (16:9) als eigener Block oben im Hero, Headline,
   Text und CTAs darunter. Da nichts mehr über dem Video liegt, entfallen
   Scrim und das Ausblenden des Textes im Ruhezustand. */
@media (max-width: 1024px) {
  .hero--idle {
    flex-direction: column;
    min-height: 0;
    padding-top: 84px;
  }

  .hero--idle .hero-liquid-bg {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .hero--idle .hero-video {
    object-fit: contain;
  }

  .hero--idle .hero-scrim {
    display: none;
  }

  /* Headline über das Video ziehen: Wrapper auflösen, damit H1, Video
     und Text/CTAs direkte Flex-Kinder des Heros werden und per `order`
     sortiert werden können. Reihenfolge im HTML bleibt unverändert. */
  .hero--idle .container,
  .hero--idle .hero-content {
    display: contents;
  }

  .hero--idle h1 {
    order: 1;
    width: 100%;
    padding: var(--space-6) var(--container-padding);
  }

  .hero--idle .hero-liquid-bg {
    order: 2;
  }

  .hero--idle .hero-bottom {
    order: 3;
    padding: var(--space-8) var(--container-padding) 0;
  }

  .hero.hero--idle.is-idle-ready .hero-content {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 480px) {
  .hero.hero--idle h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.88) 0%, rgba(10, 10, 11, 0.62) 55%, rgba(10, 10, 11, 0.85) 100%);
}

/* ---- Hero-Text erst bei Interaktion (nur Startseite, .hero--idle) ----
   script.js setzt `is-idle-ready` und schaltet `is-active` bei Maus-
   bewegung, Antippen oder Tastaturfokus ein und nach 3 s ohne
   Interaktion wieder aus.
   Ohne JS bleibt der Text regulär sichtbar. Im Ruhezustand ist der Scrim
   heller, damit das Video selbst zur Geltung kommt. */
.hero--idle.is-idle-ready .hero-content {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero--idle.is-idle-ready.is-active .hero-content {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero--idle.is-idle-ready .hero-scrim {
  opacity: 0.4;
  transition: opacity 0.6s ease;
}

.hero--idle.is-idle-ready.is-active .hero-scrim {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero--idle.is-idle-ready .hero-content,
  .hero--idle.is-idle-ready .hero-scrim {
    transform: none;
    transition-duration: 0.01s;
  }
}

.hero-actions {
  justify-content: center;
}

.hero-meta {
  justify-content: center;
}

.hero-content > * + * {
  margin-top: var(--space-5);
}

.hero-content .eyebrow {
  margin-bottom: var(--space-2);
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  hyphens: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-3);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-meta-item strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-meta-item span {
  font-size: var(--fs-tiny);
  color: var(--color-text-faint);
}

/* ==========================================================================
   Karten
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

a.card {
  display: block;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 200, 50, 0.35);
}

.card:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 100ms;
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
}

.card-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-out);
}

.card:hover .card-link,
.card-link:hover {
  color: var(--color-accent);
}

.card:hover .card-link svg {
  transform: translateX(3px);
}

/* ---- Bild-Kacheln (Kachel-Navigation) ----
   Großes Foto, beim Hover/Fokus zoomt es leicht und blendet zu einer
   dunklen Textebene über — analog Ajax' erste Bildreihe. */
.card--media {
  --card-text-delay: 1s;
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 320px;
}

.card-media {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms var(--ease-out);
}

.card--media:hover .card-media img,
.card--media:focus-visible .card-media img {
  transform: scale(1.06);
}

/* Diese Karten zeigen ein Foto statt einer Text-Grafik: randlos füllen (cover)
   statt Letterboxing (contain), das jeweilige Motiv bleibt dabei sichtbar. */
.card--media-cover .card-media img {
  object-fit: cover;
}

.card--media-cover--camera .card-media img {
  object-position: 52% 50%;
}

.card--media-cover--alarm .card-media img {
  object-position: 50% 42%;
}

/* Service-Kachel: beim Hover fährt die Kamera auf das Sicura-Logo auf dem
   Rücken der Technikerin. object-position legt den Logo-Mittelpunkt im Foto
   (71,5 % / 56,6 %) auf denselben Punkt der Kachel – unabhängig vom
   Seitenverhältnis. Der Translate-Wert schiebt diesen Punkt dann in die Mitte. */
.card--media-zoom-logo .card-media img {
  object-position: 71.5% 56.6%;
  transition: transform 1.2s var(--ease-out);
}

.card--media-zoom-logo:hover .card-media img,
.card--media-zoom-logo:focus-visible .card-media img,
.card--media-zoom-logo.is-touch-active .card-media img {
  transform: scale(2.6) translate(-21.5%, -6.6%);
}

/* Video-Kachel: freigestelltes Produktvideo auf Schwarz. `contain`, damit die
   Explosionsansicht nicht beschnitten wird — der Rand verschmilzt mit Schwarz. */
.card--media-video .card-media {
  background: #000;
}

.card-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms var(--ease-out);
}

.card--media:hover .card-media video,
.card--media:focus-visible .card-media video {
  transform: scale(1.06);
}

/* Textebene: Überschrift ist immer sichtbar (über einem dunklen Verlauf am
   oberen Rand), Beschreibung und Link blenden erst beim Hover/Fokus ein. */
.card-body {
  position: relative;
  height: 100%;
  padding: var(--space-6);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 45%);
  transition: background-color var(--duration-base) var(--ease-out);
}

.card--media .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card--media .card-body h3 {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Beschreibung und Link sitzen am unteren Kachelrand, die Überschrift oben. */
.card--media .card-body p {
  margin-top: auto;
}

.card--media .card-body p,
.card--media .card-body .card-link {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.card--media:hover .card-media,
.card--media:focus-visible .card-media,
.card--media.is-touch-active .card-media {
  opacity: 0;
  transition-delay: var(--card-text-delay);
}

.card--media:hover .card-body,
.card--media:focus-visible .card-body,
.card--media.is-touch-active .card-body {
  background-color: var(--color-bg-deep);
  transition-delay: var(--card-text-delay);
}

/* Beim Hover erst das Video zeigen, Text und Abdunklung folgen nach 1 s.
   Beim Verlassen verschwindet der Text sofort (Delay nur im Hover-Zustand). */
.card--media:hover .card-body p,
.card--media:hover .card-body .card-link,
.card--media:focus-visible .card-body p,
.card--media:focus-visible .card-body .card-link,
.card--media.is-touch-active .card-body p,
.card--media.is-touch-active .card-body .card-link {
  opacity: 1;
  transform: none;
  transition-delay: var(--card-text-delay);
}

/* Hover-Video-Kachel: das Video bleibt beim Hover sichtbar und läuft unter
   einer schwarz-transparenten Textebene ab (Steuerung in script.js). */
.card--media-video:hover .card-media,
.card--media-video:focus-visible .card-media,
.card--media-video.is-touch-active .card-media {
  opacity: 1;
}

.card--media-video:hover .card-media video,
.card--media-video:focus-visible .card-media video,
.card--media-video.is-touch-active .card-media video {
  transform: none;
}

.card--media-video:hover .card-body,
.card--media-video:focus-visible .card-body,
.card--media-video.is-touch-active .card-body {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Service-Kachel: Foto bleibt nach dem Zoom unter der Textebene sichtbar */
.card--media-zoom-logo:hover .card-media,
.card--media-zoom-logo:focus-visible .card-media,
.card--media-zoom-logo.is-touch-active .card-media {
  opacity: 1;
}

.card--media-zoom-logo:hover .card-body,
.card--media-zoom-logo:focus-visible .card-body,
.card--media-zoom-logo.is-touch-active .card-body {
  background-color: rgba(0, 0, 0, 0.6);
}

/* ---- Icon-Kacheln ohne Foto: gleiche Grundfläche wie Bild-Kacheln, damit
   sie im selben Grid neben `.card--media` nicht wie ein Fremdkörper wirken. */
.card--tile {
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.card--tile .card-icon {
  width: 60px;
  height: 60px;
}

.card--tile .card-icon svg {
  width: 30px;
  height: 30px;
}

.card--tile p {
  flex-grow: 1;
}

@media (max-width: 980px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Zweispaltige Variante, z. B. für verwandte Leistungen in einem Leistungsblock */
.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 620px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .card--media,
  .card--tile {
    min-height: 260px;
  }
}

/* ==========================================================================
   Solution-Overview — große Lösungswege-Cards
   ========================================================================== */

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.solution-card {
  /* Der Kartenhintergrund ist immer der gleiche dunkle Verlauf, unabhängig
     vom Section-Scope. Die Text-Variablen werden deshalb hier lokal fix auf
     Hell-auf-Dunkel gesetzt statt vom Elternscope geerbt. */
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-text-faint: rgba(255, 255, 255, 0.5);
  --color-border: rgba(255, 255, 255, 0.12);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, #17181a 0%, #0a0a0b 70%);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, rgba(0, 200, 50, 0.10), transparent 55%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

/* ---- Foto-Variante: große Szenenfotografie statt reinem Gradient,
   solides Overlay darunter für garantierte Lesbarkeit (Briefing Punkt 4). ---- */
.solution-card--photo {
  background-image: linear-gradient(180deg, rgba(10, 10, 11, 0.25) 0%, rgba(6, 6, 7, 0.55) 55%, rgba(6, 6, 7, 0.94) 100%),
    var(--solution-photo);
  background-size: cover;
  background-position: center;
  /* Bild bis unter den 1px-Rahmen ziehen und nicht kacheln, sonst blitzt
     unten die helle Oberkante des wiederholten Fotos als Streifen auf. */
  background-origin: border-box;
  background-repeat: no-repeat;
}

.solution-card:hover,
.solution-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0, 200, 50, 0.4);
}

.solution-card:hover::before,
.solution-card:focus-visible::before {
  opacity: 1;
}

.solution-card > * {
  position: relative;
  z-index: 1;
}

.solution-index {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
}

.solution-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.solution-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.solution-card .card-link {
  margin-top: var(--space-5);
}

@media (max-width: 980px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }

  .solution-card {
    min-height: 280px;
  }
}

/* ==========================================================================
   Vorteile-Liste
   ========================================================================== */

.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-7);
}

.benefit {
  display: flex;
  gap: var(--space-4);
}

.benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(0, 200, 50, 0.1);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-icon svg {
  width: 22px;
  height: 22px;
}

.benefit h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  margin-bottom: var(--space-1);
}

.benefit p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

@media (max-width: 720px) {
  .benefits {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Ablauf — Zeitstrahl mit scroll-gekoppelter Verbindungslinie
   Ohne JS (bzw. bei reduzierter Bewegung) ist die Linie voll gefüllt und alle
   Punkte sind aktiv. script.js setzt `.is-animated`, misst die Linie zwischen
   erstem und letztem Punkt aus und steuert Füllstand (--process-progress)
   sowie `.is-active` der Punkte.
   ========================================================================== */

.process {
  --process-dot: 48px;
  --process-progress: 1;
  position: relative;
  max-width: 960px;
  margin-inline: auto;
}

.process-line {
  position: absolute;
  top: calc(var(--process-dot) / 2);
  bottom: calc(var(--process-dot) / 2);
  left: calc(var(--process-dot) / 2);
  width: 2px;
  margin-left: -1px;
  background: var(--color-border-strong);
  border-radius: 1px;
  overflow: hidden;
}

.process-line-fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(0, 200, 50, 0.6);
  transform-origin: top;
  transform: scaleY(var(--process-progress));
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-7);
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--process-dot) 1fr;
  column-gap: var(--space-5);
  align-items: start;
}

.process-dot {
  position: relative;
  z-index: 1;
  width: var(--process-dot);
  height: var(--process-dot);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  background: var(--color-bg);
  border: 2px solid var(--color-border-strong);
  color: var(--color-text-faint);
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.process:not(.is-animated) .process-dot,
.process-step.is-active .process-dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.process-step.is-active .process-dot {
  transform: scale(1.06);
}

.process-content {
  padding-top: 10px;
}

.process-content h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  margin-bottom: var(--space-2);
}

.process-content p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* Desktop: Linie mittig, Schritte abwechselnd links und rechts */
@media (min-width: 900px) {
  .process-line {
    left: 50%;
  }

  .process-steps {
    gap: var(--space-5);
  }

  .process-step {
    grid-template-columns: 1fr var(--process-dot) 1fr;
    column-gap: var(--space-7);
  }

  .process-dot {
    grid-column: 2;
    grid-row: 1;
  }

  .process-step:nth-child(odd) .process-content {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }

  .process-step:nth-child(odd) .process-content p {
    margin-left: auto;
  }

  .process-step:nth-child(even) .process-content {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-dot {
    transition: none;
  }
}

/* ==========================================================================
   Trust-Bar
   ========================================================================== */

.trust {
  text-align: center;
}

.trust-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.trust-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.trust-logo {
  /* Farbe allein trägt bereits das reduzierte visuelle Gewicht (WCAG
     4.5:1 zu --color-bg geprüft) – zusätzliches opacity würde das erneut
     verwässern und den Kontrast unter die Lesbarkeitsgrenze drücken. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--color-text-faint);
  transition: color var(--duration-base) var(--ease-out);
}

.trust-logo:hover {
  color: var(--color-text);
}

/* ---- Partner-Logos (Startseite): Fließband von rechts nach links ----
   Die Logo-Liste steht im HTML zweimal hintereinander; die Spur läuft um
   genau eine Hälfte (-50 %) nach links und springt dann nahtlos zurück.
   Helle Kacheln, da die Original-Logos für weißen Grund gemacht sind –
   Ajax liefert sein Logo auf Schwarz und bekommt eine dunkle Kachel. */
.partner-marquee {
  --partner-gap: var(--space-4);
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partner-logos {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  display: flex;
  gap: var(--partner-gap);
  width: max-content;
  animation: partner-marquee 32s linear infinite;
}

.partner-marquee:hover .partner-logos {
  animation-play-state: paused;
}

@keyframes partner-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* halbe Spur plus halber Abstand, damit der Übergang exakt sitzt */
    transform: translateX(calc(-50% - var(--partner-gap) / 2));
  }
}

.partner-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 120px;
  padding: var(--space-4) var(--space-5);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.partner-logo--dark {
  background: #000000;
}

.partner-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}

@media (max-width: 620px) {
  .partner-logo {
    width: 180px;
    height: 96px;
    padding: var(--space-3);
  }

  .partner-logo img {
    max-height: 64px;
  }
}

/* Reduzierte Bewegung: kein Lauf, Logos einfach umbrechend zentriert */
@media (prefers-reduced-motion: reduce) {
  .partner-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .partner-logos {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .partner-logo[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   CTA-Banner
   ========================================================================== */

.cta-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #17181a 0%, #000000 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 80px);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(0, 200, 50, 0.12), transparent 60%);
  pointer-events: none;
}

.cta-banner > * {
  position: relative;
}

.cta-banner h2 {
  color: #fff;
  max-width: 34ch;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
}

/* ==========================================================================
   Info-/Hinweis-Boxen (z. B. rechtlicher Hinweis)
   ========================================================================== */

.notice {
  display: flex;
  gap: var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-5);
}

.notice svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.notice p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: none;
}

.notice strong {
  color: var(--color-text);
}

/* ==========================================================================
   Seiten-Hero (Unterseiten)
   ========================================================================== */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) var(--space-8);
}

.page-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20%;
  left: 50%;
  width: 900px;
  max-width: 140vw;
  height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 200, 50, 0.07), transparent 70%);
  pointer-events: none;
}

.page-hero .container {
  max-width: 780px;
  text-align: center;
}

.page-hero .eyebrow {
  justify-content: center;
}

.page-hero h1 {
  margin-top: var(--space-3);
}

.page-hero .lede {
  margin-top: var(--space-5);
  margin-inline: auto;
}

/* ==========================================================================
   Angebot: Leistungsblöcke
   ========================================================================== */

.service-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-9);
  align-items: start;
  padding-block: var(--space-8);
}

/* Einspaltige, zentrierte Variante ohne Beschriftung links (Videoüberwachung) */
.service-stack .service-block {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  margin-inline: auto;
}

.service-stack .service-body > h2 + * {
  margin-top: var(--space-3);
}

.service-block:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.service-index {
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}

.service-index--accent {
  color: var(--color-accent);
}

.service-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.service-heading .card-icon {
  margin-bottom: 0;
}

.service-body .lede {
  margin-bottom: var(--space-5);
}

.service-sub {
  margin-top: var(--space-6);
}

.service-sub h4,
.service-sub-title {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.service-sub p + .check-list,
.service-body .lede + .check-list {
  margin-top: var(--space-4);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.check-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 1px;
}

@media (max-width: 900px) {
  .service-block {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   Ablauf-Schritte (Beratung → Planung → Installation → Einweisung)
   ========================================================================== */

.step-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.step {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-border-strong);
}

.step .service-index {
  display: block;
  margin-bottom: var(--space-2);
}

.step h4 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-1);
}

.step p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .step-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 480px) {
  .step-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FAQ (natives <details>/<summary>, kein JavaScript)
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-text-faint);
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.faq-item[open] summary::after {
  content: '+';
  color: var(--color-accent);
  transform: rotate(45deg);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.faq-item p {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* ==========================================================================
   Branchen (Referenzen): Kachelraster mit Bild, Titel und eingesetzter Technik
   ========================================================================== */

/* Breiterer Container, damit fünf Kacheln nebeneinander Platz haben */
.container--wide {
  max-width: 1480px;
}

/* Drei Laufbänder: obere und untere Reihe laufen nach rechts, die mittlere
   nach links (Bewegung per script.js). Jede Spur besteht aus zwei gleichen
   Hälften, damit die Schleife nahtlos ist. Beim Überfahren hält eine Reihe an
   und lässt sich mit Maus, Trackpad oder Finger seitlich verschieben.
   Bewusst ohne data-reveal: Läuft die Einblend-Animation (fill-mode forwards)
   auf einem Vorfahren der verschobenen Spuren, zeichnet iOS-Safari die
   breiten Spuren nach dem Verschieben nicht neu und die Reihen bleiben leer. */
.sector-marquee {
  --sector-card-width: clamp(250px, 72vw, 300px);
  --sector-card-gap: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sector-card-gap);
}

.sector-row {
  overflow: hidden;
  cursor: grab;
  /* Senkrechtes Scrollen der Seite bleibt erhalten, waagerechte Wischgesten
     verschieben die Reihe */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

/* Weiche Ränder links und rechts: Verlauf in Hintergrundfarbe über der Spur.
   Bewusst keine mask-image, die zwingt den Browser (v. a. Safari), die ganze
   Reihe bei jeder Bewegung neu zu zeichnen, und lässt das Ziehen ruckeln. */
.sector-row::before,
.sector-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 6%;
  pointer-events: none;
}

.sector-row::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-bg), rgba(10, 10, 11, 0));
}

.sector-row::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-bg), rgba(10, 10, 11, 0));
}

.sector-row.is-dragging {
  cursor: grabbing;
}

.sector-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Die Spur selbst bleibt stehen; script.js verschiebt jede Karte einzeln
     (siehe dort, Grund: iOS-Safari zeichnet breite verschobene Ebenen nicht
     vollständig). */
}

.sector-track img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.sector-card {
  flex: 0 0 var(--sector-card-width);
  /* Feste Breite zusätzlich zu flex-basis, sonst rechnet Safari bei der
     Spurbreite die einzeilige Breite langer Titel mit ein */
  width: var(--sector-card-width);
  margin-right: var(--sector-card-gap);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.sector-card-media {
  position: relative;
  aspect-ratio: 960 / 420;
  background: var(--color-surface-raised);
}

.sector-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sector-card-body {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

/* Grüner Punkt vor dem Titel wie bei der Eyebrow */
.sector-card-body::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px 1px rgba(0, 200, 50, 0.6);
}

.sector-card-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.sector-card-tech {
  grid-column: 2;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Hinweis zur Diskretion unter dem Raster */
.discretion-note {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.discretion-note svg {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--color-accent);
}

.discretion-note p {
  max-width: none;
  margin: 0;
  color: var(--color-text-muted);
}

.discretion-note .discretion-note-title {
  margin-bottom: var(--space-1);
  font-weight: 600;
  color: var(--color-text);
}

@media (max-width: 520px) {
  .discretion-note {
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .discretion-note svg {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   Statischer Bewertungsblock (kein Skript, kein iframe)
   ========================================================================== */

/* Gesamtbewertung unter der Überschrift: fünf goldene Sterne */
.rating-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.rating-stars {
  display: flex;
  gap: 6px;
  color: #f5b400;
  filter: drop-shadow(0 0 10px rgba(245, 180, 0, 0.35));
}

.rating-stars svg {
  width: 32px;
  height: 32px;
}

.rating-text {
  margin: 0;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--color-text);
}

.rating-intro,
.rating-outro {
  max-width: 560px;
  margin-inline: auto;
  color: var(--color-text-muted);
}

.rating-intro {
  margin-top: var(--space-5);
}

.rating-outro {
  margin-top: var(--space-7);
}

.rating-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}


/* ==========================================================================
   Kontakt
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-8);
  align-items: start;
}

.contact-info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

.contact-info h3 {
  margin-bottom: var(--space-5);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-list li {
  display: flex;
  gap: var(--space-4);
}

.contact-list .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-list .icon svg {
  width: 20px;
  height: 20px;
}

.contact-list dt {
  font-size: var(--fs-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
  margin-bottom: 2px;
}

.contact-list dd {
  font-size: var(--fs-small);
  color: var(--color-text);
  margin: 0;
}

.todo {
  color: var(--color-danger);
  font-weight: 600;
}

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}

.form-row {
  margin-bottom: var(--space-5);
}

.form-row label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.form-row .optional {
  font-weight: 400;
  color: var(--color-text-faint);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
  color: var(--color-text);
  font-size: var(--fs-body);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.form-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px;
  cursor: pointer;
}

.form-row select:has(option[value=""]:checked) {
  color: var(--color-text-faint);
}

.form-row select option {
  color: var(--color-text);
  background: var(--color-surface);
}

.form-row textarea {
  min-height: 140px;
  resize: vertical;
}

.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
  border-color: var(--color-danger);
}

.field-error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-tiny);
  color: var(--color-danger);
  margin-top: var(--space-2);
}

.form-row.has-error .field-error {
  display: flex;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-checkbox input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.form-checkbox label {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-weight: 400;
}

.form-status {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
}

.form-status.is-visible {
  display: flex;
}

.form-status.success {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border: 1px solid rgba(0, 200, 50, 0.3);
}

.form-status.error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid rgba(255, 107, 82, 0.3);
}

.form-status svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- Kontaktformular: Puzzle-Captcha ---- */
.form-row .form-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.puzzle-captcha {
  max-width: 420px;
  user-select: none;
  -webkit-user-select: none;
}

.puzzle-captcha-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border-strong);
}

.puzzle-captcha-bg,
.puzzle-captcha-piece {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.puzzle-captcha-bg:not([src]),
.puzzle-captcha-piece:not([src]) {
  visibility: hidden;
}

.puzzle-captcha.is-loading .puzzle-captcha-stage {
  opacity: 0.6;
}

.puzzle-captcha.is-unavailable .puzzle-captcha-handle {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Honeypot gegen Spam-Bots: für Menschen unsichtbar */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.puzzle-captcha-bg {
  inset: 0;
  width: 100%;
  height: 100%;
}

.puzzle-captcha-piece {
  left: 0;
  top: 0;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  will-change: transform;
}

.puzzle-captcha-refresh {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}

.puzzle-captcha-refresh:hover,
.puzzle-captcha-refresh:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

.puzzle-captcha-refresh:focus-visible,
.puzzle-captcha-handle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.puzzle-captcha-refresh svg {
  width: 16px;
  height: 16px;
}

.puzzle-captcha-track {
  position: relative;
  height: 48px;
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
  overflow: hidden;
  touch-action: none;
}

.puzzle-captcha-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-accent-soft);
}

.puzzle-captcha-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4) 0 60px;
  font-size: var(--fs-tiny);
  color: var(--color-text-faint);
  text-align: center;
  pointer-events: none;
}

.puzzle-captcha-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 40px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 3px);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: grab;
  touch-action: none;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.puzzle-captcha-handle:active {
  cursor: grabbing;
}

.puzzle-captcha-handle svg {
  width: 20px;
  height: 20px;
}

.puzzle-captcha.is-solved .puzzle-captcha-handle {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  cursor: default;
}

.puzzle-captcha-hint {
  transition: opacity var(--duration-base) var(--ease-out);
}

.puzzle-captcha.is-moved .puzzle-captcha-hint {
  opacity: 0;
}

.puzzle-captcha-status:empty {
  display: none;
}

.puzzle-captcha-status {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-danger);
}

.puzzle-captcha.is-solved .puzzle-captcha-status {
  color: var(--color-accent);
}

.puzzle-captcha.is-failed .puzzle-captcha-track {
  border-color: var(--color-danger);
}

.puzzle-captcha.is-failed .puzzle-captcha-stage {
  animation: puzzle-shake 400ms var(--ease-out);
}

.form-row.has-error .puzzle-captcha-track {
  border-color: var(--color-danger);
}

.puzzle-captcha-help {
  margin-top: var(--space-2);
  font-size: var(--fs-tiny);
  color: var(--color-text-faint);
}

@keyframes puzzle-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-captcha.is-failed .puzzle-captcha-stage {
    animation: none;
  }
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */

.legal-content {
  max-width: 740px;
}

.legal-content h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
}

.legal-content h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.legal-content ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.placeholder-inline {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: 4px;
  padding: 0 var(--space-2);
  font-weight: 600;
}

/* ==========================================================================
   Scroll-Reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}

[data-reveal].is-visible {
  animation: reveal var(--duration-slow) var(--ease-out) forwards;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-bg-deep);
  color: #fff;
}

.site-footer .brand {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
}

.footer-brand p {
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-small);
  max-width: 32ch;
}

/* Agentur-Credit unter der Anschrift: per Trennlinie und kleinerer
   Schrift klar vom Betreiber (Impressum-Angaben) abgesetzt. */
.footer-brand .footer-made-by {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-tiny);
  color: rgba(255, 255, 255, 0.5);
}

.footer-col h4 {
  /* rgba(.5) statt (.4): 5.3:1 gegen Schwarz, erfüllt WCAG AA 4.5:1
     für normalen Text (die Spaltentitel sind trotz klein/uppercase
     keine "large text"-Ausnahme). */
  font-size: var(--fs-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--duration-base) var(--ease-out);
}

.footer-col a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-tiny);
  color: rgba(255, 255, 255, 0.5);
}

/* Agentur-Credit: Verlaufsschrift mit Unterstrich unter „Fority“,
   der beim Hover auf die volle Breite des Namens wächst. */
/* Bewusst inline statt inline-block: Safari färbt bei background-clip: text
   keinen Text in inline-block-Kindern ein (das Wort wäre unsichtbar). */
.footer-credit {
  position: relative;
  font-weight: 700;
  color: #a78bfa;
  white-space: nowrap;
}

.footer-credit__word {
  position: relative;
}

.footer-credit__text,
.footer-credit::after,
.footer-credit__word::after {
  background: linear-gradient(90deg, #c084fc, #818cf8, #60a5fa, #818cf8, #c084fc);
  background-size: 200% 100%;
  animation: footer-credit-flow 4s linear infinite;
}

.footer-credit__text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes footer-credit-flow {
  to {
    background-position: -200% 0;
  }
}

.footer-credit::after,
.footer-credit__word::after {
  content: '';
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
}

.footer-credit__word::after {
  right: 0;
  bottom: -3px;
}

.footer-credit::after {
  bottom: -3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.footer-credit:hover::after,
.footer-credit:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .footer-credit::after {
    transition: none;
  }

  .footer-credit__text,
  .footer-credit::after,
  .footer-credit__word::after {
    animation: none;
  }
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobil: Leistungen + Unternehmen nebeneinander; Marke und Kontakt
   (lange E-Mail-Adresse) über volle Breite. */
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-4);
  }

  .footer-brand,
  .footer-col:last-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Markierschutz: Text nicht markierbar – ausgenommen Formularfelder,
   Telefonnummern und E-Mail-Adressen
   ========================================================================== */
body {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
a[href^="tel:"],
a[href^="mailto:"],
.phone {
  -webkit-user-select: text;
  user-select: text;
}

.phone {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.phone:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Verdeckte Videoüberwachung (Unterseite): Hero-Kachel mit Bild rechts,
   Feature-Kacheln mit Icon und Hinweis-Kachel – alles als abgerundete,
   dunkle Flächen im Stil der übrigen Cards.
   ========================================================================== */

.covert {
  padding-top: clamp(24px, 3vw, 48px);
}

.covert-stack {
  display: grid;
  gap: var(--space-5);
}

.covert-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.covert-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}

.covert-hero h1 {
  margin-top: var(--space-4);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
  overflow-wrap: break-word;
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.covert-hero-lead {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-text);
}

.covert-hero-text {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.covert-hero .btn {
  margin-top: var(--space-6);
}

.covert-hero-media {
  position: relative;
  min-height: 280px;
}

.covert-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.covert-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}

.covert-feature,
.covert-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.covert-feature {
  flex-direction: column;
}

.covert-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
}

.covert-icon svg {
  width: 24px;
  height: 24px;
}

.covert-feature-title {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.covert-feature p,
.covert-note p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.covert-note p {
  max-width: 80ch;
}

/* Variante mit zwei Kacheln: Icon links neben dem Text */
.covert-features--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.covert-features--2 .covert-feature {
  flex-direction: row;
  align-items: center;
}

@media (max-width: 980px) {
  .covert-features {
    grid-template-columns: 1fr;
  }

  .covert-feature {
    flex-direction: row;
  }
}

@media (max-width: 860px) {
  .covert-hero {
    grid-template-columns: 1fr;
  }

  .covert-hero-media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 480px) {
  .covert-hero-body {
    padding: var(--space-5);
  }

  .covert-feature,
  .covert-features--2 .covert-feature,
  .covert-note {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }
}

/* ==========================================================================
   FAQ-Seite: linksbündiger Seitenkopf, aufklappbare Fragen (<details>) mit
   „Antwort lesen“-Pille rechts, CTA-Banner am Ende.
   ========================================================================== */

.qa-hero {
  padding-block: clamp(48px, 6vw, 88px) var(--space-7);
}

.qa-hero h1 {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.qa-hero .lede {
  margin-top: var(--space-3);
}

.qa-list {
  display: grid;
  gap: var(--space-2);
}

.qa-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease-out);
}

.qa-item:hover,
.qa-item[open] {
  border-color: var(--color-border-strong);
}

.qa-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}

.qa-item summary::-webkit-details-marker {
  display: none;
}

.qa-item summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.qa-question {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  max-width: 60ch;
}

.qa-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--fs-tiny);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.qa-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-out);
}

.qa-item summary:hover .qa-toggle {
  background: var(--color-accent-soft);
}

.qa-toggle-close,
.qa-item[open] .qa-toggle-open {
  display: none;
}

.qa-item[open] .qa-toggle-close {
  display: inline;
}

.qa-item[open] .qa-toggle svg {
  transform: rotate(90deg);
}

.qa-answer {
  padding: 0 var(--space-5) var(--space-5);
}

.qa-answer p {
  color: var(--color-text-muted);
  max-width: 75ch;
}

.qa-cta {
  margin-top: var(--space-8);
}

@media (max-width: 620px) {
  .qa-item summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   Ratgeber-Seite: vier Teaser-Karten (Bild, Kategorie, Titel, Kurztext,
   „Beitrag lesen“) springen zu den Beiträgen weiter unten auf der Seite.
   Kopfbereich nutzt .qa-hero.
   ========================================================================== */

/* Kopfbereich und Teaser-Karten liegen gemeinsam auf einem stark
   abgedunkelten, unscharfen Foto, das nach unten in den Seitenhintergrund
   ausläuft. */
.rg-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.rg-top::before,
.rg-top::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.rg-top::before {
  background: url('assets/Medien/ratgeber-hero-hintergrund.jpg') center 30% / cover no-repeat;
  opacity: 0.5;
}

.rg-top::after {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 10, 11, 0.35), rgba(10, 10, 11, 0.85)),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.85) 55%, var(--color-bg) 100%);
}

.rg-hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
  font-weight: 700;
}

.rg-hero .lede {
  max-width: 72ch;
  color: #d4d6dc;
}

.rg-teaser {
  padding-top: 0;
}

.rg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.rg-card {
  display: flex;
  flex-direction: column;
  background: rgba(16, 16, 18, 0.92);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.rg-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 200, 50, 0.35);
}

.rg-card-media {
  aspect-ratio: 7 / 5;
  overflow: hidden;
}

.rg-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform var(--duration-slow) var(--ease-out);
}

.rg-card:hover .rg-card-media img {
  transform: scale(1.04);
}

.rg-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: var(--space-5);
}

.rg-card-title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.rg-card-text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.rg-card-btn {
  margin-top: auto;
  padding: 10px 24px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  color: var(--color-accent);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.rg-card-text {
  margin-bottom: var(--space-5);
}

.rg-card:hover .rg-card-btn {
  background: var(--color-accent-soft);
}

.rg-articles {
  display: grid;
  gap: var(--space-6);
}

.rg-article {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: 104px;
}

.rg-article-media {
  position: relative;
  min-height: 240px;
}

.rg-article-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.rg-article-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 48px);
}

.rg-article-title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.rg-article-text {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.rg-article-text p {
  color: var(--color-text-muted);
}

.rg-article .btn {
  margin-top: var(--space-6);
}

/* Auf Desktop ist der Bildrahmen hochkant und schneidet die Querformat-Fotos
   seitlich ab: Ausschnitt je Beitrag auf das Hauptmotiv legen. */
@media (min-width: 761px) {
  #alarmanlagen .rg-article-media img {
    object-position: 31% 50%;
  }

  #kurzeinsaetze .rg-article-media img {
    object-position: 8% 50%;
  }

  #verdeckte-videoueberwachung .rg-article-media img {
    object-position: 68% 50%;
  }
}

@media (max-width: 1024px) {
  .rg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rg-article {
    grid-template-columns: 1fr;
  }

  .rg-article-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 560px) {
  .rg-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Kennzeichnung KI-generierter Bilder und Videos: kleines Badge unten rechts
   im jeweiligen Medien-Container (Container muss positioniert sein).
   ========================================================================== */

.rg-card-media,
.rg-hero,
.sector-card-media {
  position: relative;
}

.ki-label,
.solution-card > .ki-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.hero-liquid-bg > .ki-label {
  right: 60px;
  bottom: 22px;
}

/* Pause-/Abspielknopf für das Hero-Video, dezent unten rechts */
.hero-video-toggle {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.75;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.hero-video-toggle:hover,
.hero-video-toggle:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

.hero-video-toggle[hidden] {
  display: none;
}

.hero-video-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-video-toggle__pause {
  fill: none;
}

.hero-video-toggle__play,
.hero-video-toggle.is-paused .hero-video-toggle__pause {
  display: none;
}

.hero-video-toggle.is-paused .hero-video-toggle__play {
  display: block;
}

/* ==========================================================================
   Kontakt-Button im Header: sitzt außerhalb des Klappmenüs und bleibt auf
   allen Bildschirmbreiten sichtbar und erreichbar.
   ========================================================================== */

.site-header .nav-desktop {
  margin-left: auto;
}

.site-header .nav-cta {
  margin-left: var(--space-7);
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .site-header .nav-cta {
    margin-left: var(--space-5);
  }
}

@media (max-width: 1024px) {
  .site-header .container {
    gap: var(--space-3);
  }

  .site-header .nav-cta {
    width: auto;
    margin-left: auto;
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 480px) {
  .brand-logo {
    height: 40px;
  }

  .site-header .nav-cta {
    padding: 10px 14px;
    font-size: var(--fs-tiny);
  }
}

@media (max-width: 359px) {
  .brand-logo {
    height: 32px;
  }
}

/* ==========================================================================
   Inhaberin: Foto auf „Über uns“, neben den Kontaktdaten und auf der
   Startseite. Bild ist hochformatig (4:5) zugeschnitten.
   ========================================================================== */

.owner-figure {
  margin: 0;
}

.owner-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.owner-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.owner-figure figcaption strong {
  color: var(--color-text);
  font-size: var(--fs-body);
}

.service-stack > .owner-figure {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.owner-figure--small {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.owner-figure--small figcaption {
  margin-top: 0;
}

.owner-teaser {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1040px;
  margin-inline: auto;
}

.owner-teaser-body > * + * {
  margin-top: var(--space-4);
}

.owner-teaser-caption {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.owner-teaser-caption strong {
  color: var(--color-text);
}

@media (max-width: 760px) {
  .owner-teaser {
    grid-template-columns: 1fr;
  }

  .owner-figure--teaser {
    max-width: 360px;
  }
}

.covert-hero-media,
.rg-hero,
.rg-card-media,
.rg-article-media,
.solution-card {
  position: relative;
}

/* Die KI-Kennzeichnung der Kachel-Medien bleibt sichtbar, auch wenn die
   Textebene über dem Bild liegt. */
.card--media .card-media .ki-label {
  z-index: 3;
}

/* ==========================================================================
   Geräte ohne Hover (Smartphones, Tablets): Kacheltexte erscheinen erst beim
   Darüberwischen (`.is-touch-active`, script.js); unten Platz für das
   KI-Label lassen.
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
  .card--media .card-body {
    padding-bottom: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--media .card-body {
    background: rgba(0, 0, 0, 0.7);
    padding-bottom: 48px;
  }

  .card--media .card-body p,
  .card--media .card-body .card-link {
    opacity: 1;
    transform: none;
  }
}

.hero-liquid-bg > .ki-label {
  pointer-events: none;
}

/* Bei reduzierter Bewegung oder ohne Hover-Möglichkeit: Hero-Text dauerhaft
   sichtbar (kein Ausblenden nach 3 s). */
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .hero.hero--idle.is-idle-ready .hero-content {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .hero--idle.is-idle-ready .hero-scrim {
    opacity: 1;
  }
}