/* =========================================================
   Broder AG - Apple/DJI inspired design system
   Monochrome · Precision · Swiss
   ========================================================= */

/* ====== Self-hosted Source Sans 3 (kein Google-CDN) =======
   woff2-Files unter /fonts/ ablegen.
   Falls Dateien fehlen, fällt der Browser auf den System-Stack zurück
   (siehe --f-sans). Zum Erzeugen der Files: ./fonts/download.sh
   ========================================================= */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200; font-display: swap; src: local('Source Sans 3 ExtraLight'), url('fonts/sourcesans3-200.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300; font-display: swap; src: local('Source Sans 3 Light'), url('fonts/sourcesans3-300.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: local('Source Sans 3 Regular'), url('fonts/sourcesans3-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 500; font-display: swap; src: local('Source Sans 3 Medium'), url('fonts/sourcesans3-500.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: local('Source Sans 3 SemiBold'), url('fonts/sourcesans3-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: local('Source Sans 3 Bold'), url('fonts/sourcesans3-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200; font-display: swap; src: local('Source Sans 3 ExtraLight Italic'), url('fonts/sourcesans3-200i.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 300; font-display: swap; src: local('Source Sans 3 Light Italic'), url('fonts/sourcesans3-300i.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap; src: local('Source Sans 3 Italic'), url('fonts/sourcesans3-400i.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 500; font-display: swap; src: local('Source Sans 3 Medium Italic'), url('fonts/sourcesans3-500i.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 600; font-display: swap; src: local('Source Sans 3 SemiBold Italic'), url('fonts/sourcesans3-600i.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 700; font-display: swap; src: local('Source Sans 3 Bold Italic'), url('fonts/sourcesans3-700i.woff2') format('woff2'); }

:root {
  color-scheme: light dark;

  /* Light theme - Apple/Swiss clean */
  --ink:          #f5f5f7;   /* page background */
  --ink-2:        #ffffff;   /* section surface */
  --ink-3:        #ebebed;   /* subtle surface */
  --paper:        #1d1d1f;   /* primary text */
  --paper-2:      #424245;   /* secondary text */
  --paper-3:      #6e6e73;   /* tertiary text */
  --muted:        #6e6e73;
  --muted-2:      #86868b;
  --line:         rgba(0,0,0,0.09);
  --line-dark:    rgba(0,0,0,0.11);  /* for dark islands */

  /* Theme-following tints (subtle backgrounds & hovers) */
  --tint-1:       rgba(0,0,0,0.025);
  --tint-2:       rgba(0,0,0,0.04);
  --tint-3:       rgba(0,0,0,0.06);
  --tint-4:       rgba(0,0,0,0.08);
  --tint-5:       rgba(0,0,0,0.12);
  --tint-6:       rgba(0,0,0,0.18);

  /* Theme-following borders */
  --border-soft:    rgba(0,0,0,0.06);
  --border-medium:  rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);

  /* Theme-following text (on light surface in light, on dark surface in dark) */
  --text-strong:  rgba(0,0,0,0.92);
  --text:         rgba(0,0,0,0.78);
  --text-soft:    rgba(0,0,0,0.62);
  --text-softer:  rgba(0,0,0,0.45);

  /* Brand accent for link-text on themed surfaces (lightens in dark for contrast) */
  --accent-text:  #0061AF;

  /* Glass surfaces (frosted-glass cards) — white in light, raised-dark in dark */
  --glass-thin:    rgba(255,255,255,0.30);
  --glass-thin-2:  rgba(255,255,255,0.40);
  --glass-thin-3:  rgba(255,255,255,0.45);
  --glass-5:       rgba(255,255,255,0.50);
  --glass-55:      rgba(255,255,255,0.55);
  --glass-6:       rgba(255,255,255,0.60);
  --glass-7:       rgba(255,255,255,0.70);
  --glass-78:      rgba(255,255,255,0.78);
  --glass-85:      rgba(255,255,255,0.85);
  --glass-9:       rgba(255,255,255,0.92);

  /* Tokens for dark islands (hero, field--dark) — same in both themes */
  --ink-dark:     #0a0a0a;
  --ink-dark-2:   #111111;
  --paper-on-dark:#ffffff;
  /* Broder Brand - aus dem offiziellen Logo */
  --brand-blue:       #0061AF;
  --brand-blue-deep:  #004B87;
  --brand-blue-soft:  #2B80C5;
  --brand-grey:       #C2C4C7;
  --brand-grey-2:     #8A8D92;

  /* Semantic aliases - rest of stylesheet reads these */
  --accent:           #0061AF;
  --accent-2:         #004B87;

  --f-sans:    "Source Sans 3", "Source Sans Pro", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  /* Single-font system: display + serif both alias to sans, weight contrast replaces italic */
  --f-display: var(--f-sans);
  --f-serif:   var(--f-sans);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.65, 0, 0.35, 1);

  --radius:     14px;
  --radius-lg:  22px;

  --container:  1240px;

  /* Glass surface tokens - light theme default */
  --glass-bg:        rgba(255,255,255,0.62);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-blur:      saturate(180%) blur(22px);
  --glass-border:    rgba(0,0,0,0.08);
  --glass-border-strong: rgba(0,0,0,0.16);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.85);
  --glass-shadow:    0 10px 30px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;

  /* Dark-island glass (for hero, field--dark) */
  --glass-bg-dark:        rgba(255,255,255,0.08);
  --glass-bg-dark-strong: rgba(255,255,255,0.11);
  --glass-border-dark:    rgba(255,255,255,0.14);
  --glass-border-dark-strong: rgba(255,255,255,0.24);
  --glass-highlight-dark: inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-shadow-dark:    0 10px 30px rgba(0,0,0,0.35);
}

/* =========================================================
   DARK MODE — switches with OS preference
   Surfaces, text, tints, borders invert.
   Brand color (--accent) lightens to --accent-text for AA contrast.
   "Always-dark" islands (.hero, .field--dark, .nav.is-open) keep their literals.
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #0a0a0c;
    --ink-2:        #161618;
    --ink-3:        #1f1f22;
    --paper:        #f5f5f7;
    --paper-2:      #c7c7cc;
    --paper-3:      #98989d;
    --muted:        #98989d;
    --muted-2:      #6e6e73;
    --line:         rgba(255,255,255,0.10);
    --line-dark:    rgba(255,255,255,0.14);

    --tint-1:       rgba(255,255,255,0.025);
    --tint-2:       rgba(255,255,255,0.04);
    --tint-3:       rgba(255,255,255,0.06);
    --tint-4:       rgba(255,255,255,0.08);
    --tint-5:       rgba(255,255,255,0.12);
    --tint-6:       rgba(255,255,255,0.18);

    --border-soft:    rgba(255,255,255,0.06);
    --border-medium:  rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.18);

    --text-strong:  rgba(255,255,255,0.92);
    --text:         rgba(255,255,255,0.78);
    --text-soft:    rgba(255,255,255,0.62);
    --text-softer:  rgba(255,255,255,0.45);

    --accent-text:  #5fb5ff;

    /* Glass surfaces — flip from white-frost to raised-dark in dark mode */
    --glass-thin:    rgba(28,28,32,0.40);
    --glass-thin-2:  rgba(28,28,32,0.55);
    --glass-thin-3:  rgba(28,28,32,0.60);
    --glass-5:       rgba(28,28,32,0.65);
    --glass-55:      rgba(32,32,36,0.70);
    --glass-6:       rgba(32,32,36,0.72);
    --glass-7:       rgba(34,34,38,0.78);
    --glass-78:      rgba(36,36,40,0.82);
    --glass-85:      rgba(40,40,44,0.86);
    --glass-9:       rgba(44,44,48,0.92);

    /* Glass surfaces tinted to dark */
    --glass-bg:        rgba(22,22,24,0.62);
    --glass-bg-strong: rgba(22,22,24,0.82);
    --glass-border:    rgba(255,255,255,0.10);
    --glass-border-strong: rgba(255,255,255,0.18);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.06);
    --glass-shadow:    0 10px 30px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.05) inset;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Atmospheric colour wash - gives the backdrop-filter something to blur */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 15% 8%, rgba(0,97,175, 0.1), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(0,97,175,0.04), transparent 65%),
    radial-gradient(1000px 700px at 70% 85%, rgba(0,97,175, 0.06), transparent 60%),
    radial-gradient(800px 500px at 10% 75%, rgba(194,196,199, 0.18), transparent 70%);
}
img { max-width: 100%; display: block; }
/* <picture> ist Layout-transparent — sonst bricht max-height:100% in flex/sized containers */
picture { display: contents; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease-out), opacity .2s var(--ease-out); }
em, i { font-family: inherit; font-style: normal; font-weight: 500; letter-spacing: inherit; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* =========================================================
   SKIP-LINK — A11y, sichtbar nur bei Tastatur-Fokus
   ========================================================= */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s var(--ease-out), backdrop-filter .35s var(--ease-out), border-color .35s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: var(--glass-7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.02em; font-size: 20px;
}
.brand-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: transform .25s var(--ease-out);
}
.brand:hover .brand-chip {
  transform: translateY(-1px);
}
.brand-logo {
  display: block;
  height: 22px; width: auto;
  max-width: 180px;
}
.brand-chip--footer {
  padding: 0;
  border-radius: 0;
  margin-bottom: 18px;
}
.brand-logo--footer { height: 32px; }
.brand-name { position: relative; padding-right: 14px; }
.brand-dot {
  position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}
.nav-links {
  margin: 0; padding: 0; list-style: none;
  display: flex; gap: 28px; flex: 1; justify-content: center;
}
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap;
  transition: color .3s var(--ease-out);
}
.nav-links a:hover { color: var(--paper); }
.nav-cta {
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: var(--paper);
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.nav-cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav-burger { display: none; background: none; border: 0; padding: 10px; }
.nav-burger span {
  display: block; width: 22px; height: 1.5px; background: var(--paper); margin: 5px 0;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), background .3s var(--ease-out);
}

@media (max-width: 1180px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-block; margin-left: auto; outline: none; }
  .nav-burger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
  }
  /* Full-screen overlay when menu open — covers everything including hero */
  .nav.is-open {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--ink);
  }
  .nav.is-open .nav-inner {
    height: 100vh;
    align-items: flex-start;
  }
  .nav.is-open .nav-links {
    display: flex; position: fixed; inset: 64px 0 0 0;
    flex-direction: column; align-items: center; justify-content: flex-start;
    background: var(--ink);
    gap: 28px; font-size: 22px; z-index: 101;
    padding: clamp(40px, 8vh, 72px) 24px 140px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open .nav-links a {
    color: var(--paper);
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .nav.is-open .nav-links a:hover,
  .nav.is-open .nav-links a.is-current { color: var(--accent); }
  .nav.is-open .nav-links a.is-current::after { background: var(--accent); }
  .nav.is-open .nav-cta {
    display: inline-block; position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
    z-index: 102;
    background: var(--paper); color: var(--ink);
    border-color: var(--paper);
    padding: 12px 28px; font-size: 16px;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,0.25);
  }
  .nav.is-open .nav-burger { z-index: 103; position: relative; }
  .nav.is-open .nav-burger span { background: var(--paper); }
  .nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* Lock body scroll when menu open */
  body:has(.nav.is-open) {
    overflow: hidden;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
}
.hero .hero-title { color: #ffffff; }
.hero .hero-eyebrow { color: rgba(255,255,255,0.72); }

/* =========================================================
   HERO - BRIGHT VARIANT (Unimog U500 exploded CAD)
   ========================================================= */
.hero--bright {
  color: var(--paper);
  background:
    radial-gradient(1200px 800px at 70% 40%, rgba(0,97,175,0.10), transparent 60%),
    radial-gradient(900px 700px at 20% 80%, rgba(194,196,199,0.25), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
}
.hero--bright .hero-title { color: var(--paper); }
.hero--bright .hero-eyebrow { color: var(--muted); letter-spacing: 0.22em; }
.hero--bright .hero-sub { color: rgba(0,0,0,0.72); }
.hero--bright .hero-meta { color: rgba(0,0,0,0.6); border-top-color: rgba(0,0,0,0.09); }
.hero--bright .hero-meta .hm-k { color: rgba(0,0,0,0.45); }
.hero--bright .hero-meta .hm-v { color: var(--paper); }
.hero--bright .hero-scroll { border-color: rgba(0,0,0,0.35); }
.hero--bright .hero-scroll span { background: var(--paper); }
.hero--bright .btn-ghost {
  background: rgba(255,255,255,0.55);
  color: var(--paper);
  border-color: rgba(0,0,0,0.14);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.hero--bright .btn-ghost:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.22);
}

/* Blueprint grid */
.hero-grid {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(0,97,175,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,97,175,0.055) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, #000 55%, transparent 90%);
          mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, #000 55%, transparent 90%);
}

/* Atmospheric glows */
.hero-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.hero-glow--a {
  top: -10%; right: -5%;
  width: 55%; height: 70%;
  background: radial-gradient(circle, rgba(0,97,175,0.32) 0%, transparent 65%);
  animation: heroGlowA 14s ease-in-out infinite alternate;
}
.hero-glow--b {
  bottom: -20%; left: -10%;
  width: 55%; height: 60%;
  background: radial-gradient(circle, rgba(194,196,199,0.55) 0%, transparent 65%);
  animation: heroGlowB 18s ease-in-out infinite alternate;
}
@keyframes heroGlowA { to { transform: translate(-40px, 30px) scale(1.08); } }
@keyframes heroGlowB { to { transform: translate(50px, -20px) scale(1.1); } }

/* Hero photo - Unimog U500 in Sargans */
.hero-photo {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(380px, 44vw, 680px);
  aspect-ratio: 4 / 3;
  margin: 0;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -30px rgba(0,70,140,0.35),
    0 18px 40px -18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.3);
  opacity: 0;
  animation: heroPhotoIn 1.4s var(--ease-out) 0.3s forwards;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 60%;
  transform: scale(1.06);
  animation: heroPhotoZoom 16s var(--ease-out) 0.3s forwards;
  will-change: transform;
}
.hero-photo-caption {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 12px 30px rgba(0,40,90,0.18);
  opacity: 0;
  animation: heroPhotoCaptionIn 0.9s var(--ease-out) 1.1s forwards;
}
.hero-photo-kicker {
  font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  font-weight: 500;
}
.hero-photo-title {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 28px; line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-top: 2px;
}
@keyframes heroPhotoIn {
  from { opacity: 0; transform: translate(24px, -50%) scale(0.97); }
  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes heroPhotoZoom {
  to { transform: scale(1); }
}
@keyframes heroPhotoCaptionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero slideshow - cycles through the four Geschäftsbereiche */
.hero-photo--slideshow .hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-photo--slideshow .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  will-change: opacity;
}
.hero-photo--slideshow .hero-slide.is-active { opacity: 1; }
.hero-photo--slideshow .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transform: none;
  animation: none;
}
.hero-photo--slideshow .hero-slide[data-title="Maschinenbau"] img { object-position: 55% 60%; }
.hero-photo--slideshow .hero-slide[data-title="Erdwärme"] img { object-position: 50% 45%; }
.hero-photo--slideshow .hero-slide[data-title="Verbindungsleitungen"] img { object-position: 50% 50%; }
.hero-photo--slideshow .hero-slide[data-title="Elementbau"] img { object-position: 50% 55%; }
.hero-photo-caption .hero-photo-kicker,
.hero-photo-caption .hero-photo-title {
  transition: opacity 250ms var(--ease-out);
}
.hero-photo-caption.is-swapping .hero-photo-kicker,
.hero-photo-caption.is-swapping .hero-photo-title {
  opacity: 0;
}
.hero-slide-dots {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  gap: 8px;
  z-index: 3;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255,255,255,0.55);
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.28);
  padding: 0;
  cursor: pointer;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out), width 220ms var(--ease-out);
}
.hero-dot:hover { background: rgba(0,0,0,0.55); }
.hero-dot.is-active {
  background: var(--accent);
  width: 22px;
  border-radius: 6px;
}
@media (max-width: 720px) {
  .hero-slide-dots { right: 14px; top: 14px; padding: 6px 8px; gap: 6px; }
  .hero-dot { width: 7px; height: 7px; }
  .hero-dot.is-active { width: 18px; }
}

/* On hero--bright, content sits above the photo */
.hero--bright .hero-content { position: relative; z-index: 5; }
.hero--bright .hero-meta    { position: absolute; z-index: 5; }
.hero--bright .hero-scroll  { z-index: 5; }

@media (min-width: 1025px) {
  .hero--bright .hero-content { max-width: 52%; margin-left: max(24px, calc(50vw - var(--container) / 2)); }
  .hero--bright .hero-title { font-size: clamp(40px, 5.8vw, 84px); }
  .hero--bright .hero-sub { max-width: 40ch; }
}

@media (max-width: 1100px) {
  /* Below desktop: stack hero vertically — content LEFT-aligned at top, photo below */
  .hero--bright {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 120px;
    padding-bottom: 120px;
    min-height: auto;
    text-align: left;
  }
  .hero--bright .hero-content {
    order: 1 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 clamp(20px, 4vw, 48px);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
  .hero--bright .hero-eyebrow {
    justify-content: flex-start;
    margin-left: 0;
  }
  .hero--bright .hero-title {
    font-size: clamp(36px, 6.4vw, 64px);
    text-align: left;
  }
  .hero--bright .hero-sub {
    max-width: 56ch;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .hero--bright .hero-ctas {
    justify-content: flex-start;
  }
  .hero-photo {
    order: 2 !important;
    position: relative !important;
    right: auto !important; top: auto !important;
    transform: none !important;
    width: calc(100% - clamp(24px, 5vw, 64px));
    max-width: 760px;
    margin: clamp(28px, 4vw, 48px) auto 0 !important;
    aspect-ratio: 16 / 10;
    z-index: 1;
  }
  .hero-photo-title { font-size: 26px; }
  /* hero-meta and hero-scroll stay absolutely positioned at bottom — they don't enter flow */
}
@media (max-width: 720px) {
  .hero--bright { padding-top: 96px; padding-bottom: 96px; }
  .hero-photo {
    width: calc(100% - 32px);
    max-width: 520px;
    aspect-ratio: 4 / 3;
    animation: heroPhotoInMobile 1.2s var(--ease-out) 0.3s forwards;
  }
  @keyframes heroPhotoInMobile {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .hero-photo-caption { left: 14px; bottom: 14px; padding: 10px 14px; border-radius: 12px; }
  .hero-photo-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-photo img, .hero-photo-caption,
  .hero-glow--a, .hero-glow--b {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
  }
  .hero-photo img { transform: scale(1) !important; }
  .hero-photo-caption { transform: none !important; }
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 14s var(--ease-out) forwards;
  filter: brightness(0.7) contrast(1.05) saturate(0.9);
}
@keyframes heroZoom { to { transform: scale(1.0); } }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.35) 35%, rgba(10,10,10,0.95) 100%),
    radial-gradient(ellipse at 25% 40%, rgba(10,10,10,0) 0%, rgba(10,10,10,0.35) 70%);
}
.hero-content {
  position: relative;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 140px clamp(20px, 4vw, 40px) 120px;
}
.hero-eyebrow {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  margin: 0 0 28px;
}

/* Hero eyebrow - "Since 1961" prominent variant */
.hero-eyebrow--since {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 32px;
  font-size: 16px;
}
.hero-eyebrow--since .since-mark {
  width: 4px;
  height: 34px;
  background: var(--accent);
  border-radius: 2px;
  flex: 0 0 auto;
}
.hero-eyebrow--since .since-label {
  font-family: var(--f-sans);
  font-style: normal;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: var(--paper-2);
  letter-spacing: -0.005em;
  line-height: 1;
}
.hero-eyebrow--since .since-year {
  font-family: var(--f-sans);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-eyebrow--since .since-meta {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  padding-left: 14px;
  border-left: 1px solid rgba(0,0,0,0.14);
  line-height: 1.2;
}
.hero--bright .hero-eyebrow--since .since-label { color: var(--paper); }
.hero--bright .hero-eyebrow--since .since-meta { color: var(--muted); border-left-color: rgba(0,0,0,0.14); }
.hero:not(.hero--bright) .hero-eyebrow--since .since-label { color: rgba(255,255,255,0.9); }
.hero:not(.hero--bright) .hero-eyebrow--since .since-meta { color: rgba(255,255,255,0.6); border-left-color: rgba(255,255,255,0.22); }

@media (max-width: 600px) {
  .hero-eyebrow--since { gap: 8px 10px; margin-bottom: 24px; }
  .hero-eyebrow--since .since-mark { height: 28px; }
  .hero-eyebrow--since .since-meta { padding-left: 10px; font-size: 11px; letter-spacing: 0.14em; }
}

.hero-title {
  font-family: var(--f-sans);
  font-weight: 200;
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  max-width: 16ch;
}
.hero-title em { font-size: 1.03em; }
.hero-sub {
  font-size: clamp(17px, 1.6vw, 22px);
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
  margin: 0 0 40px;
  line-height: 1.45;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 14px; display: none;
}
.hero-scroll span {
  position: absolute; top: 8px; left: 50%;
  width: 2px; height: 8px; border-radius: 2px; background: #ffffff;
  transform: translateX(-50%);
  animation: scrollDot 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollDot {
  0%   { transform: translate(-50%, 0);   opacity: 1; }
  70%  { transform: translate(-50%, 14px); opacity: 0; }
  71%  { transform: translate(-50%, 0);   opacity: 0; }
  100% { transform: translate(-50%, 0);   opacity: 1; }
}

/* =========================================================
   PAGE HEADER (on sub-pages, not on index)
   ========================================================= */
.page-hero {
  position: relative;
  padding: 180px clamp(20px, 4vw, 40px) clamp(80px, 10vw, 140px);
  background:
    radial-gradient(900px 500px at 75% 15%, rgba(0,97,175,0.09), transparent 65%),
    radial-gradient(700px 500px at 15% 90%, rgba(194,196,199,0.22), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,97,175,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,97,175,0.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 35%, #000 0%, #000 55%, transparent 90%);
          mask-image: radial-gradient(ellipse at 70% 35%, #000 0%, #000 55%, transparent 90%);
}
.page-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.page-hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 28px;
}
.page-hero-kicker::before {
  content: ""; width: 28px; height: 1px; background: currentColor;
}
.page-hero-title {
  font-family: var(--f-sans);
  font-weight: 200;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0 0 28px;
  max-width: 18ch;
}
.page-hero-title em { font-size: 1.03em; }
.page-hero-lede {
  font-size: clamp(17px, 1.55vw, 22px);
  color: var(--text);
  max-width: 58ch;
  margin: 0 0 36px;
  line-height: 1.45;
}
.page-hero-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 44px;
}
.page-hero-breadcrumb a { color: var(--muted); }
.page-hero-breadcrumb a:hover { color: var(--paper); }
.page-hero-breadcrumb span.sep { color: rgba(0,0,0,0.22); }
.page-hero-breadcrumb .current { color: var(--paper); }

/* Page hero - two-column variant with media */
.page-hero--with-media .page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.page-hero--with-media .page-hero-title {
  font-size: clamp(36px, 5.4vw, 76px);
}
.page-hero-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  box-shadow: 0 30px 70px -30px rgba(0, 40, 90, 0.28), 0 10px 30px -12px rgba(0, 40, 90, 0.12);
}
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 960px) {
  .page-hero--with-media .page-hero-inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }
  .page-hero-media { aspect-ratio: 16 / 10; }
}

@media (max-width: 760px) {
  .page-hero { padding-top: 140px; padding-bottom: 72px; }
}

/* Active state for nav link on current page */
.nav-links a.is-current {
  color: var(--paper);
  position: relative;
}
.nav-links a.is-current::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
}

/* On pages that start with a dark hero, nav inverts until scrolled */
.has-dark-hero .nav {
  background: rgba(10,10,10,0.35);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: rgba(255,255,255,0.08);
}
.has-dark-hero .nav-links a { color: rgba(255,255,255,0.78); }
.has-dark-hero .nav-links a:hover { color: #ffffff; }
.has-dark-hero .nav-links a.is-current { color: #ffffff; }
.has-dark-hero .nav-links a.is-current::after { background: #ffffff; }
.has-dark-hero .nav-cta {
  color: #ffffff;
  border-color: rgba(255,255,255,0.32);
}
.has-dark-hero .nav-cta:hover { background: #ffffff; color: var(--paper); border-color: #ffffff; }
.has-dark-hero .nav-burger span { background: #ffffff; }

.has-dark-hero .nav.is-scrolled {
  background: var(--glass-7);
  border-bottom-color: var(--line);
}
.has-dark-hero .nav.is-scrolled .nav-links a { color: var(--text); }
.has-dark-hero .nav.is-scrolled .nav-links a:hover { color: var(--paper); }
.has-dark-hero .nav.is-scrolled .nav-links a.is-current { color: var(--paper); }
.has-dark-hero .nav.is-scrolled .nav-links a.is-current::after { background: var(--accent); }
.has-dark-hero .nav.is-scrolled .nav-cta { color: var(--paper); border-color: var(--border-strong); }
.has-dark-hero .nav.is-scrolled .nav-cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.has-dark-hero .nav.is-scrolled .nav-burger span { background: var(--paper); }

/* =========================================================
   AUS DEM FELD - Bento mosaic (Homepage)
   Photos + autoplay video loops in an asymmetric grid
   ========================================================= */
.feld {
  background: var(--ink-2);
  padding: clamp(80px, 12vw, 160px) 0 clamp(80px, 12vw, 160px);
  border-top: 1px solid var(--line);
}
.feld .container {
  text-align: center;
}
.feld .section-eyebrow,
.feld .section-title,
.feld .section-lede {
  margin-left: auto;
  margin-right: auto;
}
.feld .section-lede {
  max-width: 720px;
  margin-bottom: clamp(48px, 7vw, 80px);
}

.feld-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 18vw, 240px);
  grid-auto-flow: dense;
  gap: clamp(8px, 1.2vw, 16px);
  text-align: left;
}

.feld-tile {
  position: relative;
  margin: 0;
  border-radius: clamp(10px, 1.4vw, 18px);
  overflow: hidden;
  background: var(--ink-3);
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255, 0.6) inset,
    0 8px 24px -12px rgba(0,40,90, 0.18);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.feld-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255, 0.6) inset,
    0 18px 36px -12px rgba(0,40,90,0.24);
}

.feld-tile img,
.feld-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.feld-tile:hover img,
.feld-tile:hover video {
  transform: scale(1.04);
}

/* Bento sizes — asymmetric grid that mixes scales */
.feld-tile--big {
  grid-column: span 2;
  grid-row: span 2;
}
.feld-tile--tall {
  grid-row: span 2;
}
.feld-tile--wide {
  grid-column: span 2;
}
.feld-tile--xwide {
  grid-column: span 3;
}

/* Video tiles get a faint live-indicator dot */
.feld-tile--video::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff453a;
  box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.55);
  animation: feldLive 2.2s ease-out infinite;
}
@keyframes feldLive {
  0%   { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 69, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
}

/* Tablet — drop to 3 columns and re-distribute spans */
@media (max-width: 980px) {
  .feld-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(140px, 22vw, 220px);
  }
  .feld-tile--big { grid-column: span 2; grid-row: span 2; }
  .feld-tile--wide { grid-column: span 3; }
  .feld-tile--xwide { grid-column: span 3; }
  .feld-tile--tall { grid-row: span 2; grid-column: span 1; }
  /* Lone standard tile spans 2 cols at tablet width to avoid grid hole */
  .feld-tile:not([class*=" feld-tile--"]) { grid-column: span 2; }
}

/* Mobile — 2 columns, simpler distribution */
@media (max-width: 640px) {
  .feld-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(140px, 38vw, 200px);
    gap: 8px;
  }
  .feld-tile--big { grid-column: span 2; grid-row: span 2; }
  .feld-tile--wide { grid-column: span 2; }
  .feld-tile--xwide { grid-column: span 2; }
  .feld-tile--tall { grid-row: span 2; grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .feld-tile,
  .feld-tile img,
  .feld-tile video {
    transition: none;
  }
  .feld-tile--video::before { animation: none; }
}

/* =========================================================
   TRUST BAND — clients + awards (Homepage)
   ========================================================= */
.trust {
  background: var(--ink);
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* New trust block / cards layout */
.trust-block + .trust-block { margin-top: clamp(40px, 5vw, 64px); }
.trust-block-label {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-softer);
  font-weight: 600;
}
.trust-clients {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .trust-clients { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-clients { grid-template-columns: 1fr; } }
.trust-client {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 78px;
  padding: 20px 16px;
  background: var(--ink-2);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.trust-client:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px -12px var(--tint-5);
}
.trust-client span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.trust-client--more {
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(135deg, rgba(0,97,175, 0.1), rgba(0,97,175,0.04));
  border-color: rgba(0,97,175,0.25);
}
.trust-more-num {
  font-family: var(--f-display, var(--f-sans));
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.trust-more-label {
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.trust-clients-foot {
  margin: 16px 0 0;
  text-align: right;
  font-size: 13px;
}
.trust-clients-foot a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.trust-clients-foot a:hover { text-decoration: underline; }
.trust-awards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .trust-awards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-awards { grid-template-columns: 1fr; } }
.trust-award {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--ink-2);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.trust-award:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px -12px var(--tint-5);
}
.trust-award-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--accent);
  color: #ffffff;
  border-radius: 4px;
}
.trust-award h3 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.trust-award p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  padding: 18px 0;
}
.trust-row + .trust-row {
  border-top: 1px solid var(--line);
}
.trust-label {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  flex: 0 0 auto;
  min-width: 140px;
}
.trust-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  flex: 1;
}
.trust-marks li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-marks span {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.trust-marks--awards li {
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  gap: 4px;
}
.trust-marks--awards strong {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.trust-marks--awards span {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  white-space: normal;
}

@media (max-width: 780px) {
  .trust-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .trust-label {
    min-width: 0;
  }
  .trust-marks {
    gap: 18px 28px;
  }
  .trust-marks--awards {
    gap: 16px;
  }
  .trust-marks span {
    white-space: normal;
  }
}

/* =========================================================
   TEASERS - 3 Geschäftsbereiche auf der Startseite
   ========================================================= */
.teasers {
  background: var(--ink);
  padding: clamp(80px, 12vw, 160px) 0 clamp(100px, 14vw, 180px);
}
.teasers-head {
  text-align: center;
  max-width: var(--container);
  margin: 0 auto clamp(48px, 6vw, 88px);
  padding: 0 clamp(20px, 4vw, 40px);
}
.teasers-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.teaser {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px -28px rgba(0,0,0,0.25);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.teaser:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -28px rgba(0,70,140,0.28);
  border-color: rgba(0,97,175,0.3);
}
.teaser-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-3);
}
.teaser-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.teaser:hover .teaser-media img { transform: scale(1.04); }
.teaser-body {
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; flex: 1;
}
.teaser-kicker {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.35;
}
.teaser-kicker-num { color: var(--ink-3); font-weight: 600; }
.teaser-kicker-label { color: var(--muted); }
.teaser-title {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--paper);
}
.teaser-title em { font-size: 1.03em; }
.teaser-desc {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 24px;
  flex: 1;
}
.teaser-cta {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .25s var(--ease-out);
}
.teaser:hover .teaser-cta { gap: 12px; }

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

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  transition: transform .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
  border: 1px solid transparent;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--paper); color: var(--ink);
}
.btn-primary:hover { background: var(--paper-2); }
.btn-ghost {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border-color: rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
/* On light sections, ghost inverts to dark ink */
.field--light .btn-ghost,
.story .btn-ghost,
.phil-text .btn-ghost,
.footer .btn-ghost,
.vl-outro .btn-ghost {
  background: var(--tint-3);
  color: var(--paper);
  border-color: rgba(0,0,0,0.13);
}
.field--light .btn-ghost:hover,
.story .btn-ghost:hover,
.phil-text .btn-ghost:hover,
.footer .btn-ghost:hover,
.vl-outro .btn-ghost:hover { background: var(--border-medium); border-color: rgba(0,0,0,0.24); }

.btn-line {
  background: transparent; color: var(--paper);
  border-color: rgba(0,0,0,0.22);
  padding: 12px 22px;
  margin-top: 48px;
}
.btn-line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.field--dark .btn-line { color: #ffffff; border-color: rgba(255,255,255,0.28); }
.field--dark .btn-line:hover { background: #ffffff; color: var(--paper); border-color: #ffffff; }

/* =========================================================
   STORY
   ========================================================= */
.story {
  background: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  text-align: center;
}
.section-eyebrow {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 24px;
}
.section-title {
  font-family: var(--f-sans);
  font-weight: 200;
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 auto 28px;
  max-width: 22ch;
}
.section-title em { font-style: italic; font-weight: inherit; }
.story .section-title { max-width: 28ch; }
.section-lede {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--muted-2);
  max-width: 58ch;
  margin: 0 auto 72px;
  line-height: 1.55;
}

.facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 980px; margin: 0 auto;
}
.fact { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fact-num {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--paper);
}
.fact-label {
  font-size: 14px; color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
}

/* =========================================================
   FIELD SECTIONS (Business areas)
   ========================================================= */
.field {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.field-media { position: relative; overflow: hidden; }
.field-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.field:hover .field-media img { transform: scale(1.04); }

.field-content {
  display: flex; align-items: center;
  padding: clamp(80px, 10vw, 140px) 0;
}
.field-content .container { max-width: 680px; margin: 0; padding: 0 clamp(28px, 5vw, 72px); }

/* Dark island - contrast section within the light theme */
.field--dark { background: var(--ink-dark); color: var(--paper-on-dark); }
.field--dark .section-eyebrow { color: rgba(255,255,255,0.55); }
.field--dark .field-title { color: #ffffff; }
.field--dark .field-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.field--dark .field-card:hover { background: rgba(255,255,255,0.09); }
.field--dark .field-card h2, .field--dark .field-card h3 { color: #ffffff; }
.field--dark .field-card p { color: rgba(255,255,255,0.72); }

/* Bright island - pure white contrast within the neutral light theme */
.field--light { background: var(--ink-2); color: var(--paper); }
.field--light .section-eyebrow { color: var(--muted); }

.field:nth-of-type(even) { grid-template-columns: 1fr 1fr; }
.field:nth-of-type(even) .field-media { order: 2; }

.field-title {
  font-family: var(--f-sans);
  font-weight: 200;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.field-lede {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  margin: 0 0 48px;
  max-width: 50ch;
}
.field--dark .field-lede { color: rgba(255,255,255,0.78); }
.field--light .field-lede { color: var(--paper-2); }

.field-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field-card {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint-1);
  transition: transform .35s var(--ease-out), background .35s var(--ease-out);
}
.field-card:hover { transform: translateY(-4px); background: var(--tint-2); }
.field-card h2, .field-card h3 {
  font-size: 16px; font-weight: 600;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.field-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.card-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-bullets li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
  padding-left: 14px;
  position: relative;
}
.card-bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 960px) {
  .field { grid-template-columns: 1fr; min-height: auto; }
  .field:nth-of-type(even) .field-media { order: 0; }
  .field-media { height: 60vh; min-height: 360px; }
  .field-grid { grid-template-columns: 1fr; }
  .field-content { padding: 72px 0 96px; }
}

/* =========================================================
   REFERENCE (Greencity)
   ========================================================= */
.reference {
  background: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.ref-figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; margin: 48px auto 80px;
  max-width: 1040px;
  text-align: left;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.ref-fig { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.ref-num {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1; letter-spacing: -0.03em;
}
.ref-lbl { font-size: 14px; color: var(--muted); }

.ref-list { max-width: 760px; margin: 0 auto; text-align: left; }
.ref-list ul { list-style: none; margin: 0; padding: 0; }
.ref-list li {
  display: flex; justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.ref-list li:first-child { border-top: 1px solid var(--line); }
.ref-list li span:last-child { color: var(--muted); }

@media (max-width: 760px) {
  .ref-figures { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}

/* =========================================================
   FLEET RAIL
   ========================================================= */
.fleet {
  background: var(--ink-2);
  padding: clamp(100px, 14vw, 180px) 0 120px;
  border-top: 1px solid var(--line);
}
.fleet-head { text-align: center; margin-bottom: 72px; }
.fleet-rail {
  display: flex; gap: 16px;
  padding: 0 clamp(20px, 4vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(20px, 4vw, 40px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fleet-rail::-webkit-scrollbar { display: none; }
.fleet-item {
  flex: 0 0 min(480px, 80vw);
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: var(--ink-3);
}
.fleet-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.fleet-item:hover img { transform: scale(1.04;) }
.fleet-item figcaption {
  position: absolute; left: 20px; bottom: 18px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(10,10,10, 0.6); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 500;
  color: #ffffff;
  border: 1px solid rgba(255,255,255, 0.18);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  background: var(--ink-2);
  color: var(--paper);
  padding: clamp(100px, 14vw, 180px) 0;
}
.about .section-eyebrow { color: var(--muted); }
.about-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.about-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--paper-3);
}
.about-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.about-text p {
  font-size: 17px; line-height: 1.6;
  color: var(--paper-2);
  margin: 0 0 20px;
  max-width: 52ch;
}
.about .section-title { text-align: left; margin-left: 0; }
.audience {
  margin: 40px 0 0; padding: 0;
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  border-top: 1px solid var(--line-dark);
  padding-top: 32px;
}
.audience li { font-size: 14px; color: var(--paper-2); line-height: 1.5; }
.audience--full {
  max-width: var(--container);
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}
.audience strong { color: var(--paper); font-weight: 600; }

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 4/3; max-height: 500px; }
  .audience { grid-template-columns: 1fr; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  background: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  text-align: center;
}
.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1040px; margin: 56px auto 80px;
  text-align: left;
}
.contact-card {
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint-1);
  display: flex; flex-direction: column; gap: 10px;
}
.ctc-label { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ctc-value { font-size: 18px; font-weight: 500; line-height: 1.5; margin: 0; }
.ctc-link { margin-top: auto; padding-top: 16px; font-size: 14px; color: var(--accent); font-weight: 500; }
.ctc-link:hover { color: var(--paper); }

.contact-form {
  max-width: 760px; margin: 0 auto;
  text-align: left;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint-1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field-input { display: block; margin-bottom: 16px; }
.field-input span {
  display: block; font-size: 13px; color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.field-input input, .field-input textarea, .field-input select {
  width: 100%;
  padding: 14px 16px;
  font: inherit; font-size: 15px;
  color: var(--paper);
  background: var(--tint-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
  appearance: none;
}
.field-input select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2386868b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field-input textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.field-input input:focus, .field-input textarea:focus, .field-input select:focus {
  outline: none;
  border-color: var(--text-softer);
  background: var(--tint-3);
}
.contact-form .btn { margin-top: 12px; }
.form-hint { font-size: 13px; color: var(--muted); margin: 16px 0 0; }
/* ===== Kontaktformular (kontakt.html) ===== */
.contact-form { max-width: 640px; margin: 28px auto 0; text-align: left; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.contact-consent input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent); }
.contact-form .btn { width: 100%; }
.contact-alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }
.contact-alt a { color: var(--accent); font-weight: 500; }
[hidden] { display: none !important; }
@media (max-width: 560px) { .contact-form-row { grid-template-columns: 1fr; } }
/* Startseite: Link zum Energierechner */
.hero-calc-link { margin-top: 16px; font-size: 15px; }
.hero-calc-link a { color: var(--accent); font-weight: 500; border-bottom: 1px solid rgba(0,97,175,0.35); padding-bottom: 1px; }
.hero-calc-link a:hover { border-bottom-color: var(--accent); }
/* Generische Sektion (u. a. Für-Planer-Seite) */
.section { padding: clamp(72px, 11vw, 140px) 0; }
.section--tint { background: var(--ink-2); }
.field-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .field-grid--3 { grid-template-columns: 1fr; } }
/* Geocooling-Abschnitt linksbündig (wie die übrigen Inhalts-Sektionen) */
#kuehlen { text-align: left; }
#kuehlen .section-eyebrow,
#kuehlen .section-title,
#kuehlen .section-lede { text-align: left; margin-left: 0; margin-right: 0; }

/* Grosse Schirme: Hero-Bild grösser und rechts bündig mit Nav/Container (≥1600px) */
@media (min-width: 1600px) {
  .hero-photo {
    right: calc(50vw - var(--container) / 2);
    width: clamp(620px, 40vw, 860px);
  }
}

/* =========================================================
   GROSSE DESKTOP-BILDSCHIRME (Breitbild ≥ 1800px, 4K)
   Füllt die leeren Seitenränder. Laptop/iPad/Mobile bleiben
   unberührt (greift erst ab 1800px, oberhalb aller Laptops).
   ========================================================= */
@media (min-width: 1800px) {
  :root { --container: 1400px; }
  .hero-title, .hero--bright .hero-title { font-size: 92px; }
  .page-hero-title { font-size: 100px; }
  .section-title { font-size: 76px; }
}
@media (min-width: 2200px) {
  :root { --container: 1520px; }
  .hero-title, .hero--bright .hero-title { font-size: 104px; }
  .page-hero-title { font-size: 110px; }
  .section-title { font-size: 84px; }
}
@media (min-width: 2700px) {
  :root { --container: 1640px; }
  .hero-title, .hero--bright .hero-title { font-size: 116px; }
  .page-hero-title { font-size: 120px; }
  .section-title { font-size: 92px; }
}
.form-ok {
  padding: 40px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(0,97,175,0.04);
}

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px 20px; }
}

/* =========================================================
   ENERGIERECHNER — Wissen-Seite
   ========================================================= */
.calc {
  max-width: 1080px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 40px -22px rgba(0,40,90, 0.18);
  text-align: left;
}
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.calc-field {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.calc-out-inline {
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--paper);
  font-weight: 500;
  text-transform: none;
}
.calc-field--radio label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--paper-2);
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 4px 0;
}
.calc-field--radio input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--ink-3);
  border-radius: 999px;
  outline: none;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,97,175,0.35);
  transition: transform .15s var(--ease-out);
}
.calc-field input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}

.calc-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--tint-1);
  border: 1px solid var(--line);
}
.calc-result-label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.calc-result-num {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.calc-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
.calc-result--accent {
  background: rgba(0,97,175, 0.06);
  border-color: rgba(0,97,175,0.22);
}
.calc-result--accent .calc-result-num {
  color: var(--accent);
}
.calc-result--save {
  background: linear-gradient(180deg, rgba(0,97,175, 0.1), rgba(0,97,175, 0.18));
  border-color: rgba(0,97,175,0.3);
}
.calc-result--save .calc-result-num {
  color: var(--accent-2);
  font-weight: 600;
}

.calc-disclaimer {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-2);
}
.calc-cta {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 820px) {
  .calc {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .calc-results {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .calc-results {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FORM — Success / Error states
   ========================================================= */
.form-ok {
  padding: clamp(28px, 4vw, 40px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,97,175,0.04), rgba(0,97,175, 0.1));
  border: 1px solid rgba(0,97,175,0.22);
  text-align: center;
}
.form-ok-head {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.form-ok-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-2);
}
.form-ok-sub a {
  color: var(--accent);
  border-bottom: 1px solid rgba(0,97,175,0.25);
  transition: border-color .2s var(--ease-out);
}
.form-ok-sub a:hover {
  border-bottom-color: var(--accent);
}
.form-error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255, 69, 58, 0.08);
  border-left: 3px solid #ff453a;
  color: #b8281f;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   MAP — Kontakt-Seite OpenStreetMap-Embed
   ========================================================= */
.map-section {
  padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 12vw, 140px);
  text-align: center;
  border-top: 1px solid var(--line);
}
.map-section .section-eyebrow,
.map-section .section-title,
.map-section .section-lede {
  margin-left: auto;
  margin-right: auto;
}
.map-section .section-lede {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.map-wrap {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -20px rgba(0,40,90, 0.18);
  aspect-ratio: 16 / 9;
  background: var(--ink-3);
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.92) contrast(0.98);
}
.map-links {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--muted-2);
  letter-spacing: 0.01em;
}
.map-links a {
  color: var(--accent);
  border-bottom: 1px solid rgba(0,97,175,0.25);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease-out);
}
.map-links a:hover {
  border-bottom-color: var(--accent);
}

@media (max-width: 720px) {
  .map-wrap {
    aspect-ratio: 4 / 5;
  }
}

/* =========================================================
   404 — Sackgasse
   ========================================================= */
.four04 {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  background:
    radial-gradient(1100px 700px at 50% 20%, rgba(0,97,175,0.08), transparent 60%),
    radial-gradient(800px 600px at 50% 90%, rgba(194,196,199, 0.18), transparent 70%);
}
.four04-inner {
  max-width: 720px;
  text-align: center;
}
.four04-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.four04-title {
  margin: 0 0 22px;
  font-size: clamp(40px, 7vw, 86px);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--paper);
}
.four04-lede {
  margin: 0 auto 36px;
  max-width: 52ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--paper-2);
}
.four04-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 60px;
}
.four04-shortcuts {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.four04-shortcuts-label {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.four04-shortcuts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}
.four04-shortcuts a {
  font-size: 14px;
  color: var(--paper);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease-out);
}
.four04-shortcuts a:hover {
  border-bottom-color: var(--paper);
}

/* =========================================================
   LEGAL — Impressum / Datenschutz prose layout
   ========================================================= */
.legal {
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 12vw, 140px);
}
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(40px, 5vw, 72px);
  max-width: 980px;
  margin: 0 auto;
}
.legal-block {
  margin: 0;
}
.legal-block h2 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.005em;
  color: var(--paper);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.legal-block p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--paper-2);
}
.legal-block p:last-child {
  margin-bottom: 0;
}
.legal-block a {
  color: var(--accent);
  border-bottom: 1px solid rgba(0,97,175,0.25);
  transition: border-color .2s var(--ease-out);
}
.legal-block a:hover {
  border-bottom-color: var(--accent);
}
.legal-note {
  font-size: 13px !important;
  color: var(--muted-2) !important;
  font-style: normal;
  padding: 8px 12px;
  background: rgba(0,97,175,0.04);
  border-left: 2px solid rgba(0,97,175,0.3);
  border-radius: 4px;
  margin-top: 8px !important;
}

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

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--ink-2);
  color: var(--text-soft);
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand .brand-name { font-size: 24px; font-weight: 600; color: var(--paper); display: inline-block; margin-bottom: 14px; }
.footer-brand p { margin: 0; line-height: 1.6; }
.foot-h { color: var(--paper); font-weight: 600; font-size: 14px; margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a:hover { color: var(--paper); }
.footer address { font-style: normal; line-height: 1.7; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  font-size: 13px;
}
.footer-bottom > p:first-child { text-align: left; margin: 0; }
.footer-bottom .foot-legal { text-align: center; justify-self: center; }
.footer-bottom .dialect { text-align: right; justify-self: end; }
@media (max-width: 720px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
  }
  .footer-bottom > p:first-child,
  .footer-bottom .foot-legal,
  .footer-bottom .dialect {
    text-align: center !important;
    justify-self: center !important;
  }
}
.dialect { font-family: var(--f-sans); font-weight: 400; font-size: 14px; color: var(--text-soft); margin: 0; letter-spacing: 0.01em; }
.foot-legal { margin: 0; font-size: 13px; }
.foot-legal a { color: var(--text-soft); transition: color .2s var(--ease-out); }
.foot-legal a:hover { color: var(--paper); }
.foot-legal a + a { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); }

@media (max-width: 780px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
    text-align: center;
  }
  /* Brand spans full width on top, Kontakt full width on bottom;
     Leistungen + Unternehmen sit in 2 balanced columns between. */
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-grid ul { align-items: center; }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid > .footer-brand,
  .footer-grid > div:last-child { grid-column: auto; }
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   HERO META STRIP
   ========================================================= */
.hero-meta {
  position: absolute;
  left: clamp(20px, 4vw, 40px);
  right: clamp(20px, 4vw, 40px);
  bottom: 34px;
  display: flex;
  gap: clamp(20px, 4vw, 64px);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-meta > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-meta .hm-k { color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
.hero-meta .hm-v { color: rgba(255,255,255,0.92); font-weight: 500; font-size: 13px; }
@media (max-width: 760px) {
  .hero-meta,
  .hero--bright .hero-meta {
    position: static;
    margin: 28px 20px 0;
    padding: 18px 0 0;
    gap: 14px;
    justify-content: space-between;
    order: 3;
    width: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
  .hero-scroll { display: none; }
}

/* =========================================================
   TIMELINE / GESCHICHTE
   ========================================================= */
.timeline {
  background: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.timeline .section-lede { margin-bottom: 48px; }

/* Year-strip navigation */
.tl-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  max-width: 880px;
  margin: 0 auto 72px;
  padding: 10px;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}
.tl-nav-btn {
  appearance: none;
  background: transparent;
  color: rgba(0,0,0,0.64);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.tl-nav-btn:hover { color: var(--paper); background: var(--tint-3); }
.tl-nav-btn.is-active {
  color: var(--paper);
  background: rgba(0,97,175,0.22);
  border-color: rgba(0,97,175, 0.5);
  box-shadow: 0 0 18px rgba(0,97,175,0.22);
}

/* Timeline wrapper (for sticky positioning) */
.tl-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.tl {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 880px;
  text-align: left;
  position: relative;
}
/* Base spine */
.tl::before {
  content: "";
  position: absolute;
  left: 192px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--line) 10%, var(--line) 90%, transparent 100%);
}
/* Progress fill - uses --tl-progress (0..1) set by JS on .tl */
.tl::after {
  content: "";
  position: absolute;
  left: 192px; top: 0;
  width: 2px;
  height: calc(var(--tl-progress, 0) * 100%);
  background: linear-gradient(to bottom, rgba(0,97,175,0.0), var(--accent) 12%, var(--accent) 88%, rgba(0,97,175,0.0));
  box-shadow: 0 0 18px rgba(0,97,175,0.55);
  transition: height .25s var(--ease-out);
  transform: translateX(-0.5px);
  pointer-events: none;
  border-radius: 2px;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: flex-start;
  padding: 24px 0 44px 32px;
  transition: opacity .5s var(--ease-out);
}
.tl-item::before {
  content: "";
  position: absolute;
  left: 188px; top: 54px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px var(--border-strong);
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
  z-index: 2;
}
.tl-year {
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-soft);
  padding-top: 22px;
  line-height: 1;
  align-self: start;
  transition: color .35s var(--ease-out), font-size .35s var(--ease-out), transform .35s var(--ease-out), letter-spacing .35s var(--ease-out);
  transform-origin: left center;
}
.tl-body {
  padding-left: 44px;
  border-radius: var(--radius);
  transition: background .35s var(--ease-out), padding .35s var(--ease-out), transform .35s var(--ease-out);
}
.tl-body h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--paper);
  transition: color .35s var(--ease-out);
}
.tl-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 55ch;
  transition: color .35s var(--ease-out);
}

/* Active state: item closest to viewport center */
.tl-item.is-current .tl-year {
  color: var(--paper);
  font-size: 34px;
  letter-spacing: -0.01em;
  transform: translateX(-2px);
}
.tl-item.is-current::before {
  transform: scale(1.5);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px rgba(0,97,175,0.5), 0 0 24px rgba(0,97,175, 0.6);
}
.tl-item.is-current .tl-body {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  padding: 16px 20px 16px 44px;
  transform: translateX(6px);
}
.tl-item.is-current .tl-body h3 { color: var(--paper); }
.tl-item.is-current .tl-body p { color: var(--text); }

/* Non-active items dim slightly */
.tl-item:not(.is-current) { opacity: 0.7; }

/* Floating indicator (fixed on viewport, desktop only) */
.tl-sticky {
  position: fixed;
  top: 50%;
  right: max(24px, calc((100vw - 1240px) / 2 + 24px));
  transform: translateY(-50%);
  width: 220px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.tl-sticky.is-on { opacity: 1; }
.tl-sticky-kicker {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(0,97,175,0.9); font-weight: 600;
}
.tl-sticky-year {
  font-family: var(--f-display); font-style: normal;
  font-size: 32px; color: var(--paper);
  line-height: 1;
}
.tl-sticky-title {
  font-size: 13px; color: var(--text); line-height: 1.5;
}

@media (max-width: 1024px) {
  .tl-sticky { display: none; }
}
@media (max-width: 680px) {
  .tl-nav { gap: 6px; padding: 8px; }
  .tl-nav-btn { padding: 8px 12px; font-size: 12px; }
  .tl::before { left: 18px; }
  .tl::after { left: 18px; }
  .tl-item { grid-template-columns: 1fr; padding: 16px 0 36px; }
  .tl-item::before { left: 14px; top: 6px; }
  .tl-year { padding: 0 0 4px 44px; font-size: 18px; }
  .tl-item.is-current .tl-year { font-size: 24px; }
  .tl-body { padding-left: 44px; }
  .tl-item.is-current .tl-body { padding: 12px 16px 12px 44px; transform: none; }
}

/* =========================================================
   PROCESS / STEPS
   ========================================================= */
.process {
  background: var(--ink-2);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.process .section-lede { margin-bottom: 80px; }
.steps {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--container);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}
.step {
  padding: 32px 28px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(255,255,255,0.0));
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), background .4s var(--ease-out);
  min-height: 240px;
  display: flex; flex-direction: column; gap: 10px;
}
.step:hover { transform: translateY(-4px); border-color: var(--border-strong); background: linear-gradient(180deg, var(--tint-3), rgba(255,255,255,0)); }
.step-num {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 38px;
  font-weight: 400;
  color: var(--text-softer);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.step h3 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }

.spec-block {
  max-width: var(--container);
  margin: 80px auto 0;
  padding: 40px clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint-1);
  text-align: left;
}
.spec-block .section-eyebrow { margin-bottom: 24px; }
.spec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
}
.spec-grid > div {
  position: relative;
  padding: 18px 22px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255, 0.6);
  background: var(--glass-5);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,40,90, 0.06),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 10px 24px -14px rgba(0,40,90,0.22),
    0 2px 6px -2px rgba(0,40,90,0.08);
  display: flex; flex-direction: column; gap: 6px;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
.spec-grid > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}
.spec-grid > div::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255, 0.9) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.spec-grid > div:hover {
  transform: translateY(-2px);
  background: var(--glass-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, 0.9),
    inset 0 -1px 0 rgba(0,40,90,0.08),
    inset 0 0 0 1px rgba(255,255,255, 0.5),
    0 16px 34px -14px rgba(0,40,90,0.28),
    0 3px 10px -2px rgba(0,40,90,0.1);
}
.spec-grid dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); position: relative; z-index: 2; }
.spec-grid dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--paper); position: relative; z-index: 2; }

@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .spec-grid { grid-template-columns: 1fr 1fr; gap: 16px 32px; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .spec-block { padding: 28px 22px; }
}

/* =========================================================
   PROJECTS GRID (Referenzen)
   ========================================================= */
.projects {
  background: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.projects .section-lede { margin-bottom: 48px; }
.proj-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1040px; margin: 0 auto 80px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
}
.proj-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; text-align: left; }
.ps-num {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--paper);
}
.ps-lbl { font-size: 13px; color: var(--muted); }
@media (max-width: 780px) { .proj-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }

.proj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  text-align: left;
}
.proj {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint-1);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.proj:hover { transform: translateY(-4px); border-color: var(--tint-6); background: var(--tint-1); }
.proj-media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink-3);
}
.proj-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.proj:hover .proj-media img { transform: scale(1.04); }
.proj-body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.proj-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.proj h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.proj-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.proj-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 8px 0 0; border-top: 1px solid var(--line); padding-top: 18px; }
.proj-specs > div { display: flex; flex-direction: column; gap: 2px; }
.proj-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.proj-specs dd { margin: 0; font-size: 14px; color: var(--paper); font-weight: 500; }

@media (max-width: 880px) {
  .proj-grid { grid-template-columns: 1fr; }
  .proj-specs { grid-template-columns: 1fr; gap: 8px; }
}

.projects .ref-list { margin-top: 80px; }

/* =========================================================
   TIEFENBOHRUNGEN
   ========================================================= */
.deepdrill {
  background: transparent;
  color: var(--paper);
  padding: clamp(100px, 14vw, 160px) 0 clamp(100px, 14vw, 160px);
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--line);
}
.deepdrill .section-eyebrow { color: var(--muted); }
.deepdrill .section-title { color: var(--paper); }
.deepdrill .section-title em {
  color: var(--accent);
  font-style: italic;
  font-weight: inherit;
}
.deepdrill .section-lede { color: var(--text); max-width: 68ch; }

.deep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(48px, 6vw, 80px);
}
.deep-card {
  position: relative;
  padding: 28px 28px 32px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.deep-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
}
.deep-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 30px 60px -28px rgba(0,70,140, 0.18);
}
.deep-type {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-weight: 500;
}
.deep-depth {
  font-family: var(--f-sans);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: var(--text-strong);
  margin: 2px 0 0;
  color: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.deep-unit {
  font-size: 0.38em;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
.deep-depth-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.deep-card h3 {
  font-family: var(--f-sans);
  font-size: 22px;
  font-weight: 500;
  margin: 4px 0 0;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.deep-loc {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.deep-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.deep-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.deep-specs dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  flex-shrink: 0;
}
.deep-specs dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--paper);
  text-align: right;
  font-weight: 500;
}
@media (max-width: 900px) {
  .deep-grid { grid-template-columns: 1fr; }
}

/* Sondertechnik sub-block inside Spezialprojekte */
.deep-extra {
  max-width: var(--container);
  margin: clamp(80px, 10vw, 120px) auto 0;
  text-align: left;
}
.deep-extra .section-eyebrow { color: var(--muted); }
.deep-extra .section-title { color: var(--paper); margin-top: 8px; }
.deep-extra .section-title em { color: var(--accent); }
.proj--wide {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
}
.proj--wide .proj-media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.proj--wide .proj-body { padding: clamp(28px, 4vw, 48px); justify-content: center; }
@media (max-width: 900px) {
  .proj--wide { grid-template-columns: 1fr; }
  .proj--wide .proj-media { aspect-ratio: 16/9; min-height: 0; }
}

/* =========================================================
   REFERENZ-FILTER (Sticky Tab Navigation)
   ========================================================= */
.ref-filter-wrap {
  position: sticky;
  top: 56px;
  z-index: 40;
  padding: 14px 0;
  background: var(--glass-7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  transition: background .25s var(--ease-out);
}
.ref-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
}
.ref-filter::-webkit-scrollbar { display: none; }
.ref-chip {
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--paper);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ref-chip:hover {
  background: var(--glass-bg-strong);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.ref-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ref-chip.is-active:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 780px) {
  .ref-filter-wrap { padding: 10px 0; }
  .ref-chip { padding: 9px 14px; font-size: 13px; }
}

/* Compact list section for MFH / EFH with data cards (no hero image) */
.ref-list-section {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(100px, 14vw, 160px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.ref-list-section .section-lede { margin-bottom: clamp(48px, 6vw, 72px); }
.ref-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  text-align: left;
}
.ref-compact {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  transition: transform 0.5s var(--ease-out), background 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.ref-compact:hover {
  transform: translateY(-4px);
  background: var(--glass-bg-strong);
  border-color: var(--border-strong);
}
.rc-media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ink-3, #e8e8ed);
}
.rc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.ref-compact:hover .rc-media img { transform: scale(1.04); }
.rc-body {
  display: flex; flex-direction: column;
  padding: 26px 26px 26px;
  flex: 1;
}
.rc-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 10px;
}
.ref-compact h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--paper);
}
.rc-addr { margin: 0 0 18px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.rc-specs {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
  display: grid; gap: 10px;
}
.rc-specs > div { display: flex; flex-direction: column; gap: 2px; }
.rc-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.rc-specs dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--paper); }

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

/* Projects archive - sub-section inside Grossprojekte */
.projects-archive {
  margin-top: clamp(80px, 10vw, 128px);
}
.projects-archive .section-eyebrow { margin-bottom: 12px; }
.projects-archive .section-title { margin-bottom: clamp(16px, 2vw, 24px); }
.projects-archive .section-lede {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* Imageless variant of .ref-compact */
.ref-compact--no-media .rc-body {
  padding: 32px 28px 28px;
}
.ref-compact--no-media h3 {
  font-size: 22px;
  margin-top: 6px;
}

/* Empty-state sections (kept for EFH) */
.ref-empty {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(100px, 14vw, 160px) 0;
  border-top: 1px solid var(--line);
}
.empty-state {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 56px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
.empty-state .es-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.empty-state h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.empty-state p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(0,0,0,0.68); }
.empty-state a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.empty-state a:hover { opacity: 0.7; }

/* Filter: hidden state for non-active categories */
[data-cat-section][hidden] { display: none !important; }

/* =========================================================
   KNOWLEDGE / COMPARE
   ========================================================= */
.knowledge {
  background: var(--ink-2);
  color: var(--paper);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
}
.knowledge .section-eyebrow { color: var(--muted); }
.knowledge .section-title { text-align: center; margin-left: auto; margin-right: auto; }
.knowledge .section-lede { color: var(--paper-2); text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 72px; }

.compare {
  max-width: 900px;
  margin: 0 auto 80px;
  padding: 40px clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink);
}
.compare-title { margin: 0 0 28px; font-size: 14px; color: var(--paper-2); letter-spacing: 0.04em; font-weight: 500; }
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bar {
  display: grid;
  grid-template-columns: 180px 1fr 64px;
  gap: 16px;
  align-items: center;
}
.bar-label { font-size: 14px; color: var(--paper); font-weight: 500; }
.bar-track {
  height: 10px;
  background: var(--ink-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  display: block; height: 100%;
  width: 0;
  background: linear-gradient(90deg, #9c9c9c, #1d1d1f);
  border-radius: 999px;
  transition: width 1.2s var(--ease-out);
}
.bar--highlight .bar-fill {
  background: linear-gradient(90deg, #1d1d1f, #0a0a0a);
}
.bar--highlight .bar-label { color: var(--accent); }
.bar--highlight .bar-val { color: var(--accent); font-weight: 600; }
.bar-val { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; color: var(--paper); font-weight: 500; }
.compare-note { margin: 24px 0 0; font-size: 12px; color: var(--muted-2); letter-spacing: 0.02em; }
@media (max-width: 640px) {
  .bar { grid-template-columns: 1fr; gap: 6px; }
  .bar-track { order: 3; }
  .bar-val { text-align: left; order: 2; }
  .bar-label { order: 1; font-size: 13px; }
}

.know-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
}
.know-card {
  padding: 32px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-6);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.know-card:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.22); background: var(--glass-78); }
.know-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; color: var(--paper); }
.know-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--paper-2); }
@media (max-width: 960px) { .know-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .know-grid { grid-template-columns: 1fr; } }

/* =========================================================
   PHILOSOPHY
   ========================================================= */
.philosophy {
  background: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
  color: var(--paper);
}
.philosophy-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.phil-media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-3);
}
.phil-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--text-strong);) }
.phil-text .section-title { text-align: left; margin-left: 0; }
.phil-text p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--text); max-width: 52ch; }
.values {
  margin: 32px 0 0; padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.values li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}
.values li:last-child { border-bottom: 0; }
.values strong { color: var(--paper); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; }

@media (max-width: 900px) {
  .philosophy-grid { grid-template-columns: 1fr; }
  .phil-media { aspect-ratio: 4/3; max-height: 500px; }
  .values li { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================
   TEAM LIST (inside About)
   ========================================================= */
.team {
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line-dark);
}
.team .section-eyebrow { margin-bottom: 16px; color: var(--muted); }
.team ul { list-style: none; margin: 0; padding: 0; }
.team li {
  display: grid;
  grid-template-columns: 176px 1fr;
  grid-template-areas:
    "avatar name"
    "avatar role"
    "avatar tel";
  column-gap: 28px;
  row-gap: 4px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-dark);
  align-content: center;
  align-items: center;
}
.team li:last-child { border-bottom: 0; }
.tm-avatar {
  width: 176px;
  height: 176px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--line-dark);
  display: block;
  grid-area: avatar;
  align-self: center;
}
.tm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,97,175,0.2), rgba(0,97,175,0.08));
  color: var(--accent);
  font-family: var(--f-sans);
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.tm-name {
  grid-area: name;
  font-size: 20px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.005em;
  align-self: end;
  padding-bottom: 2px;
}
.tm-role {
  grid-area: role;
  font-size: 16px;
  color: var(--paper-2);
  align-self: center;
}
.tm-cred {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--accent);
  font-weight: 500;
  margin-top: 4px;
  max-width: 32ch;
}
.tm-tel {
  grid-area: tel;
  font-size: 15px;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 4px;
}
.tm-tel:hover { color: var(--accent-2); }
@media (max-width: 640px) {
  .team li {
    grid-template-columns: 128px 1fr;
    column-gap: 20px;
    row-gap: 4px;
    padding: 22px 0;
  }
  .team li .tm-avatar { width: 128px; height: 128px; }
}

/* =========================================================
   CAREERS
   ========================================================= */
.careers {
  background: var(--ink-2);
  color: var(--paper);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.careers .section-lede { margin-bottom: 72px; }
.jobs {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}
.job {
  padding: 36px 30px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint-1);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), background .4s var(--ease-out);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 240px;
}
.job:hover { transform: translateY(-4px); border-color: var(--tint-6); background: var(--tint-3); }
.job-type { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.job h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.job p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); flex: 1; }
.job-link {
  margin-top: 8px;
  font-size: 14px;
  color: var(--paper);
  font-weight: 500;
  align-self: flex-start;
  border-bottom: 1px solid rgba(0,0,0,0.28);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease-out);
}
.job-link:hover { border-color: var(--paper); }
@media (max-width: 960px) { .jobs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .jobs { grid-template-columns: 1fr; } }

/* Career perks — what we offer */
.career-perks {
  margin-top: clamp(64px, 8vw, 96px);
}
.career-perks .section-eyebrow {
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.perks-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.perks-grid li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 14px;
  background: var(--tint-1);
  border: 1px solid var(--line);
}
.perk-icon {
  font-family: var(--f-display, var(--f-sans));
  font-style: normal;
  font-size: 28px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.perks-grid h4 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
  min-height: 2.6em;
}
@media (max-width: 620px) {
  .perks-grid h4 { min-height: 0; }
}
.perks-grid p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper-2);
}
@media (max-width: 960px) { .perks-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .perks-grid { grid-template-columns: 1fr; } }

/* Career spontan — call-to-action block */
.career-spontan {
  margin-top: clamp(60px, 7vw, 90px);
  text-align: center;
  padding: clamp(40px, 5vw, 64px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,97,175,0.04), rgba(0,97,175,0.08));
  border: 1px solid rgba(0,97,175,0.15);
}
.career-spontan h3 {
  margin: 6px 0 16px;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.career-spontan p {
  max-width: 56ch;
  margin: 0 auto 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-2);
}

/* =========================================================
   CONTACT extras
   ========================================================= */
.ctc-sub { margin: 0; font-size: 13px; color: var(--muted); }
.foot-micro { margin-top: 12px; font-size: 12px; color: var(--text-softer); letter-spacing: 0.04em; }

/* =========================================================
   GRÜNDERZITATE
   ========================================================= */
.quotes {
  background: var(--ink-2);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.quotes .section-lede { margin-bottom: 72px; }
.quote-stack {
  max-width: 920px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  text-align: left;
}
.quote {
  position: relative;
  margin: 0;
  padding: 44px 48px 32px 88px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(0,0,0,0.045), rgba(255,255,255,0.0));
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), background .5s var(--ease-out);
}
.quote:hover { transform: translateY(-3px); border-color: var(--tint-6); background: linear-gradient(180deg, var(--tint-3), rgba(255,255,255,0)); }
.quote-mark {
  position: absolute;
  left: 32px; top: 26px;
  font-family: var(--f-display);
  font-style: normal;
  font-size: 84px;
  line-height: 1;
  color: rgba(0,0,0,0.22);
}
.quote blockquote {
  font-family: var(--f-display);
  font-style: normal;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--paper);
}
.quote figcaption {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.quote--accent {
  background: linear-gradient(180deg, rgba(0,97,175,0.08), rgba(0,97,175,0.0));
  border-color: rgba(0,97,175,0.28);
}
.quote--accent .quote-mark { color: rgba(0,97,175, 0.5); }
.quote--accent blockquote { color: var(--paper); }

.quote-foot {
  max-width: 680px;
  margin: 64px auto 0;
  font-family: var(--f-sans);
  color: var(--text);
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
}
.quote-foot em {
  font-family: var(--f-display);
  font-size: 1.25em;
  display: block;
  margin-bottom: 10px;
  color: var(--paper);
}
.quote-foot span { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }

@media (max-width: 680px) {
  .quote { padding: 40px 28px 28px 28px; }
  .quote-mark { position: static; font-size: 52px; display: block; margin-bottom: 4px; }
}

/* =========================================================
   SONDEN-KONFIGURATOR
   ========================================================= */
.configurator {
  background: var(--ink-2);
  color: var(--paper);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
}
.configurator .section-eyebrow { color: var(--muted); }
.configurator .section-title { text-align: center; margin-left: auto; margin-right: auto; }
.configurator .section-lede { color: var(--paper-2); text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 72px; }

.cfg {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.cfg-controls {
  padding: 40px clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass-6);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  display: flex; flex-direction: column; gap: 28px;
}
.cfg-group {
  border: 0;
  margin: 0;
  padding: 0;
}
.cfg-group legend {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 500;
  margin-bottom: 14px; padding: 0;
}
.cfg-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cfg-pill {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cfg-pill input {
  position: absolute; opacity: 0; pointer-events: none;
}
.cfg-pill span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--glass-7);
  font-size: 14px; font-weight: 500; color: var(--paper);
  letter-spacing: -0.005em;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.cfg-pill:hover span { border-color: rgba(0,0,0,0.32); background: var(--ink-2); }
.cfg-pill input:checked + span {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  transform: scale(1.03);
}
.cfg-pill input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.cfg-note {
  margin: 4px 0 0;
  font-size: 12px; color: var(--muted-2); letter-spacing: 0.02em;
  line-height: 1.5;
}

.cfg-result {
  padding: 40px clamp(24px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
}
.cfg-result::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(0,97,175,0.22) 0%, transparent 55%);
  pointer-events: none;
}
.cfg-result > * { position: relative; z-index: 1; }
.cfg-tag {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin: 0; font-weight: 500;
}
.cfg-title {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.cfg-title span + span { color: var(--text); font-size: 0.7em; }
.cfg-specs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.cfg-specs > div { display: flex; flex-direction: column; gap: 4px; }
.cfg-specs dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
}
.cfg-specs dd {
  margin: 0;
  font-size: 16px; font-weight: 500; color: var(--paper);
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.cfg-hint {
  margin: auto 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text);
  font-style: normal; font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.5;
}
.cfg-hint--invalid { color: #ff6b6b; font-style: normal; font-family: var(--f-sans); font-size: 13px; }

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

/* =========================================================
   MASCHINENPARK / TABS
   ========================================================= */
.machines {
  background: var(--ink);
  padding: clamp(100px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.machines .section-lede { margin-bottom: 72px; }

.mach {
  max-width: var(--container);
  margin: 0 auto;
  text-align: left;
}
.mach-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.mach-tab {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint-1);
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.mach-tab:hover { border-color: rgba(0,0,0,0.22); background: var(--tint-2); }
.mach-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mach-tab.is-active {
  border-color: var(--accent);
  background: var(--ink-2);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 97, 175, 0.1);
}
.mt-logo {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex; align-items: center;
  height: 32px;
  padding: 4px 8px;
  background: var(--ink-2);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  box-sizing: border-box;
}
.mt-logo img {
  max-height: 100%;
  max-width: 100px;
  width: auto; height: auto;
  object-fit: contain; object-position: center;
}
.mt-kicker {
  font-family: var(--f-display); font-style: normal;
  font-size: 14px;
  color: var(--muted);
}
.mach-tab.is-active .mt-kicker { color: var(--muted); }
.mt-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.mt-meta { font-size: 12px; color: var(--muted-2); letter-spacing: 0.04em; }
.mach-tab.is-active .mt-meta { color: var(--muted-2); }

.mach-panels { position: relative; }
.mach-panel {
  padding: 32px clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.035);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.mach-panel.is-active { opacity: 1; transform: none; }
.mach-panel[hidden] { display: none; }
.mp-head {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.mp-head h2, .mp-head h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500; letter-spacing: -0.015em;
  margin: 0; color: var(--paper);
}
.mp-head p {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--text);
  max-width: 80ch;
}
.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mp-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .mp-grid,
  .mp-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mp-grid,
  .mp-grid--four { grid-template-columns: 1fr; }
  .mp-sub { min-height: 0; }
}
.mp-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint-1);
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.mp-card > *:not(.mp-figure) { margin-left: 22px; margin-right: 22px; }
.mp-card:hover { transform: translateY(-3px); border-color: var(--tint-6); background: var(--tint-2); }
.mp-card:hover .mp-figure img { transform: scale(1.03;) }

.mp-figure {
  margin: 0 0 14px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #111;
  border-bottom: 1px solid var(--line);
}
.mp-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
  filter: saturate(0.92) contrast(1.03);
}
.mp-figure--empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #111 0%, #1a1a1c 60%, #0e0e10 100%);
  color: rgba(0,0,0,0.26);
  font-family: var(--serif, 'Instrument Serif', serif);
  font-size: 34px; font-style: normal;
  letter-spacing: 0.02em;
}
.mp-figure--empty::after {
  content: "Broder";
}
.mp-card h3, .mp-card h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
}
.mp-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,97,175,0.22);
  border: 1px solid rgba(0,97,175, 0.5);
  font-size: 11px; font-weight: 600;
  color: var(--paper); letter-spacing: 0.02em;
}
.mp-sub {
  margin: 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text);
  min-height: 6em;
}
.mp-specs {
  display: grid; grid-template-columns: 1fr;
  gap: 8px;
  margin: 6px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.mp-specs > div { display: flex; flex-direction: column; gap: 2px; }
.mp-specs dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted);
}
.mp-specs dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--paper); line-height: 1.5; }

/* =========================================================
   GARAGEN GALERIE
   ========================================================= */
.garagen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: clamp(40px, 5vw, 60px);
}
.garagen-grid--3 { grid-template-columns: repeat(3, 1fr); }
.garagen-grid figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: #111;
  border: 1px solid var(--line);
}
.garagen-grid img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s var(--ease-out);
}
.garagen-grid figure:hover img { transform: scale(1.04); }

/* Erdwärme-Einsatz-Galerie (Hochformat 3:4) */
.ew-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(40px, 5vw, 60px); }
.ew-gallery figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: #111; border: 1px solid var(--line); }
.ew-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.ew-gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .ew-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ew-gallery { grid-template-columns: 1fr; } }

/* Meissel-Strip (Wissen · Geologie) */
.meissel-intro { margin: clamp(36px, 5vw, 56px) 0 0; font-size: 15px; color: var(--muted); }
.meissel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; align-items: stretch; }
.meissel-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--tint-1); display: flex; flex-direction: column; }
.meissel-pic { aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.meissel-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.meissel-grid figure:hover .meissel-pic img { transform: scale(1.04); }
.meissel-grid figcaption { padding: 12px 16px 14px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.meissel-grid figcaption strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 2px; }
@media (max-width: 900px) { .meissel-grid { grid-template-columns: 1fr; } }
.gallery-credit {
  margin: clamp(28px, 4vw, 40px) 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.gallery-credit a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.gallery-credit a:hover { opacity: 0.85; }
@media (max-width: 900px) {
  .garagen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .garagen-grid { grid-template-columns: 1fr; }
}

.mach-foot {
  margin: 28px 0 0;
  padding: 24px 28px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--tint-1);
}
.mach-foot p {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--text);
}

@media (max-width: 960px) {
  .mach-tabs { grid-template-columns: 1fr 1fr; }
  .mach-panel { grid-template-columns: 1fr; }
  .mp-media { aspect-ratio: 16/10; }
}
@media (max-width: 520px) {
  .mach-tabs { grid-template-columns: 1fr; }
}

/* =========================================================
   IMPACT VISUALIZATION
   ========================================================= */
.impact {
  max-width: var(--container);
  margin: 96px auto 0;
  padding: 48px clamp(24px, 3vw, 48px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  /* Always-dark island — high-contrast "wow" panel in both themes */
  background: linear-gradient(180deg, #2a2a2c 0%, #1d1d1f 100%);
  color: #ffffff;
  text-align: left;
}
.impact .section-eyebrow { color: rgba(255,255,255,0.55); }
.impact-title {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  max-width: 26ch;
  color: #ffffff;
}
.impact-lede {
  font-size: 16px; line-height: 1.55;
  color: #424245;
  max-width: 58ch;
  margin: 0 0 48px;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.impact-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 28px 26px 30px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper);
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out);
}
.impact-card:hover { transform: translateY(-3px); border-color: var(--tint-6); }
.ic-num {
  font-family: var(--f-sans); font-weight: 300;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.ic-unit {
  font-size: 14px; font-weight: 600; color: var(--paper); letter-spacing: -0.005em;
  margin-top: 8px;
}
.ic-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

/* Inside the dark .impact island - light text + dark glass cards */
.impact .impact-card {
  background: rgba(255,255,255, 0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.impact .impact-card:hover {
  background: rgba(255,255,255, 0.1);
  border-color: rgba(255,255,255,0.22);
}
.impact .ic-num { color: #ffffff; }
.impact .ic-unit { color: rgba(255,255,255,0.92); }
.impact .ic-sub { color: rgba(255,255,255, 0.6); }
.impact .impact-lede { color: rgba(255,255,255, 0.7); }
.impact .impact-foot { color: rgba(255,255,255, 0.6); border-top-color: rgba(255,255,255,0.1); }
.impact .section-eyebrow { color: rgba(255,255,255, 0.6); }
.impact-foot {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px; color: #6e6e73; line-height: 1.55;
  max-width: 68ch;
}

.ic-delta {
  order: 10;
  align-self: flex-start;
  margin-top: 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 97, 175, 0.14);
  color: var(--accent-2);
  border: 1px solid rgba(0, 97, 175, 0.26);
}
.impact .ic-delta {
  background: rgba(120, 180, 255, 0.14);
  color: #9fc5ff;
  border-color: rgba(120, 180, 255, 0.28);
}
.ic-delta--up::before {
  content: "↑";
  display: inline-block;
  margin-right: 4px;
  transform: translateY(-0.5px);
}

.impact .impact-card--accent {
  background: linear-gradient(180deg, rgba(0, 97, 175, 0.22), rgba(0, 97, 175, 0.08));
  border-color: rgba(120, 180, 255, 0.30);
}
.impact .impact-card--accent:hover {
  background: linear-gradient(180deg, rgba(0, 97, 175, 0.28), rgba(0, 97, 175,0.1));
  border-color: rgba(120, 180, 255, 0.5);
}
.ic-num--pct::after {
  content: " %";
  font-size: 0.55em;
  font-weight: 400;
  color: inherit;
  opacity: 0.7;
  margin-left: 2px;
  letter-spacing: 0;
}

.impact-signature {
  margin: 40px 0 0;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(0, 97, 175, 0.18), rgba(0, 97, 175, 0.04));
  border: 1px solid rgba(120, 180, 255, 0.22);
  display: grid;
  gap: 8px;
}
.impact-signature .is-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.impact-signature .is-value {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.28;
  color: #ffffff;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.impact-signature .is-value em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
  color: #bfdcff;
  letter-spacing: -0.01em;
}
.impact-signature .is-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}

@media (max-width: 1000px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  {
  .impact-grid { grid-template-columns: 1fr; }
  .impact { padding: 32px 20px; }
  .impact-signature { padding: 22px 20px; }
  .impact-signature .is-value { font-size: 19px; }
}

/* =========================================================
   STATS-BIG · Animated headline numbers (Elementbau)
   ========================================================= */
.stats-big {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  max-width: var(--container);
  margin: clamp(48px, 7vw, 88px) auto clamp(56px, 8vw, 96px);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  text-align: center;
}
.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.stat-num {
  font-family: var(--f-sans);
  font-weight: 200;
  font-size: clamp(56px, 8vw, 104px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.stat-plus {
  font-family: var(--f-serif, var(--f-sans));
  font-style: normal;
  font-weight: 300;
  font-size: 0.55em;
  color: var(--accent);
  margin-left: 2px;
  font-variant-numeric: normal;
}
.stat-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.005em;
  text-transform: none;
  max-width: 22ch;
  line-height: 1.5;
}
.stat-divider {
  width: 1px;
  height: 80px;
  background: var(--line-dark);
}
@media (max-width: 900px) {
  .stats-big {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
    padding: clamp(32px, 6vw, 48px) 20px;
  }
  .stat-divider {
    width: 64px;
    height: 1px;
    justify-self: center;
  }
}

/* =========================================================
   PROJECT EXPANDABLE DETAILS
   ========================================================= */
.proj-more {
  margin-top: 8px;
  padding: 14px 20px;
  border-radius: 14px;
}
.proj-more summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  list-style: none;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
  transition: color .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.proj-more summary:hover { color: var(--paper); }
.proj-more summary::-webkit-details-marker { display: none; }
.proj-more summary svg {
  transition: transform .3s var(--ease-out);
  color: var(--muted-2);
}
.proj-more[open] {
  padding: 18px 20px 20px;
}
.proj-more[open] summary {
  color: var(--paper);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
.proj-more[open] summary svg { transform: rotate(180deg); color: var(--paper); }
.pm-body {
  display: flex; flex-direction: column; gap: 12px;
  animation: pmSlide 0.5s var(--ease-out);
}
.pm-body p {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: var(--text);
}
.pm-body p strong { color: var(--paper); font-weight: 600; }
.pm-breakdown {
  display: grid; grid-template-columns: 1fr;
  gap: 6px;
  margin: 4px 0 6px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--tint-1);
}
.pm-breakdown > div {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.pm-breakdown dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  align-self: center;
}
.pm-breakdown dd {
  margin: 0;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
@keyframes pmSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   GLASSMORPHISM - site-wide frosted surfaces
   Applied last so it overrides earlier flat backgrounds.
   ========================================================= */

/* Dark sections - default */
.field-card,
.fleet-item,
.contact-card,
.tl-item,
.know-card,
.cfg-pill,
.cfg-controls,
.cfg-result,
.mach-tab,
.mach-panel,
.mp-card,
.impact-card,
.proj,
.job,
.quote,
.quote--accent,
.mach-foot,
.proj-more,
.contact-form,
.form-ok,
.deep-card,
.teaser,
.step,
.spec-block {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* Form inputs - true glass text boxes */
.field-input input,
.field-input textarea,
.field-input select {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-highlight);
}
.field-input input:focus,
.field-input textarea:focus,
.field-input select:focus {
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border-strong) !important;
}

/* Active/selected state stays as dark pill - defined per-component */

/* Hover tweaks - brighten the glass a touch, keep the blur */
.field-card:hover,
.fleet-item:hover,
.contact-card:hover,
.tl-item:hover,
.know-card:hover,
.mp-card:hover,
.impact-card:hover,
.proj:hover,
.job:hover,
.quote:hover,
.mach-tab:hover,
.deep-card:hover,
.teaser:hover,
.step:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

/* Keep the mp-figure flush - it sits inside the card and owns the image frame */
.mp-card .mp-figure { border-bottom: 1px solid var(--glass-border); }

/* Accent quote keeps its blue tint but on the glass base */
.quote--accent {
  background: linear-gradient(180deg, rgba(0,97,175, 0.1), rgba(0,97,175,0.04)),
              var(--glass-bg);
  border-color: rgba(0,97,175,0.35);
}

/* Config pills inherit glass as pills - subtler blur */
.cfg-pill {
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

/* Pure-white island - subtle grey glass so cards stand out on white */
.field--light .field-card,
.field--light .contact-card,
.field--light .know-card,
.field--light .proj,
.field--light .job {
  background: var(--tint-1);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--tint-3);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.field--light .field-card:hover,
.field--light .contact-card:hover,
.field--light .know-card:hover,
.field--light .proj:hover,
.field--light .job:hover {
  background: var(--tint-3);
  border-color: var(--tint-5);
}

/* Dark island - invert glass tint to white-on-dark */
.field--dark .field-card,
.field--dark .contact-card,
.field--dark .know-card,
.field--dark .proj,
.field--dark .job,
.field--dark .mach-tab,
.field--dark .mach-panel,
.field--dark .mp-card {
  background: var(--glass-bg-dark);
  border-color: var(--glass-border-dark);
  box-shadow: var(--glass-highlight-dark);
  color: var(--paper-on-dark);
}
.field--dark .field-card:hover,
.field--dark .contact-card:hover,
.field--dark .know-card:hover,
.field--dark .proj:hover,
.field--dark .job:hover {
  background: var(--glass-bg-dark-strong);
  border-color: var(--glass-border-dark-strong);
}
.field--dark h2, .field--dark h3, .field--dark h4 { color: #ffffff; }
.field--dark p { color: rgba(255,255,255,0.78); }

/* Graceful fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .field-card, .fleet-item, .contact-card, .tl-item, .know-card,
  .cfg-pill, .cfg-controls, .cfg-result, .mach-tab, .mach-panel,
  .mp-card, .impact-card, .proj, .job, .quote, .quote--accent,
  .mach-foot, .proj-more, .deep-card, .teaser, .step, .spec-block {
    background: var(--glass-9);
  }
}

/* ==========================================================
   WISSEN - extended sections
   ========================================================== */

/* Section background variants */
.knowledge--alt { background: var(--ink-2); }
.knowledge--cta { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(96px, 12vw, 160px); }
.knowledge + .knowledge { border-top: 1px solid var(--line-dark); }

/* Hero TOC */
.hero-toc {
  display: flex; flex-wrap: wrap; gap: 8px 6px;
  margin-top: clamp(28px, 4vw, 44px);
}
.hero-toc a {
  font-size: 13px; letter-spacing: 0.02em; color: rgba(0,0,0,0.62);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.hero-toc a:hover {
  background: var(--accent); color: #ffffff; border-color: var(--accent);
}

/* Accent variant for impact cards */
.impact-card--accent {
  background: linear-gradient(180deg, rgba(0,97,175, 0.1), rgba(0,97,175,0.04));
  border-color: rgba(0,97,175,0.35);
}
.impact-card--accent .ic-num { color: var(--accent); }

/* ----- Phases (4-step horizontal flow) ----- */
.phases {
  list-style: none; margin: clamp(40px, 6vw, 80px) 0 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
.phase-card {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.phase-card:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.22); }
.phase-num {
  font-family: var(--f-serif); font-style: normal;
  color: var(--accent); font-size: 38px; line-height: 1;
}
.phase-card h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--paper); }
.phase-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--paper-2); }
.phase-arrow {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-size: 32px; color: var(--accent);
  user-select: none;
}
@media (max-width: 980px) {
  .phases {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .phase-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* ----- Energy bilanz bar ----- */
.energy-bilanz {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-6);
}
.energy-headline {
  margin: 0 0 18px; font-size: 14px; letter-spacing: 0.04em;
  color: var(--paper-2); font-weight: 500; text-transform: uppercase;
}
.energy-bar {
  display: flex; gap: 4px;
  height: clamp(80px, 10vw, 110px);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 16px;
}
.energy-segment {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 12px;
  text-align: center;
  transition: transform .3s var(--ease-out);
}
.energy-segment--earth {
  background: linear-gradient(135deg, #0061AF, #1a7ec9);
  color: #ffffff;
}
.energy-segment--power {
  background: linear-gradient(135deg, #1d1d1f, #424245);
  color: #ffffff;
}
.energy-segment-num { font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.energy-segment-label { font-size: 12px; letter-spacing: 0.04em; opacity: 0.92; margin-top: 2px; }
.energy-note { margin: 0; font-size: 13px; color: var(--paper-2); line-height: 1.55; }

/* ----- Sonde layout (cross-section visualization) ----- */
.sonde-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.4fr;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(40px, 6vw, 72px);
  align-items: start;
}
.sonde-viz {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f5f5f7 0%, #ebebed 100%);
  display: flex; flex-direction: column; align-items: center;
}
.sonde-surface {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, #d2d2d7, #c2c2c7);
  border-radius: 8px 8px 0 0;
  font-size: 12px; color: var(--paper-2); letter-spacing: 0.04em;
  text-align: center;
}
.sonde-shaft {
  position: relative;
  width: 100%;
  height: clamp(280px, 38vw, 420px);
  background: linear-gradient(180deg, #3a3a3c 0%, #2a2a2c 50%, #1d1d1f 100%);
  border-radius: 0 0 6px 6px;
  display: flex; justify-content: center;
  padding: 12px 0;
}
.sonde-pipe {
  position: absolute; top: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #1a7ec9, #0061AF);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,97,175,0.5), inset 0 0 2px rgba(255,255,255,0.3);
}
.sonde-pipe--down { left: calc(50% - 14px); }
.sonde-pipe--up { left: calc(50% + 6px); background: linear-gradient(180deg, #0061AF, #004B87); box-shadow: 0 0 8px rgba(0,75,135,0.5), inset 0 0 2px rgba(255,255,255,0.3); }
.sonde-fill {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,0.025) 8px 9px);
  pointer-events: none;
}
.sonde-marks {
  position: absolute; right: 12px; top: 0; bottom: 0;
  list-style: none; margin: 0; padding: 12px 0;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255, 0.7); font-variant-numeric: tabular-nums;
}
.sonde-marks li span { background: rgba(255,255,255, 0.1); padding: 2px 6px; border-radius: 3px; }
.sonde-bottom {
  width: 100%;
  padding: 12px 14px;
  background: #1d1d1f;
  border-radius: 0 0 8px 8px;
  font-size: 12px; color: rgba(255,255,255,0.7); letter-spacing: 0.04em;
  text-align: center;
  position: relative;
}
.sonde-u {
  display: block;
  width: 28px; height: 14px;
  border: 3px solid #0061AF;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  margin: -6px auto 6px;
}
.sonde-tag { display: block; margin-top: 12px; font-size: 11px; color: var(--muted-2); text-align: center; }
.sonde-specs { margin: 0; }
@media (max-width: 880px) {
  .sonde-layout { grid-template-columns: 1fr; }
  .sonde-viz { max-width: 360px; margin: 0 auto; }
}

/* ----- Depth viz (temperature by depth) ----- */
.depth-viz {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-6);
  display: flex; flex-direction: column; gap: 14px;
}
.depth-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 2.4fr minmax(110px, 1fr);
  gap: 14px;
  align-items: center;
}
.depth-label { font-size: 14px; color: var(--paper); font-weight: 500; }
.depth-bar {
  height: 14px;
  background: var(--tint-3);
  border-radius: 999px;
  overflow: hidden;
}
.depth-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #a8c8e6 0%, #1a7ec9 50%, #003f72 100%);
  border-radius: 999px;
  transition: width 1.2s var(--ease-out);
}
.depth-temp {
  font-size: 14px; font-weight: 500; color: var(--paper);
  font-variant-numeric: tabular-nums; text-align: right;
}
.depth-row--highlight .depth-label { color: var(--accent); font-weight: 600; }
.depth-row--highlight .depth-temp { color: var(--accent); font-weight: 600; }
.depth-note {
  margin: 12px 0 0; font-size: 12px; color: var(--muted-2); letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .depth-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .depth-temp { text-align: left; }
}

/* ----- Formula card (JAZ formula) ----- */
.formula-card {
  margin: clamp(40px, 6vw, 64px) auto clamp(28px, 4vw, 44px);
  max-width: 720px;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
  text-align: center;
}
.formula-line {
  margin: 0;
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--f-serif); font-style: normal;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--paper);
}
.formula-eq { color: var(--accent); }
.formula-frac {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--f-sans); font-style: normal;
  font-size: clamp(14px, 1.6vw, 17px); font-weight: 500;
}
.formula-top { padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.formula-bottom { padding-top: 6px; }
.formula-example {
  margin: 24px 0 0;
  font-size: 14px; color: var(--paper-2);
  font-variant-numeric: tabular-nums;
}

/* ----- Steps 4-column variant ----- */
.steps--four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) {
  .steps--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .steps--four { grid-template-columns: 1fr; }
}

/* Five-step process: keep 3 per row and center the trailing two (no empty grid cell) */
.steps--five {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.steps--five .step {
  flex: 0 1 calc(33.333% - 11px);
}
@media (max-width: 880px) {
  .steps--five .step { flex-basis: calc(50% - 8px); }
}
@media (max-width: 560px) {
  .steps--five .step { flex-basis: 100%; }
}

/* ----- Ablauf foot (highlight stat) ----- */
.ablauf-foot {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 18px 24px;
  align-items: center;
}
.ablauf-foot-num {
  font-weight: 200;
  font-size: clamp(48px, 7vw, 84px);
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.ablauf-foot-unit {
  font-family: var(--f-serif); font-style: normal;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--paper);
}
.ablauf-foot-text {
  font-size: 15px; line-height: 1.6; color: var(--paper-2);
  border-left: 1px solid var(--tint-5);
  padding-left: 24px;
}
@media (max-width: 720px) {
  .ablauf-foot { grid-template-columns: auto 1fr; }
  .ablauf-foot-text { grid-column: 1 / -1; padding-left: 0; border-left: none; border-top: 1px solid var(--border-medium); padding-top: 16px; }
}

/* ----- Cost table ----- */
.cost-table {
  margin: clamp(28px, 5vw, 56px) 0 0;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
}
.cost-table-title {
  margin: 0 0 24px;
  font-size: 14px; color: var(--paper-2); letter-spacing: 0.04em;
  font-weight: 500;
}
.cost-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cost-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 2.4fr minmax(120px, 1fr);
  gap: 16px; align-items: center;
}
.cost-label { font-size: 14.5px; color: var(--paper); font-weight: 500; }
.cost-bar {
  height: 14px;
  background: var(--tint-3);
  border-radius: 999px;
  overflow: hidden;
}
.cost-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #424245, #1d1d1f);
  border-radius: 999px;
  transition: width 1s var(--ease-out);
}
.cost-row--highlight .cost-fill {
  background: linear-gradient(90deg, #1a7ec9, #0061AF);
}
.cost-row--highlight .cost-label { color: var(--accent); font-weight: 600; }
.cost-row--highlight .cost-val { color: var(--accent); font-weight: 600; }
.cost-val {
  font-size: 14.5px; color: var(--paper); font-weight: 500;
  font-variant-numeric: tabular-nums; text-align: right;
}
.cost-note { margin: 24px 0 0; font-size: 12px; color: var(--muted-2); letter-spacing: 0.02em; }
@media (max-width: 720px) {
  .cost-row { grid-template-columns: 1fr; gap: 6px; }
  .cost-val { text-align: left; }
}

/* ----- Cool grid (Geocooling) ----- */
.cool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: clamp(32px, 5vw, 56px);
}
.cool-card {
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.cool-card:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.22); }
.cool-card--passive { border-color: rgba(0,97,175,0.35); background: linear-gradient(180deg, rgba(0,97,175, 0.06), rgba(255,255,255, 0.7)); }
.cool-tag {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.cool-card h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--paper); }
.cool-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--paper-2); }
.cool-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cool-list li {
  font-size: 14px; color: var(--paper-2);
  padding-left: 18px;
  position: relative;
}
.cool-list li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 600;
}
@media (max-width: 760px) {
  .cool-grid { grid-template-columns: 1fr; }
}

/* ----- FAQ accordion ----- */
.faq {
  margin-top: clamp(32px, 5vw, 56px);
  display: flex; flex-direction: column; gap: 10px;
}
.faq-item {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
  overflow: hidden;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.faq-item[open] { border-color: rgba(0,97,175,0.35); background: var(--glass-9); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px;
  cursor: pointer;
  font-size: 16.5px; font-weight: 500; color: var(--paper);
  letter-spacing: -0.005em;
  transition: color .2s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,97,175, 0.1); color: var(--accent);
  font-size: 18px; font-weight: 400; line-height: 1;
  transition: transform .3s var(--ease-out), background .3s var(--ease-out);
}
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--accent); color: #ffffff;
}
.faq-body {
  padding: 0 26px 24px;
  font-size: 15px; line-height: 1.65; color: var(--paper-2);
}
.faq-body p { margin: 0; }

/* ----- Sources section ----- */
.sources {
  /* Always-dark island — sources/standards section keeps its dark backdrop in both themes */
  background: #1d1d1f;
  color: rgba(255,255,255, 0.9);
  padding: clamp(72px, 10vw, 120px) 0;
}
.sources .section-eyebrow { color: rgba(255,255,255, 0.6); }
.sources-title {
  font-family: var(--f-serif); font-style: normal;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 400;
  margin: 8px 0 32px;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.sources-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  max-width: 920px;
}
.sources-list li {
  font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.78);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255, 0.1);
}
.sources-list strong { color: #ffffff; font-weight: 600; }
.sources-foot {
  margin: 32px 0 0;
  font-size: 13px; color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .sources-list { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================
   WISSEN - additional helper graphics
   ========================================================== */

/* ----- Temperature journey (Funktionsweise) ----- */
.temp-journey {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-6);
}
.temp-journey-title {
  margin: 0 0 28px;
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--paper-2); font-weight: 500; text-transform: uppercase;
}
.temp-stops {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  position: relative;
}
.temp-stops::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background:
    /* Gradient line */
    linear-gradient(90deg, #1a7ec9 0%, #0061AF 33%, #b03030 66%, #d99060 100%);
  z-index: 0;
  border-radius: 2px;
  opacity: 0.7;
}
/* Arrow heads at midpoints between dots (16.66%, 50%, 83.33% in container coords) */
.temp-stops::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 12.5%;
  right: 12.5%;
  height: 16px;
  z-index: 1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M 0 0 L 12 6 L 0 12 Z' fill='%230061AF'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M 0 0 L 12 6 L 0 12 Z' fill='%23a04050'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M 0 0 L 12 6 L 0 12 Z' fill='%23d99060'/></svg>");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 16px 16px, 16px 16px, 16px 16px;
  background-position: 16.66% center, 50% center, 83.33% center;
}
.temp-stop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; z-index: 1;
  text-align: center;
}
.temp-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px var(--border-medium), 0 4px 14px rgba(0,0,0,0.08);
}
.temp-dot--cool { background: #1a7ec9; }
.temp-dot--cold { background: #0061AF; }
.temp-dot--hot  { background: #b03030; }
.temp-dot--warm { background: #d99060; }
.temp-val {
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.temp-lbl {
  font-size: 13px; font-weight: 600; color: var(--paper);
  letter-spacing: -0.005em;
}
.temp-sub {
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
@media (max-width: 720px) {
  .temp-stops { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .temp-stops::before { display: none; }
}

/* ----- JAZ visual equation (Effizienz) ----- */
.jaz-visual {
  max-width: 980px; margin: clamp(28px, 5vw, 48px) auto clamp(40px, 6vw, 64px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
}
.jaz-visual-title {
  margin: 0 0 24px;
  font-size: 14px; letter-spacing: 0.04em; text-align: center;
  color: var(--paper-2); font-weight: 500; text-transform: uppercase;
}
.jaz-blocks {
  display: flex; align-items: stretch; gap: 12px;
}
.jaz-blocks--aligned > .jaz-block {
  flex: 1 1 0;
}
.jaz-block {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: clamp(20px, 3vw, 32px) clamp(14px, 2vw, 22px);
  border-radius: 12px;
  text-align: center;
  min-width: 0;
  transition: transform .3s var(--ease-out);
}
.jaz-block:hover { transform: translateY(-2px); }
.jaz-block--power {
  background: linear-gradient(180deg, #2a2a2c, #1d1d1f);
  color: #ffffff;
}
.jaz-block--earth {
  background: linear-gradient(180deg, #1a7ec9, #0061AF);
  color: #ffffff;
}
.jaz-block--heat {
  background: linear-gradient(180deg, rgba(0,97,175, 0.1), rgba(0,97,175,0.04));
  border: 1px solid rgba(0,97,175,0.35);
  color: var(--accent);
}
.jaz-num {
  font-family: var(--f-sans); font-weight: 200;
  font-size: clamp(32px, 5vw, 56px); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.jaz-lbl { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; margin-top: 6px; }
.jaz-sub { font-size: 11.5px; opacity: 0.78; letter-spacing: 0.02em; }
.jaz-block--heat .jaz-sub { color: var(--paper-2); opacity: 1; }
.jaz-op {
  display: flex; align-items: center;
  font-family: var(--f-serif); font-style: normal;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--paper-2);
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .jaz-blocks { flex-direction: column; }
  .jaz-op { justify-content: center; padding: 4px 0; }
}

/* ----- Timeline / Gantt (Ablauf) ----- */
.timeline {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
}
.timeline-title {
  margin: 0 0 24px;
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--paper-2); font-weight: 500; text-transform: uppercase;
}
.timeline-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.timeline-item {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 3fr minmax(110px, auto);
  gap: 16px; align-items: center;
}
.timeline-label { font-size: 14px; color: var(--paper); font-weight: 500; }
.timeline-bar {
  height: 12px;
  background: var(--tint-2);
  border-radius: 999px;
  overflow: hidden;
}
.timeline-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #6e6e73, #424245);
  border-radius: 999px;
  transition: width 1s var(--ease-out);
}
.timeline-item--long .timeline-fill {
  background: linear-gradient(90deg, #1a7ec9, #0061AF);
}
.timeline-item--long .timeline-label { color: var(--accent); font-weight: 600; }
.timeline-item--long .timeline-time { color: var(--accent); font-weight: 600; }
.timeline-time {
  font-size: 14px; color: var(--paper-2); font-weight: 500;
  font-variant-numeric: tabular-nums; text-align: right;
}
.timeline-note {
  margin: 24px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55;
  border-top: 1px solid var(--border-medium);
  padding-top: 16px;
}
@media (max-width: 720px) {
  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
  .timeline-time { text-align: left; }
}

/* ----- Amortization / Break-even (Kosten) ----- */
.amort {
  margin: clamp(28px, 5vw, 56px) 0 0;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
}
.amort-title {
  margin: 0 0 24px;
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--paper-2); font-weight: 500; text-transform: uppercase;
}
.amort-title--green {
  color: #1f5a2a;
  font-weight: 600;
}

/* Energy mix pie — ERDWERK-style with external labels + leader lines */
.emix {
  margin: clamp(60px, 7vw, 96px) 0 0;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
}
.emix-cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  text-align: right;
}
.emix-cap-fig {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #c0392b;
  text-transform: none;
}
.emix-cap-title {
  font-size: 15px;
  font-weight: 600;
  color: #2d4a73;
  letter-spacing: -0.01em;
}
.emix-cap-sub {
  font-size: 12px;
  color: var(--muted);
}
.emix-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 880px;
  margin: 0 auto;
}
.emix-foot {
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.climate-trend {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(192,57,43,0.04), rgba(192,57,43,0.01));
}
.climate-trend-title {
  margin: 0 0 20px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.climate-svg {
  width: 100%; height: auto; max-height: 240px;
}
.climate-trend-foot {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Partner & Auftraggeber Logo-Wall (Über uns) */
.partners {
  padding: clamp(80px, 10vw, 120px) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}
.partners-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
}
@media (max-width: 760px) { .partners-grid { grid-template-columns: 1fr; } }
.partners-col-label {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.partners-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) { .partners-list { grid-template-columns: 1fr; } }
.partners-list li {
  padding: 16px 18px;
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  min-height: 78px;
  display: flex;
  align-items: center;
}
.partners-list li:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px -12px var(--tint-5);
}
.partners-list li span {
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.35;
}
.partners-list li em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
/* Logo-Variante (Auftraggeber-Spalte) */
.partners-list--logos li {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--ink-2);
}
.partners-list--logos li img {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
}
.partners-list--logos li em {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 11px;
}
.partners-more {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 24px 12px;
}
.partners-foot {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--text);
}
.partners-foot a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-left: 6px;
}
.partners-foot a:hover { text-decoration: underline; }

/* Bohrverfahren-Übersicht auf Maschinenpark */
.bohrverfahren {
  margin-top: clamp(60px, 7vw, 96px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.bohrverfahren .section-eyebrow { color: var(--accent); }
.bohrverfahren-title {
  margin: 4px 0 clamp(28px, 4vw, 40px);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1.15;
}
.bohrverfahren-title em { font-style: italic; font-weight: inherit; color: var(--accent); }
.bv-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .bv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bv-grid { grid-template-columns: 1fr; } }
.bv-card {
  padding: 22px;
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bv-card h3, .bv-card h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.bv-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.bv-tag {
  margin-top: auto;
  padding: 4px 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  background: rgba(0,97,175,0.08);
  border: 1px solid rgba(0,97,175, 0.18);
  border-radius: 4px;
  align-self: flex-start;
}

/* CO2 Deep Dive — bars + cards */
.co2-block {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.co2-block-title {
  margin: 0 0 24px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.co2-bars {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.co2-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(0, 3fr) minmax(140px, auto);
  gap: 14px;
  align-items: center;
}
.co2-bar-label { font-size: 14.5px; color: var(--paper); font-weight: 500; }
.co2-bar-track {
  position: relative;
  height: 12px;
  background: var(--tint-3);
  border-radius: 6px;
  overflow: hidden;
}
.co2-bar-fill { display: block; height: 100%; border-radius: 6px; }
.co2-bar-fill--oil  { background: #5a4e3a; }
.co2-bar-fill--gas  { background: #a89578; }
.co2-bar-fill--lwp  { background: #7a91b3; }
.co2-bar-fill--erd  { background: #0061AF; }
.co2-bar-fill--pv   { background: #2f6b3a; }
.co2-bar--highlight { font-weight: 600; }
.co2-bar-val { font-size: 13.5px; color: var(--paper); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.co2-block-note {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.co2-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 960px) { .co2-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .co2-grid { grid-template-columns: 1fr; } }
.co2-card {
  padding: 24px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.co2-card--accent { border-color: var(--accent); background: rgba(0,97,175,0.04); }
.co2-card-num {
  font-family: var(--f-display, var(--f-sans));
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.co2-card-unit {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.co2-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
@media (max-width: 720px) {
  .co2-bar { grid-template-columns: 1fr; gap: 6px; }
  .co2-bar-val { text-align: left; }
}

/* VBL technische Tiefe — Spec-Grid + Praxis-Beispiel */
.vl-tech {
  padding: clamp(80px, 10vw, 120px) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}
.vl-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: clamp(32px, 4vw, 48px) 0 clamp(48px, 6vw, 72px);
}
@media (max-width: 980px) { .vl-spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vl-spec-grid { grid-template-columns: 1fr; } }
.vl-spec-card {
  padding: 20px;
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vl-spec-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.vl-spec-value {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.vl-spec-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.66);
}
.vl-extra { max-width: var(--container); margin: 0 auto; }
.vl-extra .section-eyebrow { color: var(--muted); }
.vl-extra .section-title em {
  color: var(--accent);
  font-style: italic;
  font-weight: inherit;
}

/* VBL Detail blocks (Phase 2) */
.vl-detail {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.vl-detail .section-eyebrow { color: var(--accent); }
.vl-detail-title {
  margin: 4px 0 clamp(24px, 3vw, 36px);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1.15;
}
.vl-detail-title em { font-style: italic; font-weight: inherit; color: var(--accent); }
.vl-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 760px) { .vl-detail-grid { grid-template-columns: 1fr; } }
.vl-mauerdurch { width: 100%; height: auto; border-radius: var(--radius); }
.vl-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vl-detail-list li {
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}
.vl-detail-list strong { color: var(--paper); font-weight: 600; }
.vl-loss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) { .vl-loss-grid { grid-template-columns: 1fr; } }
.vl-loss-card {
  padding: 24px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vl-loss-card--bad { border-color: rgba(192,57,43,0.3); }
.vl-loss-card--good { border-color: rgba(0,97,175,0.3); background: rgba(0,97,175,0.04); }
.vl-loss-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.vl-loss-card--bad .vl-loss-label { color: #c0392b; }
.vl-loss-card--good .vl-loss-label { color: var(--accent); }
.vl-loss-value {
  font-family: var(--f-display, var(--f-sans));
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1;
}
.vl-loss-note { font-size: 13px; color: rgba(0,0,0,0.66); line-height: 1.5; }
.vl-detail-foot {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.vl-druck-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vl-druck-steps li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: baseline;
}
.vl-druck-num {
  font-family: var(--f-display, var(--f-sans));
  font-size: 30px;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.vl-druck-steps strong { color: var(--paper); font-weight: 600; margin-right: 6px; }
.vl-druck-steps li > div { font-size: 14.5px; line-height: 1.55; color: var(--text); }

/* Hersteller-Übersicht (VBL Phase 3) */
.vl-hersteller {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .vl-hersteller { grid-template-columns: 1fr; } }
.vl-hersteller li {
  padding: 22px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.vl-hersteller h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--paper);
}
.vl-hersteller h4 span {
  font-weight: 500;
  font-size: 13px;
  color: var(--accent);
  margin-left: 6px;
  letter-spacing: 0.02em;
}
.vl-hersteller p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* Trassen-Tabelle */
.vl-tabelle {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.vl-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.vl-tabelle th {
  text-align: left;
  padding: 14px 18px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,97,175,0.04);
  border-bottom: 1px solid var(--line);
}
.vl-tabelle td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
.vl-tabelle td:nth-child(2) { font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; }
.vl-tabelle td:last-child { font-size: 12.5px; color: var(--muted); }
.vl-tabelle tbody tr:last-child td { border-bottom: none; }

/* Verteiler-Sammler-Grid */
.vl-vs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 760px) { .vl-vs-grid { grid-template-columns: 1fr; } }
.vl-vs-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vl-vs-list li {
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}
.vl-vs-list strong { color: var(--paper); font-weight: 600; margin-right: 6px; }
.vl-vs-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vl-vs-stats > div {
  padding: 22px;
  background: rgba(0,97,175,0.04);
  border: 1px solid rgba(0,97,175, 0.18);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vl-vs-num {
  font-family: var(--f-display, var(--f-sans));
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.vl-vs-label {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}

/* Career "Was erwartet Dich" block on Über uns */
.career-expect {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 44px);
  background: rgba(0,97,175,0.04);
  border: 1px solid rgba(0,97,175,0.15);
  border-radius: var(--radius-lg);
}
.career-expect .section-eyebrow {
  color: var(--accent);
}
.expect-grid {
  list-style: none;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 720px) { .expect-grid { grid-template-columns: 1fr; } }
.expect-grid li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--ink-2);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
}
.expect-icon {
  font-size: 28px;
  line-height: 1;
}
.expect-grid h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.expect-grid p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}

/* 3. Generation statement band on Über uns */
.gen-statement {
  padding: clamp(56px, 7vw, 96px) 0;
  background: linear-gradient(135deg, rgba(0,97,175,0.08), rgba(0,97,175,0.025));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.gen-statement-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.gen-statement-claim {
  margin: 0 auto clamp(24px, 3vw, 36px);
  max-width: 880px;
  font-family: var(--f-display, var(--f-sans));
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.gen-statement-claim em {
  font-style: italic;
  color: var(--accent);
}
.gen-statement-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.gen-statement-pills li {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: var(--ink-2);
  border: 1px solid rgba(0,97,175,0.2);
  border-radius: 999px;
  letter-spacing: -0.005em;
}

/* Erdwärme trait pills (krisensicher · unabhängig · platzsparend · konstant) */
.erdwaerme-traits {
  list-style: none;
  margin: clamp(20px, 2.4vw, 28px) 0 clamp(32px, 5vw, 56px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.erdwaerme-traits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(0,97,175,0.08);
  border: 1px solid rgba(0,97,175, 0.18);
  border-radius: 999px;
  letter-spacing: -0.005em;
  text-align: center;
}
.trait-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Management summary box on Erdwärme — eye-catching, dense */
.mgmt-summary {
  margin-top: clamp(20px, 2.5vw, 32px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(0,97,175, 0.1), rgba(0,97,175,0.04));
  border-left: 6px solid var(--accent);
  opacity: 1 !important;
  transform: none !important;
  position: relative;
}
.mgmt-summary-eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.mgmt-summary-text {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.5;
  color: var(--paper) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.mgmt-summary-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.01em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.mgmt-summary-link:hover { color: #004a8a; }

/* Step bullet conversion on Erdwärme */
.step-bullets {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
}
.step-bullets li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.step-bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.step-time {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  max-width: max-content;
  margin-top: auto;          /* pushes badge to the bottom of the flex card */
  padding: 4px 10px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0,97,175,0.08);
  border: 1px solid rgba(0,97,175, 0.18);
  border-radius: 4px;
  font-weight: 500;
}
.step-bullets {
  margin-bottom: 16px;       /* spacing before the badge at the bottom */
}

/* Prozess-Zeitleiste — "Wie lange dauert eine EWS" */
.process-timeline {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  opacity: 1 !important;
  transform: none !important;
}
.process-timeline-title {
  margin: 0 0 24px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--paper) !important;
  letter-spacing: -0.01em;
}
.ptl-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ptl-item {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(0, 3fr) minmax(110px, auto);
  align-items: center;
  gap: 14px;
}
.ptl-label { font-size: 14.5px; color: var(--paper) !important; font-weight: 600; }
.ptl-bar {
  position: relative;
  height: 10px;
  background: var(--tint-4);
  border-radius: 5px;
  overflow: hidden;
}
.ptl-fill {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 5px;
}
.ptl-fill--long {
  background: linear-gradient(90deg, #c0392b, #c0392b 70%, rgba(192,57,43, 0.6));
}
.ptl-time { font-size: 13.5px; color: var(--paper); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.process-timeline-foot {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
@media (max-width: 720px) {
  .ptl-item { grid-template-columns: 1fr; gap: 4px; }
  .ptl-time { text-align: left; }
}

/* ========== Projektstrukturplan EWS ========== */
.psp {
  margin-top: clamp(60px, 7vw, 96px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint-1);
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-x: auto;
}
.psp-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-left: 56px; /* room for side label */
}
.psp-side {
  position: absolute;
  left: 0; top: 50%;
  transform: translate(-12px, -50%) rotate(-90deg);
  transform-origin: 0 50%;
  white-space: nowrap;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.psp-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
}
.psp-root {
  padding: 12px 24px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(0,97,175, 0.18);
}
.psp-root::before {
  /* connector down to phase row */
  display: block;
  content: "";
  position: relative;
  width: 1px;
}
.psp-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 10px;
  min-width: 900px; /* prevent collapse on small screens, let parent scroll */
}
/* Übergeordnete Chevron-Zeile (groupiert die 7 Phasen in 3 Bereiche) */
.psp-super-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 10px;
  min-width: 900px;
  margin-bottom: 18px;
}
.psp-super {
  padding: 16px 24px 16px 28px;
  background: var(--accent-2);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.01em;
  clip-path: polygon(
    0 0,
    calc(100% - 16px) 0,
    100% 50%,
    calc(100% - 16px) 100%,
    0 100%,
    16px 50%
  );
}
.psp-super:first-child {
  padding-left: 16px;
  clip-path: polygon(
    0 0,
    calc(100% - 16px) 0,
    100% 50%,
    calc(100% - 16px) 100%,
    0 100%
  );
}
.psp-super:last-child {
  padding-right: 16px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    16px 50%
  );
}
.psp-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
/* Vertical connector lines from phase to root */
.psp-col::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 1px;
  height: 12px;
  background: rgba(0,97,175,0.35);
}
.psp-phase {
  padding: 12px 10px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 2px 6px rgba(0,97,175, 0.18);
}
.psp-task {
  padding: 10px 10px;
  background: #336fb4;
  color: #ffffff;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 1px 3px var(--tint-5);
  position: relative;
}
.psp-task::before {
  /* connector line from task to task */
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: rgba(0,97,175,0.25);
}
.psp-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 900px;
  height: 28px;
  margin-top: 8px;
}
.psp-arrow-line {
  display: block;
  flex: 1;
  height: 2px;
  background: var(--accent);
  position: relative;
}
.psp-arrow-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -5px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--accent);
}
.psp-arrow-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.psp-arrow-label {
  position: absolute;
  background: var(--ink-2);
  padding: 5px 16px;
  border: 1px dashed rgba(0,97,175,0.5);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  z-index: 2;
}
.psp-bands {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 900px;
}
.psp-band-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
}
.psp-band-label {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--paper);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.psp-band {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
}
.psp-band-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  color: #ffffff;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  margin-right: -8px;
}
.psp-band-seg:first-child {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.psp-band-seg--final {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}
.psp-band--lifecycle .psp-band-seg { background: #6b7280; }
.psp-band--lifecycle .psp-band-seg:nth-child(2) { background: #6f7d8d; }
.psp-band--lifecycle .psp-band-seg:nth-child(3) { background: #5f6f82; }
.psp-band--lifecycle .psp-band-seg:nth-child(4) { background: #4f6177; }
.psp-band--lifecycle .psp-band-seg--final { background: #2f6b3a; }
.psp-band--permit .psp-band-seg { background: #5d8ec6; }
.psp-band--permit .psp-band-seg--final { background: #3a6fa8; }
.psp-band--cost .psp-band-seg { background: #7a9fd2; }
.psp-band--cost .psp-band-seg--final { background: #4d7eb8; }
.psp-band--risk .psp-band-seg { background: #c89360; }
.psp-band--risk .psp-band-seg--final { background: #a47643; }
.psp-band--mgmt .psp-band {
  background: rgba(0,97,175,0.08);
  border: 1px solid rgba(0,97,175,0.35);
}
.psp-band--mgmt .psp-band-seg {
  background: transparent;
  clip-path: none;
  margin-right: 0;
  color: var(--paper);
  font-weight: 500;
  padding: 4px 14px;
}
.psp-foot {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 720px) {
  .psp-band-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .psp-band-label { text-align: left; }
}

/* Produktzertifizierungen */
.certs {
  padding: clamp(80px, 10vw, 120px) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}
.cert-grid {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 880px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 56px;
  padding: 6px 10px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--accent);
  color: #ffffff;
  border-radius: 4px;
}
.cert-card h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--paper); }
.cert-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }

/* Garantieversprechen */
.warranty {
  padding: clamp(80px, 10vw, 120px) 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
}
.warranty-grid {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 880px) { .warranty-grid { grid-template-columns: 1fr; } }
.warranty-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.warranty-card--accent {
  border-color: var(--accent);
  background: rgba(0,97,175,0.04);
}
.warranty-num {
  font-family: var(--f-sans);
  font-size: 36px;
  font-weight: 200;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
}
.warranty-card h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--paper); }
.warranty-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }

/* Bohrprofil */
.bohrprofil {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 880px) {
  .bohrprofil { grid-template-columns: 1fr; }
}
.bohrprofil-fig {
  margin: 0;
  padding: clamp(20px, 3vw, 36px);
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bohrprofil-fig svg { width: 100%; height: auto; display: block; }
.bohrprofil-cap {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.bohrprofil-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bohrprofil-list li {
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.bohrprofil-list strong { color: var(--paper); font-weight: 700; }

/* Geologische Karte placeholder */
.geo-map-placeholder {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(36px, 5vw, 64px);
  background: linear-gradient(135deg, rgba(0,97,175, 0.06), rgba(0,97,175,0.025));
  border: 1px dashed rgba(0,97,175,0.3);
  border-radius: var(--radius-lg);
  text-align: center;
}
.geo-map-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.geo-map-title { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; color: var(--paper); }
.geo-map-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--text); max-width: 560px; margin-left: auto; margin-right: auto; }
.geo-map-link {
  display: inline-block;
  font-size: 13.5px; font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.geo-map-link:hover { text-decoration: underline; }

.geo-zones {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 880px) { .geo-zones { grid-template-columns: 1fr; } }
.geo-zone {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint-1);
}
.geo-zone-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 4px;
  color: #ffffff;
}
.geo-zone--ok .geo-zone-tag { background: #2f6b3a; }
.geo-zone--check .geo-zone-tag { background: #d1a13a; }
.geo-zone--block .geo-zone-tag { background: #c0392b; }
.geo-zone--ok { border-top: 3px solid #2f6b3a; }
.geo-zone--check { border-top: 3px solid #d1a13a; }
.geo-zone--block { border-top: 3px solid #c0392b; }
.geo-zone p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.geo-zones-cta {
  margin: clamp(24px, 3vw, 36px) auto 0;
  max-width: 680px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.geo-zones-cta a { color: var(--brand, #1d4ed8); font-weight: 600; text-decoration: none; white-space: nowrap; }
.geo-zones-cta a:hover { text-decoration: underline; }

/* Cool-card expandable detail */
.cool-more {
  margin-top: auto;     /* push to bottom of flex card */
  padding-top: 14px;
  border-top: 1px solid var(--border-medium);
}
.cool-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  outline: none;
}
.cool-more summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.cool-more summary::-webkit-details-marker { display: none; }
.cool-more summary::marker { display: none; content: ''; }
.cool-toggle {
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  transition: transform 0.25s ease;
  color: var(--accent);
}
.cool-more[open] .cool-toggle { transform: rotate(45deg); }
.cool-more-body {
  padding-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.cool-more-body p { margin: 0 0 10px; }
.cool-more-body ul {
  margin: 0; padding-left: 18px;
}
.cool-more-body li { margin-bottom: 6px; }

/* Suurstoffi callout quote */
.suurstoffi-quote {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 720px;
  padding: clamp(24px, 3vw, 36px);
  border-left: 4px solid var(--accent);
  background: rgba(0,97,175, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  opacity: 1 !important;
  transform: none !important;
}
.suurstoffi-quote blockquote {
  margin: 0;
  font-family: var(--f-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--paper) !important;
  font-weight: 500;
}
.suurstoffi-quote figcaption {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}
.amort-rows {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.amort-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 3fr minmax(110px, auto);
  gap: 16px; align-items: center;
}
.amort-label { font-size: 14.5px; color: var(--paper); font-weight: 500; }
.amort-bar {
  display: flex;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  gap: 1px;
  background: var(--tint-3);
}
.amort-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.amort-seg--invest { background: #424245; }
.amort-seg--run { background: #86868b; }
.amort-seg--invest-accent { background: var(--accent); }
.amort-seg--run-accent { background: #1a7ec9; }
.amort-row--highlight .amort-label { color: var(--accent); font-weight: 600; }
.amort-row--highlight .amort-total { color: var(--accent); font-weight: 600; }
.amort-total {
  font-size: 14.5px; color: var(--paper); font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
}
.amort-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-medium);
  font-size: 12px;
}
.amort-key {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); letter-spacing: 0.02em;
}
.amort-key::before {
  content: ""; width: 14px; height: 14px;
  border-radius: 3px;
  background: #424245;
}
.amort-key--run::before { background: #86868b; }
.break-even {
  margin-top: 28px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(0,97,175,0.08), rgba(0,97,175,0.025));
  border: 1px solid rgba(0,97,175,0.30);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px 22px;
  align-items: center;
}
.be-num {
  font-weight: 200;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.be-unit {
  font-family: var(--f-serif); font-style: normal;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--accent);
}
.be-text {
  font-size: 14.5px; line-height: 1.55; color: var(--paper-2);
  border-left: 1px solid rgba(0,97,175,0.2);
  padding-left: 18px;
}
.be-text strong { color: var(--accent); font-weight: 600; }
@media (max-width: 720px) {
  .amort-row { grid-template-columns: 1fr; gap: 6px; }
  .amort-total { text-align: left; }
  .break-even { grid-template-columns: auto 1fr; }
  .be-text { grid-column: 1 / -1; padding-left: 0; border-left: none; border-top: 1px solid rgba(0,97,175,0.2); padding-top: 14px; }
}

/* ----- Season flow (Geocooling) ----- */
.season-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: clamp(32px, 5vw, 56px) 0;
}
.season-card {
  margin: 0;
  padding: clamp(28px, 4vw, 36px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background: var(--glass-7);
  display: flex; flex-direction: column; gap: 18px;
}
.season-card--winter {
  background: linear-gradient(180deg, rgba(120,160,200, 0.18), rgba(255,255,255, 0.7));
  border-color: rgba(40,90,150,0.25);
}
.season-card--summer {
  background: linear-gradient(180deg, rgba(255,210,150, 0.18), rgba(255,255,255, 0.7));
  border-color: rgba(180,130,60,0.25);
}
.season-tag {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); font-weight: 700;
  display: inline-block;
}
.season-scene {
  position: relative;
  height: 220px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
}
.season-house {
  display: flex; flex-direction: column; align-items: center;
  justify-self: center;
}
.season-house-roof {
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 26px solid var(--paper);
}
.season-house-body {
  background: var(--paper);
  color: var(--ink);
  padding: 12px 24px;
  text-align: center;
  font-size: 12px; letter-spacing: 0.02em;
  border-radius: 0 0 4px 4px;
  min-width: 100px;
  font-weight: 500;
}
.season-house-body strong {
  display: block;
  font-size: 18px; font-weight: 600;
  margin-top: 2px;
}
.season-arrows {
  display: flex; justify-content: center; gap: 8px;
  padding: 4px 0;
}
.season-arrow {
  font-size: 22px; line-height: 1; font-weight: 700;
  animation: seasonPulse 2.4s var(--ease-out) infinite;
}
.season-arrow:nth-child(2) { animation-delay: 0.3s; }
.season-arrow:nth-child(3) { animation-delay: 0.6s; }
.season-card--winter .season-arrow { color: #1a7ec9; }
.season-card--summer .season-arrow { color: #c47a3a; }
@keyframes seasonPulse {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.season-card--summer .season-arrow {
  animation-name: seasonPulseDown;
}
@keyframes seasonPulseDown {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(3px); }
}
.season-earth {
  background: linear-gradient(180deg, #3a3a3c, #1d1d1f);
  border-radius: 4px;
  padding: 16px 20px;
  text-align: center;
}
.season-earth-label {
  font-size: 12px; color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}
.season-text {
  margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--paper-2);
}
@media (max-width: 760px) {
  .season-flow { grid-template-columns: 1fr; }
}

/* ================================================
   VERBINDUNGSLEITUNGEN - Scroll Journey
   ================================================ */

@property --p   { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p1  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p2  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p3  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p4  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p5  { syntax: '<number>'; inherits: true; initial-value: 0; }

.vl { background: var(--ink); position: relative; }

.vl-intro {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 28px clamp(28px, 4vw, 48px);
  text-align: center;
}

/* Tall scroll container - drives progress */
.vl-scroll {
  position: relative;
  height: 520vh;
  --p: 0; --p1: 0; --p2: 0; --p3: 0; --p4: 0; --p5: 0;
}

/* Sticky viewport - pinned while scrolling */
.vl-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  background: var(--ink-2);
  isolation: isolate;
}

.vl-scene-wrap {
  position: relative;
  width: min(94vw, 1400px);
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vl-scene {
  width: 100%;
  height: auto;
  max-height: 78vh;
  filter: drop-shadow(0 20px 44px var(--border-soft));
}

/* ---- SVG animated elements ---- */

/* Erdwärmesonden - phase 1 */
.vl-sonde-path {
  fill: none;
  stroke: #0061AF;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p1));
}
.vl-sonde-cap {
  opacity: var(--p1);
  transform-origin: center;
  transform: scaleX(calc(0.6 + var(--p1) * 0.5));
  transform-box: fill-box;
}

/* Verbindungsleitung - phase 2 */
.vl-h-pipe-sleeve {
  fill: none;
  stroke: rgba(168, 200, 230,0.9);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p2));
}
.vl-h-pipe {
  fill: none;
  stroke: #0061AF;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p2));
}
.vl-h-pipe-hint {
  fill: none;
  stroke: #004B87;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p2));
  opacity: 0.6;
}

/* Frost depth - fades in with phase 2 */
.vl-frost-line {
  opacity: calc(var(--p2) * var(--text-strong));
}

/* Mauerdurchführung - phase 3 */
.vl-wall-seal {
  opacity: var(--p3);
  transform-origin: center;
  transform: scale(calc(0.5 + var(--p3) * 0.6));
  transform-box: fill-box;
}
.vl-riser-pipe {
  fill: none;
  stroke: #0061AF;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p3));
}

/* Wärmepumpe - phase 4 */
.vl-pump-glow {
  opacity: calc(var(--p4) * 0.6);
  transform-origin: center;
  transform: scale(calc(0.5 + var(--p4) * 0.6));
  transform-box: fill-box;
}
.vl-pump-body {
  filter: drop-shadow(0 0 calc(var(--p4) * 14px) rgba(0, 97, 175, 0.5));
}
.vl-pump-light {
  opacity: var(--p4);
}

/* Heat distribution - phase 5 */
.vl-heat-curve {
  fill: none;
  stroke: #0061AF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p5));
  opacity: calc(0.5 + var(--p5) * 0.6);
}
.vl-heat-wave {
  stroke: #c47a3a;
  opacity: calc(var(--p5) * 0.7);
}
.vl-heat-floor {
  stroke: #c47a3a;
  stroke-width: 1.7;
  opacity: calc(var(--p5) * var(--text));
}

/* Windows - base + warm overlay */
.vl-window {
  fill: #a8c8e6;
  opacity: 0.7;
}
.vl-window-warm-overlay rect {
  opacity: calc(var(--p5) * 0.7);
  mix-blend-mode: multiply;
}

/* Inline SVG labels */
.vl-inline-label { font-family: 'Inter', sans-serif; }
.vl-lbl-1 { opacity: calc(var(--p1) * var(--text-strong);) }
.vl-lbl-2 { opacity: calc(var(--p2) * var(--text-strong);) }
.vl-lbl-3 { opacity: calc(var(--p3) * var(--text-strong);) }
.vl-lbl-4 { opacity: calc(var(--p4) * var(--text-strong);) }

/* ---- Stage labels overlay ---- */
.vl-stage-overlay {
  position: absolute;
  top: clamp(20px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 88vw);
  height: 160px;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.vl-stage {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.vl-stage.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.vl-stage-num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0061AF;
  font-weight: 600;
  margin-bottom: 10px;
}
.vl-stage-title {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(38px, 5.6vw, 80px);
  font-style: normal;
  color: var(--paper);
  line-height: 1;
  letter-spacing: -0.02em;
}
.vl-stage-sub {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--paper-2);
  letter-spacing: 0.01em;
}

/* ---- Progress bar (bottom) ---- */
.vl-progress {
  position: absolute;
  bottom: clamp(20px, 5vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 11px;
  color: var(--paper-2);
  letter-spacing: 0.08em;
}
.vl-progress-text {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--paper);
}
.vl-progress-track {
  width: clamp(240px, 36vw, 460px);
  height: 2px;
  background: var(--tint-5);
  border-radius: 2px;
  overflow: hidden;
}
.vl-progress-fill {
  height: 100%;
  background: #0061AF;
  width: calc(var(--p) * 100%);
  transition: width 0.1s linear;
}

/* Scroll hint */
.vl-scroll-hint {
  position: absolute;
  bottom: clamp(56px, 10vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-softer);
  opacity: calc(1 - var(--p) * 8);
  transition: opacity 0.25s;
  pointer-events: none;
  animation: vlBob 2s ease-in-out infinite;
}
@keyframes vlBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

/* ---- Outro CTA ---- */
.vl-outro {
  padding: clamp(80px, 12vw, 160px) 0;
  text-align: center;
  background: var(--ink-2);
}
.vl-outro .section-title { max-width: 800px; margin: 8px auto 0; }
.vl-outro .section-lede { max-width: 720px; margin: 24px auto 0; }
.vl-outro-cta {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 980px) {
  .vl-scroll { height: 440vh; }
}
@media (max-width: 760px) {
  .vl-scroll { height: 400vh; }
  .vl-sticky { background: var(--ink-2); }
  .vl-stage-overlay { top: 24px; height: 140px; }
  .vl-stage-title { font-size: 30px; }
  .vl-stage-sub { font-size: 12px; margin-top: 8px; }
  .vl-progress { gap: 10px; font-size: 10px; }
  .vl-progress-track { width: 52vw; }
  .vl-scroll-hint { bottom: 62px; }
}

/* =========================================================
   LIQUID GLASS — extended surfaces
   Upgrade the existing frosted cards with the refined
   inset highlight + top-glint treatment, and apply full
   liquid-glass to a few additional surfaces.
   ========================================================= */

/* Top-glint upgrade for already-frosted cards on light islands. */
.field--light .field-card,
.field--light .contact-card,
.field--light .know-card,
.field--light .job {
  position: relative;
  isolation: isolate;
  background: var(--glass-5);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255,255,255, 0.6);
  box-shadow:
    0 10px 24px -14px rgba(0,40,90,0.22),
    0 2px 6px -2px rgba(0,40,90,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,40,90, 0.06),
    inset 0 0 0 1px rgba(255,255,255,0.32);
}
.field--light .field-card::before,
.field--light .contact-card::before,
.field--light .know-card::before,
.field--light .job::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}
.field--light .field-card:hover,
.field--light .contact-card:hover,
.field--light .know-card:hover,
.field--light .job:hover {
  background: var(--glass-6);
  box-shadow:
    0 16px 34px -14px rgba(0,40,90,0.28),
    0 3px 10px -2px rgba(0,40,90,0.1),
    inset 0 1px 0 rgba(255,255,255, 0.9),
    inset 0 -1px 0 rgba(0,40,90,0.08),
    inset 0 0 0 1px rgba(255,255,255, 0.5);
  border-color: rgba(255,255,255, 0.7);
}

/* Facts strip on homepage — promote from naked numbers to glass tiles. */
.facts { gap: 18px; }
.fact {
  position: relative;
  isolation: isolate;
  padding: 28px 20px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255, 0.6);
  background: var(--glass-5);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,40,90, 0.06),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 10px 24px -14px rgba(0,40,90,0.22),
    0 2px 6px -2px rgba(0,40,90,0.08);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.fact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}
.fact:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, 0.9),
    inset 0 -1px 0 rgba(0,40,90,0.08),
    inset 0 0 0 1px rgba(255,255,255, 0.5),
    0 16px 34px -14px rgba(0,40,90,0.28),
    0 3px 10px -2px rgba(0,40,90,0.1);
}
.fact-num, .fact-label { position: relative; z-index: 1; }

/* Hero meta strip — compact glass pills for location/site/team. */
.hero-meta > div {
  position: relative;
  isolation: isolate;
  padding: 10px 16px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.40);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 8px 20px -12px rgba(0,40,90,0.22);
}
.hero-meta > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}
.hero-meta .hm-k, .hero-meta .hm-v { position: relative; z-index: 1; color: var(--paper); }
.hero-meta .hm-k { color: rgba(0,0,0,0.55); }
.hero-meta .hm-v { color: var(--paper); }

/* Audience list — pill-style glass items. */
.audience li {
  position: relative;
  isolation: isolate;
  padding: 18px 20px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255, 0.6);
  background: var(--glass-5);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 0 0 1px rgba(255,255,255,0.30),
    0 8px 20px -14px rgba(0,40,90, 0.18),
    0 2px 5px -2px rgba(0,40,90, 0.06);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.audience li::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255,255,255, 0.5) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}
.audience li:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255, 0.9),
    inset 0 0 0 1px rgba(255,255,255,0.40),
    0 14px 28px -14px rgba(0,40,90,0.24),
    0 3px 8px -2px rgba(0,40,90, 0.1);
}
.audience li strong { display: block; margin-bottom: 4px; }
.audience { border-top: 0; padding-top: 40px; }

/* =========================================================
   ARCHIV — historische Aufnahmen
   ========================================================= */
.archiv {
  padding: clamp(80px, 10vw, 140px) 0;
  /* Always-dark island — archive photos pop on dark, consistent in both themes */
  background: linear-gradient(180deg, #2a2a2c 0%, #1d1d1f 100%);
}
.archiv .section-eyebrow,
.archiv .section-title,
.archiv .section-lede {
  color: rgba(255,255,255,0.92);
}
.archiv .section-eyebrow { color: rgba(255,255,255,0.55); }
.archiv .section-lede { color: rgba(255,255,255, 0.7); max-width: 620px; }
.archiv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 60px);
}
.archiv-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.archiv-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0f0f11;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px -20px var(--text-softer);
}
.archiv-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.03);
  transition: transform .6s var(--ease-out), filter .4s var(--ease-out);
}
.archiv-item:hover .archiv-media img {
  transform: scale(1.04);
  filter: saturate(1.04 contrast(1.04));
}
.archiv-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}
.archiv-year {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.archiv-cap {
  font-size: 14px;
  color: rgba(255,255,255, 0.9);
  line-height: 1.5;
}
@media (max-width: 900px) { .archiv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .archiv-grid { grid-template-columns: 1fr; } .archiv-media { aspect-ratio: 4 / 3; } }

/* Selection */
::selection { background: var(--accent); color: #ffffff; }

/* =========================================================
   Sprachen-Switcher in Nav
   ========================================================= */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tint-1);
}
.lang-switch a,
.lang-switch .lang-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--muted);
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: var(--accent);
  background: rgba(0,97,175,0.08);
  outline: none;
}
.lang-switch .lang-current {
  background: #1d1d1f;
  color: #ffffff;
  cursor: default;
}
@media (max-width: 1180px) {
  .lang-switch { display: none; }   /* Desktop-Position aus; im Mobile-Menu unten neu sichtbar */
}
/* Sprachen-Switcher im offenen Mobile-Menu wieder anzeigen */
.nav.is-open .lang-switch {
  display: inline-flex !important;
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 102;
  background: var(--tint-1);
  border-color: var(--line);
}
.nav.is-open .lang-switch a,
.nav.is-open .lang-switch .lang-current {
  color: var(--muted);
}
.nav.is-open .lang-switch a:hover,
.nav.is-open .lang-switch a:focus-visible {
  color: var(--accent);
  background: rgba(0,97,175,0.08);
}
.nav.is-open .lang-switch .lang-current {
  background: var(--paper);
  color: var(--ink);
}

/* =========================================================
   Blog — Übersicht und Artikel
   ========================================================= */
.blog {
  padding: clamp(60px, 8vw, 96px) 0 clamp(80px, 10vw, 120px);
  background: var(--ink-2);
}
.blog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ink-2);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.blog-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-3);
}
.blog-card-media img,
.blog-card-media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease-out);
}
.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}
.blog-card-body {
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}
.blog-card-title {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.blog-card-excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-2);
  flex: 1;
}
.blog-card-cta {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}
.blog-foot {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(20px, 2.5vw, 28px);
  text-align: center;
  background: rgba(0,97,175,0.04);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--paper-2);
}
.blog-foot a { color: var(--accent); font-weight: 600; }

/* Article (single post) */
.article {
  padding: clamp(96px, 12vw, 140px) 0 clamp(80px, 10vw, 120px);
}
.article-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.article-meta {
  margin: 18px 0 14px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.article-meta-sep { margin: 0 8px; opacity: 0.5; }
.article-meta-tag { color: var(--accent); }
.article-title {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.article-title em { font-style: italic; font-weight: inherit; color: var(--accent); }
.article-lede {
  margin: 0 0 clamp(28px, 4vw, 40px);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.55;
  color: var(--paper-2);
}
.article-fig {
  margin: clamp(28px, 4vw, 44px) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.article-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}
.article-fig figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.article-body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--paper);
}
.article-body h2 {
  margin: clamp(28px, 4vw, 40px) 0 12px;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--paper); }
.article-foot {
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--paper-2);
}
.article-foot a { color: var(--accent); }
.article-back {
  margin-top: 16px;
  font-weight: 600;
}

/* =========================================================
   Forschung & Patente (Maschinenbau)
   ========================================================= */
.research {
  padding: clamp(80px, 10vw, 120px) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
}
.research-block {
  margin-top: clamp(40px, 5vw, 60px);
}
.research-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.research-h {
  margin: 0 0 clamp(20px, 2.5vw, 30px);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.research-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.research-card {
  position: relative;
  padding: 24px 24px 20px;
  background: var(--tint-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.research-card--placeholder {
  background: rgba(0,97,175,0.04);
  border-color: rgba(0,97,175,0.15);
  border-style: dashed;
}
.research-tag {
  align-self: flex-start;
  display: inline-block;
  padding: 3px 10px;
  background: rgba(0,97,175, 0.1);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}
.research-card h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--paper);
}
.research-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-2);
}
.research-foot {
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding: clamp(20px, 2.5vw, 28px);
  text-align: center;
  background: rgba(0,97,175,0.04);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--paper-2);
}
.research-foot a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* =========================================================
   PRINT STYLESHEET — sauberer Browser-Druck / PDF-Export
   ========================================================= */
@media print {
  /* Setup */
  html, body {
    background: var(--ink-2) !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  @page {
    size: A4;
    margin: 18mm 16mm;
  }

  /* UI weg, was beim Drucken nichts verloren hat */
  .nav, .nav-burger, .nav-cta,
  .sticky-cta,
  .skip-link,
  .hero-slide-dots,
  .ref-filter, .ref-filter-wrap,
  .mach-tabs,
  .calc, .calc-disclaimer, .calc-cta,
  .footer-bottom .foot-legal,
  .form-row, .contact-form, .apply-form, .calc-lead, .calc-download,
  iframe,
  video, audio,
  button {
    display: none !important;
  }

  /* Slideshow → nur das erste Bild */
  .hero-slide { display: none !important; }
  .hero-slide.is-active { display: block !important; }

  /* Reveal-Animationen stoppen, sonst sind verdeckte Inhalte nicht im PDF */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Hintergründe abschalten, schwarz auf weiß */
  *, *::before, *::after {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .field, .field--dark, .hero, .hero--bright {
    background: var(--ink-2) !important;
  }

  /* Bilder skalieren */
  img, picture, svg, figure {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Headings nicht alleine am Seitenende */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
    color: #000000 !important;
  }
  em { font-style: italic !important; color: #000000 !important; }

  /* Strukturelle Blöcke nicht über Seiten zerreissen */
  .step, .field-card, .project, .proj, .mp-card,
  .quote, .legal-block, .faq-item,
  .warranty-card, .cert-card, .career-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Links: URL ausschreiben (ausser bei tel:/mailto: — die schon klar) */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555 !important;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="tel"]::after,
  a[href^="mailto"]::after {
    content: "";
  }

  /* Footer schlank */
  .footer {
    border-top: 1px solid #999 !important;
    padding: 8mm 0 0 !important;
    font-size: 9pt;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6mm !important;
  }
}

/* ====== Energierechner: Lead-Magnet Block ====== */
.calc-lead {
  grid-column: 1 / -1;          /* aus der schmalen Spalte ausbrechen */
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(135deg, rgba(0,97,175,0.04), rgba(0,97,175, 0.1));
  border: 1px solid rgba(0,97,175, 0.18);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.calc-lead-eyebrow {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.calc-lead-title {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper);
  letter-spacing: -0.015em;
}
.calc-lead-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: inherit;
}
.calc-lead-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-2);
}
.calc-lead-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-lead-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
}
.calc-lead-or {
  grid-column: 1 / -1;
  margin: 22px 0 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .calc-lead { grid-template-columns: 1fr; }
  .calc-lead-row { grid-template-columns: 1fr; }
}

/* ====== Förderungs-Checkliste Download-Card ====== */
.calc-download {
  grid-column: 1 / -1;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--ink-2);
  border: 1px solid var(--border-medium);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
  text-align: left;
}
.calc-download-icon {
  width: 56px; height: 56px;
  background: rgba(0,97,175, 0.1);
  color: var(--accent);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.calc-download-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.calc-download-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.calc-download-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-2);
}
.calc-download-btn { margin-top: 0; white-space: nowrap; }

@media (max-width: 720px) {
  .calc-download {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "icon text" "btn btn";
    row-gap: 14px;
  }
  .calc-download-icon { grid-area: icon; }
  .calc-download-text { grid-area: text; }
  .calc-download-btn  { grid-area: btn; width: 100%; text-align: center; }
}

/* ====== Bewerbungsformular ====== */
.apply-form {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  max-width: 720px;
}
.apply-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.apply-form .field-input--file input[type="file"] {
  padding: 12px 14px;
  background: var(--tint-1);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  font: 400 14px var(--f-sans);
  color: var(--paper);
  cursor: pointer;
}
.apply-form .field-input--file input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 6px 12px;
  background: var(--accent);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font: 600 12.5px var(--f-sans);
  cursor: pointer;
}
.apply-form .field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 600px) {
  .apply-form .form-row { grid-template-columns: 1fr; }
}

/* ====== Sticky CTA (langes Scrollen) ====== */
.sticky-cta {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 18px;
  background: var(--accent);
  color: #ffffff;
  font: 600 14.5px/1 var(--f-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(0,97,175,0.28), 0 4px 12px var(--border-medium);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), background 0.18s;
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sticky-cta:hover,
.sticky-cta:focus-visible {
  background: var(--brand-blue-deep);
  outline: none;
  transform: translateY(-2px) scale(1.03);
}
.sticky-cta-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 520px) {
  .sticky-cta { padding: 11px 18px 11px 14px; font-size: 13.5px; }
  .sticky-cta-label { display: none; }
  .sticky-cta-icon { width: 20px; height: 20px; }
}
@media print {
  .sticky-cta { display: none !important; }
}

/* =========================================================
   DARK MODE — component patches for hard-coded white glass
   These components use literal rgba(255,255,255,…) for borders,
   highlights, and inner shadows that look washed-out in dark mode.
   Below we override them with subtle white-on-dark equivalents.
   ========================================================= */
@media (prefers-color-scheme: dark) {

  /* OSM-Karte abdunkeln (invertierte Tiles, Farbton zurückgedreht) */
  .map-wrap iframe {
    filter: invert(0.88) hue-rotate(180deg) saturate(0.65) contrast(0.92);
  }

  /* Facts strip — was bright white frost, now subtle raised tile */
  .fact {
    border-color: var(--line);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      inset 0 0 0 1px rgba(255,255,255,0.03),
      0 10px 24px -14px rgba(0,0,0,0.55),
      0 2px 6px -2px rgba(0,0,0,0.35);
  }
  .fact::before {
    background:
      radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 38%);
  }
  .fact:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -1px 0 rgba(0,0,0,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      0 16px 34px -14px rgba(0,0,0,0.65),
      0 3px 10px -2px rgba(0,0,0,0.4);
    border-color: rgba(255,255,255,0.14);
  }
  .fact-label { color: var(--muted); }
  .fact-num   { color: var(--paper); }

  /* Hero meta pills (Standort/Sitz/Team strip under .hero--bright) */
  .hero-meta > div {
    border-color: var(--line);
  }

  /* Trust band — client logos & awards */
  .trust-client,
  .trust-award {
    border-color: var(--line);
  }

  /* Knowledge cards, FAQ, philosophy cards, quote cards */
  .know-card,
  .faq-item,
  .quote,
  .phil-card,
  .cool-card,
  .phase-card,
  .step,
  .partner-card,
  .vl-loss-card,
  .co2-card,
  .certs-card,
  .cfg-pill span,
  .mach-tab,
  .mp-card,
  .field-card,
  .contact-card,
  .proj,
  .job,
  .field--light .btn-ghost,
  .footer .btn-ghost {
    border-color: var(--line);
  }
  .know-card:hover,
  .phase-card:hover,
  .cool-card:hover,
  .proj:hover,
  .job:hover,
  .mp-card:hover,
  .mach-tab:hover {
    border-color: var(--border-strong);
  }

  /* Bright hero (Unimog CAD) — invert background gradient so dark surface flows */
  .hero--bright {
    color: var(--paper);
    background:
      radial-gradient(1200px 800px at 70% 40%, rgba(0,97,175,0.18), transparent 60%),
      radial-gradient(900px 700px at 20% 80%, rgba(20,30,50,0.55), transparent 65%),
      linear-gradient(180deg, #101013 0%, #07070a 100%);
  }
  .hero--bright .hero-title { color: var(--paper); }
  .hero--bright .hero-sub { color: var(--text); }
  .hero--bright .hero-meta { color: var(--text-soft); border-top-color: var(--line); }
  .hero--bright .hero-meta .hm-k { color: var(--muted-2); }
  .hero--bright .hero-meta .hm-v { color: var(--paper); }
  .hero--bright .hero-scroll { border-color: rgba(255,255,255,0.35); }
  .hero--bright .hero-scroll span { background: var(--paper); }
  .hero--bright .btn-ghost {
    background: rgba(255,255,255,0.06);
    color: var(--paper);
    border-color: rgba(255,255,255,0.18);
  }
  .hero--bright .btn-ghost:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.28);
  }

  /* Brand-blue gradient cards (CTA hero-tocs, etc.) — pop more on dark */
  .knowledge--alt { background: var(--ink); }

  /* Brand-blue accent cards — 4% blue tint vanishes on dark.
     Boost to a visible raised surface tinted with the lighter accent. */
  .warranty-card--accent,
  .co2-card--accent,
  .vl-loss-card--good {
    background: rgba(95,181,255,0.10);
    border-color: var(--accent-text);
  }
  .warranty-card--accent .warranty-num,
  .co2-card--accent .co2-card-num {
    color: var(--accent-text);
  }

  /* Page hero (sub-page headers) — was literal white gradient, invert to dark */
  .page-hero {
    background:
      radial-gradient(900px 500px at 75% 15%, rgba(0,97,175,0.18), transparent 65%),
      radial-gradient(700px 500px at 15% 90%, rgba(40,50,70,0.40), transparent 70%),
      linear-gradient(180deg, #101013 0%, #07070a 100%);
  }
  .page-hero::before {
    background-image:
      linear-gradient(rgba(95,181,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(95,181,255,0.06) 1px, transparent 1px);
  }
}