/* =====================================================================
   CASEA AG — Premium Consulting Heritage
   Static, dependency-free stylesheet
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand — aligned to logo: graphite grey + brand yellow #f9da03 */
  --navy:        #353B42;   /* graphite (primary dark surface) */
  --navy-900:    #1c1f23;   /* near-black graphite */
  --navy-800:    #23272d;
  --navy-700:    #3a4048;   /* gloss mid */
  --navy-600:    #4a515b;   /* gloss top / sheen */
  --gold:        #f9da03;   /* brand yellow — fills, arc, accents on dark */
  --gold-bright: #ffe53a;   /* hover */
  --gold-ink:    #8a6f00;   /* readable yellow for accent text on light bg */
  --gold-pale:   #f3e7a8;

  /* Logo greys */
  --grey:        #868b91;
  --grey-light:  #929699;

  /* Neutrals */
  --paper:   #F7F8F9;
  --paper-2: #ECEEF0;
  --white:   #ffffff;
  --ink:     #22262a;   /* headings on light (graphite) */
  --slate:   #4a5158;   /* body on light (grey-slate) */
  --muted:   #868b91;   /* logo grey */
  --line:    #e3e6e9;
  --line-strong: #d4d8dc;

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing (8pt) */
  --s-1: 0.5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;  --s-7: 6rem;    --s-8: 8rem;

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Misc */
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(22,23,25,.06), 0 2px 8px rgba(22,23,25,.05);
  --shadow-md: 0 6px 18px rgba(22,23,25,.08), 0 18px 40px rgba(22,23,25,.07);
  --shadow-lg: 0 20px 50px rgba(16,17,19,.20);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 88px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 460;
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-optical-sizing: none;
}
strong { font-weight: 600; color: var(--ink); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.section--paper2 { background: var(--paper-2); }
.section--navy {
  background: var(--navy);
  color: rgba(255,255,255,.82);
  --ink: #ffffff;
  --slate: rgba(255,255,255,.78);
  --muted: rgba(255,255,255,.6);
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.22);
  --gold-ink: var(--gold);   /* bright yellow accent text on dark */
}

/* ---------- Eyebrow (editorial label) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  opacity: .8;
}
.eyebrow--center { justify-content: center; }

.section-head { max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.section-lede {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--slate);
  line-height: 1.65;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .92rem 1.6rem;
  font-weight: 600; font-size: .95rem;
  letter-spacing: .01em;
  border-radius: var(--radius);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { background: var(--gold); color: #20210a; box-shadow: 0 8px 22px rgba(249,218,3,.30); }
.btn--primary:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(249,218,3,.40); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--gold-ink);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.link-arrow:hover { border-color: var(--gold); }
.link-arrow .arrow { transition: transform .3s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(247,248,249,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* compact + subtle shadow once scrolled */
.site-header.is-scrolled {
  height: 72px;
  background: rgba(247,248,249,.94);
  box-shadow: 0 6px 24px rgba(22,23,25,.06);
}

.brand { display: inline-flex; align-items: center; }
/* the complete real logo lockup (A + arc + CASEA + rules) — used as one unit */
.brand__logo { height: 60px; width: auto; display: block; }
.is-scrolled .brand__logo { height: 50px; }

/* Header/logo transitions are enabled only after first paint (.ready added by JS),
   so the initial layout never animates from the image's intrinsic size — kills the
   "logo loads big then shrinks" flash on reload. */
.ready .site-header {
  transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease);
}
.ready .brand__logo { transition: height .4s var(--ease); }

/* Nav */
.nav { display: flex; align-items: center; gap: .08rem; }
.nav a {
  position: relative;
  padding: .5rem .62rem;
  font-size: .9rem; font-weight: 500;
  white-space: nowrap;
  color: var(--slate);
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .25rem;
  height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover, .nav a.active { color: var(--navy); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: .7rem; }

/* Language switch */
.lang {
  display: inline-flex; align-items: center;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  border: 1px solid var(--line-strong);
  border-radius: 100px; overflow: hidden;
}
.lang a { padding: .34rem .7rem; color: var(--muted); transition: background .3s, color .3s; }
.lang a.is-current { background: var(--gold); color: #20210a; }
.lang a:not(.is-current):hover { color: var(--navy); }

/* compact header CTA — smaller than the default .btn used in-page */
.nav-cta {
  display: inline-flex;
  padding: .56rem 1.05rem;
  font-size: .84rem;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(249,218,3,.22);
}

/* Burger */
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--navy); transition: transform .35s var(--ease), opacity .25s, background .4s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--header-h);
  color: var(--ink);
  background:
    radial-gradient(120% 120% at 82% 0%, #ffffff 0%, rgba(255,255,255,0) 58%),
    linear-gradient(165deg, #ffffff 0%, var(--paper) 48%, var(--paper-2) 100%);
  overflow: hidden;
}
/* fine diagonal line texture (echoes the catalog banners) */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(22,23,25,.028) 0 1px, transparent 1px 78px);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 120%, rgba(249,218,3,.10), transparent 60%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 880px; padding-block: clamp(3rem,8vh,6rem); }

.hero__eyebrow { color: var(--gold-ink); }
.hero h1 {
  font-size: clamp(2.7rem, 6.2vw, 5.1rem);
  font-weight: 420;
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.hero h1 .accent { font-style: italic; color: var(--gold-ink); font-weight: 460; }
.hero__lede {
  margin-top: 1.6rem;
  max-width: 620px;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.6;
  color: var(--slate);
}
.hero__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* the EXACT brand A (real logo artwork) as the hero motif, right side */
.hero__brandA {
  position: absolute; z-index: 1;
  right: -1%; top: 50%; transform: translateY(-50%);
  width: min(48vw, 620px); height: auto; opacity: .9;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}
/* entrance: a left→right sweep-reveal that echoes the growth arc being drawn */
@media (prefers-reduced-motion: no-preference) {
  .hero__brandA {
    opacity: 0; clip-path: inset(0 100% 0 0);
    animation: brandAreveal 1.5s var(--ease) .35s forwards;
  }
}
@keyframes brandAreveal {
  0%   { opacity: 0;  clip-path: inset(0 100% 0 0); }
  100% { opacity: .9; clip-path: inset(0 0 0 0); }
}

/* mobile: SAME wipe-in (A + yellow sweeps in), just softer — fainter final A,
   slightly slower, and the bg photo fades in too for a smoother entrance */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero__brandA {
    opacity: 0; clip-path: inset(0 100% 0 0);
    animation: brandArevealMobile 1.8s var(--ease) .35s forwards;
  }
  .hero__bg {
    opacity: 0;
    animation: heroBgFade 2.4s var(--ease) .2s forwards;
  }
}
@keyframes brandArevealMobile {
  0%   { opacity: 0;  clip-path: inset(0 100% 0 0); }
  100% { opacity: .5; clip-path: inset(0 0 0 0); }
}
@keyframes heroBgFade {
  from { opacity: 0; }
  to   { opacity: .12; }
}

/* hero scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(22,23,25,.4);
}
.hero__cue .dot { width: 1px; height: 42px; background: linear-gradient(rgba(22,23,25,.4), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{transform:scaleY(.3);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0;transform-origin:top} }

/* =====================================================================
   STATS BAR
   ===================================================================== */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stat { background: var(--white); padding: 2rem 1.5rem; text-align: center; }
.stat__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 3.5vw, 2.9rem); color: var(--navy); line-height: 1;
}
.stat__num .suffix { color: var(--gold-ink); }
.stat__label { margin-top: .6rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* =====================================================================
   WHO WE ARE
   ===================================================================== */
.who-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
/* Feedback Ana-Sophia 2026-08-01: unter dem Bild standen drei Schriftgrößen übereinander
   (Titel / Lede / Fließtext) — "das sieht aus wie drei verschiedene Schriftblöcke".
   Stufe 1 war ihr Wortlaut: gleiche Größe wie der Fließtext, nur fett. Das löste die
   Größen, nicht den Eindruck — der fette Block ist drei Zeilen lang und wiederholt die
   Überschrift, liest also weiter als zweite Headline.
   Stufe 2 (jetzt): kein Fettschnitt mehr, nur die dunklere Textfarbe als Führung.
   Damit gibt es genau EINEN Typo-Sprung in der Sektion.
   ZUM ZURÜCKDREHEN auf ihren Wortlaut: font-weight: 700 wieder setzen. */
.who-grid .lede-xl { font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.who-grid p + p { margin-top: 1.2rem; }
.who-portrait { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 360px; }
.who-portrait img { width: 100%; height: 100%; object-fit: cover; }

.vmo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.vmo__item { background: var(--white); padding: 1.6rem 1.5rem; }
.vmo__item h3 { font-size: 1.05rem; color: var(--navy); display: flex; align-items: baseline; gap: .6rem; }
.vmo__item h3 .k { font-family: var(--font-body); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.vmo__item p { margin-top: .55rem; font-size: .95rem; line-height: 1.6; }

/* =====================================================================
   SERVICES
   ===================================================================== */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2.2rem); }
.service-card {
  --pad: clamp(1.8rem, 3vw, 2.6rem);
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--pad);
  overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.service-card__img {
  display: block; width: calc(100% + 2 * var(--pad)); max-width: none;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 1.7rem;
  height: clamp(160px, 22vw, 220px); object-fit: cover;
}
.service-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; z-index: 2;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-card .num { font-family: var(--font-display); font-size: 1rem; color: var(--gold-ink); letter-spacing: .1em; }
.service-card h3 { margin-top: .4rem; font-size: clamp(1.5rem,2.4vw,1.95rem); }
.service-card .tag { margin-top: .9rem; font-size: 1.08rem; color: var(--navy); font-weight: 600; font-family: var(--font-body); }
.service-card p { margin-top: .9rem; }
.feature-list { margin-top: 1.6rem; display: grid; gap: .7rem; }
.feature-list li { position: relative; padding-left: 1.6rem; font-size: .97rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
  border: 1.5px solid var(--gold-ink); transform: rotate(45deg);
}

/* region row */
.regions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.region {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  padding: .42rem .9rem; border-radius: 100px;
  background: var(--navy); color: #fff;
}

/* =====================================================================
   STRATEGY (2P, four pillars)
   ===================================================================== */
.strategy-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.pillars { margin-top: clamp(2.5rem,5vw,3.5rem); display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pillar { background: var(--white); padding: clamp(1.8rem,3vw,2.6rem); transition: background .4s var(--ease); }
.pillar:hover { background: #fdfbe9; }
.pillar__top { display: flex; align-items: center; gap: 1rem; }
.pillar__num {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-ink);
  border: 1px solid var(--gold-ink);
}
.pillar h3 { font-size: 1.25rem; }
.pillar p { margin-top: 1rem; font-size: .97rem; }

/* =====================================================================
   INDUSTRIES
   ===================================================================== */
.industries { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.4rem); }
.industry { position: relative; aspect-ratio: 3 / 2.05; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.industry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.industry:hover .industry__img { transform: scale(1.07); }
.industry__cap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.15rem 1.25rem;
  background: linear-gradient(to top, rgba(13,14,15,.88) 0%, rgba(13,14,15,.30) 46%, rgba(13,14,15,0) 78%); }
.industry__cap h3 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; line-height: 1.25; }
.industry__cap h3::before { content: ""; display: block; width: 26px; height: 2px; background: var(--gold); margin-bottom: .55rem;
  transform: scaleX(.5); transform-origin: left; transition: transform .5s var(--ease); }
.industry:hover .industry__cap h3::before { transform: scaleX(1); }

/* =====================================================================
   HOLDINGS & ENGAGEMENT
   ===================================================================== */
.holdings { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.2rem,2.5vw,1.8rem); }
/* Farben laufen über die Section-Tokens (--ink/--slate/--muted/--gold-ink), damit die
   Sektion auf hellem UND auf dunklem Grund funktioniert. Vorher war alles hart auf Weiß
   verdrahtet und damit an .section--navy gebunden. Die Dunkel-Variante steht unten. */
.holding {
  background: rgba(0,0,0,.022); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.8rem;
  transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.holding:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(249,218,3,.10); }
.holding__name { display: flex; align-items: baseline; gap: .7rem; }
.holding__name h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: 0; }
.holding__type { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); padding: .2rem .55rem; border: 1px solid var(--line-strong); border-radius: 100px; }
.holding p { margin-top: .9rem; font-size: .95rem; color: var(--slate); }
.holding .link-arrow { margin-top: 1.1rem; font-size: .9rem; }

.network { margin-top: clamp(2rem,4vw,3rem); display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.network .net-label { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: .5rem; }
.network a { font-size: .9rem; color: var(--slate); padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 100px; transition: border-color .3s, color .3s; }
.network a:hover { border-color: var(--gold); color: var(--gold-ink); }

/* Dunkel-Variante — greift automatisch, falls die Sektion wieder auf .section--navy gelegt wird */
.section--navy .holding { background: rgba(255,255,255,.04); }
.section--navy .holding:hover { background: rgba(249,218,3,.07); }
.section--navy .holding__type { color: var(--gold-bright); }
.section--navy .network a:hover { color: var(--gold-bright); }

/* =====================================================================
   VALUES
   ===================================================================== */
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.value { background: var(--white); padding: 1.9rem; display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; }
.value__k { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; color: var(--gold-ink); line-height: 1; opacity: .85; }
.value h3 { font-size: 1.2rem; }
.value p { margin-top: .55rem; font-size: .95rem; }
.value:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 5th spans full width */

/* =====================================================================
   TEAM
   ===================================================================== */
/* Vier Menschen sind KEINE Sequenz — deshalb hier bewusst keine 01/02/03-Nummerierung.
   Die nutzt die Seite nur dort, wo Reihenfolge Information trägt (Werte, Vision/Mission/Ursprung).

   Die Portraits laufen im Hochformat 4:5 mit linksbündiger Beschriftung. Zusammengehalten
   werden die vier sehr unterschiedlichen Fotohintergründe über die leichte Entsättigung und
   den Schleier am unteren Rand. */
.team { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.1rem,2.6vw,2rem); }
.member { text-align: left; }
.member__photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--navy-700), var(--navy));
  display: grid; place-items: center; position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.member__initials { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-bright); position: relative; z-index: 1; }

/* Portrait-Variante — echtes Foto statt Initialen-Platzhalter.
   Die vier Bilder stammen aus vier Settings (eine Außenaufnahme, drei verschiedene Studios).
   Die leichte Entsättigung zieht sie in dieselbe Farbfamilie, ohne die Gesichter kalt zu machen. */
.member__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 1;
  filter: saturate(.8) contrast(1.03);
}
/* Schleier: nimmt den Hintergründen Buntheit und gibt dem Bogen einen ruhigen Grund */
.member__photo--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(53,59,66,.30), rgba(53,59,66,.05) 42%, transparent 70%);
}
.member h3 { margin-top: 1.1rem; font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; }
.member .role {
  margin-top: .3rem; font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink);
}
/* vorbereitet für die LinkedIn-Links — greift, sobald die URLs geliefert sind */
.member__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .82rem; color: var(--muted); transition: color .3s var(--ease); }
.member__link:hover { color: var(--gold-ink); }


.board { margin-top: clamp(2.5rem,5vw,3.5rem); border-top: 1px solid var(--line); padding-top: 2rem; }
.board h3 { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body); font-weight: 600; margin-bottom: 1.2rem; }
.board__list { display: flex; flex-wrap: wrap; gap: 2.2rem; }
.board__item .nm { font-weight: 600; color: var(--ink); }
.board__item .rl { font-size: .85rem; color: var(--muted); }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.contact-cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.contact-card { background: rgba(255,255,255,.03); padding: 1.5rem 1.6rem; display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-card .ico { flex: none; width: 26px; height: 26px; color: var(--gold-bright); margin-top: .15rem; }
.contact-card .k { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.contact-card .v { font-size: 1.05rem; color: #fff; margin-top: .15rem; }
.contact-card a.v:hover { color: var(--gold-bright); }

.contact-cta h2 { font-size: clamp(2rem,3.6vw,3rem); }
.contact-cta p { margin-top: 1.1rem; color: rgba(255,255,255,.75); font-size: 1.1rem; }
.contact-cta .btn { margin-top: 1.8rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--paper); color: var(--slate); padding-block: clamp(3rem,6vw,4.5rem) 2rem; font-size: .9rem; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.footer-brand { display: flex; align-items: center; }
/* full real grey lockup (A + arc + CASEA + rules) on the light footer */
.footer-logo { height: 72px; width: auto; display: block; }
.footer-col h4 { font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.footer-col a, .footer-col p { display: block; color: var(--slate); margin-bottom: .55rem; }
.footer-col a:hover { color: var(--gold-ink); }
.footer-tag { margin-top: 1.2rem; max-width: 320px; line-height: 1.6; }

.impressum { padding-top: 2rem; }
.impressum h4 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.impressum .imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.2rem 2.5rem; font-size: .83rem; line-height: 1.65; color: var(--slate); }
.impressum .imp-grid strong { color: var(--ink); font-weight: 600; }
.footer-bottom { margin-top: 2.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--muted); }

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* hero load animation */
.hero [data-load] { opacity: 0; transform: translateY(24px); animation: heroIn .9s var(--ease) forwards; }
.hero [data-load="1"] { animation-delay: .15s; }
.hero [data-load="2"] { animation-delay: .30s; }
.hero [data-load="3"] { animation-delay: .45s; }
.hero [data-load="4"] { animation-delay: .60s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero__arc .bow { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 2.4s var(--ease) .4s forwards; }
.hero__arc .leg { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.8s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero [data-load] { opacity: 1 !important; transform: none !important; animation: none; }
  .hero__arc .bow, .hero__arc .leg { stroke-dashoffset: 0 !important; animation: none; }
  .hero__cue .dot { animation: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-portrait { min-height: 280px; order: -1; }
  .vmo { grid-template-columns: 1fr; }
  .services, .pillars, .holdings, .values, .contact-grid { grid-template-columns: 1fr; }
  .industries { grid-template-columns: repeat(2,1fr); }
  .team { grid-template-columns: repeat(2,1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .value:last-child:nth-child(odd) { grid-column: auto; }
}

/* The 7-item nav needs ~1180px to breathe — collapse to a clean hamburger below 1100px */
@media (max-width: 1100px) {
  .nav, .nav-cta, .header-actions .lang { display: none; }
  .burger { display: block; }

  /* Mobile / tablet menu */
  .mobile-menu {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
    background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.12);
    transform: translateY(-120%); transition: transform .45s var(--ease);
    padding: 1.4rem var(--gutter) 2.2rem;
  }
  body.menu-open .mobile-menu { transform: none; }
  .mobile-menu a { display: block; padding: .9rem 0; color: rgba(255,255,255,.85); font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu .mm-lang { margin-top: 1.2rem; display: flex; gap: .6rem; }
  .mobile-menu .mm-lang a { border: 1px solid rgba(255,255,255,.25); border-radius: 100px; padding: .5rem 1.1rem; }
  .mobile-menu .mm-lang a.is-current { background: var(--gold); color: #20210a; border-color: var(--gold); }
  .mobile-menu .mm-cta { display: inline-flex; margin-top: 1.5rem; padding: .8rem 1.5rem; color: #20210a; border-bottom: none; }
  .mobile-menu .mm-cta:hover { color: #20210a; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .industries { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero__brandA { opacity: .4; right: -22%; width: 84vw; }
  .board__list { gap: 1.3rem; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.9rem); overflow-wrap: break-word; }
  .hero__lede { font-size: 1.05rem; }
  .value { grid-template-columns: 1fr; gap: .4rem; }
  .value__k { font-size: 1.8rem; }
}

.mobile-menu { display: none; }
@media (max-width: 1100px) { .mobile-menu { display: block; } }
@media (min-width: 1101px) { .mobile-menu { display: none !important; } }


/* =====================================================================
   PHOTOGRAPHY — hero background + statement band
   ===================================================================== */
/* faint grey-veiled architectural photo behind the light hero */
.hero__media { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
  filter: grayscale(1) contrast(.95) brightness(1.05); opacity: .14; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--paper) 4%, rgba(247,248,249,.55) 46%, rgba(247,248,249,.12) 100%);
}
.hero::before, .hero::after { z-index: 1; }

/* Statement band */
.band { position: relative; min-height: clamp(360px, 52vh, 540px); display: flex; align-items: center; overflow: hidden; color: #fff; --gold-ink: var(--gold); }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(13,16,18,.86) 0%, rgba(13,16,18,.62) 45%, rgba(13,16,18,.35) 100%);
}
.band .container { position: relative; z-index: 2; }
.band__quote {
  font-family: var(--font-display); font-weight: 420; font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.22; letter-spacing: -.01em;
  max-width: 800px; color: #fff;
}
.band__quote::before { content: "\201C"; color: var(--gold); }
.band__quote::after { content: "\201D"; color: var(--gold); }
.band__cite { margin-top: 1.4rem; font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); }

@media (max-width: 760px) {
  .hero__bg { object-position: 60% center; }
  .industries { grid-template-columns: 1fr 1fr; }
}


/* Contact section background photo */
#kontakt, #contact { overflow: hidden; }
.contact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .30; }
#kontakt .container, #contact .container { position: relative; z-index: 1; }

/* =====================================================================
   CONTACT FORM (on the dark contact section)
   ===================================================================== */
.contact-form { margin-top: 1.6rem; display: grid; gap: 1rem; max-width: 540px; }
.contact-form .field { display: grid; gap: .4rem; }
.contact-form label { font-size: .82rem; letter-spacing: .03em; color: rgba(255,255,255,.72); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; font-size: .95rem; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); transition: border-color .25s var(--ease), background .25s var(--ease);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.4); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.10); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.5; cursor: pointer; }
.contact-form .consent input { margin-top: .15rem; accent-color: var(--gold); flex: none; width: 16px; height: 16px; }
.contact-form .consent a { color: var(--gold); text-decoration: underline; }
.contact-form .btn { margin-top: .3rem; justify-self: start; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1.3rem; padding: .9rem 1.1rem; border-radius: var(--radius); font-size: .92rem; color: #fff; }
.form-status.is-ok { background: rgba(249,218,3,.14); border: 1px solid rgba(249,218,3,.45); }
.form-status.is-err { background: rgba(255,90,90,.12); border: 1px solid rgba(255,120,120,.45); }

/* =====================================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ===================================================================== */
.site-header--static { position: static; background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn--sm { padding: .5rem 1.05rem; font-size: .85rem; box-shadow: none; }
.container--narrow { max-width: var(--container-narrow); margin-inline: auto; }
.legal-main { padding: clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem); background: var(--white); }
.legal h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem,4vw,2.7rem); color: var(--ink); margin-bottom: .4rem; font-optical-sizing: none; }
.legal .legal-sub { color: var(--muted); margin-bottom: 2.4rem; }
.legal h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--ink); margin: 2.2rem 0 .6rem; font-optical-sizing: none; }
.legal h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 1.4rem 0 .35rem; }
.legal p, .legal li { color: var(--slate); line-height: 1.75; margin-bottom: .8rem; }
.legal ul { padding-left: 1.2rem; margin-bottom: .8rem; }
.legal a { color: var(--gold-ink); text-decoration: underline; }
.legal strong { color: var(--ink); }
.legal .updated { margin-top: 2.6rem; color: var(--muted); font-size: .85rem; }

/* footer legal links */
.footer-legal { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.footer-legal a { color: var(--slate); text-decoration: none; }
.footer-legal a:hover { color: var(--gold-ink); }


/* =====================================================================
   HERO — VARIANTE B (Zitat)   ·   aktiv nur mit ?hero=b
   Entwurf zum Vergleich mit der bestehenden Variante, KEIN Ersatz.
   Drei Textelemente statt sechs: Zitat, Attribution, Positionierungszeile.
   Bild ist ein PLATZHALTER bis die Naturmotive da sind (bild-prompts-natur.md).
   ===================================================================== */
.hero-quote { display: none; }
.hero-b .hero { display: none; }
.hero-b .hero-quote {
  display: flex; align-items: flex-end;
  position: relative; min-height: 100svh; overflow: hidden;
  padding-top: var(--header-h); padding-bottom: clamp(3rem,7vw,6rem);
}
.hero-quote__media { position: absolute; inset: 0; z-index: 0; }
.hero-quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* unten abdunkeln für die Schrift, oben aufhellen — damit das graue Logo
   auf hellem Grund steht (Kundenvorgabe: Logo nur grau-auf-hell) */
.hero-quote::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* kein Aufhell-Schleier mehr: über dem Hero erscheint gar kein Logo, deshalb
       braucht es keinen hellen Grund dafür. Siehe Header-Regel weiter unten. */
    /* Textspalte links abdunkeln — das Motiv ist gegenlichtig und hell */
    linear-gradient(to right, rgba(28,31,35,.78) 0, rgba(28,31,35,.52) 38%, rgba(28,31,35,.12) 62%, transparent 78%),
    linear-gradient(to top, rgba(28,31,35,.72) 0, rgba(28,31,35,.30) 40%, transparent 72%);
}
.hero-quote .container { position: relative; z-index: 2; }
.hero-quote__inner { max-width: 62ch; margin: 0; }
.hero-quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.14;
  letter-spacing: -.012em; color: #fff; text-wrap: balance;
}
.hero-quote blockquote::before { content: "„"; }
.hero-quote blockquote::after  { content: "\201C"; }
.hero-quote figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .9rem; margin-top: 1.5rem; }
/* die goldene Linie aus dem Logo, als Attributionsstrich */
.hero-quote figcaption::before { content: ""; width: 42px; height: 2px; background: var(--gold); flex: none; align-self: center; }
.hero-quote__who  { font-weight: 600; color: #fff; }
.hero-quote__role { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.hero-quote__pos  { margin-top: 1.6rem; font-size: 1rem; color: rgba(255,255,255,.82); max-width: 46ch; }
.hero-quote .btn  { margin-top: 2rem; }

/* „headerless": im Hero nur das Logo — Navigation fährt erst beim Scrollen ein.
   Nutzt den bestehenden .is-scrolled-Zustand (main.js, ab 40px). */
/* Über dem Hero ist der Header komplett unsichtbar — inklusive Logo. Grund: Das
   Logo darf laut Kundenvorgabe nur grau auf hell stehen, und jeder helle Grund über
   einem Foto ist ein Kompromiss. Kein Logo ist ehrlicher als ein schlecht sitzendes.
   Sobald gescrollt wird, fährt der vollständige helle Header ein.
   → Fällt weg, sobald Christoph das weiße Logo freigibt. */
.hero-b .site-header:not(.is-scrolled) {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
  opacity: 0; pointer-events: none;
}
.ready.hero-b .site-header { transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease), opacity .5s var(--ease); }
/* der Burger bleibt mobil erreichbar, sonst gäbe es über dem Hero keine Navigation */
@media (max-width: 1100px) {
  .hero-b .site-header:not(.is-scrolled) { opacity: 1; pointer-events: auto; }
  .hero-b .site-header:not(.is-scrolled) .brand { opacity: 0; }
  .hero-b .site-header:not(.is-scrolled) .burger span { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
}

@media (max-width: 760px) {
  .hero-b .hero-quote { align-items: flex-end; }
  .hero-quote__inner { max-width: none; }
  .hero-quote blockquote { font-size: clamp(1.65rem, 7.4vw, 2.3rem); }
  /* Rolle bekommt eine eigene Zeile — nebeneinander lief sie aus dem Viewport */
  .hero-quote__role { flex-basis: 100%; letter-spacing: .14em; }
  /* mobil trägt der Verlauf von unten die ganze Arbeit — seitlich ist kein Platz.
     Oben ein dunkler Scrim (kein helles Band mehr), damit der Header transparent
     bleibt und der weiße Burger lesbar auf dem Foto sitzt. */
  .hero-quote::before {
    background:
      linear-gradient(to bottom, rgba(28,31,35,.58) 0, rgba(28,31,35,0) 22%),
      linear-gradient(to top, rgba(28,31,35,.90) 0, rgba(28,31,35,.66) 42%, rgba(28,31,35,.22) 66%, transparent 84%);
  }
}

/* =====================================================================
   UNSER WEG — Zeitleiste
   Ersetzt das frühere Kennzahlen-Band. Der einzige Ort auf dieser Seite, an dem
   Reihenfolge tatsächlich Information trägt — deshalb hier eine echte Sequenz,
   während Werte und Team bewusst unnummeriert bleiben.
   ===================================================================== */
.timeline {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2.2vw, 2rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 2.6rem; height: 1px; background: var(--line-strong); }
.tl { position: relative; padding-top: 3.6rem; }
.tl::before {
  content: ""; position: absolute; top: 2.6rem; left: 0; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold);
}
.tl__year { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: clamp(1.35rem,2.1vw,1.7rem); line-height: 1; color: var(--ink); }
.tl__t { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.tl__d { margin-top: .5rem; font-size: .9rem; line-height: 1.6; color: var(--slate); }
.tl__d .suffix { color: var(--gold-ink); }

@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr 1fr; gap: 2rem 1.6rem; }
}
@media (max-width: 620px) {
  /* mobil kippt die Achse: die Linie läuft links senkrecht mit */
  .timeline { grid-template-columns: minmax(0,1fr); gap: 1.7rem; padding-left: 0; }
  .timeline::before { left: 5px; right: auto; top: .5rem; bottom: .5rem; width: 1px; height: auto; }
  /* Einzug liegt auf dem Eintrag, nicht auf der Liste — sonst wird die Grid-Spalte
     breiter als der Container und der Text läuft rechts aus dem Viewport. */
  .tl { padding-top: 0; padding-left: 1.9rem; min-width: 0; }
  .tl::before { top: .5rem; left: 0; transform: none; }
  .tl__year { position: static; display: block; margin-bottom: .15rem; }
}

/* englische Anführungszeichen auf der EN-Seite (DE nutzt „…“) */
html[lang="en"] .hero-quote blockquote::before { content: "\201C"; }
html[lang="en"] .hero-quote blockquote::after  { content: "\201D"; }