/* ─────────────────────────────────────────────
   FRIEDRICHS — Redesign 2026
   Inspired by Resintoi · Teal-charcoal + Spring green
   Display + Body: Work Sans · Mono labels: Fragment Mono
   ───────────────────────────────────────────── */

:root {
  /* Dark base — warm near-black */
  --ink: #161814;
  --banner: #5b5c60; /* dunkle Banner + Footer */
  --ui-dark: #5b5c60; /* Buttons & dunkle UI-Flächen (Tweak) */
  --ink-2: #2a2d28;
  --ink-3: #3a3d35;

  /* Light base — warm cream paper */
  --paper: #f4efe6;
  --paper-2: #faf7f1;
  --paper-3: #ece6d8;

  /* ── Akzentgruen — das helle Gruen der Mini CI (CMYK 45|0|87|0) ──
     Eine einzige Farbe, ueberall dieselbe. Auf gefuellten Flaechen steht die
     Schrift deshalb in --ink statt in Weiss: Weiss auf #a2c743 traegt nur
     2,1:1, dunkle Schrift dagegen 9,5:1. Auf dem hellen Papiergrund ist der
     Ton als Schriftfarbe bewusst zart (1,7:1) — er setzt Akzente, er traegt
     keinen Fliesstext. */
  --gruen: #a2c743;

  --accent: var(--gruen);
  --accent-2: var(--gruen);
  --accent-soft: var(--gruen);

  /* Forest green for secondary accents (used in some borders, labels) */
  --moss: #2c3a30;
  --moss-2: #475a48;

  /* Legacy alias tokens — point to current palette */
  --sand: var(--accent);
  --sand-2: var(--accent-soft);
  --stone: #a39d92;

  --line: rgba(22, 24, 20, 0.16);
  --line-cream: rgba(244, 239, 230, 0.18);

  --f-display: 'Work Sans', system-ui, sans-serif;
  --f-body: 'Work Sans', system-ui, sans-serif;
  --f-serif: 'Work Sans', system-ui, sans-serif;
  --f-accent: 'Playfair Display', Georgia, serif;
  --f-mono: 'Playfair Display', Georgia, serif;

  /* ── Type scale — single source of truth (Hauptseite = Referenz) ──
     H1 Hero 400 · H2 Sektionstitel 300 · H3 Zwischentitel 400 ·
     Card-Titel 400 · Stats 300 · Mono-Label 0.78 · Mono-Meta 0.74 */
  --fs-h1: clamp(2.6rem, min(6.4vw, 10.5vh), 6.2rem);
  --fs-h1-page: clamp(2.4rem, 6vw, 5.6rem);
  --fs-h2: clamp(2rem, 4.8vw, 4.6rem);
  --fs-h3: clamp(1.6rem, 2.6vw, 2.4rem);
  --fs-card: clamp(1.35rem, 2vw, 1.9rem);
  --fs-stat: clamp(1.6rem, 2.4vw, 2.2rem);
  --fs-label: calc(0.78rem * 1.05);
  --fs-meta: calc(0.74rem * 1.05);

  /* Tweak-Baseline — identisch zu TWEAK_DEFAULTS in tweaks-app.jsx, damit ein
     statischer Export (ohne localStorage) genauso aussieht wie die Vorschau. */
  --twh: 200;
  --twl: 50;
  --twb: 0;
  --tsh: 0.02em;
  --tsl: 0em;
  --tsb: 0em;
  --tw-body-fs: 17px;

  --r-sm: 1.2rem;
  --r-md: 1.4rem;
  --r-lg: 1.6rem;
  --r-xl: 1.8rem;
  --r-pill: 2rem;
  --r-btn: 2.4rem;

  /* Unified elevation — one shadow behind every image, card & floating panel */
  --shadow-card: 0 26px 55px -32px rgba(22, 24, 20, 0.22);
  --shadow-card-hover: 0 34px 66px -30px rgba(22, 24, 20, 0.3);

  --section-gap: clamp(0.6rem, 1.2vw, 1.2rem);

  /* Unified vertical rhythm — standard flush content sections */
  --section-pad-y: clamp(5rem, 10vw, 9rem);

  --ease: cubic-bezier(.2,.7,.1,1);
  --reveal-duration: 1.5s;

  --pad-x: max(clamp(1.2rem, 4vw, 4.5rem), calc((100vw - 1500px - 2 * var(--section-gap)) / 2));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }


/* small noisy paper feel */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(22, 24, 20, .035), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(22, 24, 20, .03), transparent 40%);
  mix-blend-mode: multiply;
}

/* ─────────────  TYPE  ───────────── */
.display, .section-head__title, .manifest__head, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  line-height: 1.02;
}
h3, h4 { font-weight: calc(400 + var(--twh, 0)); }

/* ─────────────  TASTATURFOKUS  ─────────────
   Ohne eigene Regel zeichnet der Browser seinen blauen Standardrahmen — der
   passte weder zur Marke noch zu den runden Formen. currentColor nimmt die
   Textfarbe der Umgebung auf und trägt damit auf hellem wie auf dunklem
   Grund. :focus-visible statt :focus, damit ein Mausklick keinen Rahmen
   stehen lässt. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible,
.menu-toggle:focus-visible,
.nav-sub:focus-visible { outline-offset: 4px; }
.display {
  /* hard-cap by viewport height so the H1 doesn't crowd the navbar on laptops */
  font-size: var(--fs-h1);
  line-height: 1.02;
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.045em + var(--tsh, 0em));
}
.display em {
  font-style: italic;
  color: var(--accent);
  font-weight: calc(400 + var(--twh, 0));
}

/* Grüne Hervorhebung in allen Überschriften — einheitlich */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--accent);
}
.display .line { display: block; }

/* mono label baseline shared by section labels, eyebrows, crumbs */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
  text-transform: none;
  font-weight: calc(400 + var(--twl, 0));
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(182, 162, 105, 0.22);
}

/* ─────────────  HEADER  ───────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid;
  /* Die Navigation steht in der Fenstermitte, nicht in der Mitte zwischen
     Logo und Knöpfen. Mit "auto 1fr auto" sind die Außenspalten verschieden
     breit (Logo 188px, Knöpfe 371px) — die Navigation saß dadurch 92px zu
     weit links. Beide Außenspalten teilen sich den Platz jetzt gleich auf.
     minmax(auto, …) statt 1fr ist die Rückfallebene: Wird das Fenster so
     schmal, dass die Hälfte für die Knöpfe nicht mehr reicht, nehmen sie
     sich ihre Mindestbreite und der Rest geht ans Logo — wie bisher, statt
     zu überlaufen. Ab etwa 1440px steht die Navigation genau mittig. */
  grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
  align-items: center;
  /* Nur Spaltenabstand. Ein Kind, das auf Desktop nicht in die drei Spalten
     gehört, würde sonst eine zweite Zeile aufmachen und die Kopfzeile um
     volle 2rem höher werden lassen — samt allem, was an ihrer Unterkante
     hängt (die Aufklappmenüs sitzen dort). Genau das war passiert. */
  column-gap: 2rem;
  row-gap: 0;
  padding: clamp(1.9rem, 2.8vw, 2.6rem) calc(var(--pad-x) + var(--section-gap)) clamp(0.9rem, 1.4vw, 1.3rem);
  color: var(--paper);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(244, 239, 230, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom-color: var(--line);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: inline-flex; align-items: center;
  min-height: 44px;   /* die Verknüpfung selbst war nur so hoch wie das Bild */
  transition: opacity .3s var(--ease);
}
.brand:hover { opacity: 0.78; }
.brand__logo {
  height: 62px;
  width: auto;
  display: block;
  /* invert dark CMYK logo to cream while hero is over video */
  filter: brightness(0) invert(0.94);
  transition: filter .4s var(--ease);
}
.site-header.is-stuck .brand__logo {
  /* on cream sticky header, render dark */
  filter: none;
}
.brand__logo--footer {
  height: 132px;
  margin-bottom: 1.2rem;
  filter: brightness(0) invert(0.94);
}
/* Bausteine, die es nur in der mobilen Schublade gibt. Ohne diese Zeilen
   sind sie auf Desktop Teil des Kopfzeilen-Rasters bzw. der Navigation:
   .nav-backdrop hat dort eine zweite Rasterzeile erzeugt, .nav-sub ist ein
   null Pixel breiter Knopf, den die Tabulatortaste trotzdem anspringt. */
.nav-foot,
.nav-backdrop,
.primary-nav > .has-dropdown > .nav-sub { display: none; }

.primary-nav {
  display: flex; gap: 1.5rem;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 500;
}
.primary-nav > a, .primary-nav > .has-dropdown > a, .primary-nav > .has-dropdown > button {
  position: relative; padding: 0.4rem 0;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font: inherit;
}
.primary-nav > a::after, .primary-nav .has-dropdown > a::after, .primary-nav .has-dropdown > button::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0);
  transform-origin: right; transition: transform .5s var(--ease);
}
.primary-nav > a:hover::after, .primary-nav .has-dropdown:hover > a::after, .primary-nav .has-dropdown:hover > button::after {
  transform: scaleX(1); transform-origin: left;
}

/* dropdown caret */
.nav-caret {
  width: 10px; height: 10px;
  transition: transform .3s var(--ease);
}
.has-dropdown:hover .nav-caret { transform: rotate(180deg); }

/* dropdown wrapper — mega-menu anchors to the full-width fixed header */
.has-dropdown { position: static; }

.dropdown {
  position: absolute;
  top: 100%;
  left: calc(var(--pad-x) + var(--section-gap));
  right: calc(var(--pad-x) + var(--section-gap));
  margin-top: 10px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 60;
}
/* Unsichtbare Brücke — hält :hover am Leben, während die Maus die Lücke
   zwischen Navigationspunkt und Aufklappmenü überquert.

   ACHTUNG, die 44px sind kein runder Wert: Die Lücke ist der untere
   Innenabstand der Kopfzeile plus die 10px margin-top hier darüber, also
   höchstens clamp(0.9rem, 1.4vw, 1.3rem) + 10px ≈ 43,8px. Die Brücke ist
   genau darauf abgemessen. Wird die Kopfzeile höher — etwa durch ein Kind,
   das eine zweite Rasterzeile aufmacht —, reißt die Brücke ab und das Menü
   klappt zu, bevor die Maus es erreicht. Höher darf sie aber auch nicht:
   Sie liegt über die volle Breite und würde sonst die Navigationspunkte
   selbst überdecken. */
.dropdown::before {
  content: "";
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  height: 44px;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.dropdown a {
  display: flex; flex-direction: column;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.dropdown a:hover {
  background: var(--paper-3);
}
.dropdown__num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--accent-2);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  margin-bottom: 0.2rem;
}
.dropdown__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: 1.05rem;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  color: var(--ink);
}
.dropdown__tag {
  font-size: 0.82rem;
  color: var(--ink-2);
  font-weight: 300;
  margin-top: 0.2rem;
}
.dropdown__footer {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  padding: 0.8rem 0.6rem 0.2rem;
  border-top: 1px solid var(--line);
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
}
.dropdown__footer a.dropdown__overview,
.dropdown__footer a.dropdown__ext {
  flex-direction: row;
  align-items: center;
}
.dropdown__overview {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.dropdown__overview svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.dropdown__overview:hover { color: var(--ink); background: var(--paper-3); }
.dropdown__overview:hover svg { transform: translateX(3px); }
.dropdown__ext {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.dropdown__ext:hover { background: var(--gruen); color: var(--ink); border-color: var(--gruen); }

@media (max-width: 900px) {
  .dropdown { display: none; }
}

/* flex-end hält die Knöpfe am rechten Rand, auch wenn ihre Spalte durch die
   gleichmäßige Aufteilung breiter ist als sie selbst. */
.header__actions { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.header__cta { padding: 0.7rem 1.1rem; font-size: 0.85rem; }
.header__cta--secondary { background: transparent; color: var(--paper); border: 1px solid rgba(247, 247, 245, 0.45); }
.header__cta--secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.site-header:not(.is-stuck) .header__cta.header__cta--secondary { background: transparent; color: var(--paper); border-color: rgba(247, 247, 245, 0.45); }
.site-header:not(.is-stuck) .header__cta.header__cta--secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.site-header.is-stuck .header__cta--secondary { color: var(--ink); border-color: rgba(26, 26, 24, 0.35); }
.site-header.is-stuck .header__cta--secondary:hover { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }

/* While the header is still transparent over the hero, swap the dark CTA
   for the cream variant so it stays legible against the video. The .is-stuck
   state below restores the ink fill. */
.site-header:not(.is-stuck) .header__cta {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.site-header:not(.is-stuck) .header__cta:hover {
  background: var(--gruen);
  border-color: var(--gruen);
  color: var(--ink);
}
.menu-toggle {
  display: none;
  justify-self: end;
  grid-column: 3;
  width: 38px; height: 38px;
  background: transparent; border: 0; cursor: pointer;
  color: inherit;
  flex-direction: column; justify-content: center; gap: 5px;
  transition: color .3s var(--ease);
}
.menu-toggle:hover { color: var(--accent); }
.menu-toggle span {
  display: block; height: 1px; width: 22px; background: currentColor; margin: 0 auto;
}

/* ─────────────  BUTTONS  ───────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--ink { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }
.btn--ink:hover { background: var(--gruen); color: var(--ink); border-color: var(--gruen); }
.btn--cream { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--cream:hover { background: var(--gruen); border-color: var(--gruen); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(247, 247, 245, 0.4); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--accent { background: var(--gruen); color: var(--ink); border-color: var(--gruen); }
.btn--accent:hover { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }

/* ─────────────  HERO  ───────────── */
.hero {
  position: relative;
  min-height: calc(100svh - 2 * var(--section-gap));
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  margin: var(--section-gap);
  border-radius: var(--r-xl);
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(1.38) contrast(1.04) saturate(1.08);
}
/* ─── Abgerundete Ecken bei Hintergrundvideos (Safari/iOS) ───
   WebKit gibt jedem <video> eine eigene Compositing-Ebene, die von
   "overflow: hidden" der Elternbox nicht mitbeschnitten wird — auf dem iPhone
   blieben die Videoecken eckig, während Schleier und Inhalt darüber rund
   waren. Beim Hero erzwingt zusätzlich der filter auf .hero__video eine
   eigene Ebene.

   Die Rundung am Video selbst zu wiederholen, ist NICHT die Lösung: WebKit
   rundet dann die Box, zeichnet die Videofläche darunter aber weiter eckig —
   in den Ecken erscheint die graue Grundfarbe der Videoebene.

   clip-path beschneidet dagegen den gesamten Teilbaum geometrisch, auch
   ausgelagerte Ebenen, und zwar exakt auf dieselbe Form wie border-radius.
   Beide Angaben bleiben stehen: border-radius für den normalen Fall,
   clip-path für die ausgelagerten Ebenen. */
.hero,
.karriere,
.page-hero,
.feat--bleed,
.scatter__card {
  clip-path: inset(0 round var(--r-xl));
}

/* Auf der Startseite steht die Schrift weiterhin im Bild — ganz ohne
   Schleier waere sie ueber hellen Videostellen nicht mehr lesbar. Er ist
   deshalb nur zurueckgenommen: oben und in der Mitte deutlich heller, unten
   bleibt genug Grund fuer Ueberschrift, Vorspann und Knoepfe. */
.hero__veil {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.02) 30%, rgba(0,0,0,0.11) 62%, rgba(0,0,0,0.34) 100%),
    radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.10), transparent 62%),
    radial-gradient(ellipse at 30% 70%, rgba(44,58,48,0.07), transparent 60%);
}

.hero__rule {
  position: absolute; top: 5.5rem; left: var(--pad-x); right: var(--pad-x);
  display: flex; justify-content: space-between;
  font-size: var(--fs-meta); letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.78; font-weight: 500;
}
.hero__rule::before, .hero__rule::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 1px; background: currentColor; opacity: 0.25;
}
.hero__rule::before { top: -0.8rem; }
.hero__rule::after { bottom: -0.8rem; }
.hero__rule span:not(:first-child):not(:last-child) { display: none; }

@media (min-width: 900px) {
  .hero__rule span { display: inline !important; }
}

.hero__content {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(4rem, 10vh, 7rem);
  max-width: 1500px;
}
.hero__lede {
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  max-width: 560px;
  margin-top: 1.2rem;
  line-height: 1.5;
  font-weight: 300;
  opacity: 0.97;
  text-shadow: 0 1px 18px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45);
}
.hero__actions {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
  margin-top: 1.8rem;
}
.eyebrow { margin-bottom: 1.2rem; }
/* Der Schleier ist heller geworden; die Ueberschrift traegt ihren Kontrast
   jetzt staerker selbst, damit sie auch ueber hellen Videostellen steht. */
.display { margin: 0 0 0 -0.05em; text-shadow: 0 2px 34px rgba(0,0,0,0.62), 0 1px 3px rgba(0,0,0,0.5); }

.hero__scroll {
  position: absolute; right: var(--pad-x); bottom: 2.4rem;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: var(--fs-meta); letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.hero__scroll:hover { color: var(--accent); transform: translateY(2px); }
.hero__scroll-line {
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, transparent, currentColor 30%, currentColor 70%, transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; top: -40%; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--paper));
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine { 0% { transform: translateY(0); } 100% { transform: translateY(260%); } }

.hero__badge {
  position: absolute;
  top: clamp(7.5rem, 11vh, 10rem); right: var(--pad-x);
  width: clamp(88px, 12.1vw, 143px);
  animation: spin 38s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4));
}
.hero__badge img { width: 100%; height: 100%; filter: brightness(0) invert(1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────  MARQUEE  ───────────── */
.marquee {
  background: var(--banner);
  color: var(--paper);
  padding: 1.4rem 0;
  overflow: hidden;
  margin: var(--section-gap);
  border-radius: var(--r-lg);
}
.marquee__track {
  display: inline-flex; gap: 2rem;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--f-display);
  font-style: normal;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
}
.marquee__track span { padding-right: 2rem; }
.marquee__track span[aria-hidden="true"] { color: var(--accent); padding-right: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─────────────  SECTION SHARED  ───────────── */
.section-head, .manifest, .leistungen, .projekte, .historie, .team, .service-section, .kontakt {
  padding: var(--section-pad-y) var(--pad-x);
}
.section-head__label, .manifest__label {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
  text-transform: none;
  font-weight: calc(400 + var(--twl, 0));
  color: var(--ink-2);
  margin-bottom: 1.6rem;
}
.section-head__label--cream { color: var(--paper); }
.vrule { display: inline-block; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }

.section-head__title, .manifest__head {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: 1.4rem;
}
.section-head__title em, .manifest__head em {
  font-style: italic;
  color: var(--sand);
}
.section-head__sub {
  max-width: 56ch; font-size: 1.1rem; color: var(--ink-2);
  font-weight: 300;
}

/* ─────────────  MANIFEST  ───────────── */
.manifest {
  background: var(--paper-2);
  position: relative;
}
.manifest__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: end;
  max-width: 1500px;
  margin: 0 auto;
}
.manifest__grid > * { max-width: 50ch; }
.manifest__head em {
  font-style: italic; color: var(--sand);
}
.manifest__body {
  font-size: 1.18rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--ink-2);
}
.manifest__body em { font-style: normal; color: var(--ink); font-weight: 500; }

.manifest__stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.manifest__stats b {
  display: block;
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-stat);
  line-height: 1; color: var(--moss);
}
.manifest__stats span {
  display: block;
  font-size: 0.85rem; color: var(--ink-2);
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

.manifest__plate {
  position: relative;
  margin: 0;
}
.manifest__plate img {
  width: 100%; height: 70vh; max-height: 720px;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.manifest__plate figcaption {
  position: absolute; bottom: 1.2rem; left: 1.2rem;
  background: rgba(22, 24, 20, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  font-family: var(--f-mono);
  max-width: 90%;
  border-radius: var(--r-pill);
}

/* ─────────────  LEISTUNGEN  ───────────── */
.leistungen {
  background: var(--paper);
}
.section-head { padding: 0; max-width: 1500px; margin: 0 auto 5rem; }
.services {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.6rem;
  max-width: 1500px; margin: 0 auto;
}
.service {
  grid-column: span 2;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  transition: transform .6s var(--ease), border-color .4s var(--ease);
}
.service:hover { transform: translateY(-4px); border-color: var(--moss); }
.service--wide { grid-column: span 4; }
.service--dark { background: var(--moss); color: var(--paper); border-color: var(--moss); }
.service--dark .service__no { color: var(--sand-2); }
.service--dark .chips li { background: rgba(244, 239, 230, 0.1); color: var(--paper); border-color: rgba(244,239,230, 0.2); }

.service__no {
  position: absolute; top: 1rem; left: 1.2rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--sand);
  z-index: 2;
}
.service__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.service--wide .service__media { aspect-ratio: 16 / 9; }
.service__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.service:hover .service__media img { transform: scale(1.04); }

.service__text { padding: 1.6rem 1.6rem 1.8rem; }
.service__text h3 {
  font-size: var(--fs-card);
  margin-bottom: 0.6rem;
  font-weight: calc(400 + var(--twh, 0));
}
.service__text p {
  font-size: 0.96rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
  color: var(--ink-2);
}
.service--dark .service__text p { color: rgba(244, 239, 230, 0.78); }

.chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.chips li {
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.36rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(0,0,0,0.02);
  color: var(--ink-2);
  font-weight: 500;
}

/* ─────────────  PROJEKTE  ───────────── */
.projekte {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  margin: var(--section-gap);
  border-radius: var(--r-xl);
}
.projekte .section-head__label { color: var(--sand-2); }
.projekte .section-head__title em { color: var(--sand); }
.projekte .section-head__sub { color: rgba(244, 239, 230, 0.7); }

.project {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto clamp(5rem, 10vw, 9rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--line-cream);
}
.project:last-of-type { margin-bottom: 4rem; }
.project--reverse { grid-template-columns: 1.4fr 1fr; }
.project--reverse .project__meta { order: 2; }
.project--reverse .project__media { order: 1; }

.project__index {
  display: inline-block;
  font-family: var(--f-display);
  font-style: italic;
  color: var(--sand);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.project__meta h3 {
  font-size: var(--fs-h3);
  font-weight: calc(400 + var(--twh, 0));
  margin-bottom: 0.8rem;
  line-height: 1;
}
.project__loc {
  font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand-2);
  margin-bottom: 1.4rem;
  font-weight: 500;
}
.project__txt {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.82);
  font-weight: 300;
  margin-bottom: 2rem;
}
.project__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  border-top: 1px solid var(--line-cream);
  padding-top: 1.4rem;
}
.project__facts dt {
  font-size: var(--fs-meta); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.project__facts dd {
  font-family: var(--f-display);
  font-size: var(--fs-stat);
  font-weight: calc(400 + var(--twh, 0));
  color: var(--paper);
}

.project__media {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, minmax(40px, 1fr));
  gap: 0.6rem;
  aspect-ratio: 5/4;
}
.pm { overflow: hidden; border-radius: var(--r-md); }
.pm img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); }
.pm:hover img { transform: scale(1.05); }
.pm--lead { grid-column: 1 / 5; grid-row: 1 / 5; }
.pm--a { grid-column: 5 / 7; grid-row: 1 / 4; }
.pm--b { grid-column: 3 / 7; grid-row: 5 / 7; }

.projekte__more { text-align: center; }

/* ─────────────  HISTORIE  ───────────── */
.historie {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.historie__intro {
  max-width: 1500px; margin: 0 auto 5rem;
}
.historie__title {
  font-size: var(--fs-h2);
  font-weight: 300; line-height: 1;
  margin-bottom: 1rem;
}
.historie__title em {
  font-style: italic; color: var(--sand);
}
.historie__sub { max-width: 56ch; color: var(--ink-2); font-size: 1.1rem; font-weight: 300; }

.timeline {
  list-style: none;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1.4rem;
  max-width: 1500px; margin: 0 auto;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--moss-2) 6%, var(--moss-2) 94%, transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.6s var(--ease);
}
.timeline.is-shown::before { transform: scaleX(1); }

.tl {
  position: relative;
  padding-top: 64px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.timeline.is-shown .tl { opacity: 1; transform: translateY(0); }
.tl__dot {
  position: absolute; top: 22px; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--moss);
}
.tl--now .tl__dot { background: var(--sand); border-color: var(--sand); box-shadow: 0 0 0 6px rgba(182, 162, 105, 0.22); }
.tl__year {
  font-family: var(--f-display);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--sand);
  display: block; margin-bottom: 0.5rem;
}
.tl h4 {
  font-size: var(--fs-card);
  font-weight: calc(400 + var(--twh, 0));
  margin-bottom: 0.5rem;
}
.tl p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* ─────────────  TEAM  ───────────── */
.team {
  background: var(--paper-3);
}
.team__head {
  max-width: 1500px; margin: 0 auto 4rem;
}
.team__head h2 {
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0)); margin-bottom: 1rem; line-height: 1;
}
.team__head p { max-width: 56ch; color: var(--ink-2); font-size: 1.1rem; font-weight: 300; }

.team__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.4rem;
  max-width: 1500px; margin: 0 auto;
}
.member { text-align: left; }
.member__avatar {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink);
  margin-bottom: 1rem;
  filter: grayscale(0.25);
  transition: filter .6s var(--ease);
}
.member:hover .member__avatar { filter: grayscale(0); }
.member__avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.member:hover .member__avatar img { transform: scale(1.05); }
.member h4 {
  font-size: 1.3rem;
  font-weight: calc(400 + var(--twh, 0));
  margin-bottom: 0.2rem;
}
.member span {
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* ─────────────  SERVICE / BOOKING  ───────────── */
.service-section { background: var(--paper); }
.service-section__head { max-width: 1060px; margin: 0 auto 2rem; }
.service-section__head h2 {
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0)); margin-bottom: 1rem; line-height: 1;
}
.service-section__head p { max-width: 56ch; color: var(--ink-2); font-size: 1.1rem; font-weight: 300; }

/* Zugangsregel des Formulars — steht bewusst zwischen Ueberschrift und
   Kalender, damit niemand erst nach dem Ausfuellen erfaehrt, dass die
   Buchung Bestandskunden vorbehalten ist. */
.booking-hinweis {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 1060px;
  margin: 0 auto 1.1rem;
  padding: 0.95rem 1.25rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--gruen);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 500;
  line-height: 1.4;
}
.booking-hinweis svg {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  color: var(--ink);
}
.booking__feldnote {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: -0.4rem 0 0.9rem;
}

.booking {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "topics cal" "slots cal";
  gap: 1.25rem;
  max-width: 1060px; margin: 0 auto;
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 1.25rem;
  border-radius: var(--r-lg);
}
.booking__topics { grid-area: topics; display: flex; flex-direction: column; gap: 0.45rem; }
.topic {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--paper);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.topic:hover { border-color: var(--moss); }
.topic input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; flex: 0 0 18px; }
.topic input:checked { background: radial-gradient(circle, var(--moss) 38%, var(--paper) 42%); border-color: var(--moss); }
.topic:has(input:checked) { border-color: var(--moss); background: rgba(44,58,48,0.04); }
.topic h4 { font-family: var(--f-display); font-weight: calc(400 + var(--twh, 0)); font-size: 1.15rem; margin-bottom: 0.2rem; }
.topic span { font-size: 0.85rem; color: var(--ink-2); }

.booking__cal {
  grid-area: cal;
  padding: 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.booking__cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.booking__cal-head span {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: calc(400 + var(--twh, 0));
}
.cal-nav {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper); cursor: pointer;
  font-size: 1.2rem; color: var(--ink);
  transition: background .3s, color .3s, border-color .3s;
}
.cal-nav:hover { background: var(--moss); color: var(--paper); border-color: var(--moss); }

.cal__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-2);
  margin-bottom: 0.6rem; font-weight: 500;
}
.cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal__day {
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  border-radius: 50%;
  cursor: pointer;
  background: transparent; border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s;
  color: var(--ink);
}
.cal__day.is-empty { cursor: default; }
.cal__day.is-past { color: var(--stone); cursor: not-allowed; }
.cal__day.is-blocked { color: var(--stone); cursor: not-allowed; }
.cal__day.is-booked { color: var(--stone); cursor: not-allowed; text-decoration: line-through; }
.cal__day.is-today { border-color: var(--sand); }
.cal__day:not(.is-past):not(.is-empty):hover { background: var(--paper-3); }
.cal__day.is-selected { background: var(--ui-dark); color: var(--paper); }

.booking__slots {
  grid-area: slots;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.95rem 1.1rem 1.1rem;
}
.booking__slots h5 {
  font-size: var(--fs-meta); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 0.7rem; font-weight: 500;
}
.booking__note { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 1.1rem; }
.booking__note b { color: var(--ink); font-weight: 600; }
.booking__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.9rem; }
.booking__fields .feld--voll { grid-column: 1 / -1; }
.booking__fields input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--ink);
  transition: border-color .3s, background .3s;
}
.booking__fields input::placeholder { color: var(--stone); }
.booking__fields input:focus { outline: none; border-color: var(--moss); background: var(--paper); }
.booking__fehler { font-size: 0.88rem; color: #9c3d2e; margin-bottom: 0.9rem; }
.booking__erfolg { margin-bottom: 0; }
.booking__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.booking__confirm:disabled { opacity: 0.6; cursor: wait; }
.booking__confirm { width: 100%; justify-content: center; margin-top: auto; }

/* ─────────────  KONTAKT  ───────────── */
.kontakt {
  background: var(--paper-2);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.kontakt__intro h2 {
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0)); margin-bottom: 1rem; line-height: 1;
}
.kontakt__intro p {
  max-width: 50ch; color: var(--ink-2); font-size: 1.1rem; font-weight: 300;
  margin-bottom: 2.4rem;
}
.kontakt__facts {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.kontakt__facts li {
  display: grid;
  grid-template-columns: 110px 1fr;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  gap: 1rem;
}
.kontakt__facts span {
  font-size: var(--fs-meta); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500; padding-top: 0.15rem;
}
.kontakt__facts b {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: calc(400 + var(--twh, 0));
  color: var(--ink);
}

/* form */
.form {
  display: flex; flex-direction: column; gap: 1.2rem;
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: block; }
.field > span {
  display: block;
  font-size: var(--fs-meta); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 0.5rem; font-weight: 500;
}
.field > span small { letter-spacing: 0.04em; text-transform: none; color: var(--stone); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 1rem;
  transition: border-color .3s, background .3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--moss); background: var(--paper);
}

.field--checks {
  border: 0;
  padding: 0;
}
.field--checks legend {
  font-size: var(--fs-meta); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 0.6rem; font-weight: 500;
}
.field--checks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.9rem;
}
.field--checks > label {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.95rem; cursor: pointer;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  transition: border-color .3s, background .3s;
  background: var(--paper-2);
}
.field--checks > label:hover { border-color: var(--moss); }
.field--checks input { accent-color: var(--moss); }

.upload__zone {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.5rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--moss-2);
  border-radius: var(--r-md);
  background: var(--paper-2);
  text-align: center;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}
.upload__zone:hover, .upload__zone.is-drag { background: rgba(44,58,48,0.05); border-color: var(--moss); }
.upload__zone svg { width: 26px; height: 26px; color: var(--moss); }
.upload__zone b { font-family: var(--f-display); font-weight: calc(400 + var(--twh, 0)); font-size: 1.1rem; }
.upload__zone > span { font-size: 0.85rem; color: var(--ink-2); }
.upload input[type="file"] { display: none; }
.upload__list { list-style: none; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--ink-2); }
.upload__list li { padding: 0.25rem 0.6rem; background: var(--paper-3); border-radius: 1rem; }

.checkbox-line { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--ink-2); }
.checkbox-line a { text-decoration: underline; transition: color .3s var(--ease); }
.checkbox-line a:hover { color: var(--moss); }
.form__submit { align-self: flex-start; }

.form__fehler { font-size: 0.88rem; color: #9c3d2e; margin: -0.4rem 0 0.2rem; }
.kurzform__datenschutz { margin-bottom: 0.4rem; }
.kurzform .form__fehler { margin: 0 0 0.4rem; }

.form__sent {
  position: absolute; left: 50%; bottom: -2.6rem;
  transform: translateX(-50%);
  background: var(--moss); color: var(--paper);
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  border-radius: 1rem;
  opacity: 0; transition: opacity .4s var(--ease);
}
.form__sent.is-shown { opacity: 1; }

/* ─────────────  KARRIERE  ───────────── */
.karriere {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  padding: clamp(5rem, 10vw, 9rem) var(--pad-x);
  isolation: isolate;
  margin: var(--section-gap);
  border-radius: var(--r-xl);
}
.karriere__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.karriere__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(22,24,20,0.85) 0%, rgba(44,58,48,0.7) 100%);
}
.karriere__inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1500px; margin: 0 auto;
  align-items: center;
}
.karriere__text h2 {
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0)); margin-bottom: 1rem; line-height: 1;
}
.karriere__text p {
  font-size: 1.1rem; font-weight: 300;
  max-width: 50ch; color: rgba(244, 239, 230, 0.85);
  margin-bottom: 1rem;
}
.kurzbewerbung-hint { color: var(--sand-2) !important; font-style: italic; font-family: var(--f-display); font-weight: calc(400 + var(--twh, 0)); font-size: 1.2rem !important; }

.kurzform {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
}
.kurzform h3 {
  font-size: var(--fs-h3);
  font-weight: calc(400 + var(--twh, 0));
  margin-bottom: 1.4rem;
}
.kurzform .field { margin-bottom: 1rem; }
.kurzform .btn { width: 100%; justify-content: center; margin-top: 0.6rem; }

/* ─────────────  FOOTER  ───────────── */
.footer {
  background: var(--banner);
  color: var(--paper);
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x) 1.6rem;
  margin: var(--section-gap);
  border-radius: var(--r-xl);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1500px; margin: 0 auto 3rem;
  border-bottom: 1px solid var(--line-cream);
  padding-bottom: 3rem;
}
.footer__brand .brand__mark { width: 56px; height: 56px; margin-bottom: 1rem; }
.footer__brand p { max-width: 26ch; color: rgba(244, 239, 230, 0.7); font-size: 0.95rem; line-height: 1.55; }
.footer h5 {
  font-size: var(--fs-meta); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sand-2);
  font-family: var(--f-body); font-weight: 500;
  margin-bottom: 1.2rem;
}
.footer__nav, .footer__contact, .footer__social { display: flex; flex-direction: column; gap: 0.45rem; }
.footer__nav a, .footer__contact a, .footer__social a {
  color: rgba(244,239,230,0.85);
  font-size: 0.95rem;
  transition: color .3s, transform .3s var(--ease);
  display: inline-block;
}
.footer__nav a:hover, .footer__contact a:hover, .footer__social a:hover {
  color: var(--sand); transform: translateX(3px);
}
.footer__contact p { color: rgba(244,239,230,0.7); font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.4rem; }

.footer__base {
  max-width: 1500px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  font-size: 0.78rem; color: rgba(244,239,230,0.55);
  letter-spacing: 0.04em;
}
.footer__base a { color: rgba(244,239,230,0.7); transition: color .3s; }
.footer__base a:hover { color: var(--sand); }
.footer__divider {
  flex: 1; height: 1px; background: var(--line-cream); min-width: 20px;
}

/* ─────────────  COOKIE-EINWILLIGUNG  ─────────────
   Gestaltet wie die übrigen Karten der Seite: Papierfarbe, große Rundung,
   dieselbe Schattenkante. Unten links statt über die volle Breite — die
   Seite soll lesbar bleiben, während man entscheidet. */
/* Ohne diese Zeile bleibt der Banner im Layout stehen, auch wenn das
   hidden-Attribut gesetzt ist: Eine Autorenregel mit display schlaegt die
   Browserregel [hidden] { display: none }. Die unsichtbare Karte (opacity 0,
   aber pointer-events auto) fing dann saemtliche Klicks und Beruehrungen in
   ihrem Bereich ab — auf dem Telefon der halbe Bildschirm, und keine
   Verknuepfung darunter liess sich mehr antippen. */
.cookies[hidden] { display: none; }

.cookies {
  position: fixed;
  left: var(--section-gap);
  right: var(--section-gap);
  bottom: var(--section-gap);
  z-index: 70;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}
.cookies__card {
  pointer-events: auto;
  width: min(100%, 32rem);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.4rem, 3vw, 2rem);
  /* Startzustand: leicht versetzt und unsichtbar. .is-offen setzt beides
     zurück — das Einblenden übernimmt assets/js/cookies.js. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.cookies.is-offen .cookies__card { opacity: 1; transform: none; }

.cookies__label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss-2);
  margin-bottom: 0.9rem;
}
.cookies__label .vrule { width: 22px; height: 1px; background: var(--accent); display: block; }

.cookies__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  margin-bottom: 0.7rem;
}
.cookies__title em { font-family: var(--f-mono); font-style: italic; color: var(--accent); }

.cookies__text {
  font-size: 0.92rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
  text-wrap: pretty;
}

/* Beide Knöpfe gleich groß und gleich auffällig — die Ablehnung darf nicht
   schwerer zu finden sein als die Zustimmung. */
.cookies__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookies__btn { flex: 1 1 12rem; justify-content: center; padding: 0.85rem 1.2rem; }
.cookies__btn--schlicht {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
.cookies__btn--schlicht:hover {
  background: var(--ui-dark);
  color: var(--paper);
  border-color: var(--ui-dark);
}

/* ── Einzelheiten: Kategorien mit Schaltern ── */
.cookies__text--klein { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 1.1rem; }

.cookies__liste {
  /* Bei drei Kategorien passt alles; wächst die Liste, wird hier gerollt
     statt die Karte über den Bildschirm hinauswachsen zu lassen. */
  max-height: min(46vh, 22rem);
  overflow-y: auto;
  margin-bottom: 1.2rem;
  padding-right: 0.4rem;
}
.cookies__gruppe { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.cookies__gruppe:first-child { border-top: 0; padding-top: 0; }

.cookies__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer;
}
.cookies__gruppe-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1rem;
}
.cookies__zeile input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Schalter — nachgebaut, damit er die Formensprache der Seite trifft */
.cookies__schalter {
  flex: none;
  width: 44px; height: 25px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  border: 1px solid var(--line);
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.cookies__schalter::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(22,24,20,0.28);
  transition: transform .3s var(--ease);
}
.cookies__zeile input:checked ~ .cookies__schalter {
  background: var(--accent);
  border-color: var(--accent);
}
.cookies__zeile input:checked ~ .cookies__schalter::after { transform: translateX(19px); }
.cookies__zeile input:focus-visible ~ .cookies__schalter { outline: 2px solid currentColor; outline-offset: 3px; }
/* Essenziell lässt sich nicht abschalten — das zeigt der Schalter auch */
.cookies__schalter--fest { background: var(--moss); border-color: var(--moss); opacity: 0.55; }
.cookies__schalter--fest::after { transform: translateX(19px); }

.cookies__gruppe-text {
  font-size: 0.86rem; line-height: 1.55; font-weight: 300;
  color: var(--ink-2); margin-top: 0.5rem;
}
.cookies__dienst {
  font-family: var(--f-mono);
  font-size: 0.74rem; line-height: 1.5;
  color: var(--ink-3); margin-top: 0.35rem;
}

/* "Individuelle Datenschutzeinstellungen" / "Zurück" — bewusst als Textzeile,
   damit die beiden Entscheidungsknöpfe darüber die Hauptsache bleiben. */
.cookies__mehr {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.3rem 0;
  background: none; border: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.cookies__mehr:hover { color: var(--accent); }

.cookies__fein {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
}
.cookies__fein a { color: var(--ink-2); text-decoration: underline; transition: color .3s var(--ease); }
.cookies__fein a:hover { color: var(--accent); }

/* "Cookie-Einstellungen" im Fußbereich — sieht aus wie die Verweise daneben,
   ist aber ein Knopf: Er öffnet ein Fenster, er führt nicht auf eine Seite. */
.footer__cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: rgba(244, 239, 230, 0.7);
  transition: color .3s;
}
.footer__cookies:hover { color: var(--paper); }

@media (max-width: 600px) {
  .cookies__card { width: 100%; }
  .cookies__btn { flex: 1 1 100%; }
}

/* ─────────────  REVEALS  ───────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease);
}
[data-reveal].is-shown { opacity: 1; transform: translateY(0); }
.display[data-reveal] .line {
  display: block;
  padding-bottom: 0.08em; /* room for descenders (g, ä) */
}

/* ─────────────  RESPONSIVE  ───────────── */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(4, 1fr); }
  .service, .service--wide { grid-column: span 2; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .team__list { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .booking { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "topics" "cal" "slots"; }
  .cal__weekdays, .cal__grid { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .manifest__inner, .kontakt, .karriere__inner { grid-template-columns: 1fr; }
  .project, .project--reverse { grid-template-columns: 1fr; gap: 2rem; }
  .project--reverse .project__meta, .project--reverse .project__media { order: 0; }
  .primary-nav { display: none; }
  .menu-toggle { display: flex; }
  .header__cta { display: none; }
  .header__actions { display: none; }
  .hero__rule { display: none; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline::before { display: none; }
  .form__row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .services { grid-template-columns: 1fr; }
  .service, .service--wide { grid-column: span 1; }
  .team__list { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .timeline { grid-template-columns: 1fr; }
  .field--checks { grid-template-columns: 1fr; }
  .manifest__stats { grid-template-columns: 1fr 1fr; }
  .project__facts { grid-template-columns: 1fr 1fr; }
  .pm--lead { grid-column: 1 / 7; grid-row: 1 / 4; }
  .pm--a { grid-column: 1 / 4; grid-row: 4 / 7; }
  .pm--b { grid-column: 4 / 7; grid-row: 4 / 7; }
}

/* ─────────────  PROJECTS — full-bleed feature cards  ───────────── */
.projects-stack {
  padding: var(--section-pad-y) 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.projects-stack__head {
  max-width: calc(1500px + 2 * (var(--pad-x) + var(--section-gap)));
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0 calc(var(--pad-x) + var(--section-gap));
  width: 100%;
}
.projects-stack__title {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  line-height: 1;
  margin: 0;
}
.projects-stack__title em {
  font-style: italic;
  color: var(--accent);
}

.proj-feature {
  /* Der Textblock stand absolut an der Unterkante, die Kachel hatte eine
     feste Hoehe. Laengerer Text wuchs dadurch nach oben in die Kategorie-Marke
     hinein — gemessen bis auf 31px Abstand, waehrend kuerzere Kacheln 250px
     Luft hatten. Jetzt fliesst der Text und die Kachel waechst mit; der
     Innenabstand oben haelt die Spur der Marke frei. Genau so war es fuer
     Bildschirme unter 700px schon geloest, nur nicht darueber.
     Bild, Blende, Marke und Knopf liegen weiterhin absolut und fuellen bzw.
     verankern sich an der Kachel wie bisher. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: auto;
  min-height: clamp(440px, 60vh, 640px);
  padding-top: clamp(5.4rem, 10vw, 8.5rem);
  margin: 0 var(--section-gap);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
  text-decoration: none;
}
.proj-feature__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.6s var(--ease);
}
.proj-feature:hover .proj-feature__img { transform: scale(1.045); }
.proj-feature__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.12) 32%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.9) 100%);
  transition: background .5s var(--ease);
}
.proj-feature:hover .proj-feature__veil {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.18) 32%, rgba(0,0,0,0.62) 62%, rgba(0,0,0,0.94) 100%);
}
/* Lighter scrim for photos that are already dark (e.g. night shots) */
.proj-feature--dark-img .proj-feature__veil,
.proj-feature--dark-img:hover .proj-feature__veil {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}

.proj-feature__no {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.4rem);
  left: clamp(1.6rem, 3vw, 3rem);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--paper);
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(244, 239, 230, 0.4);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(22, 24, 20, 0.18);
}

.proj-feature__body {
  text-shadow: 0 1px 14px rgba(0,0,0,0.35);
  /* Fliesst jetzt im Kachelraster statt absolut zu stehen. Die Abstaende
     entsprechen den frueheren left/right/bottom-Werten, damit sich an
     kurzen Kacheln nichts verschiebt. */
  padding: 0 clamp(1.6rem, 3vw, 3rem) clamp(2rem, 4vw, 3.4rem);
  max-width: 760px;
}
.proj-feature__loc {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--accent-soft);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  margin-bottom: 0.8rem;
}
.proj-feature__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  color: var(--paper);
  margin-bottom: 0.8rem;
}
.proj-feature__desc {
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.5;
  color: rgba(244, 239, 230, 0.92);
  font-weight: 300;
  max-width: 56ch;
  margin-bottom: 1.6rem;
}
.proj-feature__facts {
  display: flex;
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(244, 239, 230, 0.18);
}
.proj-feature__facts dt {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: rgba(244, 239, 230, 0.6);
  margin-bottom: 0.2rem;
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}
.proj-feature__facts dd {
  font-family: var(--f-display);
  font-size: var(--fs-stat);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  color: var(--paper);
}

.proj-feature__cta {
  position: absolute;
  bottom: clamp(2rem, 4vw, 3.4rem);
  right: clamp(1.6rem, 3vw, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.2rem 0.85rem 1.4rem;
  font-family: var(--f-display);
  font-size: 0.9rem;
  font-weight: calc(400 + var(--twh, 0));
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--r-btn);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.proj-feature__cta svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.proj-feature:hover .proj-feature__cta {
  background: var(--gruen);
  color: var(--ink);
}
.proj-feature:hover .proj-feature__cta svg { transform: translateX(4px); }

@media (max-width: 700px) {
  .proj-feature { height: 80vh; min-height: 540px; }
  .proj-feature__cta {
    position: static;
    /* Der Knopf saß bündig auf der Unterkante — unten fehlte der Rand,
       den er links längst hatte. */
    margin: 1.6rem clamp(1.6rem, 3vw, 3rem);
    width: max-content;
  }
  /* Auf dem Desktop steht der Textblock absolut, der Innenabstand kommt aus
     left/right. Mobil wird er relativ — dann verschiebt ein stehengebliebenes
     "right" die Box um denselben Betrag nach LINKS und hebt das neue Padding
     wieder auf: Die Überschrift klebte an der Kachelkante. */
  .proj-feature__body {
    position: relative;
    inset: auto;
    padding: clamp(1.6rem, 3vw, 3rem);
  }
  .proj-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: 70vh;
    /* Die Kategorie-Marke steht absolut, der Text fliesst und wird nach
       unten gedrueckt. Bei langem Text stieg die Ueberschrift bis zu 32px
       IN die Marke hinein. Der Innenabstand oben haelt die Spur frei —
       Bild und Blende liegen absolut und fuellen die Kachel weiterhin ganz. */
    padding-top: 5.4rem;
  }
}

/* ─────────────  SERVICES — editorial row list  ───────────── */
.services-list {
  padding: clamp(2rem, 5vw, 5rem) var(--pad-x) clamp(5rem, 9vw, 8rem);
  background: var(--paper);
}
.svc-list {
  list-style: none;
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.svc-row {
  display: grid;
  grid-template-columns: minmax(80px, 100px) 1fr minmax(180px, 260px) 56px;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  padding: 2rem 1rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding .4s var(--ease), background .4s var(--ease);
  cursor: pointer;
}
.svc-row__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: var(--r-md);
}
.svc-row > *:not(.svc-row__link) { position: relative; z-index: 2; }
.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity .4s var(--ease);
  z-index: -1;
  border-radius: var(--r-md);
}
.svc-row:hover { padding-left: 1.6rem; padding-right: 1.6rem; }
.svc-row:hover::before { opacity: 0.08; }

.svc-row__no {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--accent);
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
}

.svc-row__main {
  display: grid;
  gap: 0.6rem;
}
.svc-row__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  color: var(--ink);
  transition: color .4s var(--ease);
}
.svc-row:hover .svc-row__title { color: var(--accent-2); }
.svc-row__tag {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: var(--ink-2);
  line-height: 1.55;
  font-weight: 300;
  max-width: 60ch;
}
.svc-row__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.svc-row__chips li {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--ink-2);
}

.svc-row__media {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-3);
  transition: transform .5s var(--ease);
}
.svc-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.svc-row:hover .svc-row__media { transform: scale(1.04); }
.svc-row:hover .svc-row__media img { transform: scale(1.08); }

.svc-row__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.svc-row__arrow svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.svc-row:hover .svc-row__arrow {
  background: var(--ui-dark);
  color: var(--paper);
  border-color: var(--ui-dark);
}
.svc-row:hover .svc-row__arrow svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .svc-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.8rem 1.2rem;
    padding: 1.6rem 0;
  }
  .svc-row:hover { padding-left: 0.4rem; padding-right: 0.4rem; }
  .svc-row__no { grid-column: 1 / 2; grid-row: 1; align-self: start; }
  .svc-row__main { grid-column: 1 / 3; grid-row: 2; }
  .svc-row__media { grid-column: 1 / 3; grid-row: 3; aspect-ratio: 16/9; }
  .svc-row__arrow { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
}

/* ─────────────  HISTORIE-RAIL (editorial scroll)  ───────────── */
.historie-rail {
  position: relative;
  background: var(--paper);
  padding: var(--section-pad-y) var(--pad-x);
  overflow: hidden;
}
.historie-rail__intro {
  max-width: 1500px;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
}
.historie-rail__title {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  line-height: 1.02;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  margin-bottom: 1.2rem;
}
.historie-rail__title em {
  font-style: italic;
  color: var(--sand);
}
.historie-rail__sub {
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 1.1rem;
  font-weight: 300;
}

/* progress line */
.hr-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  pointer-events: none;
  z-index: 1;
}
.hr-line__progress {
  position: absolute;
  top: 0; left: -1px;
  width: 3px;
  background: linear-gradient(to bottom, transparent 0%, var(--sand) 3%, var(--sand) 100%);
  height: 0%;
  transition: height .2s linear;
}

/* milestone */
.ms {
  --ms-gap: clamp(2rem, 5vw, 5rem);
  position: relative;
  max-width: 1400px;
  margin: 0 auto clamp(5rem, 10vw, 10rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-gap);
  align-items: center;
  z-index: 2;
}
.ms:last-of-type { margin-bottom: 0; }
.ms--left .ms__media { order: 1; }
.ms--left .ms__body  { order: 2; }
.ms--right .ms__media { order: 2; }
.ms--right .ms__body  { order: 1; }

/* huge year as decorative mark */
.ms__year-mark {
  position: absolute;
  top: -3.2vw;
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 0.85;
  letter-spacing: calc(-0.03em + var(--tsh, 0em));
  color: rgba(22, 24, 20, 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ms--left .ms__year-mark { left: -2vw; }
.ms--right .ms__year-mark { right: -2vw; text-align: right; }
.ms__year-mark--gold { color: rgba(182, 162, 105, 0.14); }

/* media composition */
.ms__media {
  position: relative;
  aspect-ratio: 4/3;
}
.ms__img {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  background: var(--paper-3);
}
.ms__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.ms__img--lead {
  position: absolute;
  inset: 0;
  width: 78%; height: 78%;
}
.ms--right .ms__img--lead { left: auto; right: 0; top: 0; }
.ms__img--sub {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48%; height: 50%;
  z-index: 2;
  border: 6px solid var(--paper);
}
.ms--right .ms__img--sub {
  left: 0; right: auto;
}
.ms:hover .ms__img img { transform: scale(1.04); }

/* body */
.ms__body {
  position: relative;
  padding: 0 0.5rem;
}
.ms__body--solo {
  padding-left: clamp(0rem, 4vw, 3.5rem);
  padding-right: clamp(0rem, 4vw, 3.5rem);
}
.ms__dot {
  position: absolute;
  top: 0.7rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--sand);
  z-index: 3;
}
.ms--left .ms__dot { left: calc(-1 * (var(--ms-gap) / 2) - 7px); }
.ms--right .ms__dot { right: calc(-1 * (var(--ms-gap) / 2) - 7px); }
.ms__dot {
  transition: transform 1.1s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ms__dot--gold {
  background: var(--paper);
  border-color: var(--sand);
}
/* dot turns brand-green once the scroll progress line reaches it */
.ms__dot.is-reached {
  background: var(--sand);
  border-color: var(--sand);
}
.ms__dot--gold.is-reached {
  background: var(--sand);
  border-color: var(--sand);
  box-shadow: 0 0 0 6px rgba(162, 199, 67, 0.28);
}

/* Verweis auf die Website eines Verbands. Kompakter als .btn, weil er in
   einer Zeitleisten-Station steht und dort nicht die Ueberschrift
   ueberstrahlen soll. */
.ms__link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.ms__link svg { width: 14px; height: 14px; flex: 0 0 14px; }
.ms__link:hover {
  border-color: var(--gruen);
  background: var(--paper-2);
  color: var(--ink);
}

/* year tile — replaces the second photo; small tile shows the year */
.ms__year-tile {
  position: absolute;
  bottom: 0;
  right: 8%;
  width: 38%;
  height: 40%;
  z-index: 2;
  border-radius: var(--r-lg);
  background: var(--gruen);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.ms--right .ms__year-tile { left: 8%; right: auto; }
.ms__year-tile span {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  line-height: 1;
  color: var(--ink);
}
/* solo milestones (no photo): a single large year block in place of the image */
.ms__media--year { aspect-ratio: 4/3; }
.ms__year-tile--full {
  position: absolute;
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
  width: 78%;
  height: 78%;
  border: none;
}
.ms--right .ms__year-tile--full { left: auto; right: 0; }
.ms__year-tile--full span { font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 200; }

.ms__year-tag {
  font-family: var(--f-body);
  font-size: var(--fs-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--moss);
  margin-bottom: 0.8rem;
}
.ms__year-tag--gold { color: var(--sand); }

.ms__head {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  margin-bottom: 1.2rem;
}
.ms__head em {
  font-style: italic;
  color: var(--sand);
}

.ms__text {
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 48ch;
}
.ms__text em {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
}

.ms__quote {
  margin-top: 1.6rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--sand);
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 38ch;
}
.ms__quote cite {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-family: var(--f-body);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}

.ms__facts {
  list-style: none;
  display: flex; gap: 2.2rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.ms__facts li b {
  display: block;
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-stat);
  line-height: 1; color: var(--moss);
  margin-bottom: 0.3rem;
}
.ms__facts li span {
  font-size: 0.82rem;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

/* reveal — milestone-specific direction */
.ms[data-reveal] {
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.ms--left[data-reveal]  { transform: translateY(40px) translateX(-30px); }
.ms--right[data-reveal] { transform: translateY(40px) translateX(30px); }
.ms[data-reveal].is-shown {
  opacity: 1; transform: translateY(0) translateX(0);
}
.ms[data-reveal] .ms__img { opacity: 0; transform: scale(0.96); transition: opacity 1.2s var(--ease) .15s, transform 1.4s var(--ease) .15s; }
.ms[data-reveal].is-shown .ms__img { opacity: 1; transform: scale(1); }
.ms[data-reveal] .ms__year-tile { opacity: 0; transform: scale(0.96); transition: opacity 1.2s var(--ease) .35s, transform 1.4s var(--ease) .35s; }
.ms[data-reveal].is-shown .ms__year-tile { opacity: 1; transform: scale(1); }
/* keep the dot pinned to the line — counter the parent's slide so it only fades in */
.ms--left[data-reveal]  .ms__dot { transform: translate(30px, -40px); }
.ms--right[data-reveal] .ms__dot { transform: translate(-30px, -40px); }
.ms[data-reveal].is-shown .ms__dot { transform: translate(0, 0); }
.ms[data-reveal] .ms__year-mark { opacity: 0; transform: translateY(20px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.ms[data-reveal].is-shown .ms__year-mark { opacity: 1; transform: translateY(0); }

/* responsive */
@media (max-width: 1000px) {
  .ms { grid-template-columns: 1fr; gap: 2rem; }
  .ms--left .ms__media, .ms--right .ms__media { order: 1; }
  .ms--left .ms__body,  .ms--right .ms__body  { order: 2; }
  .ms__media { aspect-ratio: 4/3; max-width: 600px; }
  .ms--left .ms__dot, .ms--right .ms__dot {
    position: relative;
    left: 0; right: auto; top: 0;
    display: inline-block;
    margin-bottom: 0.8rem;
  }
  .hr-line { left: 1rem; }
  .ms__year-mark { font-size: 7rem; top: -1rem; }
  .ms--left .ms__year-mark { left: -0.5rem; }
  .ms--right .ms__year-mark { right: -0.5rem; }
}

/* ─────────────  HISTORIE — RANKE-VARIANTE (growing vine)  ───────────── */
.historie-vine .ms__dot { visibility: hidden; }      /* anchor only — node is drawn by the vine */

.vine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
/* faint guide showing where the vine will grow */
.vine-track {
  stroke: var(--moss);
  stroke-width: 2;
  opacity: 0.12;
  stroke-linecap: round;
}
/* the living stem that draws itself on scroll */
.vine-stem {
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 5px rgba(44, 58, 48, 0.18));
}
/* growing bud at the tip */
.vine-tip {
  fill: var(--accent);
  stroke: var(--paper);
  stroke-width: 2;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(162, 199, 67, 0.65));
  transition: opacity .35s var(--ease);
}

/* per-milestone node + leaves */
.vine-leaf .vine-node {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 2.4;
  transition: fill .5s var(--ease);
}
.vine-leaf.is-open .vine-node { fill: var(--accent); }

.vine-leaf .leaf-grow {
  transform: scale(0);
  transform-origin: 0 0;
  transition: transform .85s cubic-bezier(.18,.9,.25,1.1);
}
.vine-leaf.is-open .leaf-grow { transform: scale(1); }

.vine-leaf .leaf-icon { overflow: visible; }
/* Die Blätter der Ranke sind <use>-Klone eines <symbol>. In diesen
   Schattenbaum greifen Selektoren von aussen nicht hinein — deshalb hatten
   die frueheren Regeln `.historie-vine .leaf-main` keine Wirkung, und im
   Symbol klebte noch der alte Olivton.

   Benutzerdefinierte Eigenschaften werden dagegen vererbt und kommen im
   Klon an. Die Farben stehen darum hier, das Symbol traegt nur den
   Rueckfallwert. So zieht die Ranke jede Aenderung an --gruen mit. */
.historie-vine .leaf-icon {
  --blatt: var(--gruen);
  --blatt-ader: color-mix(in oklab, var(--gruen) 68%, #2c3a30);
}

@media (prefers-reduced-motion: reduce) {
  .vine-leaf .leaf-grow,
  .vine-tip { transition: none; }
}

/* ─────────────  PAGE HERO (Unterseiten)  ───────────── */
.page-hero {
  position: relative;
  min-height: 52vh;
  color: var(--paper);
  /* Rueckfallgrund: Die Schrift im Kopfbereich ist hell. Fehlt das Titelbild,
     stuende sie sonst auf dem hellen Seitengrund und waere unlesbar. Liegt ein
     Bild vor, deckt es diesen Grund vollstaendig ab. */
  background: var(--ui-dark);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: clamp(7rem, 13vh, 9.5rem) var(--pad-x) clamp(2.5rem, 4vh, 3.5rem);
  margin: var(--section-gap);
  border-radius: var(--r-xl);
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Der Schleier war so dunkel, dass die Titelbilder grau wirkten (unten 0.88
   Deckung plus ein zweiter Verlauf mit 0.55). Er ist auf etwa die Haelfte
   zurueckgenommen: das Foto traegt jetzt seine eigene Helligkeit, und die
   helle Schrift steht weiterhin auf genug Grund. Was an Deckung fehlt,
   fangen die verstaerkten Textschatten unten auf. */
.page-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.07) 30%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.48) 100%),
    radial-gradient(ellipse at 25% 85%, rgba(0,0,0,0.18), transparent 60%);
}
.page-hero__inner {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.page-hero h1 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h1-page);
  line-height: 1.02;
  letter-spacing: calc(-0.045em + var(--tsh, 0em));
  margin-bottom: 1rem;
  text-shadow: 0 2px 32px rgba(0,0,0,0.68), 0 1px 3px rgba(0,0,0,0.55);
}
.page-hero h1 em {
  font-style: italic;
  color: var(--sand);
}
.page-hero__lede {
  max-width: 60ch;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(247, 244, 238, 0.98);
  text-shadow: 0 1px 18px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
}
.crumbs {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
  text-transform: none;
  font-weight: calc(400 + var(--twl, 0));
  color: rgba(247, 247, 245, 0.72);
  margin-bottom: 2rem;
}
.crumbs a { color: inherit; transition: color .3s; }
.crumbs a:hover { color: var(--sand); }
.crumbs__sep { opacity: 0.5; }
.crumbs__current { color: var(--paper); }

/* active nav state */
.primary-nav a.is-active {
  color: var(--sand);
}
.primary-nav a.is-active::after {
  transform: scaleX(1);
  background: var(--sand);
}

/* ─────────────  CTA STRIP  ───────────── */
.cta-strip {
  background: var(--banner);
  color: var(--paper);
  padding: clamp(4rem, 7vw, 7rem) var(--pad-x);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  overflow: hidden;
  margin: var(--section-gap);
  border-radius: var(--r-xl);
}
.cta-strip::before {
  content: "";
  position: absolute;
  top: 0; right: -10%;
  width: 50%; height: 100%;
  background: radial-gradient(ellipse, rgba(182, 162, 105, 0.18), transparent 70%);
  pointer-events: none;
}
.cta-strip__inner { max-width: 1500px; margin: 0 auto; display: contents; }
.cta-strip h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  line-height: 1.02;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  max-width: 24ch;
}
.cta-strip h2 em {
  font-style: italic;
  color: var(--sand);
}
.cta-strip__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.cta-strip .btn--cream:hover { background: var(--gruen); border-color: var(--gruen); }

/* ─────────────  FEATURE BLOCKS (Home V2)  ───────────── */
.feat {
  position: relative;
  padding: var(--section-pad-y) var(--pad-x);
}
.feat--light { background: var(--paper); }

.feat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
}
.feat__grid--reverse .feat__text { order: 2; }
.feat__grid--reverse .feat__collage,
.feat__grid--reverse .feat__plate-stack { order: 1; }

/* scatter (Über uns) — composition with three staggered cards, one video */
.feat__grid--scatter { grid-template-columns: 1.08fr 1fr; align-items: center; }

.scatter {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  gap: 0.9rem;
  max-width: 640px;
}
.scatter__card {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow-card);
}
.scatter__card img,
.scatter__card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Card A — LEFT, tall portrait, anchored to the bottom (video) */
.scatter__card--a {
  grid-column: 1 / 8;
  grid-row: 3 / 13;
}
/* Card B — TOP-RIGHT-CENTER, small square */
.scatter__card--b {
  grid-column: 8 / 13;
  grid-row: 1 / 6;
}
/* Card C — BOTTOM-RIGHT, wider portrait */
.scatter__card--c {
  grid-column: 8 / 15;
  grid-row: 6 / 14;
}
.scatter__playmark {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  /* war 38px */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 239, 230, 0.94);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.scatter__playmark:hover { background: var(--paper); transform: scale(1.05); }
.scatter__playmark:active { transform: scale(0.95); }
.scatter__icon { width: 14px; height: 14px; }
.scatter__icon--play { display: none; }
.scatter__playmark.is-paused .scatter__icon--pause { display: none; }
.scatter__playmark.is-paused .scatter__icon--play { display: block; }

/* Jubiläums-Mark (Über uns) — animiertes 30-Jahre-Logo */
.jubilee {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  justify-self: center;
}
.jubilee__mark {
  width: clamp(230px, 27vw, 430px);
  aspect-ratio: 1 / 1;
  animation: spin 60s linear infinite;
}
.jubilee__mark img { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .jubilee__mark { animation: none; } }
@media (max-width: 900px) {
  .jubilee { aspect-ratio: auto; padding-block: clamp(1rem, 5vw, 2.4rem); }
  .jubilee__mark { width: clamp(200px, 52vw, 320px); }
}

/* scatter mirrored (Warum Friedrichs) — text left, images right */
.feat__grid--scatter-r { grid-template-columns: 1fr 1.08fr; }
.feat__grid--scatter-r .scatter { justify-self: end; }
.scatter--r .scatter__card--a { grid-column: 8 / 15; grid-row: 3 / 13; }
.scatter--r .scatter__card--b { grid-column: 3 / 8; grid-row: 1 / 6; }
.scatter--r .scatter__card--c { grid-column: 1 / 8; grid-row: 6 / 14; }

/* pill tag "+ Über uns" */
.feat__pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  color: var(--ink-2);
  margin-bottom: 1.4rem;
}
.feat__pill svg {
  width: 13px; height: 13px;
  color: var(--accent);
}

/* two-tone heading */
.feat__h--twotone .muted {
  color: var(--stone);
  font-style: normal;
}

/* soft pill button */
.btn--soft {
  background: var(--paper-3);
  color: var(--ink);
  border-color: transparent;
}
.btn--soft:hover {
  background: var(--ui-dark);
  color: var(--paper);
}

.feat__h {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h2);
  letter-spacing: calc(-0.045em + var(--tsh, 0em));
  line-height: 1.0;
  margin-bottom: 0.85rem;
  margin-top: 0.8rem;
}
.feat__h em { font-style: italic; color: var(--accent); }
.feat__h--cream { color: var(--paper); }
.feat__h--big { font-size: var(--fs-h1-page); }

.feat__p {
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
  margin-bottom: 1.4rem;
  max-width: 50ch;
}
.feat__p--cream { color: rgba(244, 239, 230, 0.85); max-width: 56ch; }

.feat__chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin-bottom: 2rem;
}
.feat__chips li {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--ink-2);
}

.feat__bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.45rem;
  margin-bottom: 1.4rem;
}
.feat__bullets li {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-size: 0.98rem; color: var(--ink-2);
  font-weight: 300;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.feat__bullets li span {
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 1.1rem;
}

.feat__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 2rem;
  margin: 0 0 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feat__stats dt {
  font-family: var(--f-display);
  font-size: var(--fs-stat);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.03em + var(--tsh, 0em));
  color: var(--ink);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.feat__stats dd {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}

/* ── Leistungen plate stack ── */
.feat__plate-stack {
  position: relative;
  aspect-ratio: 5/4;
  width: 100%;
  max-width: 640px;
  max-height: 64vh;
  margin: 0 auto;
  justify-self: center;
}
.feat__plate-stack .feat__plate--main {
  position: absolute;
  inset: 0;
  width: 88%;
  height: 88%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.feat__plate-stack .feat__plate--badge {
  position: absolute;
  right: 0; bottom: 0;
  width: 46%;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.feat__plate img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ── Über uns collage ── */
.feat__collage {
  position: relative;
  aspect-ratio: 4/5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 0.6rem;
}
.feat__col-img {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-3);
}
.feat__col-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); transition: filter .6s var(--ease); }
.feat__col-img:hover img { filter: grayscale(0); }
.feat__col-img--a { grid-column: 1 / 4; grid-row: 1 / 4; }
.feat__col-img--b { grid-column: 4 / 7; grid-row: 1 / 5; }
.feat__col-img--c { grid-column: 1 / 5; grid-row: 4 / 7; }
.feat__col-img--d { grid-column: 5 / 7; grid-row: 5 / 7; }
.feat__col-badge {
  position: absolute;
  top: 38%;
  left: 42%;
  width: 22%;
  aspect-ratio: 1/1;
  animation: spin 38s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
  z-index: 2;
}
.feat__col-badge img { width: 100%; height: 100%; }

/* ── Full-bleed dark feature (Projekte + Karriere) ── */
.feat--bleed {
  margin: var(--section-gap);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  min-height: clamp(580px, 78vh, 820px);
  display: flex;
  align-items: flex-end;
  padding: clamp(3rem, 6vw, 6rem);
}
.feat__bleed-img,
.feat__bleed-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.feat__bleed-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0.82) 100%);
}
/* Die Vignette lag mit 0.4 in der Mitte und 0.78 am Rand ueber dem Video —
   vom Bewegtbild blieb kaum etwas uebrig. Sie ist etwa halbiert; den Kontrast
   fuer die Schrift traegt jetzt der Textschatten weiter unten. */
.feat__bleed-veil--center {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.50) 70%);
}
/* Gilt fuer den ganzen Textblock: text-shadow wird vererbt. Nur der helle
   Knopf nimmt ihn wieder heraus — dort steht dunkle Schrift auf hellem
   Grund, ein dunkler Schatten wuerde sie nur verschmieren. Der Ghost-Knopf
   behaelt ihn, seine Schrift ist hell. */
.feat--video .feat__bleed-content {
  text-shadow: 0 2px 28px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
}
.feat--video .btn--cream { text-shadow: none; }
.feat__bleed-content {
  max-width: 720px;
  width: 100%;
}
.feat--bleed:has(.feat__bleed-content--center),
.feat--bleed-centered {
  align-items: center;
  justify-content: center;
}
.feat__bleed-content--center { max-width: 760px; margin: 0 auto; text-align: center; }
.feat__bleed-content--center .feat__p { margin-left: auto; margin-right: auto; }

/* horizontal strip of project thumbnails */
.feat__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin: 2rem 0 2.2rem;
}
.feat__chip-img {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.feat__chip-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.feat__chip-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
.feat__chip-img span {
  position: absolute;
  bottom: 0.6rem; left: 0.8rem; right: 0.8rem;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--paper);
  z-index: 2;
}
.feat__chip-img:hover img { transform: scale(1.06); }

.feat__cta-row {
  display: inline-flex; gap: 0.8rem; flex-wrap: wrap;
  justify-content: center;
}

/* ── Mini calendar mock ── */
.feat__minical {
  display: flex;
  justify-content: center;
}
.minical {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.minical__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.minical__month {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
}
.minical__nav {
  display: flex; gap: 0.4rem;
}
.minical__nav span {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  font-size: 1.05rem;
}
.minical__nav span:hover { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }

.minical__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  margin-bottom: 0.5rem;
}
.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.minical__d {
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
  border-radius: 50%;
  color: var(--ink);
  transition: background .25s, color .25s;
}
.minical__d:not(.minical__d--past):not(.minical__d--mute):hover {
  background: var(--paper-3);
  cursor: pointer;
}
.minical__d--mute { visibility: hidden; }
.minical__d--past { color: var(--stone); }
.minical__d--today { border: 1px solid var(--accent); color: var(--accent); }
.minical__d--sel { background: var(--ui-dark); color: var(--paper); }

.minical__slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.minical__slots span {
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  padding: 0.55rem 0.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.minical__slots span:hover { border-color: var(--ink); color: var(--ink); }
.minical__slots span.is-on { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }

@media (max-width: 900px) {
  .feat__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .feat__grid--reverse .feat__text { order: 2; }
  .feat__grid--reverse .feat__collage,
  .feat__grid--reverse .feat__plate-stack { order: 1; }
  .feat__plate-stack, .feat__collage { aspect-ratio: 4/3; max-width: 600px; margin: 0 auto; }
  .feat__strip { grid-template-columns: repeat(2, 1fr); }
  .feat--bleed { min-height: 70vh; padding: clamp(2rem, 5vw, 4rem); }
  .scatter { aspect-ratio: 4/3; max-width: 600px; margin: 0 auto; gap: 0.6rem; }
}

/* ─────────────  JOURNEY — editorial index + paired image  ───────────── */
.journey {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper);
}
.journey__head {
  max-width: 1500px;
  margin: 0 auto clamp(3rem, 5vw, 5rem);
}
.journey__title {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.045em + var(--tsh, 0em));
  line-height: 1.0;
  margin-bottom: 1rem;
}
.journey__title em { font-style: italic; color: var(--accent); }
.journey__sub {
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 1.1rem;
  font-weight: 300;
}

.journey__body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1500px;
  margin: 0 auto;
  align-items: start;
}

/* numbered list */
.journey__list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.journey__row {
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .35s var(--ease);
}
.journey__row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity .35s var(--ease);
  border-radius: var(--r-md);
  z-index: 0;
}
.journey__row.is-active::before,
.journey__row:hover::before { opacity: 0.10; }

.journey__row a {
  display: grid;
  grid-template-columns: 70px 1fr 44px;
  gap: 1.4rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(0.8rem, 1.4vw, 1.4rem);
  align-items: center;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
  transition: padding .35s var(--ease);
}
.journey__row:hover a { padding-left: clamp(1.2rem, 2vw, 1.8rem); }

.journey__no {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
  color: var(--accent);
}
.journey__col { display: grid; gap: 0.4rem; }
.journey__h {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  color: var(--ink);
  transition: color .35s var(--ease);
}
.journey__row:hover .journey__h,
.journey__row.is-active .journey__h { color: var(--accent-2); }

.journey__tag {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
  font-weight: 300;
  max-width: 50ch;
}

.journey__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.journey__arrow svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.journey__row:hover .journey__arrow,
.journey__row.is-active .journey__arrow {
  background: var(--ui-dark);
  color: var(--paper);
  border-color: var(--ui-dark);
}
.journey__row:hover .journey__arrow svg { transform: translateX(3px); }

/* sticky stage on the right */
.journey__stage {
  position: sticky;
  top: 110px;
  height: clamp(440px, 60vh, 660px);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-3);
}
.journey__plate {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.journey__plate.is-active { opacity: 1; }
.journey__plate img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 6s linear;
}
.journey__plate.is-active img { transform: scale(1.04); }
.journey__plate figcaption {
  position: absolute;
  left: 1.2rem; bottom: 1.2rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  color: var(--paper);
  background: rgba(22, 24, 20, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  max-width: 90%;
}

@media (max-width: 900px) {
  .journey__body { grid-template-columns: 1fr; gap: 1.6rem; }
  .journey__stage { position: relative; top: 0; height: clamp(280px, 50vw, 460px); order: -1; }
  .journey__row a { grid-template-columns: 50px 1fr 36px; padding: 1.1rem 0.6rem; gap: 0.8rem; }
  .journey__h { font-size: 1.5rem; }
  .journey__arrow { width: 38px; height: 38px; }
}

/* ─────────────  TEASER CARDS (Home)  ───────────── */
.teasers {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper);
}
.teasers__head {
  max-width: 1500px;
  margin: 0 auto 4rem;
}
.teasers__head h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  line-height: 1;
  margin-bottom: 1rem;
}
.teasers__head h2 em {
  font-style: italic; color: var(--sand);
}
.teasers__head p { max-width: 56ch; color: var(--ink-2); font-size: 1.1rem; font-weight: 300; }

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.4rem;
  max-width: 1500px;
  margin: 0 auto;
}
.teaser {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 3/4;
  display: block;
  isolation: isolate;
  transition: transform .6s var(--ease);
}
.teaser:hover { transform: translateY(-4px); }
.teaser--w2 { grid-column: span 2; }
.teaser--w3 { grid-column: span 3; aspect-ratio: 4/3; }
.teaser--w4 { grid-column: span 4; aspect-ratio: 16/9; }
.teaser__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.4s var(--ease);
}
.teaser:hover .teaser__img { transform: scale(1.06); }
.teaser__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.88) 100%);
}
.teaser__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.6rem 1.6rem;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.teaser__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--sand);
  display: block;
  margin-bottom: 0.4rem;
}
.teaser__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-card);
  line-height: 1;
  margin-bottom: 0.7rem;
}
.teaser__desc {
  font-size: 0.92rem;
  line-height: 1.5;
  min-height: 3em; /* reserve 2 lines so all titles align */
  color: rgba(244, 239, 230, 0.85);
  font-weight: 300;
  margin-bottom: 1rem;
  max-width: 36ch;
}
.teaser__arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-meta); letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
}
.teaser__arrow svg {
  width: 14px; height: 14px;
  transition: transform .4s var(--ease);
}
.teaser:hover .teaser__arrow svg { transform: translateX(4px); }

/* ─────────────  PAGE INTRO  ───────────── */
.page-intro {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper-2);
}
.page-intro__inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.page-intro__label {
  font-family: var(--f-mono);
  font-size: var(--fs-label); letter-spacing: calc(-0.01em + var(--tsl, 0em)); text-transform: none;
  color: var(--ink-2); font-weight: calc(400 + var(--twl, 0));
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.page-intro__body {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-2);
}
.page-intro__body em { font-style: normal; color: var(--ink); font-weight: 500; }
.page-intro__body strong { color: var(--ink); font-weight: 600; }

/* ─────────────  VALUES (Über uns)  ───────────── */
.values {
  padding: var(--section-pad-y) var(--pad-x);
  /* Reserve für die Treppe: Karte 3 wandert per transform bis 160px nach
     unten (s. .values__inner.is-shown), deshalb Versatz + --section-pad-y,
     damit der Abstand zur Folgesektion dem normalen Rhythmus entspricht. */
  padding-bottom: clamp(11rem, 20vw, 19rem);
  background: var(--paper);
  text-align: center;
}
.values .teasers__head {
  text-align: center;
}
.values .teasers__head .section-head__label {
  justify-content: center;
}
.values .teasers__head h2,
.values .teasers__head p {
  margin-left: auto;
  margin-right: auto;
}
.values__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.6vw, 1.6rem);
  align-items: start;
  text-align: left;
}
.value {
  position: relative;
  padding: clamp(1.6rem, 2.2vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--paper-2);
  display: flex; flex-direction: column;
  gap: clamp(1.1rem, 1.6vw, 1.6rem);
  min-height: clamp(300px, 26vw, 360px);
  transform: translateY(0);
  transition: transform 1.3s var(--ease);
}
.value__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(1rem, 1.5vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
.value__label {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-align: right;
}
.value__slogan {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  font-size: var(--fs-card);
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
.value__slogan em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.value__img {
  margin: calc(-1 * clamp(1.6rem, 2.2vw, 2.4rem) - 1px) calc(-1 * clamp(1.6rem, 2.2vw, 2.4rem) - 1px) 0;
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.value__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.value:hover .value__img img { transform: scale(1.04); }
.value__icon {
  width: 100%;
  aspect-ratio: 16 / 11;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.4rem, 1vw, 0.9rem) 0;
}
.value__icon svg { width: 100%; max-width: 100px; height: auto; }
.value__icon .value__ink { fill: var(--moss); }
.value__icon .value__ink-fill { fill: var(--moss); }
.value__icon .value__accent { fill: var(--accent); }
.value__icon .value__stroke {
  stroke: var(--moss);
  stroke-width: 7;
  stroke-linecap: round;
  fill: none;
}
.value__body {
  display: flex; flex-direction: column; gap: 0.55rem;
  margin-top: auto;
}
.value__num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.value p:not(.value__slogan) {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-top: auto;
}

/* ─────────────  GALANET BENEFITS (Galanet)  ───────────── */
.galanet-benefits {
  padding-block: var(--section-pad-y);
  background: var(--paper-2);
}
.galanet-benefits__head {
  max-width: 1500px;
  margin: 0 auto clamp(2.4rem, 4vw, 3.4rem);
}
.galanet-benefits__head h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  line-height: 1.02;
  max-width: 18ch;
}
.galanet-benefits__head h2 em { font-style: italic; color: var(--accent); }
.galanet-benefits__grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 2.6vw, 2.8rem);
}
.benefit {
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink);
}
.benefit__num {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  color: var(--accent-2);
  margin-bottom: 1.6rem;
}
.benefit h3 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
  margin-bottom: 0.7rem;
}
.benefit p {
  font-size: 0.96rem;
  color: var(--ink-2);
  line-height: 1.55;
  font-weight: 300;
}
@media (max-width: 980px) {
  .galanet-benefits__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .galanet-benefits__grid { grid-template-columns: 1fr; }
}

/* ─────────────  GALANET FILM (Galanet)  ───────────── */
.galanet-film {
  padding-block: var(--section-pad-y);
  background: var(--paper);
  text-align: center;
}
.galanet-film__head {
  max-width: 760px;
  margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
}
.galanet-film__head .section-head__label { justify-content: center; }
.galanet-film__head h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  line-height: 1.02;
  margin-bottom: 1rem;
}
.galanet-film__head h2 em { font-style: italic; color: var(--accent); }
.galanet-film__head p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--ink-2);
  font-size: 1.1rem;
  font-weight: 300;
}
.galanet-film__frame {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--paper-3);
}
.galanet-film__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Eingebettetes Video hinter der Einwilligung ───────────────────────
   Standbild plus Sperrhinweis. Das iframe setzt assets/js/cookies.js ein,
   sobald der Kategorie „Externe Medien" zugestimmt wurde. Vorher geht keine
   Anfrage an YouTube. */
.vext {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--ink);
}
.vext__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* etwas abgedunkelt, damit Knopf und Hinweis darauf lesbar bleiben */
  filter: brightness(0.62);
}
.vext__rahmen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Text und Knopf zusammen mittig, damit die Sperre als eine Aussage
   gelesen wird und nicht als Knopf mit Beiwerk. */
.vext__sperre {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  max-width: 34ch;
  padding: 0 1.5rem;
  text-align: center;
}
.vext__text {
  margin: 0;
  color: var(--paper);
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.vext__start {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 1.6rem 0.75rem 0.75rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--gruen);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 14px 34px -14px rgba(22,24,20,0.6);
  transition: transform .35s var(--ease);
}
.vext__start:hover { transform: translateY(-2px) scale(1.02); }
.vext__play {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gruen);
}
.vext__play svg { width: 44%; height: 44%; margin-left: 8%; }
@media (max-width: 620px) {
  .vext__start { padding: 0.6rem 1.2rem 0.6rem 0.6rem; }
  .vext__play { width: 34px; height: 34px; }
}

/* values__inner uses data-reveal but doesn't fade — the cards animate
   from a side-by-side starting position into a staircase as the section
   scrolls into view (matches the reference layout).                       */
.values__inner[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
.values__inner.is-shown .value:nth-child(2) {
  transform: translateY(clamp(40px, 5vw, 80px));
  transition-delay: 0.3s;
}
.values__inner.is-shown .value:nth-child(3) {
  transform: translateY(clamp(80px, 10vw, 160px));
  transition-delay: 0.55s;
}

/* Galanet page: keep the section rhythm uniform — no staircase offset,
   so the bottom padding can match the global --section-pad-y instead of
   the oversized reserve the Über-uns staircase needs. */
body[data-page="galanet"] .values {
  padding-bottom: var(--section-pad-y);
}
body[data-page="galanet"] .values__inner.is-shown .value:nth-child(2),
body[data-page="galanet"] .values__inner.is-shown .value:nth-child(3) {
  transform: translateY(0);
}

/* Service: seit Aussenelektrik und Sauna entfallen sind, sind es vier
   Bausteine. In drei Spalten stuende der vierte allein in der zweiten
   Reihe — zwei Spalten ergeben ein geschlossenes Feld. Der Treppen-Versatz
   sitzt dann auf der jeweils rechten Kachel. */
body[data-page="service"] .values {
  padding-bottom: var(--section-pad-y);
}
@media (min-width: 801px) {
  body[data-page="service"] .values__inner {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
  }
  /* Zwei Spalten sind breiter als drei — die auf schmale Kacheln gerechnete
     Mindesthoehe liesse hier viel Leerraum zwischen Titel und Text. */
  body[data-page="service"] .value {
    min-height: clamp(210px, 17vw, 250px);
  }
  body[data-page="service"] .values__inner.is-shown .value {
    transform: none;
    transition-delay: 0s;
  }
  body[data-page="service"] .values__inner.is-shown .value:nth-child(2n) {
    transform: translateY(clamp(24px, 3vw, 48px));
    transition-delay: 0.3s;
  }
}

/* ─────────────  BENEFITS (Karriere)  ─────────────
   Mosaik: 6-spaltiges Raster, gemischte Kachelgrößen —
   zwei Bildkacheln, eine hervorgehobene, eine dunkle Akzentkachel. */
.benefits {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper-2);
}
.benefits__inner { max-width: 1280px; margin: 0 auto; }
.benefits__inner .teasers__head { margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem); }
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 0.8vw, 0.7rem);
}
.benefit-tile {
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(1.2rem, 2vw, 2rem);
  min-height: 190px;
  padding: clamp(1.1rem, 1.5vw, 1.4rem) clamp(1.2rem, 1.7vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.benefit-tile:hover { background: var(--paper-3); transform: translateY(-3px); }
.benefit-tile--w2 { grid-column: span 2; }
.benefit-tile--w3 { grid-column: span 3; min-height: 300px; }
.benefit-tile--tall { min-height: 300px; }

/* Bildkachel */
.benefit-tile--img {
  border: 0;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  justify-content: flex-end;
}
.benefit-tile--img:hover { background: transparent; }
.benefit-tile--img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 0.9s var(--ease);
}
.benefit-tile--img::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(transparent 28%, rgba(18, 20, 16, 0.82));
}
.benefit-tile--img:hover img { transform: scale(1.05); }

/* Hervorgehobene & Akzentkachel */
.benefit-tile--num { border: 0; background: var(--paper-3); justify-content: flex-end; }
.benefit-tile--num:hover { background: var(--paper-3); }
.benefit-tile--dark { border: 0; background: var(--gruen); color: var(--ink); }
.benefit-tile--dark:hover { background: var(--gruen); }
.benefit-tile--dark .benefit-tile__num { color: var(--ink); opacity: 0.6; }

.benefit-tile__num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.benefit-tile--img .benefit-tile__num { color: var(--accent); }
.benefit-tile h3 {
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
  margin-top: auto;
}
.benefit-tile--w3 h3, .benefit-tile--num h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
.benefit-tile__desc {
  display: block;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 0.35rem;
}
.benefit-tile--img .benefit-tile__desc { color: rgba(255, 255, 255, 0.85); }
.benefit-tile--dark .benefit-tile__desc { color: var(--ink-2); }
.benefit-tile h3 + .benefit-tile__desc { margin-top: 0.35rem; }
@media (max-width: 1000px) {
  .benefit-grid { grid-template-columns: repeat(4, 1fr); }
  .benefit-tile { grid-column: span 2; }
  .benefit-tile--w3 { grid-column: span 4; min-height: 260px; }
  .benefit-tile--tall { min-height: 240px; }
}
@media (max-width: 700px) {
  .benefit-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .benefit-tile { grid-column: span 1; gap: 1rem; min-height: 150px; }
  .benefit-tile--w2, .benefit-tile--w3 { grid-column: span 1; }
  .benefit-tile--w3, .benefit-tile--tall { min-height: 220px; }
}

/* ─────────────  POSITIONS (Karriere)  ───────────── */
.positions {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper);
}
.positions__inner { max-width: 1500px; margin: 0 auto; }
.positions__head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: end;
}
.positions__head h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0)); line-height: 1;
}
.positions__head h2 em { font-style: italic; color: var(--sand); }
.positions__head p { color: var(--ink-2); font-weight: 300; font-size: 1.05rem; }

.position {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.6rem 1.4rem;
  border-bottom: 1px solid var(--line);
  transition: background .3s, padding .3s var(--ease);
}
.position:hover { background: var(--paper-3); padding-left: 1.8rem; }
.position__no {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--sand);
  font-size: 1rem;
}
.position h3 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-card);
}
.position__meta {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.position__meta span {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  text-transform: none;
  padding: 0.32rem 0.7rem;
  background: var(--paper-3);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-weight: calc(400 + var(--twl, 0));
}
.position__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, border-color .3s;
}
.position:hover .position__arrow { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }
.position__arrow svg { width: 16px; height: 16px; }

/* ─────────────  INFO STRIP (Kontakt)  ───────────── */
.info-cards {
  padding: clamp(2rem, 4vw, 3.5rem) var(--pad-x);
  background: var(--paper-2);
}
.info-cards__inner {
  max-width: 1500px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.35fr 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.info-item {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.6rem, 2.4vw, 2.3rem);
  min-height: 176px;
  border-left: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .4s var(--ease);
}
.info-item:first-child { border-left: none; }
a.info-item:hover { background: var(--paper-2); }
.info-item__label {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--moss-2);
}
.info-item__no { color: var(--accent); letter-spacing: 0.02em; }
.info-item__value {
  margin-top: auto;
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0)); font-size: 1.18rem; line-height: 1.4;
  color: var(--ink);
  transition: color .3s var(--ease);
  word-break: break-word;
}
a.info-item:hover .info-item__value { color: var(--moss); }
.info-item__caption {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.03em;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
a.info-item:hover .info-item__caption { color: var(--moss); }
.info-item__rating { margin-top: auto; display: flex; align-items: baseline; gap: 0.6rem; }
/* Die Sterne stehen allein — die Zahl daneben ist entfallen. Sie tragen damit
   dieselbe Zeile wie der Wert der Nachbarkacheln (Adresse, Telefon, E-Mail)
   und übernehmen deren Maße, damit die vier Kacheln unten bündig bleiben. */
.info-item__stars {
  color: var(--accent);
  font-size: 1.18rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

@media (max-width: 1100px) {
  .info-item:nth-child(odd) { border-left: none; }
  .info-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .info-item { border-left: none; min-height: 0; }
  .info-item:nth-child(odd) { border-top: none; }
  .info-item:not(:first-child) { border-top: 1px solid var(--line); }
}

/* ─────────────  ANSPRECHPARTNER BÜRO (Kontakt)  ───────────── */
.contacts {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper);
}
.contacts__head {
  max-width: 1500px; margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.4rem, 4vw, 4rem); align-items: end;
}
.contacts__head h2 {
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0)); line-height: 1; margin-top: 1rem;
}
/* Der Absatz steht in der rechten Rasterspalte, die genau so breit endet wie
   das Portraetraster darunter. Eine eigene max-width liess ihn mitten in der
   Spalte aufhoeren — sichtbar als abgerissene Kante gegenueber den Bildern.
   Ohne sie fuellt er die Spalte und schliesst rechts buendig ab. */
.contacts__head p {
  color: var(--ink-2); font-size: 1.1rem; font-weight: 300;
}
.contacts__grid {
  max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.8rem);
}
.pers {
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pers:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.pers__portrait {
  position: relative; margin: 0;
  aspect-ratio: 4/5; background: var(--ink); overflow: hidden;
  filter: grayscale(0.3); transition: filter .6s var(--ease);
}
.pers:hover .pers__portrait { filter: grayscale(0); }
.pers__portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pers:hover .pers__portrait img { transform: scale(1.04); }
.pers__portrait figcaption {
  position: absolute; left: 0.85rem; bottom: 0.85rem;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper); background: rgba(22, 24, 20, 0.5);
  border: 1px dashed rgba(244, 239, 230, 0.45);
  padding: 0.28rem 0.6rem; border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
.pers__body {
  flex: 1; display: flex; flex-direction: column; gap: 0.5rem;
  padding: clamp(1.1rem, 1.6vw, 1.5rem);
}
.pers__role {
  font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss-2);
}
.pers h3 { font-size: 1.32rem; line-height: 1.1; }
.pers__note {
  font-size: 0.92rem; font-weight: 300; color: var(--ink-2);
  line-height: 1.5; text-wrap: pretty;
}
.pers__contact {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.pers__row { display: flex; flex-direction: column; gap: 0.15rem; }
.pers__row > span {
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); opacity: 0.7;
}
.pers__row b {
  font-family: var(--f-display); font-weight: calc(400 + var(--twh, 0));
  font-size: 0.98rem; line-height: 1.3; color: var(--ink); word-break: break-word;
}
.pers__row.is-ph b {
  color: var(--ink-2); align-self: flex-start;
  border-bottom: 1px dashed var(--line);
}
.contacts__disclaimer {
  max-width: 1500px; margin: clamp(1.2rem, 2vw, 1.8rem) auto 0;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--ink-3); opacity: 0.65;
}
@media (max-width: 1100px) {
  .contacts__head { grid-template-columns: 1fr; align-items: start; }
  .contacts__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .contacts__grid { grid-template-columns: 1fr; }
}

/* ─────────────  PARTNER (Verbaende & Netzwerke)  ─────────────
   Zwei Spalten aus Karten mit Logo, Text und Verweis. Das Logo sitzt auf
   einer weissen Kachel: Die Verbandslogos liegen als JPEG mit weissem Grund
   vor, auf dem Papierton der Seite entstuende sonst ein sichtbares Rechteck.
   Die Kachel macht daraus eine bewusste Flaeche. */
.partners {
  /* Oben knapper als der Standardrhythmus: Darueber steht die Einleitung mit
     ihrem eigenen Aussenabstand, zusammen wurde die Luft zu gross. */
  padding: clamp(2.4rem, 4.5vw, 4.4rem) var(--pad-x) var(--section-pad-y);
  background: var(--paper-2);
}
.partners .teasers__head { margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
/* Die Einleitung darueber traegt den vollen Sektionsabstand nach unten. Zusammen
   mit dem der Partnersektion klaffte dazwischen eine leere Flaeche; auf dieser
   Seite endet die Einleitung deshalb knapper. */
body[data-page="partner"] .page-intro { padding-bottom: clamp(1.8rem, 3.2vw, 3rem); }
.partners__grid {
  max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.8rem);
  /* kein align-items: die Karten dehnen sich auf gleiche Hoehe, die Verweise
     stehen dank margin-top:auto trotzdem unten buendig */
}
.partner {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.partner:hover {
  border-color: var(--gruen);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.partner__logo {
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  min-height: clamp(240px, 23vw, 320px);
}
.partner__logo img {
  max-height: clamp(158px, 17vw, 224px);
  width: auto; max-width: 92%;
  object-fit: contain;
}
.partner__body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  gap: 0.7rem;
}
.partner__kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: calc(0.02em + var(--tsl, 0em));
  text-transform: uppercase;
  color: var(--ink-2);
}
.partner h3 {
  font-size: var(--fs-card);
  line-height: 1.1;
  margin: 0;
}
.partner p {
  color: var(--ink-2);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
/* Die Verweise sitzen unten buendig, damit die Karten trotz unterschiedlich
   langer Texte auf einer Linie abschliessen. */
.partner__links {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  align-items: center;
  margin-top: auto; padding-top: 1.2rem;
}
.partner__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; font-size: 0.95rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.partner__link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
/* Das Akzentgruen traegt auf hellem Grund keine Schrift, wohl aber eine
   Linie. Der Verweis wird beim Ueberfahren dunkler, die Unterstreichung gruen. */
.partner__link:hover { color: var(--ink); border-color: var(--gruen); }
.partner__link:hover svg { transform: translateX(4px); }
.partner__link--extern {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--ink-2);
  border-bottom-color: transparent;
}
.partner__link--extern:hover { color: var(--ink); border-bottom-color: var(--line); }

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

/* ─────────────  #TEAMFRIEDRICHS — Videokacheln (Karriere)  ─────────────
   Die Kacheln verlinken auf YouTube und Instagram, sie betten nichts ein.
   Deshalb kein iframe, sondern ein Standbild mit Abspielsymbol: Vor dem
   Klick geht keine Anfrage an einen fremden Server. */
.teamvideos {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper);
}
.teamvideos__track {
  /* etwas breitere Kacheln als bei den Bewertungen — es sind Bilder, keine
     Textblöcke, und sie sollen als Vorschau lesbar bleiben */
  grid-auto-columns: calc((100% - 2.8rem) / 3);
  scroll-snap-type: x mandatory;
}
.tvid {
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tvid:hover {
  border-color: var(--gruen);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.tvid__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  margin: 0;
}
.tvid__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.tvid:hover .tvid__thumb img { transform: scale(1.04); }
/* Ohne Standbild lieber eine gestaltete Flaeche als ein falsches Foto. */
.tvid__thumb--leer {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(162,199,67,0.22), transparent 62%),
    var(--ink);
}
.tvid__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(52px, 5vw, 64px); height: clamp(52px, 5vw, 64px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gruen);
  color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(22,24,20,0.55);
  transition: transform .4s var(--ease);
}
.tvid__play svg { width: 44%; height: 44%; margin-left: 6%; }
.tvid:hover .tvid__play { transform: translate(-50%, -50%) scale(1.08); }
.tvid__badge {
  position: absolute; top: 0.9rem; left: 0.9rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(22, 24, 20, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
}
.tvid__body {
  display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
}
.tvid__body h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.15;
  margin: 0;
}
.tvid__body p {
  color: var(--ink-2);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.tvid__cta {
  margin-top: auto; padding-top: 0.9rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.tvid:hover .tvid__cta { color: var(--ink); }

.teamvideos__kanaele {
  max-width: 1500px; margin: clamp(1.8rem, 3vw, 2.6rem) auto 0;
  display: flex; flex-wrap: wrap; gap: 0.9rem;
}

@media (max-width: 1000px) {
  .teamvideos__track { grid-auto-columns: calc((100% - 1.4rem) / 2); }
}
@media (max-width: 700px) {
  .teamvideos__track { grid-auto-columns: 86%; }
}

/* ─────────────  REVIEWS SLIDER (Google-Bewertungen)  ───────────── */
.reviews-slider { max-width: 1500px; margin: 0 auto; position: relative; }
.reviews-nav {
  display: flex; gap: 0.6rem; justify-content: flex-end;
  margin-bottom: 1.4rem;
}
.reviews-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.reviews-nav button:hover { border-color: var(--moss); color: var(--moss); transform: translateY(-2px); }
/* Setzt script.js, wenn die Spur nicht ueberlaeuft. */
.reviews-nav.is-leer { display: none; }
.reviews-nav button svg { width: 18px; height: 18px; }
.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2.8rem) / 3);
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track .info-card { scroll-snap-align: start; }
@media (max-width: 1100px) {
  .reviews-track { grid-auto-columns: calc((100% - 1.4rem) / 2); }
}
@media (max-width: 700px) {
  .reviews-track { grid-auto-columns: 86%; }
}

/* ─────────────  TOOLBOX (Werkzeuge & Tour, Startseite)  ───────────── */
.toolbox__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  max-width: 1500px;
  margin: 0 auto;
}
.tool {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 14px 30px -26px rgba(22, 24, 20, 0.18);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.tool:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -26px rgba(22, 24, 20, 0.22); }
.tool__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.tool__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.tool:hover .tool__img { transform: scale(1.06); }
.tool__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.06) 42%, rgba(0,0,0,0) 100%);
}
.tool__badge {
  position: absolute; top: 1.2rem; left: 1.2rem;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(244, 239, 230, 0.35);
  background: rgba(22, 24, 20, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tool__content {
  padding: clamp(1.2rem, 1.7vw, 1.6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tool__tag {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss, #2c3a30);
  margin-bottom: 0.55rem;
}
.tool__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  line-height: 1.15;
  max-width: 26ch;
  margin-bottom: 0.5rem;
}
.tool__desc {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 1rem;
  text-wrap: pretty;
}
.tool__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-meta); letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(22, 24, 20, 0.3);
  border-radius: var(--r-pill);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tool__cta svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.tool:hover .tool__cta { background: var(--gruen); border-color: var(--gruen); color: var(--ink); }
.tool:hover .tool__cta svg { transform: translate(2px, -2px); }

.toolbox__rows {
  max-width: 1500px;
  margin: 2.2rem auto 0;
  border-top: 1px solid var(--line);
}
.tool-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: 1.35rem 0.4rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .35s var(--ease), padding .35s var(--ease);
}
.tool-row:hover { background: var(--paper); padding-left: 1rem; padding-right: 1rem; }
.tool-row__num {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--accent-2);
  min-width: 7em;
}
.tool-row__body b {
  display: block;
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: 1.12rem;
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
}
.tool-row__body span {
  display: block;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--ink-2);
  margin-top: 0.15rem;
}
.tool-row__go {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-meta); letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.tool-row__go svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.tool-row:hover .tool-row__go { color: var(--ink); }
.tool-row:hover .tool-row__go svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .toolbox__grid { grid-template-columns: 1fr; }
  .tool__media { aspect-ratio: 16 / 9; }
  .tool-row { grid-template-columns: auto 1fr; }
  .tool-row__go { display: none; }
}

/* map */
.map {
  height: 420px;
  background: var(--ink);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
}
.map::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(244,239,230,0.06) 14px 15px),
    radial-gradient(ellipse at 50% 50%, var(--moss-2), var(--moss) 70%);
}
.map__pin {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.4rem;
  text-align: center;
}
.map__pin span {
  display: block;
  font-family: var(--f-body);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-2);
  margin-top: 0.5rem;
  font-weight: 500;
}

/* ─────────────  INGRÜN — magazine archive  ───────────── */

/* current / featured issue — full-width horizontal hero */
.issue-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 1fr;
  max-width: 1500px;
  margin: 0 auto 4.5rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.issue-hero:hover { transform: translateY(-4px); }
/* Ein Heft ist A4-hoch, der Rahmen war quer — davon blieb ein Streifen übrig.
   Jetzt liegt das ganze Cover mittig auf weisser Flaeche, mit reichlich Luft
   an den Seiten. Die Flaeche ist bewusst breiter als das Heft: So bleibt der
   Bildbereich gross, ohne dass die Karte in die Hoehe waechst. */
.issue-hero__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  display: flex;
  padding: clamp(2rem, 4vw, 4rem);
}
.issue-hero__cover img {
  /* Das Bild soll genau die Flaeche innerhalb des Rands einnehmen. Ueber
     Prozente ging das nicht — ein Rasterelement ohne feste Hoehe liefert
     keinen Bezugswert — und ueber inset auch nicht: Bei ersetzten Elementen
     wie img zieht das die Box nicht auf, dort gewinnt die Bildgroesse selbst.
     Flexbox kommt ohne beides aus: wachsen in der Breite, strecken in der
     Hoehe. object-fit: contain haelt das Cover darin vollstaendig. */
  flex: 1;
  min-width: 0;
  align-self: stretch;
  object-fit: contain;
  /* drop-shadow statt box-shadow: Der Schatten folgt der Kante des Covers,
     nicht dem Kasten drumherum — bei object-fit: contain sind das zwei
     verschiedene Rechtecke. */
  filter: drop-shadow(0 14px 30px rgba(22, 24, 20, 0.2));
  transition: filter .5s var(--ease);
}
/* Kein Zoom mehr beim Ueberfahren: Bei object-fit: contain wuerde das
   Skalieren genau die Raender abschneiden, die hier sichtbar bleiben sollen.
   Stattdessen hebt sich das Heft etwas staerker von der Flaeche ab. */
.issue-hero:hover .issue-hero__cover img {
  filter: drop-shadow(0 22px 44px rgba(22, 24, 20, 0.3));
}
.issue-hero__flag {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--gruen);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}
.issue-hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper);
  animation: ingruenPulse 2s var(--ease) infinite;
}
@keyframes ingruenPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.issue-hero__meta {
  padding: clamp(2rem, 4vw, 3.4rem);
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
}
.issue-hero__edition {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--accent);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}
.issue-hero__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: calc(-0.03em + var(--tsh, 0em));
  color: var(--ink);
}
.issue-hero__title em { font-style: italic; color: var(--accent-2); }
.issue-hero__lede {
  font-size: 1.02rem;
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.6;
  max-width: 48ch;
}
.issue-hero__cta {
  margin-top: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  transition: color .3s, border-color .3s;
}
.issue-hero__cta svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.issue-hero:hover .issue-hero__cta { color: var(--accent-2); border-color: var(--accent); }
.issue-hero:hover .issue-hero__cta svg { transform: translateX(4px); }

/* archive divider */
.ingruen-archive__head {
  max-width: 1500px;
  margin: 0 auto 1.6rem;
  display: flex; align-items: center; gap: 1.4rem;
}
.ingruen-archive__rule {
  flex: 1; height: 1px;
  background: var(--line);
}

.ingruen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  max-width: 1500px;
  margin: 0 auto;
}
.issue {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.issue:hover { transform: translateY(-4px); }

.issue__cover {
  position: relative;
  /* Seitenverhaeltnis einer A4-Seite: So ist der dunkle Rand ringsum gleich
     breit, statt an den Seiten aufzugehen. Andere Formate faengt
     object-fit: contain trotzdem sauber ab. */
  /* content-box, damit sich das Verhaeltnis auf die Flaeche *innerhalb* des
     Rands bezieht — sonst zieht das Innenmass die Seite laenger und der Rand
     wird oben und unten breiter als seitlich. */
  box-sizing: content-box;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  background: #fff;
  display: flex;
  padding: 1.15rem;
}
.issue__cover img {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(22, 24, 20, 0.18));
  transition: filter .5s var(--ease);
}
.issue:hover .issue__cover img {
  filter: drop-shadow(0 14px 30px rgba(22, 24, 20, 0.28));
}
.issue__edition {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.45rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}

.issue__meta {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.issue__date {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--accent);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}
.issue__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-card);
  line-height: 1.05;
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
  color: var(--ink);
}
.issue--featured .issue__title { font-size: var(--fs-h3); }
.issue__lede {
  font-size: 0.95rem;
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.55;
}
.issue__cta {
  margin-top: 0.5rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink);
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  transition: color .3s, border-color .3s;
}
.issue:hover .issue__cta { color: var(--accent-2); border-color: var(--accent); }

@media (max-width: 1000px) {
  .issue-hero { grid-template-columns: 1fr; margin-bottom: 3.5rem; }
  /* Einspaltig steht das Cover ueber dem Text. Quadratisch waere es dort
     unnoetig klein — hochkant nutzt es die volle Breite. */
  .issue-hero__cover { aspect-ratio: 3 / 4; }
  .ingruen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ingruen-grid { grid-template-columns: 1fr; }
}

/* ─────────────  LEGAL  ───────────── */
.legal {
  /* Die Lesespalte soll 880px BREIT sein. Bei border-box zieht das Polster
     davon ab — zusammen mit dem grosszuegigen --pad-x blieben auf breiten
     Bildschirmen nur 460px Text uebrig. Deshalb wird das Polster auf die
     Hoechstbreite aufgeschlagen, und es ist hier eigenstaendig statt das
     Seitenpolster der vollbreiten Abschnitte zu uebernehmen. */
  --legal-rand: clamp(1.2rem, 4vw, 3rem);
  max-width: calc(880px + 2 * var(--legal-rand));
  padding: 10rem var(--legal-rand) 6rem;
  margin: 0 auto;
}
.legal h1 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: calc(-0.045em + var(--tsh, 0em));
  line-height: 1.02;
  margin-bottom: 2rem;
}
.legal h2 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: 1.5rem;
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
}
/* Unterpunkte in den Rechtstexten — die Erklärung gliedert sich in
   Hauptabschnitte mit mehreren Themen darunter. */
.legal h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.08rem;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.legal ul { margin: 0 0 0.8rem 1.2rem; }
.legal li {
  font-size: 1rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 0.3rem;
}
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--paper-3);
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}
.legal p, .legal address {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 0.8rem;
  font-style: normal;
}
.legal a { color: var(--moss); text-decoration: underline; transition: color .3s var(--ease); }
.legal a:hover { color: var(--accent-2); }

/* responsive subpage adjustments */
@media (max-width: 1100px) {
  .teaser-grid { grid-template-columns: repeat(4, 1fr); }
  .teaser--w2, .teaser--w3 { grid-column: span 2; }
  .teaser--w4 { grid-column: span 4; aspect-ratio: 16/9; }
  .info-cards__inner { grid-template-columns: 1fr 1fr; }
  .positions__head { grid-template-columns: 1fr; gap: 1rem; }
  .position { grid-template-columns: 1fr auto; gap: 1rem; }
  .position__meta { display: none; }
  .cta-strip { grid-template-columns: 1fr; }
  /* shrink the values staircase as cards get narrower */
  .values__inner.is-shown .value:nth-child(2) { transform: translateY(clamp(30px, 4vw, 60px)); }
  .values__inner.is-shown .value:nth-child(3) { transform: translateY(clamp(60px, 8vw, 120px)); }
}
@media (max-width: 800px) {
  .values__inner { grid-template-columns: 1fr; gap: 1.2rem; }
  .values__inner.is-shown .value:nth-child(2),
  .values__inner.is-shown .value:nth-child(3) { transform: translateY(0); }
  .value { min-height: auto; }
  .values { padding-bottom: clamp(5rem, 9vw, 8rem); }
}
@media (max-width: 700px) {
  .teaser-grid { grid-template-columns: 1fr 1fr; }
  .teaser--w2, .teaser--w3, .teaser--w4 { grid-column: span 2; aspect-ratio: 4/5; }
  .values__inner { grid-template-columns: 1fr; }
  .info-cards__inner { grid-template-columns: 1fr; }
  .page-intro__inner { grid-template-columns: 1fr; }
  .page-hero { min-height: 48vh; padding-top: 8rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero__video, .karriere__video { display: none; }
}

/* ─────────────────────────────────────────────
   PROJEKTE — Section (03) layout variants
   ───────────────────────────────────────────── */

/* Shared shell */
.pv {
  margin: var(--section-gap);
  border-radius: var(--r-xl);
  padding: clamp(3rem, 6vw, 6rem) var(--pad-x);
  overflow: hidden;
  position: relative;
}
.pv__head { max-width: 760px; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.pv__lead { font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.6; color: var(--ink-2); font-weight: 300; margin-top: 1.1rem; max-width: 56ch; }
.pv__lead--cream { color: rgba(244, 239, 230, 0.85); }
.pv__cta-wrap { margin-top: clamp(2rem, 3.5vw, 3rem); display: flex; justify-content: flex-end; }

/* ── Variante A: Editorial Mosaic (light) ─────────────────── */
.pv--a {
  background: var(--paper-2);
  color: var(--ink);
}
.pv--a .pv__mosaic {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0.9rem;
  height: clamp(520px, 62vw, 760px);
}
.pv--a .pv__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
  display: block;
  text-decoration: none;
  color: var(--paper);
}
.pv--a .pv__tile--hero {
  grid-row: span 3;
}
/* <picture> ist nur eine Huelle fuer die Quellenauswahl und soll kein
   eigenes Kaestchen im Layout erzeugen — das Bild darin liegt absolut. */
.pv--a .pv__tile picture { display: contents; }
.pv--a .pv__tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.pv--a .pv__tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
  z-index: 1;
}
.pv--a .pv__tile-label {
  position: absolute;
  left: 1.2rem; right: 1.2rem; bottom: 1.1rem;
  z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
}
.pv--a .pv__tile-num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  opacity: 0.78;
}
.pv--a .pv__tile-title {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
  line-height: 1.05;
}
.pv--a .pv__tile--hero .pv__tile-title {
  font-size: var(--fs-h3);
}
.pv--a .pv__tile:hover img { transform: scale(1.06); }

/* ── Variante B: Magazin-Karten (dark, staggered) ─────────── */
.pv--b {
  color: var(--paper);
  min-height: clamp(720px, 110vh, 1100px);
  isolation: isolate;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem);
}
.pv--b .pv__bleed-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.pv--b .pv__bleed-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.78) 100%);
}
.pv--b .pv__head h2 { color: var(--paper); }
.pv--b .pv__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.8rem);
  align-items: start;
}
.pv--b .pv__card {
  display: block;
  text-decoration: none;
  color: var(--paper);
  position: relative;
}
.pv--b .pv__card:nth-child(1) { margin-top: 0; }
.pv--b .pv__card:nth-child(2) { margin-top: 2.6rem; }
.pv--b .pv__card:nth-child(3) { margin-top: 5.2rem; }
.pv--b .pv__card:nth-child(4) { margin-top: 7.8rem; }
.pv--b .pv__card-num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  color: var(--accent-soft);
  display: block;
  margin-bottom: 0.6rem;
}
.pv--b .pv__card-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 3/4;
  margin-bottom: 1rem;
}
.pv--b .pv__card-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.pv--b .pv__card:hover .pv__card-frame img { transform: scale(1.06); }
.pv--b .pv__card-title {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.pv--b .pv__card-meta {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: rgba(244, 239, 230, 0.6);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  display: flex; gap: 0.6rem; align-items: center;
}
.pv--b .pv__card-meta span:not(:first-child)::before {
  content: "·";
  margin-right: 0.6rem;
  color: var(--accent-soft);
}

/* ── Variante C: Hero + Index-Liste ──────────────────────── */
.pv--c {
  background: var(--paper-2);
  color: var(--ink);
}
.pv--c .pv__split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: stretch;
}
.pv--c .pv__stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  min-height: 460px;
}
.pv--c .pv__stage-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.pv--c .pv__stage-img.is-on { opacity: 1; }
.pv--c .pv__stage-caption {
  position: absolute;
  left: 1.4rem; bottom: 1.2rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--paper);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  background: rgba(22,24,20,0.5);
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
.pv--c .pv__right { display: flex; flex-direction: column; justify-content: center; }
.pv--c .pv__index {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.pv--c .pv__index li { border-bottom: 1px solid var(--line); }
.pv--c .pv__index a {
  display: grid;
  grid-template-columns: 64px 1fr auto 24px;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.2rem 0;
  color: var(--ink);
  transition: padding .35s var(--ease), color .35s var(--ease);
}
.pv--c .pv__index a:hover { padding-left: 0.6rem; color: var(--accent-2); }
.pv--c .pv__index .pv__index-num {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}
.pv--c .pv__index .pv__index-title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  letter-spacing: calc(-0.03em + var(--tsh, 0em));
  font-weight: calc(400 + var(--twh, 0));
}
.pv--c .pv__index .pv__index-meta {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
}
.pv--c .pv__index .pv__index-arrow {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.pv--c .pv__index a:hover .pv__index-arrow { transform: translateX(6px); color: var(--accent-2); }

/* ── Variante D: Horizontaler Scroll-Stream ──────────────── */
.pv--d {
  background: var(--paper);
  color: var(--ink);
  padding-right: 0;
}
.pv--d .pv__head-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-right: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  gap: 2rem;
}
.pv--d .pv__head { margin-bottom: 0; }
.pv--d .pv__scroll-meta {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
  display: flex; align-items: center; gap: 1rem;
  flex-shrink: 0;
}
.pv--d .pv__scroll-nav { display: inline-flex; gap: 0.5rem; }
.pv--d .pv__scroll-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.pv--d .pv__scroll-btn:hover { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }
.pv--d .pv__stream {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 32vw, 420px);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 1rem;
  padding-right: clamp(2rem, 5vw, 5rem);
}
.pv--d .pv__stream::-webkit-scrollbar { display: none; }
.pv--d .pv__slide {
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.pv--d .pv__slide-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4/5;
  margin-bottom: 1.1rem;
}
.pv--d .pv__slide-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.pv--d .pv__slide:hover .pv__slide-frame img { transform: scale(1.06); }
.pv--d .pv__slide-num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  background: rgba(244, 239, 230, 0.92);
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
}
.pv--d .pv__slide-body {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
}
.pv--d .pv__slide-title {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.6vw, 1.55rem);
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
  line-height: 1.1;
}
.pv--d .pv__slide-meta {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  margin-top: 0.4rem;
}
.pv--d .pv__cta-wrap {
  padding-right: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Mobile fallbacks ───────────────────────────────────── */
@media (max-width: 900px) {
  .pv { padding: clamp(2.2rem, 6vw, 3.5rem) var(--pad-x); }
  .pv--a .pv__mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .pv--a .pv__tile { aspect-ratio: 4/3; }
  /* Die erste Kachel laeuft auf dem Desktop hochkant ueber drei Rasterzeilen.
     Einspaltig bringt dieses Sonderformat nichts — sie ist dort einfach die
     erste von vieren und soll aussehen wie die uebrigen: gleiches
     Seitenverhaeltnis, gleiche Titelgroesse, keine Sonderzeile im Raster. */
  .pv--a .pv__tile--hero {
    grid-row: auto;
    aspect-ratio: 4/3;
  }
  .pv--a .pv__tile--hero .pv__tile-title {
    /* derselbe Wert wie oben bei .pv--a .pv__tile-title */
    font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  }
  .pv--b { min-height: auto; }
  .pv--b .pv__cards { grid-template-columns: 1fr 1fr; }
  .pv--b .pv__card:nth-child(n) { margin-top: 0; }
  .pv--b .pv__card:nth-child(2),
  .pv--b .pv__card:nth-child(4) { margin-top: 2.6rem; }
  .pv--c .pv__split { grid-template-columns: 1fr; gap: 2rem; }
  .pv--c .pv__stage { min-height: 360px; aspect-ratio: 4/3; }
  .pv--c .pv__index a { grid-template-columns: 48px 1fr auto; gap: 0.8rem; }
  .pv--c .pv__index .pv__index-meta { display: none; }
  .pv--d .pv__head-row { flex-direction: column; align-items: flex-start; }
  .pv--d .pv__scroll-nav { display: none; }
}

/* /pv reveal helpers (use existing data-reveal) */

/* ─────────────  MEGA-MENU · Leistungen (Liste + Bildvorschau)  ───────────── */
.dropdown--leistungen {
  grid-template-columns: 1.12fr 0.88fr;
  gap: 0 1.6rem;
  align-items: start;
  padding: 0.75rem;
}
.dropdown--leistungen > a.dd-row {
  grid-column: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.42rem 1rem;
  border-radius: var(--r-sm);
}
.dd-row__text { display: block; min-width: 0; }
.dropdown--leistungen .dropdown__num { margin-bottom: 0; }
.dropdown--leistungen .dropdown__title { display: block; font-size: 17px; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.dropdown--leistungen .dropdown__tag { display: block; margin-top: 0.05rem; line-height: 1.35; }
.dropdown--leistungen .dropdown__footer {
  grid-column: 1;
  margin-top: 0.3rem;
  padding: 0.6rem 1rem 0;
}

/* Bildvorschau — wechselt beim Überfahren einer Zeile */
.dd-preview {
  grid-column: 2;
  grid-row: 1 / span 8;
  align-self: stretch;
  position: relative;
  min-height: 280px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-3);
}
.dd-preview__fig {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.dd-preview__fig img { width: 100%; height: 100%; object-fit: cover; }
.dd-preview__fig figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.2rem 1rem;
  font-family: var(--f-serif);
  font-size: 1.15rem;
  color: var(--paper-2);
  background: linear-gradient(transparent, rgba(20, 22, 18, 0.75));
}
.dd-preview__fig--1 { opacity: 1; }
.dd-row:hover ~ .dd-preview .dd-preview__fig { opacity: 0; }
.dd-row--1:hover ~ .dd-preview .dd-preview__fig--1,
.dd-row--2:hover ~ .dd-preview .dd-preview__fig--2,
.dd-row--3:hover ~ .dd-preview .dd-preview__fig--3,
.dd-row--4:hover ~ .dd-preview .dd-preview__fig--4,
.dd-row--5:hover ~ .dd-preview .dd-preview__fig--5,
.dd-row--6:hover ~ .dd-preview .dd-preview__fig--6,
.dd-row--7:hover ~ .dd-preview .dd-preview__fig--7 { opacity: 1; }

@media (max-width: 1100px) {
  .dropdown--leistungen { grid-template-columns: minmax(0, 1fr); }
  .dd-preview { display: none; }
}

.dropdown__sub {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
}
.dropdown a:hover .dropdown__sub { color: var(--ink); border-color: var(--ink-2); }

/* ─────────────  MEGA-MENU · Unternehmen (Navigation + Aktuelles)  ───────────── */
.dropdown--unternehmen {
  grid-template-columns: 0.85fr 1.4fr;
  gap: 1.8rem;
  padding: 1.1rem 1.2rem;
  align-items: start;
}
.dd-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.75;
  padding-bottom: 0.5rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.dropdown .dd-head a { flex-direction: row; padding: 0; border-radius: 0; white-space: nowrap; }
.dropdown .dd-head a:hover { background: none; color: var(--ink); }
.dropdown--unternehmen .dd-nav a { padding: 0.45rem 0.7rem; margin: 0 -0.7rem; border-radius: var(--r-sm); }
.dd-latest__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-content: start; }
.dropdown--unternehmen .dd-card { padding: 0; border-radius: var(--r-md); }
.dropdown--unternehmen .dd-card:hover { background: none; }
.dd-card figure { margin: 0; overflow: hidden; border-radius: var(--r-md); }
.dd-card img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.dd-card:hover img { transform: scale(1.04); }
.dd-card b {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--f-serif);
  font-weight: calc(400 + var(--twh, 0));
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: calc(-0.01em + var(--tsh, 0em));
}
.dd-card .dropdown__num { display: block; margin: 0.3rem 0 0; }

@media (max-width: 1100px) {
  .dropdown--unternehmen { grid-template-columns: minmax(0, 1fr); }
  .dd-latest { display: none; }
}

/* ─────────────  LEISTUNGEN — Oberleistung groups (single page)  ───────────── */
.lgroup {
  padding: var(--section-pad-y) var(--pad-x);
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.lgroup:nth-of-type(even) { background: var(--paper-2); }
.lgroup__head {
  max-width: 1500px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.lgroup:nth-of-type(even) .lgroup__head { grid-template-columns: 0.95fr 1.05fr; }
.lgroup__head > * { min-width: 0; }
.lgroup:nth-of-type(even) .lgroup__media { order: -1; }
.lgroup__no {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.01em + var(--tsl, 0em));
  text-transform: none;
  font-weight: calc(400 + var(--twl, 0));
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.lgroup__no::before {
  content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6;
}
.lgroup__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  margin: 1rem 0 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.lgroup__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 1.1rem 0 0;
  max-width: 42ch;
}
.lgroup__body {
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 1.1rem 0 0;
  max-width: 50ch;
}
.lgroup__body em { font-style: normal; color: var(--ink); font-weight: 500; }
.lgroup__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.lgroup__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--shadow-card);
}
.lgroup__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lgroup__media figcaption {
  position: absolute; bottom: 1.2rem; left: 1.2rem;
  background: rgba(22, 24, 20, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  font-family: var(--f-mono);
  max-width: 90%;
  border-radius: var(--r-pill);
}
.lgroup__grid {
  max-width: 1500px; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.lcard {
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 0.55rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.lgroup:nth-of-type(even) .lcard { background: var(--paper); }
.lcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--ink-2); }
.lcard__no { font-family: var(--f-mono); font-size: 0.74rem; color: var(--accent-2); }
.lcard h3 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0)); font-size: 1.32rem; line-height: 1.12; letter-spacing: calc(-0.02em + var(--tsh, 0em));
}
.lcard p { font-size: 0.92rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 980px) {
  .lgroup__head,
  .lgroup:nth-of-type(even) .lgroup__head { grid-template-columns: 1fr; }
  .lgroup:nth-of-type(even) .lgroup__media { order: 0; }
  .lgroup__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .lgroup__grid { grid-template-columns: 1fr; }
}

/* in-page jump nav for the single Leistungen page */
.ljump {
  max-width: 1500px; margin: 0 auto;
  padding: 0 var(--pad-x) clamp(1rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  justify-content: center;
}
.ljump a {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  padding: 0.7rem 1.2rem;
  min-height: 44px;   /* stand auf 42px */
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-family: var(--f-display); font-weight: calc(400 + var(--twh, 0)); font-size: 0.95rem;
  color: var(--ink); text-decoration: none; background: var(--paper);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.ljump a span { font-family: var(--f-mono); font-size: 0.74rem; color: var(--accent-2); }
.ljump a:hover { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }
.ljump a:hover span { color: var(--paper); }
.ljump a.is-active {
  background: var(--ui-dark);
  color: var(--paper);
  border-color: var(--ui-dark);
}
.ljump a.is-active span { color: var(--accent); }

/* Progress bar */
.ljump { position: relative; }
.ljump__bar {
  position: absolute;
  left: 0; bottom: 0; top: auto;
  height: 2px;
  width: 0%;
  background: var(--accent);
  transition: width 0.15s linear;
  pointer-events: none;
}

/* ─────────────  RELAUNCH · Leistungen sticky sub-nav + Prozess  ───────────── */
.ljump {
  position: sticky; top: var(--header-h, 68px); z-index: 30;
  max-width: none; margin: 0;
  padding: 0.85rem var(--pad-x);
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lgroup { scroll-margin-top: 150px; }

/* Prozess: Schritt für Schritt zum Traumgarten */
.lprocess {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.lprocess__label {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 1.6rem;
}
.lprocess__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
  counter-reset: step;
}
.lprocess__steps li {
  counter-increment: step;
  position: relative;
  padding: 1.1rem 1.1rem 1.1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-2);
  font-weight: 500; font-size: 0.98rem; color: var(--ink);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.lprocess__steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 0.8rem; color: var(--accent-2);
}
.lprocess__steps li:hover { border-color: var(--ink-2); background: var(--paper); }
.lprocess__steps li small { font-weight: 400; color: var(--ink-2); font-size: 0.82rem; }

/* ─────────────  CONSISTENT SIDE PADDING  ─────────────
   Card-style sections (.hero, .marquee, .pv, .cta-strip, .feat--bleed,
   .karriere, .footer, .page-hero) have `margin: var(--section-gap)`, so
   their content begins at section-gap + pad-x from the viewport edge.
   Flat sections (no outer margin) need to add section-gap to their
   horizontal padding to align with the card content on wide screens.    */
.section-head,
.manifest,
.leistungen,
.projekte,
.historie,
.team,
.service-section,
.kontakt,
.feat:not(.feat--bleed),
.teasers,
.values,
.galanet-benefits,
.galanet-film,
.info-cards,
.positions,
.journey,
.services-list,
.page-intro,
.lgroup,
.ljump,
.historie-rail {
  padding-inline: calc(var(--pad-x) + var(--section-gap));
}

/* Header content aligns to the same 1500px container as the body on wide screens */

/* hero keeps the original (smaller) side padding — independent of the
   wide-screen --pad-x expansion that aligns body content to 1500px.        */
.hero {
  --pad-x: clamp(1.2rem, 4vw, 4.5rem);
}

/* ─────────────  SCROLL-REVEAL INTRO  ───────────── */
.intro-reveal {
  background: var(--paper);
  padding: var(--section-pad-y) calc(var(--pad-x) + var(--section-gap));
}
/* tighter handoff into the Über-uns block below */
#feat-ueber-uns { padding-top: clamp(2rem, 4vw, 3.5rem); }
.intro-reveal__inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.intro-reveal__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.1rem 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(2.4rem, 4.5vw, 3.8rem);
}
.intro-reveal__pill svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.intro-reveal__copy {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: 3rem;
  line-height: 1.22;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  color: var(--ink);
  max-width: 64.25rem;
  margin: 0 auto;
  text-wrap: balance;
}
.intro-reveal__copy span {
  display: inline-block;
  opacity: var(--op, 0.1);
  transition: opacity 0.22s var(--ease);
  will-change: opacity;
}
.intro-reveal__copy span.is-accent { color: var(--accent); }
.intro-reveal__copy em { font-style: italic; font-weight: 400; }

@media (max-width: 720px) {
  .intro-reveal__copy { font-size: clamp(1.6rem, 6vw, 2.2rem); }
}

.intro-reveal__cite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: calc(-0.005em + var(--tsl, 0em));
  color: var(--ink-2);
}
.intro-reveal__cite-rule {
  width: 36px;
  height: 1px;
  background: var(--ink-2);
  opacity: 0.45;
}
.intro-reveal__cite-name {
  color: var(--ink);
  font-weight: 500;
}
.intro-reveal__cite-role {
  color: var(--stone);
}
.intro-reveal__cite-role::before {
  content: "·";
  margin-right: 0.55rem;
  color: var(--accent);
}

/* ─────────────  SERVICE ROWS — Unterleistungen als Akkordeon-Cards  ───────────── */
.lservice-rows {
  max-width: 1500px;
  margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lservice-row {
  background: var(--paper-3);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background 0.2s;
}

.lservice-row[data-open] {
  background: var(--paper-2);
}
/* In geraden Sektionen ist der Seitenhintergrund bereits --paper-2 —
   dort bekommt die offene Zeile --paper, damit sie sich abhebt. */
.lgroup:nth-of-type(even) .lservice-row[data-open] {
  background: var(--paper);
}

.lservice-row__toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(140px, 20%) 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: opacity 0.15s;
}

.lservice-row__center {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}

.lservice-row__toggle:hover { opacity: 0.82; }

/* Left column: number + short name stacked */
.lservice-row__left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.lservice-row__num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--stone);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lservice-row__name {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: calc(400 + var(--twh, 0));
  color: var(--ink);
  line-height: 1.2;
}

/* Thumbnail */
.lservice-row__thumb {
  width: 172px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: block;
}

/* Right text block */
.lservice-row__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.lservice-row__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: var(--fs-card);
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
  line-height: 1.18;
  color: var(--ink);
}

.lservice-row__tag {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron */
.lservice-row__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ink-3);
  transition: transform 0.38s var(--ease);
}

.lservice-row[data-open] .lservice-row__chevron {
  transform: rotate(90deg);
}

/* Akkordeon-Panel */
.lservice-row__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}

.lservice-row__panel-inner {
  opacity: 0;
  transition: opacity 0.22s ease 0s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 0 2rem 2rem 2rem;
}

.lservice-row__panel--open .lservice-row__panel-inner {
  opacity: 1;
  transition: opacity 0.3s ease 0.2s;
}

/* Hier stand die Polsterung ein zweites Mal, identisch zur Grundregel oben —
   aber mit der Klasse --open davor und damit höherer Spezifität. Sie hat die
   Mobilwerte weiter unten ausgehebelt: Beim Aufklappen sprang die Polsterung
   von 1,2/1,6rem zurück auf 2rem. Die Panelhöhe wird jedoch VOR dem Aufklappen
   gemessen, also mit den kleineren Werten — die Differenz wurde unten
   abgeschnitten, mitsamt dem "Anfragen"-Knopf. */

.lservice-row__panel-inner p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 90ch;
  text-wrap: pretty;
}

/* Responsive */
@media (max-width: 900px) {
  .lservice-row__thumb { width: 120px; height: 80px; }
  .lservice-row__toggle { gap: 1.2rem; padding: 1.2rem 1.4rem; }
  .lservice-row__panel-inner {
    padding: 0 1.4rem 1.8rem 1.4rem;
  }
}

@media (max-width: 600px) {
  .lservice-row__left { display: none; }
  .lservice-row__thumb { width: 90px; height: 64px; }
  .lservice-row__tag { display: none; }
  .lservice-row__toggle { gap: 1rem; padding: 1rem 1.2rem; grid-template-columns: 1fr auto; }
  .lservice-row__panel-inner {
    padding: 0 1.2rem 1.6rem 1.2rem;
  }
}

/* ─────────────  PROJEKT-GALERIE (Projekt-Unterseiten)  ─────────────
   Editorial gallery: varied image sizes, captions, no dark veils,
   click-to-zoom lightbox. */
.pgal {
  padding: var(--section-pad-y) calc(var(--pad-x) + var(--section-gap));
  background: var(--paper);
}
.pgal__head {
  max-width: 1500px;
  margin: 0 auto 1.6rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.pgal__head h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  margin-top: 1rem;
}
.pgal__head h2 em { font-style: italic; color: var(--sand); }
.pgal__hint {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  white-space: nowrap;
}
.pgal__hint svg { width: 15px; height: 15px; flex: none; }

.pgal__grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem) clamp(0.7rem, 1.2vw, 1rem);
  align-items: start;
}
.pgal-fig { margin: 0; grid-column: span 12; }
.pgal-fig__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  background: var(--paper-3);
}
.pgal-fig__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s var(--ease);
}
.pgal-fig:hover .pgal-fig__frame img { transform: scale(1.035); }
.pgal-fig__zoom {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 239, 230, 0.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}
.pgal-fig__zoom svg { width: 18px; height: 18px; }
.pgal-fig:hover .pgal-fig__zoom { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .pgal-fig__zoom { opacity: 1; transform: none; width: 38px; height: 38px; }
}
.pgal-fig figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.65rem;
  padding-right: 0.6rem;
}
.pgal-fig figcaption .pgal-fig__no {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--moss-2);
  flex: none;
}
.pgal-fig figcaption .pgal-fig__txt {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.45;
  text-wrap: pretty;
}

/* layout variants — images are mostly 3:2; sizes chosen so paired rows align */
.pgal-fig--full .pgal-fig__frame { aspect-ratio: 21 / 8; }
.pgal-fig--maj { grid-column: span 7; }
.pgal-fig--maj .pgal-fig__frame { aspect-ratio: 16 / 9; }
.pgal-fig--min { grid-column: span 5; }
.pgal-fig--min .pgal-fig__frame { aspect-ratio: 1.27 / 1; }
.pgal-fig--half { grid-column: span 6; }
.pgal-fig--half .pgal-fig__frame { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .pgal-fig--maj, .pgal-fig--min, .pgal-fig--half { grid-column: span 12; }
  .pgal-fig--full .pgal-fig__frame,
  .pgal-fig--maj .pgal-fig__frame,
  .pgal-fig--min .pgal-fig__frame,
  .pgal-fig--half .pgal-fig__frame { aspect-ratio: 16 / 9; }
}

/* ─────────────  LIGHTBOX  ───────────── */
.lbx {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: rgba(22, 24, 20, 0.96);
  opacity: 0;
  visibility: hidden;
}
.lbx.is-open {
  opacity: 1;
  visibility: visible;
}
body.lbx-lock { overflow: hidden; }
.lbx__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem clamp(1.2rem, 3vw, 2.4rem);
  color: var(--paper);
}
.lbx__count {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: rgba(244, 239, 230, 0.7);
}
.lbx__close {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, 0.3);
  background: transparent;
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.lbx__close svg { width: 17px; height: 17px; }
.lbx__close:hover { background: var(--gruen); color: var(--ink); border-color: var(--gruen); }
.lbx__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.5rem clamp(1rem, 8vw, 7.5rem);
}
.lbx__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
.lbx__img.is-switching { opacity: 0; }
.lbx__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, 0.3);
  background: rgba(22, 24, 20, 0.4);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.lbx__arrow svg { width: 19px; height: 19px; }
.lbx__arrow:hover { background: var(--gruen); color: var(--ink); border-color: var(--gruen); }
.lbx__arrow--prev { left: clamp(0.8rem, 2.5vw, 2.2rem); }
.lbx__arrow--next { right: clamp(0.8rem, 2.5vw, 2.2rem); }
.lbx__caption {
  text-align: center;
  padding: 1.2rem clamp(1.2rem, 3vw, 2.4rem) 1.7rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: rgba(244, 239, 230, 0.72);
  min-height: 3.6rem;
  text-wrap: balance;
}
@media (max-width: 700px) {
  .lbx__arrow { width: 44px; height: 44px; }
  .lbx__stage { padding: 0 clamp(0.8rem, 4vw, 2rem); }
}

/* ─────────────  PROJEKT-PAGER (Nächstes Projekt)  ───────────── */
.proj-pager {
  margin: 0 0 var(--section-gap);
  /* "Naechstes Projekt" ist eine grossflaechige Karte wie der Kopfbereich und
     der CTA-Streifen direkt darunter — und stand als einzige davon auf
     Lesebreite (1500px, 210px Rand), waehrend die Nachbarn den vollen Satz
     minus --section-gap einnehmen. Zwischen zwei vollbreiten Karten sah sie
     dadurch eingerueckt aus. Jetzt derselbe Rand wie bei .page-hero und
     .cta-strip. Die Galerie darueber bleibt bewusst auf Lesebreite: Sie ist
     Inhalt, keine Karte. */
  padding-inline: var(--section-gap);
}
.proj-pager__link {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--banner);
  color: var(--paper);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  min-height: clamp(300px, 36vw, 420px);
}
.proj-pager__body {
  padding: clamp(2.2rem, 4.5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}
.proj-pager__label {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.proj-pager__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.035em + var(--tsh, 0em));
  line-height: 1.05;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  max-width: 16ch;
}
.proj-pager__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.proj-pager__loc {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: rgba(244, 239, 230, 0.6);
}
.proj-pager__arrow {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, 0.3);
  display: grid;
  place-items: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.proj-pager__arrow svg { width: 19px; height: 19px; }
.proj-pager__media {
  position: relative;
  overflow: hidden;
  min-height: 240px;
}
.proj-pager__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.proj-pager__link:hover .proj-pager__media img { transform: scale(1.045); }
.proj-pager__link:hover .proj-pager__arrow {
  background: var(--gruen);
  border-color: var(--gruen);
  color: var(--ink);
  transform: translateX(4px);
}
@media (max-width: 800px) {
  .proj-pager__link { grid-template-columns: 1fr; }
  .proj-pager__media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
  .proj-pager__media img { position: absolute; }
}


/* ─────────  TYPE REFRESH 07/2026 — fettere Headlines, Playfair-Unterüberschriften, weicheres Gesamtbild  ───────── */
.display, .section-head__title, .manifest__head, h2,
.page-hero h1, .cta-strip h2, .projects-stack__title, .historie-rail__title,
.proj-feature__title, .feat__h, .teasers__head h2, .galanet-benefits__head h2,
.galanet-film__head h2, .positions__head h2, .journey__title, .value__slogan,
.issue-hero__title, .legal h1 {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
}
/* Unterüberschriften & Kartentitel → Playfair Display */
h3, h4,
.dropdown__title, .svc-row__title, .ms__head, .benefit h3, .position h3,
.teaser__title, .tool__title, .journey__h, .issue__title, .topic h4,
.booking__cal-head span, .kontakt__facts b, .upload__zone b,
.info-item__value, .tool-row__body b, .minical__month, .legal h2 {
  font-family: var(--f-serif);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: var(--tsh, 0em);
}
/* Kursive Ziffern/Akzente ebenfalls in Playfair — wirkt weicher */
.service__no, .project__index, .position__no, .teaser__num, .tl__year,
.map__pin, .ms__quote, .kurzbewerbung-hint {
  font-family: var(--f-serif);
}
/* Mono-Labels sind jetzt Work Sans — etwas Luft in die Tracking-Werte */
.eyebrow, .section-head__label, .manifest__label, .crumbs,
.position__meta span, .info-item__label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}


/* ─────────────  BLOG  ───────────── */
.blog-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  background: var(--paper-2);
  border-radius: var(--r-xl);
  padding: clamp(1rem, 2vw, 1.6rem);
  box-shadow: var(--shadow-card);
  margin-bottom: clamp(2.8rem, 5vw, 4.5rem);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.blog-hero:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.blog-hero__cover {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.blog-hero__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.blog-hero:hover .blog-hero__cover img { transform: scale(1.04); }
.blog-hero__meta { padding: clamp(0.4rem, 1.5vw, 1.4rem); display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.blog-hero__title {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: calc(-0.03em + var(--tsh, 0em));
  line-height: 1.08;
}
.blog-hero__lede { font-weight: 300; color: var(--ink-2); max-width: 48ch; }

.post__badge {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  background: rgba(244, 239, 230, 0.92);
  color: var(--ink);
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
}

.blog-archive__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding-top: clamp(0.5rem, 1vw, 1rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.blog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.blog-filter button {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.blog-filter button:hover { border-color: var(--ink); }
.blog-filter button.is-active { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.post {
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.post.is-hidden { display: none; }
.post__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.post__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover .post__cover img { transform: scale(1.05); }
.post__meta { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.post__date {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--moss-2);
}
.post__title {
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  font-weight: 500;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  line-height: 1.22;
}
.post__excerpt { font-size: 0.92rem; font-weight: 300; color: var(--ink-2); line-height: 1.5; }
.post__cta {
  margin-top: auto;
  padding-top: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; font-weight: 500;
}
.post__cta svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.post:hover .post__cta svg, .blog-hero:hover .post__cta svg { transform: translateX(4px); }

@media (max-width: 1020px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .blog-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ─────────────  FAQ  ───────────── */
.faq-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.faq-nav a {
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  /* stand auf 39px — knapp unter der Tippgrenze */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.faq-nav a:hover { background: var(--ui-dark); color: var(--paper); border-color: var(--ui-dark); }

.faq-group {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) 2fr;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.faq-group__head { align-self: start; }
.faq-group__title {
  font-size: var(--fs-h3);
  margin-top: 0.9rem;
  letter-spacing: calc(-0.03em + var(--tsh, 0em));
}
.faq-group__lede { font-weight: 300; color: var(--ink-2); font-size: 0.95rem; margin-top: 0.7rem; max-width: 30ch; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.15rem;
  align-items: center;
  padding: 1.2rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__num {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--moss-2);
}
.faq-item__q {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  line-height: 1.25;
  transition: color .3s var(--ease);
}
.faq-item summary:hover .faq-item__q { color: var(--moss-2); }
.faq-item__icon {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.faq-item__icon svg { width: 14px; height: 14px; display: block; }
.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
  background: var(--ui-dark);
  color: var(--paper);
  border-color: var(--ui-dark);
}
.faq-item__a {
  padding: 0 3rem 1.5rem 2.45rem;
  max-width: 66ch;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.6;
}
.faq-item__a p + p { margin-top: 0.8rem; }
.faq-item__a a { text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--ease); }
.faq-item__a a:hover { color: var(--moss-2); }

@media (max-width: 860px) {
  .faq-group { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq-item__a { padding-right: 1rem; }
}

/* ─────────────  TWEAKS — globale Typo-Regler (Panel: tweaks-app.jsx)  ───────────── */
/* Tweaks: Editorial-Typografie (Playfair) braucht weniger negatives Tracking */
html[data-type="editorial"] .display,
html[data-type="editorial"] .section-head__title,
html[data-type="editorial"] h2,
html[data-type="editorial"] h3 {
  letter-spacing: calc(-0.015em + var(--tsh, 0em));
  font-weight: calc(400 + var(--twh, 0));
}
/* Tweaks: Kartentitel ohne eigenes Tracking folgen dem Headline-Regler */
.teaser__title { letter-spacing: var(--tsh, 0em); }
/* Tweaks: relative Gewichts-Verschiebung pro Textebene */
.section-head__title, .manifest__head, h2,
.projects-stack__title, .proj-feature__title, .historie-rail__title,
.feat__h, .journey__title, .value__slogan {
  font-weight: calc(400 + var(--twh, 0));
}
.display, h3, h4, .teaser__title, .svc-row__title, .tool__title,
.page-hero h1, .ms__head, .issue__title, .dropdown__title {
  font-weight: calc(400 + var(--twh, 0));
}
.eyebrow, .section-head__label, .manifest__label, .crumbs {
  font-weight: calc(400 + var(--twl, 0));
}
body {
  font-size: var(--tw-body-fs, 17px);
  font-weight: calc(400 + var(--twb, 0));
  letter-spacing: var(--tsb, normal);
}


/* Nummerierungen ersetzt durch Themen-Labels */
.faq-item summary { grid-template-columns: 1fr auto; }
.teaser__num { font-style: normal; font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; }

/* ─────────────  LEISTUNGEN SHOWCASE (Home) — Liste + wechselndes Bild  ───────────── */
.lshow {
  max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.4rem, 4.5vw, 5rem);
  align-items: stretch;
}
.lshow__list { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.lshow__row {
  display: grid;
  grid-template-columns: clamp(5.6rem, 7vw, 7.2rem) 1fr auto;
  column-gap: clamp(1rem, 2vw, 1.8rem);
  align-items: baseline;
  padding: 1.05rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--paper-3);
  text-decoration: none; color: inherit;
  transition: background .3s var(--ease);
}
.lshow__row:hover, .lshow__row.is-active { background: var(--paper); }
.lshow__kicker {
  font-family: var(--f-mono); font-size: var(--fs-meta);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-2);
}
.lshow__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  letter-spacing: calc(-0.025em + var(--tsh, 0em));
  line-height: 1.08;
}
.lshow__arrow {
  font-family: var(--f-mono); color: var(--accent-2);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lshow__row:hover .lshow__arrow, .lshow__row.is-active .lshow__arrow { opacity: 1; transform: none; }
.lshow__desc {
  grid-column: 2 / 4;
  max-width: 46ch;
  font-size: 0.92rem; font-weight: 300; color: var(--ink-2); line-height: 1.5;
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .5s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease);
}
.lshow__row.is-active .lshow__desc { max-height: 4.6em; opacity: 1; margin-top: 0.35rem; }
.lshow__all {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.6rem; padding-left: 0.5rem;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.lshow__all:hover { color: var(--accent-2); }
.lshow__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  min-height: clamp(24rem, 40vw, 38rem);
}
.lshow__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity .65s var(--ease), transform 1.4s var(--ease);
}
.lshow__media img.is-on { opacity: 1; transform: scale(1); }
.lshow__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.42));
}
.lshow__media-tag {
  position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 2;
  font-family: var(--f-mono); font-size: var(--fs-meta);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
@media (max-width: 980px) {
  .lshow { grid-template-columns: 1fr; }
  .lshow__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}


/* ─────────────  BLOG POST (Artikel-Unterseiten)  ─────────────
   Editoriales Leselayout: Masthead, Lesefortschritt, Sticky-Inhalts-
   verzeichnis, Prosa-Spalte mit Zitaten, Merkkästen und Bildern. */

.readbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; background: rgba(22,24,20,0.06); }
.readbar__fill { height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

.pmast { background: var(--paper); padding: clamp(7.5rem, 11vw, 10.5rem) var(--pad-x) 0; }
.pmast__inner { max-width: 1240px; margin: 0 auto; }
.pmast .crumbs { color: var(--ink-2); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.pmast .crumbs a { color: var(--ink-2); }
.pmast .crumbs a:hover { color: var(--ink); }
.pmast .crumbs__current { color: var(--ink); }
.pmast__kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem;
  font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2);
  margin-bottom: 1.1rem;
}
.pmast__cat {
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); letter-spacing: 0.01em;
}
.pmast__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.pmast__title {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: calc(400 + var(--twh, 0));
  letter-spacing: calc(-0.04em + var(--tsh, 0em));
  line-height: 1.04;
  text-wrap: pretty;
}
.pmast__title em { font-style: italic; color: var(--sand); }
.pmast__lede {
  margin-top: 1.3rem; max-width: 58ch;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 300;
  line-height: 1.6; color: var(--ink-2); text-wrap: pretty;
}
.pmast__byline {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.pmast__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.pmast__who { display: flex; flex-direction: column; line-height: 1.3; }
.pmast__who b { font-weight: 500; font-size: 0.95rem; }
.pmast__who span { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2); }
.pmast__cover {
  max-width: 1240px; margin: clamp(2rem, 3.5vw, 3rem) auto 0;
}
.pmast__cover .pmast__frame {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card);
  aspect-ratio: 21 / 9;
}
.pmast__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmast__cover figcaption {
  font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2);
  margin-top: 0.8rem; max-width: 60ch;
}

/* share buttons */
.share { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.share__label { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2); margin-right: 0.3rem; }
.share button, .share a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 36px; min-width: 36px; padding: 0 0.7rem;
  font: inherit; font-size: 0.8rem; font-family: var(--f-mono);
  color: var(--ink-2); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.share button:hover, .share a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.share svg { width: 15px; height: 15px; }
.share button.is-done { background: var(--gruen); border-color: var(--gruen); color: var(--ink); }

/* article grid */
.article {
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad-x) clamp(3rem, 6vw, 5rem);
  background: var(--paper);
}
.article__inner {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.article__aside { position: sticky; top: calc(var(--header-h, 68px) + 2rem); display: grid; gap: 1.6rem; }
.toc { display: grid; gap: 0.1rem; }
.toc__head {
  font-family: var(--f-mono); font-size: var(--fs-label); color: var(--ink-2);
  padding-bottom: 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line);
}
.toc a {
  font-size: 0.88rem; font-weight: 300; color: var(--ink-2); line-height: 1.35;
  padding: 0.5rem 0 0.5rem 0.85rem; border-left: 1px solid var(--line);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.toc a:hover { color: var(--ink); border-color: var(--ink-2); }
.toc a.is-current { color: var(--ink); font-weight: 500; border-color: var(--accent); }
.aside-card {
  background: var(--paper-3); border-radius: var(--r-md);
  padding: 1.2rem 1.2rem 1.3rem; display: grid; gap: 0.6rem;
}
.aside-card__label { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2); }
.aside-card b { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.2; }
.aside-card p { font-size: 0.85rem; font-weight: 300; color: var(--ink-2); line-height: 1.5; }
.aside-card a {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem;
  font-size: 0.86rem; font-weight: 500; color: var(--ink);
}
.aside-card a svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.aside-card a:hover svg { transform: translateX(3px); }

/* prose */
.prose { max-width: none; }
.prose > * + * { margin-top: 1.15rem; }
.prose p { font-size: 1.05rem; font-weight: 300; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.prose p strong { font-weight: 600; color: var(--ink); }
.prose p em { font-style: italic; color: var(--ink); }
.prose > p:first-child { font-size: 1.2rem; line-height: 1.65; color: var(--ink); }
.prose h2 {
  font-family: var(--f-display); font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: calc(400 + var(--twh, 0)); letter-spacing: calc(-0.03em + var(--tsh, 0em));
  line-height: 1.12; color: var(--ink);
  margin-top: clamp(2.6rem, 4.5vw, 3.6rem); scroll-margin-top: calc(var(--header-h, 68px) + 2rem);
}
.prose h2 em { font-style: italic; color: var(--sand); }
.prose h3 {
  font-family: var(--f-display); font-size: 1.18rem; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink); margin-top: 2rem;
}
.prose ul, .prose ol { display: grid; gap: 0.6rem; padding-left: 0; list-style: none; }
.prose li { font-size: 1.02rem; font-weight: 300; line-height: 1.65; color: var(--ink-2); padding-left: 1.5rem; position: relative; }
.prose ul li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.65rem;
  width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg);
}
.prose ol { counter-reset: pli; }
.prose ol li { padding-left: 2rem; counter-increment: pli; }
.prose ol li::before {
  content: counter(pli, decimal-leading-zero); position: absolute; left: 0; top: 0.1rem;
  font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--moss-2);
}
.prose li strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--ease); }
.prose a:hover { color: var(--accent-2); }

.prose figure { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.prose figure img { width: 100%; display: block; border-radius: var(--r-md); aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow-card); }
.prose figcaption { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2); margin-top: 0.7rem; line-height: 1.5; }

.prose blockquote {
  margin-top: clamp(2rem, 3.5vw, 3rem); padding: 0 0 0 clamp(1.2rem, 2.5vw, 2rem);
  border-left: 2px solid var(--accent);
}
.prose blockquote p {
  font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 300;
  letter-spacing: -0.025em; line-height: 1.3; color: var(--ink);
}
.prose blockquote cite { display: block; margin-top: 0.9rem; font-style: normal; font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2); }

/* article foot */
.post-foot {
  max-width: 1120px; margin: 0 auto; padding: 0 var(--pad-x) clamp(3rem, 5vw, 4.5rem);
}
.post-foot__inner {
  border-top: 1px solid var(--line); padding-top: clamp(1.6rem, 3vw, 2.2rem);
  display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: center;
}
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tags span {
  font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2);
  padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.author-card {
  max-width: 1120px; margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding: 0 var(--pad-x);
}
.author-card__inner {
  background: var(--paper-3); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 2.5vw, 1.8rem); align-items: center;
}
.author-card img { width: clamp(70px, 8vw, 96px); height: clamp(70px, 8vw, 96px); border-radius: 50%; object-fit: cover; }
.author-card__label { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2); }
.author-card h3 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 400; letter-spacing: -0.025em; margin: 0.35rem 0 0.55rem; }
.author-card p { font-size: 0.94rem; font-weight: 300; color: var(--ink-2); line-height: 1.6; max-width: 62ch; }

/* prev / next */
.post-pager {
  max-width: 1500px; margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--section-gap);
}
.post-pager__link {
  display: grid; gap: 0.4rem; align-content: center;
  min-height: 150px; padding: clamp(1.3rem, 2.5vw, 1.9rem);
  background: var(--paper-2); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line);
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-pager__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.post-pager__link--next { text-align: right; }
.post-pager__label { font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--ink-2); }
.post-pager__title {
  font-family: var(--f-display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 400;
  letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); max-width: 34ch;
}
.post-pager__link--next .post-pager__title { margin-left: auto; }
.post-pager__empty { opacity: 0.45; pointer-events: none; }

/* CMS-Hinweis: .pmast = Kopfbereich (Kategorie, Titel, Lede, Autor, Titelbild),
   .prose = ein Richtext-Feld, .pgal = optionale Bildergalerie (Repeater). */
.prose > .aside-card { max-width: 460px; margin-top: clamp(2.2rem, 4vw, 3rem); }
@media (max-width: 960px) {
  .article { padding-top: clamp(2.2rem, 5vw, 3.5rem); }
}
@media (max-width: 700px) {
  .article__aside { grid-template-columns: 1fr; }
  .compare, .post-pager, .post-foot__inner { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr; gap: 0.5rem; }
  .author-card__inner { grid-template-columns: 1fr; text-align: left; }
  .pmast__cover .pmast__frame { aspect-ratio: 4 / 3; }
  .share { margin-left: 0; width: 100%; }
}


/* ─────────────  AKZENTSCHRIFT · grüne Typo = Playfair Display  ─────────────
   Alle Textelemente in Akzentgrün (accent / sand / moss) laufen als Serif-Akzent. */
.display em { font-family: var(--f-accent); text-transform: uppercase; }
h1 em, h2 em, h3 em { font-family: var(--f-accent); text-transform: uppercase; }
.dropdown__num { font-family: var(--f-accent); text-transform: uppercase; }
.marquee__track span[aria-hidden="true"] { font-family: var(--f-accent); text-transform: uppercase; }
.section-head__title em, .manifest__head em { font-family: var(--f-accent); text-transform: uppercase; }
.manifest__stats b { font-family: var(--f-accent); text-transform: uppercase; }
.service--dark .service__no { font-family: var(--f-accent); text-transform: uppercase; }
.service__no { font-family: var(--f-accent); text-transform: uppercase; }
.projekte .section-head__label { font-family: var(--f-accent); text-transform: uppercase; }
.projekte .section-head__title em { font-family: var(--f-accent); text-transform: uppercase; }
.project__index { font-family: var(--f-accent); text-transform: uppercase; }
.project__loc { font-family: var(--f-accent); text-transform: uppercase; }
.historie__title em { font-family: var(--f-accent); text-transform: uppercase; }
.tl__year { font-family: var(--f-accent); text-transform: uppercase; }
.kurzbewerbung-hint { font-family: var(--f-accent); text-transform: uppercase; }
.footer h5 { font-family: var(--f-accent); text-transform: uppercase; }
.projects-stack__title em { font-family: var(--f-accent); text-transform: uppercase; }
.proj-feature__loc { font-family: var(--f-accent); text-transform: uppercase; }
.svc-row__no { font-family: var(--f-accent); text-transform: uppercase; }
.historie-rail__title em { font-family: var(--f-accent); text-transform: uppercase; }
.ms__year-tag { font-family: var(--f-accent); text-transform: uppercase; }
.ms__year-tag--gold { font-family: var(--f-accent); text-transform: uppercase; }
.ms__head em { font-family: var(--f-accent); text-transform: uppercase; }
.ms__facts li b { font-family: var(--f-accent); text-transform: uppercase; }
.page-hero h1 em { font-family: var(--f-accent); text-transform: uppercase; }
.cta-strip h2 em { font-family: var(--f-accent); text-transform: uppercase; }
.feat__h em { font-family: var(--f-accent); text-transform: uppercase; }
.feat__bullets li span { font-family: var(--f-accent); text-transform: uppercase; }
.minical__d--today { font-family: var(--f-accent); text-transform: uppercase; }
.journey__title em { font-family: var(--f-accent); text-transform: uppercase; }
.journey__no { font-family: var(--f-accent); text-transform: uppercase; }
.teasers__head h2 em { font-family: var(--f-accent); text-transform: uppercase; }
.teaser__num { font-family: var(--f-accent); text-transform: uppercase; }
.value__slogan em { font-family: var(--f-accent); text-transform: uppercase; }
.value__num { font-family: var(--f-accent); text-transform: uppercase; }
.galanet-benefits__head h2 em { font-family: var(--f-accent); text-transform: uppercase; }
.benefit__num { font-family: var(--f-accent); text-transform: uppercase; }
.galanet-film__head h2 em { font-family: var(--f-accent); text-transform: uppercase; }
.benefit-tile__num { font-family: var(--f-accent); text-transform: uppercase; }
.positions__head h2 em { font-family: var(--f-accent); text-transform: uppercase; }
.position__no { font-family: var(--f-accent); text-transform: uppercase; }
.info-item__label { font-family: var(--f-accent); text-transform: uppercase; }
.info-item__no { font-family: var(--f-accent); text-transform: uppercase; }
.pers__role { font-family: var(--f-accent); text-transform: uppercase; }
.tool__tag { font-family: var(--f-accent); text-transform: uppercase; }
.tool-row__num { font-family: var(--f-accent); text-transform: uppercase; }
.map__pin span { font-family: var(--f-accent); text-transform: uppercase; }
.issue-hero__edition { font-family: var(--f-accent); text-transform: uppercase; }
.issue-hero__title em { font-family: var(--f-accent); text-transform: uppercase; }
.issue__date { font-family: var(--f-accent); text-transform: uppercase; }
.pv--b .pv__card-num { font-family: var(--f-accent); text-transform: uppercase; }
.lcard__no { font-family: var(--f-accent); text-transform: uppercase; }
.ljump a span { font-family: var(--f-accent); text-transform: uppercase; }
.lprocess__label { font-family: var(--f-accent); text-transform: uppercase; }
.lprocess__steps li::before { font-family: var(--f-accent); text-transform: uppercase; }
.intro-reveal__copy span.is-accent { font-family: var(--f-accent); text-transform: uppercase; }
.pgal__head h2 em { font-family: var(--f-accent); text-transform: uppercase; }
.pgal-fig figcaption .pgal-fig__no { font-family: var(--f-accent); text-transform: uppercase; }
.proj-pager__label { font-family: var(--f-accent); text-transform: uppercase; }
.post__date { font-family: var(--f-accent); text-transform: uppercase; }
.faq-item__num { font-family: var(--f-accent); text-transform: uppercase; }
.lshow__kicker { font-family: var(--f-accent); text-transform: uppercase; }
.lshow__arrow { font-family: var(--f-accent); text-transform: uppercase; }
.pmast__title em { font-family: var(--f-accent); text-transform: uppercase; }
.prose h2 em { font-family: var(--f-accent); text-transform: uppercase; }
.prose ol li::before { font-family: var(--f-accent); text-transform: uppercase; }

/* Akzent-Hervorhebungen in Überschriften laufen aufrecht (nicht kursiv) */
.display em,
h1 em, h2 em, h3 em,
.section-head__title em, .manifest__head em,
.projekte .section-head__title em,
.historie__title em, .historie-rail__title em,
.projects-stack__title em, .ms__head em,
.page-hero h1 em, .cta-strip h2 em, .feat__h em,
.journey__title em, .teasers__head h2 em, .value__slogan em,
.galanet-benefits__head h2 em, .galanet-film__head h2 em,
.positions__head h2 em, .issue-hero__title em,
.pgal__head h2 em, .pmast__title em, .prose h2 em,
.intro-reveal__copy em, .werte__head h2 em {
  font-style: normal;
}


/* ── Keine grüne Schrift in den grauen Banner-Boxen (CTA-Strip, Footer, Marquee, Projekt-Pager) ── */
.cta-strip em,
.cta-strip h2 em,
.footer h5,
.proj-pager__link em,
.marquee__track span[aria-hidden="true"] { color: var(--paper); }
.footer__nav a:hover,
.footer__contact a:hover,
.footer__social a:hover,
.footer__base a:hover { color: var(--paper); }

/* ═══════════════  ÄNDERUNGEN AUS DEM KUNDEN-PDF (Textrunde)  ═══════════════ */

/* ── Startseite · Über uns: Regionszeile unter der Überschrift ───────────── */
.feat__region {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 1.1rem;
  line-height: 1.5;
}

/* ── Unternehmen · Werte  ─────────────────────────────────────────────────
   Bewusst NICHT abgestuft (kein Treppen-Versatz wie bei .values):
   fünf gleichwertige Spalten auf einer Grundlinie, getrennt durch feine
   Linien statt Karten.                                                     */
.werte {
  padding: var(--section-pad-y) var(--pad-x);
  background: var(--paper);
}
.werte__head {
  max-width: 1500px;
  margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
}
.werte__head h2 {
  font-size: var(--fs-h2);
  font-weight: calc(400 + var(--twh, 0));
  line-height: 1;
  margin-top: 1rem;
  max-width: 22ch;
}
.werte__head h2 em { color: var(--accent); }
.werte__grid {
  list-style: none;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.wert {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.6rem, 2.4vw, 2.4rem) clamp(1.1rem, 1.8vw, 1.8rem);
  border-right: 1px solid var(--line);
}
.wert:last-child { border-right: none; }
.wert__no {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  color: var(--accent-2);
}
.wert__title {
  font-family: var(--f-display);
  font-weight: calc(400 + var(--twh, 0));
  font-size: clamp(1.15rem, 1.45vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: calc(-0.02em + var(--tsh, 0em));
  text-wrap: balance;
}
.wert__text {
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (max-width: 1100px) {
  .werte__grid { grid-template-columns: repeat(2, 1fr); }
  .wert { border-bottom: 1px solid var(--line); }
  .wert:nth-child(2n) { border-right: none; }
  .wert:last-child { border-bottom: none; }
}
@media (max-width: 620px) {
  .werte__grid { grid-template-columns: 1fr; }
  .wert { border-right: none; }
}

/* ── Karriere · Stimmen aus dem Team ─────────────────────────────────────
   Breite Zitat-Karte: Das Kollegen-Foto füllt die ganze Kachel, ein Verlauf
   von links dunkelt die Zitatspalte ab. Mehrere Stimmen stapeln sich.      */
.voices {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
}
.voices--single { grid-template-columns: 1fr; }

.voice-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 30vw, 460px);
  padding: clamp(1.6rem, 3.2vw, 3.2rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-card);
}
.voice-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 38%;
  transition: transform 1.4s var(--ease);
}
.voice-card:hover .voice-card__img { transform: scale(1.04); }
.voice-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(14, 16, 12, 0.94) 0%,
    rgba(14, 16, 12, 0.88) 24%,
    rgba(14, 16, 12, 0.60) 44%,
    rgba(14, 16, 12, 0.18) 66%,
    rgba(14, 16, 12, 0.04) 100%);
}
.voice-card__body {
  position: relative;
  max-width: 46ch;
  color: var(--paper);
}
.voice-card__mark {
  display: block;
  font-family: var(--f-accent);
  font-size: 2.6rem;
  line-height: 0.5;
  color: rgba(244, 239, 230, 0.42);
  margin-bottom: 1.2rem;
}
.voice-card blockquote { margin: 0; }
.voice-card blockquote p {
  font-family: var(--f-accent);
  font-style: italic;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.62;
  color: rgba(244, 239, 230, 0.94);
}
.voice-card__who {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
}
.voice-card__who b {
  font-family: var(--f-display);
  font-weight: calc(500 + var(--twh, 0));
  font-size: 0.98rem; line-height: 1.2;
  color: var(--paper);
}
.voice-card__who .vrule { width: 26px; opacity: 0.45; }
.voice-card__role {
  font-family: var(--f-accent);
  font-size: 0.92rem;
  color: rgba(244, 239, 230, 0.66);
}

/* Schmale Viewports: Neben dem Zitat bleibt zu wenig Bild übrig — deshalb
   steht das Foto als Band oben und das Zitat darunter auf dunklem Grund.   */
@media (max-width: 860px) {
  .voice-card { display: block; min-height: 0; padding: 0; }
  .voice-card__img {
    position: static;
    height: clamp(200px, 52vw, 300px);
    object-position: 62% 30%;
  }
  .voice-card__veil { display: none; }
  .voice-card__body {
    max-width: none;
    padding: clamp(1.5rem, 6vw, 2.2rem);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ÜBERARBEITUNG
   Gebündelt am Dateiende, damit die Regeln die verstreuten Breakpoints
   weiter oben sicher überschreiben. Reihenfolge: Kopfbereich & Schublade,
   danach die seitenweisen Korrekturen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────  KOPFBEREICH — kompakter auf kleinen Geräten  ───────────── */
@media (max-width: 900px) {
  .site-header {
    gap: 1rem;
    /* Das Logo klebte 15px unter der Oberkante — auf Geräten mit Kerbe zu eng.
       Nur der ungeheftete Zustand wird höher; die angeheftete Leiste bleibt
       kompakt, sonst stimmt der Versatz der Sprungmarken nicht mehr. */
    padding: calc(1.5rem + env(safe-area-inset-top, 0px)) var(--pad-x) 0.85rem;
  }
  .site-header.is-stuck {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .brand__logo { height: 42px; }
  .brand__logo--footer { height: 92px; }
}

/* ─────────────  MOBILMENÜ — Schublade von rechts  ─────────────
   Vorher hat .menu-toggle zwar „is-open" gesetzt, es gab dafür aber keine
   einzige Regel — das Menü blieb display:none und ließ sich nicht öffnen.
   Ebenso waren beide Handlungsaufrufe auf Mobil ersatzlos ausgeblendet;
   sie stehen jetzt unten in der Schublade. */
@media (max-width: 900px) {

  /* Die Schublade liegt über allem. Der Weichzeichner des angehefteten
     Kopfbereichs würde sonst einen eigenen Bezugsrahmen aufspannen und
     „position: fixed" der Schublade auf den Kopfbereich einsperren. */
  body.nav-open .site-header {
    z-index: 60;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
    color: var(--ink);
    border-bottom-color: var(--line);
  }
  body.nav-open .site-header .brand__logo { filter: none; }
  /* Bei offenem Menü bildet die Marke zusammen mit dem Kreuz die Kopfzeile
     der Schublade. Die zweite Auswahl gilt der Startseite: dort blendet
     assets/css/home.css die Marke aus, solange der Kopfbereich nicht
     angeheftet ist — und diese Datei wird nach dieser hier geladen. */
  body.nav-open .site-header .brand,
  body[data-page="home"].nav-open .site-header:not(.is-stuck) .brand {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Die Schublade ist ein Kind des Kopfbereichs und malt deshalb immer
       über dessen Hintergrund — ein höherer Wert am Kopfbereich hilft
       nicht. Die Marke muss selbst über die Schublade (60) gehoben werden. */
    position: relative;
    z-index: 63;
  }
  /* Das fliegende Hero-Signet würde sonst über der Schublade schweben */
  body.nav-open .hero__logo { opacity: 0 !important; }
  body.nav-open { overflow: hidden; }

  /* Blende hinter der Schublade */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 58;
    background: rgba(22, 24, 20, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .38s var(--ease), visibility .38s var(--ease);
    border: 0;
  }
  body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu-toggle {
    display: flex;
    position: relative;
    z-index: 62;
    width: 44px;
    height: 44px;
    gap: 6px;
  }
  .menu-toggle span {
    width: 24px;
    height: 1.5px;
    border-radius: 2px;
    transition: transform .34s var(--ease), opacity .2s var(--ease);
  }
  /* Balken werden zum Kreuz */
  body.nav-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  body.nav-open .menu-toggle span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

  .primary-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* volle Breite statt Schublade am Rand */
    left: 0;
    width: 100%;
    z-index: 60;
    background: var(--paper);
    color: var(--ink);
    /* unten Platz für die fest stehende Knopfleiste, sonst rutscht der
       letzte Menüpunkt darunter */
    padding: calc(5.3rem + env(safe-area-inset-top, 0px)) 0 calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .42s var(--ease), visibility .42s var(--ease);
    font-size: 1rem;
    text-align: left;
    justify-content: flex-start;
  }
  .primary-nav.is-open {
    transform: none;
    visibility: visible;
  }

  /* Hauptpunkte als großzügige Zeilen */
  .primary-nav > a,
  .primary-nav > .has-dropdown {
    display: block;
    border-bottom: 1px solid var(--line);
  }
  /* Trennlinie zur Kopfzeile. Der Rahmen des Kopfbereichs taugt dafür nicht:
     die Schublade ist sein Kind und malt darüber. */
  .primary-nav > a:first-child,
  .primary-nav > .has-dropdown:first-child {
    border-top: 1px solid var(--line);
  }
  .primary-nav > a,
  .primary-nav > .has-dropdown > a {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0.85rem var(--pad-x);
    font-family: var(--f-display);
    font-size: 1.3rem;
    font-weight: calc(400 + var(--twh, 0));
    letter-spacing: calc(-0.02em + var(--tsh, 0em));
    color: var(--ink);
  }
  .primary-nav > .has-dropdown {
    position: relative;
  }
  .primary-nav > .has-dropdown > a {
    padding-right: 4.4rem;
  }
  /* Der Pfeil im Link ist eine reine Desktop-Andeutung — auf Mobil
     übernimmt die Schaltfläche daneben das Aufklappen. */
  .primary-nav .nav-caret { display: none; }
  .primary-nav > a::after,
  .primary-nav > .has-dropdown > a::after { display: none; }

  .primary-nav > .has-dropdown > .nav-sub {
    position: absolute;
    top: 0;
    right: calc(var(--pad-x) - 0.6rem);
    width: 56px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--ink-2);
    cursor: pointer;
  }
  .primary-nav > .has-dropdown > .nav-sub svg {
    width: 16px;
    height: 16px;
    transition: transform .32s var(--ease);
  }
  .has-dropdown.is-expanded > .nav-sub svg { transform: rotate(180deg); }

  /* Untermenü als Aufklapper */
  .primary-nav .dropdown {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--paper-2);
    grid-template-columns: none;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .42s var(--ease);
  }
  .has-dropdown.is-expanded > .dropdown { max-height: 200vh; }
  .primary-nav .dropdown::before { display: none; }

  .primary-nav .dropdown a,
  .primary-nav .dropdown--leistungen > a.dd-row,
  .primary-nav .dropdown--unternehmen .dd-nav a {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    min-height: 50px;
    margin: 0;
    padding: 0.7rem var(--pad-x);
    border-radius: 0;
    border-bottom: 1px solid rgba(22, 24, 20, 0.07);
    grid-template-columns: none;
    gap: 0;
  }
  .primary-nav .dropdown .dd-row__text { min-width: 0; }
  .primary-nav .dropdown a:last-child { border-bottom: 0; }
  .primary-nav .dropdown__title { font-size: 1rem; }
  /* Nummer und Beschreibung stehen im engen Menü nur im Weg */
  .primary-nav .dropdown__num,
  .primary-nav .dropdown__tag { display: none; }

  /* Die große Bildvorschau ist fürs Mobilmenü zu schwer */
  .primary-nav .dd-preview { display: none; }

  /* ── Aus dem Blog: der neueste Beitrag als Zeile ──
     Vorher war der ganze Kachelblock ausgeblendet — die Überschrift
     "Aus dem Blog" stand dadurch über einer leeren Fläche. Zwei
     nebeneinanderliegende Kacheln sind für die Schublade zu breit,
     deshalb bleibt es beim neuesten Beitrag; der zweite tritt zurück.
     "Alle Beiträge →" in der Überschriftszeile führt weiter zum Blog. */
  .primary-nav .dd-latest__cards { display: block; }
  .primary-nav .dd-latest__cards .dd-card + .dd-card { display: none; }

  .primary-nav .dropdown .dd-card {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 0 0.9rem;
    padding: 0.75rem var(--pad-x);
  }
  .primary-nav .dropdown .dd-card figure {
    /* Das Bild steht neben beiden Textzeilen, nicht nur neben der ersten */
    grid-row: 1 / span 2;
    /* --r-md wäre bei 84px Breite fast ein Kreis; 0.7rem ist die
       maßstäbliche Entsprechung zur großen Kachel auf dem Desktop. */
    border-radius: 0.7rem;
  }
  .primary-nav .dropdown .dd-card img { aspect-ratio: 4 / 3; }
  .primary-nav .dropdown .dd-card b {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
  }
  .primary-nav .dropdown .dd-card .dropdown__num {
    display: block;
    margin: 0.2rem 0 0;
  }

  .primary-nav .dd-nav,
  .primary-nav .dd-latest { display: block; }
  .primary-nav .dd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem var(--pad-x) 0.5rem;
    font-family: var(--f-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone);
  }
  .primary-nav .dd-head a {
    /* stand auf 19px — als einziges Ziel im Menü unter der Tippgrenze.
       Die Zeile bleibt optisch gleich hoch, der Griff wächst nach oben
       und unten über den negativen Rand hinaus. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -0.7rem;
    padding: 0;
    border: 0;
    font-family: var(--f-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.08em;
    color: var(--accent);
  }

  .primary-nav .dropdown__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(22, 24, 20, 0.07);
  }
  .primary-nav .dropdown__overview,
  .primary-nav .dropdown__ext {
    justify-content: flex-start;
    min-height: 50px;
    padding: 0.7rem var(--pad-x);
    border: 0;
    border-radius: 0;
    white-space: normal;
    font-size: 0.9rem;
    color: var(--ink-2);
  }
  .primary-nav .dropdown__overview { border-bottom: 1px solid rgba(22, 24, 20, 0.07); }

  /* Die Handlungsaufrufe stehen jetzt als .nav-foot im Fluss der Schublade.
     Die frühere festgenagelte Leiste am unteren Rand entfällt. */
  .header__actions { display: none; }

  /* ── Fuß der Schublade: Handlungsaufrufe, dann Kontakt ── */
  .nav-foot {
    display: block;
    margin-top: 1.6rem;
    padding: 0 var(--pad-x);
  }
  .nav-foot__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .nav-foot__cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1.2rem;
    font-size: 0.98rem;
  }
  /* In der hellen Schublade brauchen die Knöpfe den dunklen Zustand,
     unabhängig davon ob der Kopfbereich gerade angeheftet ist. */
  .nav-foot__cta--secondary {
    background: transparent;
    color: var(--ink);
    border-color: rgba(22, 24, 20, 0.3);
  }
  .nav-foot__contact {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
  }
  .nav-foot__line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    color: var(--ink-2);
    font-size: 1rem;
    transition: color .25s var(--ease);
  }
  .nav-foot__line svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent); }
  .nav-foot__line span { overflow-wrap: anywhere; }
  .nav-foot__line:hover { color: var(--ink); }

  /* Schublade zu = nichts davon ist per Tastatur erreichbar */
  .primary-nav:not(.is-open) a,
  .primary-nav:not(.is-open) button { visibility: hidden; }
}


/* ─────────────  STARTSEITE — Leistungen-Liste  ─────────────
   Die Zeile stand als dreispaltiges Raster mit fester Kicker-Spalte; bei
   390px ergab das 442px Breite und der rechte Rand wurde abgeschnitten.
   Auf Mobil steht der Kicker über dem Titel. */
@media (max-width: 700px) {
  .lshow__row {
    grid-template-columns: 1fr auto;
    row-gap: 0.15rem;
    column-gap: 0.8rem;
    padding: 1rem 1.1rem;
  }
  .lshow__kicker { grid-column: 1 / -1; grid-row: 1; }
  .lshow__title  { grid-column: 1; grid-row: 2; min-width: 0; overflow-wrap: break-word; }
  .lshow__arrow  { grid-column: 2; grid-row: 2; opacity: 1; transform: none; }
  .lshow__desc   { grid-column: 1 / -1; grid-row: 3; max-width: none; }
  .lshow__all    { min-height: 44px; align-items: center; margin-top: 1.1rem; }
}

/* ─────────────  LEISTUNGEN — Zeilen der Übersicht  ─────────────
   „Beregnungsanlagen“ und „Grundstücksentwässerung“ standen über die
   Textspalte hinaus. Unter 600px trägt das Vorschaubild nichts mehr bei. */
@media (max-width: 600px) {
  .lservice-row__thumb { display: none; }
  .lservice-row__center { gap: 0; min-width: 0; }
  .lservice-row__meta { min-width: 0; }
  .lservice-row__title {
    min-width: 0;
    hyphens: auto;
    overflow-wrap: break-word;
    font-size: clamp(1.15rem, 4.6vw, 1.35rem);
  }
  .lservice-row__toggle { min-height: 60px; }
}


/* ─────────────  ÜBER UNS · HISTORIE  ─────────────
   Auf Mobil lag die Jahreszahl-Kachel als 38%-Block über dem Foto, die
   Bilder sprangen je nach Seite links/rechts und die Ranke lief mitten
   durch den Text. Jetzt: Foto über volle Breite, Jahr als Eckabzeichen,
   und links eine freie Spur, in der die Ranke von Knoten zu Knoten wächst. */
@media (max-width: 700px) {
  .historie-rail__sub { font-size: 1rem; }

  .ms {
    padding-left: 2.7rem;
    margin-bottom: clamp(3.4rem, 11vw, 5rem);
    gap: 1.4rem;
  }

  /* Foto füllt die Spalte — kein 78%-Ausschnitt mehr, keine Seitenwechsel */
  .ms__media { aspect-ratio: 3 / 2; max-width: none; }
  .ms__img--lead,
  .ms--right .ms__img--lead {
    inset: 0;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* Jahr als Abzeichen in der Bildecke statt als überlagernder Block */
  .ms__year-tile,
  .ms--right .ms__year-tile {
    left: auto;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    padding: 0.5rem 1.05rem;
    border-radius: var(--r-md) 0 var(--r-lg) 0;
    box-shadow: none;
  }
  .ms__year-tile span { font-size: 1.25rem; }

  .ms__body { padding: 0; }
  .ms__head { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .ms__text { font-size: 1rem; }
  .ms__quote { font-size: 1rem; }

  /* Der Knoten sitzt in der freien Spur links, nicht im Textfluss */
  .ms--left .ms__dot,
  .ms--right .ms__dot {
    position: absolute;
    left: -2.7rem;
    right: auto;
    top: 0.45rem;
    display: block;
    margin: 0;
  }

  /* Die Blätter bräuchten Platz, den es neben dem Text nicht gibt —
     auf Mobil bleiben Trieb und Knoten, das Laub entfällt. */
  .vine-leaf .leaf-icon { display: none; }
  .vine-stem { stroke-width: 2.4; }

  .ms__facts { grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
}


/* ─────────────  LEISTUNGEN — Sprungleiste  ─────────────
   Sieben Chips brachen auf Mobil in vier Zeilen um; zusammen mit dem
   Kopfbereich blockierte die klebende Leiste ein Drittel des Bildschirms.
   Jetzt eine Zeile, seitlich schiebbar. */
@media (max-width: 700px) {
  .ljump {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.6rem var(--pad-x);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* Bildlaufleiste sichtbar lassen statt ausblenden — sie ist der Hinweis,
       dass seitlich mehr steht. Achtung: Auf iOS und auf macOS sind das
       Overlay-Leisten, die nur waehrend des Wischens erscheinen und keinen
       Layoutplatz belegen; dauerhaft sichtbar bekommt man sie nativ nicht.
       Fuer eine immer sichtbare Leiste braeuchte es eine eigene Anzeige. */
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 24, 20, 0.3) transparent;
    /* Der erste Chip klebte am linken Rand, obwohl padding-left gesetzt ist:
       scroll-snap richtet das Ziel an der Kante des Scrollbereichs aus und
       überspringt dabei den Innenabstand — der Browser sprang selbst dann
       auf scrollLeft 19 zurück, wenn man 0 setzte. scroll-padding verschiebt
       den Einrastpunkt um genau diesen Abstand, damit steht der Rand wieder. */
    scroll-padding-inline: var(--pad-x);
  }
  .ljump::-webkit-scrollbar { height: 4px; }
  .ljump::-webkit-scrollbar-track { background: transparent; }
  .ljump::-webkit-scrollbar-thumb {
    background: rgba(22, 24, 20, 0.3);
    border-radius: 2px;
  }

  .ljump a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    min-height: 44px;   /* war 40px — knapp unter der Tippgrenze */
    align-items: center;
  }
  .lgroup { scroll-margin-top: 128px; }
}


/* ─────────────  FORMULARE AUF MOBIL  ─────────────
   Zwei Dinge, die auf dem Telefon konkret weh tun:
   · Schriftgrößen unter 16px lassen iOS beim Antippen in das Feld
     hineinzoomen — danach steht die Seite verschoben.
   · Felder und Kalendertage unter 44px sind kaum zu treffen.          */
@media (max-width: 700px) {
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="date"],
  .field input[type="number"],
  .field select,
  .field textarea,
  .booking__fields input,
  .form input,
  .form select,
  .form textarea {
    font-size: 16px;
    min-height: 48px;
    padding: 0.8rem 1rem;
  }
  .field textarea,
  .form textarea { min-height: 120px; }

  /* Name und Telefon nebeneinander lassen bei 390px je 123px übrig */
  .booking__fields { grid-template-columns: 1fr; gap: 0.6rem; }
  .booking__fields .feld--voll { grid-column: 1; }

  /* Auswahlfelder brauchen eine antippbare Fläche, nicht nur den Punkt */
  .field--checks > label,
  .topic {
    min-height: 48px;
    align-items: center;
  }
  .field--checks input,
  .topic input[type="radio"],
  .topic input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  /* Der Textblock daneben muss schrumpfen dürfen, sonst drückt das längste
     Wort („Außerbetriebnahme") die Kachel über die Bildschirmbreite. */
  .booking { grid-template-columns: minmax(0, 1fr); }
  .topic > div { min-width: 0; }
  .topic h4, .topic span { overflow-wrap: break-word; hyphens: auto; }

  /* Kalender: 32px-Kreise sind zum Antippen zu klein. Die Tage bleiben
     quadratisch — die Breite kommt aus der Spalte, ein fester Mindestwert
     würde das Raster über die Karte hinausschieben. */
  /* Abschnitt, Formular und Karte polstern auf 390px zusammen 123px weg —
     die inneren beiden geben davon wieder etwas her, damit die Tage
     antippbar bleiben. */
  .booking { padding: 0.6rem; }
  .booking__cal { padding: 0.85rem 0.4rem; }
  .cal__grid { gap: 2px; }
  .cal__day { font-size: 0.95rem; position: relative; }
  /* Die Tage sind 39px breit — mehr gibt die Spalte auf 390px nicht her, ohne
     das Raster über die Karte zu schieben. Die Tippfläche wächst deshalb per
     Pseudo-Element in die 2px-Fuge hinein, ohne das Layout anzufassen. */
  .cal__day:not(.is-empty)::after {
    content: "";
    position: absolute;
    inset: -2px;
  }
  .cal__weekdays, .cal__grid { max-width: none; margin-inline: 0; }
  .cal-nav { width: 44px; height: 44px; }

  .form__submit,
  .booking__confirm { width: 100%; justify-content: center; min-height: 52px; }

  /* Einwilligung: ein 20px-Kästchen neben zweizeiligem Text ist kaum zu treffen */
  .checkbox-line {
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .checkbox-line input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    margin-top: 0.1rem;
  }
}


/* ─────────────  LANGE ÜBERSCHRIFTEN AUF SCHMALEN BILDSCHIRMEN  ─────────────
   Deutsche Komposita wie „Entscheidungshilfe" oder „Grundstücksentwässerung"
   passen in großer Displayschrift auf 390px in keine Zeile. Erst trennen,
   im Notfall umbrechen — sonst schiebt die Überschrift die Seite auf. */
@media (max-width: 700px) {
  h1, h2, h3, h4,
  .display,
  .pmast__title,
  .historie-rail__title,
  .lgroup__title,
  .section-head__title,
  .ms__head,
  .lshow__title,
  .lservice-row__title {
    overflow-wrap: break-word;
    hyphens: auto;
    /* Ohne Grenze trennte die Regel auch „Projek-te", „pro-fessioneller" und
       „GAR-TENBAU". Erst ab 16 Zeichen trennen — das trifft die gemeinten
       Komposita („Grundstücksentwässerung", „Beregnungsanlagen") und lässt
       normale Wörter in Ruhe. Wo der Browser die Grenze nicht kennt, bleibt
       es beim bisherigen Verhalten. */
    hyphenate-limit-chars: 16 6 5;
  }
}


/* ─────────────  FAQ  ─────────────
   Die Antwort war um die Breite der Nummernspalte eingerückt — auf 390px
   kostet das ein Achtel der Zeile, ohne dass die Nummer noch danebensteht. */
@media (max-width: 700px) {
  .faq-item__a { padding: 0 0 1.4rem 0; }
  .faq-item summary { padding: 1.05rem 0; min-height: 56px; gap: 0.9rem; }
  .faq-item__icon { width: 34px; height: 34px; }
}


/* ─────────────  FUSSBEREICH  ─────────────
   Zwei Spalten mit 3rem Abstand lassen bei 320px je ~117px übrig — die
   E-Mail-Adresse passt in keine davon. Kontakt und Marke stehen deshalb
   über die volle Breite, die Linkspalten rücken zusammen. */
@media (max-width: 700px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.2rem 1.4rem;
    margin-bottom: 2.2rem;
    padding-bottom: 2.2rem;
  }
  .footer__brand,
  .footer__contact { grid-column: 1 / -1; }
  /* Die Links waren 30px hoch, Impressum/Datenschutz sogar nur 19px — zu
     wenig zum sicheren Antippen. 44px Mindesthöhe, dafür rücken die Zeilen
     in Navigation und Sozialem enger zusammen, damit die Spalte nicht
     auseinanderfällt. */
  .footer__nav,
  .footer__social { gap: 0.1rem; }
  .footer__nav a,
  .footer__contact a,
  .footer__social a {
    overflow-wrap: anywhere;
    padding: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer__base a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer h5 { margin-bottom: 0.8rem; }

  /* Brotkrumen (20px) und die Kontaktzeilen in den Ansprechpartner-Karten
     (19px) waren die letzten Ziele deutlich unter der Tippgrenze. */
  .crumbs a,
  .pers__row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ─────────────  KARRIERE — Stellenzeilen  ─────────────
   „Landschaftsbauer/in" ist als kürzeste Zeile breiter als die halbe
   Spalte; ein reines 1fr schrumpft nicht unter diese Wortbreite und
   schiebt den Pfeil aus dem Bild. minmax(0,1fr) erlaubt das Schrumpfen. */
@media (max-width: 700px) {
  .position {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1.4rem 0.9rem;
  }
  .position:hover { padding-left: 1.1rem; }
  .position h3 { min-width: 0; }
  .position__arrow { flex: 0 0 auto; }
}


/* ─────────────  PROJEKTKACHELN — Lesbarkeit auf Mobil  ─────────────
   Die Verlaufsblende der Kachel arbeitet mit festen Prozentmarken (hell bei
   32 %, dunkel ab 62 %). Das passt zum querformatigen Desktop-Bild. Hochkant
   beginnt der Text je nach Textlänge 248 bis 530 px über der Unterkante —
   eine feste Marke trifft ihn nie, und weiße Schrift landete auf hellen
   Bildstellen (weiße Hausfassade, Kies).

   Darum trägt hier der Textblock seine Abdunklung selbst: Sie sitzt immer
   genau hinter dem Text, egal wie lang er ist. Die Kachelblende hellt
   entsprechend auf, damit vom Foto darüber mehr sichtbar bleibt. */
@media (max-width: 700px) {
  .proj-feature__body {
    background: linear-gradient(180deg,
      rgba(14, 15, 12, 0)    0%,
      rgba(14, 15, 12, 0.58) 16%,
      rgba(14, 15, 12, 0.80) 40%,
      rgba(14, 15, 12, 0.88) 100%);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  /* Unter dem Textblock liegen noch Abstand und Knopf (zusammen 75 px).
     Der Streifen bekommt denselben Grund, sonst reißt die Fläche unter
     dem letzten Textabsatz mitten im Bild ab. Darüber nur so viel
     Abdunklung, dass die Kategorie-Marke oben lesbar bleibt. */
  .proj-feature__veil,
  .proj-feature:hover .proj-feature__veil {
    background:
      linear-gradient(to top,
        rgba(14, 15, 12, 0.90) 0,
        rgba(14, 15, 12, 0.88) 105px,
        rgba(14, 15, 12, 0)    150px),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.38) 0%,
        rgba(0, 0, 0, 0.10) 24%,
        rgba(0, 0, 0, 0.06) 100%);
  }
  /* Bei den als dunkel markierten Fotos (Nachtaufnahmen) reicht ein Hauch
     oben — sonst versinkt das Bild ganz. Der Streifen unten bleibt gleich,
     die Lesbarkeit hängt ohnehin am Textblock. */
  .proj-feature--dark-img .proj-feature__veil,
  .proj-feature--dark-img:hover .proj-feature__veil {
    background:
      linear-gradient(to top,
        rgba(14, 15, 12, 0.90) 0,
        rgba(14, 15, 12, 0.88) 105px,
        rgba(14, 15, 12, 0)    150px),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.16) 0%,
        rgba(0, 0, 0, 0.02) 26%,
        rgba(0, 0, 0, 0)    100%);
  }

  /* Die Marke stand mit 18 % Deckung auf hellem Kies praktisch im Nichts */
  .proj-feature__no {
    background: rgba(14, 15, 12, 0.42);
    border-color: rgba(244, 239, 230, 0.55);
  }
}