/* ============================================================
 * 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; }
/* (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 (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; }
/* Zelle je Foto: beschneidet selbst. Das overflow:hidden des Rahmens reicht
 * nicht, sobald ein Bild horizontal wandert — es liefe in die Nachbarzelle.
 * Grid-Zellen beschneiden von sich aus nicht. */
.pst-cb__photo-frame--duo .pst-cb__photo-cell {
  display: block; position: relative; overflow: hidden; min-width: 0; height: 100%;
}
.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 (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 (Vorgabe): 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 (Vorgabe: "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); }

/* Dunkle Variante (Anthrazit), Gegenstueck zu --gold. Gemessene Kontraste auf
 * #262626: Ueberschrift 15,1:1 · Fliesstext 9,4:1 · Eyebrow 8,4:1 · Button
 * (ink auf gold-500) 7,1:1 — alle deutlich ueber der AA-Schwelle.
 * Vorerst nur der Abschnitt unter dem Startseiten-Hero: die Klasse
 * .pst-cb--photo-split laeuft auch auf "Unsere Zahnaerzte", und die soll hell
 * bleiben. Deshalb zusaetzlich ueber die Instanz adressiert; wer den Block
 * anderswo dunkel will, vergibt kuenftig einfach die Klasse .pst-cb--dunkel. */
.pst-cb--dunkel,
.elementor-element-cbw1 .pst-cb { background: var(--ink-900, #262626); }
.pst-cb--dunkel .pst-eyebrow,
.elementor-element-cbw1 .pst-cb .pst-eyebrow,
.elementor-element-cbw1 .pst-cb .stoll-eyebrow { color: var(--gold-400, #D6BF88); }
.pst-cb--dunkel .pst-eyebrow::before,
.pst-cb--dunkel .pst-eyebrow::after,
.elementor-element-cbw1 .pst-cb .pst-eyebrow::before,
.elementor-element-cbw1 .pst-cb .pst-eyebrow::after,
.elementor-element-cbw1 .pst-cb .stoll-eyebrow::before,
.elementor-element-cbw1 .pst-cb .stoll-eyebrow::after { background: var(--gold-400, #D6BF88); }
.pst-cb--dunkel .pst-title,
.elementor-element-cbw1 .pst-cb .pst-title,
.elementor-element-cbw1 .pst-cb h2,
.elementor-element-cbw1 .pst-cb h3 { color: #FFFFFF; }
.pst-cb--dunkel .pst-lead,
.pst-cb--dunkel .pst-text,
.elementor-element-cbw1 .pst-cb .pst-lead,
.elementor-element-cbw1 .pst-cb .pst-text,
.elementor-element-cbw1 .pst-cb p,
.elementor-element-cbw1 .pst-cb li { color: rgba(255,255,255,.80); }
.pst-cb--dunkel .pst-text strong,
.elementor-element-cbw1 .pst-cb .pst-text strong { color: #FFFFFF; }

/* Aeusserer Abstand je Block regelbar (Widget: „Abstand oben/unten").
 * Ohne Auswahl bleibt es beim Standardwert; die Modifier ueberschreiben nur die
 * jeweilige Seite, damit oben und unten unabhaengig bleiben. Beim Full-Bleed sitzt
 * die Polsterung in der Textspalte — dort greifen dieselben Modifier. */
.pst-cb--pt-half { padding-block-start: calc(var(--pst-space-section) / 2); }
.pst-cb--pt-none { padding-block-start: 0; }
.pst-cb--pb-half { padding-block-end: calc(var(--pst-space-section) / 2); }
.pst-cb--pb-none { padding-block-end: 0; }

.stoll-split.pst-cb--pt-half .stoll-split__text { padding-block-start: calc(var(--pst-space-section) / 2); }
.stoll-split.pst-cb--pt-none .stoll-split__text { padding-block-start: 0; }
.stoll-split.pst-cb--pb-half .stoll-split__text { padding-block-end: calc(var(--pst-space-section) / 2); }
.stoll-split.pst-cb--pb-none .stoll-split__text { padding-block-end: 0; }