/* ============================================================
   KRYPTO.LEICHTGEMACHT — Unterseite "Wer wir sind"
   Einstieg: Vollbild, Ink-dominiert, cineastisches Dunkelbild.
   Bricht bewusst zur hellen Mainpage, schließt an die dunkle
   Erfahrungen-Seite an. Tokens & Footer/Nav aus brand-v3.css.
   ============================================================ */

:root {
  --wws-linen: #F5F0E8;
  --wws-ink:   #100D07;
  --wws-gold:  #CDA04A;
  --wws-dust:  #8B7355;
}

/* Seite global dunkel, damit Überscroll/Footer-Anschluss ruhig bleibt */
body.wws { background: var(--wws-ink); }

/* ============================================================
   NAV — über dunklem Hero: transparent, heller Text
   (wie Startseite; kippt beim Scrollen auf Linen)
   ============================================================ */
.wws .nav:not(.is-scrolled) .brand__name { color: var(--on-dark); }
.wws .nav:not(.is-scrolled) .brand__mono { color: var(--gold-soft); }
.wws .nav:not(.is-scrolled) .nav__link  { color: #F5F0E8; text-shadow: 0 1px 3px rgba(16, 13, 7, 0.45), 0 2px 14px rgba(16, 13, 7, 0.28); }
.wws .nav:not(.is-scrolled) .nav__link:hover { color: #F5F0E8; }
.wws .nav:not(.is-scrolled) .nav__cta   { color: #F5F0E8; border-color: rgba(245, 240, 232, 0.6); background: transparent; text-shadow: 0 1px 3px rgba(16, 13, 7, 0.45), 0 2px 14px rgba(16, 13, 7, 0.28); }
.wws .nav:not(.is-scrolled) .nav__cta:hover { background: var(--gold); color: var(--noir); }
.wws .nav:not(.is-scrolled) .nav__burger span { background: var(--on-dark); }

/* Beim Scrollen (is-scrolled) gelten die Linen-Regeln aus brand-v3.css */

/* ============================================================
   HERO / EINSTIEG
   ============================================================ */
.wws-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--wws-ink);
  isolation: isolate;
}

/* ---- Hintergrundbild + ruhiger Ken-Burns ---- */
.wws-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wws-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 46%;
  transform-origin: 60% 44%;
  will-change: transform;
  animation: wwsKenBurns 32s ease-in-out infinite alternate;
}
@keyframes wwsKenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.11); }
}

/* ---- Starkes dunkles Overlay: viel ruhige Fläche, heller Text klar ---- */
.wws-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(16, 13, 7, 0.96) 0%,
      rgba(16, 13, 7, 0.86) 30%,
      rgba(16, 13, 7, 0.66) 58%,
      rgba(16, 13, 7, 0.42) 100%),
    linear-gradient(100deg,
      rgba(16, 13, 7, 0.92) 0%,
      rgba(16, 13, 7, 0.72) 36%,
      rgba(16, 13, 7, 0.40) 66%,
      rgba(16, 13, 7, 0.18) 100%);
}
/* feiner goldener Lichtschimmer oben rechts, sehr dezent */
.wws-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(80% 60% at 86% 16%, rgba(205,160,74,0.10), rgba(16,13,7,0) 60%);
}

/* ---- Inhalt: asymmetrisches, editorial gesetztes Raster, unten verankert ---- */
.wws-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin: 0 auto;
  align-self: flex-end;
  padding-bottom: clamp(4.5rem, 11vh, 8.5rem);
  padding-top: 9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(19rem, 25vw, 25rem);
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: clamp(2rem, 5vw, 6rem);
}

/* Lead-Block: Kapitel-Label + dominante These — spannt die volle Breite,
   unten verankert; hält damit den sauberen Zwei-Zeilen-Umbruch der These */
.wws-hero__lead {
  grid-column: 1 / -1;
  grid-row: 2;
}

.wws-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--wws-gold);
  margin-bottom: 1.9rem;
}
/* feine Goldlinie als Kapitel-Marker */
.wws-hero__marker {
  display: block;
  width: clamp(2rem, 4vw, 3.25rem);
  height: 1px;
  flex: none;
  background: linear-gradient(to right, rgba(205,160,74,0), var(--wws-gold));
}

/* ---- Große These: dominiert den Raum ---- */
.wws-hero__statement {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.06;
  color: var(--wws-linen);
  font-size: clamp(2rem, 5.6vw, 5.1rem);
}

/* Bewusster Zwei-Zeilen-Umbruch: jede Zeile als Block — sauberer Umbruch an Wortgrenzen */
.wws-line {
  display: block;
}

/* Schärfe-Übergang: startet unscharf/verschwommen, wird langsam gestochen scharf.
   Wirkt rein über dem fertigen Text — kein Reflow, der Umbruch bleibt unverändert. */
.wws-hero__statement.is-blurred {
  filter: blur(13px);
  opacity: 0.5;
  will-change: filter, opacity;
}
.wws-hero__statement.is-blurred.is-sharp {
  filter: blur(0);
  opacity: 1;
  transition: filter 1.35s var(--ease-smooth), opacity 1.05s var(--ease-smooth);
}

/* ---- Kontext: versetzt in schmaler Spalte rechts, oberhalb der These ---- */
.wws-hero__context {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  font-family: var(--sans);
  font-size: clamp(0.94rem, 1.15vw, 1.06rem);
  line-height: 1.72;
  color: var(--wws-dust);
  max-width: 34ch;
  padding-left: 1.6rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
/* feine Trennlinie links der Spalte, betont die Verteilung */
.wws-hero__context::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(205,160,74,0.5), rgba(205,160,74,0));
}
/* lokales dunkles Overlay hinter der Kontextspalte, damit sie über dem Bild lesbar bleibt */
.wws-hero__context::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.4rem -1.6rem -1.6rem -0.6rem;
  background: radial-gradient(120% 100% at 70% 60%, rgba(16,13,7,0.78), rgba(16,13,7,0) 78%);
  pointer-events: none;
}

/* ---- Schmale Viewports: zurück zur ruhigen Stapelung ---- */
@media (max-width: 860px) {
  .wws-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 2.2rem;
  }
  .wws-hero__context {
    grid-column: 1;
    grid-row: auto;
    max-width: 42ch;
    margin-bottom: 0;
  }
  .wws-hero__lead {
    grid-column: 1;
    grid-row: auto;
    order: -1;
  }
}

/* ---- Scroll-Indikator ---- */
.wws-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(245, 240, 232, 0.42);
}
.wws-hero__scroll .wws-hero__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(205,160,74,0.8), rgba(205,160,74,0));
  transform-origin: top;
  animation: wwsScroll 2.4s var(--ease-expo) infinite;
}
@keyframes wwsScroll {
  0%   { transform: scaleY(0);   opacity: 0; }
  35%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .wws-hero__img { animation: none; }
  .wws-hero__scroll .wws-hero__scroll-line { animation: none; opacity: 0.6; }
  .wws-hero__statement.is-blurred { filter: none; opacity: 1; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .wws-hero__img { object-position: 66% 46%; }
  .wws-hero__inner { padding-bottom: 4.5rem; max-width: 100%; }
  .wws-hero__context { max-width: 100%; }
}

/* ============================================================
   WOHER WIR KOMMEN — Geschichte
   Ruhige, kompakte Textspalte. Erster geordneter Block nach
   dem Chaos der Eröffnung. Dunkel-warm, Creme-Fließtext.
   ============================================================ */
.cw {
  position: relative;
  background: radial-gradient(120% 95% at 50% 8%, #1a130b 0%, #0c0906 56%, #080604 100%);
  padding: clamp(3.25rem, 6.5vh, 5.5rem) 0 clamp(4rem, 8vh, 7rem);
  overflow: hidden;
}
/* warmer Lichtschein hinter dem Kern-Moment */
.cw__glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(120%, 60rem);
  height: 42rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(205,160,74,0.13) 0%, rgba(205,160,74,0.05) 38%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
/* feines Noise-Overlay, sehr dezent */
.cw__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 1;
  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");
}

.cw__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  max-width: 68rem;
  margin: 0 auto;
}

/* Eyebrow — zentriert, klein, gesperrt, Gold */
.cw__eyebrow {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--wws-gold);
  margin: 0 0 1.6rem;
}

/* Einleitung — zentriert, gedämpftes Creme, schmale Spalte */
.cw__intro {
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  line-height: 1.74;
  color: #b8ad9e;
  max-width: 46ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.cw__brand { color: var(--wws-linen); }
.cw__brand--gold { color: var(--wws-gold); font-style: normal; }

/* gemeinsame Label-Optik */
.cw__label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin: 0 0 1.4rem;
}
.cw__label--dust { color: var(--wws-dust); }
.cw__label--gold { color: var(--wws-gold); }

/* Listen — Vorher / Nachher */
.cw__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw__row {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.95rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid rgba(245,240,232,0.08);
  font-family: var(--sans);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
}
.cw__row:last-child { border-bottom: 1px solid rgba(245,240,232,0.08); }

.cw__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05em;
}
.cw__mark--x { color: var(--wws-dust); opacity: 0.7; }
.cw__mark--dot {
  position: relative;
}
.cw__mark--dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--wws-gold);
  box-shadow: 0 0 10px 1px rgba(205,160,74,0.55);
}

/* Vorher — alles gedämpft in Dust-Braun */
.cw__list--before .cw__row-text { color: var(--wws-dust); }

/* Nachher — Kontrast: gehalten in Creme, "statt ..." in Dust */
.cw__keep { color: var(--wws-linen); }
.cw__drop { color: var(--wws-dust); }

/* Kern-Moment */
.cw__core {
  margin: clamp(2.75rem, 5.5vh, 4.5rem) 0;
  text-align: center;
}
.cw__graph {
  max-width: 30rem;
  margin: 0 auto;
}
.cw__svg { width: 100%; height: auto; display: block; overflow: visible; }
.cw__axis { stroke: rgba(245,240,232,0.13); stroke-width: 1; }
.cw__line { fill: none; stroke-linecap: round; }
.cw__line--up { stroke: var(--wws-dust); stroke-width: 1.6; }
.cw__line--down { stroke: var(--wws-gold); stroke-width: 2.6; }
.cw__cross-ring { fill: none; stroke: var(--wws-gold); stroke-width: 1.6; opacity: 0; }
.cw__cross-dot { fill: var(--wws-gold); opacity: 0; }
.cw__glabel {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0;
}
.cw__glabel--up { fill: var(--wws-dust); }
.cw__glabel--down { fill: var(--wws-gold); }

/* Linien-Zeichnung beim Reveal */
.cw__graph .cw__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.cw__graph.is-in .cw__line {
  transition: stroke-dashoffset 1.1s var(--ease-smooth);
  stroke-dashoffset: 0;
}
.cw__graph.is-in .cw__cross-ring,
.cw__graph.is-in .cw__cross-dot {
  transition: opacity 0.5s ease-out 1s;
  opacity: 1;
}
.cw__graph.is-in .cw__cross-ring { opacity: 1; }
.cw__graph.is-in .cw__glabel {
  transition: opacity 0.6s ease-out 1.1s;
  opacity: 1;
}

.cw__caption {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #b8ad9e;
  max-width: 30rem;
  margin: 1.5rem auto 0;
  text-wrap: pretty;
}

.cw__quote {
  margin: clamp(2rem, 4.5vh, 3.25rem) auto 0;
  max-width: 36rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.85rem, 4.4vw, 3.2rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--wws-linen);
  text-wrap: balance;
}
.cw__quote-gold { color: var(--wws-gold); }

/* Abschluss */
.cw__close {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--wws-linen);
  margin: clamp(2.75rem, 5.5vh, 4.5rem) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .cw__graph .cw__line { stroke-dashoffset: 0 !important; transition: none !important; }
  .cw__graph .cw__cross-ring { opacity: 1 !important; }
  .cw__graph .cw__cross-dot, .cw__graph .cw__glabel { opacity: 1 !important; transition: none !important; }
}

@media (max-width: 640px) {
  .cw { padding: 2.75rem 0 3.5rem; }
  .cw__intro { font-size: 1.04rem; }
  .cw__quote { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
}

/* --- Woher wir kommen: Headline, Kacheln, Absätze (zentriert) --- */
.cw__headline {
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--wws-linen);
  max-width: 20ch;
  margin: 0 auto 1.5rem;
  text-wrap: balance;
}
.cw__label--center { text-align: center; }

.cw__flaws { margin-top: clamp(2.75rem, 5.5vh, 4rem); }
.cw__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 1.4rem);
  margin: 0 auto;
}
.cwtile {
  text-align: left;
  background: rgba(139, 115, 85, 0.08);
  border: 1px solid rgba(139, 115, 85, 0.28);
  border-radius: 10px;
  padding: clamp(1.15rem, 1.7vw, 1.45rem);
}
.cwtile__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1;
  color: var(--wws-dust);
  margin-bottom: 0.7rem;
}
.cwtile__text {
  font-family: var(--sans);
  font-size: clamp(0.96rem, 1.2vw, 1.06rem);
  line-height: 1.55;
  color: #cfc4b4;
}
.cwtile__text .ln {
  text-decoration-line: line-through;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.75s var(--ease-smooth) 0.2s;
}
.cwtile.is-in .cwtile__text .ln { text-decoration-color: #8B7355; }

.cw__para {
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: #b8ad9e;
  max-width: 42rem;
  margin: clamp(2.25rem, 4.5vh, 3.25rem) auto 0;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .cwtile__text .ln { text-decoration-color: #8B7355; transition: none; }
}
@media (max-width: 640px) {
  .cw__tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   WORAN WIR UNS MESSEN LASSEN — vier Prinzipien
   Editoriale, große Typografie. Vier Statements, keine Liste.
   ============================================================ */
.creed {
  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, #0d0905 0%, #090603 70%, #080502 100%);
  padding: clamp(3.25rem, 6.5vh, 5.5rem) 0 clamp(4rem, 8.5vh, 7.5rem);
  overflow: hidden;
}
.creed__inner {
  width: var(--container);
  max-width: 68rem;
  margin: 0 auto;
}
.creed__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--wws-gold);
  margin: 0 0 clamp(2.4rem, 5vh, 3.6rem);
}
.creed__marker {
  display: block;
  width: clamp(2rem, 4vw, 3.25rem);
  height: 1px;
  flex: none;
  background: linear-gradient(to right, rgba(205,160,74,0), var(--wws-gold));
}

/* ============================================================
   Bento — asymmetrisches Raster, bewusst ungleich groß.
   5 Spalten: Reihe 1/2 → 01 (1–3) + 02 (4–5),
   Reihe 3 → 03 (1–2) + 04 (3–5).
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.bento__tile--1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.bento__tile--2 { grid-column: 4 / 6; grid-row: 1 / 3; }
.bento__tile--3 { grid-column: 1 / 3; grid-row: 3; }
.bento__tile--4 { grid-column: 3 / 6; grid-row: 3; }

.bento__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(205, 160, 74, 0.22);
  border-radius: 18px;
  background: rgba(255, 252, 245, 0.018);
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  overflow: hidden;
  transition: transform 0.5s var(--ease-expo), border-color 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo);
}
.bento__tile--1 { padding: clamp(1.9rem, 3vw, 3rem); }

/* Akzentkachel — Goldschimmer + kräftigerer Rahmen */
.bento__tile--accent {
  border-color: rgba(205, 160, 74, 0.42);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(205, 160, 74, 0.1) 0%, rgba(205, 160, 74, 0.02) 42%, transparent 70%),
    rgba(255, 252, 245, 0.022);
}

/* Hover — leicht anheben, Rahmen heller */
@media (hover: hover) {
  .bento__tile:hover {
    transform: translateY(-5px);
    border-color: rgba(205, 160, 74, 0.55);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.7);
  }
}

/* Nummer — groß, stark gedämpft in Gold, Gestaltungselement */
.bento__num {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: rgba(205, 160, 74, 0.16);
  font-variant-numeric: tabular-nums;
  margin-bottom: clamp(1.1rem, 2vh, 1.7rem);
}
.bento__tile--1 .bento__num { font-size: clamp(3.5rem, 7vw, 6.5rem); }
.bento__tile--2 .bento__num,
.bento__tile--3 .bento__num,
.bento__tile--4 .bento__num { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.bento__tile--accent .bento__num { color: rgba(205, 160, 74, 0.26); }

.bento__body { min-width: 0; margin-top: auto; }

/* Titel — Gegenüberstellung gewählt vs. abgelehnt */
.bento__title {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em;
}
.bento__title--center {
  margin: 0;
  justify-content: center;
  text-align: center;
}
.bento__chosen {
  letter-spacing: -0.022em;
  color: var(--wws-linen);
}
.bento__conj {
  font-style: italic;
  color: var(--wws-dust);
  letter-spacing: 0;
}
.bento__rejected {
  color: rgba(245, 240, 232, 0.32);
  letter-spacing: -0.01em;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(245, 240, 232, 0.42);
}
.bento__dot { color: var(--wws-linen); }

/* Typo-Skala pro Kachel */
.bento__tile--1 .bento__chosen,
.bento__tile--1 .bento__dot { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.bento__tile--1 .bento__conj { font-size: clamp(1rem, 1.6vw, 1.4rem); }
.bento__tile--1 .bento__rejected { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }

.bento__tile--2 .bento__chosen,
.bento__tile--2 .bento__dot,
.bento__tile--4 .bento__chosen,
.bento__tile--4 .bento__dot { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.bento__tile--2 .bento__conj,
.bento__tile--4 .bento__conj { font-size: clamp(0.95rem, 1.3vw, 1.15rem); }
.bento__tile--2 .bento__rejected,
.bento__tile--4 .bento__rejected { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }

/* Kachel 3 — reines Statement, mittig, kein Erklärtext */
.bento__tile--statement { justify-content: space-between; }
.bento__tile--3 .bento__chosen,
.bento__tile--3 .bento__dot { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.bento__tile--3 .bento__conj { font-size: clamp(0.9rem, 1.2vw, 1.1rem); }
.bento__tile--3 .bento__rejected { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }

/* Konsequenz — Fließtext */
.bento__conseq {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.74);
  text-wrap: pretty;
}
.bento__tile--1 .bento__conseq { max-width: 42ch; }

@media (prefers-reduced-motion: reduce) {
  .bento__tile { transition: none; }
}

@media (max-width: 760px) {
  .creed { padding: 2.75rem 0 3.5rem; }
  /* sauber gestapelt */
  .bento { grid-template-columns: 1fr; }
  .bento__tile--1,
  .bento__tile--2,
  .bento__tile--3,
  .bento__tile--4 { grid-column: 1; grid-row: auto; }
  .bento__tile { padding: 1.6rem; }
  .bento__tile--statement { padding: 2rem 1.6rem; }
  .bento__title--center { justify-content: flex-start; text-align: left; }
  .bento__tile--1 .bento__chosen,
  .bento__tile--1 .bento__dot { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* ============================================================
   EINSTIEG — Hype-Lärm räumt sich auf (Chaos → Klarheit)
   ============================================================ */
.hype {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(125% 120% at 50% 42%,
              #1a130b 0%, #0c0906 56%, #070504 100%);
}

/* Chartlinie — Teil des Lärms, halbtransparent, nicht gefeiert */
.hype__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.3;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Hype-Textfetzen */
.hype__fragments {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hype__frag {
  position: absolute;
  transform-origin: center;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* Ruhige These, zur Mitte scharf hervortretend */
.hype__thesis {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  opacity: 0;            /* GSAP steuert Sichtbarkeit */
}
.hype__statement {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.06;
  color: var(--wws-linen);
  font-size: clamp(2rem, 5.8vw, 5.4rem);
  text-wrap: balance;
}
.hype__statement .wws-line { display: block; }

/* Bildrauschen über allem */
.hype__noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
}

/* Scroll-Hinweis */
.hype__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(245, 240, 232, 0.42);
}
.hype__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(205,160,74,0.7), rgba(205,160,74,0));
  transform-origin: top;
  animation: hypeScroll 2.4s var(--ease-expo) infinite;
}
@keyframes hypeScroll {
  0%   { transform: scaleY(0);   opacity: 0; }
  35%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; transform-origin: bottom; }
}

/* Reduced motion: kein Chaos, direkt Klarheit */
.hype.is-static .hype__fragments,
.hype.is-static .hype__chart,
.hype.is-static .hype__scroll { display: none; }
.hype.is-static .hype__thesis { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hype__scroll-line { animation: none; opacity: 0.6; }
}

@media (max-width: 640px) {
  .hype__statement { font-size: clamp(1.8rem, 9vw, 2.8rem); }
}

/* ============================================================
   UNSERE ROTEN LINIEN — das, was wir bewusst nicht tun.
   Höhepunkt der Seite: animierter Durchstreich-Effekt beim
   Scrollen. Knappes Padding, kompakter Anschluss an die
   Prinzipien. Dunkel-warm, Begriffe groß in Playfair.
   ============================================================ */
.redlines {
  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, #0b0704 0%, #080502 64%, #070402 100%);
  padding: clamp(2.5rem, 5vh, 4rem) 0 clamp(4rem, 8.5vh, 7.5rem);
  overflow: hidden;
}
.redlines__inner {
  width: var(--container);
  max-width: 56rem;
  margin: 0 auto;
}

.redlines__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--wws-gold);
  margin: 0 0 2.2rem;
}
.redlines__marker {
  display: block;
  width: clamp(2rem, 4vw, 3.25rem);
  height: 1px;
  flex: none;
  background: linear-gradient(to right, rgba(205,160,74,0), var(--wws-gold));
}

/* Intro — ruhig, Instrument Sans, gedämpftes Creme */
.redlines__intro {
  font-family: var(--sans);
  font-size: clamp(1.04rem, 1.35vw, 1.2rem);
  line-height: 1.78;
  color: rgba(245, 240, 232, 0.78);
  max-width: 56ch;
  margin: 0 0 clamp(3rem, 6.5vh, 5rem);
  text-wrap: pretty;
}

/* Liste der roten Linien */
.redlines__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5.5vh, 4.25rem);
}

.redline__body { min-width: 0; }

/* Begriff — groß in Playfair, mit zwei deckungsgleichen Schichten:
   Basis (hell) und durchgestrichene Schicht (gedämpft), die per
   clip-path von links nach rechts aufgezogen wird. Folgt jeder
   Textzeile sauber, auch beim Umbruch auf Mobile. */
.redline__term {
  position: relative;
  display: inline-block;
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
}
.redline__word {
  display: block;
  color: var(--wws-linen);
}
/* gedämpfte, durchgestrichene Schicht — anfangs links abgeschnitten */
.redline__word--struck {
  position: absolute;
  inset: 0;
  color: rgba(245, 240, 232, 0.5);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(216, 201, 166, 0.92);
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.redline.is-struck .redline__word--struck {
  transition: -webkit-clip-path 0.55s var(--ease-smooth), clip-path 0.55s var(--ease-smooth);
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

/* Konsequenz — Fließtext, Instrument Sans */
.redline__conseq {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.74;
  color: rgba(245, 240, 232, 0.72);
  max-width: 50ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  /* sofort durchgestrichen, ohne Animation */
  .redline__word--struck {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  .redline.is-struck .redline__word--struck { transition: none; }
}

@media (max-width: 640px) {
  .redlines { padding: 2.5rem 0 3.5rem; }
  .redline__term { font-size: clamp(1.9rem, 8.6vw, 2.7rem); }
  .redline__conseq { font-size: 1rem; }
}

/* ============================================================
   SCROLL-GEKOPPELTER HELL-DUNKEL-WECHSEL
   Zwei feste Hintergrundebenen hinter dem Inhalt. Die untere
   bleibt warm dunkel, die obere (Creme) blendet beim Scrollen
   rund um den Beginn der roten Linien weich ein. Ab dort
   scheint die helle Ebene durch (redlines transparent).
   ============================================================ */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -1;            /* hinter dem Inhalt, über dem Body-Canvas */
  pointer-events: none;
}
.bg-stage__dark,
.bg-stage__cream { position: absolute; inset: 0; }
.bg-stage__dark {
  background: radial-gradient(120% 95% at 50% 8%, #1a130b 0%, #0c0906 56%, #080604 100%);
}
.bg-stage__cream {
  opacity: 0;
  background: radial-gradient(120% 100% at 50% 26%, #FBF9F4 0%, #F5F0E8 58%, #EDE4D5 100%);
  will-change: opacity;
}

/* Rote Linien transparent — die helle Ebene scheint durch */
.redlines { background: transparent; }

/* Textfarben im hellen Bereich — Lesbarkeit auf Creme */
.redlines .redlines__eyebrow { color: #B07D2A; }
.redlines .redlines__marker {
  background: linear-gradient(to right, rgba(176,125,42,0), #B07D2A);
}
.redlines .redlines__intro { color: #3a3127; }
.redlines .redline__word { color: #100D07; }
.redlines .redline__word--struck {
  color: rgba(58, 49, 39, 0.5);
  text-decoration-color: rgba(176, 125, 42, 0.9);
}
.redlines .redline__conseq { color: #3a3127; }

/* K-L-Spur im hellen Bereich: dunkleres Gold, cremefarbener Kreis */
body.is-light .scroll-rail__base { background: #B07D2A; opacity: 0.28; }
body.is-light .scroll-rail__fill { background: #B07D2A; }
body.is-light .scroll-rail__mono {
  background: #F5F0E8;
  border-color: #B07D2A;
  color: #100D07;
}
body.is-light .scroll-topbar { background: #B07D2A; }

/* ============================================================
   BELEGE / PROOF — "Worauf unsere Arbeit fußt"
   Ruhige Trust-Sektion im hellen Bereich (Creme scheint durch).
   ============================================================ */
.proof {
  position: relative;
  background: transparent;
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.proof__inner {
  width: var(--container);
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}
.proof__eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B07D2A;
  margin-bottom: clamp(2.8rem, 5.5vw, 4.4rem);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.proof__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem clamp(1.25rem, 3vw, 2.75rem);
}
.proof__item + .proof__item {
  border-left: 1px solid rgba(176, 125, 42, 0.22);
}
.proof__logo {
  height: 42px;
  width: auto;
  margin-bottom: 1rem;
}
.proof__stars {
  display: flex;
  gap: 0.3rem;
  color: #B07D2A;
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.proof__strong {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  font-weight: 500;
  color: #100D07;
  line-height: 1.22;
  max-width: 18ch;
}
.proof__fine {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: #3a3127;
  line-height: 1.5;
  max-width: 26ch;
}
.proof__cta {
  display: inline-block;
  margin-top: clamp(3rem, 5.5vw, 4.6rem);
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: #B07D2A;
  border-bottom: 1px solid rgba(176, 125, 42, 0.4);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.proof__cta:hover { color: #8a5f1d; border-color: rgba(176, 125, 42, 0.85); }

@media (max-width: 760px) {
  .proof__grid { grid-template-columns: 1fr; }
  .proof__item { padding: clamp(1.9rem, 6vw, 2.6rem) 0; }
  .proof__item + .proof__item {
    border-left: none;
    border-top: 1px solid rgba(176, 125, 42, 0.22);
  }
  .proof__strong, .proof__fine { max-width: 30ch; }
}

/* ============================================================
   DIE MENSCHEN DAHINTER — Team, heller Bereich
   ============================================================ */
.people {
  position: relative;
  background: transparent;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(2rem, 4vw, 4rem);
}
.people__inner {
  width: var(--container);
  max-width: 72rem;
  margin: 0 auto;
}
.people__eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B07D2A;
  margin-bottom: 1.1rem;
}
.people__headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: #100D07;
  line-height: 1.08;
  margin-bottom: clamp(2.8rem, 5.5vw, 4.4rem);
}
.people__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.person { display: flex; flex-direction: column; }
.person__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: #ece4d6;
  margin-bottom: 1.4rem;
}
.person__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.person__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #efe7d9, #e6dcc9);
}
.person__ph-letter {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  color: rgba(176, 125, 42, 0.55);
}
.person__ph-note {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(58, 49, 39, 0.55);
  margin-top: 0.95rem;
}
.person__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: #100D07;
  line-height: 1.2;
}
.person__role {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B07D2A;
  margin-top: 0.5rem;
}
.person__text {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.62;
  color: #3a3127;
  margin-top: 1rem;
}
.person__li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: #B07D2A;
  transition: color 0.25s;
}
.person__li svg { width: 16px; height: 16px; fill: currentColor; }
.person__li:hover { color: #8a5f1d; }

@media (max-width: 760px) {
  .people__grid { grid-template-columns: 1fr; gap: clamp(2.6rem, 9vw, 3.4rem); }
  .person__photo { max-width: 24rem; }
}

/* ============================================================
   ÜBERGANG — Bild im Wechsel dunkel → creme, ruhiger Fixed-BG
   ============================================================ */
.bridge {
  position: relative;
  width: 100%;
  height: clamp(60vh, 72vh, 80vh);
  overflow: hidden;
  z-index: 2;
}
.bridge__img {
  position: absolute;
  inset: 0;
  background-image: url("../assets/uebergang-glas.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.bridge__fade-top {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 42%;
  background: linear-gradient(to bottom, #0a0703 0%, rgba(10,7,3,0.78) 24%, rgba(10,7,3,0.35) 60%, rgba(10,7,3,0) 100%);
  pointer-events: none;
}
.bridge__fade-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48%;
  background: linear-gradient(to top, #F5F0E8 0%, rgba(245,240,232,0.82) 26%, rgba(245,240,232,0.32) 62%, rgba(245,240,232,0) 100%);
  pointer-events: none;
}

/* Mobil: kein fester Hintergrund (ruckelfrei), Bild im Fluss */
@media (max-width: 900px) {
  .bridge { height: 60vh; }
  .bridge__img { background-attachment: scroll; }
}

/* Reduzierte Bewegung: statisch, kein Fixed-Effekt */
@media (prefers-reduced-motion: reduce) {
  .bridge__img { background-attachment: scroll; }
}