/* =========================================================
   Thias Elektronik – Stylesheet
   Corporate Design (aus dem Logo übernommen):
     Blau   #0233CD  – Primärfarbe, Schrift „Thias Elektronik“
     Orange #FF6634  – Akzent, Spannungslinie & „Meisterbetrieb“
     Navy   #0A1A4F  – Tiefe Flächen (Hero, Footer, Leistungskarte)
   Gestaltungsidee: technischer Schaltplan / Blaupause.
   Schrift: Archivo (variabel, inkl. Breitenachse), selbst gehostet unter assets/fonts
   → kein externer Abruf, DSGVO-freundlich.

   Radius-System: Panels 20px · Karten 14px · Eingabefelder 10px · Buttons/Tags rund
   Tiefe: Karten mit 1px-Kante ODER Schatten, nie beides
   Bewegung: kurze Ease-out-Kurven für Bedienung, längere nur für den Stromkreis im Hero
   Ebenen (z-index): Inhalt 1 · Header-Overlay 90 · Header 100
   ========================================================= */

/* ---------- Schriften ---------- */
/* Auf die genutzten Bereiche reduziert (Gewicht 400-800, Breite 100-112 %, Latin inkl. Umlaute).
   Kursiv gibt es nur für das hervorgehobene Wort im Hero: 800 / 104 %. */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-text.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 112%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-italic-800.woff2") format("woff2");
  font-weight: 800;
  font-stretch: 104%;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Marke (unverändert) */
  --blue: #0233CD;
  --blue-bright: #1544E0;
  --navy: #0A1A4F;
  --night: #060D2E;
  --orange: #FF6634;
  --orange-bright: #FF7B50;

  /* Flächen & Text – hell */
  --bg: #F4F6FB;
  --bg-alt: #ECF0F8;
  --surface: #FDFDFF;
  --ink: #111733;
  --ink-soft: #2C3556;
  --heading: #0A1A4F;
  --muted: #535C79;
  --line: rgba(10, 26, 79, .10);
  --line-strong: rgba(10, 26, 79, .20);
  --accent-text: #0233CD;      /* Blau als Text */
  --orange-text: #C4410F;      /* Orange für Text auf Hell (Kontrast ≥ 4.5:1) */
  --input-bg: #FFFFFF;
  --input-border: #8A93AE;
  --grid-line: rgba(10, 26, 79, .055);
  --overlay-bg: rgba(244, 246, 251, .96);
  --scroll-thumb: #A9B1C8;
  --selection: rgba(255, 102, 52, .28);

  --shadow-sm: 0 1px 2px rgba(10, 26, 79, .06), 0 4px 12px -6px rgba(10, 26, 79, .12);
  --shadow-lg: 0 40px 80px -40px rgba(6, 13, 46, .5);

  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-xl: 20px;
  --r-lg: 14px;
  --r-md: 10px;

  --container: 1200px;
  --gutter: max(1.25rem, (100vw - var(--container)) / 2);
  --nav-top: 14px;
  --nav-h: 64px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);       /* Bedienung: startet sofort */
  --ease-spring: cubic-bezier(.32, .72, 0, 1);    /* Menüs, Morphs */
  --ease-snap: cubic-bezier(.34, 1.5, .64, 1);    /* nur für den Kippschalter: rastet hörbar-fühlbar ein (bewusste Ausnahme) */

  --z-overlay: 90;
  --z-header: 100;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070C22;
    --bg-alt: #0A1130;
    --surface: #0E1736;
    --ink: #E6EAF6;
    --ink-soft: #C6CEE6;
    --heading: #F2F5FF;
    --muted: #9AA4C3;
    --line: rgba(190, 205, 255, .12);
    --line-strong: rgba(190, 205, 255, .22);
    --accent-text: #8FA8FF;
    --orange-text: #FF8A5E;
    --input-bg: #0A1230;
    --input-border: #5D6890;
    --grid-line: rgba(190, 205, 255, .05);
    --overlay-bg: rgba(7, 12, 34, .96);
    --scroll-thumb: #2E3A66;
    --selection: rgba(255, 122, 80, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -6px rgba(0, 0, 0, .4);
    --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, .8);
  }
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--scroll-thumb) var(--bg);
  accent-color: var(--blue);
  scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}
html.nav-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--selection); color: inherit; }
input, textarea { caret-color: var(--orange); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .5em; color: var(--heading); letter-spacing: -.02em; font-weight: 700; }
h2, h3, h4 { text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
strong { font-weight: 650; }

/* Fokusring folgt der Form des Elements (Pillen bleiben Pillen) */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
a:not([class]):focus-visible { border-radius: 3px; }

.sprite { display: none; }
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: currentColor; }

.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: .75rem 1rem; border-radius: 10px;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Blaupausen-Raster: nur auf Flächen, die eine Zeichnung tragen */
.hero::before,
.svc-feature::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;
  padding: .8rem 1.5rem;
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2; white-space: nowrap;
  border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .2s ease,
              color .2s ease, box-shadow .25s ease;
}
.btn:has(.btn-icon) { padding-right: .45rem; padding-left: 1.5rem; }
.btn:active { transform: scale(.97); }
.btn > .icon { width: 1.15em; height: 1.15em; }
.btn-icon {
  display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: transform .25s var(--ease-out), background-color .2s ease;
}
.btn-icon .icon { width: 1.05rem; height: 1.05rem; }

.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 18px -10px rgba(6, 13, 46, .45); }
.btn-primary:hover { background: var(--blue-bright); color: #fff; box-shadow: 0 12px 24px -12px rgba(6, 13, 46, .5); }

/* Orange mit dunkler Schrift → WCAG-Kontrast 5.7:1 */
.btn-accent { background: var(--orange); color: var(--navy); }
.btn-accent .btn-icon { background: rgba(10, 26, 79, .12); }
.btn-accent:hover { background: var(--orange-bright); color: var(--navy); }

.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }

.btn-sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .9375rem; }
.btn-block { width: 100%; justify-content: space-between; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; text-decoration: none;
}
.link-arrow .icon { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease-out); }
.link-arrow:hover { text-decoration: underline; }

/* Bewegung beim Überfahren nur bei echter Maus, nicht beim Antippen */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-icon { transform: translateX(3px); }
  .link-arrow:hover .icon { transform: translate(2px, -1px); }
}

/* ---------- Header: schwebende Insel ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  padding-top: var(--nav-top);
  pointer-events: none;
  transition: transform .3s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-130%); }

.nav-shell {
  position: relative;
  pointer-events: auto;
  width: min(1240px, 100% - 1.5rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  height: var(--nav-h);
  padding: 0 .5rem 0 1.4rem;
  border-radius: 999px;
}
/* Glas auf einem Pseudo-Element: backdrop-filter am Container würde das mobile Vollbild-Menü einsperren */
.nav-shell::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: rgba(252, 253, 255, .84);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 0 0 1px rgba(10, 26, 79, .08), inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px -18px rgba(6, 13, 46, .45);
}
.brand { position: relative; z-index: 2; display: block; flex-shrink: 0; }
.brand img { width: 168px; }

.main-nav { position: relative; z-index: 1; margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.main-nav ul { display: flex; gap: .125rem; }
.main-nav ul a {
  display: block;
  padding: .55rem .8rem;
  font-weight: 560; font-size: .9375rem; line-height: 1.2;
  color: #1A2448; text-decoration: none;
  border-radius: 999px;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.main-nav ul a:hover { background: rgba(2, 51, 205, .07); color: var(--blue); }
.main-nav ul a[aria-current="true"] { background: rgba(2, 51, 205, .09); color: var(--blue); }

.nav-toggle {
  position: relative; z-index: 2;
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  background: var(--navy); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; margin-inline: auto;
  background: currentColor; border-radius: 2px;
  transition: transform .45s var(--ease-spring), background-color .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle { transition: transform .16s var(--ease-out); }
.nav-toggle:active { transform: scale(.94); }

/* Dunkelmodus: dunkles Glas, Logo auf heller Plakette (wie im Footer) */
@media (prefers-color-scheme: dark) {
  .nav-shell { padding-left: .5rem; }
  .nav-shell::before {
    background: rgba(10, 17, 48, .8);
    box-shadow: 0 0 0 1px rgba(190, 205, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -18px rgba(0, 0, 0, .7);
  }
  .brand { padding: .5rem .95rem; border-radius: 999px; background: #FDFDFF; }
  .main-nav ul a { color: #D2D9F0; }
  .main-nav ul a:hover, .main-nav ul a[aria-current="true"] { background: rgba(143, 168, 255, .14); color: #fff; }
}

/* ---------- Typo-Bausteine ---------- */
.section-title {
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.25rem);
  font-weight: 760; font-stretch: 106%;
  letter-spacing: -.03em; line-height: 1.04;
  text-wrap: balance;
}
.section-intro { color: var(--muted); font-size: 1.125rem; max-width: 56ch; text-wrap: pretty; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head .section-intro { margin-bottom: 0; }

.section {
  position: relative;
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem) clamp(5.5rem, 4rem + 6.5vw, 10rem);
}

.checklist li { position: relative; padding-left: 1.85rem; margin-bottom: .6rem; }
.checklist li:last-child { margin-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%230A1A4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 72%;
}

/* Erhöhte Karte (Ablauf, Formular): Schatten im Hellen, Kante im Dunkeln */
.bezel-core {
  padding: clamp(1.5rem, 1rem + 1.75vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
@media (prefers-color-scheme: dark) {
  .bezel-core { box-shadow: 0 0 0 1px var(--line-strong); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(100svh, 980px);
  padding: calc(var(--nav-top) + var(--nav-h) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem)) 0 clamp(6.5rem, 5rem + 4vw, 9rem);
  color: #fff;
  --grid-line: rgba(160, 185, 255, .06);
  background: linear-gradient(180deg, #081236 0%, var(--night) 100%);
}
.hero::before {
  z-index: 0;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 85%);
}
.hero-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s var(--ease-out);
}
.hero-canvas.is-ready { opacity: 1; }
/* Lesbarkeit: Text-Seite abdunkeln, unten in die Seite überblenden */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 13, 46, .88) 0%, rgba(6, 13, 46, .6) 38%, rgba(6, 13, 46, 0) 68%),
    linear-gradient(0deg, rgba(6, 13, 46, .9) 0%, rgba(6, 13, 46, 0) 30%);
}
.hero-glow {
  position: absolute; z-index: 2; pointer-events: none;
  right: -10%; top: 0; width: 75%; height: 100%;
  background: radial-gradient(closest-side, rgba(255, 102, 52, .26), rgba(255, 102, 52, .08) 55%, transparent);
  opacity: 0;
  transition: opacity .3s ease-out;
}
/* Licht an: langsam aufglühen. Licht aus: schnell weg. */
.hero[data-power="on"] .hero-glow { opacity: 1; transition: opacity 1.2s var(--ease-out) .25s; }

.hero-grid {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.hero h1 {
  font-size: clamp(2.3rem, 1.2rem + 2.6vw, 3.5rem);
  font-weight: 800; font-stretch: 104%;
  letter-spacing: -.035em; line-height: 1.04;
  color: #fff;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic; font-weight: 800;
  color: #C7D3FF;
  padding-right: .06em;
  transition: color .25s ease-out;
}
.hero[data-power="on"] h1 em { color: var(--orange); transition: color .9s var(--ease-out) .3s; }
.hero-lead {
  max-width: 34rem;
  font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem);
  color: #BAC5E8;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

/* Stromkreis-Schalter (Batterie, Schalter, Lampe) */
.hero-visual { border-radius: var(--r-xl); }
.circuit {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; width: 100%;
  padding: clamp(1.25rem, .75rem + 2vw, 2.25rem) clamp(1rem, .5rem + 2vw, 2rem) 1.1rem;
  font: inherit; color: #DCE4FF; text-align: left;
  border: 0; border-radius: var(--r-xl);
  background:
    linear-gradient(rgba(160, 185, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(160, 185, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(160deg, rgba(20, 44, 130, .75), rgba(8, 18, 60, .85));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease-out);
}
.circuit:active { transform: scale(.99); }
.circuit:focus-visible { outline-offset: 4px; }
.circuit-svg { display: block; width: 100%; height: auto; overflow: visible; }
.circuit-svg-compact { display: none; }

.circuit-svg .wires path,
.circuit-svg .battery path,
.circuit-svg .lever,
.circuit-svg .lamp-ring,
.circuit-svg .lamp-x {
  fill: none; stroke: #DCE4FF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.circuit-svg .plate-short { stroke-width: 9; stroke-linecap: butt; }
.circuit-svg .battery text { fill: #A8B8EC; font-size: 24px; font-weight: 600; }
.circuit-svg .switch circle { fill: #0D1E5E; stroke: #DCE4FF; stroke-width: 3; }
.circuit-svg .lever {
  transform-box: view-box; transform-origin: 186px 60px;
  transform: rotate(-28deg);
  transition: transform .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .circuit:not([aria-pressed="true"]):hover .lever { transform: rotate(-22deg); }
}
.circuit-svg .flow {
  fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 10 16;
  opacity: 0; transition: opacity .15s ease-out;
}
.circuit-svg .lamp-core { fill: url(#lamp-core); opacity: 0; }
.circuit-svg .lamp-halo { opacity: 0; transition: opacity .2s ease-out; }
.circuit-svg .lamp-x, .circuit-svg .lamp-ring { transition: stroke .15s ease-out; }

/* Einschalten: Hebel rastet ein, Strom fließt, Lampe flackert an. Ausschalten ist sofort. */
.circuit[aria-pressed="true"] .lever { transform: rotate(0deg); transition: transform .28s var(--ease-snap); }
.circuit[aria-pressed="true"] .flow { opacity: 1; transition: opacity .3s ease-out .12s; animation: flow 1.1s linear infinite; }
.circuit[aria-pressed="true"] .lamp-core { animation: ignite .55s .2s steps(1, end) both; }
.circuit[aria-pressed="true"] .lamp-halo { opacity: 1; transition: opacity .8s var(--ease-out) .35s; }
.circuit[aria-pressed="true"] .lamp-x { stroke: #B2380C; transition: stroke .3s ease-out .3s; }
.circuit[aria-pressed="true"] .lamp-ring { stroke: #FFD9C9; transition: stroke .3s ease-out .3s; }
@keyframes flow { to { stroke-dashoffset: -26; } }
/* Kurzes Flackern wie beim Einschalten einer Lampe */
@keyframes ignite {
  0% { opacity: .6; } 20% { opacity: .15; } 40% { opacity: .85; } 55% { opacity: .35; } 70%, 100% { opacity: 1; }
}

.circuit-hint {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .85rem; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .875rem; font-weight: 550; color: #A8B8EC;
}
/* Mini-Kippschalter als Bedienhinweis */
.circuit-hint::before {
  content: ""; width: 30px; height: 18px; flex-shrink: 0; border-radius: 999px;
  background:
    radial-gradient(circle at 9px 50%, #DCE4FF 5px, transparent 5.5px),
    rgba(255, 255, 255, .12);
  transition: background .2s ease-out;
}
.circuit[aria-pressed="true"] .circuit-hint::before {
  background:
    radial-gradient(circle at 21px 50%, #fff 5px, transparent 5.5px),
    var(--orange);
}
/* Auftritt des Hero, reines CSS: startet mit dem ersten Bild und wartet auf kein Skript.
   Die Überschrift ist sofort sichtbar und gleitet nur leicht nach oben (zählt so ohne Verzögerung
   als größter Inhalt). Einleitung, Buttons und Stromkreis folgen gestaffelt, dann zeichnen sich
   die Leitungen. Danach schaltet script.js das Licht ein. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: hero-rise .9s var(--ease-out) both; }
  .hero-visual { animation: hero-in 1s var(--ease-out) .12s both; }
  .hero-lead { animation: hero-in .8s var(--ease-out) .14s both; }
  .hero-actions { animation: hero-in .8s var(--ease-out) .22s both; }
  .circuit-svg [pathLength] { stroke-dasharray: 1; animation: wire-draw 1s cubic-bezier(.65, 0, .35, 1) both; }
  .circuit-svg .wires path:nth-child(1) { animation-delay: .3s; }
  .circuit-svg .battery path { animation-delay: .4s; }
  .circuit-svg .wires path:nth-child(2) { animation-delay: .45s; }
  .circuit-svg .wires path:nth-child(3) { animation-delay: .6s; }
  .circuit-svg .lamp-ring { animation-delay: .75s; }
  .circuit-svg .lamp-x { animation-delay: .9s; }
}
@keyframes hero-rise { from { transform: translateY(12px); } }
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes wire-draw { from { stroke-dashoffset: 1; } }

.circuit .hint-on { display: none; color: #FFC2AD; }
.circuit[aria-pressed="true"] .hint-off { display: none; }
.circuit[aria-pressed="true"] .hint-on { display: inline; }

/* ---------- Auf einen Blick: Typenschild ---------- */
/* Wie das Typenschild an einem Verteiler: gravierter Innenrahmen, Feldbezeichnung über dem Wert */
.plate-section { position: relative; z-index: 5; margin-top: calc(-1 * clamp(3.25rem, 2.5rem + 2vw, 4.5rem)); }
.plate {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.plate::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--r-lg) - 7px);
}
.plate > div { padding: clamp(1.3rem, 1rem + 1vw, 1.8rem) clamp(1.3rem, .8rem + 1.5vw, 2.25rem); }
.plate > div + div { background: linear-gradient(var(--line-strong), var(--line-strong)) left center / 1px calc(100% - 2.75rem) no-repeat; }
.plate dt {
  font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.plate dd {
  margin: .35rem 0 0;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 720; font-stretch: 106%; letter-spacing: -.025em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}
@media (prefers-color-scheme: dark) {
  .plate { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
}

/* ---------- Über uns ---------- */
.about-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, .5rem + 1.5vw, 2rem); row-gap: 3rem;
  align-items: start;
}
.about-copy { grid-column: 1 / span 6; }
.process-card { grid-column: 8 / span 5; position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 2rem); }
.about-lead { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); color: var(--ink-soft); max-width: 36rem; }
.about-lead strong { color: var(--heading); }

.values { margin-top: 2.5rem; }
.values li { padding: 1.3rem 0; border-top: 1px solid var(--line); }
.values h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.values p { margin: 0; color: var(--muted); font-size: .96875rem; max-width: 52ch; }

.process-title { font-size: 1.25rem; margin-bottom: 1.75rem; }
.process-wrap { position: relative; }
.process-wire {
  position: absolute; left: 13px; top: 14px; bottom: 44px; width: 2px;
  background: var(--line-strong); border-radius: 2px; overflow: hidden;
}
.process-current {
  position: absolute; inset: 0;
  background: linear-gradient(var(--orange), #FF8A5E);
  transform-origin: top;
}
.motion .process-current { transform: scaleY(0); }

.step {
  position: relative;
  display: grid; grid-template-columns: 28px 1fr; gap: 1.1rem;
  padding-bottom: 1.6rem;
}
.step:last-child { padding-bottom: 0; }
.step h4 { margin: .15rem 0 .25rem; font-size: 1.0625rem; }
.step p { margin: 0; color: var(--muted); font-size: .96875rem; line-height: 1.55; }
.node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--orange);
  transition: box-shadow .4s var(--ease-out);
}
.node::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange);
  transition: background-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.motion .step:not(.is-on) .node { box-shadow: inset 0 0 0 2px var(--line-strong); }
.motion .step:not(.is-on) .node::after { background: var(--line-strong); transform: scale(.7); }
.node-lamp::after { display: none; }
.node-lamp svg { width: 24px; height: 24px; overflow: visible; }
.node-lamp circle { fill: #FFE3D6; stroke: var(--orange); stroke-width: 2; transition: fill .5s, stroke .5s; }
.node-lamp path { fill: none; stroke: #B2380C; stroke-width: 2; stroke-linecap: round; transition: stroke .5s; }
/* Die Lampe am Ende leuchtet wirklich: ihr Lichtschein ist Teil des Motivs */
.step-lamp.is-on .node-lamp, .node-lamp { box-shadow: 0 0 22px 2px rgba(255, 102, 52, .4); }
.motion .step-lamp:not(.is-on) .node-lamp { box-shadow: none; }
.motion .step-lamp:not(.is-on) .node-lamp circle { fill: var(--surface); stroke: var(--line-strong); }
.motion .step-lamp:not(.is-on) .node-lamp path { stroke: var(--line-strong); }

/* ---------- Leistungen (Bento) ---------- */
.services-section { background: var(--bg-alt); overflow: hidden; }

.services {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.85rem, .5rem + 1vw, 1.25rem);
}
.services > :nth-child(1) { grid-column: span 7; }
.services > :nth-child(2) { grid-column: span 5; }
.services > :nth-child(3) { grid-column: span 5; }
.services > :nth-child(4) { grid-column: span 7; }
.services > :nth-child(5) { grid-column: span 7; }
.services > :nth-child(6) { grid-column: span 5; }

.service-card {
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

.svc-sym {
  display: block; width: 108px; height: 72px; margin-bottom: 1.5rem;
  color: var(--accent-text); overflow: visible;
  transition: color .25s ease;
}
.svc-sym * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svc-sym .dot { fill: currentColor; stroke: none; }
.svc-sym .dash { stroke-dasharray: 4 5; }
/* Beim Überfahren steht das Schaltzeichen „unter Strom“ */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .svc-sym { color: var(--orange); }
}

.service-card h3 { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.45rem); letter-spacing: -.025em; margin-bottom: 1.1rem; }
.service-card .checklist { color: var(--muted); font-size: .96875rem; line-height: 1.5; }

/* Hauptleistung: dunkle Blaupause, Symbol groß rechts */
.svc-feature {
  --grid-line: rgba(160, 185, 255, .08);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem;
  align-content: end;
  min-height: 330px;
  color: #C3CDEC;
  background: var(--navy);
  box-shadow: none;
}
.svc-feature::before { z-index: -1; }
.svc-feature .svc-sym { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 210px; height: 140px; margin: 0; color: #8FA8FF; }
.svc-feature h3 { grid-column: 1; color: #fff; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); }
.svc-feature .checklist { grid-column: 1; color: #C3CDEC; }

/* Steuerungsbau: Markenblau */
.svc-blue { background: var(--blue); color: #DCE4FF; box-shadow: none; }
.svc-blue h3 { color: #fff; }
.svc-blue .svc-sym { color: #fff; }
.svc-blue .checklist { color: #DCE4FF; }

/* ---------- Projekte (horizontale Galerie) ---------- */
.projects { --g-h: clamp(260px, 50svh, 540px); overflow: hidden; }
.gallery-viewport { position: relative; }
.gallery {
  display: flex; gap: clamp(1rem, .5rem + 1.5vw, 2rem);
  padding: .5rem var(--gutter) 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery-item { flex: none; margin: 0; scroll-snap-align: start; }
.gallery-open {
  position: relative; display: block; padding: 0; border: 0; background: var(--bg-alt);
  border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in;
  box-shadow: var(--shadow-sm);
}
.gallery-open picture { display: contents; }
.gallery-open img {
  height: var(--g-h); width: auto; max-width: min(88vw, 1100px);
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.is-wide img { aspect-ratio: 2 / 1; }
.is-landscape img { aspect-ratio: 1170 / 881; }
.is-square img { aspect-ratio: 1 / 1; }
.is-tall img { aspect-ratio: 1057 / 2048; object-position: center 5%; }
@media (hover: hover) and (pointer: fine) {
  .gallery-open:hover img { transform: scale(1.03); }
}
.gallery figcaption { display: flex; flex-direction: column; padding: .95rem .25rem 0; line-height: 1.35; }
.gallery figcaption strong { color: var(--heading); }
.gallery figcaption span { color: var(--muted); font-size: .875rem; margin-top: .15rem; }

.gallery-progress { display: none; position: relative; height: 2px; margin-top: 2rem; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.gallery-progress span { position: absolute; inset: 0; background: var(--orange); transform-origin: left; transform: scaleX(0); }

/* Desktop mit Animation: Abschnitt wird fixiert und die Reihe wandert beim Scrollen seitlich */
.projects.is-pinned { padding-block: 0; --g-h: clamp(220px, calc(100svh - 470px), 540px); }
.projects.is-pinned .projects-pin {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--nav-top) + var(--nav-h) + 1.5rem) 2.5rem;
}
.projects.is-pinned .section-head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.projects.is-pinned .gallery { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
.projects.is-pinned .gallery-progress { display: block; }
.projects.is-pinned + .carousel-dots,
.projects.is-pinned .carousel-dots { display: none !important; }

/* Punkte-Navigation der Karussells (mobil) */
.carousel:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }
.carousel-dots { display: none; justify-content: center; gap: 0; margin-top: .25rem; }
.carousel-dots button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.carousel-dots button::before {
  content: ""; width: 22px; height: 8px; background: var(--line-strong);
  clip-path: inset(0 7px round 4px);
  transition: clip-path .25s var(--ease-out), background-color .2s ease;
}
.carousel-dots button[aria-current="true"]::before { clip-path: inset(0 0 round 4px); background: var(--orange); }

.lightbox {
  width: min(1100px, 94vw); max-height: 92vh; padding: 0;
  border: 0; border-radius: var(--r-lg); background: #04081C; color: #fff;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(4, 8, 28, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in .24s var(--ease-out); }
.lightbox[open]::backdrop { animation: fade-in .2s ease-out; }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
.lightbox picture { display: contents; }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox-caption { margin: 0; padding: 1rem 1.4rem; font-size: .9375rem; background: var(--navy); }
.lightbox-close {
  position: absolute; top: .85rem; right: .85rem;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--navy); cursor: pointer;
  transition: background-color .15s ease, transform .16s var(--ease-out);
}
.lightbox-close:hover { background: #fff; }
.lightbox-close:active { transform: scale(.94); }

/* ---------- Bewertungen ---------- */
.reviews-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, .5rem + 1.5vw, 2rem); row-gap: 2.5rem;
  align-items: start;
}
.reviews-aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 2rem); }
.reviews { grid-column: 6 / span 7; columns: 2; column-gap: 1rem; }
.reviews-grid > .carousel-dots { grid-column: 1 / -1; margin-top: -1.5rem; }

.rating-summary { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rating-source { display: flex; align-items: center; gap: .55rem; font-size: .875rem; font-weight: 600; color: var(--muted); }
.rating-score { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin: .5rem 0 .1rem; }
.rating-score strong { font-size: 3.25rem; line-height: 1; font-weight: 780; font-stretch: 110%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--heading); }
.rating-count { margin: 0 0 1rem; font-size: .875rem; color: var(--muted); }
.rating-summary .link-arrow { font-size: .9375rem; }

.g-logo { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.g-logo-sm { width: 1.05rem; height: 1.05rem; }

.stars { display: inline-flex; gap: 2px; }
.star { width: 1.05rem; height: 1.05rem; fill: #F5B400; }
.star.is-empty { fill: var(--line-strong); }
.rating-score .star { width: 1.3rem; height: 1.3rem; }

.mock-note {
  display: inline-block; margin: 1.75rem 0 0; padding: .55rem .85rem;
  font-size: .8125rem; line-height: 1.45; color: #7A2A0C;
  background: #FFF3EE; border: 1px dashed #FFB497; border-radius: 10px;
}

.review-card {
  break-inside: avoid;
  display: flex; flex-direction: column; gap: 1.1rem;
  margin: 0 0 1rem;
  padding: 1.6rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.review-card:nth-child(3n+2) { background: var(--bg-alt); box-shadow: 0 0 0 1px var(--line); }
.review-text { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.review-head { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.review-avatar {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700;
}
.review-card:nth-child(3n+2) .review-avatar { background: var(--navy); }
.review-card:nth-child(3n) .review-avatar { background: var(--orange); color: var(--navy); }
.review-who { flex: 1; min-width: 0; }
.review-author { margin: 0; font-size: .96875rem; line-height: 1.3; }
.review-date { margin: 0; font-size: .8125rem; color: var(--muted); }

/* ---------- Partner ---------- */
.partners {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.partners li + li { box-shadow: inset 1px 0 0 var(--line); }
.partner-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem;
  height: 100%; min-height: 180px;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  transition: background-color .2s ease;
}
.partner-card strong {
  font-size: clamp(1.35rem, 1.05rem + .9vw, 1.85rem);
  font-weight: 740; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.1;
  color: var(--heading);
  transition: color .2s ease;
}
.partner-card span { font-size: .875rem; color: var(--muted); line-height: 1.4; }
.partner-card .icon {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 1.25rem; height: 1.25rem; color: var(--muted);
  transition: transform .2s var(--ease-out), color .2s ease;
}
a.partner-card:hover { background: var(--surface); }
a.partner-card:hover strong { color: var(--accent-text); }
a.partner-card:hover .icon { color: var(--orange); }
@media (hover: hover) and (pointer: fine) {
  a.partner-card:hover .icon { transform: translate(2px, -2px); }
}

/* ---------- Karriere ---------- */
.career-section { padding-top: 0; }
.career-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-radius: var(--r-xl);
  color: #D6DEFF;
  background: var(--blue);
  box-shadow: var(--shadow-lg);
}
/* Leiterbahnen als dezentes Muster */
.career-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M0 48h72v72h168M144 0v40h48v200M0 192h56l24-24h40M200 120v40'/%3E%3Crect x='96' y='108' width='28' height='24' rx='2'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='72' cy='120' r='3.5'/%3E%3Ccircle cx='192' cy='120' r='3.5'/%3E%3Ccircle cx='144' cy='40' r='3.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px;
  -webkit-mask-image: linear-gradient(115deg, transparent 20%, #000 75%);
  mask-image: linear-gradient(115deg, transparent 20%, #000 75%);
}
.career-panel h2 { color: #fff; }
.career-copy > p { font-size: 1.125rem; color: #D6DEFF; max-width: 34rem; }
.checklist-light { margin-top: 2rem; color: #fff; }

.jobs { padding-top: .25rem; }
.jobs-title { font-size: 1.25rem; color: #fff; margin-bottom: .5rem; }
.job {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.job > div { min-width: 0; max-width: 100%; }
.job h4 { overflow-wrap: anywhere; } /* lange Berufsbezeichnungen bei großer Schrift */
.job h4 { margin: .4rem 0 0; font-size: 1.0625rem; line-height: 1.35; color: #fff; }
.job-tag {
  display: inline-block; padding: .2rem .55rem;
  font-size: .75rem; font-weight: 650; letter-spacing: .02em;
  color: #fff; background: rgba(255, 255, 255, .14); border-radius: 6px;
}
.initiative { padding-top: 1.5rem; }
.initiative h4 { font-size: 1.0625rem; margin-bottom: .3rem; color: #fff; }
.initiative p { margin-bottom: .85rem; }
.career-panel .link-arrow { color: #FFC2AD; }
.career-panel .link-arrow:hover { color: #FFD9CC; }

/* ---------- Kontakt ---------- */
.contact-section { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.contact-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, .5rem + 1.5vw, 2rem); row-gap: 3rem;
  align-items: start;
}
.contact-info { grid-column: 1 / span 5; }
.form-bezel { grid-column: 7 / span 6; }

.contact-phone {
  display: inline-flex; flex-direction: column; gap: .2rem;
  margin: 1.5rem 0 1.75rem;
  text-decoration: none;
}
.contact-phone span { font-size: .875rem; font-weight: 600; color: var(--muted); }
.contact-phone strong {
  position: relative;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  font-weight: 780; font-stretch: 108%; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.contact-phone strong::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.contact-phone:hover strong::after { transform: scaleX(1); }

.contact-list { margin-bottom: 1.5rem; }
.contact-list li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .9rem; align-items: start;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.contact-list .icon { width: 1.4rem; height: 1.4rem; margin-top: .15rem; color: var(--accent-text); }
.contact-list span { display: flex; flex-direction: column; line-height: 1.45; }
.contact-list strong { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: .05rem; }
.contact-list a { font-weight: 600; text-decoration: none; word-break: break-word; }
.contact-list a:hover { text-decoration: underline; }


/* ---------- Formulare ---------- */
.form h3 { font-size: 1.375rem; margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9375rem; color: var(--heading); }
.req { color: var(--orange-text); }
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%238A93AE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .9rem center / 1.1rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(2, 51, 205, .18);
}
.field [aria-invalid="true"] { border-color: #C62828 !important; }
.field-error { margin: .35rem 0 0; font-size: .875rem; color: #B3261E; font-weight: 600; }
.field-error:empty { display: none; }
@media (prefers-color-scheme: dark) {
  .field-error { color: #FF8A80; }
  .field [aria-invalid="true"] { border-color: #FF8A80 !important; }
}

.field-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .75rem; align-items: start; }
.field-check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--blue); }
.field-check label { font-weight: 400; font-size: .9rem; color: var(--muted); margin: 0; }
.field-check .field-error { grid-column: 2; }
.form-note { font-size: .8125rem; color: var(--muted); }

.form-status { margin: 1rem 0 0; font-weight: 600; }
.form-status:empty { display: none; }
.form-status a { color: inherit; text-decoration: underline; }
.form-status.is-error {
  padding: .95rem 1.1rem; border-radius: var(--r-md);
  background: #FDECEA; color: #8C1D18; font-weight: 550; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .form-status.is-error { background: rgba(255, 138, 128, .12); color: #FFB4AB; }
}

/* Absenden läuft: Button bleibt sichtbar, ist aber gesperrt */
.btn[aria-busy="true"] { cursor: progress; opacity: .78; }
.btn:disabled { cursor: not-allowed; }
.btn:disabled:active { transform: none; }

/* Lockfeld gegen Spam: aus dem Bild geschoben, für Screenreader ausgeblendet */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-success {
  display: flex; align-items: center; gap: .75rem;
  padding: .95rem 1.1rem; border-radius: var(--r-md);
  background: #E7F6EC; color: #1B5E20;
}
@media (prefers-color-scheme: dark) {
  .form-status.is-success { background: rgba(76, 175, 80, .14); color: #A5D6A7; }
}

/* ---------- Rückruf ---------- */
.callback-section { padding-top: 0; }
.callback {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.callback-text { max-width: 40rem; margin-bottom: 2rem; }
.callback-text p { color: var(--muted); font-size: 1.125rem; margin: 0; }
.callback-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0 1rem; align-items: start;
}
.callback-submit { margin-top: calc(.9375rem * 1.65 + .4rem); min-height: 52px; }
.callback-form .field-check,
.callback-form .form-status { grid-column: 1 / -1; }
.callback-form .field-check { margin: .25rem 0 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night);
  color: #B6C0E0; font-size: .96875rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #FF9A75; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
  padding-block: clamp(4rem, 3rem + 3vw, 6rem) 3.5rem;
}
.footer-logo {
  display: inline-block; margin-bottom: 1.25rem;
  padding: .85rem 1.1rem; border-radius: 12px; background: #FDFDFF;
}
.footer-logo img { width: 190px; }
.footer-title {
  margin-bottom: 1rem;
  font-size: .8125rem; font-weight: 650; letter-spacing: .02em;
  color: #8E98B8;
}
.footer-list { display: grid; gap: .45rem; margin-top: .9rem; }
.site-footer address { color: #fff; }
.social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.social a:hover { background: var(--orange); box-shadow: none; color: var(--navy); }
.social a:active { transform: scale(.94); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .875rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- Rechtliche Seiten ---------- */
.legal { padding-block: calc(var(--nav-top) + var(--nav-h) + clamp(3rem, 2rem + 3vw, 5rem)) clamp(4rem, 3rem + 4vw, 6rem); }
.legal-inner { max-width: 780px; }
.legal h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); font-weight: 780; font-stretch: 106%; letter-spacing: -.03em; }
.legal h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.legal p, .legal li { color: var(--muted); }
.legal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1em; }
.placeholder-note {
  padding: 1.1rem 1.25rem; margin: 1.5rem 0 2rem;
  background: #FFF3EE; border: 1px solid #FFC9B5;
  border-radius: var(--r-md); color: #7A2A0C;
}
.placeholder-note strong { color: #7A2A0C; }
mark.ph { background: #FFE6DB; color: #7A2A0C; padding: 0 .25em; border-radius: 4px; }


/* ---------- Responsive ---------- */
/* Umbruchpunkte in em (Basis 16 px): wachsen mit, wenn im Browser eine größere Schrift eingestellt ist */
@media (max-width: 73.75em) {
  .main-nav ul a { padding: .55rem .6rem; font-size: .90625rem; }
  .brand img { width: 150px; }
}

@media (max-width: 68.75em) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 0 0 auto; z-index: 1;
    /* dvh: Höhe des tatsächlich sichtbaren Bereichs, sonst verdeckt die Browserleiste unten den Button */
    height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 1.5rem;
    margin: 0;
    padding: calc(var(--nav-top) + var(--nav-h) + 1.25rem) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
    background: var(--overlay-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    overflow-y: auto;
    visibility: hidden; opacity: 0;
    transition: opacity .15s ease-out, visibility .15s;
  }
  /* Sichtbarkeit sofort umschalten, sonst kann der Fokus beim Öffnen nicht ins Menü springen */
  .main-nav.is-open { visibility: visible; opacity: 1; transition: opacity .25s var(--ease-out), visibility 0s; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul li {
    opacity: 0; transform: translateY(12px);
    transition: opacity .12s ease-out, transform .12s ease-out;
  }
  .main-nav.is-open ul li {
    opacity: 1; transform: none;
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
  }
  .main-nav.is-open ul li:nth-child(2) { transition-delay: .03s; }
  .main-nav.is-open ul li:nth-child(3) { transition-delay: .06s; }
  .main-nav.is-open ul li:nth-child(4) { transition-delay: .09s; }
  .main-nav.is-open ul li:nth-child(5) { transition-delay: .12s; }
  .main-nav.is-open ul li:nth-child(6) { transition-delay: .15s; }
  .main-nav.is-open ul li:nth-child(7) { transition-delay: .18s; }
  .main-nav ul a {
    padding: .55rem 0; border-radius: 0;
    /* Auf niedrigen Bildschirmen zusätzlich an der Höhe ausrichten, damit alles ohne Scrollen passt */
    font-size: clamp(1.375rem, min(1.1rem + 2.5vw, 4.4dvh), 2.5rem); font-weight: 720; font-stretch: 108%; letter-spacing: -.03em;
    color: var(--heading);
    border-bottom: 1px solid var(--line);
  }
  .main-nav ul a:hover, .main-nav ul a[aria-current="true"] { background: none; color: var(--accent-text); }
  .nav-cta { align-self: stretch; min-height: 56px; font-size: 1.0625rem; }
}

@media (max-width: 63.9375em) {
  /* Hero einspaltig: Der Stromkreis rückt direkt unter die Überschrift, damit Schalter und
     das orange werdende Wort gleichzeitig im Bild sind. Dafür eine flache Zeichnung. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { display: contents; }
  .hero h1 { margin-bottom: 0; }
  .hero-visual { order: 1; max-width: 560px; width: 100%; margin: 1.5rem 0 1.75rem; }
  .hero-lead { order: 2; }
  .hero-actions { order: 3; margin-top: 1.75rem; }

  .circuit { padding: 1rem 1.1rem .85rem; }
  .circuit-svg:not(.circuit-svg-compact) { display: none; }
  .circuit-svg-compact { display: block; }
  .circuit-svg-compact :is(.wires path, .battery path, .lever, .lamp-ring, .lamp-x, .flow) { stroke-width: 4; }
  .circuit-svg-compact .battery .plate-short { stroke-width: 11; }
  .circuit-svg-compact .switch circle { stroke-width: 4; }
  .circuit-svg-compact .lever { transform-origin: 164px 40px; }
  .circuit-svg-compact .lamp-core { fill: url(#lamp-core-m); }
  .circuit-hint { margin-top: .5rem; padding-top: .75rem; }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(6, 13, 46, .8) 0%, rgba(6, 13, 46, .45) 50%, rgba(6, 13, 46, .85) 100%);
  }
  .plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate > div:nth-child(3) { background: linear-gradient(var(--line-strong), var(--line-strong)) center top / calc(100% - 2.5rem) 1px no-repeat; }
  .plate > div:nth-child(4) {
    background:
      linear-gradient(var(--line-strong), var(--line-strong)) left center / 1px calc(100% - 2.75rem) no-repeat,
      linear-gradient(var(--line-strong), var(--line-strong)) center top / calc(100% - 2.5rem) 1px no-repeat;
  }

  .about-copy, .process-card { grid-column: 1 / -1; }
  .process-card { position: static; max-width: 640px; }

  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services > :nth-child(n) { grid-column: auto; }
  .services > .svc-feature { grid-column: 1 / -1; }

  .reviews-aside { grid-column: 1 / -1; position: static; }
  .reviews { grid-column: 1 / -1; }
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners li:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
  .partners li:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }

  .career-panel { grid-template-columns: minmax(0, 1fr); }
  /* Einspaltig: sonst bleiben 11 Spaltenabstände stehen, die bei großer Schrift breiter als der Bildschirm werden */
  .about-grid, .reviews-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-info, .form-bezel { grid-column: 1 / -1; }
  .form-bezel { max-width: 720px; }
  .callback-form { grid-template-columns: 1fr 1fr; }
  .callback-submit { grid-column: 1 / -1; margin-top: .25rem; order: 5; }
  .callback-form .field-check { order: 4; }
  .callback-form .form-status { order: 6; }

  .carousel-dots { display: flex; }
  .reviews + .carousel-dots, .services + .carousel-dots { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 40em) {
  body { font-size: 1rem; }
  .btn { white-space: normal; text-align: center; padding-inline: 18px; }
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto; hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
  :root { --nav-h: 60px; --nav-top: 10px; }
  .container { width: calc(100% - 2rem); }
  .nav-shell { padding-left: 1.1rem; }
  .brand img { width: 136px; }
  .hero { min-height: 0; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  /* Text mittig, Pfeil bleibt rechts: links ein unsichtbarer Platzhalter in Pfeilbreite */
  .hero-actions .btn:has(.btn-icon) { justify-content: space-between; padding-left: .45rem; }
  .hero-actions .btn:has(.btn-icon)::before { content: ""; width: 2.35rem; flex-shrink: 0; }

  /* Hero auf dem Handy: Buttons direkt unter den Stromkreis, Einleitung danach,
     damit Überschrift, Schalter und Kontakt zusammen im ersten Bildschirm stehen */
  .hero-actions { order: 2; margin-top: 0; }
  .hero-lead { order: 3; margin: 1.75rem 0 0; }
  .hero-visual { margin-bottom: 1.5rem; }

  /* Flachere Karte: der Hinweis sitzt im freien Feld innerhalb des Stromkreises statt darunter */
  .circuit { display: grid; padding-block: .9rem; }
  .circuit > * { grid-area: 1 / 1; }
  .circuit-hint {
    align-self: center; justify-self: center;
    translate: -4px .45rem;
    margin: 0; padding: 0; border: 0;
    gap: .5rem; font-size: .8125rem; white-space: nowrap;
  }
  .circuit-hint::before { width: 26px; height: 16px; }
  .circuit[aria-pressed="true"] .circuit-hint::before {
    background: radial-gradient(circle at 18px 50%, #fff 4.5px, transparent 5px), var(--orange);
  }
  .circuit:not([aria-pressed="true"]) .circuit-hint::before {
    background: radial-gradient(circle at 8px 50%, #DCE4FF 4.5px, transparent 5px), rgba(255, 255, 255, .12);
  }
  /* Typenschild: Zeilen statt 2×2-Raster, Bezeichnung links, Wert rechts. So hat jeder Wert
     fast die volle Breite und nichts läuft ins Nachbarfeld, auch bei großer Systemschrift. */
  .plate { grid-template-columns: 1fr; padding-block: .35rem; }
  .plate > div:nth-child(n) {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .95rem 1.4rem;
    background: none;
  }
  .plate > div + div:nth-child(n) { background: linear-gradient(var(--line-strong), var(--line-strong)) center top / calc(100% - 2.8rem) 1px no-repeat; }
  .plate dd { margin: 0; font-size: 1.25rem; text-align: right; }
  /* Sehr große Systemschrift: Zeile bricht um statt über den Rand zu laufen */
  .plate { grid-template-columns: minmax(0, 1fr); }
  .plate > div:nth-child(n) { flex-wrap: wrap; }
  .plate dd { margin-left: auto; overflow-wrap: anywhere; }
  .hero-actions .btn:has(.btn-icon)::before { flex-shrink: 1; min-width: 0; }

  /* Leistungen, Bewertungen: horizontal wischbares Karussell statt Stapel */
  .carousel {
    position: relative;
    display: flex; gap: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -1rem; padding: .5rem 1rem 1rem; scroll-padding-inline: 1rem;
    scrollbar-width: none;
    columns: auto;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; margin: 0; }
  .services > .svc-feature { display: block; }
  .svc-feature .svc-sym { width: 150px; height: 100px; margin-bottom: 1.5rem; }
  .reviews + .carousel-dots, .services + .carousel-dots { display: flex; }

  .projects { --g-h: 300px; }
  .gallery { margin: 0; padding-inline: 1rem; scroll-padding-inline: 1rem; }
  .gallery.carousel > * { flex: none; }
  .gallery-open img { max-width: calc(100vw - 3rem); }

  .partners { grid-template-columns: 1fr; }
  .partners li + li, .partners li:nth-child(n) { box-shadow: inset 0 1px 0 var(--line); }
  .partners li:first-child { box-shadow: none; }
  .partner-card { min-height: 0; padding: 1.4rem .25rem; }

  .form-row, .callback-form { grid-template-columns: minmax(0, 1fr); }
  /* Große Systemschrift: lange Wörter umbrechen, Auswahlfeld darf schmaler werden */
  main, .site-footer { overflow-wrap: break-word; }
  .field select { min-width: 0; }
  .job { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .circuit[aria-pressed="true"] .flow { animation: none; }
}