/* ═══ CRNOV — Award Landing v3 · Brand Tokens (data/brands/crnov-hms.json v4.2) ═══
   Accent: #A1C616 Lime (SOLE vivid accent) · Hover #8AAB10 · Dark #6B8A0C
   BG #FFFFFF · BG-Alt #F4F7F2 · Text #1F2418 · Text-2 #5A5E50 · Border #E3E5DA
   Inverse (genau 1 Section): BG #0B0C0A · Text #F4F6E8
   Display: Archivo Black (UPPERCASE, ls -0.03em, lh .92) · Body: Inter
   Signature: Hausdach-Glyph · Voice: direkt, anpackend, kurze Sätze
   VERBOTEN: #000 hart · Putz-Hellblau #5BC0DE · #00CC00 · Bento-Grid · Illustrations-Charaktere · Google-Fonts-CDN auf Live (Prototyp ok)
   ═══════════════════════════════════════════════════════════════════════════
   ELEMENTOR-MAP: Tokens → Global Colors/Fonts. clamp()-Typo → Global Fonts responsive.
   Reveal-States (opacity/translate/clip) sind CSS; GSAP toggelt nur .is-in bzw. inline-Werte.
   Jede Section = 1 Container. 0-Radius global, Ausnahme .btn--pill (999px). Kein Shadow, nur Lime-Glow.
*/

/* ───────────────── Tokens ───────────────── */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F4F7F2;
  --surface:#FFFFFF;
  --text:#1F2418;
  --text-2:#5A5E50;
  --text-3:#8A8E80;
  --border:#E3E5DA;
  --border-strong:#C8CCBC;

  --lime:#A1C616;
  --lime-hover:#8AAB10;
  --lime-dark:#6B8A0C;
  --lime-glow:0 0 40px rgba(161,198,22,.35);

  --maxw:1280px;
  --pad:clamp(1.25rem,.5rem + 2vw,2rem);
  --section:clamp(4.5rem,3rem + 5vw,9rem);

  /* Typo-Scale (aus JSON v4.2 / elementor-setup) */
  --fs-display:clamp(3rem,1.8rem + 6.5vw,9rem);
  --fs-h1:clamp(2.5rem,1.8rem + 4vw,6rem);
  --fs-h2:clamp(2rem,1.25rem + 2vw,3.5rem);
  --fs-h3:clamp(1.5rem,1.1rem + 1vw,2.25rem);
  --fs-body:clamp(1rem,.95rem + .25vw,1.125rem);
  --fs-lead:clamp(1.05rem,1rem + .5vw,1.375rem);

  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.6s;

  /* ── S141 Token-Lock-down: Logo-Grün · Type-UI-Stufen · Spacing-Scale · Radius/Motion ── */
  --logo-green:#93C020;      /* NUR Logo/Dach-Glyph (Eduardo: Lime bleibt UI-Accent) */
  --warning:#E0A024;         /* Marker [CRNOV bestätigen] — Redaktion/Dev, nicht Produktion */
  --fs-h4:clamp(1.25rem,1rem + .5vw,1.5rem);
  --fs-sm:.95rem;            /* kleiner Body/UI */
  --fs-xs:.82rem;           /* Meta/Sub */
  --fs-2xs:.72rem;          /* Caption/Kategorie/Index */
  --fs-label:.78rem;        /* Eyebrow/Label */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:3rem;
  --gap-sm:clamp(1rem,2vw,1.5rem);
  --gap-md:clamp(1.5rem,3vw,2.5rem);
  --gap-lg:clamp(2rem,4vw,4.5rem);
  --block:clamp(2.5rem,2rem + 3vw,5rem);
  --radius:0;
  --dur-fast:.3s;
}

/* Dark-Inverse Scope (die EINE dramatische Section + Footer) */
.is-inverse,.footer{
  --bg:#0B0C0A;
  --bg-alt:#141612;
  --surface:#141612;
  --text:#F4F6E8;
  --text-2:#A8AC9B;
  --text-3:#6A6E5E;
  --border:#26291F;
  --border-strong:#3A3F30;
  --lime-glow:0 0 48px rgba(161,198,22,.45);
}

/* ───────────────── Reset / Base ───────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}

/* Focus (A11y) — sichtbar, lime */
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--lime);color:#1F2418;padding:var(--space-3) var(--space-5);font-weight:600}
.skip-link:focus{left:1rem;top:1rem}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);width:100%}

/* Display / heading base */
.hero__title,.section-title,.proof__head,.team__head,.cta__head,.refs__head,.svc-tile__name,.stat__num,.section-head h2{
  font-family:'Archivo Black','Bebas Neue','Oswald',system-ui,sans-serif;
  font-weight:400; /* Archivo Black IST bold — nie künstlich bolden */
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.92;
  overflow-wrap:break-word; /* lange DE-Wörter (ÜBERNEHMEN) nie über den Viewport schieben */
  hyphens:manual;
}

/* Labels / Eyebrows */
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:var(--fs-label);
  color:var(--lime-dark);
}
.is-inverse .eyebrow{color:var(--lime)}

.tx-accent{color:var(--lime-dark)}
.is-inverse .tx-accent{color:var(--lime)}

/* ───────────────── Buttons ───────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-sm);
  letter-spacing:.02em;
  padding:var(--space-4) 1.6rem;border:1px solid transparent;border-radius:0;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  will-change:transform;
}
.btn--solid{background:var(--lime);color:#1F2418}
.btn--solid:hover{background:var(--lime-hover);box-shadow:var(--lime-glow);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime-dark)}
.is-inverse .btn--ghost:hover{color:var(--lime)}
.btn--outline{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--outline:hover{border-color:var(--lime);color:var(--lime);box-shadow:var(--lime-glow)}
.btn--glow{box-shadow:var(--lime-glow)}
.btn--glow:hover{box-shadow:0 0 60px rgba(161,198,22,.55)}
.btn--pill{border-radius:999px;padding:.7rem 1.4rem;background:var(--lime);color:#1F2418;font-size:var(--fs-xs)}
.btn--pill:hover{background:var(--lime-hover);box-shadow:var(--lime-glow)}

/* ═══════════════════════ 1 · NAV ═══════════════════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),padding var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding:var(--space-5) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
}
body[data-scrolled] .nav{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--border);
}
body[data-scrolled] .nav__inner{padding-block:.85rem}

/* FEEDBACK 2: echtes Logo (crnov-logo.svg). Wortmarke ~4.5:1 → 150px breit ≈ 33px hoch. SVG bleibt in Originalfarben. */
.brand{display:flex;align-items:center;gap:.7rem}
.brand__logo{width:clamp(120px,13vw,152px);height:auto;display:block}
/* Alt-Glyph-Klassen bleiben definiert (Footer nutzt sie nicht mehr, aber schadet nicht) */
.brand__glyph{width:26px;height:26px;color:var(--lime);flex:none}
.brand__glyph svg{width:100%;height:100%}
.brand__glyph--sm{width:34px;height:34px}

.nav__links{display:flex;gap:var(--space-7)}
.nav__links a{
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);position:relative;padding:var(--space-1) 0;
  transition:color var(--dur) var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--lime);
  transition:width var(--dur) var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{width:100%}

/* ── S140: Dark-Hero-Nav (nur Homepage, am Top) — weißes Logo + helle Links; beim Scrollen zurück auf dunkel ── */
.brand__logo--light{display:none}
body.has-dark-hero:not([data-scrolled]) .brand__logo--dark{display:none}
body.has-dark-hero:not([data-scrolled]) .brand__logo--light{display:block}
body.has-dark-hero:not([data-scrolled]) .nav__links a{color:rgba(244,246,232,.82)}
body.has-dark-hero:not([data-scrolled]) .nav__links a:hover{color:#FFFFFF}
body.has-dark-hero:not([data-scrolled]) .burger span{background:#F4F6E8}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{display:block;width:26px;height:2px;background:var(--text);transition:transform .35s var(--ease),opacity .25s}
body.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* Overlay Menu */
.overlay{
  position:fixed;inset:0;z-index:99;background:#0B0C0A;color:#F4F6E8;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-7) var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease);
  pointer-events:none;
}
body.menu-open .overlay{clip-path:inset(0 0 0 0);pointer-events:auto}
/* FEEDBACK 2: Logo im Overlay-Kopf. Dunkler Wortmark-Teil (#3c3c3b) würde auf #0B0C0A untergehen →
   dezente helle Unterlage, damit die Original-Logofarben korrekt lesen (SVG NICHT umgefärbt). */
.overlay__logo{width:clamp(140px,42vw,180px);height:auto;display:block;margin-bottom:2.25rem}
.overlay__nav{display:flex;flex-direction:column;gap:var(--space-2)}
.overlay__nav a{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(2.5rem,10vw,4rem);line-height:1;display:flex;align-items:baseline;gap:var(--space-4);
  padding:.4rem 0;transition:color var(--dur) var(--ease);
}
.overlay__nav a:hover{color:var(--lime)}
.overlay__idx{font-family:'Inter',sans-serif;font-size:var(--fs-sm);font-weight:600;color:var(--lime);letter-spacing:.1em}
.overlay__foot{margin-top:var(--space-8);display:flex;flex-direction:column;gap:.4rem;color:#A8AC9B;font-size:var(--fs-sm)}
.overlay__foot a{color:#F4F6E8;font-weight:600}

/* ═══════════════════════ 2 · HERO ═══════════════════════ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:7rem var(--pad) var(--space-8);overflow:hidden}
/* FEEDBACK 1: Bildspalte groß (~46%) → dominante Hero-Präsenz statt Thumbnail.
   minmax(0,..) auf beide Spalten, sonst sprengt das Riesen-Display-Wort (ÜBERNEHMEN)
   die fr-Fraktion und die Bildspalte kollabiert. */
.hero__grid{
  max-width:var(--maxw);margin-inline:auto;width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center;
}
.hero__eyebrow{margin-bottom:var(--space-6)}
/* FEEDBACK 1: Hero-Display etwas kleiner gedeckelt (max 5.5rem statt 9rem), damit das längste Wort
   (ÜBERNEHMEN/GROBEN) in die schmalere Textspalte passt und die Bildspalte ~46% behält. */
.hero__title{font-size:clamp(2.5rem,1rem + 5vw,5.5rem);color:var(--text);margin-bottom:var(--space-7)}
.line{display:block;overflow:hidden}
.line__inner{display:block;will-change:transform}
.line--accent{color:var(--lime-dark)}

.hero__meta{display:flex;align-items:flex-start;gap:var(--space-5);max-width:34rem;margin-bottom:2.25rem}
.hero__rule{width:56px;height:2px;background:var(--lime);margin-top:.9rem;flex:none}
.hero__lead{font-size:var(--fs-lead);color:var(--text-2);line-height:1.4}
.hero__actions{display:flex;gap:var(--space-4);flex-wrap:wrap}

/* ── S140 Team-Hero: full-bleed Bild + Verlauf oben-links → unten-rechts transparent (Eduardo) ── */
.hero--team{justify-content:center}
.hero--team .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;z-index:0;filter:contrast(1.03) saturate(1.04)}
.hero--team .hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,rgba(11,12,10,.94) 0%,rgba(11,12,10,.8) 24%,rgba(11,12,10,.48) 48%,rgba(11,12,10,.12) 68%,transparent 84%)}
.hero--team .hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%}
.hero--team .hero__title{max-width:16ch}
.hero--team .hero__lead{color:#E7E9DC}
.is-inverse .line--accent{color:var(--lime)}
.hero--team .btn--ghost{border-color:rgba(244,246,232,.45);color:#F4F6E8}
.hero--team .btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.hero--team .scroll-cue__label{color:rgba(244,246,232,.72)}

.hero__col--media{position:relative}
/* FEEDBACK 1: großes, VOLLFARBIGES Hero-Bild (kein grayscale-until-hover), kräftige Präsenz.
   Bottom-Scrim (Charcoal-Gradient) hebt die Arbeiter-Silhouette. Parallax + Lime-Corner bleiben. */
.hero__media{position:relative;overflow:hidden;border:1px solid var(--border)}
.hero__media img{
  width:100%;aspect-ratio:16/13;object-fit:cover;
  filter:contrast(1.03) saturate(1.04);
  transition:transform 1.2s var(--ease);
  transform:scale(1.05); /* GSAP parallax bewegt zusätzlich yPercent */
}
.hero__media:hover img,.hero__media.is-in img{transform:scale(1)}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,12,10,.62) 0%,rgba(11,12,10,.12) 38%,transparent 62%);}
.hero__caption{
  position:absolute;left:0;bottom:0;right:0;padding:2.5rem 1.4rem 1.1rem;z-index:2;
  color:#F4F6E8;font-size:var(--fs-xs);letter-spacing:.01em;font-weight:500;
  text-shadow:0 1px 12px rgba(11,12,10,.5);
}
.hero__dot{position:absolute;top:-14px;right:-14px;width:32px;height:32px;background:var(--lime);border-radius:0;z-index:3;box-shadow:var(--lime-glow)}

.scroll-cue{position:absolute;left:var(--pad);bottom:2rem;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.scroll-cue__label{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.22em;color:var(--text-3);font-weight:600}
.scroll-cue__line{width:1px;height:44px;background:linear-gradient(var(--lime),transparent);position:relative;overflow:hidden}
.scroll-cue__line::after{content:"";position:absolute;top:0;left:0;width:100%;height:14px;background:var(--lime);animation:scrollcue 1.8s var(--ease) infinite}
@keyframes scrollcue{0%{transform:translateY(-14px)}100%{transform:translateY(44px)}}

/* ═══════════════════════ 3 · MARQUEE ═══════════════════════ */
.marquee{background:var(--text);color:var(--bg);padding:1.4rem 0;overflow:hidden;white-space:nowrap;border-block:1px solid var(--text)}
.marquee__track{display:inline-flex;align-items:center;gap:2.5rem;animation:marquee 28s linear infinite;will-change:transform}
.marquee__item{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.5rem,4vw,2.6rem);color:#FFFFFF}
.marquee__glyph{color:var(--lime);font-size:clamp(1rem,2.2vw,1.4rem);line-height:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ═══════════════════════ 4 · SIGNATURE + PROOF (Manifest-Draw + KPIs, gemerged) ═══════════════════════ */
/* FEEDBACK 3: asymmetrischer Split — links Signatur (Draw + kompaktes Statement, sticky), rechts KPI-Liste. */
.proof{background:var(--bg-alt)}
.pin-wrap{height:200vh;position:relative} /* Scroll-Distanz für scrub */
.pin-stage{
  position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:6rem 0 4rem;overflow:hidden;
}
.proof__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,6rem);align-items:center;width:100%;
}

/* Spalte A — Signatur */
.proof__sig{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.proof__draw{width:min(78%,300px)}
#hausdach-draw{width:100%;height:auto;color:var(--text);display:block}
.hd-fill{fill:var(--logo-green);opacity:0} /* Logo-Grün; GSAP setzt opacity ab ~70% */
/* Statement bewusst kleiner als Hero (fs-h2 statt fs-display/h1) → liest nicht wie ein zweiter Hero */
.proof__head{font-size:var(--fs-h2);color:var(--text);margin:var(--space-2) 0 0}
.proof__sig-line{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;font-size:1.05rem;color:var(--lime-dark)}
.proof__progress{margin-top:var(--space-3);width:min(78%,300px);height:2px;background:var(--border);display:block}
.proof__progress-fill{display:block;height:100%;width:0;background:var(--lime)}

/* Spalte B — KPI-Liste, vertikal mit Hairline-Dividern */
.proof__stats{display:flex;flex-direction:column;border-top:1px solid var(--border-strong)}
.stat{display:flex;align-items:baseline;gap:clamp(1rem,3vw,2rem);padding:clamp(1.1rem,2.5vw,1.9rem) 0;border-bottom:1px solid var(--border)}
.stat__num{font-size:clamp(3rem,6vw,5rem);color:var(--text);font-variant-numeric:tabular-nums;line-height:.85;flex:none;min-width:3.2ch}
.stat__meta{display:flex;flex-direction:column;gap:var(--space-1)}
.stat__label{font-family:'Inter',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-xs);color:var(--lime-dark)}
.stat__desc{color:var(--text-3);font-size:var(--fs-xs)}
.tag-check{color:var(--warning);font-size:var(--fs-2xs);letter-spacing:.02em}

/* ═══════════════════════ 6 · LEISTUNGEN (Bild-Background-Kacheln) ═══════════════════════ */
/* FEEDBACK 4: große Kacheln, echtes Bild als Background + Marken-Charcoal-Gradient-Overlay. */
.services{padding:var(--section) 0;background:var(--bg-alt)}
.section-head{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section-head .eyebrow{margin-bottom:var(--space-4)}
.section-title{font-size:var(--fs-h2);color:var(--text)}

/* Bewusst asymmetrisches 12-Spalten-Raster: 01 breit · 02+03 · 04+05 breit — kein Bento-Gleichmaß. */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.75rem,1.5vw,1.25rem)}
.svc-tile{
  position:relative;grid-column:span 6;min-height:clamp(260px,32vw,400px);
  overflow:hidden;border:1px solid var(--border);
  display:flex;isolation:isolate;
}
.svc-tile--wide{grid-column:span 12}
.svc-tile__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease);transform:scale(1.04);
}
/* Overlay = NUR Marken-Charcoal (kein Fremd-Hue), Text lesbar. Lime-Tint dezent oben. */
.svc-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(31,36,24,.88) 0%,rgba(31,36,24,.55) 45%,rgba(31,36,24,.18) 100%);
  transition:background var(--dur) var(--ease);
}
.svc-tile:hover .svc-tile__img{transform:scale(1.09)}
.svc-tile:hover::before{background:linear-gradient(to top,rgba(31,36,24,.8) 0%,rgba(31,36,24,.42) 45%,rgba(31,36,24,.08) 100%)}
.svc-tile__body{
  position:relative;width:100%;align-self:flex-end;
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(1.4rem,3vw,2.5rem);
}
.svc-tile__idx{
  font-family:'Archivo Black',sans-serif;font-size:clamp(1.8rem,4vw,3.25rem);letter-spacing:-.03em;line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px rgba(244,246,232,.55);text-stroke:1.5px rgba(244,246,232,.55);
  transition:-webkit-text-stroke-color var(--dur) var(--ease);
}
.svc-tile:hover .svc-tile__idx{-webkit-text-stroke-color:var(--lime)}
.svc-tile__txt{min-width:0}
.svc-tile__name{font-size:clamp(1.6rem,3.2vw,2.6rem);color:#F4F6E8;margin-bottom:var(--space-2);hyphens:auto}
.svc-tile__line{color:rgba(244,246,232,.86);max-width:40ch;font-size:var(--fs-sm);line-height:1.4}
.svc-tile__arrow{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--lime);line-height:1;transition:transform var(--dur) var(--ease);flex:none}
.svc-tile:hover .svc-tile__arrow{transform:translateX(8px)}

/* ═══════════════════════ 7 · REFERENZEN ═══════════════════════ */
.refs{padding:var(--section) 0;background:var(--bg);text-align:center}
.refs .eyebrow{margin-bottom:var(--space-4)}
.refs__head{font-size:var(--fs-h3);color:var(--text);max-width:24ch;margin:0 auto clamp(2.5rem,5vw,4rem)}
.refs__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(1rem,3vw,2rem)}
/* FEEDBACK 5: FARBIGE Logo-Platzhalter in Marken-Signaturfarben (Trust-Impression).
   Farbe hier erlaubt (Fremd-Logos = Ausnahme zum Lime-only). Wird 1:1 durch echte <img> ersetzt, sobald da. */
.ref-logo{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1;
  padding:.7rem 1.4rem;min-width:clamp(150px,20vw,220px);height:clamp(64px,7vw,96px);
  border-radius:4px;color:#FFFFFF;background:var(--text-2);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.ref-logo:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(31,36,24,.18)}
.ref-logo--rewe{background:#CC071E}                       /* REWE Rot */
.ref-logo--edeka{background:#005CA9;color:#FFE500;        /* EDEKA Blau + Gelb-Wortmarke */
  border:3px solid #FFE500}
.ref-logo--ihle{background:#8A2432}                       /* IHLE Bäckerei Bordeaux/Braun (neutral-warm) */
.ref-logo--sub{
  font-size:clamp(1.1rem,2.6vw,1.7rem);min-width:clamp(120px,15vw,170px);height:clamp(52px,5.5vw,72px);
  background:#3C3C3B;color:#F4F6E8;                        /* Hausverwaltungen: neutrales Charcoal */
}
.refs__cat{margin:clamp(2rem,4vw,3rem) 0 1.25rem;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.2em;color:var(--text-3);font-weight:600}
.refs__row--sub{border-top:1px solid var(--border);padding-top:var(--gap-md);max-width:720px;margin-inline:auto}

/* ═══════════════════════ 8 · TEAM ═══════════════════════ */
.team{background:var(--bg-alt)}
.team__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:70vh}
.team__media{position:relative;overflow:hidden}
.team__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.02)}
.team__cap{position:absolute;left:1.25rem;bottom:1.25rem;background:var(--lime);color:#1F2418;font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.12em;padding:var(--space-2) .9rem}
.team__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,5vw,5rem)}
.team__copy .eyebrow{margin-bottom:var(--space-4)}
.team__head{font-size:var(--fs-h2);color:var(--text);margin-bottom:var(--space-6)}
.team__lead{color:var(--text-2);font-size:var(--fs-lead);line-height:1.5;max-width:34rem;margin-bottom:var(--space-7)}
.team__points{display:flex;flex-direction:column;gap:.85rem;border-top:1px solid var(--border);padding-top:var(--space-6);max-width:34rem}
.team__points li{position:relative;padding-left:1.75rem;color:var(--text-2);font-size:var(--fs-sm)}
.team__points li::before{content:"▲";position:absolute;left:0;top:.05rem;color:var(--lime-dark);font-size:var(--fs-2xs)}

/* ═══════════════════════ 9 · CTA (DARK-INVERSE) ═══════════════════════ */
.cta{background:var(--bg);color:var(--text);padding:clamp(5rem,9vw,10rem) 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:50%;left:50%;width:60vw;height:60vw;max-width:800px;max-height:800px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(161,198,22,.12),transparent 60%);pointer-events:none}
.cta__inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__inner .eyebrow{margin-bottom:var(--space-6)}
.cta__head{font-size:var(--fs-display);margin-bottom:1.75rem}
.cta__head .line__inner{color:var(--text)}
.cta__head .line--accent{color:var(--lime)}
.cta__lead{max-width:40rem;color:var(--text-2);font-size:var(--fs-lead);line-height:1.5;margin-bottom:2.5rem}
.cta__actions{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
.cta__note{margin-top:1.75rem;color:var(--text-3);font-size:var(--fs-xs)}

/* ═══════════════════════ 10 · FOOTER ═══════════════════════ */
.footer{background:var(--bg);color:var(--text);padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid var(--border)}
.footer__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-7);align-items:start;padding-block:0 var(--space-8)}
.footer__brand{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
/* FEEDBACK S139: weiße Logo-Wortmarke (crnov-logo-white.svg) liest direkt auf Dark — keine Platte/Padding mehr. */
.footer__logo{width:clamp(150px,20vw,190px);height:auto;display:block}
.footer__tag{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;font-size:1.05rem;color:var(--text);max-width:14ch;line-height:1}
.footer__nap{font-style:normal;color:var(--text-2);font-size:var(--fs-sm);line-height:1.7}
.footer__nap strong{color:var(--text);font-weight:600}
.footer__nap a{color:var(--text-2);border-bottom:1px solid var(--border-strong)}
.footer__nap a:hover{color:var(--lime)}
.footer__legal{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-sm)}
.footer__legal a{color:var(--text-2)}
.footer__legal a:hover{color:var(--lime)}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-6);border-top:1px solid var(--border);color:var(--text-3);font-size:var(--fs-xs)}

/* ───────────────── Reveal base states (GSAP toggelt) ───────────────── */
[data-reveal],[data-reveal-stagger]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in,[data-reveal-stagger].is-in{opacity:1;transform:none}
.nav[data-reveal]{opacity:1;transform:none} /* Nav nie versteckt halten */

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media(max-width:1024px){
  .hero__grid{grid-template-columns:1fr 1fr}
  .proof__grid{gap:2.5rem}
}
@media(max-width:860px){
  .nav__links,.nav__cta{display:none}
  .burger{display:flex}
  .hero{padding-top:6rem}
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__col--media{order:-1}
  .hero__media img{aspect-ratio:16/11}
  /* Merged Proof-Section: 1-spaltig, Draw+Statement zuerst, dann KPI-Liste. Kein Pin. */
  .proof__grid{grid-template-columns:1fr;gap:2.5rem;text-align:left}
  .proof__sig{align-items:flex-start}
  .proof__draw{width:min(60%,260px)}
  .proof__progress{display:none}
  .pin-wrap{height:auto} /* Mobile: kein Pin, natürlicher Flow — Draw triggert on-enter (JS) */
  .pin-stage{position:relative;min-height:0;height:auto;padding-block:var(--section)}
  /* Services: von 12-Spalten-Asymmetrie auf 1 Spalte, alle Kacheln full-width. */
  .svc-tile,.svc-tile--wide{grid-column:1/-1;min-height:clamp(220px,52vw,320px)}
  .team__grid{grid-template-columns:1fr;min-height:0}
  .team__media{aspect-ratio:4/3}
  .footer__grid{grid-template-columns:1fr;gap:var(--space-7)}
}
@media(max-width:520px){
  /* Display-Floor senken: lange DE-Wörter (ÜBERNEHMEN/BESPRECHEN) müssen bei 375px passen */
  :root{--fs-display:clamp(2.35rem,5vw + 1.4rem,3rem);--fs-h1:clamp(2.1rem,4vw + 1.2rem,2.75rem);--fs-h2:clamp(1.75rem,3vw + 1rem,2.25rem)}
  .hero__title,.cta__head,.proof__head,.section-title,.team__head{word-break:break-word}
  .hero__meta{flex-direction:column;gap:var(--space-3)}
  .hero__rule{margin-top:var(--space-1)}
  .hero__actions .btn,.cta__actions .btn{width:100%}
  .stat{gap:var(--space-4)}
  .stat__num{font-size:clamp(2.6rem,14vw,3.4rem);min-width:2.8ch}
  .svc-tile__body{grid-template-columns:auto 1fr;gap:var(--space-3)}
  .svc-tile__arrow{grid-column:1/-1;justify-self:start;margin-top:var(--space-1)}
  .footer__base{flex-direction:column}
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-reveal-stagger]{opacity:1!important;transform:none!important}
  .hero__title .line__inner,.cta__head .line__inner{transform:none!important}
  .hero__media img,.svc-tile__img,.team__media img{filter:none!important;transform:none!important}
  .hd-fill{opacity:1!important}
  .hd-stroke .hd-path{stroke-dashoffset:0!important}
  .proof__progress-fill{width:100%!important}
  .marquee__track{animation:none!important}
  .scroll-cue__line::after{animation:none!important}
}

/* ═══ S140 Team-Hero Mobile: Overlay vertikaler (Text liest überall), Team-Ausschnitt sichtbar ═══ */
@media(max-width:860px){
  .hero--team .hero__overlay{background:linear-gradient(180deg,rgba(11,12,10,.9) 0%,rgba(11,12,10,.62) 42%,rgba(11,12,10,.42) 72%,rgba(11,12,10,.58) 100%)}
  .hero--team .hero__bg{object-position:66% center}
  .hero--team .hero__title{max-width:none;font-size:clamp(2rem,8.5vw,3.4rem)}
}