/* ==========================================================================
   BauKraftNord — Stylesheet
   --------------------------------------------------------------------------
   Eine Datei, thematisch gegliedert. Reihenfolge der Abschnitte:
   Schriften · Tokens · Basis & Typografie · Layout-Helfer · Navigation ·
   Hero · Baender & Marquee · Sektionen · Leistungsliste · Prozess ·
   Galerie · Formular · Footer · Overlays · Reduced Motion

   Die gerenderte Optik entspricht dem Original. Die wenigen bewussten
   Abweichungen sind Barrierefreiheits-Korrekturen und im jeweiligen
   Kommentar mit "A11y" markiert.
   ========================================================================== */


/* ==========================================================================
   1 · SCHRIFTEN
   Lokal gehostet, nur woff2, font-display:swap. Die Trennung latin /
   latin-ext kommt von Google Fonts; deutscher Text nutzt praktisch immer
   das latin-Subset. Geladen werden ausschliesslich Gewichte, die auch
   wirklich eine Regel nutzt (Inter 300 und Space Grotesk 400 sind
   deshalb entfallen).
   ========================================================================== */

/* Anton 400 — Display-/Hero-Schrift */
@font-face {
  font-family:Anton;
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/anton-400-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:Anton;
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/anton-400-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

/* Inter 400/500/600 — Fliesstext */
@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/inter-400-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/inter-400-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/inter-500-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/inter-500-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/fonts/inter-600-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/fonts/inter-600-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

/* JetBrains Mono 400/500 — Labels, Eyebrows, Zaehler */
@font-face {
  font-family:JetBrains Mono;
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/jetbrains-mono-400-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:JetBrains Mono;
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/jetbrains-mono-400-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
  font-family:JetBrains Mono;
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/jetbrains-mono-500-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:JetBrains Mono;
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/jetbrains-mono-500-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

/* Space Grotesk 500/600 — Zwischenueberschriften und Manifest */
@font-face {
  font-family:Space Grotesk;
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/space-grotesk-500-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:Space Grotesk;
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/fonts/space-grotesk-500-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
  font-family:Space Grotesk;
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/fonts/space-grotesk-600-latin-ext.woff2)format("woff2");
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family:Space Grotesk;
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/fonts/space-grotesk-600-latin.woff2)format("woff2");
  unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}


/* ==========================================================================
   2 · TOKENS
   --------------------------------------------------------------------------
   Die Namen sind dark-first gedacht und beschreiben Rollen, keine Farben:
   --ink  = Flaechenhintergrund (im hellen Theme also hell)
   --cream = Haupttextfarbe (im hellen Theme also dunkel)
   Das helle Theme steht in :root, das dunkle in .stage-dark. Sektionen
   bekommen .stage-dark im HTML und schalten damit die ganze Palette um.
   ========================================================================== */

:root {
  /* Flaechen */
  --ink:#f4f6f9;             /* Seiten- und Sektionshintergrund */
  --coal:#e7ebf1;            /* Panels, Karten, Baender, Footer, Formular */
  --slate:#c3ccd8;           /* Scrollbar-Thumb */
  --navy-glow:#00122f0f;     /* Radial-Schimmer in .panel-navy-deep */

  /* Text */
  --cream:#0c1a2e;           /* Haupttext und Ueberschriften */
  --steel:#47596b;           /* Leads, Fliesstext zweiter Ordnung */
  --mist:#54637a;            /* Labels, Crumbs, gedaempfte Mono-Texte */

  /* Linien */
  --line:#0c1a2e26;          /* dekorative Trennlinien (ca. 1.3:1) */
  --line-strong:#0c1a2e8c;   /* A11y: Raender interaktiver Elemente (ca. 3.1:1) */

  /* Akzente */
  --warm:#b83a03;            /* Orange: Primaerbutton, Akzente, Pfeile */
  --warm-deep:#9e3002;       /* Orange gedunkelt: .text-link:hover */
  --ember:#fd6306;           /* Orange hell: ::selection */
  --cold:#1d6ca6;            /* Wasserblau (Logo): Eyebrows, Fokus, Links-Hover */
  --hover-tint:#0c1a2e0d;    /* Hover-Flaeche in Listenzeilen */

  /* Formular-Status */
  --status-ok:#14632d;
  --status-err:#b3261e;

  /* Schriftfamilien */
  --font-hero:"Anton", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  /* Bewegung */
  --ease-out:cubic-bezier(.22, 1, .36, 1);
  /* --reveal-delay wird pro Element per Inline-Style aus js/main.js gesetzt
     und hier nur mit Fallback konsumiert: var(--reveal-delay, 0s). */

  /* Masse */
  --nav-offset:6.5rem;       /* Hoehe der fixierten Nav inkl. Luft */
  --quick-bar-h:3.5rem;      /* Hoehe der mobilen Aktionsleiste */

  /* ----------------------------------------------------------------------
     Feste Sonderwerte
     Diese Farben gelten in BEIDEN Themes gleich, weil die Bauteile, die sie
     nutzen (fixierte Nav, Cursor, Verlaeufe ueber Bildern), unabhaengig von
     der umgebenden Sektion hell bzw. dunkel bleiben muessen. Sie ersetzen
     die frueheren Hardcodes im Regelwerk.
     ---------------------------------------------------------------------- */
  --paper-rgb:244 246 249;       /* = --ink der hellen Palette (#f4f6f9) */
  --paper-text:#0c1a2e;          /* = --cream hell */
  --paper-muted:#47596b;         /* = --steel hell */
  --paper-line:#0c1a2e26;        /* = --line hell */
  --paper-line-strong:#0c1a2e8c; /* = --line-strong hell */
  --night-rgb:0 18 47;          /* = --ink der dunklen Palette (#00122f, Logo-Navy) */
  --panel-night-rgb:10 37 71;    /* = --coal der dunklen Palette (#0a2547) */
  --glow-warm-rgb:253 99 6;    /* #fd6306 (Logo-Orange) fuer Schatten und Schleier */
  --glow-cold-rgb:60 160 222;    /* #3ca0de (Logo-Wasserblau) fuer Schleier */

  /* Reste einer aelteren Palette. Sie entsprechen weder --ink noch --cream,
     praegen aber den Bildlook (Hero-Schleier, Menue, Konturen) und bleiben
     deshalb bewusst als eigene Tokens erhalten. */
  --scrim-rgb:2 10 24;      /* #020a18 — Schleier ueber Video und Menue */
  --chalk-rgb:244 246 249;   /* #f4f6f9 — Konturen und sehr leichte Hover-Flaechen */
  --selection-ink:#061224;   /* Textfarbe auf markiertem Text */
  --scroll-thumb-hover:#2c3f56;
  /* Orange der hellen Navigationsleiste (= --warm hell) */
  --warm-nav:#b83a03
}

.stage-dark {
  --ink:#00122f;
  --coal:#0a2547;
  --slate:#23375a;
  --navy-glow:#3ca0de14;
  --cream:#f2f6fb;
  --steel:#abb6c2;
  --mist:#8b9aab;
  --line:#f2f6fb1f;
  --line-strong:#f2f6fb80;
  --warm:#fd6306;
  --warm-deep:#e05504;
  --ember:#fe9102;
  --cold:#3ca0de;
  --hover-tint:#f2f6fb08;
  --status-ok:#7bd88f;
  --status-err:#ff7a6b;
  color-scheme:dark;
  background-color:var(--ink);
  color:var(--cream)
}


/* ==========================================================================
   3 · BASIS & TYPOGRAFIE
   ========================================================================== */

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

* {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

html {
  background:var(--ink);
  color-scheme:light;
  /* A11y (SC 2.4.11): Fokus- und Ankerspruenge duerfen nicht hinter der
     fixierten Navigation landen. */
  scroll-padding-top:var(--nav-offset)
}

body {
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-sans);
  text-rendering:optimizelegibility;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden
}

/* Lenis (Smooth Scroll) uebernimmt das Scrollen nur, wenn JS laeuft und
   keine Bewegungsreduzierung gewuenscht ist. */
html.lenis,html.lenis body {
  height:auto
}

.lenis.lenis-smooth {
  scroll-behavior:auto!important
}

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

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

.text-link {
  color:var(--warm);
  text-underline-offset:.2em;
  text-decoration:underline
}

.text-link:hover {
  color:var(--warm-deep)
}

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

::selection {
  background:var(--ember);
  color:var(--selection-ink)
}

::-webkit-scrollbar {
  width:9px
}

::-webkit-scrollbar-track {
  background:var(--ink)
}

::-webkit-scrollbar-thumb {
  background:var(--slate);
  border-radius:99px
}

::-webkit-scrollbar-thumb:hover {
  background:var(--scroll-thumb-hover)
}

:focus-visible {
  outline:2px solid var(--cold);
  outline-offset:3px
}

/* Nur fuer Screenreader — z. B. die Textalternativen der Laufbaender. */
.sr-only {
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  position:absolute;
  overflow:hidden
}

.skip-link {
  z-index:200;
  background:var(--warm);
  color:var(--ink);
  border-radius:6px;
  padding:.6rem 1.2rem;
  font-weight:600;
  position:fixed;
  top:-100px;
  left:1rem
}

.skip-link:focus-visible {
  top:1rem
}

/* --- Display-Schriftgrade ------------------------------------------------ */

.display-hero,.display-giant {
  font-family:var(--font-hero);
  text-transform:uppercase;
  letter-spacing:.01em;
  font-weight:400
}

.display-hero {
  font-size:clamp(2.6rem,11.5vw,12rem);
  line-height:.92
}

.display-giant {
  font-size:clamp(2.4rem,7vw,7rem);
  line-height:.95
}

/* <em> dient in den Display-Zeilen nur der Einfaerbung, nicht der Kursive. */
.display-hero em,.display-giant em {
  font-style:normal
}

.accent {
  color:var(--warm)
}

.accent-cold {
  color:var(--cold)
}

.eyebrow {
  font-family:var(--font-mono);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--cold);
  font-size:.72rem;
  font-weight:500
}

.eyebrow-warm {
  color:var(--warm)
}

/* A11y: von .68rem auf .75rem (12px) angehoben — funktionaler Text. */
.stat-label {
  font-family:var(--font-mono);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mist);
  font-size:.75rem;
  display:block
}

.stat-num {
  font-family:var(--font-hero);
  font-variant-numeric:tabular-nums;
  color:var(--warm);
  font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:1
}

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

.btn-primary,.btn-ghost {
  letter-spacing:.01em;
  white-space:nowrap;
  transition:transform .4s var(--ease-out), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
  border-radius:999px;
  align-items:center;
  gap:.6rem;
  padding:1rem 1.9rem;
  font-size:.92rem;
  font-weight:600;
  display:inline-flex
}

/* Der Schatten nutzt bewusst in beiden Themes das helle Orange #f47a20. */
.btn-primary {
  background:var(--warm);
  color:var(--ink);
  box-shadow:0 10px 40px -12px rgb(var(--glow-warm-rgb) / 60%)
}

.btn-primary:hover {
  background:var(--warm-deep);
  box-shadow:0 18px 50px -12px rgb(var(--glow-warm-rgb) / 74.9%)
}

/* A11y: --line-strong statt --line — der Rahmen ist die einzige sichtbare
   Abgrenzung der Klickflaeche. */
.btn-ghost {
  border:1px solid var(--line-strong);
  color:var(--cream);
  font-weight:500
}

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

.btn-sm {
  padding:.65rem 1.3rem;
  font-size:.85rem
}


/* ==========================================================================
   4 · LAYOUT-HELFER
   ========================================================================== */

.container-bk {
  width:100%;
  max-width:90rem;
  margin-inline:auto;
  padding-inline:1.5rem
}

@media (width>=1024px) {
  .container-bk {
    padding-inline:3rem
  }

}

section {
  position:relative
}

/* Sprungziele duerfen nicht unter der fixierten Nav enden (ergaenzt das
   scroll-padding-top am html-Element). */
section[id],main[id] {
  scroll-margin-top:var(--nav-offset)
}

/* Feines Rauschen ueber der gesamten Seite (rein dekorativ). */
.grain:before {
  content:"";
  z-index:80;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position:fixed;
  inset:0
}

.panel-navy {
  background:linear-gradient(180deg, var(--coal) 0%, var(--ink) 100%);
  border-block:1px solid var(--line)
}

.panel-navy-deep {
  background:radial-gradient(80% 60% at 50% 0%, var(--navy-glow) 0%, transparent 60%), var(--coal);
  border-block:1px solid var(--line)
}

.content-section {
  padding-block:clamp(5rem,10vh,8rem)
}

/* Logo-Karte statt Foto (Startseite, "Altes Land"): weisser Grund mit Luft. */
.content-media--brand {
  background:#fff;
  padding:clamp(1.5rem,4vw,3rem)
}

/* Split-Layouts, deren Bild (noch) fehlt: Text bleibt lesbar schmal statt
   in einer halb leeren Spalte zu haengen. */
.content-split:has(> .content-copy:only-child) {
  grid-template-columns:minmax(0,46rem)
}

.content-media video {
  width:100%;
  height:auto;
  display:block
}

/* Hochkant-Clip neben Text: auf 4:5 beschnitten, damit die Spalte nicht
   doppelt so hoch wird wie der Text daneben. */
.content-media--video video {
  aspect-ratio:4/5;
  object-fit:cover
}

.content-split {
  align-items:center;
  gap:3rem;
  display:grid
}

@media (width>=1024px) {
  .content-split {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:5rem
  }
  /* .rev dreht Bild und Text um. */
  .content-split.rev>.content-media {
    order:2
  }

}

.content-media {
  border:1px solid var(--line);
  border-radius:1.25rem;
  overflow:hidden
}

.content-media img {
  width:100%;
  height:auto
}

.content-copy h2 {
  margin-bottom:1.4rem
}

.content-copy>p {
  color:var(--steel);
  max-width:38rem;
  font-size:1.05rem;
  line-height:1.7
}

.content-copy>p+p {
  margin-top:1rem
}

.check-list {
  gap:.9rem;
  margin-top:1.8rem;
  list-style:none;
  display:grid
}

.check-list li {
  color:var(--cream);
  align-items:flex-start;
  gap:.9rem;
  display:flex
}

/* Raute statt Aufzaehlungspunkt. */
.check-list li:before {
  content:"";
  background:var(--cold);
  flex-shrink:0;
  width:.55rem;
  height:.55rem;
  margin-top:.5rem;
  rotate:45deg
}

.check-list li span {
  color:var(--steel)
}

.check-list li strong {
  color:var(--cream);
  font-weight:600;
  display:block
}

.fact-row {
  grid-template-columns:repeat(2,1fr);
  gap:2.5rem;
  padding-block:3rem;
  display:grid
}

@media (width>=1024px) {
  .fact-row {
    grid-template-columns:repeat(4,1fr)
  }

}

.fact-row .stat-label {
  margin-top:.6rem
}

.ref-strip {
  gap:2.5rem 2rem;
  margin-top:3.5rem;
  display:grid
}

@media (width>=900px) {
  .ref-strip {
    grid-template-columns:repeat(3,1fr)
  }

}

.ref-strip img {
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  height:auto;
  display:block
}

.ref-strip figcaption {
  font-family:var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
  margin-top:.9rem;
  font-size:.78rem
}

.ref-strip figcaption strong {
  color:var(--warm);
  font-weight:600
}


/* ==========================================================================
   5 · NAVIGATION
   ========================================================================== */

#site-nav {
  /* Die Leiste ist immer hell — das Logo steht auf weissem Grund. Die
     Palette wird auf die hellen Festwerte gezwungen, weil der Header im
     HTML .stage-dark traegt (Menue-Overlay und Burger brauchen das). */
  --cream:var(--paper-text);
  --steel:var(--paper-muted);
  --line:var(--paper-line);
  --line-strong:var(--paper-line-strong);
  --warm:var(--warm-nav);
  inset-inline:0;
  z-index:100;
  transition:transform .5s var(--ease-out), background .4s ease, border-color .4s ease;
  border-bottom:1px solid var(--line);
  color:var(--cream);
  color-scheme:light;
  background:rgb(var(--paper-rgb) / 96%);
  position:fixed;
  top:0
}

/* Ab 40px Scrollweg (js/main.js) wird die Leiste kompakt und leicht
   durchscheinend. */
#site-nav.is-scrolled {
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  background:rgb(var(--paper-rgb) / 92%)
}

.nav-inner {
  transition:padding .4s var(--ease-out);
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  padding-block:.7rem;
  display:flex
}

#site-nav.is-scrolled .nav-inner {
  padding-block:.45rem
}

#site-nav.is-scrolled .nav-logo {
  height:3.2rem
}

/* --- Wortmarke ----------------------------------------------------------- */

.nav-brand {
  align-items:center;
  gap:.7rem;
  display:flex
}

.nav-logo {
  width:auto;
  height:4.4rem;
  transition:transform .5s var(--ease-out), height .4s var(--ease-out)
}

.nav-brand:hover .nav-logo {
  transform:scale(1.04)
}

/* --- Hauptnavigation ----------------------------------------------------- */

.nav-links {
  align-items:center;
  gap:2.2rem;
  display:none
}

@media (width>=1024px) {
  .nav-links {
    display:flex
  }

}

.nav-links a {
  color:var(--steel);
  font-size:.9rem;
  font-weight:500;
  transition:color .3s
}

.nav-links a:hover {
  color:var(--cream)
}

/* Muss NACH :hover stehen: die aktuelle Seite bleibt auch beim Ueberfahren
   cyan markiert (gleiche Spezifitaet, spaetere Regel gewinnt). */
.nav-links a[aria-current=page] {
  color:var(--cold)
}

/* --- Aktionen rechts ----------------------------------------------------- */

.nav-cta {
  align-items:center;
  gap:.8rem;
  display:flex
}

/* Unter 640px uebernimmt die Quick-Bar am unteren Rand. */
.nav-cta .btn-primary {
  display:none
}

/* Telefonnummer im Header: dezenter Mono-Link neben dem Anfrage-Button. */
.nav-tel {
  font-family:var(--font-mono);
  letter-spacing:.04em;
  color:var(--steel);
  white-space:nowrap;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  transition:color .3s;
  display:none
}

.nav-tel:hover {
  color:var(--warm)
}

/* Das Hoerer-Icon ist ein gefuellter Pfad (fill:currentColor). Ein
   Outline-Icon braucht im SVG zusaetzlich stroke="currentColor" fill="none". */
.nav-tel-icon {
  fill:currentColor;
  flex:none;
  inline-size:1rem;
  block-size:1rem
}

@media (width>=640px) {
  .nav-cta .btn-primary,.nav-tel {
    display:inline-flex
  }

}

/* A11y: --line-strong statt --line — der Rahmen war mit 1.3:1 unsichtbar. */
#nav-burger {
  border:1px solid var(--line-strong);
  border-radius:8px;
  place-items:center;
  width:2.6rem;
  height:2.6rem;
  display:grid
}

/* Drei Balken aus einem Element: der mittlere ist das span selbst, die
   beiden aeusseren sind versetzte Schatten. */
#nav-burger span {
  background:currentColor;
  width:1.2rem;
  height:1px;
  transition:box-shadow .3s;
  display:block;
  box-shadow:0 6px,0 -6px
}

@media (width>=1024px) {
  #nav-burger {
    display:none
  }

}

/* --- Mobilmenue ---------------------------------------------------------- */

#nav-mobile {
  z-index:95;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  transition:translate .55s var(--ease-out);
  pointer-events:none;
  background:rgb(var(--scrim-rgb) / 96.9%);
  position:fixed;
  inset:0;
  overflow-y:auto;
  translate:0 -100%
}

#nav-mobile.is-open {
  pointer-events:auto;
  translate:0
}

/* Ohne JavaScript gibt es keinen Umschalter — das Menue wird dann als
   normale Navigation im Fluss gerendert (Progressive Enhancement). */
html:not(.js) #nav-burger {
  display:none
}

html:not(.js) #nav-mobile {
  pointer-events:auto;
  background:var(--coal);
  position:static;
  translate:none
}

html:not(.js) .nav-mobile-inner {
  min-height:0;
  padding-block:1.5rem
}

@media (width>=1024px) {
  html:not(.js) #nav-mobile {
    display:none
  }

}

.nav-mobile-inner {
  flex-direction:column;
  justify-content:center;
  gap:.4rem;
  min-height:100%;
  padding-block:7rem 3rem;
  display:flex
}

.nav-mobile-inner a {
  font-family:var(--font-hero);
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
  transition:color .3s ease, padding-left .4s var(--ease-out);
  padding-block:.7rem;
  font-size:clamp(2.2rem,9vw,4rem);
  line-height:1.1
}

.nav-mobile-inner a:hover {
  color:var(--warm);
  padding-left:.6rem
}

.nav-mobile-inner a span {
  font-family:var(--font-mono);
  letter-spacing:.3em;
  color:var(--cold);
  vertical-align:super;
  margin-right:1.2rem;
  font-size:.7rem
}

/* --- Mobile Aktionsleiste (Quick-Bar) ------------------------------------
   Letztes Element vor </body>, auf allen Seiten ausser Impressum und
   Datenschutz. Nur unter 1024px sichtbar; oberhalb uebernehmen Header-
   Telefonlink und Anfrage-Button. */

.quick-bar {
  z-index:85;
  background:color-mix(in srgb, var(--ink) 95%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);
  padding-bottom:env(safe-area-inset-bottom);
  display:none;
  position:fixed;
  inset-inline:0;
  bottom:0
}

.quick-bar a {
  font-family:var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream);
  border-inline-start:1px solid var(--line);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.25rem;
  /* Mindestzielgroesse 48px (SC 2.5.8). */
  min-block-size:3rem;
  padding:.5rem .4rem;
  font-size:.7rem;
  transition:color .3s, background .3s;
  display:flex
}

.quick-bar a:first-child {
  border-inline-start:0
}

.quick-bar a:hover,.quick-bar a:focus-visible {
  color:var(--warm);
  background:var(--hover-tint)
}

.quick-bar svg {
  fill:currentColor;
  flex:none;
  inline-size:1.15rem;
  block-size:1.15rem
}

@media (width<=1023px) {
  .quick-bar {
    display:grid
  }
  /* Platz schaffen, damit die Leiste den Footer nicht verdeckt. :has()
     sorgt dafuer, dass Impressum/Datenschutz ohne Leiste unveraendert
     bleiben. */
  body:has(.quick-bar) {
    padding-bottom:calc(var(--quick-bar-h) + env(safe-area-inset-bottom))
  }
  /* Gegenstueck zu scroll-padding-top: beim Vorwaerts-Tabben darf das naechste
     Ziel nicht buendig hinter der fixierten Leiste am unteren Rand landen. */
  html:has(.quick-bar) {
    scroll-padding-bottom:calc(var(--quick-bar-h) + env(safe-area-inset-bottom) + .5rem)
  }
  /* Ueber die Leiste schieben — und nach rechts, weil links im Hero die
     beiden CTA-Buttons stehen und der Schalter sie sonst ueberdeckt. */
  body:has(.quick-bar) .motion-toggle {
    bottom:calc(var(--quick-bar-h) + .75rem);
    left:auto;
    right:1rem
  }

}


/* ==========================================================================
   6 · HERO
   ========================================================================== */

#hero {
  align-items:flex-end;
  min-height:100svh;
  padding-block:8rem 5rem;
  display:flex;
  position:relative;
  overflow:hidden
}

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

/* Verlaufsschleier ueber Video bzw. Bild. Beide Varianten teilen sich die
   Positionierung, unterscheiden sich aber bewusst im Verlauf:
   Startseite dunkler (Video), Unterseiten weicher (Standbild). */
.hero-grade,.page-hero-grade {
  pointer-events:none;
  position:absolute;
  inset:0
}

.hero-grade {
  /* Schleier ueber dem Foto: unten in den Seitengrund auslaufend, dazu ein
     Hauch Wasserblau oben rechts (Logo-Farbe). */
  background:radial-gradient(50% 55% at 85% 18%, rgb(var(--glow-cold-rgb) / 14%), transparent 65%), linear-gradient(0deg, var(--ink) 0%, rgb(var(--scrim-rgb) / 30%) 40%, rgb(var(--scrim-rgb) / 42%) 100%), radial-gradient(90% 70% at 50% 60%, transparent 30%, rgb(var(--scrim-rgb) / 50%) 100%)
}

.page-hero-grade {
  background:linear-gradient(0deg, var(--ink) 2%, rgb(var(--panel-night-rgb) / 34.9%) 45%, rgb(var(--night-rgb) / 54.9%) 100%), radial-gradient(90% 70% at 50% 60%, transparent 30%, rgb(var(--night-rgb) / 50.2%) 100%)
}

.hero-content {
  z-index:2;
  position:relative
}

.hero-content .eyebrow {
  margin-bottom:1.6rem
}

/* Maske fuer die Zeilenanimation: SplitText schiebt die Buchstaben von
   unten herein, overflow:hidden schneidet sie ab. */
.hero-line {
  margin-top:-.14em;
  padding-top:.14em;
  padding-bottom:.04em;
  display:block;
  overflow:hidden
}

.split-char {
  will-change:transform;
  display:inline-block
}

.hero-lead {
  max-width:34rem;
  color:var(--steel);
  margin-top:1.8rem;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.55
}

.hero-cta {
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.4rem;
  display:flex
}

.hero-scroll {
  z-index:2;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  display:flex;
  position:absolute;
  bottom:3rem;
  right:clamp(1.5rem,4vw,3.5rem)
}

.scroll-label {
  font-family:var(--font-mono);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mist);
  writing-mode:vertical-rl;
  font-size:.62rem
}

.scroll-line {
  background:linear-gradient(to bottom, transparent, var(--cold), transparent);
  background-size:100% 200%;
  width:1px;
  height:56px;
  animation:2.2s ease-in-out infinite scroll-pulse
}

@keyframes scroll-pulse {
  0% {
    background-position:0 -100%
  }
  to {
    background-position:0 200%
  }

}

/* --- Hero der Unterseiten ------------------------------------------------ */

.page-hero {
  align-items:flex-end;
  min-height:62svh;
  padding-block:9rem 3.5rem;
  display:flex;
  position:relative;
  overflow:hidden
}

.page-hero-media {
  position:absolute;
  inset:0
}

.page-hero-media img,.page-hero-media video {
  object-fit:cover;
  width:100%;
  height:100%
}

.page-hero .container-bk {
  z-index:2;
  position:relative
}

.page-hero .eyebrow {
  margin-bottom:1.4rem
}

.page-hero-lead {
  max-width:36rem;
  color:var(--steel);
  margin-top:1.6rem;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.55
}

.crumb {
  font-family:var(--font-mono);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--mist);
  align-items:center;
  gap:.7rem;
  font-size:.7rem;
  display:inline-flex
}

.crumb a {
  color:var(--cold);
  transition:color .3s
}

.crumb a:hover {
  color:var(--cream)
}

/* --- Jobs-Hero mit Team-Karikatur --------------------------------------
   Bewusst HELL statt .stage-dark: Die Karikatur liegt als Zeichnung auf
   weissem Grund vor. `mix-blend-mode: multiply` laesst dieses Weiss mit der
   Seitenflaeche verschmelzen — so wirkt die Illustration freigestellt, ohne
   dass jemand eine Datei mit Transparenz nachliefern muesste. */

.jobs-hero {
  padding-block:clamp(7.5rem,15vh,11rem) clamp(3rem,7vh,5rem);
  position:relative;
  overflow:hidden
}

.jobs-hero-inner {
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  display:grid
}

/* "Kraftverstaerkung" ist ein langes Kompositum: ohne min-width:0 sprengt es
   die Rasterspalte. Die Trennstelle setzt ein &shy; im HTML. */
.jobs-hero-copy {
  min-width:0
}

.jobs-hero-copy .hero-cta {
  margin-top:2.4rem
}

.jobs-hero-figure {
  justify-content:center;
  display:flex
}

/* KI-Visualisierungen (media/gen/, nur noch Photovoltaik): leicht
   entsaettigte warme Abstimmung, damit sie zur Fotowelt passen. */
img[src*="/media/gen/"] {
  filter:saturate(.85) contrast(1.04) sepia(.06)
}

.team-cartoon {
  width:100%;
  max-width:26rem;
  height:auto
}

/* Kleinere Variante im Fliesstext (Startseite, Abschnitt "Altes Land"). */
.team-cartoon-inline {
  margin-top:2rem
}

.team-cartoon-inline .team-cartoon {
  max-width:18rem
}

@media (width>=1024px) {
  .jobs-hero-inner {
    grid-template-columns:1.1fr .9fr
  }
  .team-cartoon {
    max-width:32rem
  }
}


/* ==========================================================================
   7 · BAENDER & MARQUEE
   Das Laufband ist reines CSS (kein JS): der Inhalt liegt doppelt im DOM,
   die Animation verschiebt um genau 50% — daher nahtlos.
   ========================================================================== */

.band {
  border-block:1px solid var(--line);
  background:var(--coal);
  padding-block:1.1rem;
  overflow:hidden
}

.marquee {
  width:max-content;
  animation:36s linear infinite marquee;
  display:flex
}

.marquee-fast {
  animation-duration:24s
}

.band:hover .marquee {
  animation-play-state:paused
}

@keyframes marquee {
  to {
    transform:translate(-50%)
  }

}

.band-set {
  flex-shrink:0;
  align-items:center;
  display:flex
}

.band-set span {
  font-family:var(--font-hero);
  text-transform:uppercase;
  color:var(--cream);
  padding-inline:1.6rem;
  font-size:clamp(1.6rem,3.5vw,3rem);
  line-height:1
}

.band-set i {
  color:var(--warm);
  font-size:1rem;
  font-style:normal
}

/* Einsatzgebiet-Band: Konturschrift statt Flaeche. */
.band-region {
  background:var(--ink);
  padding-block:1.6rem
}

.band-region .band-set span {
  color:transparent;
  -webkit-text-stroke:1px rgb(var(--chalk-rgb) / 34.9%);
  font-size:clamp(2.2rem,5vw,4.5rem)
}

.band-region .band-set i {
  color:var(--cold)
}


/* ==========================================================================
   8 · SEKTIONEN
   ========================================================================== */

/* --- Manifest (Wort-fuer-Wort-Aufhellung beim Scrollen) ------------------ */

#manifest {
  background:var(--ink);
  padding-block:clamp(7rem,16vh,12rem)
}

.manifest-inner {
  max-width:68rem
}

.manifest-text {
  font-family:var(--font-display);
  letter-spacing:-.02em;
  margin-top:2.2rem;
  font-size:clamp(1.9rem,4.6vw,4rem);
  font-weight:500;
  line-height:1.18
}

.scrub-word {
  display:inline-block
}

/* A11y: Startdeckkraft von .5 auf .65 — bei .5 lag der Text bei 2.87:1 und
   damit unter dem 3:1-Minimum fuer Grosstext. GSAP hebt beim Scrollen auf 1. */
html.fx .scrub-word {
  opacity:.65
}

/* --- Waermepumpen-Kapitel (auf Desktop gepinnt) -------------------------- */

.wp-pin {
  padding-block:clamp(5rem,10vh,8rem)
}

.wp-grid {
  gap:3rem;
  display:grid
}

@media (width>=1024px) {
  .wp-pin {
    align-items:center;
    min-height:100vh;
    display:flex
  }
  .wp-grid {
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    align-items:center;
    gap:5rem;
    width:100%
  }

}

.wp-title {
  margin-top:1.4rem
}

.wp-chapters {
  margin-top:2.6rem;
  position:relative
}

.wp-copy {
  padding-block:1.2rem
}

.wp-copy h3 {
  font-family:var(--font-display);
  align-items:center;
  gap:.9rem;
  font-size:1.25rem;
  font-weight:600;
  display:flex
}

.wp-chapter-num {
  border:1px solid var(--warm);
  width:2rem;
  height:2rem;
  font-family:var(--font-mono);
  color:var(--warm);
  border-radius:999px;
  place-items:center;
  font-size:.75rem;
  display:grid
}

.wp-copy p {
  max-width:36rem;
  color:var(--steel);
  margin-top:.8rem
}

/* Nur mit Effekten (html.fx-desktop) liegen die drei Kapitel uebereinander
   und werden von GSAP ein- und ausgeblendet. Ohne JS stehen sie
   untereinander und sind vollstaendig lesbar. */
@media (width>=1024px) {
  html.fx-desktop .wp-chapters {
    min-height:13rem
  }
  html.fx-desktop .wp-copy {
    inset-inline:0;
    opacity:0;
    position:absolute;
    top:0
  }
  html.fx-desktop .wp-copy[data-wp-copy="0"] {
    opacity:1
  }

}

.wp-stats {
  border-top:1px solid var(--line);
  flex-wrap:wrap;
  gap:2.5rem;
  margin-top:3rem;
  padding-top:2rem;
  display:flex
}

.wp-stat .stat-label {
  margin-top:.6rem
}

.wp-media-col {
  border:1px solid var(--line);
  border-radius:1.25rem;
  position:relative;
  overflow:hidden
}

.wp-img {
  position:relative
}

.wp-img img {
  aspect-ratio:4/5;
  object-fit:cover;
  width:100%
}

@media (width>=1024px) {
  .wp-media-col {
    aspect-ratio:4/5;
    max-height:78vh
  }
  .wp-img {
    position:absolute;
    inset:0
  }
  .wp-img img {
    aspect-ratio:auto;
    height:100%
  }
  html.fx-desktop .wp-img {
    opacity:0
  }
  html.fx-desktop .wp-img[data-wp-img="0"] {
    opacity:1
  }

}

/* Mobil: gestapelte Einzelbilder statt einer gemeinsamen Buehne. */
@media (width<=1023px) {
  .wp-media-col {
    border:0;
    border-radius:0;
    gap:1rem;
    display:grid
  }
  .wp-img {
    border:1px solid var(--line);
    border-radius:1rem;
    overflow:hidden
  }

}

/* --- FAQ ----------------------------------------------------------------- */

.faq-list {
  border-top:1px solid var(--line);
  max-width:52rem;
  margin-top:2.5rem
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  cursor:pointer;
  font-family:var(--font-display);
  justify-content:space-between;
  align-items:baseline;
  gap:2rem;
  padding-block:1.4rem;
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  font-weight:600;
  list-style:none;
  transition:color .3s;
  display:flex
}

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

/* Die Frage steckt in einer <h3>, damit Screenreader die FAQ ueber die
   Ueberschriftenliste ansteuern koennen. Optisch soll sie sich aber nicht
   vom <summary> unterscheiden. */
.faq-list summary h3 {
  font:inherit;
  margin:0
}

/* Eigenes Plus-/Kreuz-Zeichen statt Browser-Dreieck. */
.faq-list summary:after {
  content:"+";
  font-family:var(--font-mono);
  color:var(--cold);
  font-size:1.2rem;
  transition:rotate .3s
}

.faq-list details[open] summary {
  color:var(--cold)
}

.faq-list details[open] summary:after {
  rotate:45deg
}

.faq-list details p {
  color:var(--steel);
  max-width:44rem;
  padding-bottom:1.5rem;
  line-height:1.7
}

/* --- Abschluss-Band mit Handlungsaufforderung ---------------------------- */

.cta-band {
  border-block:1px solid var(--line);
  background:radial-gradient(70% 100% at 20% 0%, rgb(var(--glow-cold-rgb) / 10.2%) 0%, transparent 55%), radial-gradient(70% 100% at 85% 100%, rgb(var(--glow-warm-rgb) / 12.2%) 0%, transparent 55%), var(--coal);
  padding-block:clamp(5rem,10vh,8rem);
  position:relative;
  overflow:hidden
}

.cta-band-inner {
  align-items:center;
  gap:2.5rem;
  display:grid
}

@media (width>=1024px) {
  .cta-band-inner {
    grid-template-columns:minmax(0,2fr) auto
  }

}

.cta-band .display-giant em {
  color:var(--cold)
}

.cta-band-actions {
  flex-wrap:wrap;
  gap:1rem;
  display:flex
}


/* ==========================================================================
   9 · LEISTUNGSLISTE
   Zwei Varianten desselben Musters: .svc-row auf der Startseite,
   .svc-item auf den Leistungsseiten (mit Vorschaubild-Spalte). Nummer,
   Name, Text und Pfeil sind gemeinsam definiert, die Varianten setzen nur
   noch ihre Abweichungen.
   ========================================================================== */

.svc-num {
  font-family:var(--font-mono);
  letter-spacing:.2em;
  color:var(--cold);
  grid-area:num;
  font-size:.75rem
}

.svc-name {
  font-family:var(--font-hero);
  text-transform:uppercase;
  grid-area:name;
  font-size:clamp(1.6rem,3.6vw,3rem);
  line-height:1.05
}

.svc-desc {
  color:var(--steel);
  grid-area:desc;
  max-width:34rem;
  font-size:.98rem
}

.svc-arrow {
  color:var(--warm);
  transition:transform .4s var(--ease-out);
  grid-area:arrow;
  font-size:1.6rem
}

/* --- Variante A: Startseite ---------------------------------------------- */

.svc-rows {
  border-top:1px solid var(--line);
  margin-top:2.5rem
}

.svc-row {
  border-bottom:1px solid var(--line);
  transition:background .5s ease, padding-left .5s var(--ease-out);
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"num name arrow""num desc arrow";
  align-items:center;
  column-gap:1.6rem;
  padding-block:1.6rem;
  display:grid
}

@media (width>=1024px) {
  .svc-row {
    grid-template-columns:5rem minmax(0,3fr) minmax(0,5fr) auto;
    grid-template-areas:"num name desc arrow";
    column-gap:2.5rem;
    padding-block:2.2rem
  }

}

/* Sehr leichter Weissschleier — bewusst heller als --hover-tint. */
.svc-row:hover {
  background:rgb(var(--chalk-rgb) / 3.1%);
  padding-left:.8rem
}

.svc-row:hover .svc-arrow {
  transform:translate(8px)
}

/* --- Variante B: Leistungsseiten ----------------------------------------- */

.svc-layout {
  align-items:start;
  gap:3rem;
  margin-top:3.5rem;
  display:grid
}

@media (width>=1024px) {
  .svc-layout {
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:5rem
  }

}

.svc-list {
  border-top:1px solid var(--line)
}

.svc-item {
  border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease-out), background .5s ease;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"num name thumb""num desc thumb";
  align-items:center;
  column-gap:1.4rem;
  padding-block:1.6rem;
  display:grid;
  position:relative
}

@media (width>=1024px) {
  .svc-item {
    grid-template-columns:3.5rem minmax(0,1fr) auto;
    grid-template-areas:"num name arrow""num desc arrow";
    column-gap:2rem;
    padding-block:2rem
  }

}

.svc-item:hover {
  background:var(--hover-tint);
  padding-left:1rem
}

.svc-item .svc-name {
  font-size:clamp(1.9rem,4.6vw,4.2rem);
  line-height:1.02;
  transition:color .4s
}

.svc-item:hover .svc-name {
  color:var(--cold)
}

.svc-item .svc-desc {
  margin-top:.4rem
}

/* Der Pfeil ersetzt ab 1024px das mobile Vorschaubild. */
.svc-item .svc-arrow {
  font-size:1.8rem;
  display:none
}

.svc-item:hover .svc-arrow {
  transform:translate(10px)
}

.svc-thumb {
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:.7rem;
  grid-area:thumb;
  width:4.6rem;
  height:4.6rem
}

@media (width>=1024px) {
  .svc-item .svc-arrow {
    display:block
  }
  .svc-thumb {
    display:none
  }

}

/* Grosses Vorschaubild rechts — existiert nur auf Desktop, weil der
   Bildwechsel an Hover/Fokus haengt (js/main.js). */
.svc-media {
  display:none
}

@media (width>=1024px) {
  .svc-media {
    aspect-ratio:4/5;
    border:1px solid var(--line);
    background:var(--coal);
    border-radius:1.25rem;
    display:block;
    position:sticky;
    top:6.5rem;
    overflow:hidden
  }
  .svc-media img {
    object-fit:cover;
    opacity:0;
    width:100%;
    height:100%;
    transition:opacity .5s ease, transform .9s var(--ease-out);
    position:absolute;
    inset:0;
    transform:scale(1.05)
  }
  .svc-media img.is-active {
    opacity:1;
    transform:scale(1)
  }

}


/* ==========================================================================
   10 · PROZESS
   ========================================================================== */

.proc-title {
  margin-top:1.4rem
}

.proc-rows {
  border-top:1px solid var(--line);
  margin-top:3.5rem
}

.proc-row {
  border-bottom:1px solid var(--line);
  grid-template-columns:auto 1fr;
  grid-template-areas:"num title""num text";
  align-items:baseline;
  column-gap:1.6rem;
  padding-block:1.8rem;
  transition:background .5s;
  display:grid
}

@media (width>=1024px) {
  .proc-row {
    grid-template-columns:8rem minmax(0,2fr) minmax(0,3fr);
    grid-template-areas:"num title text";
    column-gap:3rem;
    padding-block:2.4rem
  }

}

.proc-row:hover {
  background:var(--hover-tint)
}

/* Konturzahl: transparente Schrift plus Kontur in Orange. */
.proc-num {
  font-family:var(--font-hero);
  color:transparent;
  -webkit-text-stroke:1px var(--warm);
  grid-area:num;
  font-size:clamp(2rem,5vw,4.2rem);
  line-height:1
}

.proc-row h3 {
  font-family:var(--font-display);
  transition:transform .5s var(--ease-out);
  grid-area:title;
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  font-weight:600
}

.proc-row:hover h3 {
  transform:translate(8px)
}

.proc-row p {
  color:var(--steel);
  grid-area:text;
  margin-top:.4rem
}


/* ==========================================================================
   11 · GALERIE (Baeder)
   Mobil: nativer horizontaler Scroller mit Scroll-Snap.
   Desktop mit Effekten: GSAP pinnt die Sektion und schiebt den Track —
   deshalb dort overflow:visible und kein Snap.
   ========================================================================== */

.baeder-head {
  margin-bottom:3.5rem
}

.baeder-head .display-giant {
  margin-top:1.4rem
}

.baeder-lead {
  max-width:34rem;
  color:var(--steel);
  margin-top:1.6rem;
  font-size:1.05rem
}

#hg-pin {
  padding-block:2rem 6rem;
  position:relative
}

@media (width>=1024px) {
  html.fx-desktop #hg-pin {
    align-items:center;
    height:100svh;
    padding-block:0;
    display:flex
  }

}

#hg-wrap {
  scroll-snap-type:x proximity;
  scroll-padding-inline:1.5rem;
  /* Horizontales Wischen soll nicht die Seite bzw. die Browser-Zurueck-
     Geste ausloesen. */
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding-inline:1.5rem;
  overflow-x:auto;
  /* A11y: statt komplett versteckter Scrollbar eine schmale, dezente —
     sonst fehlt mobil jede Scroll-Affordanz. */
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent
}

#hg-wrap::-webkit-scrollbar {
  height:6px
}

#hg-wrap::-webkit-scrollbar-track {
  background:transparent
}

#hg-wrap::-webkit-scrollbar-thumb {
  background:var(--line-strong);
  border-radius:99px
}

#hg-wrap:focus-visible {
  outline:2px solid var(--cold);
  outline-offset:4px
}

@media (width>=1024px) {
  #hg-wrap {
    padding-inline:clamp(3rem,6vw,6rem)
  }
  html.fx-desktop #hg-wrap {
    scroll-snap-type:none;
    width:100%;
    overflow:visible
  }

}

#hg-track {
  will-change:transform;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  width:max-content;
  display:flex;
  position:relative
}

@media (width>=1024px) {
  html.fx-desktop #hg-track {
    gap:clamp(4rem,8vw,9rem);
    height:100svh
  }

}

.hg-slide {
  scroll-snap-align:center;
  border-radius:1.25rem;
  flex-shrink:0;
  width:min(84vw,34rem);
  position:relative;
  overflow:hidden
}

.hg-media {
  aspect-ratio:3/4;
  border:1px solid var(--line);
  background:var(--coal);
  border-radius:1.25rem;
  overflow:hidden
}

.hg-slide--pano .hg-media {
  aspect-ratio:16/10
}

.hg-media img,.hg-media video {
  object-fit:cover;
  width:100%;
  height:100%;
  transition:transform 1.2s var(--ease-out)
}

.hg-slide:hover .hg-media img,.hg-slide:hover .hg-media video {
  transform:scale(1.04)
}

.hg-caption {
  inset-inline:0;
  background:linear-gradient(transparent, rgb(var(--night-rgb) / 92.2%) 80%);
  padding:clamp(1.2rem,2.5vw,2rem);
  position:absolute;
  bottom:0
}

/* Traegt die Kennzeichnung "Visualisierung" und steht damit am hellsten Punkt
   der Bilder — im transparenten Ende des Caption-Verlaufs. Eigene deckende
   Flaeche statt Aenderung am Verlauf, der unveraendert h3 und p traegt. */
.hg-index {
  font-family:var(--font-mono);
  letter-spacing:.3em;
  color:var(--cold);
  font-size:.7rem;
  display:inline-block;
  background:rgb(var(--night-rgb) / 88%);
  border-radius:.4rem;
  padding:.25rem .5rem;
  margin-inline-start:-.5rem
}

.hg-caption h3 {
  font-family:var(--font-display);
  margin-top:.4rem;
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  font-weight:600
}

.hg-caption p {
  color:var(--steel);
  margin-top:.3rem;
  font-size:.95rem
}

/* Riesenwort und Fortschrittsanzeige gehoeren zur gepinnten Desktop-
   Choreografie und bleiben sonst ausgeblendet. */
.hg-word,.hg-progress {
  display:none
}

@media (width>=1024px) {
  html.fx-desktop .hg-slide {
    border-radius:0;
    width:max-content;
    overflow:visible
  }
  html.fx-desktop .hg-media {
    aspect-ratio:auto;
    transition:transform .9s var(--ease-out)
  }
  html.fx-desktop .hg-slide:hover .hg-media {
    transform:scale(1.015)
  }
  /* Ueberbreite Bilder: GSAP verschiebt sie im Slide (Parallaxe). */
  html.fx-desktop .hg-media img,html.fx-desktop .hg-media video {
    width:118%;
    max-width:none;
    margin-left:-9%;
    transition:none
  }
  html.fx-desktop .hg-slide:hover .hg-media img,html.fx-desktop .hg-slide:hover .hg-media video {
    transform:none
  }
  html.fx-desktop .hg-slide--full .hg-media {
    border:0;
    border-radius:0;
    width:min(72vw,178svh);
    height:100svh
  }
  html.fx-desktop .hg-slide--tall .hg-media {
    width:clamp(24rem,30vw,34rem);
    height:74svh
  }
  html.fx-desktop .hg-slide--wide .hg-media {
    width:clamp(36rem,48vw,54rem);
    height:56svh
  }
  html.fx-desktop .hg-slide--pano .hg-media {
    width:min(76vw,88rem);
    height:min(42svh,26.5vw)
  }
  html.fx-desktop .hg-slide--low {
    align-self:flex-end;
    margin-bottom:10svh
  }
  html.fx-desktop .hg-slide--high {
    align-self:flex-start;
    margin-top:9svh
  }
  html.fx-desktop .hg-word {
    z-index:2;
    font-family:var(--font-hero);
    text-transform:uppercase;
    letter-spacing:.02em;
    white-space:nowrap;
    color:transparent;
    -webkit-text-stroke:1.5px color-mix(in srgb, var(--cream) 55%, transparent);
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
    font-size:clamp(5.5rem,10vw,10.5rem);
    line-height:.9;
    display:block;
    position:absolute;
    top:-.35em;
    left:-.55ch
  }
  html.fx-desktop .hg-slide--tall .hg-word {
    inset:auto -.55ch -.32em auto
  }
  html.fx-desktop .hg-slide--full .hg-word {
    inset:10svh -.6ch auto auto
  }
  html.fx-desktop .hg-caption {
    background:color-mix(in srgb, var(--ink) 88%, transparent);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border:1px solid var(--line);
    z-index:3;
    border-radius:.9rem;
    max-width:min(24rem,88%);
    margin-left:clamp(-2.5rem,-2vw,-1.25rem);
    padding:1.1rem 1.4rem 1.2rem;
    inset:auto auto 0 0;
    transform:translateY(42%)
  }
  html.fx-desktop .hg-slide--full .hg-caption {
    margin-left:0;
    inset:auto auto clamp(2rem,5svh,3.5rem) clamp(1.5rem,3vw,3rem);
    transform:none
  }
  html.fx-desktop .hg-progress {
    z-index:4;
    align-items:center;
    gap:1.4rem;
    display:flex;
    position:absolute;
    bottom:clamp(1.6rem,3.5svh,2.6rem);
    left:clamp(3rem,6vw,6rem);
    right:clamp(3rem,6vw,6rem)
  }
  html.fx-desktop .hg-counter {
    font-family:var(--font-mono);
    letter-spacing:.3em;
    color:var(--cream);
    font-size:.72rem
  }
  html.fx-desktop .hg-counter i {
    color:var(--steel);
    margin-inline:.4em;
    font-style:normal
  }
  html.fx-desktop .hg-bar {
    background:var(--line);
    flex:1;
    height:1px;
    position:relative
  }
  /* Fuellstand wird per GSAP ueber scaleX gesetzt. */
  html.fx-desktop .hg-bar>span {
    background:var(--warm);
    transform-origin:0;
    height:2px;
    position:absolute;
    top:-.5px;
    left:0;
    right:0;
    transform:scaleX(0)
  }

}


/* ==========================================================================
   12 · FORMULAR & KONTAKTBEREICH
   ========================================================================== */

.kontakt-grid {
  gap:4rem;
  display:grid
}

@media (width>=1024px) {
  .kontakt-grid {
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    align-items:start;
    gap:6rem
  }

}

.kontakt-info .display-giant {
  margin-top:1.4rem
}

.kontakt-lead {
  max-width:30rem;
  color:var(--steel);
  margin-top:1.6rem;
  font-size:1.05rem
}

.kontakt-channels {
  gap:1.4rem;
  margin-top:3rem;
  display:grid
}

.kontakt-channel {
  border-top:1px solid var(--line);
  padding-top:1.1rem;
  display:block
}

.kontakt-value {
  font-family:var(--font-display);
  margin-top:.5rem;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:500;
  transition:color .3s;
  display:block
}

.kontakt-value-sm {
  color:var(--steel);
  font-size:1.05rem
}

a.kontakt-channel:hover .kontakt-value {
  color:var(--warm)
}

.kontakt-form {
  border:1px solid var(--line);
  background:var(--coal);
  border-radius:1.25rem;
  gap:1.6rem;
  padding:clamp(1.6rem,3.5vw,2.8rem);
  display:grid
}

/* Hinweis "* Pflichtfeld" ueber dem Formular. */
.form-hint {
  font-family:var(--font-mono);
  letter-spacing:.08em;
  color:var(--mist);
  font-size:.78rem
}

.form-grid {
  gap:1.6rem;
  display:grid
}

@media (width>=640px) {
  .form-grid {
    grid-template-columns:1fr 1fr
  }

}

/* A11y: von .66rem auf .75rem (12px) angehoben. */
.field label {
  font-family:var(--font-mono);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mist);
  margin-bottom:.6rem;
  font-size:.75rem;
  display:block
}

.field input,.field select,.field textarea {
  border:0;
  border-bottom:1px solid var(--line);
  width:100%;
  color:var(--cream);
  font:inherit;
  background:0 0;
  border-radius:0;
  padding:.7rem 0;
  transition:border-color .4s
}

.field textarea {
  resize:none
}

.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--warm);
  outline:none
}

.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible {
  outline:2px solid var(--warm);
  outline-offset:2px
}

/* Die Optionsliste rendert das Betriebssystem — feste Farben sichern die
   Lesbarkeit in beiden Themes. */
.field select option {
  color:#111;
  background:#fff
}

/* Honeypot gegen Spam: fuer Menschen unsichtbar, im HTML zusaetzlich
   aria-hidden und tabindex="-1". */
.hp {
  width:1px;
  height:1px;
  position:absolute;
  top:auto;
  left:-9999px;
  overflow:hidden
}

.field-check {
  align-items:flex-start;
  gap:.8rem;
  display:flex
}

/* A11y: 24px Mindestzielgroesse (SC 2.5.8). */
.field-check input {
  accent-color:var(--warm);
  inline-size:1.5rem;
  block-size:1.5rem;
  flex:none;
  margin-top:.1rem
}

.field-check label {
  color:var(--steel);
  font-size:.88rem
}

.field-check a {
  color:var(--warm);
  text-decoration:underline
}

/* Statusmeldung: liegt dauerhaft als Live-Region im DOM. Solange sie leer
   ist, wird sie wie .sr-only aus dem Layout genommen — so entsteht keine
   Luecke im Formularraster, die Region bleibt aber im Accessibility-Baum. */
#contact-status {
  font-size:.92rem
}

#contact-status:empty {
  clip-path:inset(50%);
  width:1px;
  height:1px;
  position:absolute;
  overflow:hidden
}

#contact-status.ok {
  color:var(--status-ok)
}

#contact-status.err {
  color:var(--status-err)
}


/* ==========================================================================
   13 · FOOTER
   ========================================================================== */

footer {
  background:var(--coal);
  border-top:1px solid var(--line)
}

.footer-inner {
  padding-block:clamp(4rem,9vh,7rem) 2.5rem
}

.footer-claim {
  transition:color .4s;
  display:block
}

.footer-claim:hover {
  color:var(--steel)
}

.footer-claim:hover em {
  color:var(--ember)
}

.footer-meta {
  border-top:1px solid var(--line);
  gap:2rem;
  margin-top:4rem;
  padding-top:2rem;
  display:grid
}

@media (width>=768px) {
  .footer-meta {
    grid-template-columns:1fr 1fr;
    align-items:start
  }

}

@media (width>=1024px) {
  .footer-meta {
    grid-template-columns:1.2fr 1fr 1fr 1.2fr
  }

}

.footer-meta p {
  color:var(--steel);
  margin-top:.5rem;
  font-size:.95rem
}

.footer-meta p a {
  transition:color .3s
}

.footer-meta p a:hover {
  color:var(--cold)
}

/* Notdienst-Hinweis, erste Spalte oberhalb der Adresse. Hoehere
   Spezifitaet als ".footer-meta p", damit Farbe und Abstand greifen. */
.footer-meta .footer-emergency {
  border:1px solid var(--line);
  border-inline-start:2px solid var(--warm);
  border-radius:.6rem;
  color:var(--steel);
  margin-bottom:1.1rem;
  padding:.85rem 1rem;
  font-size:.95rem
}

.footer-meta .footer-emergency strong {
  color:var(--cream);
  font-weight:600;
  display:block
}

.footer-meta .footer-emergency a {
  color:var(--warm);
  text-underline-offset:.2em;
  text-decoration:underline
}

/* Leistungsliste im Footer: als <ul> ausgezeichnet, Optik unveraendert
   (der Abstand nach oben kam vorher von ".footer-meta p"). */
.footer-nav {
  margin-top:.5rem;
  list-style:none
}

.footer-nav a {
  color:var(--steel);
  font-size:.95rem;
  line-height:1.9;
  transition:color .3s;
  display:block
}

.footer-nav a:hover {
  color:var(--cold)
}

.footer-links {
  color:var(--mist);
  flex-wrap:wrap;
  gap:1.5rem;
  font-size:.9rem;
  display:flex
}

.footer-links a {
  transition:color .3s
}

.footer-links a:hover {
  color:var(--cream)
}

@media (width>=768px) {
  .footer-links {
    justify-content:flex-end
  }

}


/* ==========================================================================
   14 · OVERLAYS (Preloader, Cursor, Motion-Toggle, Reveals)
   ========================================================================== */

/* --- Preloader -----------------------------------------------------------
   Nur sichtbar, wenn JS laeuft und keine Bewegungsreduzierung gewuenscht
   ist (html.fx). Der frueher per JS gezeichnete Partikel-Canvas ist
   entfallen; den Bildgedanken - warme Glut unten links, kalte Wasserspur
   oben rechts - uebernehmen jetzt zwei Radialverlaeufe aus der Palette.
   #preloader traegt im HTML .stage-dark, die Tokens sind also die dunklen. */

#preloader {
  z-index:120;
  background:radial-gradient(62% 55% at 4% 106%, color-mix(in srgb, var(--warm) 26%, transparent) 0%, transparent 68%), radial-gradient(58% 52% at 98% -6%, color-mix(in srgb, var(--cold) 20%, transparent) 0%, transparent 66%), var(--ink);
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  padding:clamp(1.5rem,4vw,3.5rem);
  display:none;
  position:fixed;
  inset:0;
  overflow:hidden
}

html.fx #preloader {
  display:flex
}

#preloader .pre-count,#preloader .pre-label {
  position:relative
}

#preloader .pre-count {
  font-family:var(--font-hero);
  color:var(--cream);
  font-variant-numeric:tabular-nums;
  font-size:clamp(5rem,18vw,15rem);
  line-height:.85
}

#preloader .pre-label {
  font-family:var(--font-mono);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--mist);
  padding-bottom:1rem;
  font-size:.7rem
}

/* --- Eigener Mauszeiger --------------------------------------------------
   Nur bei Maus (pointer:fine) und ohne Bewegungsreduzierung. */

#cursor-dot,#cursor-ring {
  z-index:110;
  pointer-events:none;
  border-radius:999px;
  display:none;
  position:fixed;
  top:0;
  left:0;
  translate:-50% -50%
}

/* A11y: heller Kern mit dunklem Konturring statt einfarbigem Punkt — der
   Punkt war auf dunklen Sektionen praktisch unsichtbar (1.5:1). */
#cursor-dot {
  background:rgb(var(--paper-rgb));
  box-shadow:0 0 0 1.5px rgb(var(--night-rgb));
  width:6px;
  height:6px
}

#cursor-ring {
  width:40px;
  height:40px;
  font-family:var(--font-mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:transparent;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), background .35s ease, border-color .35s ease, color .2s ease;
  border:1px solid rgb(var(--chalk-rgb) / 40%);
  justify-content:center;
  align-items:center;
  font-size:.58rem
}

#cursor-ring span {
  pointer-events:none
}

/* Ueber Links und Buttons */
#cursor-ring.is-link {
  border-color:var(--warm);
  background:rgb(var(--glow-warm-rgb) / 12.2%);
  width:64px;
  height:64px
}

/* Ueber Galerie-Slides: das Wort "View" wird sichtbar. */
#cursor-ring.is-view {
  border-color:var(--cold);
  width:84px;
  height:84px;
  color:var(--cold);
  background:rgb(var(--scrim-rgb) / 54.9%)
}

@media (pointer:fine) {
  html.fx #cursor-dot {
    display:block
  }
  html.fx #cursor-ring {
    display:flex
  }
  /* `:has()`-Gate: den echten Mauszeiger nur ausblenden, wenn der Ersatz
     wirklich im DOM steht. Impressum und Datenschutz laden kein GSAP und
     haben keinen Custom-Cursor — dort bliebe sonst gar kein Zeiger uebrig. */
  html.fx:has(#cursor-dot) body,html.fx:has(#cursor-dot) a,html.fx:has(#cursor-dot) button,html.fx:has(#cursor-dot) summary,html.fx:has(#cursor-dot) [data-magnetic] {
    cursor:none
  }
  html.fx input,html.fx textarea,html.fx select {
    cursor:auto
  }

}

/* --- Animationen anhalten (SC 2.2.2) -------------------------------------
   Der Button wird von js/main.js erzeugt und als erstes Body-Element
   eingehaengt (Tab-Reihenfolge), sitzt visuell aber unten links. */

.motion-toggle {
  z-index:90;
  font-family:var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream);
  background:var(--coal);
  border:1px solid var(--line);
  cursor:pointer;
  border-radius:999px;
  padding:.5rem .9rem;
  font-size:.68rem;
  position:fixed;
  bottom:1rem;
  left:1rem
}

.motion-toggle:hover {
  border-color:var(--warm)
}

html.motion-paused * {
  animation-play-state:paused!important
}

/* --- Scroll-Reveals ------------------------------------------------------
   Startzustand nur unter html.fx; ohne JS ist alles sofort sichtbar.
   --reveal-delay setzt js/main.js pro Element. */

[data-reveal] {
  transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay:var(--reveal-delay,0s)
}

html.fx [data-reveal] {
  opacity:0;
  transform:translateY(28px)
}

html.fx [data-reveal].is-visible {
  opacity:1;
  transform:none
}


/* ==========================================================================
   15 · REDUCED MOTION
   Gilt zusaetzlich zum JS: bei prefers-reduced-motion setzt js/main.js
   weder .fx noch .fx-desktop, startet kein Lenis, keinen Preloader und
   keine GSAP-Choreografie. Hier bleiben die rein per CSS laufenden
   Bewegungen uebrig.
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {
  .marquee,.scroll-line {
    animation:none
  }
  .hg-media,.hg-media img,.hg-media video {
    transition:none
  }
  [data-reveal] {
    opacity:1!important;
    transform:none!important
  }

}