/* =====================================================================
   IWZ ecoprojects — main.css
   "Future Circular": premium, futuristic, clean. Glass + mesh-gradient +
   glow, soft-rounded. Fully themeable (dark default + light). Every colour
   is a token so the theme toggle inverts cleanly — never hardcode #fff/rgba
   that bypasses the tokens.
   ===================================================================== */

/* ----------------------------------------------------------------- TOKENS */
:root,
:root[data-theme="dark"] {
  /* surfaces — cool blue-grey-black (the palette the client liked) */
  --bg:        #0b1116;
  --bg-2:      #0e151b;
  --bg-3:      #111a21;
  --card:      #121b22;
  --card-2:    #16212a;
  --glass-bg:      rgba(255, 255, 255, 0.045);
  --glass-bg-2:    rgba(255, 255, 255, 0.06);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-hi:      rgba(255, 255, 255, 0.16);
  --line:      rgba(255, 255, 255, 0.09);
  --line-2:    rgba(255, 255, 255, 0.05);

  /* text */
  --text:      #eef3f1;
  --text-dim:  #a3b4af;
  --text-faint:#6d807b;
  --on-brand:  #ffffff;

  /* brand — green CI (stays per client) + a luminous signal green for glow */
  --brand:        #046a38;   /* IWZ CI: Pantone 349 C, RGB 4/106/56, WEB 046A38 (CD-Manual V5) */
  --brand-2:      #034d28;
  --brand-bright: #0f8c49;   /* CI-Gruen leicht angehoben fuer Lesbarkeit auf Dunkel */
  --brand-soft:   #86bda2;
  --teal:         #2f9a6f;
  --brand-glow:   rgba(15, 140, 73, 0.18);
  --brand-tint:   rgba(15, 140, 73, 0.10);

  /* gradient atmospheres — very subtle */
  --mesh-1: rgba(58, 120, 78, 0.10);
  --mesh-2: rgba(60, 130, 120, 0.06);
  --mesh-3: rgba(110, 130, 150, 0.05);

  --shadow:    0 26px 64px -32px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 12px 30px -20px rgba(0, 0, 0, 0.5);
  --glow:      0 22px 50px -30px rgba(0, 0, 0, 0.55);

  --ci-grau:   #b2b4b2;   /* IWZ CI: Pantone 421 C (CD-Manual V5) */
  --grid-line: rgba(255, 255, 255, 0.028);

  /* geometry — soft rounded (less angular, per Nils) */
  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --pill:      999px;

  --container: 1240px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* --font-body injected by _layout_head from global.fontFamily (IBM Plex Sans) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  --bg:        #f3f7f4;
  --bg-2:      #ffffff;
  --bg-3:      #eef3ef;
  --card:      #ffffff;
  --card-2:    #f6faf7;
  --glass-bg:      rgba(255, 255, 255, 0.70);
  --glass-bg-2:    rgba(255, 255, 255, 0.85);
  --glass-border:  rgba(16, 42, 28, 0.10);
  --glass-hi:      rgba(255, 255, 255, 0.95);
  --line:      rgba(16, 42, 28, 0.12);
  --line-2:    rgba(16, 42, 28, 0.07);

  --text:      #0e1a14;
  --text-dim:  #43564d;
  --text-faint:#73857c;
  --on-brand:  #ffffff;

  --brand:        #046a38;   /* IWZ CI (CD-Manual V5) */
  --brand-2:      #034d28;
  --brand-bright: #046a38;   /* auf Hell der echte CI-Ton */
  --brand-soft:   #0a7a42;
  --teal:         #1e8268;
  --brand-glow:   rgba(4, 106, 56, 0.12);
  --brand-tint:   rgba(4, 106, 56, 0.07);

  --mesh-1: rgba(58, 130, 80, 0.08);
  --mesh-2: rgba(60, 140, 120, 0.05);
  --mesh-3: rgba(120, 150, 140, 0.05);

  --shadow:    0 26px 56px -34px rgba(20, 50, 35, 0.18);
  --shadow-sm: 0 12px 28px -20px rgba(20, 50, 35, 0.12);
  --glow:      0 22px 46px -30px rgba(20, 50, 35, 0.20);

  --grid-line: rgba(16, 42, 28, 0.035);
}

/* Always-dark surfaces (photo bands) — own tokens regardless of page theme.
   Hero + header follow the page theme since Feedback-Runde 1 (Dark-Start). */
.invert-dark {
  --bg: #0b1116; --bg-2: #0e151b; --bg-3: #111a21;
  --card: #121b22; --card-2: #16212a;
  --glass-bg: rgba(255,255,255,0.06); --glass-bg-2: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.14); --glass-hi: rgba(255,255,255,0.18);
  --line: rgba(255,255,255,0.13); --line-2: rgba(255,255,255,0.07);
  --text: #f1f5f3; --text-dim: #b4c2bd; --text-faint: #82948e; --on-brand: #ffffff;
  --brand-bright: #0f8c49; --brand-soft: #86bda2;
  --brand-glow: rgba(15,140,73,0.18); --brand-tint: rgba(15,140,73,0.12);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Lenis required styles — without these, html{scroll-behavior:smooth} fights
   Lenis' per-frame scrollTo and the page freezes. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* HARD RULE: never 'hidden' on the scroll path — would steal scroll from Lenis */
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }
/* Ankerziele halten Abstand zur festen Kopfzeile — greift auch ohne JS. */
section[id] { scroll-margin-top: 96px; }

/* Michael 07.09.2026: „koennten wir das als Hintergrund nehmen?" — sein
   unkenntlich gemachtes Verfahrensschema hinter dem Kompetenz-Abschnitt.
   Bewusst sehr leise (weisse Linien auf Dunkel, 9 % Deckung) und nach unten
   ausgeblendet, damit der Text vorne bleibt; im Hellmodus invertiert, sonst
   verschwindet die Zeichnung. Unter 1024 px aus — dort waere sie nur Grieseln. */
/* overflow:clip, weil die Hintergrundflaeche bewusst ueber die Sektion
   hinausragt (sonst zeigt die Unschaerfe eine helle Kante). clip statt hidden:
   hidden wuerde die Sektion zu einem Scroll-Behaelter machen und Lenis den
   Seitenscroll wegnehmen. Gemessen: ohne das lief die Seite 58 px zu breit. */
#kompetenzen { position: relative; isolation: isolate; overflow: clip; }
#kompetenzen::before {
  content: ""; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none;
  /* Nils 07.09.: vollflaechig hinter dem ganzen Abschnitt, schwaecher und
     verschwommen — es soll Tiefe geben, nicht mitgelesen werden. Der Rahmen
     ragt ueber die Sektion hinaus, damit die Unschaerfe keine helle Kante
     an den Raendern stehen laesst. */
  background: url("/uploads/iwz-prozessschema.webp") no-repeat center center;
  background-size: cover;
  opacity: 0.05;
  filter: blur(3px);
}
:root[data-theme="light"] #kompetenzen::before { filter: invert(1) blur(3px); opacity: 0.07; }
@media (max-width: 1023px) { #kompetenzen::before { display: none; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}

::selection { background: var(--brand-bright); color: var(--on-brand); }

/* ----------------------------------------------------------- ATMOSPHERE BG */
/* Mesh / aurora gradient field + faint tech grid, fixed behind everything. */
.site-atmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(55% 48% at 84% 2%,  var(--mesh-1) 0%, transparent 62%),
    radial-gradient(42% 42% at 6% 12%,  var(--mesh-2) 0%, transparent 60%),
    radial-gradient(80% 52% at 50% 114%, var(--mesh-3) 0%, transparent 62%);
  animation: atmosDrift 30s ease-in-out infinite alternate;
  will-change: transform;
}
.site-atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
}
@keyframes atmosDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .site-atmos { animation: none; } }

/* film grain overlay (very subtle, organic) */
.site-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- LAYOUT */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  position: relative;
  padding-block: clamp(5rem, 9vw, 9rem);
}
.section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
/* CTA band directly after a section: the preceding section's bottom padding is the gap.
   After an --alt (tinted) section the tint ends hard, so keep breathing room. */
.section + .section--tight { padding-block-start: 0; }
/* Ueber dem Abschlussband stand mehr Luft als darunter (gemessen 130 gegen 85 px,
   Nils 07.09.: „oben ist zu viel"). Die Sektion davor bekommt denselben unteren
   Abstand wie das Band selbst. */
.section:has(+ .section--tight) { padding-block-end: clamp(3.5rem, 6vw, 6rem); }
.section--alt + .section--tight { padding-block-start: clamp(2.5rem, 5vw, 4rem); }
/* Transparent so the fixed site grid/atmosphere shows through behind every
   section (Nils: grid should be visible everywhere, incl. Leistungen/Kompetenzen).
   Content cards keep their own surfaces, so they still read clearly. */
.section--alt { background: transparent; }

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

/* section head ------------------------------------------------------------ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-bright);
}
.kicker::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: linear-gradient(90deg, var(--brand-bright), transparent);
}
.section-head { max-width: 56rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker::before { display: none; }
.section-title {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
  margin-top: 1.1rem;
}
.section-intro {
  margin-top: 1.1rem;
  color: var(--text-dim);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  max-width: 44rem;
}
.section-head--center .section-intro { margin-inline: auto; }

.text-grad {
  color: var(--brand-bright);
  background: linear-gradient(
    100deg,
    var(--brand) 0%,
    var(--brand-bright) 40%,
    #2fbf72 52%,
    var(--brand-bright) 64%,
    var(--brand) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradSheen 8s ease-in-out infinite;
}
@keyframes gradSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .text-grad {
    animation: none;
    -webkit-text-fill-color: var(--brand-bright);
    color: var(--brand-bright);
  }
}

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  --btn-bg: var(--brand);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);           /* soft rounded, not sharp */
  border: 1px solid transparent;
  background-origin: border-box;   /* gradient fills under the border — no flipped edge lines */
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--brand-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--text-dim);
  color: var(--text);
  transform: translateY(-2px);
}
.btn--lg { padding: 1rem 1.8rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn__icon { transition: transform 0.35s var(--ease); }
.btn:hover .btn__icon--right { transform: translateX(4px); }

/* ----------------------------------------------------------------- HEADER */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease),
              border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 0.6rem;
}
/* Nils 09.09.2026: Auf der Startseite steht die Navigationsleiste von Anfang an
   als Leiste da — nicht erst beim Scrollen. Das Bildband beginnt darunter mit
   einer geraden Kante; ohne Leiste sah das wie abgeschnittene Fotos aus. Die
   Werte sind dieselben wie bei .header--scrolled, die Hoehe bleibt 76,2 px
   (Innenabstand + 56 px + 1 px Linie = --kopf-h im Hero). */
body.is-home .header {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
:root[data-theme="light"] .header .ctrl {
  background: color-mix(in srgb, #ffffff 70%, transparent);
  border-color: rgba(16, 42, 28, 0.22);
}
.header--scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
}
.header__nav { display: flex; align-items: center; gap: 0.35rem; }
.header__nav-link {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
  color: var(--text-dim);
  border-radius: var(--pill);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.header__nav-link::after {
  content: "";
  position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.32rem;
  height: 1.5px; border-radius: 2px;
  background: var(--brand-bright);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.header__nav-link:hover { color: var(--text); }
.header__nav-link:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 0.5rem; }

/* theme + lang controls */
.ctrl {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; min-width: 38px; padding: 0 0.5rem;
  border-radius: var(--pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-dim);
  font-size: 0.8rem; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.ctrl:hover { color: var(--text); border-color: var(--brand-bright); transform: translateY(-1px); }
.lang-switch { font-family: var(--font-mono); letter-spacing: 0.04em; gap: 0.15rem; }
.lang-switch__sep { opacity: 0.4; }
.lang-switch__opt { color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
.lang-switch__opt:hover { color: var(--text); }
.lang-switch__on { color: var(--brand-bright); font-weight: 700; }
.lang-switch:hover { border-color: var(--brand-bright); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
/* light mode: darker contrast on header controls (moon icon + inactive lang opt) */
:root[data-theme="light"] .ctrl { color: var(--text); }
:root[data-theme="light"] .lang-switch__opt { color: var(--text); }

/* logo */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 38px; height: 38px; flex: none; }
/* Real logo image — keep OG aspect ratio (height set, width auto). */
/* Grundhoehe 48 px: 05./06.09. 52 → 44 → 38 (Nils), 14.09. zurueck auf 48, weil der Kunde
   „Logo zu klein" gemeldet hat (fb_5069d7e80f1e). Bleibt unter den 56 px der Kopfzeile.
   Seit 18.09. skalierbar aus dem Redaktionsbereich: --logo-skala (Web) und
   --logo-skala-handy (Handy), 100 = Grundhoehe. */
.brand__logo { height: calc(48px * var(--logo-skala, 1)); width: auto; flex: none; display: block; }
.footer .brand__logo { height: 72px; } /* 14.09.: 56 → 72, Kunde „größer bitte" (fb_011bb6dcbcb6) */
/* Dual-surface swap: white logo on dark surfaces (default), colour logo on light.
   Header is always dark at the top; when scrolled in light theme it turns light,
   and the footer follows the page theme. */
.brand__logo--color { display: none; }
:root[data-theme="light"] .header--scrolled .brand__logo--white,
:root[data-theme="light"] body.is-sub .header .brand__logo--white,
:root[data-theme="light"] .footer .brand__logo--white { display: none; }
:root[data-theme="light"] .header--scrolled .brand__logo--color,
:root[data-theme="light"] body.is-sub .header .brand__logo--color,
:root[data-theme="light"] .footer .brand__logo--color { display: block; }

:root[data-theme="light"] body.is-home .header:not(.header--scrolled) .brand__logo--white { display: none; }
:root[data-theme="light"] body.is-home .header:not(.header--scrolled) .brand__logo--color { display: block; }
:root[data-theme="light"] body.is-home .header:not(.header--scrolled) .header__nav-link { color: #0b1116; }
:root[data-theme="light"] body.is-home .header:not(.header--scrolled) .header__nav-link:hover { color: #0b1116; }
/* Home hero header scopes --text to near-white (built for a dark hero); on the
   light hero the moon icon + inactive lang opt must read as dark literals, not var(--text). */
:root[data-theme="light"] body.is-home .header:not(.header--scrolled) .ctrl,
:root[data-theme="light"] body.is-home .header:not(.header--scrolled) .lang-switch__opt { color: #0b1116; }
:root[data-theme="light"] body.is-home .header:not(.header--scrolled) .lang-switch__on { color: #046a38; }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__word-iwz {
  font-family: var(--font-display); font-weight: 900; font-size: 1.32rem;
  letter-spacing: 0.02em; color: var(--text);
}
.brand__word-sub {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: lowercase; color: var(--brand-bright); margin-top: 2px;
}

.header__burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  align-items: center; justify-content: center;
}
.header__burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text); position: relative;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.header__burger span::before, .header__burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  border-radius: 2px; background: var(--text);
  transition: transform 0.3s var(--ease);
}
.header__burger span::before { top: -6px; }
.header__burger span::after  { top: 6px; }
.header__burger[aria-expanded="true"] span { background: transparent; }
.header__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.header__burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* mobile sheet — CLOSED must be non-interactive (hard rule) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.4rem; padding: 6rem var(--gutter) 3rem;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu__link {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: -0.02em;
  color: var(--text); padding: 0.4rem 0;
  border-bottom: 1px solid var(--line-2);
}
.mobile-menu__link:last-of-type { border-bottom: 0; }
/* Kein Trennstrich zwischen einem Menuepunkt und seiner eigenen Unterliste
   (Michael Zwanzger, Anmerkung fb_bd71207badd5: „der duenne horizontale strich
   unter leistungen im burger menu auf mobil kann weg"). Die Striche zwischen
   den Hauptpunkten bleiben. */
.mobile-menu__link:has(+ .mobile-menu__sub) { border-bottom: 0; }
.mobile-menu__cta { margin-top: 1.6rem; }

/* ------------------------------------------------------------------- HERO */
/* Hero v2 (Mockup #2 "Engineering – Planung und Realität"): text left,
   triptych Plan → Anlage → Rezyklat right, phase bar below. Follows the theme. */
.hero {
  --schraeg: clamp(70px, 9vw, 150px);   /* Versatz der Schnittkanten von oben nach unten (Band + Phasenleiste) */
  --hero-pad: clamp(1.5rem, 4.5vw, 4.5rem); /* Innenabstand von .hero__inner, die Phasenleiste rechnet damit */
  /* rechte Kante der Textspalte (Innenabstand + Einzug + Spaltenbreite von .hero__content).
     Das Bildband beginnt seit 09.09.2026 rechts davon mit einer sauberen Kante:
     Nils: „vorne einfach erstes Bild CAPEX, ein Clean Cut anstatt Gradient und gleiche
     Groesse wie die anderen zwei und drei" — die Schrift steht nicht mehr im Verlauf. */
  --hero-spalte: min(36rem, 44vw - 0.88 * var(--hero-pad));   /* = max-width von .hero__content */
  --hero-textrand: calc(var(--hero-pad) + clamp(0.5rem, 4.5vw, 4.5rem) + var(--hero-spalte));
  /* Nils 09.09. (zweite Runde): „alles ein bisschen weiter nach links, groesser,
     nicht so viel Platz zwischen Text und Bildern". Die Schnittkante ist schraeg:
     auf Hoehe der letzten Textzeile (Formel, rund 60 % der Bandhoehe) steht sie
     0,4 Schraegen rechts der Bandkante. Das Band rutscht um diese Strecke plus
     --hero-luft UNTER die Textspalte. --hero-luft ist der Spielraum, den die
     Spalte gegenueber dem laengsten unteren Text (Formelzeile, rund 34rem samt
     Einzug) uebrig hat: bei voller Spalte (36rem) 2rem, bei schmalen Rechnern,
     wo 44vw die Spalte begrenzt, negativ — dann weicht das Band nach rechts aus.
     Gemessen bleibt so ueberall Abstand: Formelzeile 27–45 px, Ueberschrift
     60–90 px. Die untere Textgruppe ist zusaetzlich auf Spalte minus Luft
     begrenzt (siehe .hero__content--unten), damit auch laengerer CMS-Text nie
     in die Kante laeuft. */
  --hero-luft: clamp(-1rem, calc(var(--hero-spalte) - 34rem), 2rem);
  --hero-band-links: max(27%, calc(var(--hero-textrand) - var(--schraeg) * 0.4 - var(--hero-luft)));
  /* Hoehe der festen Kopfzeile: .header padding-block 0.6rem + 1px + .header__inner
     min-height 56px (gemessen 76,2 px bei 1100–1920). Das Bildband beginnt erst
     darunter — die Fotos sollen nicht in Logo und Navigation hineinragen
     (IWZ, Anmerkung fb_1d45bafee22c, 08.09.2026). */
  --kopf-h: calc(56px + 1.2rem + 1px);
  --hero-pb: clamp(2rem, 4vh, 3rem);   /* Innenabstand unten; die Phasenleiste rechnet damit */
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh;
  padding: clamp(8rem, 16vh, 10.5rem) 0 var(--hero-pb);
  isolation: isolate;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -16rem; height: 20rem;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--bg) 30%, transparent) 35%,
    color-mix(in srgb, var(--bg) 72%, transparent) 65%,
    var(--bg) 92%);
}
.hero__glow {
  position: absolute; left: 0; right: 0; top: 0; bottom: -16rem; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 92%);
  background:
    radial-gradient(60% 55% at 78% 30%, var(--brand-glow), transparent 70%),
    radial-gradient(40% 40% at 8% 92%, var(--mesh-2), transparent 70%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: none; padding-inline: var(--hero-pad); }
.hero__grid { display: block; }
.hero__content { position: relative; z-index: 2; max-width: min(36rem, 44%); min-width: 0; margin-left: clamp(0.5rem, 4.5vw, 4.5rem); }
/* weiche dunkle Flaeche nur hinter dem Text: haelt die Schrift ruhig, ohne die
   Fotos daneben abzudunkeln */
@media (max-width: 1024px) { .hero__content { max-width: 38rem; } }
.hero__kicker { margin-bottom: 1.4rem; letter-spacing: 0.22em; }
.hero__title {
  font-size: clamp(2.5rem, 1rem + 3.5vw, 4.3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.04;
  padding-top: 0.06em;
  text-wrap: balance;
}
/* Die Ueberschrift traegt ihren Farbverlauf ueber `background-clip: text`. Gemalt
   wird der Verlauf nur INNERHALB des Kastens — was darunter hinausragt, bleibt
   ungefaerbt und damit unsichtbar. Bei `line-height: 1.04` ragen die Unterlaengen
   von y und g rund 0,03 em unter die Unterkante der letzten Zeile und waren
   deshalb abgeschnitten. Der Innenabstand verlaengert die gemalte Flaeche nach
   unten, der gleich grosse negative Aussenabstand nimmt ihn aus dem Umbruch
   wieder heraus — die Zeilenabstaende bleiben also unveraendert. */
.hero__title .text-grad {
  display: inline-block;
  /* 0,06 em waren zu wenig: Michael und Nils melden am 07.09.2026 weiterhin
     abgeschnittene Unterlaengen. Gemessen ragte der Kasten des Verlaufs nur
     4 px unter die Ueberschrift, die Schwanz von y und g brauchen bei 68,8 px
     Schrift rund 14 px. 0,20 em decken das mit Reserve; der gleich grosse
     negative Aussenabstand haelt den Zeilenabstand unveraendert. */
  padding-bottom: 0.20em;
  margin-bottom: -0.20em;
}
.hero__sub {
  margin-top: 1.5rem; max-width: 31rem;
  color: var(--text-dim);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.6;
}
.hero__statement {
  margin: 1.2rem 0 0; max-width: 31rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.12rem);
  line-height: 1.45; letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.hero__statement::before {
  content: ""; display: block; width: 34px; height: 2px; border-radius: 2px;
  background: var(--brand-bright); margin-bottom: 0.8rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
/* Formel-Zeile unter den Schaltflaechen: keine Kapsel, kein Punkt (Nils 05.09.:
   „sieht generisch AI aus") — eine ruhige typografische Zeile im Stil des
   Kickers oben: IWZ als Wortmarke, die Operatoren im CI-Gruen, die Begriffe in
   der gesperrten Mono-Schrift. */
.hero__formula {
  margin: 1.9rem 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 0.7rem; row-gap: 0.35rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}
.hero__formula__mark {
  font-family: var(--font-display); font-weight: 900; font-size: 1.05rem;
  letter-spacing: 0.02em; text-transform: none; color: var(--text);
  padding-right: 0.15rem;
}
.hero__formula__op { color: var(--brand-bright); font-weight: 600; font-size: 0.82rem; }

/* Bildband — durchgehend bis zum rechten Rand (Mockup #2, von IWZ gewaehlt):
   Plan, laufende Anlage und Rezyklat stossen ohne Fuge aneinander, ueber die
   volle Hoehe des Hero. Der Verlauf links haelt den Text lesbar. */
.hero__band {
  position: absolute; z-index: 0;
  top: var(--kopf-h); right: -2px; bottom: -16rem;
  left: var(--hero-band-links);
  display: grid;
  /* Spaltenbreiten so gewaehlt, dass die drei SICHTBAREN Keile gleich breit sind
     (v = (Band - Schraege/2) / 3): das erste Panel verliert eine ganze Schraege
     (links UND rechts schraeg), das mittlere durch die Ueberlappung netto nichts,
     das letzte im Mittel eine halbe. Seit 07.09.2026 ist das erste Motiv die
     CAPEX-Besprechung (Wunsch IWZ „ganz links"), die Planzeichnung ist dafuer
     aus dem Band genommen. Seit 07.09.2026 abends sind es VIER Motive
     (Michael Zwanzger im Anmerkungs-Layer: „Bitte 4. Bild einfuegen und alles
     in SW"): Konzept, Realisierung, stabiler Betrieb, Rezyklat — je ein Foto
     pro Phase der Leiste darunter. Die Rechnung bleibt dieselbe, nur durch
     vier statt durch drei geteilt. */
  grid-template-columns:
    calc((100% - var(--schraeg) / 2) / 4 + var(--schraeg))
    calc((100% - var(--schraeg) / 2) / 4)
    calc((100% - var(--schraeg) / 2) / 4)
    calc((100% - var(--schraeg) / 2) / 4 - var(--schraeg) / 2);
}
/* Schraege Schnitte zwischen den Motiven, in der Neigung der IWZ-Bildmarke.
   Die Panels ueberlappen sich um den Versatz, der Zuschnitt macht die Diagonale. */
.hero__panel {
  clip-path: polygon(var(--schraeg) 0, 100% 0, calc(100% - var(--schraeg)) 100%, 0 100%);
}
/* aussen: das erste Foto ist auch links schraeg geschnitten (Nils 05.09.: kein
   gerader Cut) und laeuft im Verlauf aus; das letzte laeuft rechts ueber den
   Bildschirmrand hinaus und bleibt dort gerade. */
.hero__panel:last-of-type  { clip-path: polygon(var(--schraeg) 0, 100% 0, 100% 100%, 0 100%); }
.hero__panel + .hero__panel { margin-left: calc(var(--schraeg) * -1); }
/* Das erste Foto war bis 08.09.2026 nach links unter den Text verlaengert und lief
   dort im Verlauf aus. Seit 09.09.2026 (Nils) steht es wie die anderen mit einer
   sauberen Diagonalkante rechts neben dem Text — gleiche Keilbreite wie 2 und 3. */
/* Trennlinie zwischen den Motiven: feiner Strich im CI-Gruen, der oben und
   unten transparent auslaeuft, dazu ein weicher Schatten fuer die Tiefe. */
.hero__panel + .hero__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 12, 9, 0.42) 0, transparent calc(var(--schraeg) * 1.3));
}
.hero__panel {
  position: relative; margin: 0; overflow: hidden;
}
.hero__panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Bildausschnitt je Panel: rechtes Motiv sitzt rechtsbuendig, sonst wird der
   Guss mittig angeschnitten. Der Plan haengt OBEN an, damit die Silos auf keiner
   Bildschirmhoehe unter der Navigation verschwinden (unten liegt ohnehin der
   Verlauf). Das Hallenfoto ist seit 05.09. aus der MITTE des Originals geschnitten
   (Fenster 22-80 %, Nils: „Ausschnitt weiter nach rechts, in der Mitte vom Bild"),
   das Foerderband laeuft damit parallel zu den Schnittkanten durch den Keil. */
.hero__panel--right img { object-position: 38% 50%; }
.hero__panel--left img  { object-position: 0% 50%; }
/* Erstes Motiv seit 07.09.2026: die Besprechung mit der CAPEX-Liste. Das Panel
   ist nach links verlaengert und laeuft dort im Verlauf aus — der Zeiger auf der
   Liste muss deshalb in der RECHTEN, voll sichtbaren Haelfte des Keils stehen. */
/* Michael Zwanzger 07.09.2026 (fb_c95e8601c8a2): „so verschieben, dass man die
   Investsummen nicht sieht". Die Spalten mit den Betraegen liegen rechts auf
   dem Blatt; der Keil zeigt jetzt die Ueberschrift und die Massnahmenspalte,
   die Zahlen stehen ausserhalb. */
/* Nils 09.09.2026: „CAPEX muss zu sehen sein auf Bild 1" — und die Investitions-
   zahlen auf gar keinen Fall. Beides zusammen geht nur mit dem retuschierten
   Foto (Spalten Investition/Laufzeit leer, siehe _vorher/…-vor-retusche.webp);
   der Ausschnitt setzt das Wort CAPEX in die Mitte des sichtbaren Keils. Die
   Ueberschrift liegt bei 40 % der Bildhoehe, dort steht die Schnittkante
   0,6 Schraegen rechts der Bandkante; 57 % trifft die Wortmitte von 1280 bis
   2560 px (gerechnet 0,56–0,58) und am Handy (0,59). */
.hero__panel--capex img { object-position: 53% 50%; }
/* zusaetzlich etwas zurueckgenommen, damit es sich neben Plan und Halle einfuegt */
.hero__panel--plan img  {
  /* rechts verankert: die rechte Bildkante ist die Schnittlinie zum Hallenfoto,
     der Ueberhang liegt links unter dem Verlauf. Oben laeuft die Zeichnung weich
     aus, damit der Foerderkopf unter der Navigation nicht hart abgeschnitten
     wirkt (Nils 05.09.: hoeher setzen bzw. von oben ausblenden). */
  object-position: 100% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.55) 8%, #000 15%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.55) 8%, #000 15%);
}
/* Michael Zwanzger 07.09.2026 (fb_df4931d6b839): „nach links schieben, damit
   man das Foerderband auch sieht". Das Band mit dem Sortiergut liegt im linken
   Drittel der Aufnahme und war aus dem Keil geschnitten. */
.hero__panel--mitte img { object-position: 62% 46%; }
/* Drittes Motiv seit 07.09.2026 (Michael Zwanzger im Anmerkungs-Layer,
   fb_a04552f13a1c: „Bitte ersetzen durch das Silhouette Bild siehe
   leistungen"): dieselbe freigestellte Anlagenzeichnung, die im Bildband der
   Leistungsseite steht. Sie wird wie dort GANZ gezeigt statt angeschnitten —
   `cover` wuerde im schmalen Keil nur einen Streifen Linien uebrig lassen —
   und steht auf derselben dunklen Platte, damit die hellen Linien tragen.
   Die Schwarzweiss-Regel des Bandes (--photo, weiter unten) gilt mit. */
.hero__panel--silhouette { background: #0b1116; }
/* Nils 07.09.2026: „das zweite Bild mittiger, bisschen weiter Ausschnitt
   rechts, damit links das Blaue verschwindet." Mit `contain` blieb rund um die
   Zeichnung die dunkle Platte stehen — im angeschnittenen Keil las sich das
   als blaue Flaeche links. Jetzt fuellt die Zeichnung den Keil wie die drei
   Fotos daneben; der Ausschnitt sitzt etwas rechts der Mitte, damit die Anlage
   und nicht der leere Bildrand im sichtbaren Teil steht. Schwarzweiss kommt
   von der --photo-Regel, gilt hier ausdruecklich mit. */
.hero__panel--silhouette img {
  object-fit: cover;
  object-position: 58% 50%;
  padding: 0;
  filter: grayscale(1) brightness(0.94) contrast(1.08);
}
/* Michael Zwanzger 07.09.2026 im Anmerkungs-Layer: „alles in SW". Seither
   liegen ALLE Motive des Bandes in Schwarzweiss — vorher war nur die
   CAPEX-Besprechung entfaerbt und die drei anderen standen farbig daneben.
   Der leichte Kontrastzuschlag haelt die Halle plastisch, die Helligkeits-
   ruecknahme verhindert, dass die helle Rezyklat-Aufnahme ausbrennt. */
.hero__panel--photo img { filter: grayscale(1) brightness(0.88) contrast(1.06); }
/* Michael Zwanzger 08.09.2026 (fb_356ba435cb59): „alle 4 Bilder, eher als
   Wasserzeichen, dzt. sehr unruhiger Hintergrund". Am Rechner liegen die vier
   Motive deshalb als leises Wasserzeichen hinter dem Hero — entsaettigt, mit
   wenig Deckung und ohne harte Lichter; erst beim Ueberfahren kommt das
   einzelne Motiv zurueck (Nils 09.09.). Am Handy bleibt das Band ein eigener
   Streifen mit vollen Bildern (Entscheidungen vom 06.09.). Die Deckung liegt
   auf der ganzen Figur, damit auch die dunkle Platte der Zeichnung mitgeht. */
@media (min-width: 1025px) {
  .hero__panel {
    opacity: 0.36;
    transition: opacity 0.6s var(--ease);
  }
  .hero__panel img { filter: grayscale(1) brightness(0.9) contrast(0.92); }
  .hero__panel:hover { opacity: 0.9; }
  /* Nils 09.09.: „die Tasse oben weg, das Blatt mehr zentriert". Das Foto ist
     seit 09.09. oben um die Tasse beschnitten (1092×1134). Am Rechner fuellt
     es den Keil nur zu 84 % und haengt oben an — der Rest liegt unter der
     Ausblendung am unteren Rand (unterhalb der ersten Bildschirmseite bis
     2560×1440). So rueckt das Blatt nach oben in die Mitte, ohne dass das Foto
     so stark waechst, dass CAPEX nicht mehr in den Keil passt (Wort bei 1920:
     244 px im 305-px-Fenster; bei 1536 gerade noch ganz, darunter angeschnitten). */
  /* Nils 14.09.: das CAPEX-Foto nach oben, damit der gedruckte Claim
     oberhalb von 01 bleibt. Die Phasenleiste behaelt ihre Position. */
  .hero__panel--capex img {
    height: 84%; object-position: 53% 0;
    transform: translateY(calc(-1 * clamp(2rem, 6vh, 5rem)));
  }
  :root[data-theme="light"] .hero__panel { opacity: 0.28; }   /* Nils 09.09.: im Hellmodus etwas weniger Schleier, subtil (vorher 0.22) */
  :root[data-theme="light"] .hero__panel img { filter: grayscale(1) brightness(1.06) contrast(0.9); }
  :root[data-theme="light"] .hero__panel:hover { opacity: 0.7; }
  /* Im Hellmodus faellt die dunkle Platte der Zeichnung als grauer Block aus der
     Reihe; die freigestellte Zeichnung wird stattdessen invertiert (dunkle Linien
     auf Hell) und steht damit wie die drei Fotos als graues Wasserzeichen da.
     Der Schattensaum an den Schnitten entfaellt dort ebenfalls. */
  :root[data-theme="light"] .hero__panel--silhouette { background: transparent; }
  :root[data-theme="light"] .hero__panel--silhouette img { filter: grayscale(1) invert(1) contrast(0.9); }
  :root[data-theme="light"] .hero__panel + .hero__panel::before { background: none; }
  /* Der Text liegt ueber dem Band; damit die Fotos das Ueberfahren mitbekommen,
     laesst der Inhaltsrahmen Zeiger durch, nur Text und Phasenleiste fangen sie. */
  .hero__inner { pointer-events: none; }
  .hero__content, .hero__phases { pointer-events: auto; }
  /* Schutz fuer die Schnittkante: Aussage, Schaltflaechen und Formel bleiben
     um Luft plus 1,5rem schmaler als die Spalte — laengerer Text bricht um,
     statt unter das erste Foto zu laufen. */
  .hero__content--unten { max-width: calc(min(36rem, 44%) - max(0px, var(--hero-luft)) - 1.5rem); }
}
/* Plan-Panel: das Bild ist bereits eine technische Zeichnung, daher nur ein
   leichter Farbangleich an die Hausfarbe statt eines zweiten Rasters. */
.hero__panel--plan img { filter: saturate(0.85) contrast(1.05); }
/* Der Plan liegt seit 05.09. als FREIGESTELLTE Zeichnung vor (Alpha statt
   dunklem Bildgrund, Rezept: alpha = max(r,g,b), Farbe entmultipliziert).
   Vorher zeichnete der eigene Bildgrund (#030507) gegen den Seitengrund einen
   sichtbaren Kasten unter dem Verlauf (Nils: komischer Kastenverlauf).
   Im Hellmodus werden die hellen Linien invertiert, damit sie auf Weiss stehen;
   hue-rotate holt das Gruen zurueck. */
:root[data-theme="light"] .hero__panel--plan img { filter: invert(1) hue-rotate(180deg) saturate(0.9) contrast(1.05); }
/* Band-Scrim: unten laeuft das Band in den Seitenhintergrund aus, oben liegt
   ein leichter Schleier unter der Navigation. Der linke Verlauf sitzt seit
   05.09. als Maske am ersten Panel (siehe .hero__panel:first-of-type). */
.hero__band-scrim {
  /* Der untere Verlauf reicht seit 07.09. ueber die Verlaengerung des Planbildes
     hinaus bis an den LINKEN Bildschirmrand (Nils 07.09.: „die blaue Kante muss
     bis links an den Screen gehen"). Zwei Gruende: erstens lag der Verlauf im
     Band doppelt (Panelmaske UND Scrim), links davon einfach — daher die
     senkrechte Stufe an der Bandkante; zweitens deckt der Scrim den Schein von
     .hero__glow ab, sodass seine eigene linke Kante sichtbar wurde. Die Rechnung:
     Bandbreite (100 %) minus Fensterbreite ergibt genau den Abstand zur linken
     Bildschirmkante. */
  position: absolute; inset: 0 0 0 calc(100% - 100vw - 2px); pointer-events: none;
  background:
    linear-gradient(0deg,
      var(--bg) 0%,
      var(--bg) 7%,
      color-mix(in srgb, var(--bg) 92%, transparent) 15%,
      color-mix(in srgb, var(--bg) 70%, transparent) 24%,
      color-mix(in srgb, var(--bg) 40%, transparent) 34%,
      color-mix(in srgb, var(--bg) 16%, transparent) 44%,
      transparent 56%);
}

/* Punktzeile: nur am Handy sichtbar, am Rechner uebernimmt die Phasenleiste. */
.hero__punkte { display: none; }
@media (max-width: 1024px) { .hero__punkte { display: block; } }

/* Phasenleiste unter dem Bildband. Die vier Punkte sitzen unter den Fotos:
   01 unter dem ersten, 02 und 03 unter dem mittleren, 04 unter dem letzten.
   Ein duenner leuchtender Strich zieht sich durch alle vier. */
.hero__phases {
  --phases-pad: 1.5rem;
  /* linke Kante des ersten Fotos auf Hoehe der Linie, im Bezugsrahmen der Leiste:
     27 % der Hero-Breite sind hier 27 % + 0,54 Pad, minus eigenem Pad; die
     Textkanten-Variante verliert nur den Pad. Dazu 0,29 Schraegen, weil die
     Linie bei rund 71 % der Bandhoehe liegt und die Schnitte dort so weit
     rechts stehen. */
  --phase-start: calc(max(27% - var(--hero-pad) * 0.46, var(--hero-textrand) - var(--schraeg) * 0.4 - var(--hero-luft) - var(--hero-pad)) + var(--schraeg) * 0.29);
  position: relative; z-index: 2;
  margin-top: clamp(2.6rem, 6vh, 4.5rem);
  padding-top: var(--phases-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
.hero__claim {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint);
  max-width: 100%; overflow-wrap: anywhere;
}
@media (min-width: 1025px) { .hero__claim { white-space: nowrap; } }
/* Ab 1700 px sitzt der Claim AUF der Linienzeile, links von 01, und eine
   Verbindungslinie fuehrt vom Textende zum ersten Punkt (Nils 05.09.:
   „Linie neben 01, rechts neben dem High End Engineering"). Darunter fehlt
   der Platz: der Claim ist 394 px breit, 01 sitzt bei 1440 px schon bei 426. */
@media (min-width: 1700px) {
  .hero__claim {
    position: absolute; left: 0; top: calc(var(--phases-pad) + 0.9rem); transform: translateY(-50%);
    right: calc(100% - var(--phase-start) + 0.6rem);
    display: flex; align-items: center; gap: 0.9rem;
    letter-spacing: 0.12em; max-width: none;
  }
  .hero__claim::after {
    content: ""; flex: 1 1 0; height: 1px; min-width: 1.5rem;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-bright) 30%, transparent) 55%, color-mix(in srgb, var(--brand-bright) 30%, transparent));
  }
  .phasebar__linie {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--brand-bright) 30%, transparent) 0%,
      color-mix(in srgb, var(--brand-bright) 75%, transparent) 28%,
      color-mix(in srgb, var(--brand-bright) 85%, transparent) 50%,
      color-mix(in srgb, var(--brand-bright) 75%, transparent) 72%,
      color-mix(in srgb, var(--brand-bright) 30%, transparent) 92%,
      transparent 100%);
  }
}

.phasebar {
  position: relative;
  /* Das Band beginnt bei 27 % der HERO-Breite, die Leiste liegt aber im Innen-
     abstand von .hero__inner: 27 % ihres Bezugsrahmens sind 0,27·CB + 0,54·Pad,
     davon der eigene Pad wieder ab. Dazu 0,29 Schraegen, weil die Linie bei rund
     71 % der Bandhoehe liegt und die Schnittkanten dort so weit rechts stehen. */
  /* Die Leiste reicht seit 07.09. bis zur rechten Bildkante (Nils: „der Strich
     ist nicht ganz auf dem Foto") — dafuer der negative rechte Rand, der den
     Innenabstand von .hero__inner wieder aufhebt. */
  list-style: none;
  /* Seit 09.09.2026 beginnt das Band rechts von der Textkante (max aus 27 % und
     Textkante + Luft, siehe .hero__band). Dieselbe Rechnung in den Koordinaten
     der Leiste, damit 01 wieder am Anfang des ersten Fotos steht und 02–04 auf
     den Schnitten (Nils 09.09.: „muss bei Konzept & Engineering anfangen"). */
  margin: 0 calc(var(--hero-pad) * -1) 0 var(--phase-start);
  padding: 0.9rem 0 0;
  /* Breite eines sichtbaren Keils, in der eigenen Breite gerechnet: die Leiste
     reicht jetzt bis zur Bildkante, also ist ihre Breite = Band minus dem
     Einzug von 0,29 Schraegen. Daraus folgt v = (eigene Breite - 0,21 Schraegen) / 4
     — seit dem vierten Motiv (07.09.2026) sind es vier Keile statt drei. */
  --phase-keil: calc((100% - var(--schraeg) * 0.21) / 4);
  display: grid;
  /* Seit dem vierten Foto sitzt jeder Punkt auf einer Bildkante: 01 im ersten
     Keil, 02 auf dem Schnitt 1|2, 03 auf dem Schnitt 2|3, 04 auf dem Schnitt
     3|4 — also je ein Punkt pro Motiv. Die ersten drei Spalten sind genau
     einen sichtbaren Keil breit, die vierte nimmt den Rest. */
  grid-template-columns:
    var(--phase-keil)
    var(--phase-keil)
    var(--phase-keil)
    minmax(0, 1fr);
  align-items: start;
  column-gap: 0;   /* die Spalten sind auf die Schnittkanten gerechnet, ein Gap wuerde sie verschieben */
}
/* der Strich laeuft auf Hoehe der Punkte durch alle vier Stationen */
.phasebar__linie {
  position: absolute; left: 0; right: 0; top: 0.9rem; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-bright) 30%, transparent) 8%,
    color-mix(in srgb, var(--brand-bright) 75%, transparent) 28%,
    color-mix(in srgb, var(--brand-bright) 85%, transparent) 50%,
    color-mix(in srgb, var(--brand-bright) 75%, transparent) 72%,
    color-mix(in srgb, var(--brand-bright) 30%, transparent) 92%,
    transparent 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-bright) 45%, transparent);
}
.phasebar__linie::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #ffffff 55%, transparent) 50%, transparent 100%);
  background-size: 30% 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: phasenSchimmer 7.5s linear infinite;
  opacity: 0.4;
}
@keyframes phasenSchimmer {
  0%   { background-position: -25% 0; }
  100% { background-position: 125% 0; }
}
@media (prefers-reduced-motion: reduce) { .phasebar__linie::after { animation: none; opacity: 0; } }

.phasebar__step {
  position: relative;
  display: grid; grid-template-columns: auto auto; align-items: baseline;
  justify-content: start; column-gap: 0.5rem;
  padding-top: 0.85rem;
  font-size: 0.88rem; font-weight: 600; color: var(--text);
}
/* 01 unter das erste Foto, 02 und 03 unter das mittlere, 04 unter das letzte */
.phasebar__step { grid-row: 1; }
/* Seit 07.09. eine Spalte je Phase: 01 im ersten Keil, 02 auf dem Schnitt 1|2,
   03 auf dem Schnitt 2|3, 04 auf dem Schnitt 3|4 (Nils: „die Punkte muessten
   da unten noch angepasst werden"). */
.phasebar__step--1 { grid-column: 1; justify-self: start; }
.phasebar__step--2 { grid-column: 2; justify-self: start; }
.phasebar__step--3 { grid-column: 3; justify-self: start; }
.phasebar__step--4 { grid-column: 4; justify-self: start; }
.phasebar__punkt {
  position: absolute; top: -3.5px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent),
              0 0 12px color-mix(in srgb, var(--brand-bright) 60%, transparent);
}
/* der Punkt sitzt bei allen vier Stationen ueber der Ziffer (03/04 sind rechts-
   buendig, der Punkt wandert mit der Ziffer, nicht ans Ende des Labels) */
.phasebar__no { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--brand-bright); }
.phasebar__label { white-space: nowrap; }

/* Michael Zwanzger 14.09.2026 (fb_e4ea3fc29717, an „Konzept & Engineering"):
   „weiter nach unten, Text steht direkt im Bild". Die Beschriftung lag auf der
   gedruckten Zeile „Sustainable future. Together." des CAPEX-Blatts. Am Rechner
   steht die Leiste deshalb am unteren Rand des Hero: der freie Platz, der bisher
   unter ihr lag, kommt zwischen Text und Leiste — die Textgruppe selbst bleibt,
   wo sie war (obere Haelfte des Freiraums unveraendert).
   Weil die Schnitte schraeg laufen, stehen sie tiefer weiter links. Die Punkte
   rechnen deshalb mit der echten Hoehe der Linie im Band statt mit dem festen
   Faktor 0,29: Anteil der Schraege = (Band unter der Linie) / (Bandhoehe),
   Band unter der Linie = 16rem Ueberstand + Innenabstand unten + 2,27rem
   (Linie bis Unterkante Beschriftung), Bandhoehe = Hero + 16rem − Kopfzeile.
   tan(atan2(a, b)) ergibt a/b als Zahl; der Hero ist mindestens 52rem hoch
   (Inhalt auf flachen Bildschirmen). Minus 3,5 px setzt die MITTE des Punkts auf
   die Kante; die Keilbreite zieht denselben Faktor mit. Browser ohne atan2
   behalten Lage und Rechnung von vorher.
   Ganz unten liegt die Leiste ausserhalb des Reveal-Beobachters (rootMargin −8 %),
   sie wuerde erst beim Scrollen erscheinen — daher eine eigene Einblendung. */
@supports (width: calc(1px * tan(atan2(1px, 2px)))) {
  @media (min-width: 1025px) {
    .hero__inner { flex: 1 0 auto; display: flex; flex-direction: column; }
    .hero__grid { margin-block: auto; }
    .hero__phases {
      --phase-f: tan(atan2(16rem + var(--hero-pb) + 2.27rem, max(100svh, 52rem) + 16rem - var(--kopf-h)));
      --phase-start: calc(max(27% - var(--hero-pad) * 0.46, var(--hero-textrand) - var(--schraeg) * 0.4 - var(--hero-luft) - var(--hero-pad))
        + var(--schraeg) * var(--phase-f) - 3.5px);
    }
    .hero__phases[data-reveal] { animation: heroPhasenEin 0.8s var(--ease) 0.25s both; }
    .phasebar { --phase-keil: calc((100% - var(--schraeg) * (0.5 - var(--phase-f)) - 3.5px) / 4); }
  }
}
@keyframes heroPhasenEin {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Flache Desktop-Bildschirme (z. B. 1440x900): Hero oben und zwischen den
   Bloecken enger, damit Phasenleiste samt Beschriftung im ersten Screen steht. */
@media (min-width: 1025px) and (max-height: 960px) {
  .hero { padding-top: clamp(6.5rem, 11vh, 8rem); --hero-pb: 1.25rem; padding-bottom: var(--hero-pb); }
  .hero__kicker { margin-bottom: 1rem; }
  .hero__ctas { margin-top: 1.5rem; }
  .hero__phases { margin-top: 2rem; --phases-pad: 1rem; gap: 0.7rem; }
}

/* ---------------------------------------------------------------- KPI BAND */
/* Kennzahlen kompakt in einer Reihe, der Wirkungszaehler steht darunter als
   eigene, breite Karte. Alles reagiert auf Ueberfahren. */
.kpi { position: relative; z-index: 2; padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(1rem, 3vw, 2rem); }
.kpi__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.kpi__grid--impact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi__grid--impact .spec--impact { grid-column: 1 / -1; margin-top: 0.5rem; }

.spec {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.spec:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-bright) 45%, var(--glass-border));
  background: var(--glass-bg-2);
}
.spec__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  letter-spacing: -0.03em; color: var(--text); line-height: 1;
}
.spec__value sup { color: var(--brand-bright); font-size: 0.55em; top: -0.45em; }
/* "620m+" klebte an der Zahl (Michael Zwanzger 18.09.2026); Zeichen wie "+"/"°" bleiben eng. */
.spec__value sup.spec__sup--wort { margin-left: 0.14em; }
.spec__label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-faint); line-height: 1.35;
}

/* Wirkungszaehler: eigene Zeile, waagrecht gegliedert */
.spec--impact {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 0.5rem 1.6rem;
  padding: 1.05rem 1.3rem;
  background: linear-gradient(100deg, var(--brand-tint), transparent 55%), var(--glass-bg);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--glass-border));
}
.spec--impact:hover { transform: none; border-color: color-mix(in srgb, var(--brand-bright) 55%, transparent); }
.spec--impact__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.spec__kicker {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-bright);
}
.spec__kicker svg { width: 13px; height: 13px; }
.spec--impact__live {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
}
.spec--impact__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-bright); animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(15, 140, 73, 0.45); } 100% { box-shadow: 0 0 0 8px rgba(15, 140, 73, 0); } }
@media (prefers-reduced-motion: reduce) { .spec--impact__dot { animation: none; } }
.spec__value--impact { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }
.spec__value--impact [data-impact-value] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec__value--impact .spec__dec { font-size: 0.56em; letter-spacing: 0.01em; }
.spec__unit { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-dim); }
.spec__label--wrap { grid-column: 1; font-family: inherit; font-size: 0.76rem; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.spec--impact__co2 { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; gap: 0.15rem; padding-left: 1.4rem; border-left: 1px solid var(--line-2); }
.spec--impact__co2-val { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.spec--impact__co2-val [data-impact-co2] { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.spec--impact__note { font-size: 0.7rem; color: var(--text-faint); line-height: 1.4; }
.spec--impact__rate {
  grid-column: 3; grid-row: 2 / span 2; align-self: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--brand-bright);
  padding: 0.4rem 0.7rem; border-radius: var(--pill); border: 1px solid color-mix(in srgb, var(--brand-bright) 35%, transparent);
  white-space: nowrap;
}

/* ------------------------------------------------------------ PARALLAX BAND */
/* Full-bleed photo band. DEFAULT = static cover (the reduced-motion / mobile /
   no-JS fallback). main.js adds .is-parallax + sets transform to enable motion
   via the Lenis scroll loop. NEVER background-attachment:fixed (janks on iOS). */
.parallax {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 50vh, 560px);
  overflow: clip;
  isolation: isolate;
  background: var(--bg-3);
}
.parallax__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.parallax__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* JS-enabled state: overscan the image so translateY never reveals an edge. */
.parallax.is-parallax .parallax__media {
  top: -24%;
  bottom: auto;
  height: 148%;
  will-change: transform;
}
.parallax__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,12,9,0.62) 0%, rgba(6,12,9,0.30) 42%, rgba(6,12,9,0.70) 100%),
    radial-gradient(125% 100% at 16% 50%, rgba(6,12,9,0.58), transparent 72%);
}
.parallax__inner { position: relative; width: 100%; }
.parallax__content { max-width: 34rem; }
.parallax__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #189952; /* angehobenes CI-Gruen — stays legible on the dark scrim in both themes */
  margin-bottom: 0.85rem;
}
.parallax__text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
  margin: 0;
}

/* ----------------------------------------------------- EDITORIAL BAND
   Full-bleed light showcase band — cool right-weighted material photo
   edge-to-edge, dark text over the empty left. Same footprint as .parallax
   but LIGHT: theme-aware scrim + text so it reads in light AND dark mode.
   Rhythm: alternates with content sections (never two bands back-to-back). */
.editorial {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 54vh, 600px);
  overflow: clip;
  isolation: isolate;
  background: var(--bg-3);
}
.editorial__media { position: absolute; inset: 0; z-index: -2; }
.editorial__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 82% 50%;
}
.editorial__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    var(--bg-3) 0%,
    color-mix(in srgb, var(--bg-3) 86%, transparent) 30%,
    color-mix(in srgb, var(--bg-3) 34%, transparent) 52%,
    transparent 66%);
}
.editorial__inner { position: relative; width: 100%; }
.editorial__content { max-width: 34rem; }
.editorial__kicker { margin-bottom: 0.35rem; }
.editorial__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem);
  color: var(--text);
  margin: 0.85rem 0 0;
}
.editorial__text {
  margin-top: 0.9rem;
  color: var(--text-dim);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
  line-height: 1.55;
  max-width: 30rem;
}
.editorial__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-bright);
}
.editorial__link:hover .btn__icon--right { transform: translateX(3px); }
.editorial__link .btn__icon--right { transition: transform 0.25s ease; }

/* mobile: composition sits top-right, text drops to a bottom-weighted scrim */
@media (max-width: 700px) {
  .editorial { align-items: flex-end; min-height: clamp(420px, 78vh, 560px); }
  .editorial__img { object-position: 72% 28%; }
  .editorial__scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg-3) 20%, transparent) 0%,
      color-mix(in srgb, var(--bg-3) 62%, transparent) 42%,
      color-mix(in srgb, var(--bg-3) 92%, transparent) 72%,
      var(--bg-3) 100%);
  }
  .editorial__inner { padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
}

/* --------------------------------------------------------------- CARD GRID */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Leistungen: 8 service cards → 4 columns on desktop, 2 columns on tablet
   (mobile is the swipe carousel below). Home teaser clamps the long copy. */
/* Aufgeklappte Karte zieht die Nachbarn nicht mehr in die Hoehe (Michael Zwanzger 18.09.2026):
   im Raster behaelt jede Karte ihre eigene Hoehe. Im Handy-Karussell bleibt es bei gleicher
   Hoehe, sonst haetten die Folien unterschiedliche Kanten. */
@media (min-width: 601px) {
  .card-grid, .project-grid { align-items: start; }
}
@media (min-width: 1100px) {
  #leistungen .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  #leistungen .glass-card.svc { padding: 1.7rem 1.5rem; }
  #leistungen .svc__title { font-size: 1.12rem; }
  #leistungen .svc__desc { font-size: 0.92rem; }
}
@media (min-width: 601px) and (max-width: 1099px) {
  #leistungen .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Michael 07.09.2026: „button ‚mehr lesen‘ funktionieren nicht" — auf der
   STARTSEITE klemmte diese Regel den Text fest, unabhaengig vom Schalter. Der
   Knopf nahm die Klasse `is-clamp` weg, hier stand die Begrenzung aber ein
   zweites Mal und ohne Klasse: das Aufklappen hatte sichtbar keine Wirkung
   (gemessen: Hoehe blieb 121 px, waehrend sie auf /leistungen auf 316 ging).
   Jetzt haengt auch die Anriss-Fassung am Schalter. */
.section--teaser .svc__desc.is-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}

.glass-card {
  position: relative;
  padding: 2rem 1.9rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.glass-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 26%, var(--glass-border));
  box-shadow: var(--shadow);
}

.svc__icon, .icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--brand-tint);
  color: var(--brand-bright);
  margin-bottom: 1.5rem;
  transition: transform 0.4s var(--ease);
}
.svc__icon svg, .icon-badge svg { width: 24px; height: 24px; }
.glass-card:hover .svc__icon { transform: translateY(-2px); }
.svc__title { font-size: 1.22rem; font-weight: 700; margin-bottom: 0.55rem; letter-spacing: -0.01em; }
.svc__index {
  position: absolute; top: 1.4rem; right: 1.5rem;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint);
  letter-spacing: 0.05em;
}
.svc__desc { color: var(--text-dim); font-size: 0.97rem; }
/* Alle Karten zeigen gleich viele Textzeilen; laengere Beschreibungen klappen
   ueber „Mehr lesen" auf (Nils 05.09.: „manche haben zu viel Space unter dem
   Text"). Der Schalter erscheint nur, wo wirklich Text abgeschnitten ist. */
.svc__desc.is-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Karte als Spalte: Titel reserviert zwei Zeilen, damit alle Texte auf gleicher
   Hoehe beginnen; „Mehr lesen" sitzt unten buendig. */
.svc { display: flex; flex-direction: column; }
.svc .svc__title { min-height: 2.5em; }
.svc .svc__more { margin-top: auto; padding-top: 0.75rem; }
.svc .svc__desc { flex: 0 0 auto; }
.svc__more {
  margin-top: 0.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--brand-bright);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.svc__more::after { content: ""; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s var(--ease); }
.svc__more[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.svc__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* carousel pagination — hidden on desktop, shown on mobile */
.svc-dots { display: none; }

/* ---------------------------------------------------------------- PROZESS */
.prozess__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.2rem);
}
/* the glowing pipeline behind the phases */
.prozess__line {
  position: absolute;
  top: 36px; left: 8%; right: 8%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.prozess__line::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transform: scaleX(var(--fill, 0)); transform-origin: left;
  transition: transform 1.4s var(--ease);
}
.phase { position: relative; padding-top: 0; }
.phase__node {
  position: relative; z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  color: var(--brand-bright);
  background: var(--bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 0 0 6px var(--bg-2);
  margin-bottom: 1.5rem;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.phase.in .phase__node {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 6px var(--bg-2);
}
.phase__lead {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-bright); margin-bottom: 0.5rem;
}
.phase__title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.7rem; }
.phase__desc { color: var(--text-dim); font-size: 0.98rem; }

/* ------------------------------------------------------------- KOMPETENZEN */
.kompetenz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.kompetenz-group__label {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-bright);
  padding-bottom: 0.9rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.6rem;
}
.kompetenz-group__label span {
  font-family: var(--font-mono); color: var(--text-faint); font-size: 0.7rem;
  margin-left: auto;
}
.kompetenz-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 0.3rem;
  border-bottom: 1px solid var(--line-2);
  transition: padding-left 0.35s var(--ease);
}
.kompetenz-item:hover { padding-left: 0.7rem; }
.kompetenz-item__icon {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-bright);
}
.kompetenz-item__icon svg { width: 19px; height: 19px; }
.kompetenz-item__text { color: var(--text); font-size: 0.98rem; padding-top: 0.45rem; }

/* Align Kernprozess/Nebenprozesse rows horizontally across both columns:
   shared row tracks via subgrid so a wrapping item on one side lifts its
   counterpart on the other side (rows stay level). Desktop only. */
@media (min-width: 861px) {
  .kompetenz-grid { grid-template-rows: auto repeat(4, auto); row-gap: 0; align-items: stretch; }
  .kompetenz-group { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
}

/* ---------------------------------------------------------------- PROJEKTE */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.project {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--card);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.project:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: color-mix(in srgb, var(--brand-bright) 45%, transparent); }
.project__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 30% 0%, var(--brand-tint), transparent 60%),
    linear-gradient(150deg, var(--card-2), var(--bg-3));
  display: grid; place-items: center;
  overflow: hidden;
}
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__media-ghost { width: 38%; height: 38%; color: var(--brand-bright); opacity: 0.5; }
.project__media::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px; opacity: 0.6;
}
.project__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.7rem; border-radius: var(--pill);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--brand-tint);
  color: var(--brand-bright);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.project__body { padding: 1.5rem; }
.project__loc {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--text-faint); margin-bottom: 0.5rem;
}
.project__loc svg { width: 13px; height: 13px; }
.project__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.project__desc { color: var(--text-dim); font-size: 0.95rem; }
/* Nils 07.09.2026: „bei den Texten muessen wir auch mit fuenf Zeilen arbeiten
   und dann mit Mehr lesen". Michaels Brandschutztext ist ueber 600 Zeichen lang
   und hat die drei Projektkarten sonst unterschiedlich hoch gemacht. Gleiche
   Mechanik wie bei den Leistungskarten: dieselbe Klasse `is-clamp`, derselbe
   Schalter, angehaengt von main.js nur dort, wo wirklich abgeschnitten wird.
   Die Karte ist eine Spalte, damit der Schalter unten buendig sitzt und alle
   drei Karten gleich hoch bleiben. */
.project { display: flex; flex-direction: column; }
.project__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.project__desc.is-clamp {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.project__body .svc__more { margin-top: auto; padding-top: 0.75rem; }

/* ------------------------------------------------------------------ ÜBER */
.ueber__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ueber__lead p { color: var(--text-dim); font-size: 1.08rem; }
.ueber__slogan {
  margin-top: 1.5rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.4;
  color: var(--text); letter-spacing: -0.01em;
  text-wrap: balance;
}
.ueber__slogan::before {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--brand-bright); margin-bottom: 0.9rem; border-radius: 2px;
}
.cred {
  display: grid;
  grid-template-columns:
    calc(33.333% + var(--schraeg) / 2)
    33.333%
    calc(33.333% - var(--schraeg) / 2); gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cred__row {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.cred__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.cred__value { color: var(--text); font-weight: 600; line-height: 1.4; }

.usp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.usp {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.usp:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-bright) 40%, transparent); }
.usp__icon { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand-bright); margin-bottom: 1rem; }
.usp__icon svg { width: 22px; height: 22px; }
.usp__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; }
.usp__text { color: var(--text-dim); font-size: 0.92rem; }

/* team */
/* Team showcase: staggered photo columns, name/role/CV under each photo */
.team-show {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* Nils 06.09.: Bild und Text NEBENEINANDER, im Wechsel links/rechts —
   Portraet 1, 3, … links; Portraet 2, 4, … rechts. Der Text steht mittig zum
   Bild, nicht darunter. Ab 860 px stapelt es wieder (Bild oben, Text darunter). */
.team-unit {
  cursor: pointer; transition: opacity 0.3s var(--ease);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}
/* Bei den geraden Portraets tauschen die Spalten die BREITE mit, sonst wuerde
   das Bild in die breite Textspalte rutschen und auf 790 px aufblasen. */
.team-unit:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.team-unit:nth-child(even) .team-photo      { grid-column: 2; grid-row: 1; }
.team-unit:nth-child(even) .team-unit__text { grid-column: 1; grid-row: 1; justify-self: end; }
.team-unit__text { max-width: 42rem; }
.team-photo {
  overflow: hidden; border-radius: var(--radius);
  width: 100%; aspect-ratio: 15 / 16;
}
.team-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  display: block;
  filter: grayscale(100%) brightness(0.82) contrast(1.03);
  transition: filter 0.5s var(--ease);
}
.team-row__name {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em;
}
.team-row__pill {
  width: 16px; height: 12px; border-radius: 5px; flex: none;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
.team-row__role {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-bright); margin: 0.45rem 0 0.55rem; padding-left: calc(16px + 0.7rem);
}
.team-row__note { color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; padding-left: calc(16px + 0.7rem); }
/* hover sync: active member full color, everything else dims */
.team-show.has-active .team-unit:not(.is-active) { opacity: 0.5; }
.team-unit.is-active .team-photo img { filter: grayscale(0%) brightness(1) contrast(1); }
.team-unit.is-active .team-row__pill { width: 22px; background: var(--brand-bright); }

/* ---------------------------------------------------------------- KONTAKT */
.contact__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.contact__panel {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.field { margin-bottom: 1.1rem; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 0.45rem; }
.input, .textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit; font-size: 0.96rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.textarea { resize: vertical; min-height: 130px; }

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.3rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 0.5rem 0.9rem;
  border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--bg); color: var(--text-dim);
  font-size: 0.85rem; transition: all 0.25s var(--ease);
}
.chip input:checked + span {
  border-color: var(--brand-bright); color: var(--brand-bright);
  background: var(--brand-tint);
}
.consent { display: flex; gap: 0.65rem; align-items: flex-start; margin: 1.2rem 0; font-size: 0.86rem; color: var(--text-dim); }
.consent input { margin-top: 0.25rem; accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.consent a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 2px; }
.form-status { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2rem; }
.form-status.is-ok { color: var(--brand-bright); }
.form-status.is-err { color: #ff8a7a; }
.field__error { color: #ff8a7a; font-size: 0.8rem; margin-top: 0.35rem; }

.contact__aside { display: grid; gap: 1rem; }
.contact-card {
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--brand-tint), transparent), var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.contact-card__title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; }
.contact-card__sub { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 1.3rem; }
.contact-person { display: flex; gap: 1.15rem; align-items: center; }
.contact-person__photo { flex: 0 0 auto; width: 104px; aspect-ratio: 15 / 16; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; filter: grayscale(100%) brightness(0.9) contrast(1.03); }
.contact-person__body { min-width: 0; }
@media (max-width: 520px) { .contact-person { align-items: flex-start; } .contact-person__photo { width: 88px; } }
.contact-line { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; color: var(--text); border-top: 1px solid var(--line-2); }
.contact-line:first-of-type { border-top: 0; }
.contact-line svg { width: 19px; height: 19px; color: var(--brand-bright); flex: none; }
.contact-line span { font-size: 0.95rem; }
.contact-line__addr { display: flex; flex-direction: column; line-height: 1.4; }

/* ----------------------------------------------------------------- FOOTER */
/* Footer, aufgeraeumt (Nils 05.09.: „viel zu viel Platz"): drei etwa gleich
   hohe Spalten (Marke, Navigation, Kontakt mit beiden Standorten), Rechtliches
   wandert in die Schlusszeile, der KI-Hinweis darunter. Enge Zeilenabstaende. */
.footer { position: relative; padding-block: clamp(2.8rem, 5vw, 4rem) 1.5rem; border-top: 1px solid var(--line); background: var(--bg-2); }
.footer__top { display: grid; grid-template-columns: 1.5fr 0.9fr 1.2fr; gap: 2rem 2.5rem; align-items: start; }
.footer__tag { color: var(--text-dim); font-size: 0.94rem; line-height: 1.55; max-width: 24rem; margin-top: 1rem; }
.footer__col-title { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.7rem; }
.footer__link { display: block; width: fit-content; color: var(--text-dim); padding: 0.2rem 0; transition: color 0.25s, transform 0.25s var(--ease); }
.footer__link:hover { color: var(--brand-bright); transform: translateX(3px); }
.footer__adressen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 1.5rem; margin-top: 0.9rem; }
.footer__adr { font-style: normal; color: var(--text-dim); font-size: 0.94rem; line-height: 1.5; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center;
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--text-faint);
}
.footer__legal { display: flex; gap: 1.4rem; }
.footer__legal a { color: var(--text-dim); transition: color 0.25s; }
.footer__legal a:hover { color: var(--brand-bright); }
/* Schlusszeile: „Realisiert von Digitalisierungshilfe" verlinkt auf digitalisierungshilfe.at
   (Nils 18.09.2026). Bleibt zurueckhaltend wie der Rest der Zeile, erst beim Ueberfahren deutlich. */
.footer__macher { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color 0.25s; }
.footer__macher:hover { color: var(--brand-bright); text-decoration-color: currentColor; }

/* --------------------------------------------------------------- CTA BAND */
.cta-band {
  position: relative;
  border-radius: var(--radius-xl);
  padding: clamp(2.75rem, 6vw, 4.75rem);
  background: linear-gradient(150deg, var(--brand-2), var(--brand));
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 80% at 80% 0%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(60% 90% at 10% 100%, rgba(0,0,0,0.18), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band__title { color: #fff; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); }
.cta-band__sub { color: rgba(255,255,255,0.85); margin: 1rem auto 2rem; max-width: 38rem; }
.cta-band .btn--primary { background: #fff; color: var(--brand-2); box-shadow: 0 14px 40px -12px rgba(0,0,0,0.4); }
.cta-band .btn--ghost { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); color: #fff; }

/* --------------------------------------------------------------- CONSENT */
/* Floaty glass card, bottom-left (hard-rule pattern), themed. */
.consent-banner {
  position: fixed; left: 1.25rem; bottom: 1.25rem; right: auto; top: auto;
  z-index: 9000; max-width: 340px;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: var(--shadow);
  animation: consentIn 0.45s var(--ease) both;
}
@keyframes consentIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.consent-banner__text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-dim); }
.consent-banner__link { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 2px; }
.consent-banner__actions { display: flex; gap: 0.6rem; }
.consent-banner__btn { flex: 1 1 0; padding: 0.6rem 0.9rem; font-size: 0.85rem; border-radius: var(--pill); }
@media (max-width: 480px) { .consent-banner { left: 0.85rem; right: 0.85rem; max-width: none; } }

/* ----------------------------------------------------------- LEGAL PAGES */
.legal { padding-top: 9rem; padding-bottom: 5rem; }
.legal__inner { max-width: 50rem; }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin-bottom: 2rem; }
.legal h2 { font-size: 1.4rem; margin: 2.2rem 0 0.8rem; }
.legal h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.legal p, .legal li { color: var(--text-dim); }
.legal a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 2px; }
.legal ul { padding-left: 1.2rem; }

/* ------------------------------------------------------------- SUB-PAGES */
/* Page-head band that clears the fixed header on dedicated sub-pages. */
.page-head { position: relative; padding: clamp(7.5rem, 11vw, 10rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head__title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); margin-top: 1.1rem; line-height: 1.05; letter-spacing: -0.02em; }
.page-head__intro { margin-top: 1.3rem; color: var(--text-dim); max-width: 48rem; font-size: clamp(1.04rem, 1rem + 0.35vw, 1.22rem); }
.page-head__media { margin-top: clamp(2rem, 4vw, 3rem); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); aspect-ratio: 21 / 9; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bildband im Seitenkopf (IWZ 07.09.2026): dieselbe Bildsprache wie im Kopf der
   Startseite, nur flach und in der gerundeten Flaeche. Die Keile sind gleich
   breit — Spalte 1 bekommt eine halbe Schraege dazu, die letzte eine halbe ab,
   weil jedes Panel ab dem zweiten um eine ganze Schraege nach links ueberlappt.
   Aussen bleiben die Kanten gerade, sonst blitzt der Untergrund durch. */
.page-head__band {
  --band-schraeg: clamp(26px, 3.2vw, 62px);
  /* Nils 07.09.2026: „links ein bisschen ausblenden, rechts ausblenden,
     gleiche Groesse behalten, oben und unten die gruenen Striche rein."
     Der Rahmen der Bannerflaeche faellt dafuer weg, die Flaeche bleibt gleich
     gross; die Striche liegen auf der Ober- und Unterkante und laufen an den
     Seiten mit dem Bild aus. */
  position: relative;
  border: 0; border-radius: 0; box-shadow: none;
  /* Nils 07.09.2026: „die Verlaeufe bitte im gleichen Winkel wie die Schnitte".
     Der Schnitt laeuft von (Schraege, oben) nach (0, unten); senkrecht dazu
     steht ein Verlauf von rund 96 Grad — bei 3,2vw Schraege und 21:9 sind es
     rechnerisch 95,97 Grad, ueber alle Breiten schwankt das um gut ein Grad.
     Damit sind die weichen Kanten links und rechts parallel zu den Schnitten. */
  -webkit-mask-image: linear-gradient(96deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(96deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  display: grid;
  grid-template-columns:
    calc(100% / var(--band-anzahl, 4) + var(--band-schraeg) / 2)
    repeat(calc(var(--band-anzahl, 4) - 2), calc(100% / var(--band-anzahl, 4)))
    calc(100% / var(--band-anzahl, 4) - var(--band-schraeg) / 2);
}
.page-head__keil {
  position: relative; margin: 0; overflow: hidden;
  clip-path: polygon(var(--band-schraeg) 0, 100% 0, calc(100% - var(--band-schraeg)) 100%, 0 100%);
}
/* Nils 07.09.2026: „das Foto links auch anwinkeln vom Schnitt" und „das Foto
   rechts auch mit einem Winkel beschneiden" — die beiden aeusseren Kanten
   standen als einzige gerade. Jetzt tragen alle vier denselben Schnitt; die
   dabei frei werdenden Ecken liegen in der weichen Kante der Maske, die im
   selben Winkel laeuft. */
.page-head__keil:first-of-type { clip-path: polygon(var(--band-schraeg) 0, 100% 0, calc(100% - var(--band-schraeg)) 100%, 0 100%); }
.page-head__keil:last-of-type  { clip-path: polygon(var(--band-schraeg) 0, 100% 0, calc(100% - var(--band-schraeg)) 100%, 0 100%); }
.page-head__keil + .page-head__keil { margin-left: calc(var(--band-schraeg) * -1); }
/* Leicht herangezogen: das Hero-Motiv der Mitte traegt oben und unten eine
   unscharfe Verlaengerung, damit es im hohen Keil des Hero nicht zu nah wirkt.
   Im flachen Band hier haetten Bild und Rahmen fast dasselbe Verhaeltnis — der
   Zuschnitt greift dann nicht und die Verlaengerung waere als Streifen zu
   sehen. Die 14 % schneiden sie weg; bei 1050 px Vorlage auf 337 px Keil
   bleibt das dreifach ueberabgetastet, also ohne sichtbaren Schaerfeverlust. */
/* Michael Zwanzger 07.09.2026 (fb_88c2d6fafa05): „Alle Bilder in SW bitte" —
   das Band steht damit in derselben Sprache wie der Kopf der Startseite. */
.page-head__keil img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); filter: grayscale(1) brightness(0.92) contrast(1.06); }
/* fb_c0dd234927ed: „auch nach links verschieben inklusive Foerderband" —
   derselbe Ausschnitt wie im Hero, damit das Band mit dem Sortiergut im Bild
   steht. Die Kennzeichnung kommt aus dem Hero (focus), siehe leistungen.php. */
.page-head__keil--mitte img { object-position: 62% 50%; }
.page-head__keil--capex img { object-position: 0% 50%; }
.page-head__keil--right img { object-position: 38% 50%; }
.page-head__keil--plan img { transform: none; }
.page-head__band::before,
.page-head__band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
  /* Nils 07.09.2026 (Anmerkung fb_da15b1c81547): „die gruenen streifen oben und
     unten 10% laenger". Die Striche laufen ueber die ganze Bandbreite; sichtbar
     sind sie nur so weit, wie ihr eigener Verlauf und die Maske des Bandes sie
     stehen lassen. Deshalb wandern die Halteschritte von 14/86 auf 7/93 nach
     aussen — die weichen Kanten des Bandes bleiben unangetastet.
     Gemessen am Rendering (Laenge bei halber Spitzenhelligkeit, 1440 px):
     oben 1835 -> 1998 px (+8,9 %), unten 1842 -> 2045 px (+11,0 %), im Mittel
     +10,0 %. Ueber die Bandkante hinausziehen (left/right: -5%) bringt nur
     +6,8 %, beides zusammen +13,7 % — deshalb allein ueber die Haltepunkte. */
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-bright) 70%, transparent) 7%,
    color-mix(in srgb, var(--brand-bright) 90%, transparent) 50%,
    color-mix(in srgb, var(--brand-bright) 70%, transparent) 93%,
    transparent 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-bright) 45%, transparent);
}
.page-head__band::before { top: 0; }
.page-head__band::after  { bottom: 0; }
/* Nils 07.09.2026: „bei Leistungen auch" — dieselbe Behandlung wie im Kopf der
   Startseite. Mit `contain` stand rund um die Zeichnung die dunkle Platte, im
   angeschnittenen Keil las sich das als leere Flaeche. Jetzt fuellt sie den
   Keil wie die drei Fotos daneben. */
.page-head__keil--plan { background: #0b1116; }
.page-head__keil--plan img { object-fit: cover; object-position: 58% 50%; padding: 0; filter: grayscale(1) brightness(0.94) contrast(1.08); }
:root[data-theme="light"] .page-head__keil--plan { background: #0b1116; }
/* feine Fuge im CI-Gruen an jedem Schnitt, wie im Kopf der Startseite */
.page-head__keil + .page-head__keil::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 12, 9, 0.38) 0, transparent calc(var(--band-schraeg) * 1.4));
}
/* First content section right after a page-head doesn't need its big top pad. */
.page-head + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* Sub-page section that starts at the top (no page-head before it).
   Transparent so the fixed site grid/atmosphere shows through like every
   other page (overrides the opaque .section--alt tint on this full page). */
.section--page { padding-top: clamp(7.5rem, 11vw, 10rem); background: transparent; }

/* "View all / learn more" link row under a teaser grid. */
.section-more { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.usp-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Group photo on the Über-uns page. */
.ueber__group { margin: clamp(2.5rem, 5vw, 4rem) 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ueber__group img { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------- CUSTOM CURSOR */

/* ----------------------------------------------------------- REVEAL ANIM */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal-stagger].in > * { opacity: 1; transform: none; }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger].in > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger].in > *:nth-child(6) { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* QA static mode (?nofx=1): flatten svh hero + absolute bg for full-page shots */
.iwz-static .hero { min-height: auto; padding-top: 8rem; }
.iwz-static .site-atmos { position: absolute; height: 100%; }
.iwz-static [data-reveal],
.iwz-static [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ------------------------------------------------------------- RESPONSIVE */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 26rem; margin-inline: auto; order: -1; width: 100%; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .usp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  .header__cta-desktop { display: none; }
  .ueber__grid { grid-template-columns: 1fr; }
  .kompetenz-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .team-show { gap: 2.5rem; }
  .team-unit, .team-unit:nth-child(even) { grid-template-columns: 1fr; gap: 1.2rem; }
  .team-unit:nth-child(even) .team-unit__text { justify-self: stretch; }
  .team-unit .team-photo, .team-unit__text,
  .team-unit:nth-child(even) .team-photo, .team-unit:nth-child(even) .team-unit__text { grid-column: 1; grid-row: auto; }
  .team-photo { width: min(100%, 250px); }
  .prozess__track { grid-template-columns: 1fr; }
  .prozess__line { display: none; }
  .usp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .field__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 1.6rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .cred { grid-template-columns: 1fr; }
  .page-head__media { aspect-ratio: 16 / 10; }

  /* Ziel 2 — kompaktes Mobil-Layout:
     gleichartige Sektionen (Leistungen, USPs) → 2er-Box-Raster,
     bildstarke Sektion (Projekte) → horizontales Swipe-Karussell. */

  /* Leistungen: horizontales Swipe-Karussell (Full-bleed, snap, mit Dots) */
  #leistungen .card-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.4rem var(--gutter) 0.5rem;
  }
  #leistungen .card-grid::-webkit-scrollbar { display: none; }
  #leistungen .card-grid > .glass-card.svc {
    flex: 0 0 80%;
    scroll-snap-align: center;
    padding: 1.6rem 1.35rem;
    border-radius: var(--radius-lg);
  }
  #leistungen .svc__icon { width: 48px; height: 48px; border-radius: 13px; margin-bottom: 1rem; }
  #leistungen .svc__icon svg { width: 23px; height: 23px; }
  #leistungen .svc__title { font-size: 1.12rem; line-height: 1.25; margin-bottom: 0.5rem; }
  #leistungen .svc__desc { font-size: 0.9rem; line-height: 1.55; }
  #leistungen .svc__index { font-size: 0.74rem; }

  #leistungen .svc-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
  }
  #leistungen .svc-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 26%, transparent);
    cursor: pointer;
    transition: width 0.35s var(--ease), background 0.35s var(--ease);
  }
  #leistungen .svc-dots button.is-active {
    width: 22px;
    background: var(--brand-bright);
  }

  /* USPs: 2 kompakte Boxen nebeneinander */
  .usp-grid, .usp-grid--4 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .usp { padding: 1.05rem 0.9rem; }
  .usp__icon { width: 40px; height: 40px; margin-bottom: 0.65rem; }
  .usp__title { font-size: 0.98rem; }
  .usp__text { font-size: 0.8rem; line-height: 1.45; }

  /* Projekte: horizontales Swipe-Karussell (Full-bleed, snap) */
  #projekte .project-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.4rem;
  }
  #projekte .project-grid::-webkit-scrollbar { display: none; }
  #projekte .project-grid > .project {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

/* ================================================================ FEEDBACK-RUNDE 1 (Sept 2026) */
/* Prozess: 4. Ebene "wirtschaftlich tragfähig" als Klammer unter den drei Phasen + Slogan */
.clamp { position: relative; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.6rem; }
.clamp__bracket {
  position: absolute; top: 0; left: 8%; right: 8%; height: 14px;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px;
}
.clamp__bracket::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 12px; background: var(--line); }
.clamp__body {
  margin-top: 1.2rem;
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.6rem 1.8rem; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--brand-tint), transparent 55%), var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.clamp__icon { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-bright); }
.clamp__icon svg { width: 22px; height: 22px; }
.clamp__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-bright); }
.clamp__title { font-size: 1.35rem; margin: 0.35rem 0 0.45rem; }
.clamp__text { color: var(--text-dim); margin: 0; max-width: 60rem; }
.slogan { list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.slogan li {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); padding: 0.55rem 1rem; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--glass-bg);
}
.slogan li::before { content: "◆"; color: var(--brand-bright); margin-right: 0.55rem; font-size: 0.6rem; vertical-align: 1px; }

/* Kontakt: drei Wege (Gespräch / Rückruf / E-Mail) als Auswahlkarten über dem Formular */
.ways { border: 0; padding: 0; margin: 0 0 1.3rem; min-width: 0; }
.ways legend { padding: 0; }
.ways__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.45rem; }
.way { position: relative; display: block; }
.way input { position: absolute; opacity: 0; inset: 0; z-index: 1; cursor: pointer; margin: 0; }
.way__box {
  display: flex; flex-direction: column; gap: 0.3rem; height: 100%;
  padding: 0.9rem 0.95rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.way__icon { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand-bright); margin-bottom: 0.2rem; }
.way__icon svg { width: 18px; height: 18px; }
.way__label { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.way__hint { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }
.way input:checked + .way__box { border-color: var(--brand-bright); background: var(--brand-tint); box-shadow: 0 0 0 3px var(--brand-tint); }
/* auf der gewaehlten Karte hebt der gruene Grund den Text an, deshalb dort heller */
.way input:checked + .way__box .way__hint { color: var(--text); }
.way input:focus-visible + .way__box { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
.way:hover .way__box { transform: translateY(-2px); border-color: var(--text-dim); }
.form-alt { margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--text-dim); }
.form-alt a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 2px; }

/* Zwei Standorte: Label über jeder Adresse (Kontaktkarte + Footer) */
.contact-line__loc { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-bright); margin-bottom: 0.15rem; }
.footer__loc { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-bright); margin-bottom: 0.2rem; }

/* Responsive für die neuen Bausteine */
@media (max-width: 1024px) {
  /* Reihenfolge am Handy: Kicker, Ueberschrift, Einleitung, dann die drei Fotos,
     danach Aussage, Schaltflaechen und Formel. */
  /* Nils 07.09.2026 nach Michaels Bildschirmfoto: auf kleineren Geraeten klebte
     „ENGINEERING. OPERATIONS. BUSINESS." zu dicht unter der Kopfzeile — gemessen
     waren es 28 px Luft bei 76 px Kopfzeilenhoehe. Der untere Anschlag der
     Spanne steigt deshalb, die Hoehenabhaengigkeit bleibt fuer grosse Geraete. */
  .hero { min-height: auto; padding-top: clamp(7.8rem, 13vh, 9rem); display: flex; flex-direction: column; }
  .hero__inner { display: contents; }
  .hero__grid { display: contents; }
  .hero__content { padding-inline: var(--gutter); max-width: none; margin-left: 0; }
  .hero__content { order: 1; }
  .hero__band { order: 2; }
  .hero__content--unten { order: 3; margin-top: 1.6rem; }
  .hero__phases { order: 4; padding-inline: var(--gutter); }
  /* Band wandert unter den Text und laeuft randlos ueber die volle Breite.
     inset:auto ist Pflicht: die Grundregel setzt top/bottom, die wuerden das
     Band als relatives Element nach unten schieben. Breite ueber 100vw statt
     negativer Raender, sonst haengt es an der Container-Breite und ragt hinaus. */
  .hero__band {
    position: relative; inset: auto;
    /* zwei Pixel Ueberstand: sonst endet das Band auf einer Bruchteilbreite und
       die letzte Geraetepixelspalte zeigt den Seitenhintergrund als Haarlinie */
    width: calc(100vw + 4px); max-width: none;
    margin-left: 50%; transform: translateX(-50%);
    height: clamp(200px, 34vh, 300px);
    margin-top: 2.2rem;
  }
  /* Nils 06.09. abends: am Handy KEINE weichen Ein-/Ausblendungen mehr an den
     Sektionsraendern. Das Bildband bekommt oben und unten eine saubere Kante,
     der Schleier des Bandes, die obere Maske des Plans und die Ausblendung der
     Hero-Sektion nach unten entfallen. Am Rechner bleibt alles wie es war. */
  /* am Handy hat das Planbild keine Verlaengerung — der Scrim bleibt im Band */
  .hero__band-scrim { background: none; inset: 0; }
  .hero__panel--plan img { -webkit-mask-image: none; mask-image: none; }
  .hero::after { display: none; }
  /* Nils 06.09. abends: von den drei Fotos bleibt das ERSTE auch im Hellmodus
     dunkel, die beiden anderen duerfen hell werden. Der Plan liegt freigestellt
     vor (helle Linien auf Alpha) — er braucht also eine dunkle Platte statt der
     Invertierung, sonst verschwindet die Zeichnung auf Weiss. Nur am Handy:
     am Rechner laeuft das Panel unter den Text und wuerde dort wieder einen
     Kasten zeichnen (Entscheidung 05.09.). */
  .hero__panel--plan { background: #0b1116; }
  :root[data-theme="light"] .hero__panel--plan img { filter: saturate(0.85) contrast(1.05); }
  /* Anlagenfoto am Handy: eigene, enger geschnittene Fassung
     (iwz-prozessoptimierung-mobil.webp ueber <picture>) — Michael Zwanzger
     07.09.2026 im Anmerkungs-Layer, fb_84f130ea5698: „mehr mittigen ausschnitt
     nehmen (mobil)". Die Vollfassung fuellt den schmalen Keil ueber die HOEHE
     aus, deshalb blieb `object-position` in Y wirkungslos (der Wert 50% 62%
     stammte noch vom fruueheren Hallenfoto) und oben lag die Deckenverrohrung,
     unten der unscharfe Foerderband-Vordergrund im Bild. Die Handyfassung zeigt
     den mittigen Bereich um die Kollegin. */
  .hero__panel--mitte img { object-position: 62% 50%; }
  .hero__panel--capex img { filter: grayscale(1) brightness(0.96) contrast(1.05); }
  /* Gruene Kante an der OBERkante des Bandes (Nils 06.09.: „nur oben einen an
     die Kante"). Liegt auf dem Band, damit der Zuschnitt der Panels sie nicht
     wegschneidet. */
  .hero__band::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--brand-bright) 70%, transparent) 12%,
      color-mix(in srgb, var(--brand-bright) 90%, transparent) 50%,
      color-mix(in srgb, var(--brand-bright) 70%, transparent) 88%,
      transparent 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-bright) 45%, transparent);
  }
  /* Am Handy traegt die Phasenleiste selbst Linie, Punkte und Beschriftung
     (Nils 07.09.). Die eigene Punktzeile wird deshalb nicht mehr gebraucht. */
  .hero__punkte { display: none; }
  /* Nils 06.09. abends: die vier Phasen-Punkte gehoeren am Handy direkt unter
     die Bilder, nicht unter die Schaltflaechen. Reihenfolge daher:
     Text - Bilder - Punktzeile - Phasen - Aussage/CTA/Formel. */
  /* Reihenfolge am Handy: Text - Bilder - Linie mit vier Punkten und
     Beschriftung - Aussage „HIGH END ENGINEERING…" - Aussage/CTA/Formel. */
  .hero__phases {
    order: 3; margin-top: 0; padding-top: 0; gap: 0;
    display: flex; flex-direction: column;
  }
  .hero__claim { order: 2; margin-top: 1.1rem; padding-inline: 0; }
  .phasebar { order: 1; }
  .hero__content--unten { order: 5; margin-top: 2rem; }
  /* Nils 09.09. (Bildschirmfotos 676 px und iPad Pro): das linke Foto bekommt
     eine GERADE linke Kante wie das rechte Foto rechts — bisher galt das nur
     bis 600 px, darueber stand ein dunkler Keil oben links. Spalten so, dass
     alle vier sichtbaren Keile gleich breit sind (t1−s/2, t2, t3, t4+s/2),
     Summe 100 %, sonst haengt das letzte Foto rechts hinaus. */
  .hero__band {
    grid-template-columns:
      calc(100% / 4 + var(--schraeg) / 2)
      calc(100% / 4)
      calc(100% / 4)
      calc(100% / 4 - var(--schraeg) / 2);
  }
  .hero__panel:first-of-type { clip-path: polygon(0 0, 100% 0, calc(100% - var(--schraeg)) 100%, 0 100%); }
  .hero__phases { grid-template-columns: 1fr; gap: 0.8rem; }
  /* Handy UND Tablet (ueberall, wo das Band im Fluss liegt): die Linie liegt
     GENAU auf der Unterkante der Fotos, die vier Punkte sitzen darauf und jede
     Beschriftung steht unter ihrem Punkt (Nils 07.09.). Die Leiste laeuft
     randlos ueber die volle Breite, damit die Linie so weit reicht wie das
     Bildband. Bis 09.09. galt das erst ab 860 px abwaerts — am iPad (861–1024)
     lief die Rechner-Leiste ueber ein Band im Fluss und die Beschriftungen
     ueberlappten sich. */
  .phasebar {
    width: calc(100vw + 4px); max-width: none; margin: 0 0 0 50%;
    transform: translateX(-50%);
    /* kein Innenabstand am Raster selbst: die Prozentspalten muessen auf die
       volle Bandbreite rechnen, sonst wandern die Punkte je Spalte um ein
       Viertel des Abstands nach links (gemessen −9/−18/−27 px bei 1024) */
    padding: 0;
    /* Spalten auf die Schnittkanten gerechnet: die Kanten liegen an der Unter-
       kante des Bandes bei 25 %, 50 % und 75 % MINUS einer halben Schraege
       (die Panels 2–4 ragen um die Schraege nach links in den Vorgaenger).
       Punkt 01 sitzt im ersten Keil. Bis 09.09. waren es vier gleiche Spalten —
       am Tablet mit 70–92 px Schraege standen die Punkte damit 35–46 px neben
       den Kanten (iPad-Pro-Bildschirmfoto von Nils, 09.09.). */
    grid-template-columns:
      calc(25% - var(--schraeg) / 2)
      25%
      25%
      calc(25% + var(--schraeg) / 2);
    column-gap: 0; row-gap: 0;
  }
  .phasebar__step, .phasebar__step--1, .phasebar__step--2,
  .phasebar__step--3, .phasebar__step--4 { grid-row: 1; grid-column: auto; justify-self: start; padding-left: var(--gutter); padding-right: 0.25rem; min-width: 0; }
  .phasebar__step--1 { grid-column: 1; }
  .phasebar__step--2 { grid-column: 2; padding-left: 0; }
  .phasebar__step--3 { grid-column: 3; padding-left: 0; }
  .phasebar__step--4 { grid-column: 4; padding-left: 0; padding-right: var(--gutter); }
  .phasebar__step .phasebar__punkt { left: var(--gutter); right: auto; }
  .phasebar__step--2 .phasebar__punkt,
  .phasebar__step--3 .phasebar__punkt,
  .phasebar__step--4 .phasebar__punkt { left: 0; }
  .phasebar__no { display: block; margin-bottom: 0.15rem; }
  .phasebar__label { white-space: normal; font-size: 0.68rem; line-height: 1.25; }
  .phasebar__linie { display: block; top: 0; }
}
@media (max-width: 860px) {
  .brand__logo { height: calc(42px * var(--logo-skala-handy, 1)); }
  .clamp__bracket { display: none; }
  .clamp { padding-top: 0; }
  .clamp__body { flex-direction: column; gap: 0.9rem; }
}
@media (max-width: 600px) {
  .kpi__grid, .kpi__grid--impact { grid-template-columns: 1fr; gap: 0.5rem; }
  .spec { padding: 0.75rem 0.9rem; }
  .spec--impact { grid-template-columns: 1fr; gap: 0.4rem; }
  .spec--impact__co2, .spec--impact__rate { grid-column: 1; grid-row: auto; align-self: start; }
  .spec--impact__co2 { padding-left: 0; border-left: 0; }
  /* Nils 06.09. abends: die Pille unter der CO2e-Zeile war gequetscht und sah
     abgeschnitten aus — Ursache war das gemeinsame padding-left:0/border-left:0
     mit dem CO2-Block: der Text klebte ohne linken Innenabstand an einer Kapsel
     ohne linken Rand. Jetzt eigene, ausgewogene Masse, Text mittig, Tap-Ziel
     44 px, kein Umbruch in der Zahl. */
  .spec--impact__rate {
    justify-self: start;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0.55rem 1.05rem; margin-top: 0.35rem;
    font-size: clamp(0.82rem, 3.4vw, 0.95rem); letter-spacing: 0.01em; line-height: 1.2;
    white-space: nowrap;
    background: color-mix(in srgb, var(--brand-bright) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-bright) 35%, transparent);
  }
  /* Handy: alle VIER Keile gleich breit (Nils 06.09., seit 07.09. abends vier
     Motive). Panel 1 hat links eine gerade Kante, Panel 4 rechts. Wichtig: ein
     Panel mit negativem linken Rand wird um genau diesen Betrag BREITER als
     seine Spalte — die Spalten muessen deshalb zusammen 100 % ergeben, sonst
     haengt das letzte Foto rechts hinaus (gemessen: 71 px Ueberhang).
     Sichtbar bleiben dann t1−s/2, t2, t3 und t4+s/2. Die Schraege faellt bei
     vier schmalen Keilen auf 26 px, sonst frisst sie den halben Keil. */
  /* 26 px Schraege gelten fuer Band UND Phasenleiste — deshalb am .hero gesetzt,
     nicht nur am Band (sonst rechnet die Leiste mit den 70 px des Rechners und
     die Punkte stehen 18 px neben den Kanten, gemessen 09.09.). */
  .hero { --schraeg: 26px; }
  .hero__band { height: clamp(200px, 30vh, 260px); margin-top: 1.8rem; }
  /* Erste Station naeher an die linke Kante (das erste Foto hat dort jetzt eine
     gerade Kante), sonst fehlt „Engineering" am Handy die Breite. */
  .phasebar__step--1 { padding-left: 0.6rem; }
  .phasebar__step .phasebar__punkt { left: 0.6rem; }
  .phasebar__step--2 .phasebar__punkt, .phasebar__step--3 .phasebar__punkt, .phasebar__step--4 .phasebar__punkt { left: 0; }
  /* 0,62rem statt 0,68: „Engineering" (DE wie EN) muss in die erste Spalte
     (25 % minus halbe Schraege minus Innenabstand, bei 390 px rund 67 px) passen,
     sonst bricht das Wort mitten durch (gemessen 09.09.). */
  .phasebar__label { overflow-wrap: anywhere; font-size: 0.62rem; }
  /* Nummer UEBER der Beschriftung statt daneben: das Zweispalten-Raster der
     Station liess der Beschriftung bei 360 px nur 42 px (gemessen 09.09.), so
     brach „Engineering" mitten im Wort. */
  .phasebar__step { grid-template-columns: 1fr; row-gap: 0.1rem; }
  .hero__formula { font-size: 0.64rem; column-gap: 0.5rem; }
  .hero__claim { font-size: 0.64rem; letter-spacing: 0.1em; }
  .ways__grid { grid-template-columns: 1fr; }
  .way__box { flex-direction: row; align-items: center; gap: 0.8rem; }
  .way__icon { margin-bottom: 0; }
  .way__hint { display: none; }
  .phasebar__label { white-space: normal; }
  .hero__ctas .btn--lg { width: 100%; font-size: clamp(0.9rem, 3.6vw, 1rem); padding-inline: 1.2rem; }
}

/* Sehr schmale Geräte (320px): Grid-Blowout und lange Wörter abfangen.
   Grid-Items haben min-width:auto und können sonst nicht unter ihre
   Inhaltsbreite schrumpfen — das schob das Kennzahlen-Band aus dem Bild. */
.kpi__grid > *, .card-grid > *, .usp-grid > *, .cred > *, .project-grid > *, .ways__grid > * { min-width: 0; }
.spec__value, .spec__value--impact { overflow-wrap: anywhere; }
.hero__title, .section-title, .page-head__title, .phase__title, .svc__title, .clamp__title { overflow-wrap: break-word; }
.legal p, .legal li, .legal h2, .legal h3, .contact-line span, .footer__link { overflow-wrap: anywhere; }
/* Bis 380 px passten Wortmarke, Umschalter und Menuetaste nicht nebeneinander:
   bei 320 px war die Seite 358 px breit und liess sich seitlich schieben
   (gemessen 07.09.2026). Die Wortmarke bleibt, die Bedienelemente ruecken
   enger zusammen und werden etwas kleiner — Tap-Ziel bleibt ueber 34 px. */
@media (max-width: 380px) {
  /* Die Phasenleiste war der eigentliche Grund fuer den seitlichen Schub:
     „Hochwertiges Rezyklat" passte nicht in eine Viertelspalte, und ein
     Rasterkind kann ohne min-width:0 nicht unter seine Inhaltsbreite. */
  .phasebar__step { min-width: 0; justify-self: stretch; }
  .phasebar__label { overflow-wrap: anywhere; font-size: 0.56rem; }   /* 360–380 px: erste Spalte 63–67 px, „Engineering" braucht bei 0,62rem 66 px (09.09.) */
  .header__inner { gap: 0.6rem; }
  .header__actions { gap: 0.3rem; }
  .ctrl { height: 34px; min-width: 34px; padding: 0 0.35rem; font-size: 0.72rem; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .header__burger { width: 36px; height: 34px; }
}
@media (max-width: 360px) {
  .hero__title, .section-title, .page-head__title { hyphens: auto; }
  .slogan li { font-size: 0.68rem; letter-spacing: 0.08em; }
}
/* 14.09.: bei 42 px Logohoehe fehlen unter 340 px rund 12 px, das Bild wurde
   ueber max-width gestaucht (3,24 statt 3,53) — dort eine Stufe kleiner. */
@media (max-width: 340px) {
  .brand__logo { height: calc(36px * var(--logo-skala-handy, 1)); }
}
.footer__ai { margin: 0.9rem 0 0; font-size: 0.72rem; color: var(--text-faint); max-width: 62rem; }

/* ------------------------------------------------- UNTERMENUE (Nav-Dropdown)
   Wunsch IWZ 03.09.2026: unter „Leistungen" die Abschnitte direkt anspringen,
   ohne die ganze Seite zu durchsuchen. Oeffnet beim Ueberfahren UND beim
   Tastaturfokus; auf Touch uebernimmt main.js den ersten Tipp. */
.header__nav-item { position: relative; display: inline-flex; }
.header__nav-link--parent { display: inline-flex; align-items: center; gap: 0.3rem; }
.header__nav-caret { width: 13px; height: 13px; opacity: 0.7; transition: transform 0.25s var(--ease); }
.header__nav-item:hover .header__nav-caret,
.header__nav-item.is-open .header__nav-caret { transform: rotate(180deg); }
.header__sub {
  position: absolute; top: calc(100% + 0.45rem); left: 0; z-index: 30;
  min-width: 15rem; padding: 0.45rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  border-radius: var(--radius); border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s var(--ease);
}
.header__nav-item:hover .header__sub,
.header__nav-item:focus-within .header__sub,
.header__nav-item.is-open .header__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
/* unsichtbare Bruecke, damit der Zeiger die Luecke ueberqueren kann */
.header__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
.header__sub-link {
  padding: 0.55rem 0.75rem; border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--text-dim);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.header__sub-link:hover { background: var(--brand-tint); color: var(--text); padding-left: 0.95rem; }
.mobile-menu__sub { display: flex; flex-direction: column; gap: 0.1rem; margin: -0.2rem 0 0.5rem 0.2rem; }
.mobile-menu__sub-link {
  font-size: 1rem; color: var(--text-dim); padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 1px solid var(--line);
}
.mobile-menu__sub-link:hover { color: var(--brand-bright); }

/* Brandschutz als Schwerpunkt hervorheben (Wunsch IWZ 03.09.2026). Seit der
   Rueckmeldung vom 07.09.2026 traegt die Karte einen leicht roetlichen statt
   gruenen Ton — Brandschutz ist das eine Thema, das sich farblich vom uebrigen
   Gruen absetzen darf. Der Ton bleibt bewusst gedeckt (kein Warnrot). */
.svc--highlight {
  --hl: #cf5a3c;                    /* geerdetes Ziegelrot, auf Dunkel lesbar */
  --hl-tint: rgba(207, 90, 60, 0.13);
  overflow: visible;   /* sonst schneidet die Karte ihr eigenes Abzeichen ab */
  background: linear-gradient(160deg, var(--hl-tint), transparent 55%), var(--glass-bg-2);
  border-color: color-mix(in srgb, var(--hl) 42%, var(--glass-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl) 16%, transparent), var(--glow);
}
:root[data-theme="light"] .svc--highlight {
  --hl: #a8412a;
  --hl-tint: rgba(168, 65, 42, 0.08);
}
.svc--highlight:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl) 30%, transparent), var(--shadow); }
.svc--highlight .svc__icon { background: color-mix(in srgb, var(--hl) 20%, transparent); color: var(--hl); }
/* Das Abzeichen sitzt auf der oberen Kante der Karte (Nils 07.09.), damit im
   Inneren jede Karte gleich aufgebaut ist und nur das Abzeichen den Schwerpunkt
   markiert. */
.svc__badge {
  position: absolute; top: 0; left: 1.5rem; transform: translateY(-50%); z-index: 2;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: var(--pill);
  background: var(--brand); color: var(--on-brand);
}
/* kein Versatz mehr: das Symbol steht auf derselben Hoehe wie in den uebrigen Karten */
.svc--highlight .svc__index { color: var(--hl); }
/* Michael 07.09.2026: „auch in oranger farbe" — der Schalter der Schwerpunkt-
   karte traegt denselben Ton wie Rahmen, Symbol und Ziffer. */
.svc--highlight .svc__more { color: var(--hl); }

/* Englische Kundenkorrekturen: die gelieferten Absatzwechsel erhalten. */
html[lang="en"] :is(.section-intro, .page-head__intro, .svc__desc, .project__desc, .team-row__note, .footer__tag) { white-space: pre-line; }
/* Die laengeren englischen Phasentitel brauchen auf schmalen Rechnern
   zwei Zeilen innerhalb ihrer eigenen Bildspalte. */
@media (min-width: 1025px) and (max-width: 1279px) {
  html[lang="en"] .phasebar__step { justify-self: stretch; min-width: 0; grid-template-columns: auto minmax(0, 1fr); padding-right: 0.6rem; }
  html[lang="en"] .phasebar__label { white-space: normal; }
}