/* ==========================================================================
   LAUT UND DEUTLICH – Website 2026 – style.css
   Maße aus Figma "LUD - Website 2026 - v7" (Desktop-Frame 1520 px, Inhalt 1398 px).
   Alle Werte siehe DESIGN_SPEC.md. Keine externen Requests (Fonts lokal).
   ========================================================================== */

/* --- Fonts (lokal) ------------------------------------------------------- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Anton-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Anton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter liegt als variable Schrift vor (Achse wght 100 bis 900): eine Datei je Zeichenbereich deckt
   400 (Fliesstext), 700 (Fett, Navigation) und 900 (grosses "&" in "Ueber uns") ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ---------------------------------------------------------------- */
:root {
  --lime: #DDFF00;
  --black: #000000;
  --white: #FFFFFF;
  --gray-card: #3F3F3F;
  --rule: #000000;
  --rule-soft: #7F7F7F;
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --tracking: -0.02em;        /* aus Breitenmessung: "ÜBER UNS" 332 px, "LEISTUNGEN" 400 px bei 100 px */

  --container: 1398px;
  --gutter: 62px;        /* linker Rand (Figma) */
  --gutter-r: 60px;      /* rechter Rand (Figma: Inhalt endet bei x = 1460) */
  --header-h: 187px;

  --fs-hero: 110px;
  --lh-hero: 116px;
  --fs-h2: 100px;
  --fs-h3: 40px;
  --lh-h3: 42px;
  --fs-btn: 30px;
  --btn-h: 100px;

  --hero-shift: 39px;          /* Versatz der Zeilen in Zustand A/B (Figma) */
  --nav-fs: 15px;              /* Navigation: Schriftgroesse, Innenabstand, Abstand zum Mail-Kreis, Logobreite (unter 1520 fluid, s. Media Queries) */
  --nav-pad: 28px;
  --nav-gap: 50px;
  --logo-w: 353px;
  --section-pad-top: 75px;     /* Linie -> h2-Box (Versal-Oberkante 81 px unter Linie) */
}

/* --- Reset / Basis ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--white);
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 24px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--black); color: var(--lime);
  font: 700 15px/1 var(--font-text);
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--lime); outline-offset: 2px; }

:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.site-footer :focus-visible, .mobile-menu :focus-visible { outline-color: var(--lime); }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) + var(--gutter-r));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* Display-Schrift */
.display, .headline, .hero-title, .sub, .btn, .footer-links a, .acc-btn, .ref-name, .cta-text, .ref-title, .mobile-menu-nav a {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
/* Lime-Punkt: im Figma ein Block von 0,28 x 0,23 em auf der Grundlinie (bei 100 px: 28 x 23 px), 4 px Abstand */
.dot {
  display: inline-block;
  width: .28em; height: .23em;
  margin-left: .04em;
  background: var(--lime);
  color: transparent;
  overflow: hidden;
  vertical-align: baseline;
}
.hero-title .dot { width: .345em; height: .31em; margin-left: .06em; margin-right: -.405em; } /* Figma Hero: 38 x 34 px bei 110 px; negativer Rand: Punkt haengt mobil in den Seitenrand statt umzubrechen */
.headline {
  font-size: var(--fs-h2);
  line-height: 1;
  margin: 0 0 48px;
}
.sub {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.intro { max-width: 680px; }
strong, b { font-weight: 700; }

/* Text-Link (Agentur-Kodex) */
.link-lime {
  color: var(--black);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--lime);
  transition: background-color .15s ease;
}
.link-lime:hover, .link-lime:focus-visible { background: var(--lime); }

/* Buttons: Hover (Feedback-1, Punkt 2): schwarze Fuellung waechst aus dem Mittelpunkt (::before, scale 0 -> 1),
   Text wird Lime und minimal kleiner (0,94). Beschriftung liegt in einem <span> ueber der Fuellung. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 24px;
  background: var(--lime);
  color: var(--black);
  font-size: var(--fs-btn);
  line-height: 1;
  letter-spacing: 0; /* Figma: "SCHREIBEN SIE UNS!" 224 px breit = Tracking 0 */
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--black);
  transform: scale(0);
  transform-origin: center;
  transition: transform .25s ease-out;
}
.btn > span {
  position: relative;
  z-index: 1;
  display: block;
  transition: transform .25s ease-out, color .25s ease-out;
}
.btn:hover::before, .btn:focus-visible::before { transform: scale(1); }
.btn:hover > span, .btn:focus-visible > span { color: var(--lime); transform: scale(.94); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--black); color: var(--lime); }
.icon-btn svg { width: 26px; height: 26px; }

/* --- Header ----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--white);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: block; flex: 0 0 auto; }
.logo img { width: var(--logo-w); height: auto; } /* 353 px = sichtbare Wortmarke 344 px (PNG hat transparenten Rand) */
.site-nav { margin-left: auto; margin-right: var(--nav-gap); }
.site-nav ul { display: flex; align-items: center; }
.site-nav li { display: flex; align-items: center; height: 24px; }
.site-nav li + li { border-left: 1px solid var(--rule); }
.site-nav a {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 0 var(--nav-pad);
  font: 700 var(--nav-fs)/24px var(--font-text);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  white-space: nowrap;
}
.site-nav li:last-child a { padding-right: 0; }
/* Hover/Fokus (Feedback-1, Punkt 6): Lime-Flaeche hinter dem Text (Textbox 18 px + 4 px oben/unten, + 6 px links/rechts)
   waechst von der Mitte nach aussen und zieht sich beim Verlassen zurueck; aktiver Punkt dauerhaft gefuellt. */
.site-nav a::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--nav-pad) - 6px); right: calc(var(--nav-pad) - 6px);
  top: -1px; bottom: -1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease-out;
}
.site-nav li:last-child a::after { right: -6px; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.is-active::after { transform: scaleX(1); }
.header-mail svg { width: 22px; height: 22px; }
.burger { display: none; }

/* --- Hero ------------------------------------------------------------------- */
/* Aufbau (Feedback-1, Punkt 8): .hero = Sektion mit Scroll-Strecke; .hero-sticky bleibt unter dem Header stehen,
   .hero-track liefert die zusaetzliche Scroll-Strecke (700 px Desktop, 450 px mobil). Der Scroll-Fortschritt
   0 … 1 ueber die Strecke steuert die Zustaende A -> B -> C (CSS-Variablen aus main.js). Ohne JS oder bei
   prefers-reduced-motion gibt es keine Strecke, der Endzustand steht. */
.hero { position: relative; }
.hero-sticky { position: sticky; top: var(--header-h); }
.hero-track { height: 0; }
.js .hero.is-scroll .hero-track { height: 700px; }
.hero-inner {
  min-height: max(560px, calc(100vh - 285px)); /* inkl. 3 px Linie: Linie bei 1520x984 auf y = 883…886 (Figma) */
  padding-top: 142px;
  border-bottom: 3px solid transparent;
}
.hero-inner::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter-r); bottom: -3px;
  height: 3px;
  background: var(--lime);
}
.hero-inner { position: relative; }
.hero-title {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.0225em; /* "STRATEGISCHE KOMMUNIKATION" = 1214 px (Figma) */
  padding-left: 29px;
}
.fuer-mob { display: none; }
.hero-lines { display: block; position: relative; }
.hl { display: block; white-space: nowrap; }
br.mob { display: none; }
br.desk { display: inline; }

/* Ohne JS: nur Endzustand */
html:not(.js) .hl-strat, html:not(.js) .fuer, html:not(.js) .dot-b { display: none; }

/* Scroll-gesteuerte Zustaende (nur mit JS und ohne reduzierte Bewegung, Klasse .is-scroll):
   --hero-in   0 … 1  sanftes Einblenden von Zustand A beim Laden
   --hero-ab   0 … 1  Zeile 2 ("FUER KOMPLEXE HERAUSFORDERUNGEN.") erscheint         (Fortschritt 0 … 0,35)
   --hero-out  0 … 1  Zeile 1 und "FUER" blenden aus                                   (Fortschritt 0,35 … 0,59)
   --hero-bc   0 … 1  Block rutscht um Versatz + Hoehe von Zeile 1 nach oben          (Fortschritt 0,35 … 0,75)
   --hero-rest 0 … 1  "BRAUCHEN MEHR ALS EINFACHE / ANTWORTEN." erscheint             (Fortschritt 0,47 … 0,75)
   --strat-h   gemessene Hoehe von Zeile 1 (main.js), damit der Block ohne Sprung in den Endzustand uebergeht. */
/* Zeile 1 nimmt waehrend der Animation keinen Platz im Fluss ein (negativer unterer Rand in ihrer Hoehe) und wird
   um ihre Hoehe nach oben gegenverschoben; der Block liegt um Versatz + Zeilenhoehe tiefer und rutscht mit --hero-bc
   nach oben. So bleibt die Hoehe des Hero-Inhalts in allen Zustaenden gleich (kein Sprung der Lime-Linie beim
   Wechsel in den Endzustand, auch mobil und bei niedrigen Viewports). */
.js .hero.is-scroll .hero-lines {
  opacity: var(--hero-in, 1);
  transform: translateY(calc(45px * (1 - var(--hero-in, 1)) + (var(--hero-shift) + var(--strat-h, 0px)) * (1 - var(--hero-bc, 0))));
  will-change: transform, opacity;
}
.js .hero.is-scroll .hl-strat {
  opacity: calc(1 - var(--hero-out, 0));
  margin-bottom: calc(-1 * var(--strat-h, 0px));
  transform: translateY(calc(-1 * var(--strat-h, 0px) * (1 - var(--hero-bc, 0))));
}
.js .hero.is-scroll .hl-komp { opacity: var(--hero-ab, 0); transform: translateY(calc(45px * (1 - var(--hero-ab, 0)))); }
.js .hero.is-scroll .dot-b, .js .hero.is-scroll .fuer-mob { opacity: calc(1 - var(--hero-out, 0)); }
.js .hero.is-scroll .fuer-mob { max-width: calc(3em * (1 - var(--hero-bc, 0))); }
.js .hero.is-scroll .hl-rest { opacity: var(--hero-rest, 0); transform: translateY(calc(45px * (1 - var(--hero-rest, 0)))); }
/* Endzustand (Fortschritt >= 0,75, reduzierte Bewegung, ohne JS): Zeile 1, "FUER" und der erste Punkt sind weg */
.js .hero.is-done .hl-strat, .js .hero.is-done .fuer, .js .hero.is-done .dot-b { display: none; }
.js .hero.is-done .hero-lines { transform: none; opacity: 1; }
.js .hero.is-done .hl-komp, .js .hero.is-done .hl-rest { opacity: 1; transform: none; }

/* --- Sektionen (allgemein) ------------------------------------------------- */
.section { position: relative; }
.section-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--section-pad-top);
  border-bottom: 3px solid transparent; /* Platz fuer die Linie; die Linie selbst laeuft wie im Figma nur ueber die Inhaltsbreite (x = 62 … 1460) */
}
.section-inner::after, .cta-inner::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter-r); bottom: -3px;
  height: 3px;
  background: var(--lime);
}
.contact .section-inner::after { display: none; }
section[id] { scroll-margin-top: var(--header-h); }

/* --- Ueber uns -------------------------------------------------------------- */
.about { overflow: hidden; }
.about .section-inner { min-height: 848px; padding-bottom: 60px; }
.about .headline { margin-bottom: 59px; }
.about-text { position: relative; z-index: 1; max-width: 574px; }
/* Bildblock wie im Figma-Frame (x 600 … 1520, y 900 … 1734, 920 x 834 px).
   Desktop und Mobile verwenden die beiden gelieferten Originalausschnitte. */
.about-visual {
  position: absolute;
  top: 14px; bottom: 0;
  left: max(600px, calc(50% - 160px));
  right: 0;
  z-index: 0;
  overflow: hidden;
}
.about-photo,
.about-photo img {
  display: block;
}
.about-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.about-photo img {
  position: absolute;
  left: -16.6%;
  top: -28.2%;
  width: 119%;
  height: auto;
  max-width: none;
}
/* Weicher Uebergang vom Text zum Foto wie im Figma. */
.about-visual::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 27%;
  background: linear-gradient(90deg, var(--white) 0, rgba(255,255,255,.98) 38%, rgba(255,255,255,0) 100%);
  z-index: 1;
}
/* Exakte, aus dem Figma extrahierte Ampersand-Silhouette. Das Lime liegt dort leicht transparent
   ueber dem Foto; sichtbarer Teil im 1520er-Frame: x 1055 … 1519, y 1198 … 1709. */
.about-amp {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: 465px;
  height: 512px;
  z-index: 2;
  background: rgba(221,255,0,.82);
  -webkit-mask: url("../img/about-amp-mask.png") center / 100% 100% no-repeat;
  mask: url("../img/about-amp-mask.png") center / 100% 100% no-repeat;
  user-select: none;
}
/* Optionale Zeilen "WAS UNS ANTREIBT" / "WOFUER WIR STEHEN" (Figma, laut Briefing entfallen) */
.about-rows { position: relative; z-index: 1; max-width: 660px; margin-top: 56px; border-top: 1px solid var(--rule); }
.about-row { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 48px 0; border-bottom: 1px solid var(--rule); }
.about-row .sub { margin: 0; }

/* --- Leistungen ------------------------------------------------------------- */
.services .section-inner { padding-bottom: 99px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  align-items: stretch;
  margin-top: 22px;
}
/* Vier identische Kategorien. Die Texte haben bei 1520 px dieselbe Breite und umbrechen jeweils auf acht Zeilen;
   dadurch beginnen und enden sie auf derselben Ebene. Bei schmaleren Desktopbreiten bleiben die Textenden durch
   die flexible Panelhoehe ausgerichtet. */
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
}
.service .sub { min-height: calc(2 * var(--lh-h3) + 4px); margin: 0 0 35px; padding-top: 4px; } /* zwei Zeilen + 4 px oben, Texte starten wie zuvor bei rel. +36 px unter der Titelzeile */
.service .acc-panel { display: flex; flex: 1; align-items: flex-end; }
.service .acc-panel p { width: 100%; margin: 0; overflow-wrap: break-word; } /* Notbremse gegen Ueberlauf; Trennstellen fuer lange Woerter stehen als &shy; im HTML ("Kommunikations&shy;kampagnen", wie im Figma) */
.service:nth-child(n+2)::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -8px;
  width: 1px;
  background: var(--rule-soft);
}
.service .acc-btn { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: default; }
.service .acc-icon { display: none; }

/* --- CTA ---------------------------------------------------------------------- */
.cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 68px;
  padding-bottom: 67px;
  border-bottom: 3px solid transparent; /* Linie ueber ::after (Inhaltsbreite), s. .section-inner */
}
.cta-text { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0; padding-left: 10px; margin: 0; white-space: nowrap; } /* Figma: 526 px breit = Tracking 0 */
.cta .btn { width: 694px; flex: 0 0 auto; }

/* --- Referenzen --------------------------------------------------------------- */
.references .section-inner { padding-bottom: 95px; }
.ref-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 78px 50px;
  margin-top: 30px;
}
.ref-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--white);
}
.ref-item img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); }
.ref-tile {
  position: relative;
  display: block;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: var(--gray-card);
  color: var(--white);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
}
.ref-tile[disabled] { cursor: default; }
.ref-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--white);
  filter: grayscale(1);
}
/* Optical calibration applies to the supplied thumbnail only, including the
   no-JavaScript fallback. Replacement uploads retain the neutral default.
   Original files and gallery images remain untouched. */
.ref-tile:has(img) { background: var(--white); }
.ref-item > img, .ref-tile > img {
  background: transparent;
  transform: scale(var(--logo-scale, 1));
  transform-origin: center;
  filter: var(--logo-filter, grayscale(1));
}
.ref-grid img[src$="/uaw-logo.svg"] { --logo-scale: .54; }
.ref-grid img[src$="/dgb-bayern-thumb.webp"] { --logo-scale: 1.18; }
.ref-grid img[src$="/idealo-thumb.webp"] { --logo-scale: 1.15; --logo-filter: grayscale(1) invert(1) contrast(2); }
.ref-grid img[src$="/kki-thumb.webp"] { --logo-scale: 1.24; }
.ref-grid img[src$="/gruene-thumb.webp"] { --logo-scale: .95; --logo-filter: grayscale(1) invert(1) brightness(1.8) contrast(3); }
.ref-grid img[src$="/berivan-aymaz-thumb.webp"] { --logo-scale: .90; }
.ref-grid img[src$="/sos-kinderdoerfer-logo.svg"] { --logo-scale: .88; --logo-filter: grayscale(1) invert(1) brightness(2) contrast(3); }
.ref-grid img[src$="/neue-gase-thumb.webp"] { --logo-scale: .94; }
.ref-grid img[src$="/tag-der-deutschen-einheit-thumb.webp"] { --logo-scale: .90; }
.ref-grid img[src$="/gasunie-thumb.webp"] { --logo-scale: 2.5; --logo-filter: grayscale(1) contrast(3); }
.ref-grid img[src$="/giz-thumb.webp"] { --logo-scale: .92; }
.ref-grid img[src$="/irc-thumb.webp"] { --logo-scale: 1.2; --logo-filter: grayscale(1) contrast(3); }
.ref-grid img[src$="/campact-thumb.webp"] { --logo-scale: .94; }
.ref-grid img[src$="/un-women-thumb.webp"] { --logo-scale: .91; }
.ref-grid img[src$="/fridays-for-future-thumb.webp"] { --logo-scale: .70; }
.ref-name {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-size: 30px; line-height: 1.1;
}
/* Hover/Fokus (Feedback-1, Punkt 4): Lime-Flaeche 85 % ueber der Kachel, Projekttitel (titelKurz, Anton 40,
   Schreibweise wie im Datensatz) oben links, Plus unten rechts; blendet 200 ms ein/aus. Nur mit Hover-Geraet
   oder Tastaturfokus, auf Touch-Geraeten bleibt die Kachel unveraendert. */
.ref-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background: rgba(221, 255, 0, .85);
  color: var(--black);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ref-overlay-title {
  position: absolute;
  left: 20px; top: 20px; right: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-size: clamp(27px, 12.8cqi, var(--fs-h3));
  line-height: 1.05;
  letter-spacing: var(--tracking);
  text-transform: none;
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.ref-overlay-title.is-compact {
  font-size: min(36px, var(--fs-h3));
  font-size: clamp(23px, 11.55cqi, min(36px, var(--fs-h3)));
  line-height: 1.05;
}
.ref-overlay-plus { position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px; }
.ref-overlay-plus::before, .ref-overlay-plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
}
.ref-overlay-plus::before { width: 40px; height: 8px; margin: -4px 0 0 -20px; }
.ref-overlay-plus::after { width: 8px; height: 40px; margin: -20px 0 0 -4px; }
.ref-name { transition: opacity .2s ease; }
.ref-tile:focus-visible .ref-overlay { opacity: 1; }
.ref-tile:focus-visible .ref-name { opacity: 0; }
@media (hover: hover) {
  .ref-tile:hover .ref-overlay { opacity: 1; }
  .ref-tile:hover .ref-name { opacity: 0; } /* Platzhalter-Kachel: Kundenname weicht dem Titel im Overlay */
}
.ref-mobile-nav { display: none; }

/* --- Kund:innen ------------------------------------------------------------- */
.clients .section-inner { padding-bottom: 98px; }
.clients-cols {
  display: grid;
  grid-template-columns: 360fr 525fr 513fr; /* Linien aus Figma: x = 422 / 947, Text 120 px rechts der Linie */
  margin-top: 71px;
}
.clients-cols ul + ul { border-left: 1px solid var(--rule); padding-left: 120px; }
.clients-cols li { padding: 6.5px 0; line-height: 24px; }
.clients-pager { display: none; }
.clients-pager-status { text-align: center; margin: 0 0 16px; }

/* --- Jobs ---------------------------------------------------------------------- */
.jobs .section-inner { padding-bottom: 95px; }
.jobs-grid {
  display: grid;
  grid-template-columns: 575px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 129px;
}
.jobs-text { grid-area: 1 / 1 / 2 / 2; max-width: 560px; }
.jobs-list { margin: -20px 0 21px; line-height: 30px; } /* folgt direkt auf den Absatz (Figma: 4 px) */
.jobs-btn { grid-area: 2 / 1 / 3 / 2; align-self: start; width: 575px; margin-top: 58px; }
.jobs-acc { grid-area: 1 / 2 / 3 / 3; margin-top: -36px; border-top: 1px solid var(--rule); }
.jobs-acc:empty { display: none; }
.jobs-grid.is-empty { grid-template-columns: minmax(0, 700px) minmax(320px, 1fr); align-items: end; }
.jobs-grid.is-empty .jobs-text { max-width: 700px; }
.jobs-grid.is-empty .jobs-btn { grid-area: 1 / 2 / 2 / 3; align-self: end; width: 100%; margin-top: 0; }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-head { margin: 0; }
.acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 34px 8px 38px 40px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--black);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  cursor: pointer;
}
.jobs-acc .acc-btn { letter-spacing: 0; } /* Figma: "SENIOR PUBLIC AFFAIRS-" 350 px = Tracking 0 */
/* Hover/Fokus (Feedback-1, Punkt 1): Lime-Flaeche in der Groesse des Titelblocks (10 px Innenabstand links/rechts,
   oben/unten buendig mit den Zeilenkaesten) waechst von der Mitte nach aussen; Text bleibt schwarz, Plus unveraendert. */
.jobs-acc .acc-label {
  position: relative;
  isolation: isolate;
  padding: 0 10px;
  margin-left: -10px;
}
.jobs-acc .acc-label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease-out;
}
.jobs-acc .acc-btn:hover .acc-label::before, .jobs-acc .acc-btn:focus-visible .acc-label::before { transform: scaleX(1); }
.acc-icon { position: relative; flex: 0 0 43px; width: 43px; height: 42px; }
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  left: 50%; top: 50%;
}
.acc-icon::before { width: 43px; height: 8px; margin: -4px 0 0 -21.5px; }
.acc-icon::after { width: 8px; height: 42px; margin: -21px 0 0 -4px; }
.acc-btn[aria-expanded="true"] .acc-icon::after { display: none; }
.jobs-acc .acc-panel { padding: 0 40px 40px; }
.acc-panel[hidden] { display: none; }
.acc-sub { font-weight: 700; margin: 0 0 24px; }
.acc-panel .btn { width: 480px; max-width: 100%; margin-top: 32px; }

/* --- Kontakt ------------------------------------------------------------------ */
.contact .section-inner { padding-bottom: 99px; border-bottom: 0; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 813px;
  align-items: start;
}
.contact-left { max-width: 500px; }
.contact .headline { margin-bottom: 48px; }
.address { font-style: normal; margin-top: 50px; }
.address a, .address-link { color: inherit; text-decoration: none; font-weight: 700; }
.address a:hover, .address a:focus-visible, .address-link:hover, .address-link:focus-visible { box-shadow: inset 0 -2px 0 var(--lime); }
.map {
  position: relative;
  display: block;
  height: 467px;
  overflow: hidden;
  background: #e5e5e5;
  color: var(--black);
}
.map img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.map-pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%; /* Pin-Spitze bleibt beim Vergroessern am Standort */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  transition: transform .2s ease-out;
}
/* Hover/Fokus (Feedback-1, Punkt 3): Pin waechst um 18 % von der Spitze aus, Karte bleibt verlinkt */
.map:hover .map-pin, .map:focus-visible .map-pin { transform: translate(-50%, -100%) scale(1.18); }
.map-attr {
  position: absolute;
  right: 6px; bottom: 4px;
  padding: 1px 5px;
  font: 400 11px/14px var(--font-text);
  color: #555;
  background: rgba(255,255,255,.75);
}
.contact-btn { grid-column: 1 / -1; width: 100%; margin-top: 51px; }
.contact-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 813px);
  gap: 48px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 3px solid var(--lime);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.contact-form-intro { max-width: 420px; }
.contact-form h3 { font: 400 40px/1.08 var(--font-display); margin-bottom: 24px; }
.form-recipient { overflow-wrap: anywhere; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; min-width: 0; }
.form-field { min-width: 0; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 8px; font-weight: 700; }
.field-optional { font-weight: 400; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-width: 0; border: 1px solid #777; border-radius: 0;
  padding: 14px 16px; background: var(--white); color: var(--black);
  font: inherit; line-height: 1.5;
}
.form-field textarea { resize: vertical; min-height: 160px; }
.form-field :is(input, select, textarea):focus-visible { outline: 3px solid var(--black); outline-offset: 3px; border-color: var(--black); }
.form-notes { font-size: 15px; line-height: 1.55; }
.form-notes p { margin-bottom: 12px; }
.contact-form a { text-underline-offset: 3px; }
.contact-form a:hover { text-decoration-thickness: 3px; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-form .btn { width: 100%; }
.contact-form .btn:disabled { cursor: wait; opacity: .65; }
.form-status { margin: 0; padding: 18px 20px; border-left: 4px solid var(--lime); background: #f4f4f4; overflow-wrap: anywhere; }
.form-status.is-error { border-left-color: #a52020; }
.form-page > .section-inner > .headline { max-width: 1050px; overflow-wrap: anywhere; }
.form-page .contact-form { margin-top: 40px; }
.field-help { font-size: 15px; line-height: 1.5; margin: 8px 0 0; }
.form-uploads { min-width: 0; margin: 8px 0 0; padding: 24px; border: 1px solid #777; }
.form-uploads legend { padding: 0 8px; font-weight: 700; }
.form-uploads > .field-help { margin: 0 0 24px; }
.form-uploads .form-field + .form-field { margin-top: 24px; }
.form-field input[type="file"] { padding: 12px; font-size: 15px; color: transparent; }
.form-field input[type="file"]::file-selector-button { border: 0; border-radius: 0; margin-right: 12px; padding: 10px 12px; background: var(--lime); color: var(--black); font: inherit; font-weight: 700; cursor: pointer; }
.upload-selection { margin: 8px 0 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 1099px) {
  .contact-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; }
}
@media (max-width: 899px) {
  .contact-form { display: block; width: 100%; margin-top: 40px; padding-top: 32px; order: 2; }
  .contact-form-intro { max-width: none; margin-bottom: 32px; }
  .contact-form h3 { font-size: 32px; }
  .contact-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* --- Footer ----------------------------------------------------------------- */
.site-footer { background: var(--black); color: var(--white); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; height: 178px; }
.footer-links { display: flex; gap: 102px; } /* DATENSCHUTZ bei x = 292 (Figma) */
.footer-links a { font-size: var(--fs-btn); line-height: 1; color: var(--white); text-decoration: none; transition: color .15s ease; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--lime); }
.footer-linkedin svg { width: 30px; height: 30px; }

/* --- Nach oben ---------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 60px; bottom: 70px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease, background-color .15s ease, color .15s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
/* Tritt der Button in Ruhe (kein Scrollen, z. B. nach Anker-Sprung) laenger als ~1,2 s auf, tritt er optisch zurueck,
   damit er keinen Fliesstext dauerhaft verdeckt (Feedback-1-Runde-1, Befund 6); Klick/Hover/Fokus/erneutes
   Scrollen stellen die volle Deckkraft sofort wieder her, Position/Groesse/Aussehen bleiben wie in DESIGN_SPEC.md. */
.to-top.is-idle { opacity: .32; }
.to-top:hover, .to-top:focus-visible { opacity: 1; }
.to-top svg { width: 30px; height: 30px; }

/* --- Referenz-Popup ----------------------------------------------------------- */
.ref-dialog {
  width: min(1400px, calc(100vw - 40px));
  max-width: none;
  max-height: 90vh;
  padding: 0;
  border: 0;
  margin: auto;
  background: var(--white);
  color: var(--black);
  overflow: hidden;
}
.ref-dialog::backdrop { background: rgba(0,0,0,.7); }
.ref-dialog.is-fallback { position: fixed; inset: 0; z-index: 90; }
.ref-dialog-backdrop { display: none; }
.ref-dialog.is-fallback + .ref-dialog-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.7); }
.ref-panel { position: relative; max-height: 90vh; overflow: auto; padding: 60px 50px 50px; }
.ref-close {
  position: absolute;
  top: 12px; right: 40px;
  padding: 4px 8px;
  border: 0; background: none;
  font: 400 40px/1 var(--font-display);
  letter-spacing: var(--tracking);
  color: var(--black);
  cursor: pointer;
  transition: color .15s ease;
}
.ref-close:hover, .ref-close:focus-visible { color: var(--lime); }
.ref-head {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 140px auto;
  align-items: stretch;
  min-height: 130px;
}
.ref-title {
  display: flex; align-items: center;
  min-width: 0;
  margin: 0;
  padding: 8px 30px 8px 0;
  border-right: 1px solid var(--rule);
  font-size: 48px; line-height: 50px;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ref-title.is-long { font-size: 36px; line-height: 38px; }
.ref-text { display: flex; align-items: center; padding: 8px 30px; border-right: 1px solid var(--rule); }
.ref-text p { margin: 0; }
.ref-subtitle { display: block; }
.ref-period { display: flex; align-items: center; padding: 8px 0 8px 30px; }
.ref-nav { display: flex; align-items: center; gap: 42px; margin-left: 40px; }
.ref-nav .icon-btn { width: 72px; height: 72px; }
.ref-nav .icon-btn svg { width: 30px; height: 30px; }
.ref-strip {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 40px;
  padding-bottom: 6px;
}
.ref-strip.is-resetting { scroll-snap-type: none; }
.ref-media {
  position: relative;
  flex: 0 0 auto;
  height: 600px;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  background: #111;
}
.ref-media-image { display: flex; align-items: center; justify-content: center; }
.ref-media-image img { width: auto; height: 100%; max-width: none; object-fit: contain; }
/* Das gelieferte Hessen-2021-Motiv hat oben einen wenige Pixel hohen weissen
   Rand. Ausschliesslich dieser Rand wird ausgeblendet; darunter bleibt der
   schwarze Gruppenbalken sichtbar. */
.ref-media-image img[src$="/gruene-3.webp"] { clip-path: inset(.4% 0 0); }
/* Das erste Motiv der TDE-Referenz ist ein sehr breites Logo. Es wird als
   Ganzes in die sichtbare Galeriebreite eingepasst statt ueber die feste
   Medienhoehe so stark zu vergroessern, dass die rechte Haelfte ausserhalb
   des Dialogs liegt. */
.ref-media-image.is-contain { width: min(1200px, 82vw); background: var(--white); }
.ref-media-image.is-contain img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.ref-media-image.has-group-label { position: relative; padding-top: 54px; }
.ref-media-image.starts-media-group { margin-left: 46px; }
.ref-media-image.starts-media-group::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  border-left: 2px solid var(--black);
}
.ref-media-group-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 42px;
  padding: 8px 14px;
  background: var(--black);
  color: var(--lime);
  font: 400 24px/26px var(--font-display);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.ref-strip.is-clippings .ref-media-image {
  width: min(920px, 72vw);
  padding: 34px;
  background: #f2f2f2;
}
.ref-strip.is-clippings .ref-media-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.ref-media-video { width: min(1000px, 82vw); aspect-ratio: 16 / 9; }
.ref-media-video video,
.ref-media-video iframe,
.ref-video-launch { display: block; width: 100%; height: 100%; border: 0; background: #111; }
.ref-media-video video { object-fit: contain; }
.ref-video-launch { position: relative; padding: 0; overflow: hidden; color: var(--white); cursor: pointer; text-align: left; text-decoration: none; }
.ref-video-launch > img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .45s ease, opacity .2s ease; }
.ref-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.78)); }
.ref-video-play {
  position: absolute;
  left: 32px; right: 32px; bottom: 28px;
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-display);
  font-size: 30px; line-height: 1.05;
  letter-spacing: var(--tracking);
}
.ref-video-play-icon {
  display: grid; place-items: center;
  flex: 0 0 70px; width: 70px; height: 70px;
  padding-left: 5px;
  border-radius: 50%;
  background: var(--lime); color: var(--black);
  font: 400 26px/1 var(--font-text);
}
.ref-video-launch.is-label-free .ref-video-play { right: auto; }
.ref-video-title { max-width: 620px; }
.ref-video-launch:hover > img, .ref-video-launch:focus-visible > img { transform: scale(1.025); opacity: .95; }
.ref-video-launch:hover .ref-video-play-icon, .ref-video-launch:focus-visible .ref-video-play-icon { background: var(--white); }
.ref-strip .ref-ph {
  flex: 0 0 auto;
  width: 600px; height: 600px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: var(--gray-card); color: var(--white);
  font: 400 30px/1.1 var(--font-display); letter-spacing: var(--tracking); text-transform: uppercase; text-align: center;
}
.ref-link { margin-top: 40px; width: 480px; max-width: 100%; }
.ref-hr { display: none; }

@media (min-width: 900px) and (max-width: 1199px) {
  .ref-panel { padding-right: 36px; padding-left: 36px; }
  .ref-head { grid-template-columns: minmax(300px, 32%) minmax(0, 1fr) 110px; }
  .ref-title.is-long { font-size: 32px; line-height: 34px; }
  .ref-period { padding-left: 24px; }
  .ref-nav { grid-column: 1 / -1; justify-content: flex-end; margin: 24px 0 0; }
  .ref-strip { margin-top: 32px; }
}

/* --- Mobile-Menue ------------------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--black);
  color: var(--white);
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu-close {
  position: absolute; top: 28px; right: 25px;
  width: 40px; height: 40px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--white);
}
.mobile-menu-close::before, .mobile-menu-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 4px; margin: -2px 0 0 -17px; background: currentColor;
}
.mobile-menu-close::before { transform: rotate(45deg); }
.mobile-menu-close::after { transform: rotate(-45deg); }
.mobile-menu-nav a { display: block; font-size: 40px; line-height: 68px; color: var(--white); text-decoration: none; text-align: center; }
.mobile-menu-nav a:hover, .mobile-menu-nav a:focus-visible { color: var(--lime); }
.mobile-menu-icons { position: absolute; bottom: 48px; display: flex; gap: 26px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* 1100 – 1519: Raender 62 px, fluide Anton-Groessen */
@media (max-width: 1519px) {
  :root {
    --fs-hero: clamp(72px, calc(-27.5px + 9.05vw), 110px);
    --lh-hero: 1.05;
    --fs-h2: clamp(72px, calc(-1.3px + 6.67vw), 100px);
    /* Header muss in 1100 px passen: Logo 320 + Nav (13 px, 10 px Innenabstand) + 30 + Mail 60 = 937 < 978 */
    --nav-fs: clamp(13px, 0.476vw + 7.76px, 15px);
    --nav-pad: clamp(10px, 1.43vw - 5.73px, 16px);
    --nav-gap: clamp(30px, 4.76vw - 22.4px, 50px);
    --logo-w: clamp(320px, 7.86vw + 233.5px, 353px);
  }
  .hero-title { line-height: 1.05; }
  .cta .btn { width: 694px; flex: 0 1 auto; min-width: 0; } /* Button schrumpft, Frage bleibt zweizeilig (kein Ueberlauf bei 1100 bis 1260 px) */
  .jobs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; }
  .jobs-btn { width: 100%; }
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 60px; }
  .about-visual { left: max(600px, calc(50% - 160px)); }
  /* "&" unterhalb 1520: rechts verankert und proportional zur Breite skaliert. */
  .about-amp { width: clamp(276px, 30.6vw, 465px); height: auto; aspect-ratio: 465 / 512; }
}

/* 900 – 1099 */
@media (max-width: 1099px) {
  :root {
    --fs-hero: min(72px, calc((100vw - 151px) / 12.55)); /* laengste Zeile "STRATEGISCHE KOMMUNIKATION FUER" (12,5 px je px Schriftgroesse, Zustand A/B steht jetzt scroll-gesteuert dauerhaft) muss in die Inhaltsbreite (100vw - 122 px Raender - 29 px Einzug) passen */
    --fs-h2: 72px;
    /* Header bei 900 px: Logo 230 + Nav (12 px, 7 px Innenabstand) + 20 + Mail 48 = 760 < 778 */
    --nav-fs: clamp(12px, 0.5vw + 7.5px, 13px);
    --nav-pad: clamp(7px, 1.5vw - 6.5px, 10px);
    --nav-gap: 20px;
    --logo-w: clamp(230px, 25vw + 5px, 280px);
  }
  .header-mail { width: 48px; height: 48px; }
  .header-mail svg { width: 18px; height: 18px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .service:nth-child(n+2)::before { display: none; }
  .service:nth-child(even)::before { display: block; }
  .service:nth-child(n+3) { margin-top: 0; }
  .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 40px; }
  .clients-cols { grid-template-columns: 1fr 1fr; }
  .clients-cols ul + ul { padding-left: 60px; }
  .jobs-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .jobs-text, .jobs-btn, .jobs-acc { grid-area: auto; }
  .jobs-grid.is-empty { grid-template-columns: minmax(0, 1fr); }
  .jobs-grid.is-empty .jobs-btn { grid-area: auto; width: min(575px, 100%); margin-top: 40px; }
  .jobs-acc { margin-top: 56px; }
  .jobs-btn { max-width: 575px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .map { margin-top: 48px; height: 420px; }
  .about-visual { left: max(560px, calc(50% - 160px)); }
  .cta-text { white-space: normal; flex: 1 1 auto; min-width: 0; }
  .cta .btn { flex: 0 0 auto; width: min(694px, 45%); } /* Frage darf dreizeilig werden, Button bleibt breit genug fuer den Text */
}

/* < 900: Mobile-Layout (Figma-Frame "mobil") */
@media (max-width: 899px) {
  :root {
    --gutter: 28px;
    --gutter-r: 28px;
    --header-h: 96px;
    /* Figma 50 px; laengste Zeile "EINFACHE ANTWORTEN." = 394 px bei 50 px, Inhaltsbreite bei 400 px nur 344 px:
       Groesse an die Inhaltsbreite gekoppelt (400 px -> 43 px, 375 px -> 40 px), ab 456 px wieder 50 px */
    --fs-hero: clamp(30px, calc((100vw - 56px) * 0.125), 50px);
    --lh-hero: 1.06;
    --fs-h2: 52px;
    --fs-h3: 32px;
    --lh-h3: 34px;
    --btn-h: 118px;
    --hero-shift: 0px;
    --section-pad-top: 56px;
  }
  br.mob { display: inline; }
  br.desk { display: none; }
  .hl { white-space: normal; }
  .fuer-desk { display: none; }
  .fuer-mob { display: inline-block; max-width: 3em; overflow: hidden; white-space: pre; vertical-align: bottom; }
  .hero-title { letter-spacing: var(--tracking); }
  .hero-title { line-height: var(--lh-hero); padding-left: 0; }
  .hero-inner { min-height: 380px; height: auto; padding-top: 62px; padding-bottom: 60px; border-bottom: 0; }
  .hero-inner::after { display: none; }
  .hero-sticky { border-bottom: 3px solid var(--lime); } /* randlose Linie bleibt am festgehaltenen Hero-Inhalt */
  .js .hero.is-scroll .hero-track { height: 450px; }

  /* Header */
  .logo img { width: 193px; }
  .site-nav, .header-mail { display: none; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    width: 40px; height: 40px; margin-right: -3px; padding: 0 0 0 10px;
    border: 0; background: none; cursor: pointer; color: var(--black);
  }
  .burger span { display: block; width: 30px; height: 4px; background: currentColor; }

  /* Linien randlos */
  .section-inner, .cta-inner { border-bottom: 0; }
  .section-inner::after, .cta-inner::after { display: none; }
  .section:not(.contact), .cta { border-bottom: 3px solid var(--lime); }
  .headline { margin-bottom: 32px; }
  .btn { width: 100%; padding: 0 16px; }

  /* Ueber uns */
  .about .section-inner { min-height: 0; padding-bottom: 0; }
  .about .headline { margin-bottom: 32px; }
  .about-visual {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 100vw; height: 380px; margin: 40px 0 0 calc(50% - 50vw);
  }
  .about-photo img {
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 48%;
  }
  .about-visual::before { width: 18%; }
  /* "&" mobil: mittig im Bildblock und an der Unterkante wie in der Figma-Komposition. */
  .about-amp {
    left: 50%; right: auto; top: auto; bottom: 4px;
    width: min(82vw, 330px);
    height: auto;
    transform: translateX(-50%);
  }

  /* Leistungen: Akkordeon */
  .services .section-inner { padding-bottom: 60px; }
  .services-grid { display: block; margin: 40px 10px 0; border-top: 1px solid var(--rule); }
  .service, .service:nth-child(n+2), .service:nth-child(even), .service:nth-child(odd) { display: block; border-left: 0; padding: 0; margin-top: 0; border-bottom: 1px solid var(--rule); }
  .service:nth-child(n+2)::before, .service:nth-child(even)::before { display: none; }
  .service .sub { min-height: 0; margin: 0; padding-top: 0; }
  .service .acc-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px 0; cursor: pointer;
  }
  .service .acc-icon { display: block; flex: 0 0 30px; width: 30px; height: 30px; margin-right: 13px; }
  .service .acc-icon::before { width: 30px; height: 6px; margin: -3px 0 0 -15px; }
  .service .acc-icon::after { width: 6px; height: 30px; margin: -15px 0 0 -3px; }
  .service .acc-panel { display: block; padding: 0 0 24px; margin-top: -8px; }
  .service .acc-panel p { margin: 0; }

  /* CTA */
  .cta-inner { flex-direction: column; align-items: stretch; gap: 32px; padding-top: 48px; padding-bottom: 56px; }
  .cta-text { text-align: center; padding-left: 0; white-space: normal; }
  .cta .btn { width: 100%; }

  /* Referenzen */
  .references .section-inner { padding-bottom: 56px; }
  .ref-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 340px);
    gap: 20px;
    margin: 40px calc(var(--gutter-r) * -1) 0 0;
    padding: 0 var(--gutter-r) 8px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .ref-grid::-webkit-scrollbar { display: none; }
  .ref-grid > li { scroll-snap-align: start; scroll-snap-stop: always; }
  .ref-mobile-nav { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 24px; }
  .ref-mobile-nav .icon-btn { width: 56px; height: 56px; }
  .ref-mobile-nav .icon-btn[disabled] { opacity: .35; cursor: default; }
  .ref-grid-status { min-width: 66px; font: 400 24px/1 var(--font-display); letter-spacing: var(--tracking); text-align: center; }

  /* Kund:innen */
  .clients .section-inner { padding-bottom: 56px; }
  .clients-cols { display: block; margin-top: 40px; font-size: 20px; }
  .clients-cols ul + ul { border-left: 0; padding-left: 0; }
  .js .clients-pager { display: flex; justify-content: center; align-items: center; gap: 26px; margin-top: 32px; }
  .clients-pager .icon-btn { width: 56px; height: 56px; }
  .clients-pager .icon-btn[disabled] { opacity: .35; cursor: default; }
  .clients-pager .icon-btn[disabled]:hover { background: var(--lime); color: var(--black); }

  /* Jobs */
  .jobs .section-inner { padding-bottom: 56px; }
  .jobs-grid { display: block; }
  .jobs-text { max-width: none; }
  .jobs-acc { margin-top: 40px; }
  .acc-btn { padding: 24px 0 24px 0; font-size: 32px; line-height: 34px; }
  .jobs-acc .acc-btn { letter-spacing: var(--tracking); }
  .acc-panel { padding: 0 0 32px; }
  .jobs-btn { width: 100%; margin-top: 40px; }

  /* Kontakt */
  .contact .section-inner { padding-bottom: 0; }
  .contact-grid { display: flex; flex-direction: column; }
  .contact-left { max-width: none; }
  .contact-btn { order: 2; margin-top: 40px; }
  .map { order: 3; width: 100vw; height: 330px; margin: 40px 0 0 calc(50% - 50vw); }
  .map-pin { width: 56px; height: 56px; }

  /* Footer */
  .footer-inner { height: 160px; }
  .footer-links { flex-direction: column; gap: 0; }
  .footer-links a { font-size: 28px; line-height: 53px; }
  .footer-linkedin { margin-right: 12px; }

  .to-top { right: 20px; bottom: 20px; width: 48px; height: 48px; }
  .to-top svg { width: 24px; height: 24px; }

  /* Popup mobil */
  .ref-dialog { width: 100vw; height: 100vh; max-height: 100vh; margin: 0; }
  .ref-panel { max-height: 100vh; height: 100vh; padding: 72px 28px 40px; }
  .ref-close { top: 16px; right: 20px; }
  .ref-head { display: block; min-height: 0; }
  .ref-title { display: block; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ref-title.is-long { font-size: 36px; line-height: 38px; }
  .ref-text { display: block; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ref-period { display: block; padding: 20px 0 0; }
  .ref-nav { justify-content: center; margin: 32px 0 0; }
  .ref-nav .icon-btn { width: 56px; height: 56px; }
  .ref-strip { display: flex; gap: 16px; margin: 28px -28px 0 0; padding: 0 28px 10px 0; overflow-x: auto; overflow-y: hidden; }
  .ref-media { flex-basis: calc(100vw - 56px); height: min(64vh, 520px); }
  .ref-media-image img { width: 100%; height: 100%; object-fit: contain; }
  .ref-media-image.has-group-label { padding-top: 50px; }
  .ref-media-image.starts-media-group { margin-left: 22px; }
  .ref-media-image.starts-media-group::before { left: -12px; }
  .ref-media-group-label { font-size: 22px; line-height: 24px; }
  .ref-strip.is-clippings .ref-media-image { width: auto; padding: 18px; }
  .ref-media-video { width: auto; height: calc((100vw - 56px) * .5625); max-height: 420px; }
  .ref-video-play { left: 18px; right: 18px; bottom: 16px; gap: 12px; font-size: 24px; }
  .ref-video-play-icon { flex-basis: 52px; width: 52px; height: 52px; font-size: 20px; }
  .ref-strip .ref-ph { width: calc(100vw - 56px); height: auto; aspect-ratio: 1 / 1; }
  .ref-link { width: 100%; }
}

/* 600 – 899: breitere Referenzkarten im Slider, Kund:innen 2 Spalten */
@media (min-width: 600px) and (max-width: 899px) {
  .ref-grid { grid-auto-columns: min(44vw, 340px); }
  .clients-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* sehr kleine Screens (unter 360 px; der Figma-Mobilframe ist 400 px breit und hat 118-px-Buttons) */
@media (max-width: 359px) {
  :root { --btn-h: 96px; }
  .about-amp { width: min(84vw, 300px); }
}

/* Kompakter Laptop-Header, auch bei Windows-Skalierung und geringer Fensterhoehe.
   --header-h steuert zugleich die Hero-Position und die Anker-Abstaende. */
@media (min-width: 1100px) and (max-width: 1519px), (min-width: 1100px) and (max-height: 800px) {
  :root {
    --header-h: 112px;
    --logo-w: clamp(250px, 22vw, 300px);
    --nav-fs: 13px;
    --nav-pad: clamp(8px, 1vw, 14px);
    --nav-gap: 24px;
  }
  .header-mail { width: 48px; height: 48px; flex-shrink: 0; }
  .header-mail svg { width: 20px; height: 20px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  :root {
    --header-h: 96px;
    --logo-w: 230px;
    --nav-fs: 12px;
    --nav-pad: 7px;
    --nav-gap: 16px;
  }
  .header-mail { flex-shrink: 0; }
}

/* --- Reduzierte Bewegung ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .hero.is-scroll .hero-track { height: 0; } /* Hero ohne Scroll-Strecke (main.js setzt zusaetzlich den Endzustand) */
}

/* ==========================================================================
   Unterseiten (agenturkodex.html, impressum.html, 404.html)
   Nutzen Header, Footer, .headline, .sub, .btn und die Tokens der Startseite.
   ========================================================================== */
.subpage .section-inner { padding-bottom: 99px; }
.page-main .section:last-child { padding-bottom: 99px; }       /* Abstand Lime-Linie -> Footer (wie Kontakt-Button -> Footer) */
.kicker {
  display: block;
  margin: 0 0 28px;
  font: 700 15px/24px var(--font-text);
  letter-spacing: 0;
  text-transform: uppercase;
}
.subpage .headline { margin-bottom: 60px; }
.nobr { white-space: nowrap; }                                  /* letztes Wort + Lime-Punkt nicht trennen */
.page-text { max-width: 760px; overflow-wrap: break-word; } /* verhindert horizontalen Scroll bei sehr schmalen Viewports (300-340px), z. B. lange Cloudflare-URL */
.page-lead { font-weight: 700; margin-bottom: 56px; }
.page-text .sub { margin: 56px 0 24px; }
.page-text > .sub:first-child, .page-lead + .sub { margin-top: 0; }
.page-text h3 { font: 700 18px/24px var(--font-text); margin: 32px 0 8px; }
.page-text .sub + h3 { margin-top: 0; }
.page-address { font-style: normal; margin-bottom: 24px; }
.page-address a { color: inherit; text-decoration: none; font-weight: 700; }
.page-address a:hover, .page-address a:focus-visible { box-shadow: inset 0 -2px 0 var(--lime); }
.page-text .link-lime { font-weight: 700; }
.page-small { margin-top: 48px; font-size: 14px; line-height: 20px; color: #555; }
.subpage .headline[id] { scroll-margin-top: calc(var(--header-h) + var(--section-pad-top) + 3px); } /* #datenschutz: Lime-Linie (3 px) landet sichtbar direkt unter dem Header */
.notfound .btn { width: 575px; max-width: 100%; margin-top: 56px; }

/* --- Job-Detailseite --------------------------------------------------------- */
.job-detail .section-inner { padding-bottom: 96px; }
.job-back {
  display: inline-block;
  margin-bottom: 48px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--lime);
}
.job-back:hover, .job-back:focus-visible { background: var(--lime); }
.job-detail .headline { max-width: 1180px; overflow-wrap: anywhere; }
.job-subtitle { margin: -14px 0 64px; font-size: 24px; line-height: 32px; font-weight: 700; }
.job-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
  gap: 90px;
  padding-top: 52px;
  border-top: 1px solid var(--rule);
}
.job-detail-intro { font-size: 22px; line-height: 31px; }
.job-detail-sections { display: grid; gap: 54px; }
.job-detail-sections .sub { margin-bottom: 24px; }
.job-detail-list { display: grid; gap: 12px; }
.job-detail-list li { position: relative; padding-left: 28px; }
.job-detail-list li::before { content: "+"; position: absolute; left: 0; top: 0; font-weight: 700; }
.job-apply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  align-items: center;
  gap: 70px;
  margin-top: 74px;
  padding-top: 48px;
  border-top: 3px solid var(--lime);
}
.job-apply p { max-width: 650px; font-size: 22px; line-height: 31px; }
.job-apply .btn { width: 100%; }
.job-error { max-width: 700px; }
.job-error p { margin-bottom: 32px; font-size: 24px; line-height: 32px; font-weight: 700; }
.job-error .btn { width: min(480px, 100%); }

@media (max-width: 899px) {
  .subpage .section-inner { padding-bottom: 56px; }
  .page-main .section:last-child { padding-bottom: 56px; }
  .subpage.section { border-bottom: 0; }                        /* Linie nicht unter dem Abstand, sondern am Ende des Inhalts */
  .subpage .section-inner::after {                              /* randlose Lime-Linie wie auf der Startseite mobil */
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0;
    height: 3px;
    background: var(--lime);
  }
  .kicker { margin-bottom: 20px; }
  .subpage .headline { margin-bottom: 32px; line-height: 1.02; }
  .page-lead { margin-bottom: 40px; }
  .page-text .sub { margin: 40px 0 16px; }
  .notfound .btn { margin-top: 40px; }
  .job-detail .section-inner { padding-bottom: 56px; }
  .job-back { margin-bottom: 36px; }
  .job-detail .headline { font-size: clamp(42px, 13vw, 64px); }
  .job-subtitle { margin: -8px 0 40px; font-size: 20px; line-height: 28px; }
  .job-detail-grid { display: block; padding-top: 36px; }
  .job-detail-intro { margin-bottom: 48px; font-size: 20px; line-height: 29px; }
  .job-detail-sections { gap: 42px; }
  .job-apply { display: block; margin-top: 56px; padding-top: 36px; }
  .job-apply p { margin-bottom: 32px; font-size: 20px; line-height: 29px; }
}