/* ===========================================================================
   start.css — Startseite /
   Nutzt ausschliesslich die Tokens aus fonts.css und home.css (--type-*, --warm,
   --cream, --ink, --clay …). Präfix st- für alle Startseiten-Komponenten.
   Bau 6 (KRITIK-3 K1/K2/K3/K4/K5/K6/K8/K9/K10/K12): keine eigenen h2-Grössen mehr,
   Home-Hero bis zur Viewport-Unterkante mit Verlauf nur unter der Typo-Zone,
   Mess-Proof sichtbar, Captions nach copy-bau6.md.
   =========================================================================== */

/* ---- Hero: Foto trägt den Viewport (K3). Kein Deckel auf 88vh, kein
   Cream-Streifen unter dem Bild. Der Verlauf liegt nur unter der linken
   Typo-Zone (S5), der Rest des Fotos bleibt unbehandelt. ---- */
.hero.st-home-hero {
  min-height: 100svh;
  max-height: none;
}
/* border-box, sonst addiert das Innenpadding 148px unter die Viewport-Kante. */
.hero.st-home-hero .hero-inner { box-sizing: border-box; min-height: 100svh; }
/* Kein Eintritts-Zoom: die Drohnen-Montage ist die einzige Bewegung im Hero
   (INVARIANTS, eine Bewegung pro Hero). */
.hero.st-home-hero .hero-bg img { filter: none; animation: none; transform: none; object-position: 50% 60%; }

/* ---- Hero-Video (Termin 02.10.2026): das scharfe Standbild traegt den LCP, das Video
   blendet erst nach canplaythrough ueber. Ohne is-playing (reduced-motion, ?static=1,
   Ladefehler) bleibt das Still. Video fuellt immer die volle Hero-Hoehe (cover). ---- */
.hero.st-home-hero .hero-bg picture { position: absolute; inset: 0; display: block; }
.hero.st-home-hero .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
  opacity: 0; transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero.st-home-hero .hero-video.is-playing { opacity: 1; }

/* Ladebalken: eine Haarlinie am unteren Hero-Rand, ein kurzes Segment gleitet ruhig
   hin und her, solange das Video laedt. Verschwindet mit is-done. Liegt ueber dem
   Verlauf (z-index 1 im hero-bg), aber unter der Typo (hero-inner). */
.hero.st-home-hero .hero-loader {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: rgba(var(--cream-rgb), 0.18); overflow: hidden;
  transition: opacity 0.6s ease;
}
.hero.st-home-hero .hero-loader span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: rgba(var(--cream-rgb), 0.85);
  animation: heroLoad 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
.hero.st-home-hero .hero-loader.is-done { opacity: 0; }
.hero.st-home-hero .hero-loader.is-done span { animation: none; }
@keyframes heroLoad { from { transform: translateX(0); } to { transform: translateX(354%); } }
@media (prefers-reduced-motion: reduce) {
  .hero.st-home-hero .hero-loader { display: none; }
}

/* home.css setzt body { overflow-x: hidden } — das erzeugt einen Scroll-Container
   und neutralisiert die sticky Nav. clip ist die sticky-sichere Variante (Kommentar
   in home.css); hier nur homepage-scoped zurueckgesetzt. */
body[data-nav="after-hero"] { overflow-x: clip; }

/* ---- Nav nach dem Hero (nur Homepage, body[data-nav=after-hero]): im Fluss,
   sticky am oberen Rand, immer das solide Scroll-Erscheinungsbild. ---- */
body[data-nav="after-hero"] nav,
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) {
  position: sticky; top: 0;
  background: var(--cream);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  box-shadow: none;
}
/* U9: der Schatten haengt am Scroll-Zustand, nicht an der Route. Ungescrollt
   sitzt die Nav flach auf dem Cream, erst beim Scrollen hebt sie ab. */
body[data-nav="after-hero"] nav[data-scrolled="true"] {
  box-shadow: 0 10px 28px rgba(var(--ink-rgb), 0.07);
}
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .logo { color: var(--ink); }
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .logo em { color: rgba(var(--ink-rgb), 0.6); }
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .navlinks a:not(.nav-cta) { color: var(--ink); }
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta {
  color: var(--cream); background: var(--ink); border-color: var(--ink);
}
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta:hover,
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta:focus-visible {
  color: var(--cream); background: var(--ink-soft); border-color: var(--ink-soft);
}
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .nav-mobile-chrome .nav-tel { color: var(--ink); }
body[data-nav="after-hero"]:has(.hero) nav:not([data-scrolled="true"]) .nav-burger span { background: var(--ink); }
/* Haus-Hero (16.09.): der Text sitzt unten links auf der Wiese. Zwei Schichten.
   Die vertikale traegt bis 88 %, weil die oberste H1-Zeile sonst auf blankem
   Himmel steht (gemessen 1.66:1 auf 1024). Die vertikale allein loest das
   nicht: um auf 3:1 zu kommen, muesste sie so dunkel werden, dass der
   Dunkelanteil ueber die 30-%-Grenze aus R1 steigt. Darum uebernimmt eine
   zweite Schicht ueber der linken Textspalte den Kontrast, und der mittlere
   Stopp der vertikalen bleibt hell. Gemessen danach: 6.52:1 / 4.02:1 / 3.86:1
   bei 1440 / 1024 / 375, Dunkelanteil 27 / 28 / 28 %. */
body[data-hero="photo"] .hero.st-home-hero .hero-bg::after {
  background:
    linear-gradient(to top,
      rgba(var(--ink-rgb), 0.78) 0%,
      rgba(var(--ink-rgb), 0.12) 50%,
      rgba(var(--ink-rgb), 0) 88%),
    linear-gradient(to right,
      rgba(var(--ink-rgb), 0.48) 0%,
      rgba(var(--ink-rgb), 0.24) 31%,
      rgba(var(--ink-rgb), 0) 52%);
}
/* Typo unten am Bild, nicht auf Hoehe des Hauses. Ohne Kicker bleibt nur ein
   Grid-Kind uebrig; es spannt ueber alle Zeilen, damit align-self greift. */
body[data-hero="photo"] .hero.st-home-hero .hero-main {
  grid-row: 1 / -1;
  align-self: end;
  padding-bottom: clamp(48px, 10vh, 112px);
  transform: none;
}
/* U11 S1: nicht die H1, die Hero-Spalte war zu schmal fuer zwei Zeilen.
   Bandende 1546, ab dort traegt die home.css-Spalte selbst 640 px.
   Messreihen: task-11-report.md, S1 und Fix-Runde 1 / Befund 4. */
@media (min-width: 901px) and (max-width: 1546px) {
  body[data-hero="photo"] .hero.st-home-hero .hero-main {
    max-width: min(58vw, 640px);
  }
}

/* ---- Gemeinsame Sektions-CTA-Zeile ---- */
.st-section-cta {
  max-width: 1400px;
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- Was wir bauen ----
   U11 S3: 16ch aus home.css:1026 riss «Sanierung» in eine eigene Zeile.
   Seitenscoped, .pillars-head-c laeuft auch auf /en/. ---- */
.pillars-c .pillars-head-c .ph-text h2 {
  max-width: 24ch;
  text-wrap: pretty;
}
/* U11 S4/S5: beide Briefpunkte gegenstandslos, siehe task-11-report.md. */

/* ---- Was wir bauen: Karten ohne Nummernzeile ---- */
.pillars-c .p-c .tag { margin-bottom: 28px; }
.pillars-c .p-c:not(:has(.tag)) {
  min-height: 0;
  justify-content: flex-start;
  padding: 34px 32px 36px;
}
/* Karte 1 Holzfassade: Ausschnitt oben, damit der Giebel im Bild bleibt.
   Karte 4 zeigt seit U4 die 3D-Planansicht; der Ausschnitt steht oben, sonst
   schneidet der 4:3-Rahmen die obere Blattkante mit Dach und Titel weg. */
.st-arbeit-card:nth-child(1) .st-arbeit-media img { object-position: center 30%; }
.st-arbeit-card:nth-child(4) .st-arbeit-media img { object-position: center top; }

/* ---- Kleine Baufirma: Porträt mit Kopf im Frame (K4) ---- */
.intro-person .ip-img-wrap img { object-position: center top; }
/* U11 S6b: Radius 2 px (INVARIANTS). Gehoert nach home.css:936, die in
   dieser Unit gesperrt ist, darum seitenscoped. */
.intro-person .ip-img-wrap { border-radius: 2px; }

/* U10 R13 Tonwechsel: die Haltung steht auf Warm. Vorher liefen Manifest,
   Leistungen und Haltung dreimal Cream hintereinander, und die
   Halbpadding-Regel aus home.css griff zweimal in Folge. Jetzt bricht der Ton
   nach den Leistungen, und die Sektion bekommt ihr volles Pad zurueck. Nur
   auf der Startseite gesetzt, .intro-person laeuft auch auf /en/. */
.intro-person[data-tone="warm"] { background: var(--warm); }

/* ---- Punkteliste ---- */
.st-point-list {
  list-style: none;
  margin: 28px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.st-point-list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--type-body-2);
  line-height: 1.55;
  color: var(--ink-soft);
}
/* U11 S6c: der 12-px-Strich las sich wie ein Gedankenstrich. */
.st-point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--clay);
}

/* ---- Muster-Mehrfamilienhaus ----
   U10 R13: zweite dunkle Insel. Bis U9 war Baubiologie die einzige dunkle
   Sektion vor dem Ink-Schluss; das eigene Projekt ist der zweite grosse
   Moment und traegt ihn jetzt mit. Die Hairline faellt weg, die Tonkante
   traegt die Naht. ---- */
.st-mfh {
  background: var(--ink);
  color: var(--cream);
}
/* U11 S7: nicht ein fehlendes ch-Mass, die Textspalte war zu schmal fuer
   das 23-Zeichen-Kompositum. Unter 1200 traegt zusaetzlich ein <wbr> im
   Markup die Trennstelle. Messreihen: task-11-report.md, S7. */
.st-mfh-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}
/* Auf Ink laufen Marker, Headline und Fliesstext in Cream, wie in der
   Baubiologie-Sektion darunter. */
.st-mfh .sec-mark { color: rgba(var(--cream-rgb), 0.5); }
/* text-wrap: pretty statt balance: balance verteilte die drei Woerter auf drei
   gleich kurze Zeilen. hyphens wurde geprueft und wirkt nicht, weil
   «Muster-Mehrfamilienhaus» am vorhandenen Bindestrich schon trennbar ist und
   der Browser ihn nicht nutzt, solange das Wort in die Zeile passt. */
.st-mfh-copy h2 { max-width: none; color: var(--cream); text-wrap: pretty; }
.st-mfh-copy h2 em { font-style: italic; color: var(--clay-light); font-weight: 300; }
.st-mfh-copy p {
  margin-top: 22px;
  max-width: 56ch;
  font-size: var(--type-body-1);
  line-height: 1.65;
  color: rgba(var(--cream-rgb), 0.82);
}
.st-mfh-cta { margin-top: 34px; }

/* ---- Muster-MFH-Bild: ruhiges Baustellenfoto, kein Video-Slot ---- */
.st-mfh-media { margin: 0; overflow: hidden; border-radius: 2px; }
.st-mfh-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Seit U4 steht hier ein Querformat im Verhaeltnis 4:3, es wird nicht beschnitten. */
  object-position: center;
}
/* Bildzeile auf Ink: dieselbe Mono-Stufe, nur heller Grund. */
.st-mfh-media .spec { color: rgba(var(--cream-rgb), 0.55); }

/* ---- Baubiologie kurz: zweite dunkle Insel, direkt nach dem Muster-MFH (S3).
   U10 R13: die Sektion ist eine von genau zwei asymmetrischen auf der Site
   (die zweite ist Sanierung auf /bauen-sanieren/). Schmale Textspalte, Bild
   ueber die Haelfte und bis an den Fensterrand. ---- */
.st-baubio {
  background: var(--ink);
  color: var(--cream);
  padding: var(--section-pad-y) var(--page-pad);
  overflow: hidden;
}
/* U10: seit dem Muster-MFH auf Ink stossen zwei dunkle Sektionen aneinander.
   .st-baubio haengt nicht an .section-pad, die K6-Regel in home.css greift
   hier also nicht von selbst. Gleiche Rechnung, eigene Zeile: der zweite
   Nachbar nimmt oben die halbe Stufe. */
.st-mfh[data-tone="ink"] + .st-baubio { padding-top: calc(var(--section-pad-y) / 2); }
.st-baubio-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.st-baubio .sec-mark { color: rgba(var(--cream-rgb), 0.5); }
/* Die schmale Spalte ist selbst die Begrenzung; ein zusaetzliches ch-Mass
   wuerde die Headline ein zweites Mal einschnueren. */
.st-baubio h2 { max-width: none; color: var(--cream); }
.st-baubio h2 em { font-style: italic; color: var(--clay-light); font-weight: 300; }
.st-baubio p {
  margin-top: 24px;
  max-width: none;
  font-size: var(--type-body-1);
  line-height: 1.68;
  color: rgba(var(--cream-rgb), 0.82);
}
/* K12: Mess-Proof 42 → 1,2 µW/m² als sichtbare Zahl, Satz darunter. */
.st-baubio-proof {
  margin-top: 28px;
  max-width: none;
  padding: 22px 24px 20px;
  border-left: 2px solid var(--clay);
  background: rgba(var(--cream-rgb), 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* U11 S8b: ein Messwert ist keine zweite Headline. Geist Mono wie jede
   andere Zahl der Site; H3-Stufe, auf H2 bricht «µW/m²» um. */
.st-baubio-proof-num {
  font-family: "Geist Mono", monospace;
  font-weight: 400;
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
/* U9: der Pfeil im Messwert ist ein 18-px-SVG, kein Text-Glyph. */
.st-baubio-proof-arrow { display: inline-block; color: var(--clay-light); vertical-align: middle; line-height: 0; }
.st-baubio-proof-arrow svg { display: block; }
.st-baubio-proof-text {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: var(--type-body-2);
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.78);
  max-width: 48ch;
  text-wrap: pretty;
}
/* U10 Asymmetrie: das Bild laeuft rechts bis an die Fensterkante, darum der
   negative Aussenabstand in Hoehe des Seitenrands und kein Radius auf der
   angeschnittenen Seite. */
.st-baubio-media {
  margin: 0 calc(var(--page-pad) * -1) 0 0;
  overflow: hidden;
  border-radius: 2px 0 0 2px;
}
.st-baubio-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.st-baubio-media:hover img { transform: scale(1.05); }
.st-baubio-media .spec { color: rgba(var(--cream-rgb), 0.55); }

/* ---- Kontakt-Abschluss ----
   U11 S9a: der negative Aussenabstand zog die Lead-Zeile in die
   H2-Unterlaenge. Die Seitenklasse `.st-cta` (nur index.astro) hebt die
   Spezifitaet ueber home.css:1166/1179, statt auf die Ladereihenfolge zu
   setzen. ---- */
.cta-c.st-cta h2 { margin-bottom: 28px; }
.cta-c.st-cta .st-cta-lead {
  max-width: 52ch;
  margin: 0 auto 40px;
  font-size: var(--type-body-1);
  line-height: 1.65;
  color: rgba(var(--cream-rgb), 0.72);
}
/* U11 S9d: 13 px auf Ink bei 0.55 Deckung war der schwaechste Text der Seite. */
.cta-c.st-cta .meta { color: rgba(var(--cream-rgb), 0.7); }
/* U11 S9b: der «·»-Trenner haengte auf 390 am Zeilenende. */
.cta-c.st-cta .st-cta-adr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}

/* ---- Kreislauf-Manifest (U5): eine Aussage, viel Luft, Display-Schrift ueber
   die Klasse .display aus home.css. Keine eigene font-family. ---- */
/* U10: die Sektion trug data-tone="cream", aber keinen eigenen Grund; gemessen
   stand sie auf dem Warm des body. Damit war die Halbpadding-Regel aus
   home.css an einer echten Farbkante aktiv. Jetzt stimmt der Grund mit dem
   Attribut ueberein, und die halbe Stufe zu den Leistungen ist richtig. */
/* R7: die Hero-Unterzeile traegt «im Kreislauf» und darf auf keiner Breite unter
   die Body-Stufe fallen (das Token faellt auf 17px bei 1024, 16px bei 390).
   Boden 18px, Token bleibt (Schlussreview I2). */
body[data-hero="photo"] .hero.st-home-hero .hero-sub { font-size: max(18px, var(--type-body-1)); }

.st-kreislauf { background: var(--cream); }
.st-kreislauf-inner {
  max-width: 880px;
  margin: 0 auto;
  /* K6: das Sektions-Pad traegt den Abstand; innen nur noch die halbe Luft,
     sonst stehen zwischen 01 und 02 rund 250 px Leere (Kritik 16.09.). */
  padding: clamp(40px, 7vh, 96px) 24px;
}
.st-kreislauf-inner .sec-mark { color: var(--muted); }
/* U10 R13 «ein grosser Moment pro Seite»: das Manifest ist die lauteste Zeile
   der Startseite nach dem Hero. Groesse aus dem vorhandenen Token
   --type-h1-display (fonts.css), keine neue Stufe.
   Abweichung vom Brief: dort steht zusaetzlich max-width 14ch. Das Mass gilt
   fuer eine kurze H2; hier traegt die Sektion den Manifest-Satz aus U5 mit 171
   Zeichen. Auf 14ch waeren das rund zwoelf Zeilen a 64 px, also eine Wand statt
   eines Moments. Das Mass bleibt darum am Container (.st-kreislauf-inner,
   880 px). */
.st-kreislauf-lead {
  margin-top: 28px;
  font-size: var(--type-h1-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.st-kreislauf-inner > p:last-child {
  margin-top: 28px;
  max-width: 60ch;
  line-height: 1.65;
  color: var(--muted);
}

/* ---- Presse-Anker (U5): Markup-Muster aus ueber-manuel-wernli.css, hier mit
   eigenem Praefix st-presse-. Nur Tokens aus home.css.
   U10 R13: Presse steht auf Warm. Zwischen der dunklen Baubiologie-Insel und
   dem Ink-Schluss war Cream die dritte helle Stufe in Folge; Warm setzt die
   Seite vor dem Schluss noch einmal ab. ---- */
.st-presse { background: var(--warm); }
.st-presse-inner { max-width: var(--content-max); margin: 0 auto; }
.st-presse-inner .sec-mark { color: var(--muted); }
.st-presse-inner h2 { margin-top: 20px; max-width: 20ch; color: var(--ink); }
.st-presse-source {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--muted);
}
.st-presse-inner > .st-presse-source { margin-top: 16px; }
.st-presse-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 28px;
  align-items: stretch;
  max-width: 920px;
  margin-top: 36px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.st-presse-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}
.st-presse-body > div > span {
  display: block;
  margin-bottom: 10px;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-presse-proof h3 {
  margin: 0 0 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}
.st-presse-proof p {
  margin: 0;
  font-size: var(--type-body-2);
  line-height: 1.55;
  color: var(--muted);
}
.st-presse-meta {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.st-presse-link {
  display: inline-block;
  margin-top: 12px;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.st-presse-image {
  display: block;
  color: inherit;
  align-self: center;
}
.st-presse-image img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

/* ===========================  RESPONSIVE  ================================= */

@media (max-width: 1100px) {
  .st-mfh-inner,
  .st-baubio-inner { grid-template-columns: 1fr; gap: 44px; }
  /* Einspaltig gibt es keine Spalte mehr, an der das Bild haengen koennte:
     der Anschnitt nach rechts faellt weg, sonst steht das Foto ueber der
     Seitenkante. */
  .st-baubio-media { margin-right: 0; border-radius: 2px; }
}

/* U11 S8d: einspaltig schob das 4:3-Foto die CTA-Zeile aus dem Blick.
   Nur im Tablet-Band flacher; auf dem Phone waere 21:9 ein Streifen. */
@media (min-width: 901px) and (max-width: 1100px) {
  .st-baubio-media img { aspect-ratio: 21 / 9; }
}

@media (max-width: 900px) {
  .st-mfh,
  .st-baubio { padding: var(--section-pad-y-mobile) var(--page-pad-mobile); }
  .st-kreislauf,
  .st-presse { padding: var(--section-pad-y-mobile) var(--page-pad-mobile); }
  .st-kreislauf-inner { padding: 0; }
  /* U10: auf der Display-Stufe stehen hier gemessen zehn Zeilen a 40 px, das
     ist eine Wand und kein Moment. Auf dem Phone traegt die H2-Stufe den
     Manifest-Satz, dieselbe Groesse wie vor U10. Keine neue Stufe. */
  .st-kreislauf-lead { font-size: var(--type-h2); line-height: 1.16; }
  .st-presse-proof {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 14px;
  }
  .st-presse-image { max-width: 420px; }
}

/* Mobile (2026-09-16): der Home-Hero bleibt Vollbild mit Overlay-Typo — der
   fruehere K8-Stack (Bildband oben, Cream-Typo darunter) gilt auf der
   Startseite nicht mehr. Manuel will das eindrucksvolle Bild zuerst, auch auf
   dem Phone; die Nav folgt danach im Fluss. */
@media (max-width: 640px) {
  body[data-hero="photo"] .hero.st-home-hero {
    display: block; position: relative; overflow: hidden;
    min-height: 100svh; height: auto; max-height: none;
    background: var(--ink); color: var(--cream); padding: 0;
  }
  body[data-hero="photo"] .hero.st-home-hero .hero-bg {
    position: absolute; inset: 0; height: auto; min-height: 0; max-height: none;
  }
  /* Unter 640px laufen Standbild (pratteln-haus-mobile-650) und Video (home-hero-mobile)
     als eigene Hochformat-Fassungen. Beide sind aus der 16:9-Quelle so zugeschnitten, wie
     frueher object-position 40 % auf 390px stand (Termin 02.10.2026). Sie fuellen die
     Hoehe (cover) und werden nur noch mittig beschnitten. */
  body[data-hero="photo"] .hero.st-home-hero .hero-bg img,
  body[data-hero="photo"] .hero.st-home-hero .hero-video { object-position: 50% 60%; }
  body[data-hero="photo"] .hero.st-home-hero .hero-bg::before { display: none; }
  body[data-hero="photo"] .hero.st-home-hero .hero-bg::after {
    display: block;
    /* Auf dem Phone laeuft die Textspalte fast ueber die volle Breite. Die
       zweite Schicht endet darum erst bei 86 % statt 52 %, sonst steht im
       Himmel eine sichtbare senkrechte Kante am Verlaufsende. */
    background:
      linear-gradient(to top,
        rgba(var(--ink-rgb), 0.78) 0%,
        rgba(var(--ink-rgb), 0.12) 50%,
        rgba(var(--ink-rgb), 0) 88%),
      linear-gradient(to right,
        rgba(var(--ink-rgb), 0.44) 0%,
        rgba(var(--ink-rgb), 0.22) 47%,
        rgba(var(--ink-rgb), 0) 86%);
  }
  body[data-hero="photo"] .hero.st-home-hero .hero-inner {
    position: relative; z-index: 1;
    min-height: 100svh; height: auto;
    display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
    padding: 28px var(--page-pad-mobile) 40px;
    background: transparent; color: var(--cream);
  }
  body[data-hero="photo"] .hero.st-home-hero .hero-main {
    grid-row: 1 / -1;
    align-self: end; max-width: 620px; transform: none;
    padding-bottom: 0;
  }
  body[data-hero="photo"] .hero.st-home-hero .hero-main h1 { color: var(--cream); line-height: 1.06; }
  body[data-hero="photo"] .hero.st-home-hero .hero-sub { margin-top: 14px; color: rgba(var(--cream-rgb), 0.9); }
  body[data-hero="photo"] .hero.st-home-hero .hero-cta-row {
    margin-top: 20px; gap: 14px; flex-direction: column; align-items: flex-start; max-width: none;
  }
  /* U11 S2: `space-between` riss Text und Pfeil auseinander. */
  body[data-hero="photo"] .hero.st-home-hero .hero-cta-row .btn-premium.solid-cream {
    width: 100%; justify-content: center;
    color: var(--ink); background: var(--cream); border-color: var(--cream);
  }
  body[data-hero="photo"] .hero.st-home-hero .hero-cta-row .btn-premium.solid-cream:hover,
  body[data-hero="photo"] .hero.st-home-hero .hero-cta-row .btn-premium.solid-cream:focus-visible {
    color: var(--ink); background: var(--warm); border-color: var(--warm);
  }
  body[data-hero="photo"] .hero.st-home-hero .hero-cta-row .btn-text { color: var(--cream); }
  body[data-hero="photo"] .hero.st-home-hero .hero-cta-row .btn-text:hover,
  body[data-hero="photo"] .hero.st-home-hero .hero-cta-row .btn-text:focus-visible { color: var(--clay-light); }

  .st-section-cta { margin-top: 36px; }
  .st-section-cta .btn-premium { width: 100%; justify-content: center; }
  /* U11 S6e: ungleich breite Knoepfe nebeneinander, jetzt gestapelt. */
  .intro-person .ip-cta-row { flex-direction: column; align-items: stretch; }
  .intro-person .ip-cta-row .btn-premium { width: 100%; justify-content: center; }
  .cta-c.st-cta .st-cta-lead { margin: 0 auto 32px; }
  /* Adresse und Mail als zwei eigene Zeilen statt eines Umbruchs mitten im Paar. */
  .cta-c.st-cta .st-cta-adr { flex-direction: column; align-items: center; gap: 6px; }
}