/* ============================================================
   Rhein Elektro-Kabelmontage GmbH — Design B (Basis: v2)
   "Industrial Futurism · Deep" · Basiert auf v2, aber der helle
   Grund ist ein gedämpftes Stahlblau-Grau statt reinem Weiß:
   weniger blendend, mehr Tiefe (weiße Karten heben sich ab),
   dezente Blueprint-Textur + Navy-Akzente in leeren Flächen.
   Kein Orange, kein Warnband — nur Blau/Navy. Barlow (Condensed).
   ============================================================ */

:root {
  /* Light surfaces — Design B: Stahlblau-Grau statt reinem Weiß */
  --bg: #e6ecf5;          /* Seitengrund: kühles Blaugrau (kein Weiß) */
  --bg-2: #d9e2f0;        /* Alt-Sektionen, deutlich getönt */
  --bg-3: #cad7e9;        /* Akzentfläche */
  --panel: #ffffff;       /* Karten bleiben weiß → heben sich ab (Tiefe) */
  --panel-tint: #eef3fa;  /* leicht getönte Panels */
  --line: #cbd7e8;
  --line-2: #b3c4db;

  /* Dark surfaces (Hero, Stats, CTA, Footer) */
  --navy: #081120;
  --navy-2: #0c1930;
  --navy-3: #13264a;
  --line-dark: rgba(140, 178, 255, 0.14);
  --line-dark-2: rgba(140, 178, 255, 0.26);

  /* Text */
  --text: #101c2c;
  --text-dim: #42536a;
  --text-faint: #5d6f84; /* ≥4.5:1 auf --bg und --bg-2 (WCAG AA) */
  --text-inv: #f2f7ff;
  --text-inv-dim: #b5c6e0;
  --text-inv-faint: #8398b6;

  /* Brand */
  --accent: #1c3f8b;
  --accent-2: #2563eb;
  --accent-dark: #16326e;
  --sky: #219fdb;   /* Hellblau aus dem Logo */
  --cyan: #4cc3f7;  /* Glow / Highlights */
  --blue: #487aa1;
  --blue-2: #2563eb;
  --danger: #e5484d;

  --grad: linear-gradient(92deg, #2563eb, #38bdf8);
  --grad-text: linear-gradient(92deg, #2e6bf0, #219fdb);
  --grad-text-dark: linear-gradient(92deg, #7db3ff, #4cc3f7);

  --radius: 12px;
  --radius-lg: 18px;
  --font-body: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --container: 1200px;
  --header-h: 76px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  /* Gedämpfter Grund + dezente Blueprint-Textur (belebt leere Flächen;
     dunkle Sektionen decken sie mit eigenem Hintergrund ab) */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(28, 63, 139, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 63, 139, 0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--sky); }

::selection { background: var(--accent-2); color: #ffffff; }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dezente Custom-Scrollbar (nur Desktop-Feinschliff) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: var(--bg-2); }
  ::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 8px;
    border: 3px solid var(--bg-2);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.2rem; letter-spacing: 0.03em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-dim); max-width: 62ch; }

/* Akzent in Headlines: Vollton in hellen Sektionen;
   Gradient nur auf den dunklen Heros (bewusstes Brand-Element) */
.accent { color: var(--accent-2); }
.accent-blue { color: var(--sky); }

/* Kicker / section label — Tech-Chip mit Energie-Linie */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--cyan));
}

/* ---------- Layout ---------- */

.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}
@media (max-width: 640px) {
  .container { width: calc(100% - 40px); }
}

.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section-tight { padding: clamp(48px, 7vw, 88px) 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head.center .lead { margin-inline: auto; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* Energie-Linie (ehem. Hazard-Stripe): leuchtender Kabel-Strahl */
.hazard {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-2) 18%,
    var(--cyan) 50%,
    var(--accent-2) 82%,
    transparent 100%);
  box-shadow: 0 0 22px rgba(76, 195, 247, 0.55), 0 0 6px rgba(76, 195, 247, 0.8);
  opacity: 1;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, #ffffff 84%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
/* Haarfeine Energie-Linie an der Unterkante */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.35) 30%, rgba(76, 195, 247, 0.45) 50%, rgba(37, 99, 235, 0.35) 70%, transparent);
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Breite = Content-Container → Logo sitzt bündig auf der Kante der
     jeweiligen Seiten-Überschrift (auf allen Seiten) */
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 50px; width: auto; }
@media (max-width: 640px) { .brand img { height: 42px; } }
/* Logo ist jetzt transparent — kein weißer Chip mehr nötig */
.brand .brand-chip {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Startseite: Logo auf die linke Kante der Hero-Headline ausrichten
   (Header-Breite = Content-Container statt breiter) + etwas größer */
.home .header-inner { width: min(var(--container), 100% - 48px); }
.home .brand img { height: 50px; }
@media (max-width: 640px) {
  .home .header-inner { width: calc(100% - 40px); }
  .home .brand img { height: 42px; }
}

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.main-nav a:hover { color: var(--text); background: var(--bg-3); }
.main-nav a.active { color: var(--accent-2); }
.main-nav a.nav-cta {
  color: #ffffff;
  background: var(--grad);
  margin-left: 10px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}
.main-nav a.nav-cta:hover {
  color: #ffffff;
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.42);
}

/* Dropdown */
.nav-item { position: relative; }
.nav-item > a .caret { font-size: 0.7em; opacity: 0.6; margin-left: 4px; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 8px;
  min-width: 250px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  box-shadow: 0 24px 48px rgba(8, 22, 48, 0.16), 0 0 0 1px rgba(76, 195, 247, 0.06);
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a { display: block; padding: 10px 14px; color: var(--text-dim); border-radius: 8px; }
.dropdown a:hover { color: var(--accent-2); background: var(--bg-3); }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: transform 0.25s, opacity 0.25s;
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 24px 48px rgba(8, 22, 48, 0.18);
    padding: 18px 24px 26px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav a { padding: 13px 14px; font-size: 1.15rem; }
  .main-nav a.nav-cta { margin: 12px 0 0; text-align: center; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 0 0 18px;
    min-width: 0;
    display: none;
    flex-direction: column;
  }
  .nav-item.open .dropdown { display: flex; }
  .dropdown a { color: var(--text-faint); }
  .nav-item > a .caret { transition: transform 0.25s ease; }
  .nav-item.open > a .caret { transform: rotate(180deg); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero (Startseite, dunkel) ---------- */

.hero {
  position: relative;
  min-height: min(92vh, 940px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 64px) 0 96px;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--text-inv);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Navy-Overlay + Glow */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 500px at 82% 10%, rgba(33, 159, 219, 0.16), transparent 65%),
    linear-gradient(90deg, rgba(8, 17, 32, 0.96) 0%, rgba(8, 17, 32, 0.86) 45%, rgba(8, 17, 32, 0.55) 100%),
    linear-gradient(0deg, var(--navy) 0%, rgba(8, 17, 32, 0.2) 40%);
}
/* Blueprint-Grid */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(124, 180, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 180, 255, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero-content { max-width: 760px; }
.hero h1 { margin-bottom: 20px; color: var(--text-inv); }
.hero .lead { margin-bottom: 36px; color: var(--text-inv-dim); }
.hero .kicker { color: var(--cyan); }
.hero .kicker::before { background: linear-gradient(90deg, var(--cyan), transparent); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero .accent {
    background: var(--grad-text-dark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d5e4fa;
  background: rgba(126, 176, 255, 0.08);
  border: 1px solid var(--line-dark-2);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(76, 195, 247, 0.9);
}

/* Badges in hellen Sektionen */
.section .badge, .section-alt .badge {
  color: var(--text-dim);
  background: var(--bg-3);
  border-color: var(--line-2);
}
.section .badge::before, .section-alt .badge::before {
  background: var(--accent-2);
  box-shadow: none;
}

/* ---------- Buttons ---------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.25s, filter 0.2s, border-color 0.2s, color 0.2s, background 0.2s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad);
  color: #ffffff;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.34);
}
.btn-primary:hover {
  color: #ffffff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(37, 99, 235, 0.05);
  transform: translateY(-2px);
}

/* Ghost-Buttons auf dunklen Flächen */
.hero .btn-ghost, .cta-band .btn-ghost, .page-hero .btn-ghost {
  color: #e6efff;
  border-color: var(--line-dark-2);
}
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover, .page-hero .btn-ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(76, 195, 247, 0.08);
}

.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Stats (dunkles Zahlenband) ---------- */

.stats-band {
  background:
    radial-gradient(1100px 420px at 18% -30%, rgba(37, 99, 235, 0.16), transparent 70%),
    radial-gradient(900px 380px at 88% 130%, rgba(33, 159, 219, 0.12), transparent 70%),
    var(--navy-2);
  border-bottom: 1px solid var(--line-dark);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat {
  padding: clamp(36px, 5vw, 56px) 28px;
  text-align: center;
  border-left: 1px solid var(--line-dark);
}
.stat:first-child { border-left: none; }
.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.stat-value .suffix { color: var(--text-inv-dim); font-size: 0.6em; }
.stat-label {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-inv-faint);
  font-size: 0.95rem;
}
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .stat:nth-child(3) { grid-column: 1 / -1; }
}

/* ---------- Cards ---------- */

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
/* Energie-Linie an der Oberkante, fährt bei Hover aus */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.card:hover::before { transform: scaleX(1); }
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 24px 48px rgba(10, 30, 68, 0.14), 0 0 0 1px rgba(76, 195, 247, 0.08);
}
.card-media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card-media img { transform: scale(1.05); }
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 22, 48, 0.22), transparent 55%);
}
.card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body h3 { margin: 0; }
.card-body p { color: var(--text-dim); font-size: 0.98rem; }
.card-link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-link:hover { color: var(--sky); }

/* Feature tiles (Verlegearten, Schottarten, Werte …) */
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.tile:hover {
  border-color: rgba(37, 99, 235, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10, 30, 68, 0.1);
}
.tile h3, .tile h4 { color: var(--text); }
.tile p { color: var(--text-dim); font-size: 0.97rem; margin: 0; }
.tile .tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(76, 195, 247, 0.14));
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--accent-2);
  margin-bottom: 18px;
  font-size: 22px;
}
.tile-media { border-radius: 10px; overflow: hidden; aspect-ratio: 3/2; margin-bottom: 20px; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Image frame ---------- */

.img-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Brandschutz-Foto: Bildausschnitt-Feintuning je nach Quellbild */
img[src*="brandschutz-portrait"] { object-position: center center; }
.img-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(8, 22, 48, 0.05);
  pointer-events: none;
  z-index: 1;
}
/* ---------- Process timeline ---------- */

.process { display: grid; gap: 18px; counter-reset: step; }
.process-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  counter-increment: step;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.process-step:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 14px 32px rgba(10, 30, 68, 0.08);
}
.process-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent-2);
  border-right: 1px solid var(--line-2);
  padding-right: 20px;
  align-self: start;
}
.process-step h3, .process-step h4 { margin-bottom: 8px; }
.process-step ul { margin: 0; padding-left: 20px; color: var(--text-dim); }
.process-step li { margin-bottom: 6px; }
.process-step li:last-child { margin-bottom: 0; }
.process-step li strong { color: var(--text); }
@media (max-width: 560px) {
  .process-step { grid-template-columns: 1fr; gap: 10px; }
  .process-step::before { border-right: none; border-bottom: 1px solid var(--line-2); padding: 0 0 10px; }
}

/* ---------- Reference list ---------- */

.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ref-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ref-item:hover {
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10, 30, 68, 0.08);
}
.ref-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--grad);
  flex-shrink: 0;
}

/* Marquee (Startseite) */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 22px 0;
  background: var(--bg-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee-track span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
  opacity: 0.6;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- Team ---------- */

.team-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.team-card:hover {
  border-color: rgba(37, 99, 235, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10, 30, 68, 0.1);
}
.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffffff;
  background: var(--grad);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.team-card h3 { margin-bottom: 2px; font-size: 1.45rem; }
.team-role {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.88rem;
  color: var(--accent-2);
  margin-bottom: 14px;
}
.team-card a.mail { color: var(--text-dim); font-size: 0.97rem; word-break: break-all; }
.team-card a.mail:hover { color: var(--sky); }

/* ---------- Values ---------- */

.value-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.value-row:last-child { border-bottom: 1px solid var(--line); }
.value-row h3 { color: var(--accent-2); margin: 0; }
.value-row p { color: var(--text-dim); margin: 0; max-width: 68ch; }
@media (max-width: 720px) {
  .value-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Checklist ---------- */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--text-dim);
}
.checklist li strong { color: var(--text); }
.checklist li::before {
  content: "✓";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--grad);
  margin-top: 3px;
}

/* ---------- Jobs (Karriere) ---------- */

.job-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.job-card:hover, .job-card.open {
  border-color: rgba(37, 99, 235, 0.35);
}
.job-card.open { box-shadow: 0 18px 40px rgba(10, 30, 68, 0.1); }
.job-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 30px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.job-head:hover { background: var(--bg-2); }
.job-head h3 { margin: 0; }
.job-meta {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--accent-2);
  display: block;
  margin-bottom: 6px;
}
.job-toggle-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: var(--accent-2);
  transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}
.job-card.open .job-toggle-icon {
  transform: rotate(45deg);
  background: var(--grad);
  border-color: transparent;
  color: #ffffff;
}
.job-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.job-body > div { overflow: hidden; }
.job-card.open .job-body { grid-template-rows: 1fr; }
.job-body-inner { padding: 0 30px 30px; border-top: 1px solid var(--line); }
.job-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 24px; }
@media (max-width: 900px) { .job-cols { grid-template-columns: 1fr; } }
.job-cols h4 { color: var(--accent-2); font-size: 1.05rem; letter-spacing: 0.08em; }
.job-cols ul { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 0.97rem; }
.job-cols li { margin-bottom: 8px; }
.job-cols li strong { color: var(--text); }

/* ---------- Contact ---------- */

.contact-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
}
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list .ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(76, 195, 247, 0.14));
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--accent-2);
  font-size: 1.1rem;
}
.contact-list .label {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--text-faint);
  display: block;
}
.contact-list a, .contact-list .val { color: var(--text); font-size: 1.05rem; }
.contact-list a:hover { color: var(--accent-2); }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

label {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--text-dim);
  display: block;
  margin-bottom: 7px;
}
input, textarea, select {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 16px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
textarea { resize: vertical; min-height: 140px; }

.form-note { font-size: 0.85rem; color: var(--text-faint); }

/* ---------- CTA band (dunkel) ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 85% 120%, rgba(37, 99, 235, 0.28), transparent 70%),
    radial-gradient(700px 380px at 8% -30%, rgba(33, 159, 219, 0.2), transparent 70%),
    var(--navy-2);
  border-block: 1px solid var(--line-dark);
  color: var(--text-inv);
}
/* Blueprint-Grid auch hier, sehr dezent */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 180, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 180, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(100% 100% at 80% 100%, #000 20%, transparent 80%);
  mask-image: radial-gradient(100% 100% at 80% 100%, #000 20%, transparent 80%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(56px, 8vw, 96px) 0;
}
.cta-inner h2 { margin: 0 0 8px; color: var(--text-inv); }
.cta-inner p { margin: 0; color: var(--text-inv-dim); max-width: 52ch; }
.cta-band .kicker { color: var(--cyan); }
.cta-band .kicker::before { background: linear-gradient(90deg, var(--cyan), transparent); }

/* ---------- Footer (dunkel) ---------- */

.site-footer {
  background: var(--navy);
  border-top: 1px solid var(--line-dark);
  color: var(--text-inv-dim);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(48px, 7vw, 80px) 0 48px;
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h4 {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--text-inv-faint);
  margin-bottom: 18px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid li { color: var(--text-inv-dim); }
.footer-grid a { color: var(--text-inv-dim); }
.footer-grid a:hover { color: var(--cyan); }
.footer-about p { color: var(--text-inv-faint); font-size: 0.95rem; max-width: 40ch; }
.footer-brand { margin-bottom: 16px; }
.footer-brand .brand-chip {
  display: inline-flex;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
/* Transparentes Logo auf Navy: weiß gefiltert (monochrom) */
.footer-brand img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-inv-faint);
}
.footer-bottom a { color: var(--text-inv-faint); }
.footer-bottom a:hover { color: var(--cyan); }

/* ---------- Page hero (Unterseiten, dunkel) ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 9vw, 110px)) 0 clamp(48px, 7vw, 84px);
  background:
    radial-gradient(1100px 480px at 80% -20%, rgba(37, 99, 235, 0.26), transparent 70%),
    radial-gradient(800px 420px at 5% 110%, rgba(33, 159, 219, 0.14), transparent 70%),
    var(--navy);
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-inv);
}
/* Blueprint-Grid */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(124, 180, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 180, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 120% at 75% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(120% 120% at 75% 0%, #000 25%, transparent 80%);
  pointer-events: none;
}
/* Energie-Linie an der Unterkante */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-2) 30%, var(--cyan) 50%, var(--accent-2) 70%, transparent);
  opacity: 0.75;
}
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-bottom: 14px; color: var(--text-inv); }
.page-hero .lead { max-width: 70ch; color: var(--text-inv-dim); }
.page-hero .kicker { color: var(--cyan); }
.page-hero .kicker::before { background: linear-gradient(90deg, var(--cyan), transparent); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .page-hero .accent {
    background: var(--grad-text-dark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inv-faint);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--text-inv-faint); }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb .sep { color: var(--sky); }

/* ---------- Legal pages ---------- */

.prose { max-width: 820px; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; color: var(--accent-2); }
.prose p, .prose li { color: var(--text-dim); }
.prose strong { color: var(--text); }
.prose ul { padding-left: 22px; }

/* ---------- Reveal animations ---------- */

.reveal { transition: opacity 0.7s ease, transform 0.7s ease; }
/* Inhalt nur verstecken, wenn JS aktiv ist und die Reveals auch auslösen kann */
html.js-reveal .reveal { opacity: 0; transform: translateY(26px); }
html.js-reveal .reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* Bildrahmen zusätzlich sanft einzoomen */
html.js-reveal .img-frame.reveal { transform: translateY(26px) scale(0.972); }
html.js-reveal .img-frame.reveal.visible { transform: none; }
/* Kicker-Energielinie zeichnet sich beim Reveal ein */
html.js-reveal .reveal .kicker::before { transform: scaleX(0); transform-origin: left; transition: transform 0.6s 0.15s ease; }
html.js-reveal .reveal.visible .kicker::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  html.js-reveal .reveal .kicker::before { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Hero-Intro (Startseite, einmalig beim Seitenaufbau) ----------
   Die Klasse .js-intro setzt ein Inline-Script im <head>, damit der
   Ausgangszustand schon vor dem ersten Paint steht (kein Aufblitzen).
   main.js nimmt die Klasse nach dem Intro wieder weg, damit weder
   Filter noch Animationen dauerhaft auf den Elementen liegen bleiben. */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(-18px); filter: blur(10px); }
  to   { opacity: 1; transform: none;              filter: blur(0); }
}
/* Ohne Blur — für den fixierten Header, dessen backdrop-filter sonst kippt */
@keyframes hero-rise-plain {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-bg-in {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html.js-intro .hero-bg img {
  animation: hero-bg-in 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Blueprint-Raster legt sich danach über das Bild */
html.js-intro .hero::after {
  animation: hero-fade-in 1.4s ease 0.3s both;
}
html.js-intro .site-header {
  animation: hero-rise-plain 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}
html.js-intro .hero h1 {
  animation: hero-rise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}
html.js-intro .hero .lead {
  animation: hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.34s both;
}
/* Badges und Buttons kommen einzeln nach — der „Karten nacheinander"-Takt */
html.js-intro .hero .hero-badges .badge {
  animation: hero-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html.js-intro .hero .hero-badges .badge:nth-child(1) { animation-delay: 0.46s; }
html.js-intro .hero .hero-badges .badge:nth-child(2) { animation-delay: 0.54s; }
html.js-intro .hero .hero-badges .badge:nth-child(3) { animation-delay: 0.62s; }
html.js-intro .hero .btn-row .btn {
  animation: hero-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html.js-intro .hero .btn-row .btn:nth-child(1) { animation-delay: 0.74s; }
html.js-intro .hero .btn-row .btn:nth-child(2) { animation-delay: 0.82s; }

@media (prefers-reduced-motion: reduce) {
  html.js-intro .hero-bg img,
  html.js-intro .hero::after,
  html.js-intro .site-header,
  html.js-intro .hero h1,
  html.js-intro .hero .lead,
  html.js-intro .hero .hero-badges .badge,
  html.js-intro .hero .btn-row .btn { animation: none; }
}

/* ---------- Utilities ---------- */

.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-24 { margin-bottom: 24px; }
.text-dim { color: var(--text-dim); }
.text-center { text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent-2);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Standort-Karte (Kontakt) ---------- */

.map-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  aspect-ratio: 21 / 8;
  background: var(--navy-2);
  box-shadow: 0 18px 40px rgba(10, 30, 68, 0.14);
}
@media (max-width: 720px) { .map-card { aspect-ratio: 3 / 4; } }
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; }

.map-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}
.map-card-address {
  color: #ffffff;
  line-height: 1.5;
}
.map-card-note {
  max-width: 46ch;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.map-card-note a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; }