/* =====================================================================
   KAMBERI GROUP — Design System (Clean-Minimal / continuous dark canvas)
   Vanilla CSS. Inter + Space Mono. Navy world, bronze accents.
   ===================================================================== */

:root{
  --navy:        #0E1B2C;
  --navy-2:      #17293D;
  --navy-3:      #1E344B;
  --bronze:      #C6A15B;
  --champagner:  #E2D3B5;
  --bronze-deep: #8A6A38;
  --cloud:       #F3EFE7;
  --ink:         #14181E;
  --greige:      #8B8574;
  --steel:       #2E4B63;

  --line:        color-mix(in srgb, var(--cloud) 14%, transparent);
  --line-bronze: color-mix(in srgb, var(--bronze) 42%, transparent);

  --ff-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --step--1: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.02rem + 0.8vw, 1.7rem);
  --step-2:  clamp(1.8rem, 1.1rem + 2.6vw, 3.4rem);
  --step-hero: clamp(2.2rem, 0.7rem + 5.2vw, 6rem);

  --shell: min(92vw, 1480px);
  --margin-w: 92px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* clip statt hidden: schneidet das bewusst über den rechten Rand laufende
   .gruppe__figure ab, ohne einen Scroll-Container zu erzeugen — sticky und der
   gepinnte Branchen-Scroller bleiben dadurch funktionsfähig. */
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ overflow-x:clip; }
body{
  margin:0;
  background:var(--navy);
  color:var(--cloud);
  font-family:var(--ff-text);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.6;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,blockquote,ul{ margin:0; }
ul{ list-style:none; padding:0; }
button{ font:inherit; }
::selection{ background:var(--bronze); color:var(--navy); }

.shell{
  width:var(--shell);
  margin-inline:auto;
  padding-left:var(--margin-w);
}
@media (max-width:900px){
  :root{ --margin-w:0px; }
  .shell{ width:88vw; }
}

:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:1px; }
.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  background:var(--bronze); color:var(--navy);
  padding:.6em 1em; font-family:var(--ff-mono); font-size:.8rem;
  transform:translateY(-160%); transition:transform .25s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* Grain */
.grain{
  position:fixed; inset:0; z-index:150; pointer-events:none;
  opacity:.05; transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eyebrow / mono */
.eyebrow{
  font-family:var(--ff-mono); font-size:var(--step--1);
  letter-spacing:.24em; text-transform:uppercase; color:var(--bronze);
  display:flex; align-items:center; gap:.9em; font-weight:400;
}
.eyebrow i{ font-style:normal; color:var(--bronze); }
.eyebrow--light{ color:var(--champagner); }
.eyebrow .idx{
  color:var(--champagner); border:1px solid var(--line-bronze);
  padding:.25em .5em; line-height:1; letter-spacing:.1em;
}

/* Accents */
.accent{ color:var(--bronze); }
.accent-soft{ color:var(--champagner); }

/* Brand (real logo) */
.brand{ display:inline-flex; align-items:center; gap:.72em; }
.brand__logo{ height:34px; width:auto; }
.brand__word{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--cloud);
}

/* Arrow links */
.arrow-link{
  display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--ff-text); font-weight:500; font-size:var(--step-0);
  padding-bottom:.5em; position:relative; width:max-content; max-width:100%;
  color:var(--cloud); letter-spacing:0;
}
.arrow-link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--line); }
.arrow-link::before{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--bronze); z-index:1; transition:width .5s var(--ease); }
.arrow-link svg{ width:1.35em; height:1.35em; flex:none; fill:none; stroke:var(--bronze); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease); }
.arrow-link:hover::before,.arrow-link:focus-visible::before{ width:100%; }
.arrow-link:hover svg,.arrow-link:focus-visible svg{ transform:translateX(6px); }

/* ============================ MARGINALIE ============================ */
.margin{
  position:fixed; top:0; left:0; z-index:90;
  width:var(--margin-w); height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:96px 0 28px; pointer-events:none;
}
.margin__brandline,.margin__section{
  writing-mode:vertical-rl; font-family:var(--ff-mono);
  font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--cloud);
  transition:color .5s var(--ease);
}
.margin__brandline{ opacity:.42; }
.margin__meta{
  writing-mode:vertical-rl; display:flex; flex-direction:column; gap:1.4em;
  margin-top:2.2em; font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.26em; color:var(--cloud); opacity:.32;
  transition:color .5s var(--ease);
}
.margin__rail{ flex:1 1 auto; width:1px; margin:2.4em 0; background:color-mix(in srgb, var(--cloud) 22%, transparent); position:relative; overflow:hidden; transition:background .5s var(--ease); }
.margin__progress{ position:absolute; top:0; left:0; width:100%; height:100%; transform:scaleY(0); transform-origin:top; will-change:transform; background:var(--bronze); }
.margin__section{ opacity:.85; font-weight:700; color:var(--bronze); }
/* adapt over light sections */
.margin[data-on-light] .margin__brandline,
.margin[data-on-light] .margin__meta{ color:var(--ink); }
.margin[data-on-light] .margin__section{ color:var(--bronze-deep); }
.margin[data-on-light] .margin__rail{ background:color-mix(in srgb, var(--ink) 20%, transparent); }
@media (max-width:900px){ .margin{ display:none; } }

/* ============================ HEADER ============================ */
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:120; transition:background .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; }
.site-header::before{
  content:""; position:absolute; inset:0 0 auto 0; height:200%; z-index:-1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--navy) 68%, transparent), transparent);
  pointer-events:none; transition:opacity .5s var(--ease);
}
.site-header[data-scrolled]::before{ opacity:0; }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:20px; }
.site-header[data-scrolled]{ background:color-mix(in srgb, var(--navy) 93%, transparent); border-bottom-color:var(--line); }
.site-header[data-scrolled] .site-header__inner{ padding-block:13px; }
.nav ul{ display:flex; gap:2em; }
.nav a{ font-family:var(--ff-mono); font-weight:400; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cloud); opacity:.78; position:relative; padding-bottom:.25em; transition:opacity .3s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--bronze); transition:width .35s var(--ease); }
.nav a:hover{ opacity:1; } .nav a:hover::after{ width:100%; }

.nav-toggle{ display:none; width:40px; height:40px; padding:8px; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:6px; z-index:110; }
.nav-toggle span{ display:block; height:1.5px; width:24px; background:var(--cloud); transition:transform .4s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
@media (max-width:900px){ .nav{ display:none; } .nav-toggle{ display:flex; } }

/* Mobile nav */
.mobile-nav{ position:fixed; inset:0; z-index:110; background:var(--navy); display:flex; flex-direction:column; justify-content:center; padding:20vh 8vw 8vh; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s var(--ease); }
.mobile-nav[hidden]{ display:flex; }
.mobile-nav[data-open]{ opacity:1; visibility:visible; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:.3em; }
.mobile-nav a{ font-weight:600; font-size:clamp(1.7rem,1rem+5vw,2.6rem); line-height:1.25; letter-spacing:-0.02em; color:var(--cloud); display:flex; align-items:baseline; gap:.55em; }
.mobile-nav__no{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; color:var(--bronze); opacity:.8; }
.mobile-nav__foot{ margin-top:3rem; display:flex; flex-direction:column; gap:.6em; font-family:var(--ff-mono); font-size:.78rem; color:var(--champagner); padding-top:2rem; border-top:1px solid var(--line); }
.mobile-nav__foot span{ opacity:.55; letter-spacing:.12em; text-transform:uppercase; font-size:.62rem; }
body.nav-open{ overflow:hidden; }

/* ============================ HERO ============================ */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:flex-end; padding-block:150px 7vh; overflow:hidden; isolation:isolate; }
.hero__media{ position:absolute; top:0; right:0; z-index:-1; width:52%; height:100%; will-change:clip-path; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% center; }
.hero__media::before{ content:""; position:absolute; inset:0; background:linear-gradient(215deg, var(--navy) 40%, var(--bronze-deep) 112%); mix-blend-mode:color; opacity:.5; }
.hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 84%, transparent) 22%, color-mix(in srgb, var(--navy) 34%, transparent) 48%, transparent 72%); }
.hero__media-tag{ position:absolute; left:16px; bottom:16px; font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.22em; color:var(--champagner); opacity:.7; mix-blend-mode:screen; }

.hero__inner{ position:relative; width:var(--shell); }
.hero__eyebrow{ margin-bottom:2rem; }
.hero__title{ font-weight:640; font-size:var(--step-hero); line-height:1.0; letter-spacing:-0.035em; color:var(--cloud); }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.03em; }
.hero__title .line__inner{ display:block; }
.hero__row{ margin-top:2.4rem; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem 4rem; flex-wrap:wrap; }
.hero__sub{ max-width:48ch; color:color-mix(in srgb, var(--cloud) 78%, transparent); }
.hero__actions{ display:flex; gap:2.4em; flex:none; }
.hero__scrollcue{ position:absolute; right:max(4vw,26px); bottom:5vh; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.8em; font-family:var(--ff-mono); font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--champagner); opacity:.7; }
.hero__scrollcue i{ width:1px; height:52px; background:linear-gradient(var(--bronze),transparent); position:relative; overflow:hidden; }
.hero__scrollcue i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--champagner); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(300%)} }
@media (max-width:900px){
  .hero__media{ width:100%; }
  .hero__media img{ object-position:38% center; }
  .hero__media::after{ background:linear-gradient(180deg, rgba(14,27,44,.4) 0%, rgba(14,27,44,.78) 55%, var(--navy) 100%); }
  .hero__scrollcue{ display:none; }
  .hero__row{ gap:1.6rem; }
}

/* ============================ GRUPPE (sticky editorial) ============================ */
.gruppe{ position:relative; background:var(--cloud); color:var(--ink); padding-block:clamp(6rem,13vh,12rem); }
.gruppe__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:2rem 4%; align-items:start; }
.gruppe__aside{ grid-column:1 / 6; position:sticky; top:20vh; align-self:start; }
.gruppe .eyebrow{ margin-bottom:1.8rem; color:var(--bronze-deep); }
.gruppe .eyebrow .idx{ color:var(--greige); border-color:color-mix(in srgb, var(--greige) 42%, transparent); }
.gruppe__title{ font-weight:640; font-size:clamp(1.5rem, 0.8rem + 1.7vw, 2.3rem); line-height:1.06; letter-spacing:-0.025em; color:var(--ink); }
.gruppe__title .accent-soft{ color:var(--bronze-deep); }
.gruppe__title .line{ display:block; overflow:visible; padding-bottom:.02em; }
.gruppe__meta{ margin-top:1.8rem; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--greige); }
.gruppe__body{ grid-column:7 / 13; display:flex; flex-direction:column; gap:2rem; }
.gruppe__lead{ font-size:var(--step-0); line-height:1.6; color:var(--ink); font-weight:400; max-width:40ch; }
.gruppe__body > p{ color:color-mix(in srgb, var(--ink) 78%, transparent); max-width:52ch; }
.gruppe__figure{ margin:1.5rem 0 1.5rem auto; width:min(60vw, 720px); margin-right:calc(50% - 50vw); aspect-ratio:16/10; overflow:hidden; }
.gruppe__figure img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(.95); }
@media (max-width:900px){
  .gruppe__grid{ display:block; }
  .gruppe__aside{ position:static; margin-bottom:2.4rem; }
  .gruppe__body{ gap:1.6rem; }
  .gruppe__figure{ width:100vw; margin-inline:calc(50% - 50vw); }
}

/* ============================ KENNZAHLEN (marquee strip) ============================ */
.facts{ background:var(--navy-2); border-block:1px solid var(--line); padding-block:clamp(1.6rem,3.4vh,2.8rem); overflow:hidden; }
.facts__track{ display:flex; width:max-content; will-change:transform; }
.facts__set{ display:flex; flex:none; }
.fact{ display:flex; align-items:baseline; gap:1em; padding-inline:clamp(2rem,5vw,5rem); border-right:1px solid var(--line); white-space:nowrap; }
.fact__val{ font-weight:600; font-size:clamp(1.6rem,1.1rem+1.6vw,2.6rem); line-height:1; color:var(--cloud); letter-spacing:-0.03em; }
.fact__lab{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--champagner); opacity:.72; }

/* ============================ GESCHÄFTSFELDER (pinned horizontal) ============================ */
.fields{ position:relative; background:var(--navy); }
.fields__pin{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; gap:clamp(1.6rem,3.5vh,2.8rem); padding-block:7vh; overflow:hidden; }
.fields:not(.is-hpinned) .fields__pin{ min-height:0; }
.fields__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.fields__head .eyebrow{ flex-basis:100%; margin-bottom:.4rem; }
.fields__title{ font-weight:640; font-size:var(--step-2); line-height:.98; letter-spacing:-0.03em; color:var(--cloud); }
.fields__hint{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); display:flex; align-items:center; gap:.6em; }
.fields__hint svg{ width:1.4em; height:1.4em; fill:none; stroke:var(--bronze); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.fields__track{ display:flex; gap:clamp(1.2rem,2.4vw,2.4rem); padding-left:var(--margin-w); width:max-content; }
/* native horizontal scroll as no-JS fallback; JS pin overrides */
.fields:not(.is-hpinned) .fields__track{ overflow-x:auto; scroll-snap-type:x proximity; max-width:100vw; padding-right:8vw; scrollbar-width:none; }
.fields:not(.is-hpinned) .fields__track::-webkit-scrollbar{ display:none; }
.fields.is-hpinned .fields__track{ overflow:visible; }

.fslide{ scroll-snap-align:start; flex:none; width:clamp(280px, 32vw, 440px); height:min(58vh, 560px); display:flex; flex-direction:column; border-top:1px solid var(--line-bronze); padding-top:1.1rem; }
.fslide__no{ order:0; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.16em; color:var(--bronze); margin-bottom:.7rem; }
.fslide__media{ order:3; position:relative; flex:1 1 auto; min-height:0; margin-top:1.1rem; overflow:hidden; background:var(--navy-2) center/cover no-repeat; isolation:isolate; }
.fslide__media::before{ content:""; position:absolute; inset:0; background:linear-gradient(210deg, var(--navy) 40%, var(--bronze-deep) 118%); mix-blend-mode:color; opacity:.42; }
.fslide__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--navy) 70%, transparent)); }
.fslide__ph{ position:absolute; inset:0; display:grid; place-items:center; font-weight:700; font-size:5rem; color:var(--bronze); opacity:.5; z-index:1; }
.fslide[data-has-img] .fslide__ph{ display:none; }
.fslide__name{ order:1; font-weight:600; font-size:clamp(1.15rem,.9rem+.7vw,1.55rem); line-height:1.1; letter-spacing:-0.02em; color:var(--cloud); }
.fslide__flag{ order:2; margin-top:.45rem; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.06em; color:color-mix(in srgb, var(--champagner) 78%, transparent); }
@media (hover:hover){ .fslide:hover .fslide__media::before{ opacity:.2; } .fslide:hover .fslide__name{ color:#fff; } }
@media (max-width:900px){
  .fields__pin{ min-height:0; padding-block:clamp(4rem,10vh,7rem); }
  .fields:not(.is-hpinned) .fields__track{ flex-direction:column; overflow:visible; padding-left:0; padding-right:0; width:100%; }
  .fslide{ width:100%; height:auto; display:grid; grid-template-columns:2.4ch 84px 1fr; grid-template-rows:auto auto; column-gap:1.1rem; row-gap:.35rem; align-items:center; border-top:1px solid var(--line-bronze); padding-block:1.2rem; }
  .fslide__no{ margin:0; grid-column:1; grid-row:1 / 3; }
  .fslide__media{ width:84px; aspect-ratio:1; margin-top:0; grid-column:2; grid-row:1 / 3; }
  .fslide__ph{ font-size:2rem; }
  .fslide__name{ margin:0; grid-column:3; grid-row:1; }
  .fslide__flag{ margin:0; grid-column:3; grid-row:2; }
}

/* ============================ HALTUNG ============================ */
.stance{ position:relative; min-height:92vh; display:flex; align-items:center; padding-block:12vh; overflow:hidden; isolation:isolate; }
.stance__media{ position:absolute; inset:0; z-index:-1; }
.stance__media img{ width:100%; height:100%; object-fit:cover; }
.stance__media::before{ content:""; position:absolute; inset:0; background:linear-gradient(215deg, var(--navy) 45%, var(--bronze-deep) 118%); mix-blend-mode:color; opacity:.5; }
.stance__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 60%, transparent) 40%, color-mix(in srgb, var(--navy) 12%, transparent) 74%, transparent 100%); }
.stance__inner{ position:relative; }
.stance .eyebrow{ margin-bottom:1.8rem; }
.stance__quote{ font-weight:600; font-size:clamp(1.8rem,1rem+3.2vw,4rem); line-height:1.08; letter-spacing:-0.025em; color:var(--cloud); max-width:20ch; }
.stance__quote .line{ display:block; overflow:visible; }

/* ============================ ZWEI TÜREN ============================ */
.doors{ background:var(--cloud); color:var(--ink); padding-block:clamp(5rem,11vh,10rem); }
.doors__grid{ display:grid; grid-template-columns:1.12fr 0.88fr; }
.door{ padding-block:1rem; display:flex; flex-direction:column; align-items:flex-start; gap:1.4rem; }
.door:first-child{ padding-right:clamp(2rem,5vw,5rem); }
.door:last-child{ padding-left:clamp(2rem,5vw,5rem); border-left:1px solid var(--line-bronze); }
.doors .eyebrow{ color:var(--bronze-deep); }
.doors .eyebrow .idx{ color:var(--greige); border-color:color-mix(in srgb, var(--greige) 42%, transparent); }
.door__title{ font-weight:600; font-size:clamp(1.5rem,1rem+2vw,2.6rem); line-height:1.08; letter-spacing:-0.025em; color:var(--cloud); max-width:18ch; }
.doors .door__title{ color:var(--ink); }
.door__text{ color:color-mix(in srgb, var(--ink) 78%, transparent); max-width:44ch; }
.doors .arrow-link{ margin-top:.5rem; color:var(--ink); }
.doors .arrow-link::after{ background:color-mix(in srgb, var(--ink) 22%, transparent); }
@media (max-width:820px){
  .doors__grid{ grid-template-columns:1fr; gap:3rem; }
  .door:first-child{ padding-right:0; }
  .door:last-child{ padding-left:0; border-left:0; border-top:1px solid var(--line-bronze); padding-top:3rem; }
}

/* ============================ FOOTER ============================ */
.site-footer{ border-top:1px solid var(--line); padding-block:clamp(3.5rem,7vh,6rem) 2.4rem; }
.footer__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding-bottom:clamp(2.5rem,5vh,4rem); border-bottom:1px solid var(--line); }
.brand--footer .brand__logo{ height:40px; }
.footer__claim{ font-weight:500; font-size:var(--step-1); color:var(--champagner); letter-spacing:-0.01em; }
.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem 2rem; padding-block:clamp(2.5rem,5vh,4rem); }
.footer__h{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); margin-bottom:1.4em; }
.footer__col ul{ display:flex; flex-direction:column; gap:.9em; }
.footer__col a{ font-size:.92rem; opacity:.78; transition:opacity .25s var(--ease), color .25s var(--ease); }
.footer__col a:hover{ opacity:1; color:var(--champagner); }
.footer__col--contact address{ font-style:normal; line-height:1.9; opacity:.82; font-size:.92rem; }
.footer__mono{ display:flex; flex-direction:column; gap:.5em; margin-top:1.2em; font-family:var(--ff-mono); font-size:.78rem; }
.footer__mono a{ opacity:.85; } .footer__mono a:hover{ color:var(--bronze); }
.footer__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:2.2rem; border-top:1px solid var(--line); font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--champagner) 66%, transparent); }
@media (max-width:760px){ .footer__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .footer__cols{ grid-template-columns:1fr; } }

/* ============================ 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; }
  .hero__scrollcue i::after{ display:none; }
  .facts__track{ transform:none !important; }
}

/* =====================================================================
   LANGUAGE SWITCHER
   ===================================================================== */
.lang{ position:relative; margin-left:1.6rem; }
.lang__btn{ display:inline-flex; align-items:center; gap:.5em; background:none; border:1px solid var(--line); color:var(--cloud); padding:.4em .7em; cursor:pointer; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; transition:border-color .3s var(--ease); }
.lang__btn:hover{ border-color:var(--line-bronze); }
.lang__btn .flag{ font-size:.95rem; line-height:1; }
.lang__btn .chev{ width:.7em; height:.7em; fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s var(--ease); }
.lang[data-open] .chev{ transform:rotate(180deg); }
.lang__menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:160px; background:var(--navy-2); border:1px solid var(--line); padding:.4em; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index:130; }
.lang[data-open] .lang__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang__opt{ display:flex; align-items:center; gap:.7em; background:none; border:0; width:100%; text-align:left; color:var(--cloud); padding:.55em .7em; cursor:pointer; font-family:var(--ff-text); font-size:.85rem; opacity:.82; transition:background .2s var(--ease), opacity .2s var(--ease); }
.lang__opt:hover{ background:color-mix(in srgb, var(--cloud) 8%, transparent); opacity:1; }
.lang__opt[aria-current="true"]{ opacity:1; color:var(--bronze); }
.lang__opt .flag{ font-size:1.05rem; line-height:1; }
.site-header .nav{ margin-left:auto; }
@media (max-width:900px){ .site-header .lang{ display:none; } }
.mobile-nav__foot .lang{ margin-bottom:1rem; }
.mobile-nav__foot .lang__menu{ right:auto; left:0; }

/* =====================================================================
   COOKIE BANNER
   ===================================================================== */
.cookie{ position:fixed; left:0; right:0; bottom:0; z-index:180; background:var(--navy-2); border-top:1px solid var(--line-bronze); transform:translateY(110%); transition:transform .6s var(--ease); }
.cookie[data-show]{ transform:translateY(0); }
.cookie__inner{ width:min(92vw,1200px); margin-inline:auto; padding:1.4rem 0; display:flex; align-items:center; gap:1.5rem 2.5rem; flex-wrap:wrap; }
.cookie__text{ flex:1 1 340px; font-size:.9rem; color:color-mix(in srgb, var(--cloud) 84%, transparent); line-height:1.55; }
.cookie__text a{ color:var(--bronze); text-decoration:underline; text-underline-offset:2px; }
.cookie__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.btn{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:.85em 1.5em; cursor:pointer; border:1px solid var(--line-bronze); background:none; color:var(--cloud); transition:background .3s var(--ease), color .3s var(--ease); }
.btn:hover{ background:color-mix(in srgb, var(--cloud) 8%, transparent); }
.btn--primary{ background:var(--bronze); color:var(--navy); border-color:var(--bronze); }
.btn--primary:hover{ background:var(--champagner); border-color:var(--champagner); }

/* =====================================================================
   SUBPAGE HERO (Kontakt / Karriere / Legal)
   ===================================================================== */
.page-hero{ padding-block:clamp(11rem,16vh,14rem) clamp(2.5rem,5vh,4rem); position:relative; }
.page-hero .eyebrow{ margin-bottom:1.4rem; }
.page-hero__title{ font-weight:640; font-size:clamp(1.9rem,1.15rem+2.4vw,3.2rem); line-height:1.05; letter-spacing:-0.03em; color:var(--cloud); max-width:22ch; }
.page-hero__sub{ margin-top:1.4rem; max-width:60ch; color:color-mix(in srgb, var(--cloud) 76%, transparent); font-size:var(--step-0); line-height:1.6; }

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
.contact{ padding-bottom:clamp(4rem,9vh,8rem); }
.contact__grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.contact__aside .eyebrow{ margin-bottom:1.4rem; }
.contact__block{ margin-bottom:2.4rem; }
.contact__block h3{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); margin-bottom:.8em; font-weight:400; }
.contact__block p, .contact__block address{ font-style:normal; color:color-mix(in srgb, var(--cloud) 82%, transparent); line-height:1.9; }
.contact__block a:hover{ color:var(--bronze); }

/* Form */
.form{ display:grid; gap:1.4rem; }
.form__row{ display:grid; gap:1.4rem; grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:.5em; }
.field label{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--champagner); }
.field input, .field textarea, .field select{ background:var(--navy-2); border:1px solid var(--line); color:var(--cloud); font-family:var(--ff-text); font-size:.95rem; padding:.85em 1em; border-radius:0; transition:border-color .3s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--bronze); }
.field textarea{ min-height:150px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:color-mix(in srgb, var(--cloud) 38%, transparent); }
.form__consent{ display:flex; gap:.8em; align-items:flex-start; font-size:.82rem; color:color-mix(in srgb, var(--cloud) 74%, transparent); line-height:1.5; }
.form__consent input{ margin-top:.25em; accent-color:var(--bronze); width:16px; height:16px; flex:none; }
.form__consent a{ color:var(--bronze); text-decoration:underline; text-underline-offset:2px; }
.form__submit{ justify-self:start; margin-top:.4rem; display:inline-flex; align-items:center; gap:.8em; }
.form__note{ font-size:.78rem; color:var(--greige); font-family:var(--ff-mono); letter-spacing:.02em; }
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ display:none; padding:.9em 1.1em; font-size:.9rem; line-height:1.5; border:1px solid; }
.form-status[data-state]{ display:block; }
.form-status[data-state="ok"]{ border-color:var(--bronze); color:var(--champagner); background:color-mix(in srgb, var(--bronze) 12%, transparent); }
.form-status[data-state="err"]{ border-color:#a5544e; color:#e8b4ae; background:color-mix(in srgb, #a5544e 12%, transparent); }
/* reCAPTCHA v3 läuft unsichtbar; Googles schwebendes Badge wird ausgeblendet —
   dafür steht die vorgeschriebene Kennzeichnung als .form__legal im Formular. */
.grecaptcha-badge{ visibility:hidden; }
.form__legal{ margin-top:-.35rem; font-size:.72rem; line-height:1.5; color:color-mix(in srgb, var(--greige) 78%, transparent); }
.form__legal a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.form__legal a:hover{ color:var(--bronze); }
@media (max-width:900px){
  .contact__grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
}

/* =====================================================================
   CONSENT-GATED EMBEDS (Maps, job portal)
   ===================================================================== */
.embed{ position:relative; width:100%; background:var(--navy-2); border:1px solid var(--line); overflow:hidden; }
.embed--map{ aspect-ratio:16/9; }
.embed--jobs{ min-height:640px; }
.embed iframe{ width:100%; height:100%; border:0; display:block; }
.embed--jobs iframe{ min-height:640px; }
.embed__gate{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; text-align:center; padding:2rem; background:var(--navy-2); }
.embed__gate p{ max-width:42ch; color:color-mix(in srgb, var(--cloud) 76%, transparent); font-size:.9rem; line-height:1.55; }
.embed__gate .flag-ico{ font-size:1.6rem; }
.embed[data-loaded] .embed__gate{ display:none; }

/* =====================================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ===================================================================== */
.legal{ padding-bottom:clamp(4rem,9vh,8rem); }
.legal__body{ max-width:74ch; }
.legal__body h1{ display:none; } /* title comes from page-hero */
.legal__body h2{ font-weight:640; font-size:clamp(1.3rem,1rem+1.2vw,1.9rem); letter-spacing:-0.02em; color:var(--cloud); margin:2.4rem 0 1rem; }
.legal__body h3{ font-weight:600; font-size:1.05rem; color:var(--champagner); margin:2rem 0 .7rem; }
.legal__body p{ color:color-mix(in srgb, var(--cloud) 76%, transparent); margin-bottom:1rem; line-height:1.75; font-size:.95rem; }
.legal__body a{ color:var(--bronze); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.legal__body ul, .legal__body ol{ margin:0 0 1.2rem 1.2rem; color:color-mix(in srgb, var(--cloud) 76%, transparent); }
.legal__body li{ margin-bottom:.5em; line-height:1.7; }
.legal__body strong, .legal__body b{ color:var(--cloud); font-weight:600; }
.legal__body table{ width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; font-size:.9rem; }
.legal__body td, .legal__body th{ border:1px solid var(--line); padding:.7em .9em; text-align:left; color:color-mix(in srgb, var(--cloud) 78%, transparent); vertical-align:top; }

/* back-to-home footer note on subpages */
.subfoot-spacer{ height:1px; }

/* =====================================================================
   TEAM / KÖPFE
   ===================================================================== */
.team{ padding-block:clamp(4.5rem,10vh,9rem); }
.team.on-cloud{ background:var(--cloud); color:var(--ink); }
.team__head{ margin-bottom:clamp(2.5rem,5vh,4rem); max-width:52ch; }
.team .eyebrow{ margin-bottom:1.4rem; }
.team.on-cloud .eyebrow{ color:var(--bronze-deep); }
.team.on-cloud .eyebrow .idx{ color:var(--greige); border-color:color-mix(in srgb, var(--greige) 42%, transparent); }
.team__title{ font-weight:640; font-size:clamp(1.6rem,1rem+1.8vw,2.4rem); letter-spacing:-0.025em; line-height:1.08; }
.team.on-cloud .team__title{ color:var(--ink); }
/* minmax(0,1fr) statt 1fr: sonst ist das Spaltenminimum der min-content der Bilder
   (Rohmaß 800px) und das Raster läuft aus dem Viewport, bevor das CSS greift. */
.team__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.5rem,3vw,3rem); }
.member{ display:flex; flex-direction:column; }
.member__photo{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--navy-2); isolation:isolate; }
/* Kein starkes Grading mehr: Weißabgleich, Wärme, Glow und Schärfe stecken in den
   Bilddateien selbst (team-*-v3.jpg). Ein Entsättigen hier ließ die Haut kränklich wirken. */
.member__photo img{ width:100%; max-width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:contrast(1.02); transition:transform .8s var(--ease); }
.member:hover .member__photo img{ transform:scale(1.03); }
.member__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, transparent 55%, color-mix(in srgb, var(--navy) 30%, transparent)); }
.member__name{ margin-top:1.1rem; font-weight:600; font-size:1.12rem; letter-spacing:-0.01em; }
.team.on-cloud .member__name{ color:var(--ink); }
.member__role{ margin-top:.35rem; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); }
.team.on-cloud .member__role{ color:var(--bronze-deep); }
.member__bio{ margin-top:.9rem; font-size:.9rem; line-height:1.6; color:color-mix(in srgb, var(--cloud) 76%, transparent); }
.team.on-cloud .member__bio{ color:color-mix(in srgb, var(--ink) 72%, transparent); }
@media (max-width:1100px){ .team__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .team__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
}
@media (max-width:460px){ .team__grid{ grid-template-columns:minmax(0,1fr); } }

/* Aktuelles (news) */
.news{ padding-bottom:clamp(4rem,9vh,8rem); }
.news__item{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2.5rem; padding-block:2rem; border-top:1px solid var(--line); align-items:baseline; }
.news__item:last-child{ border-bottom:1px solid var(--line); }
.news__date{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; color:var(--bronze); white-space:nowrap; }
.news__body h3{ font-weight:600; font-size:1.2rem; letter-spacing:-0.01em; color:var(--cloud); margin-bottom:.5rem; }
.news__body p{ color:color-mix(in srgb, var(--cloud) 74%, transparent); max-width:60ch; }
.news__empty{ color:color-mix(in srgb, var(--cloud) 66%, transparent); font-size:var(--step-1); max-width:52ch; }
@media (max-width:600px){ .news__item{ grid-template-columns:1fr; gap:.5rem; } }

/* Sector detail list (branchen page) */
.sectors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.6rem) clamp(2rem,4vw,4rem); padding-bottom:clamp(4rem,9vh,8rem); }
.sector{ padding-top:1.5rem; border-top:1px solid var(--line-bronze); }
.sector__name{ display:flex; align-items:center; gap:.65rem; font-weight:600; font-size:clamp(1.15rem,1rem+.7vw,1.55rem); letter-spacing:-0.02em; color:var(--cloud); margin-bottom:.75rem; }
.sector__name::before{ content:""; width:7px; height:7px; flex:none; background:var(--bronze); }
.sector__desc{ color:color-mix(in srgb, var(--cloud) 72%, transparent); font-size:.95rem; line-height:1.65; margin-bottom:.9rem; }
.sector__flags{ color:color-mix(in srgb, var(--champagner) 82%, transparent); font-size:.9rem; line-height:1.7; }
.sector__flags span:not(:last-child)::after{ content:" · "; color:var(--bronze); }
@media (max-width:760px){ .sectors{ grid-template-columns:1fr; gap:0; } .sector{ padding-block:1.5rem; } }

/* generic rich content block (partnerschaft / gruppe pages) */
.rich{ padding-bottom:clamp(4rem,9vh,8rem); }
.rich__lead{ font-size:var(--step-0); line-height:1.6; color:var(--cloud); max-width:52ch; margin-bottom:2.5rem; }
.rich__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.8rem,4vw,3.5rem); }
.rich__col h3{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); margin-bottom:1em; }
.rich__col p{ color:color-mix(in srgb, var(--cloud) 76%, transparent); line-height:1.7; }
.rich__cta{ margin-top:clamp(3rem,6vh,5rem); padding-top:clamp(2.5rem,5vh,4rem); border-top:1px solid var(--line); }
.rich__cta .door__title{ margin-bottom:1.5rem; }
@media (max-width:820px){ .rich__cols{ grid-template-columns:1fr; gap:2rem; } }