/* ============================================================
   Version B - "Haus"
   ------------------------------------------------------------
   These: Das Gebaeude ist die Marke. Man betritt die Kanzlei,
   statt ueber sie zu lesen.

   Gestaltungsmerkmal, das die Version traegt: gross UND leicht.
   Die gaengige Lehre zum Archetyp "Exaggerated Minimalism" fordert
   fuer grosse Typografie Weight 900. Das ist hier falsch. Der
   Auftraggeber will "leicht, elegant, nicht zu schwer und fett
   aufgetragen", und beide gelobten Referenzseiten arbeiten
   gemessen mit Weight 100 bis 300. Also Weight 200 bis 300,
   versal, weite Laufweite - genau die Sprache der neuen Wortmarke.

   Greift ausschliesslich ueber [data-version="b"] am <html>-Element.
   Kein eigenes Markup, keine eigenen Bausteine.
   ============================================================ */

:root[data-version="b"] {
  /* ---------- Typo-Haltung: gross, leicht, versal ---------- */
  --wp--custom--case--display: uppercase;
  --wp--custom--tracking--display: 0.13em;
  --wp--custom--tracking--label: 0.2em;
  --wp--custom--weight--display: 250;
  --wp--custom--weight--heading: 300;

  --wp--preset--font-size--display: clamp(2.25rem, 1.3rem + 3.6vw, 3.5rem);
  --wp--preset--font-size--xxl: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
  --wp--preset--font-size--xl: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
  --wp--preset--font-size--lg: 1.1875rem;

  /* ---------- Flaeche: grosszuegiger Weissraum ---------- */
  --wp--custom--section--surface: var(--wp--preset--color--base);
  --wp--custom--section--rhythm: var(--wp--preset--spacing--80);

  /* ---------- Hero: grossformatig, aber nicht bildschirmfuellend.
     Bick Laws Hero misst 546px. Das ist das Mass, nicht 100vh:
     "Es gibt Seiten, da scrollst du gefuehlt drei Minuten." ---------- */
  --wp--custom--hero--height: clamp(22rem, 62vh, 34rem);
  --wp--custom--hero--overlay: 0.30;

  /* ---------- Bewegung: gestaffeltes Reveal, dezenter Parallax ---------- */
  --wp--custom--motion--reveal: 18px;
  --wp--custom--motion--parallax: 1;

  /* ---------- Bild: traegt die Version, deutlicherer Farblook ---------- */
  --wp--custom--image--filter: saturate(0.66) contrast(1.06) brightness(1.01);
}

/* ------------------------------------------------------------
   Rhythmus: mehr Luft zwischen den Sektionen, keine Trennlinien.
   Trennung ueber Abstand statt ueber Rahmen (K7).
   ------------------------------------------------------------ */
[data-version="b"] .section {
  padding-block: var(--wp--preset--spacing--70);
}

[data-version="b"] .section--tight {
  padding-block: var(--wp--preset--spacing--60);
}

[data-version="b"] .section + .section {
  border-top: 0;
}

/* ------------------------------------------------------------
   Hero: Bild fuehrt, Text sitzt darauf.
   Der Bildcontainer ist bewusst eigenstaendig und traegt bereits
   die scrollgekoppelte Fortschrittsvariable --hero-progress.
   Damit kann die spaeter gewuenschte Treppenhaus-Kamerafahrt
   ohne Umbau andocken. Heute nur dezent genutzt.
   ------------------------------------------------------------ */
[data-version="b"] .hero {
  padding-block: 0 var(--wp--preset--spacing--70);
}

[data-version="b"] .hero__inner {
  display: block;
  position: relative;
}

/* Randlos ueber die volle Breite. Das Gebaeude ist die Marke,
   also darf das Bild nicht in einem Rahmen sitzen. */
[data-version="b"] .hero__media {
  margin-inline: calc(50% - 50vw);
  margin-bottom: var(--wp--preset--spacing--60);
}

[data-version="b"] .hero__figure {
  height: var(--wp--custom--hero--height);
}

[data-version="b"] .hero__figure img {
  transform: translate3d(0, calc(var(--hero-progress, 0) * 5%), 0) scale(1.08);
  transition: none;
}

[data-version="b"] .hero__claim {
  max-width: 46rem;
}

/* ------------------------------------------------------------
   Akzent grosszuegiger: schmales Band und durchlaufende Linien.
   Bleibt Akzent, wird nie Grundfarbe. "Ob das nicht zu fett ist."
   ------------------------------------------------------------ */
[data-version="b"] .accent-band {
  background: var(--wp--preset--color--accent-wash);
  border-top: var(--wp--custom--rule--accent);
  border-bottom: var(--wp--custom--rule--accent);
}

[data-version="b"] .eyebrow::after {
  width: 3.5rem;
}

/* ------------------------------------------------------------
   Rechtsgebiete: die Mut-Flaeche.
   Eigene Motivsprache statt Standardicons: dieselben SVGs wie in
   Version A, aber gross gesetzt, auf warmem Grund, mit der
   Zierlinien-Geste des Logos darueber.
   ------------------------------------------------------------ */
[data-version="b"] .rg-card {
  background: var(--wp--preset--color--surface-warm);
  padding: var(--wp--preset--spacing--40);
  border-top: 0;
  position: relative;
}

[data-version="b"] .rg-card::before {
  content: "";
  position: absolute;
  inset-inline: var(--wp--preset--spacing--40);
  top: 0;
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--accent);
  transform: scaleX(0.36);
  transform-origin: left;
  transition: transform var(--wp--custom--transition--slow);
}

[data-version="b"] .rg-card:hover::before,
[data-version="b"] .rg-card:focus-within::before {
  transform: scaleX(1);
}

[data-version="b"] .rg-card__icon {
  width: 3rem;
  height: 3rem;
  color: var(--wp--preset--color--accent-text);
  stroke-width: 0.9;
}

[data-version="b"] .rg-card__title {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Personen: Namen versal und leicht. Nie ueber dem Gesicht (K3).
   ------------------------------------------------------------ */
[data-version="b"] .person__name {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 300;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Dunkles Band: in B als abgesetzter Abschluss.
   ------------------------------------------------------------ */
[data-version="b"] .band-dark {
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--base);
  border-top: 0;
}

[data-version="b"] .band-dark .band-dark__meta,
[data-version="b"] .band-dark p {
  color: rgba(255, 255, 255, 0.82);
}

[data-version="b"] .band-dark a {
  color: var(--wp--preset--color--base);
}

[data-version="b"] .band-dark .eyebrow {
  color: var(--wp--preset--color--accent);
}

[data-version="b"] .band-dark .eyebrow::after {
  background: var(--wp--preset--color--accent);
}

/* Der Ladeknopf der Karte, Gegenstueck zur Regel in theme-a:
   auf dem dunklen Band fuellt er sich mit Papierweiss. */
[data-version="b"] .karte__laden:hover,
[data-version="b"] .karte__laden:focus-visible {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ink);
}

[data-version="b"] .band-dark .link-quiet::after {
  background: rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------------------
   Scroll-Reveal, gestaffelt. Nur transform und opacity.
   ------------------------------------------------------------ */
[data-version="b"] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--wp--custom--motion--reveal), 0);
  transition:
    opacity var(--wp--custom--transition--slow),
    transform var(--wp--custom--transition--slow);
  transition-delay: calc(var(--reveal-index, 0) * 45ms);
}

[data-version="b"] [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Titelbild-Streifen: in B grosszuegiger, das Bild fuehrt. */
[data-version="b"] .titelbild__figur { height: clamp(8rem, 22vh, 14rem); }