/* ============================================================
 * Stoll Content-Block — editorial text section (layout only).
 * Typography/spacing come from design-system.css (tokens + helpers).
 * ============================================================ */

.pst-cb { padding-block: var(--pst-space-section); }
/* Wrapper jetzt stoll-wrap (D1.3 S-E, inc/elementor-content-block.php) — war
 * max-width:var(--pst-container) (1200px, Governance-Abweichung von der
 * echten 1180px-Spec) + responsive var(--pst-gutter)-Padding statt des
 * bewiesenen 32/16px-Musters. .pst-cb__inner bleibt als Klasse (Split-Grid-
 * Selektor unten braucht sie), traegt aber keine Wrap-Werte mehr selbst. */

/* Split: asymmetric editorial 2-col (heading | content) */
.pst-cb--split .pst-cb__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.pst-cb--split .pst-cb__head { padding-top: 0.35rem; } /* optical align with lead */

/* CTA sits a touch below the text, inline (not stretched by the stack) */
.pst-cb__cta { margin-top: var(--pst-space-sm); align-self: flex-start; }
.pst-cb--centered .pst-cb__cta { align-self: center; }

/* Centered variant */
.pst-cb--centered .pst-cb__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pst-cb--centered .pst-eyebrow { justify-content: center; }
.pst-cb--centered .pst-lead,
.pst-cb--centered .pst-text { margin-inline: auto; }
/* Joe 03.08 (Typo-Regeln): 18ch zwang die H2 in 3 enge Zeilen — verlorener
 * Mini-Block im Weissraum. 26ch + balance = 2 ausgewogene Zeilen; Lead auf
 * Lesebreite begrenzt, damit die Gruppe als Einheit steht. */
.pst-cb--centered .pst-title { max-width: 26ch; text-wrap: balance; }
.pst-cb--centered .pst-lead { max-width: 62ch; }

/* Stack to one column on narrow viewports (mobile-first intent) */
@media (max-width: 880px) {
  .pst-cb--split .pst-cb__inner { grid-template-columns: 1fr; gap: var(--pst-space-lg); }
}

/* Photo-split: editorial text column | photo+Signet-Badge (Homepage.dc.html
 * "2 · EDITORIAL-SPLIT", 1.05fr/1fr gap 80px). WICHTIG: overflow:hidden nur
 * auf .pst-cb__photo-frame, NICHT auf .pst-cb__photo selbst — sonst schneidet
 * es das absolut positionierte, bewusst ueberlappende Badge (bottom:-20px)
 * ab (derselbe Fund wie leistung-sections.css .pst-photo-badge). */
.pst-cb--photo-split .pst-cb__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.pst-cb__photo { position: relative; }
/* Foto-Position umkehrbar (Homepage.dc.html Karriere-Landingpage: Intro-1
 * Foto rechts, Intro-2 Foto links) — DOM-Reihenfolge bleibt text-zuerst,
 * nur visuelle Reihenfolge via order dreht sich um. */
.pst-cb--photo-left .pst-cb__photo { order: -1; }
.pst-cb__photo-frame { height: 440px; overflow: hidden; }
/* ECHTER ROOT CAUSE 25.07.2026 (Joe-Fund: Badge sass neben statt auf dem
 * Foto, per JS-Rule-Scan direkt bewiesen, nicht geraten): ".pst-cb__photo-img"
 * ist NUR EINE Klasse -> Spezifitaet (0,1,0). Elementors eigenes
 * "assets/css/frontend.min.css" setzt sitewide ".elementor img{height:auto;
 * max-width:100%}" -> Spezifitaet (0,1,1), IMMER hoeher, unabhaengig von der
 * Ladereihenfolge -> gewinnt IMMER gegen eine einzelne Klasse auf dem <img>
 * selbst. Das Bild rendert dadurch in seinem Original-Seitenverhaeltnis
 * (gecroppt nur auf die Breite) statt auf die feste Rahmenhoehe gecroppt zu
 * werden -> das absolut positionierte Badge (bottom:-20px, verankert an
 * .pst-cb__photo) sitzt am Rand des zu kurzen Bildes statt auf dem Foto.
 * Fix: Selektor um den Rahmen als zweite Klasse ergaenzt -> Spezifitaet
 * (0,2,0), schlaegt (0,1,1) zuverlaessig, unabhaengig von Ladereihenfolge. */
.pst-cb__photo-frame .pst-cb__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 28.07.2026 Duo-Variante (Original-Startseite nach dem Hero): zwei Fotos
 * buendig nebeneinander in EINER Bildspalte, gleiche Hoehe, kein Badge.
 * <picture>-Wrapper (AVIF, pst_picture) muss die Grid-Zelle fuellen. */
.pst-cb__photo-frame--duo { display: grid; grid-template-columns: 1fr 1fr; height: auto; aspect-ratio: 760 / 460; }
.pst-cb__photo-frame--duo picture { display: block; width: 100%; height: 100%; min-width: 0; }
.pst-cb__photo-frame--duo .pst-cb__photo-img { height: 100%; }
.pst-cb__photo-badge {
  position: absolute; left: -20px; bottom: -20px; width: 96px; height: 96px;
  background: var(--gold-500); display: flex; align-items: center; justify-content: center;
}
.pst-cb__photo-badge img { width: 56px; height: 56px; }

@media (max-width: 880px) {
  .pst-cb--photo-split .pst-cb__inner { grid-template-columns: 1fr; gap: var(--pst-space-lg); }
  /* 28.07.2026 (Joe, Original-Verhalten): mobil IMMER Text zuerst, Bilder
   * darunter — auch bei photo-left (order:-1 gilt nur zweispaltig). */
  .pst-cb--photo-left .pst-cb__photo { order: 0; }
}
@media (max-width: 767px) {
  .pst-cb__photo-frame { height: 280px; }
  .pst-cb__photo-badge { width: 72px; height: 72px; left: 16px; bottom: -16px; }
  .pst-cb__photo-badge img { width: 40px; height: 40px; }
  /* 28.07.2026 (Joe): Duo mobil FULL-BLEED — beide Bilder zusammen 100%
   * Viewportbreite (50/50), ohne Rand; calc(50% - 50vw) neutralisiert das
   * Wrapper-Padding unabhaengig von dessen Wert. Duo behaelt sein
   * aspect-ratio (760/460), die 280px-Fixhoehe gilt nur der Einzel-Variante. */
  .pst-cb__photo--duo { width: 100vw; margin-left: calc(50% - 50vw); }
  .pst-cb__photo--duo .pst-cb__photo-frame--duo { height: auto; }
}

/* Gold-Band-Flaeche (25.07.2026, Joe: "Lust auf Karriere"-Modul aus dem
 * Original, frame-background-primary). Vollflaechig Gold, Inhalt bleibt im
 * stoll-wrap zentriert -> volle Bandbreite + lesbarer Content-Block in einem.
 * Text dunkel (ink-900) statt hell: das Original nutzte helle Schrift auf
 * Gold (WCAG-faellig, < 3:1) — bewusste Kontrast-Korrektur, kein blindes
 * Kopieren (siehe heutige Kontrast-Funde). CTA nutzt stoll-btn--outline
 * (dunkler Rand/Text), da stoll-btn--primary selbst gold ist und auf
 * goldenem Grund unsichtbar würde. */
.pst-cb--gold { background: var(--gold-500); }
.pst-cb--gold .pst-eyebrow { color: var(--ink-900); }
.pst-cb--gold .pst-eyebrow::before,
.pst-cb--gold .pst-eyebrow::after { background: var(--ink-900); }
.pst-cb--gold .pst-title,
.pst-cb--gold .pst-lead,
.pst-cb--gold .pst-text { color: var(--ink-900); }
.pst-cb--gold .pst-text strong { color: var(--ink-900); }