/* ===========================================================================
   baubiologie.css - Unterseite /baubiologie/
   Nutzt ausschliesslich die Tokens aus home.css/fonts.css (--warm, --cream,
   --ink, --type-*). Praefix bb- fuer alle Komponenten dieser Seite.
   KRITIK-3 K1: keine eigenen H1/H2-Clamps mehr, die Typo kommt aus fonts.css.
   =========================================================================== */

/* ---- K5: ein Fill pro Fold. Der Hero traegt den Primaer-Button, der
   Header-CTA laeuft auf dieser Route als Textlink. Das Route-Label kommt aus
   SiteNavLive.astro.
   U9: nur solange die Nav ungescrollt auf dem Cream-Hero steht. Sobald sie
   scrollt, gilt wieder der gefuellte Standard aus home.css. ---- */
body[data-hero="cream"] nav:not([data-scrolled="true"]) .navlinks .nav-cta {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
}
body[data-hero="cream"] nav:not([data-scrolled="true"]) .navlinks .nav-cta:hover,
body[data-hero="cream"] nav:not([data-scrolled="true"]) .navlinks .nav-cta:focus-visible {
  color: var(--clay-contrast);
  background: transparent;
  border-color: transparent;
}

/* ---- Hero (K3): Schablone .hero-split aus home.css. Hoehe = Bild, Foto 55 %,
   Text vertikal zentriert, keine Cream-Wueste ueber der H1, keine Bildzeile. ---- */
.bb-hero {
  background: var(--cream);
  color: var(--ink);
  padding: 0;
}
/* Runde 2: Foto trug nur 48,3 % der Fensterbreite und ueber der H1 lag ein
   leeres Cream-Band. Jetzt: Medienspalte 56vw bis an die rechte Fensterkante
   (>= 55 % der Breite), Textspalte oben buendig mit der Bildkante. Seit U4
   steht hier pratteln-messen im Querformat 3:2; die feste Hoehe schneidet es
   auf den Rahmen, der Ausschnitt haelt Manuel und die Laibung im Bild. */
.bb-hero .hero-split {
  /* minmax statt fester 56vw: bei sehr breiten Fenstern deckelt der Container
     die Medienspalte, die Textspalte behaelt mindestens 300px. */
  grid-template-columns: minmax(300px, 1fr) minmax(0, 56vw);
  gap: 48px;
  padding-top: calc(var(--nav-h, 88px) + 40px);
  padding-right: 0;
  padding-bottom: var(--section-pad-y);
  /* Bau 6: Text vertikal zentriert zum Bild (Basis .hero-split), kein align-items:start. */
}
.bb-hero .hero-split-media {
  /* Seit U4 ein Querformat: Ausschnitt haelt Manuel und die Laibung im Rahmen. */
  --hero-split-pos: 58% 45%;
  aspect-ratio: auto;
  height: min(64vh, 560px);
  border-radius: 2px 0 0 2px;
}
/* U11 B1b: 19ch allein reicht nicht, die Textspalte traegt bei 1024 nur
   347 px. Die Medienspalte gibt im Tablet-Band 6 vw ab.
   Messreihe: task-11-report.md, B1b. */
.bb-hero h1 { max-width: 19ch; text-wrap: pretty; }
@media (min-width: 901px) and (max-width: 1200px) {
  .bb-hero .hero-split {
    grid-template-columns: minmax(380px, 1fr) minmax(0, 50vw);
  }
}
.bb-hero .hero-lead { font-size: var(--type-body-1); line-height: 1.6; text-wrap: pretty; }

@media (max-width: 900px) {
  /* Runde 2: die 56vw-Spalte oben ist spezifischer als die home.css-Regel im
     selben Breakpoint, deshalb hier ausdruecklich zurueck auf eine Spalte. */
  .bb-hero .hero-split {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: var(--hero-pad-top) var(--page-pad-mobile) var(--section-pad-y-mobile);
    align-items: stretch;
  }
  /* K8: Foto kuerzer als die home.css-Vorgabe, damit H1 und CTA im ersten
     Screen bleiben. */
  .bb-hero .hero-split-media { height: min(42vh, 320px); border-radius: 2px; }
}
@media (max-width: 640px) {
  .bb-hero .hero-split { padding-inline: 0; }
  .bb-hero .hero-split-media { border-radius: 0; }
  .bb-hero .hero-split-text { padding-inline: var(--page-pad-mobile); }
  .bb-hero .hero-actions .btn-premium { width: 100%; justify-content: space-between; }
}

/* ---- Gemeinsamer Container und Sektionskopf ---- */
.bb-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.bb-head {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 64px;
  align-items: end;
}
.bb-head > * { grid-column: 1; }
.bb-head p { grid-column: 2; grid-row: 2; }
.bb-head .sec-mark {
  color: var(--muted);
  margin-bottom: 14px;
}
.bb-head h2 {
  max-width: 20ch;
  margin: 0;
}
/* U11 B2: `align-items: end` klebte den Lead an die Unterkante der H2 und
   riss darueber ein Loch. Der Lead beginnt jetzt oben in seiner Zeile.
   Warum nicht `grid-row: 1` wie im Brief: task-11-report.md, B2. */
.bb-head p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--type-body-1);
  line-height: 1.6;
  color: var(--ink-soft);
  align-self: start;
}

/* ---- S2 Was wir messen (K4): Kacheln ohne Foto, Nummer und Typo tragen ---- */
.bb-messen {
  background: var(--cream);
  padding: var(--section-pad-y) var(--page-pad);
}
/* U10 Schritt 6: der obere Vierer war ein Nummernraster und teilte die
   Kartenregel mit der Startseite. Nummern gehoeren jetzt nur noch auf echte
   Ablaeufe (weiter unten, .bb-ablauf-rail). Was wir messen ist keine Abfolge,
   sondern eine Aufzaehlung: Hairline-Liste, Begriff links, Erklaerung rechts. */
.bb-mess-liste {
  margin: 0;
  border-top: 1px solid var(--line);
}
.bb-mess-zeile {
  display: grid;
  grid-template-columns: 22ch minmax(0, 1fr);
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.bb-mess-zeile dt {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bb-mess-zeile dd {
  margin: 0;
  max-width: 68ch;
  font-size: var(--type-body-2);
  line-height: 1.6;
  color: var(--ink-soft);
}
.bb-mess-more {
  /* Kritik 16.09.: halbe Stufe, damit unter der Liste kein Leerraum steht. */
  margin-top: 20px;
  color: var(--ink);
}

/* ---- S3 Fuenf Themen (K6): kompakte Linkliste statt zweitem Card-Raster ---- */
.bb-themen {
  background: var(--warm);
  border-top: 1px solid var(--line);
  padding: var(--section-pad-y) var(--page-pad);
}
.bb-themen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.bb-thema { border-bottom: 1px solid var(--line); }
/* U11 B3a: 0.36fr war zu breit, und `baseline` setzte den Titel optisch
   tiefer als den Text daneben. */
.bb-thema-link {
  display: grid;
  grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr) 32px;
  gap: 32px;
  align-items: start;
  padding: 26px 4px;
  text-decoration: none;
  color: inherit;
  transition: color 150ms ease, background-color 150ms ease;
}
.bb-thema-link:hover,
.bb-thema-link:focus-visible {
  color: var(--clay);
  background: rgba(var(--cream-rgb), 0.55);
}
.bb-thema-link:focus-visible {
  outline: 1px solid rgba(var(--clay-rgb), 0.55);
  outline-offset: 2px;
}
.bb-thema-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.bb-thema-text {
  font-size: var(--type-body-2);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}
.bb-thema-arrow {
  justify-self: end;
  color: var(--clay);
  transition: transform 150ms ease;
}
.bb-thema-arrow svg { display: block; }
.bb-thema-link:hover .bb-thema-arrow { transform: translateX(4px); }

/* ---- S4 Fallbeispiel, erbt .big-num.case-layout aus home.css ---- */
/* U11 B4d: `start` liess unter dem kurzen Mitteltext eine leere
   Ink-Flaeche stehen. */
.bb-case.big-num.case-layout {
  min-height: 0;
  padding: var(--section-pad-y) var(--page-pad);
  align-items: center;
}
/* Seit U4 steht hier das CO2-Messgeraet im Querformat 4:3. Der Rahmen folgt
   dem Bild, sonst schneidet der 4:5-Ausschnitt die Anzeige an und aus 403
   wird optisch 40. */
.bb-case.big-num.case-layout .bn-photo {
  aspect-ratio: 4 / 3;
}
/* Bildzeile auf Ink: dieselbe Mono-Stufe, heller Grund (Schlussreview I3, 3.33:1 -> AA). */
.bb-case .bn-photo .spec { color: rgba(var(--cream-rgb), 0.55); }
.bb-case .bn-photo img {
  object-position: center;
}
.bb-case .bn-right {
  padding: 36px;
  background: rgba(var(--cream-rgb), 0.06);
  border: 1px solid rgba(var(--cream-rgb), 0.14);
  border-radius: 2px;
  align-self: center;
}
/* Feste Wertspalte, damit beide Balken auf derselben Flucht enden.
   U11 B4a: die Werte tragen kein «Vorher»/«Nachher» mehr, 96 px reichen. */
.bb-case .bn-bar-row {
  grid-template-columns: 68px minmax(80px, 1fr) 96px;
}
.bb-case .bn-bar-value {
  font-size: var(--type-label);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* U11 B4b: 16 px Mindestbreite logen auf 390 ueber das Verhaeltnis. */
.bb-case .bn-bar-fill {
  min-width: 6px;
}
.bb-case-h2 {
  color: var(--cream);
  margin: 0;
  max-width: 16ch;
}
.bb-case-h2 em {
  font-style: italic;
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.62);
}
.bb-case-text {
  margin-top: 20px;
  max-width: 460px;
  font-size: var(--type-body-2);
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.78);
}
/* U11 B4c: 11 px bei 0.5 Deckung war der schwaechste Text der Seite. */
.bb-case-quelle {
  margin-top: 20px;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: var(--type-label);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(var(--cream-rgb), 0.68);
}

/* ---- S5 Ablauf ---- */
.bb-ablauf {
  background: var(--cream);
  padding: var(--section-pad-y) var(--page-pad);
}
.bb-ablauf-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.bb-step {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.bb-step-nr {
  display: block;
  font-family: "Geist Mono", monospace;
  font-size: var(--type-label);
  letter-spacing: 0.18em;
  color: var(--clay);
  margin-bottom: 14px;
}
.bb-step h3 { margin: 0 0 10px; }
.bb-step p {
  margin: 0;
  font-size: var(--type-body-2);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- S6 Kontakt-Abschluss ---- */
.bb-cta {
  display: block;
  text-align: left;
  padding: var(--section-pad-y) var(--page-pad);
  position: relative;
  overflow: hidden;
}
.bb-cta-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.bb-cta-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  max-width: 640px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
/* Marker auf Ink: Cream-Stufe statt --muted, sonst faellt der Kontrast unter 4.5:1. */
.bb-cta .sec-mark,
.bb-case .bn-left .sec-mark {
  color: rgba(var(--cream-rgb), 0.5);
}
.bb-cta .sec-mark {
  margin-bottom: 16px;
}
.bb-cta h2 {
  margin: 0 0 22px;
  max-width: 18ch;
}
.bb-cta h2 em {
  color: var(--clay-light);
}
.bb-cta p {
  max-width: 560px;
  margin: 0 0 34px;
  font-size: var(--type-body-1);
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.8);
}
/* U11 B6c: die Mailzeile las sich als Bildzeile, ist aber der zweite Weg
   zum Kontakt. Fliesstext statt Label. */
.bb-cta-mail {
  margin-top: 18px;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: var(--type-body-2);
  letter-spacing: 0.02em;
  padding-block: 8px;
  color: rgba(var(--cream-rgb), 0.66);
}
.bb-cta-mail a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--clay-light-rgb), 0.5);
  padding-bottom: 1px;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.bb-cta-mail a:hover {
  color: var(--clay-light);
  border-bottom-color: var(--clay-light);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .bb-ablauf-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  /* Unter 1100px reicht die 22ch-Spalte fuer den laengsten Begriff nicht mehr
     neben dem Text; Begriff und Erklaerung stehen untereinander. */
  .bb-mess-zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 22px 0;
  }
  .bb-thema-link {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 8px 20px;
    align-items: start;
  }
  .bb-thema-text { grid-column: 1; }
  .bb-thema-arrow { grid-row: 1; grid-column: 2; }
}
/* Unter 1200 wird das Case-Foto in drei Spalten zum Streifen. Foto und Text
   teilen die Zeile, die Werte stehen darunter. */
@media (max-width: 1200px) {
  .bb-case.big-num.case-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
  .bb-case .bn-right {
    grid-column: 1 / -1;
    align-self: start;
  }
  .bb-case .bn-photo {
    align-self: start;
    max-height: 520px;
  }
}
@media (max-width: 900px) {
  .bb-messen,
  .bb-themen,
  .bb-ablauf,
  .bb-case.big-num.case-layout {
    padding: var(--section-pad-y-mobile) var(--page-pad-mobile);
  }
  .bb-case.big-num.case-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .bb-head {
    margin-bottom: 36px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bb-head p { grid-column: 1; grid-row: auto; }
  .bb-cta {
    padding: var(--section-pad-y-mobile) var(--page-pad-mobile);
  }
  /* U11 B6b: unter 900 px lag das Foto hinter dem Text statt neben ihm. */
  .bb-cta-media {
    display: none;
  }
}
@media (max-width: 640px) {
  .bb-ablauf-rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .bb-thema-link { padding: 22px 0; }
  /* U11 B3b: 68ch aus der Desktopzeile passt nicht zur 298-px-Spalte. */
  .bb-thema-text { max-width: 44ch; }
  .bb-case .bn-bar-row {
    grid-template-columns: 58px minmax(56px, 1fr) 96px;
  }
  /* U11 B4e: 0.15em Laufweite riss das Label auf 390 in zwei Zeilen. */
  .bb-case .bn-chart-label { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-thema-link,
  .bb-thema-arrow,
  .bb-cta-mail a {
    transition: none;
  }
}

/* U9 R12: Tap-Ziel 44 px fuer Inline-Links im Fliesstext. padding-block
   vergroessert die Klickflaeche, margin-block nimmt denselben Betrag wieder aus
   der Zeilenbox: die Zeile rueckt keinen Pixel, der Daumen trifft trotzdem. */
@media (max-width: 640px) {
  .bb-cta-mail a {
    display: inline-block;
    padding-block: 14px;
    margin-block: -14px;
    min-height: 44px;
    /* Unterlaenge am Text statt am gepolsterten Kasten. */
    border-bottom: 0;
    padding-bottom: 14px;
    text-decoration: underline;
    text-decoration-color: rgba(var(--clay-light-rgb), 0.5);
    text-underline-offset: 0.2em;
  }
  .bb-cta-mail a:hover { text-decoration-color: var(--clay-light); }
}