@import url("../fonts/fonts.css");

/* =====================================================================
   4WÄNDE+  ·  Landingpage
   Design-Tokens abgeleitet aus den Drucksorten
   ===================================================================== */

:root {
  /* --- Marke ------------------------------------------------------- */
  --gold:        #b39029;
  --gold-hell:   #c9a63c;
  --gold-dunkel: #8d711f;
  --hellgrau:    #e5e5e5;
  --anthrazit:   #272727;

  --weiss:       #ffffff;
  --papier:      #f4f4f3;
  --linie:       rgba(39, 39, 39, .14);
  --linie-hell:  rgba(255, 255, 255, .20);
  --text:        var(--anthrazit);
  --text-leise:  rgba(39, 39, 39, .68);

  /* --- Typografie -------------------------------------------------- */
  --sans:  "Lato", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  /* Lato Semibold (600) ist in der Google-Fonts-Ausgabe nicht enthalten.
     Bis die Lizenzdatei vorliegt rendert der Browser hier 700.
     → fonts.css: auskommentierten @font-face-Block aktivieren. */
  --fw-light: 300;
  --fw-reg:   400;
  --fw-semi:  600;

  --fs-micro: .6875rem;
  --fs-klein: .8125rem;
  --fs-body:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-lead:  clamp(1.125rem, 1.02rem + .5vw, 1.4rem);
  --fs-h3:    clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
  --fs-h2:    clamp(2rem, 1.4rem + 2.6vw, 3.9rem);
  --fs-h1:    clamp(1.05rem, 5.6vw, 2.8rem);
  --fs-riese:  clamp(7.5rem, 34vw, 30rem);

  --track-wide: .16em;
  --track-mid:  .08em;

  /* --- Raster & Rhythmus ------------------------------------------- */
  --rand:    clamp(1.25rem, 5vw, 6.5rem);
  --max:     1440px;
  --lese:    68ch;
  --abschnitt: clamp(5.5rem, 11vw, 12rem);

  /* --- Geometrie (aus dem Keyvisual abgeleitet) --------------------- */
  --schraege: clamp(1.25rem, 3.2vw, 3.25rem);

  /* --- Motion ------------------------------------------------------ */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --dauer:     .7s;
}

/* Im zweispaltigen Hero teilt sich der Claim die Breite mit dem
   Keyvisual – deshalb dort eine flachere Skalierung. */
@media (min-width: 1081px) {
  :root { --fs-h1: clamp(1.9rem, 3.05vw, 2.8rem); }
}

/* =====================================================================
   Reset
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--weiss); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 999;
  transform: translateY(-200%);
  background: var(--anthrazit); color: var(--weiss);
  padding: .7rem 1.2rem; font-size: var(--fs-klein);
  letter-spacing: var(--track-mid); text-transform: uppercase;
}
.skip-link:focus { transform: none; }

/* =====================================================================
   Layout-Bausteine
   ===================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--abschnitt); position: relative; }

/* Abschnittskopf: Nummer + Kicker + Titel ---------------------------- */

.kopf { margin-bottom: clamp(2.75rem, 6vw, 5rem); }

.kicker {
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.kicker::before {
  content: "";
  width: clamp(1.75rem, 4vw, 3.5rem); height: 2px;
  background: currentColor;
  transform-origin: left;
  animation: strich-auf .9s var(--ease) both;
}

@keyframes strich-auf { from { transform: scaleX(0); } }

.titel {
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-transform: uppercase;
  max-width: 18ch;
}
.titel em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--gold);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.6;
  max-width: 54ch;
  color: var(--text-leise);
}

/* Gold-Balken-Zitat (Visitenkarten-Motiv) ---------------------------- */

.goldregel {
  border-left: 4px solid var(--gold);
  padding-left: clamp(1rem, 2vw, 1.6rem);
}

/* =====================================================================
   Buttons
   ===================================================================== */

.btn {
  --btn-bg:       var(--gold);
  --btn-fg:       var(--weiss);
  --btn-rand:     var(--gold);
  --btn-bg-hov:   transparent;
  --btn-fg-hov:   var(--gold);
  --btn-rand-hov: var(--gold);
  position: relative;
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--btn-rand);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-klein);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background-color: var(--btn-bg-hov);
  color: var(--btn-fg-hov);
  border-color: var(--btn-rand-hov);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(24,24,24,.35);
}

.btn .pfeil {
  width: .95em; height: .95em; flex: none;
  transition: transform .35s var(--ease);
}
.btn:hover .pfeil { transform: translateX(.25em); }

/* Varianten */
.btn--geist {
  --btn-bg: transparent;
  --btn-fg: var(--anthrazit);
  --btn-rand: rgba(39,39,39,.32);
  --btn-bg-hov: var(--anthrazit);
  --btn-fg-hov: var(--weiss);
  --btn-rand-hov: var(--anthrazit);
}

.btn--hell {
  --btn-bg: transparent;
  --btn-fg: var(--weiss);
  --btn-rand: rgba(255,255,255,.45);
  --btn-bg-hov: var(--weiss);
  --btn-fg-hov: var(--anthrazit);
  --btn-rand-hov: var(--weiss);
}

/* Dunkle Variante: löst den Button optisch vom goldenen Claim-Balken,
   Hover blendet zu Anthrazit über. */
.btn--dunkel {
  --btn-bg: var(--hellgrau);
  --btn-fg: var(--gold);
  --btn-rand: var(--gold);
  --btn-bg-hov: var(--anthrazit);
  --btn-fg-hov: var(--weiss);
  --btn-rand-hov: var(--anthrazit);
}

/* Textlink mit Unterstrich-Wipe */
.tlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-klein);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  padding-bottom: .3rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .5s var(--ease), color .3s var(--ease);
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 1px; color: var(--gold); }

/* =====================================================================
   Kopfzeile
   ===================================================================== */

.kopfzeile {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: transform .55s var(--ease), background-color .5s var(--ease),
              box-shadow .5s var(--ease), backdrop-filter .5s var(--ease);
}
.kopfzeile.is-fest {
  background: rgba(244, 244, 243, .86);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linie);
}
.kopfzeile.is-weg { transform: translateY(-102%); }

.kopfzeile__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  transition: padding .5s var(--ease);
}
.kopfzeile.is-fest .kopfzeile__inner { padding-block: .85rem; }

.marke img { width: clamp(112px, 13vw, 165px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.8rem); }
.nav a {
  font-size: var(--fs-klein);
  font-weight: var(--fw-reg);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  position: relative;
  padding-block: .35rem;
  transition: color .35s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--gold); }
.nav a:hover::after, .nav a:focus-visible::after,
.nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav a[aria-current="true"] { color: var(--gold); }

/* Burger: gestaffelte Striche greifen die schraegen Anschnitte des
   Keyvisuals auf – ohne Rahmenkasten, damit er ruhig neben der Marke steht. */
.burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  cursor: pointer; padding: 0;
  align-content: center; justify-items: end;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--anthrazit);
  transition: width .4s var(--ease), transform .45s var(--ease),
              opacity .3s var(--ease), background-color .35s var(--ease);
}
.burger span + span { margin-top: 6px; }
.burger span:nth-child(2) { width: 17px; }
.burger span:nth-child(3) { width: 11px; }

/* Beim Antippen/Hover richten sich die Striche aus und nehmen Gold an */
.burger:hover span, .burger:focus-visible span {
  width: 24px;
  background: var(--gold);
}

/* Geoeffnet: saubere Diagonale aus gleich langen Strichen */
.burger[aria-expanded="true"] span { width: 24px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =====================================================================
   Hero
   ===================================================================== */

/* Huelle fuer den Vorhang. Kein overflow-clip hier – das wuerde das
   sticky Anpinnen der Buehne aushebeln. */
.aufdecken { position: relative; }

.hero {
  position: relative;
  /* Deckt das Leitband ab, solange der Vorhang zu ist */
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: clamp(7.5rem, 11svh, 9rem);
  padding-bottom: clamp(3rem, 7svh, 5.5rem);
  overflow: clip;
  background: var(--hellgrau);
}

.hero__textur {
  position: absolute; inset: -8% 0 -8% 0;
  background: url("../img/wellen.jpg") center/cover no-repeat;
  opacity: .7;
  will-change: transform;
}
.hero__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(244,244,243,.96) 0%, rgba(244,244,243,.82) 44%, rgba(238,238,237,.5) 100%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

/* --- Claim: die goldenen Balken aus der Drucksorte ------------------ */

.claim { margin: 0 0 clamp(1.8rem, 4vw, 2.8rem); }

.claim__zeile {
  display: block;
  /* Kein max-width: der Wipe (clip-path) würde sonst den Text beschneiden.
     Die Schriftgröße ist vw-basiert und hält den Balken im Viewport. */
  width: max-content;
  white-space: nowrap;
  background: var(--gold);
  color: var(--weiss);
  padding: .14em .55em .2em;
  line-height: 1.12;
  font-size: var(--fs-h1);
  /* Wipe-Reveal */
  clip-path: inset(0 100% 0 0);
  animation: balken-wipe 1.05s var(--ease) both;
}
.claim__zeile + .claim__zeile { margin-top: .14em; }
.claim__zeile:nth-child(1) { animation-delay: .25s; }
.claim__zeile:nth-child(2) { animation-delay: .48s; }
.claim__zeile--versetzt { margin-left: clamp(.75rem, 3.5vw, 3.5rem); }

.claim__kraft {
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.claim__zart {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.02em;
  text-transform: uppercase;
  letter-spacing: .005em;
}

@keyframes balken-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero__text {
  max-width: 46ch;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: rgba(39,39,39,.72);
  animation: auf 1s var(--ease) 1.05s both;
}

.hero__aktionen {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  animation: auf 1s var(--ease) 1.2s both;
}

@keyframes auf {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Keyvisual */
.hero__visual {
  position: relative;
  animation: kv-auf 1.5s var(--ease) .35s both;
  will-change: transform;
}
/* Keyvisual: die vier Wandfotos wandern im Kreis weiter, der Raum
   neigt sich dabei leicht mit. Die Neigung sitzt auf .kv, weil
   .hero__visual seine transform schon fuer Parallax und Auftritt nutzt. */
.kv {
  --kv-neigung: 0deg;
  transform: perspective(1600px) rotateY(var(--kv-neigung));
  transition: transform 2.8s var(--ease-io);
  will-change: transform;
}

.kv__svg {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(68svh, 640px);
  height: auto;
  margin-inline-start: auto;
  filter: drop-shadow(0 40px 70px rgba(39,39,39,.22));
}

/* Hinten liegt das aktuelle Foto, vorn wird das naechste darueber
   eingeblendet – so gibt es kein Aufhellen waehrend der Blende. */
.kv__foto--vorn {
  opacity: 0;
  transition: opacity 1.5s var(--ease) var(--verzug, 0ms);
}
.kv__foto--vorn.is-sichtbar { opacity: 1; }
@keyframes kv-auf {
  from { opacity: 0; transform: translateY(38px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* Scroll-Hinweis */
.scrollhint {
  position: absolute; left: var(--rand); bottom: clamp(1.5rem, 4vh, 2.6rem);
  z-index: 3;
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-leise);
  animation: auf 1s var(--ease) 1.6s both;
}
.scrollhint .spur {
  position: relative; display: block;
  width: 62px; height: 1px; background: rgba(39,39,39,.25); overflow: hidden;
}
.scrollhint .spur::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  animation: spur 2.4s var(--ease-io) infinite;
}
@keyframes spur {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* =====================================================================
   Leitsatzband (Gold)

   Grundzustand – ohne JS, auf Touch und bei reduzierter Bewegung:
   schlicht als Band unter dem Hero, ganz ohne Choreografie.
   ===================================================================== */

.leitband {
  position: relative; z-index: 0;
  color: var(--weiss);
  padding-block: clamp(3.25rem, 8vw, 6rem);
  /* Anthrazit als Grundton, falls das Foto noch nicht geladen ist */
  background: var(--anthrazit) url("../img/leitband-wilferdingen.jpg") center / cover no-repeat;
}

/* Schleier: das Foto ist warm und unruhig – erst damit sitzt die
   weisse Kursive ruhig darauf. */
.leitband::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(24,24,24,.72) 0%, rgba(24,24,24,.6) 45%, rgba(24,24,24,.66) 100%);
  pointer-events: none;
}

/* Ikone oben, Leitsatz darunter – als Block mittig im Bild */
.leitband__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.25rem, 3.5vmin, 2.75rem);
  text-align: center;
}

.leitband__icon {
  /* Waechst mit der kleineren Bildschirmkante mit */
  width: clamp(150px, 26vmin, 330px); height: auto; flex: none;
  /* Grafik liegt schwarz vor – hier weiss einfaerben */
  filter: brightness(0) invert(1);
}

.leitband__zitat p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.7rem, 1rem + 3.1vw, 4rem);
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--weiss);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* =====================================================================
   Vorhang (nur Desktop + volle Bewegung, per JS freigeschaltet)

   Die Buehne wird kurz angepinnt, der Hero liegt darueber und schiebt
   sich nach links aus dem Bild – das Leitband dahinter bleibt stehen
   und wird von rechts nach links freigelegt. Danach loest der Pin und
   die Seite scrollt normal weiter.

   Stellschraube: --vorhang-weg = Scrollstrecke des Vorhangs.
   --vorhang (0 … 1) wird von main.js aus dem Scrollfortschritt gesetzt.
   ===================================================================== */

.vorhang-an .aufdecken {
  --vorhang-weg: 80svh;
  --vorhang: 0;
  height: calc(100svh + var(--vorhang-weg));
}

.vorhang-an .aufdecken__buehne {
  position: sticky; top: 0;
  height: 100svh;
  /* Haelt den wegfahrenden Hero im Rahmen – nur auf der Buehne selbst,
     Vorfahren bleiben clip-frei, damit sticky greift. */
  overflow: clip;
}

.vorhang-an .hero {
  position: absolute; inset: 0;
  min-height: 0;
  transform: translate3d(calc(var(--vorhang) * -100%), 0, 0);
  will-change: transform;
}

.vorhang-an .leitband {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding-block: 0;
}

/* =====================================================================
   Manifest / Positionierung
   ===================================================================== */

.manifest { background: var(--papier); }

.manifest__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Zeilenabstand 0: den Abstand unter dem Kicker regelt dessen eigener Rand */
  gap: 0 clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Der Kicker belegt eine eigene Rasterzeile über beiden Spalten –
   so beginnen Headline und Statement automatisch auf gleicher Höhe. */
.manifest__kicker { grid-column: 1 / -1; }

/* Statement rechts – als Zitat gesetzt: goldene Senkrechte,
   Cormorant Garamond Semibold Italic in Gold, Anführungszeichen hängen
   in den Anschnitt, damit die Textkante sauber bleibt. */
.manifest__aussage {
  margin: 0;
  border-left: 4px solid var(--gold);
  /* Reichlich Abstand: das haengende Anfuehrungszeichen zieht die erste
     Zeile nach links, und die Kursive ragt zusaetzlich ueber ihre Box. */
  padding-left: clamp(1.6rem, 3vw, 2.75rem);
}

.grossaussage {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.05rem + 2.5vw, 3.35rem);
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--gold);
  max-width: 19ch;
  text-indent: -.28em;
}

.manifest__spalte p + p { margin-top: 1.15rem; }
.manifest__spalte p { color: var(--text-leise); max-width: 46ch; }

/* Serif-Überschrift, geteilt von Vision und Über uns –
   gleiche Auszeichnung wie die Überschriften der Kompetenzbausteine */
.titel-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 2.25vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--anthrazit);
  max-width: 22ch;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

/* =====================================================================
   Kompetenz — vollflächig Gold
   ===================================================================== */

.kompetenz {
  background: var(--gold);
  color: var(--weiss);
  position: relative;
  overflow: clip;
}
/* Menschenmotiv unter dem Goldfeld – wie in der Drucksorte: ein Band im
   oberen Bereich, das nach unten in die reine Goldfläche ausläuft.
   luminosity übernimmt nur die Helligkeit des Fotos und behält den
   Goldton der Fläche, ergibt also eine Duplex-Anmutung. */
.kompetenz::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: clamp(340px, 56%, 700px);
  background: url("../img/kompetenz-menschen.jpg") center 62% / cover no-repeat;
  mix-blend-mode: luminosity;
  opacity: .34;
  /* Oben zurückgenommen, damit der Kicker trägt; am stärksten hinter der
     Headline; nach unten Auslauf in die reine Goldfläche. */
  -webkit-mask-image: linear-gradient(to bottom,
              rgba(0,0,0,.32) 0%, rgba(0,0,0,.8) 24%, #000 42%, transparent 100%);
          mask-image: linear-gradient(to bottom,
              rgba(0,0,0,.32) 0%, rgba(0,0,0,.8) 24%, #000 42%, transparent 100%);
  pointer-events: none;
}
.kompetenz > * { position: relative; z-index: 1; }

.kompetenz .kicker { color: var(--weiss); }
.kompetenz .titel  { color: var(--weiss); }

.kompetenz__kopf {
  display: flex; align-items: flex-end;
  gap: clamp(.75rem, 2vw, 1.8rem);
  margin-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

/* Die große Ziffer aus der Drucksorte: Cormorant Garamond Semibold Italic.
   Sie überragt den Titelblock deutlich und trägt ihn optisch. */
.kompetenz__vier {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-riese);
  line-height: .74;
  color: var(--weiss);
  flex: none;
  /* Die Zeilenbox der Riesenziffer sitzt viel höher als die Glyphe –
     hier zurückgeholt, damit sie unten nicht in die Register läuft. */
  margin-block: calc(var(--fs-riese) * -.135) 0;
}

.kompetenz__titel {
  font-size: clamp(1.8rem, 1rem + 3.4vw, 4.3rem);
  font-weight: var(--fw-light);
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
  padding-bottom: .06em;
}

/* =====================================================================
   Bausteine als Registerkarten
   ===================================================================== */

.bausteine {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}

/* --- Registerleiste -------------------------------------------------- */

.bs-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.3);
}

.bs-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(.9rem, 2vw, 1.3rem);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  background: transparent;
  color: var(--weiss);
  text-align: left;
  cursor: pointer;
  transition: background-color .45s var(--ease), color .45s var(--ease),
              opacity .45s var(--ease);
}

.bs-tab:hover { background: rgba(255,255,255,.14); }

/* Der aktive Reiter wird zur weißen Fläche und gehört damit sichtbar
   zur geöffneten Karte rechts daneben. */
.bs-tab[aria-selected="true"] {
  background: var(--weiss);
  color: var(--anthrazit);
  border-bottom-color: transparent;
}

.bs-tab__icon {
  width: 26px; height: auto;
  /* Grafik liegt in Gold vor – auf Gold weiß einfärben, auf Weiß im Original */
  filter: brightness(0) invert(1);
  transition: transform .55s var(--ease), filter .45s var(--ease);
}
.bs-tab[aria-selected="true"] .bs-tab__icon {
  filter: none;
  transform: translateY(-2px) rotate(-8deg);
}

.bs-tab__titel {
  font-size: clamp(1.05rem, .9rem + .55vw, 1.4rem);
  font-weight: var(--fw-light);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* --- Bühne mit den Registerinhalten ---------------------------------- */

.bs-buehne { display: grid; }

.bs-panel {
  grid-area: 1 / 1;
  padding: clamp(1.8rem, 3.4vw, 3.2rem);
  background: var(--weiss);
  color: var(--text);
  box-shadow: 0 26px 60px rgba(39,39,39,.16);
  /* Anschnitt aus dem Logo */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), calc(100% - var(--schraege)) 100%, 0 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .5s;
}
.bs-panel.is-offen {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s var(--ease) .05s, transform .7s var(--ease) .05s, visibility 0s;
}

.bs-panel__titel {
  /* Jetzt ein ganzer Satz statt eines Einzelworts - kleinerer Schnitt,
     mehr Luft zwischen den Zeilen. */
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 2.25vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--anthrazit);
  max-width: 22ch;
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}

.bs-panel__text {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.58;
  max-width: 46ch;
  color: var(--text-leise);
}

/* Leistungen mit dem Marken-Plus als Aufzählungszeichen */
.bs-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--linie);
}
.bs-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: baseline;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.42;
}
.bs-liste li::before {
  content: "+";
  font-family: var(--sans);
  font-weight: var(--fw-semi);
  font-size: 1.05em;
  line-height: 1;
  color: var(--gold);
}

/* =====================================================================
   Referenzen
   ===================================================================== */

.referenzen { background: var(--hellgrau); }

.ref-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
}

.ref {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--anthrazit);
  /* Parallelogramm-Anschnitt aus dem Keyvisual */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
  transition: clip-path .8s var(--ease);
}
.ref--gegen {
  clip-path: polygon(0 var(--schraege), 100% 0, 100% 100%, 0 100%);
}

.ref__bild {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease), filter .8s var(--ease);
  filter: saturate(.86) contrast(1.02);
}
.ref:hover .ref__bild, .ref:focus-visible .ref__bild {
  transform: scale(1.12);
  filter: saturate(1) contrast(1.04);
}

.ref__veil {
  position: absolute; inset: 0;
  /* Dezent: nur so viel Abdunklung, wie Ort/Name auf jedem Foto lesbar
     macht – der Rest des Bilds bleibt frei sichtbar. */
  background: linear-gradient(to top,
              rgba(24,24,24,.4) 20%, rgba(24,24,24,.18) 40%,
              rgba(24,24,24,.04) 50%, rgba(24,24,24,0)  98%);
  opacity: 1;
  transition: opacity .6s var(--ease);
}
.ref:hover .ref__veil { opacity: 1; }

.ref__gold {
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .75s var(--ease);
}
.ref:hover .ref__gold, .ref:focus-visible .ref__gold { transform: scaleX(1); }

.ref__meta {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  padding-bottom: calc(clamp(1.2rem, 2.4vw, 2rem) + var(--schraege) * .55);
  color: var(--weiss);
  display: flex; flex-direction: column; gap: .35rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.65);
}
.ref--gegen .ref__meta { padding-bottom: clamp(1.2rem, 2.4vw, 2rem); }

.ref__ort {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold-hell);
  font-weight: var(--fw-semi);
}
.ref__name {
  font-size: clamp(1.15rem, .9rem + .9vw, 1.85rem);
  font-weight: var(--fw-light);
  line-height: 1.15;
  letter-spacing: .01em;
}
.ref__art {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 1.05em;
  color: rgba(255,255,255,.8);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .5s var(--ease);
}
.ref:hover .ref__art, .ref:focus-visible .ref__art { max-height: 3em; opacity: 1; }

/* Raster-Zuweisung */
.ref--gross { grid-column: span 7; aspect-ratio: 16 / 11; }
.ref--hoch  { grid-column: span 5; aspect-ratio: 4 / 5; }
.ref--drittel { grid-column: span 4; aspect-ratio: 4 / 3; }
.ref--halb  { grid-column: span 6; aspect-ratio: 3 / 2; }

/* =====================================================================
   Team
   ===================================================================== */

.team__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

/* Logoelement als dezenter Störer im Hintergrund der Textspalte */
.koepfe {
  position: relative;
  isolation: isolate;
  min-height: 260px;
}
.koepfe::before {
  content: "";
  position: absolute; z-index: -1;
  left: -10%; top: 50%;
  translate: 0 -50%;
  width: min(130%, 600px);
  aspect-ratio: 170.99 / 180.85;
  background: url("../svg/logoelement.svg") center/contain no-repeat;
  opacity: .35;
  pointer-events: none;
}

.ueber__text p { color: var(--text-leise); max-width: 46ch; }
.ueber__text p + p { margin-top: 1.15rem; }

/* =====================================================================
   CTA / Erstgespräch
   ===================================================================== */

.cta {
  background: var(--anthrazit);
  color: var(--weiss);
  position: relative;
  overflow: clip;
}
.cta::before {
  content: "";
  position: absolute; right: -12%; top: -18%;
  transform: translate3d(0, var(--cta-shift, 0px), 0);
  width: min(46vw, 620px); aspect-ratio: 170.99 / 180.85;
  background: url("../svg/logoelement.svg") center/contain no-repeat;
  opacity: .3;
  pointer-events: none;
  will-change: transform;
}
.cta > * { position: relative; z-index: 1; }

.cta .kicker { color: var(--gold-hell); }
.cta .titel  { color: var(--weiss); }
.cta .lead   { color: rgba(255,255,255,.66); }

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.cta__vorteile { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.15rem; }
.cta__vorteile li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  color: rgba(255,255,255,.78);
  font-size: var(--fs-body);
}
.cta__vorteile svg { width: 18px; height: 18px; color: var(--gold-hell); margin-top: .45em; flex: none; }

.direkt {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--linie-hell);
  display: grid; gap: .5rem;
}
.direkt a {
  font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem);
  font-weight: var(--fw-light);
  color: var(--weiss);
  width: max-content; max-width: 100%;
  background-image: linear-gradient(var(--gold-hell), var(--gold-hell));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left bottom;
  transition: background-size .5s var(--ease), color .3s var(--ease);
}
.direkt a:hover, .direkt a:focus-visible { background-size: 100% 1px; color: var(--gold-hell); }

/* Formular */
.form {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--linie-hell);
  padding: clamp(1.5rem, 3.4vw, 2.8rem);
}
.form__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.feld { position: relative; display: block; margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.feld > span {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
  margin-bottom: .55rem;
}
.feld input, .feld textarea, .feld select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--linie-hell);
  padding: .65rem 0;
  color: var(--weiss);
  font-weight: var(--fw-light);
  transition: border-color .4s var(--ease);
}
.feld select option { background: var(--anthrazit); color: var(--weiss); }
.feld textarea { resize: vertical; min-height: 5.5rem; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-bottom-color: var(--gold-hell);
}
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
  outline: none;
}
.feld::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold-hell);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.feld:focus-within::after { transform: scaleX(1); }

.form__fuss {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; margin-top: .5rem;
}

.checkbox { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  font-size: var(--fs-klein); color: rgba(255,255,255,.62); margin-bottom: 1.5rem; }
.checkbox input { width: 1.05rem; height: 1.05rem; accent-color: var(--gold); margin-top: .3em; }
.checkbox a { text-decoration: underline; text-underline-offset: 3px; }

.form__status {
  margin-top: 1.25rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--gold-hell);
  background: rgba(179,144,41,.14);
  font-size: var(--fs-klein);
  color: rgba(255,255,255,.85);
}
.form__status[hidden] { display: none; }

/* =====================================================================
   Fußzeile
   ===================================================================== */

.fusszeile {
  background: var(--anthrazit);
  color: rgba(255,255,255,.62);
  border-top: 1px solid var(--linie-hell);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
  font-size: var(--fs-klein);
}
.fusszeile__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.fusszeile img { width: 160px; margin-bottom: 1.25rem; }
.fusszeile h4 {
  font-size: var(--fs-micro); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--gold-hell);
  font-weight: var(--fw-semi); margin-bottom: 1rem;
}
.fusszeile li + li { margin-top: .55rem; }
.fusszeile a:hover, .fusszeile a:focus-visible { color: var(--weiss); }
.fusszeile__unten {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--linie-hell);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: rgba(255,255,255,.4);
}
.fusszeile__unten ul { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* =====================================================================
   Scroll-Reveal
   ===================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--verzug, 0ms);
}
[data-reveal].is-sichtbar { opacity: 1; transform: none; }

[data-reveal="wipe"] {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease);
  transition-delay: var(--verzug, 0ms);
}
[data-reveal="wipe"].is-sichtbar { clip-path: inset(0 0 0 0); }

[data-reveal="maske"] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease);
  transition-delay: var(--verzug, 0ms);
}
[data-reveal="maske"].is-sichtbar { clip-path: inset(0 0 0 0); }

/* Zeilenweises Aufsteigen von Überschriften */
.zeile { display: block; overflow: hidden; }
.zeile > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: var(--verzug, 0ms);
}
.is-sichtbar .zeile > span, .zeile.is-sichtbar > span { transform: none; }

/* =====================================================================
   Ladeschleier
   ===================================================================== */

.vorhang {
  position: fixed; inset: 0; z-index: 500;
  background: var(--hellgrau);
  display: grid; place-items: center;
  transition: clip-path 1s var(--ease) .15s, visibility 0s linear 1.2s;
}
.vorhang img { width: clamp(120px, 18vw, 200px); opacity: .9; }
.vorhang.is-fort {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}

/* =====================================================================
   Fortschrittsbalken
   ===================================================================== */

.fortschritt {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

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

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); }
  .hero__visual { max-width: 460px; margin-inline: auto; }
  .kv__svg { max-height: 46svh; margin-inline: auto; }
  .hero { min-height: auto; }
  .scrollhint { display: none; }

  .manifest__grid,
  .team__grid,
  .cta__grid { grid-template-columns: 1fr; }

  /* Einspaltig braucht das Statement wieder Luft nach oben */
  .manifest__aussage { margin-top: clamp(2.25rem, 6vw, 3.25rem); }

  /* Auf schmalen Bildschirmen zuerst die Aussage, dann die Gesichter */
  .team__grid > .koepfe { order: 2; margin-top: 1rem; }

  .ref--gross, .ref--hoch, .ref--halb, .ref--drittel { grid-column: span 6; }
  .ref--gross { aspect-ratio: 4 / 3; }
  .ref--hoch  { aspect-ratio: 4 / 3; }

  .fusszeile__grid { grid-template-columns: 1fr 1fr; }

  /* Register wandern über die Bühne */
  .bausteine { grid-template-columns: minmax(0, 1fr); }
  .bs-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 0;
    gap: 0 clamp(1rem, 3vw, 2rem);
  }
  .bs-tab { border-top: 1px solid rgba(255,255,255,.3); }
  .bs-panel__text { max-width: none; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: grid; }

  /* Das Overlay liegt im Stapelkontext der Kopfzeile ueber seinen
     Geschwistern – Marke und Burger muessen darueber bedienbar bleiben,
     sonst ist das Schliesskreuz unsichtbar. */
  .marke, .burger { position: relative; z-index: 95; }

  .nav.is-offen {
    display: flex;
    position: fixed; inset: 0;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.5rem;
    padding: var(--rand);
    background: var(--hellgrau);
    z-index: 90;
  }
  .nav.is-offen a { font-size: clamp(1.5rem, 7vw, 2.4rem); letter-spacing: .02em; }

  .form__reihe { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero__aktionen .btn { justify-content: center; text-align: center; }

  /* Auf schmalen Schirmen darf der Leitsatz die Breite ausnutzen */
  .leitband__zitat p { max-width: 20ch; }

  .ref--gross, .ref--hoch, .ref--halb, .ref--drittel { grid-column: span 12; aspect-ratio: 3 / 2; }
  .koepfe { min-height: 180px; }
  .koepfe::before {
    left: 0; width: min(110%, 380px);
    opacity: .3;
  }
  .fusszeile__grid { grid-template-columns: 1fr; }
  .claim__zeile--versetzt { margin-left: .5rem; }

  .bs-tabs { grid-template-columns: 1fr; }
  .bs-tab { padding-block: .95rem; }
  .bs-tab__titel { font-size: 1rem; }
  .bs-liste { grid-template-columns: 1fr; }
}

/* =====================================================================
   Reduzierte Bewegung
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal="wipe"], [data-reveal="maske"] { clip-path: none !important; }
  /* Nicht gewählte Registerinhalte bleiben verborgen */
  .bs-panel:not(.is-offen) { opacity: 0 !important; visibility: hidden !important; }
  .zeile > span { transform: none !important; }
  .vorhang { display: none; }
}

/* Druck */
@media print {
  .kopfzeile, .vorhang, .fortschritt, .scrollhint, .form { display: none; }
  body { background: #fff; }
}