/* ============================================================
 * Stoll components.css — verbindliche Modulbibliothek
 * QUELLE: Handoff-Paket 2, 09-designsystem-governance.md (1:1) +
 * Modul-Katalog 05. Styling existiert GENAU EINMAL — hier.
 * Widgets erhalten NUR Klassen + Inhalt, nie Style-Tab-Werte.
 * Varianten sind heilig: primary / outline (hell) / on-dark / ghost
 * sind GETRENNTE Klassen — nie vereinheitlichen (BINDING 15.07.).
 * Icon-Injektion: Klasse liest --icon; Instanz setzt nur
 * style="--icon:url(...)" (ein Property-Wert, kein Styling).
 * ============================================================ */

:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- M1 Eyebrow ---- */
.stoll-eyebrow{display:flex;align-items:center;gap:10px;font:500 var(--fs-meta, 15px)/1.2 var(--font-brand);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-800)}
.stoll-eyebrow::before{content:"";width:28px;height:2px;background:var(--gold-500)}
.stoll-eyebrow--center{justify-content:center}
.stoll-eyebrow--center::after{content:"";width:28px;height:2px;background:var(--gold-500)}
.stoll-eyebrow--on-dark{color:var(--gold-400)}
/* Kontrast-Audit 27.07.: Elementors heading-Basisregel faerbt .elementor-heading-title
 * mit Global PRIMARY (0,2,0) und schlaegt .stoll-eyebrow (0,1,0) — Titel erbt
 * jetzt die Eyebrow-Farbe (gold-800 hell / gold-400 on-dark). */
.elementor-widget-heading.stoll-eyebrow .elementor-heading-title{color:inherit}
/* Gold-Textlink als heading-Widget (Teaser "Karriereportal"/"Alle News ansehen") */
.elementor-widget-heading.stoll-textlink .elementor-heading-title,
.elementor-widget-heading.stoll-textlink .elementor-heading-title a{color:var(--gold-800)}
.elementor-widget-heading.stoll-textlink .elementor-heading-title a:hover{color:var(--gold-900)}
/* ZURUECKGENOMMEN 03.08.2026 (Joe: "du hast das zahneins band kaputt gemacht
 * ... der button war in orange, jetzt hast du ihn gold gemacht").
 * Hier stand eine globale Regel, die JEDEN verlinkten Heading ohne eigene
 * Farbe auf --link (gold-800) setzte, um "Alle News ansehen" (gold-500 =
 * 2,14:1) zu korrigieren. Sie traf auch Heading-Links, die bewusst anders
 * gefaerbt sind — u.a. den Button im zahneins-Band (weiss/orange auf dem
 * Orange-Verlauf). Klarer Verstoss gegen "Inventar vor Globalitaet"
 * (feedback_globale_regeln_brauchen_inventar): Bevor eine globale Regel
 * ausgerollt wird, MUESSEN alle betroffenen Instanzen aufgelistet und in
 * "Rezept passt" / "braucht Variante" eingeteilt werden. Das habe ich nicht
 * getan. "Alle News ansehen" wird stattdessen einzeln ueber die dafuer
 * vorgesehene Komponentenklasse .stoll-textlink geloest. */

/* ---- M2 Buttons (4 Varianten — getrennt halten!) ----
 * Zwei Trager-Faelle: (a) PHP-Widgets setzen die Klassen DIREKT auf den
 * echten <a> (Klasse = die Box). (b) Elementor-Button-Widgets bekommen
 * _css_classes IMMER auf den AEUSSEREN .elementor-element-Wrapper, NIE auf
 * den echten inneren <a class="elementor-button"> (Elementor-Mechanik, nicht
 * verhandelbar) — sonst entsteht eine Box-in-Box (aeusserer Wrapper + Kit-
 * Default-Akzentfarbe auf dem inneren <a>, gefunden per Screenshot D1.3 S-B).
 * Deshalb: Wrapper-Fall kollabiert (display:contents), die echte Box wandert
 * auf den inneren <a> — jede Regel unten deckt BEIDE Faelle in einem Selektor. */
.elementor-widget-button.stoll-btn{display:contents}
/* FUND 25.07.2026 (Joe: haesslicher voller Balken statt Button, Karriere-
 * Hero-CTA krhctabtn1): display:contents laesst den echten <a> als direktes
 * Flex-Item im umgebenden Elementor-Container (e-con-inner, flex-direction:
 * column) auftauchen. Elementors Container-Default fuer "Align Items" ist
 * unbenannt/"normal" (= stretch), sofern kein Autor es explizit auf "Start"
 * stellt — auf lp haben alle bisherigen Button-Container das per Zufall/
 * Sorgfalt richtig gesetzt, hier nicht. align-self:flex-start haertet JEDEN
 * .stoll-btn dagegen ab, unabhaengig vom jeweiligen Elementor-Container-
 * Setting (konsistent mit dem bereits bestehenden Muster .pst-cb__cta{align-
 * self:flex-start}/.pst-cb--centered .pst-cb__cta{align-self:center} in
 * content-block.css — Buttons sind per Default linksbuendig-eigenbreit,
 * Zentrierung ist ein bewusster Opt-in, nie ein Stretch-Zufallsprodukt). */
.stoll-btn:not(.elementor-widget-button),
.elementor-widget-button.stoll-btn > a.elementor-button{
  display:inline-flex;align-items:center;align-self:flex-start;gap:10px;font:700 var(--fs-body, 16px)/1 var(--font-brand);
  padding:17px 30px;border:0;border-radius:0;cursor:pointer;text-decoration:none;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)
}
.stoll-btn:not(.elementor-widget-button):active,
.elementor-widget-button.stoll-btn > a.elementor-button:active{transform:translateY(1px)}
.stoll-btn:not(.elementor-widget-button):focus-visible,
.elementor-widget-button.stoll-btn > a.elementor-button:focus-visible{outline:2px solid var(--ink-800);outline-offset:3px}
.stoll-btn--primary:not(.elementor-widget-button),
.elementor-widget-button.stoll-btn--primary > a.elementor-button{background:var(--gold-500);color:var(--ink-900)}
.stoll-btn--primary:not(.elementor-widget-button):hover,
.elementor-widget-button.stoll-btn--primary > a.elementor-button:hover{background:var(--gold-600);color:var(--ink-900)}
.stoll-btn--outline:not(.elementor-widget-button),
.elementor-widget-button.stoll-btn--outline > a.elementor-button{background:transparent;border:1px solid var(--ink-800);color:var(--ink-800)}
.stoll-btn--outline:not(.elementor-widget-button):hover,
.elementor-widget-button.stoll-btn--outline > a.elementor-button:hover{border-color:var(--gold-700);color: var(--gold-900);background:transparent}
.stoll-btn--on-dark:not(.elementor-widget-button),
.elementor-widget-button.stoll-btn--on-dark > a.elementor-button{border:1px solid rgba(246,243,236,.45);color:var(--text-on-inverse);background:transparent}
.stoll-btn--on-dark:not(.elementor-widget-button):hover,
.elementor-widget-button.stoll-btn--on-dark > a.elementor-button:hover{border-color:var(--gold-400);color:var(--gold-400);background:transparent}
.stoll-btn--ghost:not(.elementor-widget-button),
.elementor-widget-button.stoll-btn--ghost > a.elementor-button{padding:0;background:none;color: var(--gold-800)}
.stoll-btn--ghost:not(.elementor-widget-button):hover,
.elementor-widget-button.stoll-btn--ghost > a.elementor-button:hover{color:var(--gold-900);background:none}
.stoll-btn--header{padding:14px 24px}
.stoll-btn--hero{padding:16px 28px}
.stoll-btn--sm{padding:13px 22px}
.stoll-btn--footer{padding:15px 26px}
/* Zentrier-Opt-in (03.08, Joe: CTA-Band 'Ist diese Behandlung das Richtige
 * fuer Sie?' — alles zentriert, Button hing links): M2 setzt bewusst
 * align-self:flex-start als Default; zentrierte Baender geben dem Button
 * diese Klasse (Muster wie .pst-cb--centered .pst-cb__cta). */
.stoll-btn--center:not(.elementor-widget-button),
.elementor-widget-button.stoll-btn--center > a.elementor-button{align-self:center}
.stoll-btn__icon{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

/* ---- M3 Karten ---- */
.stoll-card{background:var(--white);box-shadow:var(--shadow-card);border-radius:0;color:var(--ink-800);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stoll-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}
.stoll-card:active{transform:translateY(-1px) scale(.99)}
.stoll-card:focus-visible{outline:2px solid var(--ink-800);outline-offset:3px}
.stoll-card__media{position:relative;display:block;width:100%;overflow:hidden;background:var(--sand-100);flex-shrink:0}
.stoll-card__media--3x2{aspect-ratio:3/2}
.stoll-card__media--16x10{aspect-ratio:16/10}
.stoll-card__media--4x5{aspect-ratio:4/5}
.stoll-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.stoll-card:hover .stoll-card__media img{transform:scale(1.03)}
.stoll-card__body{padding:28px}
@media (prefers-reduced-motion: reduce){
  .stoll-card,.stoll-card:hover,.stoll-card:active{transform:none}
  .stoll-card:hover .stoll-card__media img{transform:none}
  .stoll-btn:active{transform:none}
}

/* ---- M4 Icon-Kachel (EINZIGE erlaubte Verlaufsflaeche) ---- */
.stoll-icontile{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--grad-gold);flex:none}
.stoll-icontile--sm{width:44px;height:44px}
.stoll-icontile__icon{width:26px;height:26px;background:#fff;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

/* ---- M11/M12 Sektionsbaender ---- */
.stoll-section{padding:var(--pst-space-section, 96px) 0}
.stoll-band-sand{background:var(--sand-50);border-top:1px solid var(--sand-200);border-bottom:1px solid var(--sand-200)}
.stoll-band-ink{background:var(--ink-800);color:var(--text-on-inverse)}
/* Kontrast-Audit 27.07.: Kit-Linkfarbe (#7D6529, fuer helle Flaechen) ist auf
 * Ink-Flaechen unlesbar — dunkle Kontexte definieren ihre Linkfarbe explizit. */
.stoll-band-ink a:not(.elementor-button):not(.stoll-btn),
.pst-sidebar-facts a:not(.elementor-button):not(.stoll-btn),
[data-id="ctasec1"] a:not(.elementor-button):not(.stoll-btn){color:var(--gold-400)}
.stoll-band-ink a:not(.elementor-button):not(.stoll-btn):hover,
.pst-sidebar-facts a:not(.elementor-button):not(.stoll-btn):hover,
[data-id="ctasec1"] a:not(.elementor-button):not(.stoll-btn):hover{color:var(--gold-300)}
.stoll-wrap{max-width:var(--content-max, 1320px);margin:0 auto;padding-inline:32px}
/* Mobile-Gap in der Governance-Quelle (Bewegungs-Katalog nennt nur 32px) —
 * D1.3 S-E uebernimmt den bereits bewiesenen Wert aus der Standort-Karte
 * (.pst-stk .pst-container hatte @767px 16px, vor S-E). */
@media (max-width: 767px){.stoll-wrap{padding-inline:16px}}

/* Full-Bleed-Ausnahme (Joe 01.08.2026: "Ausnahmeregelungen erlauben von
 * Elementen die ganz bis zum Rand gehen"): bricht ein Element aus JEDEM
 * boxed Container (e-con-inner 1615 / stoll-wrap 1320) bis an den
 * Viewport-Rand aus. Funktioniert dank html{overflow-x:clip} (tokens.css)
 * ohne horizontales Scrollen; 50%/50vw-Rechnung ist scrollbar-sicher. */
.stoll-fullbleed{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
/* Wrapper-Haertung (Fund 01.08., Homepage krbleed1): in Flex-Containern
 * kollabiert der Elementor-Widget-Wrapper eines Full-Bleed-Moduls auf 0
 * (Inhalt = 100vw + negative Margins -> Netto-Beitrag 0) und die
 * %-Margin-Rechnung verschiebt das Modul um die halbe Viewport-Breite.
 * Der Wrapper MUSS die volle Containerbreite tragen. */
.elementor-widget:has(> .elementor-widget-container > .stoll-fullbleed){width:100%}

/* ---- M5 Hero-Banner Unterseite ----
 * FUND 17.07. (Joe-Feedback): war statisch 380px auf JEDER Breite — auf
 * grossen Screens zu schmal/gestaucht, keine Anpassung an Bildschirmhoehe.
 * Fix: an vh gekoppelt, mit 16:9 als Breitbild-Untergrenze (56.25vw =
 * 100vw*9/16 -- der min()-Term verhindert, dass die Hoehe je ueber eine
 * 16:9-Bildproportion hinauswaechst, also nie "quadratischer" als 16:9
 * wird), skaliert fliessend bis mobil. min-height 280px als reine
 * Lesbarkeits-Untergrenze fuer Breadcrumb+H1 auf sehr kleinen Screens. */
/* A4 (Joe 02.08, bindend): Hero reicht "pauschal bis zum unteren Fensterrand,
 * sofern auf 16:9-Ebene moeglich" — Hoehe = Viewport minus Header-Offset
 * (--pst-header-offset, design-system.css), gedeckelt durch 56.25vw (das
 * Bild wird nie staerker beschnitten als sein 16:9-Frame). Mobil behaelt
 * die Artboard-Festhoehen (Doc 11: 340-420px). */
.stoll-hero{position:relative;height:min(58vh, 56.25vw);min-height:340px;overflow:hidden;background:var(--ink-800)}
@media (min-width:768px){
  .stoll-hero{height:min(calc(100vh - var(--pst-header-offset, 128px)), 56.25vw);min-height:480px;max-height:none}
}
.stoll-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.stoll-hero__scrim{position:absolute;inset:0;background:rgba(51,51,51,.55)}
.stoll-hero__foot{position:absolute;left:0;right:0;bottom:0;height:65%;background:linear-gradient(0deg,rgba(38,33,22,.88),transparent)}
/* W1-Nachtrag 27.07.2026 (Joe: Unterseiten-Hero "schmal"): Desktop-Hoehe an
 * die Homepage-Slider-Referenz (--pst-minh 620px) herangefuehrt — 560-620px
 * statt fixer 58vh (=485-522px auf ueblichen Fensterhoehen). Scrim nur auf
 * Desktop reduziert, damit das Original-Bildmotiv sichtbar bleibt; der
 * Foot-Gradient (Textzone unten) bleibt unveraendert kraeftig -> H1/Breadcrumb-
 * Kontrast haengt am Gradient, nicht am Scrim. Mobil/Tablet unveraendert
 * (56.25vw-Kappung = Bild nie hoeher als 16:9, Joe-Regel 27.06.). */
@media (min-width:1025px){
  .stoll-hero{min-height:560px}
  /* Joe 27.07. (implantologie: "sieht aus wie scheisse"): Bild lag milchig
   * unter opacity .85 + Grau-Scrim — Original zeigt Kopfbilder satt/klar.
   * Textzone (Breadcrumb/H1) sitzt im Foot-Gradient, der bleibt. */
  .stoll-hero__scrim{background:rgba(51,51,51,.12)}
}

/* Startseiten-Regional-Split (accbw1): der 6-Absatz-SEO-Text macht die
 * media-Spalte ~1660px hoch — das Foto wurde zum Riesen (Joe 03.08). Fix:
 * Bild klebt als maximal Viewport-hoher Ausschnitt und scrollt mit
 * (Editorial-Sticky), statt die volle Texthoehe zu fuellen. */
.elementor-element-accbw1 .stoll-split__media img{position:sticky;top:0;height:100vh;max-height:100%}

/* ---- Leistungstext-Zweispalter (Joe 03.08, Notfallplan Relaunch) ----
 * Der lange migrierte inhalt-Block der Leistungs-Singles laeuft als echter
 * 2-Spalten-Textsatz statt als schmale Endlos-Spalte. Klasse pst-linhalt-grid
 * sitzt am Sektions-Container lstinhrow1 (Template 973). Elementor 4 rendert
 * ohne .elementor-widget-container. Immer-geladen hier statt in der (nur mit
 * Widget enqueueten) leistung-sidebar.css. */
/* Deckel-Overrides: W1-Regel `.elementor-element-lstinhal{max-width:var(--pst-measure)!important}`
 * (595px) + 900px-Container-Cap gelten fuer EINSPALTIGEN Prosa-Satz — im
 * Zweispalter traegt jede SPALTE die Lesebreite, nicht der Block. */
.pst-linhalt-grid.pst-linhalt-grid{max-width:var(--content-max,1320px) !important;padding-inline:clamp(16px,4vw,32px)}
.pst-linhalt-grid .elementor-element-lstinhal{max-width:none !important}
.pst-linhalt-grid .elementor-widget-text-editor{max-width:none;columns:2;column-gap:80px}
.pst-linhalt-grid .elementor-widget-text-editor h2{break-after:avoid;break-inside:avoid;margin-top:0;padding-top:28px}
.pst-linhalt-grid .elementor-widget-text-editor h2:first-child{padding-top:0}
.pst-linhalt-grid .elementor-widget-text-editor p,
.pst-linhalt-grid .elementor-widget-text-editor li{break-inside:avoid}
@media (max-width:1024px){
  .pst-linhalt-grid .elementor-widget-text-editor{columns:1}
}

/* ---- M6 Kompakt-Banner (Rechtsseiten) ---- */
.stoll-banner-compact{background:var(--ink-800);border-top:1px solid rgba(246,243,236,.08);padding:48px 32px 44px}

/* ---- M7 Oeffnungszeiten-Zeilen ---- */
.stoll-hours{display:flex;flex-direction:column}
.stoll-hours__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:9px 0}
.stoll-hours__row + .stoll-hours__row{border-top:1px solid var(--sand-200)}
.stoll-hours__row--today{background:var(--sand-100)}
.stoll-hours__day{color:var(--ink-800);font-weight:700;white-space:nowrap}
.stoll-hours__time{color:var(--ink-600);text-align:right}

/* ---- M8 FAQ-Akkordeon ---- */
.stoll-faq{border:1px solid var(--sand-200)}
.stoll-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:18px 22px;font:700 17px/1.4 var(--font-brand);color:var(--ink-800);list-style:none}
.stoll-faq__q::-webkit-details-marker{display:none}
.stoll-faq__q:focus-visible{outline:2px solid var(--ink-800);outline-offset:-2px}
.stoll-faq__q::after{content:"+";color: var(--gold-800);font-size:22px;line-height:1;flex:none;transition:transform .3s var(--ease)}
.stoll-faq__item[open] .stoll-faq__q::after{content:"×"}
.stoll-faq__a{padding:0 22px 20px;font-size:17px;line-height:1.6;color:var(--ink-600)}
.stoll-faq__item + .stoll-faq__item{border-top:1px solid var(--sand-200)}

/* ---- M9 Formular (17.2/17.5 01.08.2026: border-control statt sand-200 —
 * sand-200 auf Weiss 1,17:1 = WCAG-1.4.11-Verstoss; Fokus gold-700 + Ring) ---- */
.stoll-field{border:1px solid var(--border-control);border-radius:4px;padding:14px 16px;font:400 var(--fs-body, 17px)/1.4 var(--font-brand);width:100%}
.stoll-field:focus{border-color:var(--focus-border);box-shadow:var(--focus-ring);outline:none}
.stoll-field--error{border-color:var(--error)}
.stoll-chip{display:inline-flex;align-items:center;padding:10px 18px;border:1px solid var(--border-control);background:var(--white);color:var(--ink-800);font:500 15px/1 var(--font-brand);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.stoll-chip--active{background:var(--gold-500);border-color:var(--gold-700);color:var(--ink-900);font-weight:700}

/* ---- M10 Toggle ---- */
.stoll-switch{position:relative;flex:none;width:52px;height:30px;border-radius:15px;background:var(--sand-200);transition:background .3s var(--ease);cursor:pointer;border:0}
.stoll-switch[aria-checked="true"]{background:var(--gold-500)}
.stoll-switch[disabled]{opacity:.55;cursor:not-allowed}
.stoll-switch__knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(38,33,22,.25);transition:left .3s var(--ease)}
.stoll-switch[aria-checked="true"] .stoll-switch__knob{left:25px}

/* ---- M14 Timeline (Zertifizierungen) ---- */
.stoll-timeline{position:relative;padding-left:28px}
.stoll-timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--sand-200)}
.stoll-timeline__item{position:relative;padding-bottom:24px}
.stoll-timeline__item::before{content:"";position:absolute;left:-28px;top:5px;width:12px;height:12px;background:var(--gold-500)}
.stoll-timeline__year{font:700 15px/1.2 var(--font-brand);color: var(--gold-800)}
.stoll-timeline__text{color:var(--ink-600)}

/* ---- M15 Download-Zeile ---- */
.stoll-dl{display:flex;align-items:center;gap:18px;padding:18px 16px;text-decoration:none;transition:background .3s var(--ease)}
.stoll-dl + .stoll-dl{border-top:1px solid var(--sand-200)}
.stoll-dl:hover{background:var(--sand-50)}
.stoll-dl__title{font:700 17px/1.3 var(--font-brand);color:var(--ink-800)}
.stoll-dl__sub{font-size:15px;color:var(--ink-600)}
.stoll-dl__badge{margin-left:auto;font:700 15px/1 var(--font-brand);color: var(--gold-800);white-space:nowrap}

/* M9d Dark Mode ENTFERNT (Joe-Veto 02.08.2026): Der Toggle war nie fuers
 * Frontend geplant; ein Dark Mode waere wenn dann eine globale optionale
 * Funktion, nicht Teil einzelner Formulare. stoll-theme.js + Token-Override
 * geloescht (Git-History: Commit 32d499e). */

/* ---- M28 Teaser Bild seitlich — Full-Bleed-Split (B-09, Layouts.dc.html 4a-4c)
 * Joe-BINDING 01.08.: Bild nutzt die maximale Bildschirmbreite bis an den
 * Viewport-Rand; Text richtet seine Innenkante an der 1615px-Wrap-Flucht aus.
 * .stoll-fullbleed am <section> bricht aus jedem boxed Container aus. ---- */
.stoll-split{display:grid;grid-template-columns:1fr 1fr;min-height:560px;background:var(--white);--split-gutter:max(32px, calc((100vw - 1615px) / 2 + 32px))}
.stoll-split--sand{background:var(--sand-50)}
.stoll-split--ink{background:var(--ink-800);color:var(--text-on-inverse)}
.stoll-split__media{position:relative;min-height:480px}
.stoll-split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stoll-split--media-left .stoll-split__media{order:-1}
.stoll-split__text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:96px}
.stoll-split--media-right .stoll-split__text{padding:96px 96px 96px var(--split-gutter)}
/* media-left: Text liegt RECHTS — dort klebt die fixe Chrome-Rail (54px).
 * Gutter + 72px, sonst laufen Zeilen hinter die Rail (Fund 02.08, #33). */
.stoll-split--media-left .stoll-split__text{padding:96px calc(var(--split-gutter) + 72px) 96px 96px}
.stoll-split__text .stoll-eyebrow{margin:0 0 16px}
.stoll-split__title{font:800 clamp(32px, 3vw, 44px)/1.1 var(--font-brand);color:var(--ink-800);margin:0 0 24px;max-width:18ch;text-wrap:balance}
.stoll-split--ink .stoll-split__title{color:var(--text-on-inverse)}
.stoll-split__copy p{font:400 17px/1.6 var(--font-brand);color:var(--ink-600);margin:0 0 16px;max-width:65ch;text-wrap:pretty}
.stoll-split--ink .stoll-split__copy p{color:rgba(246,243,236,.85)}
/* strong erbt sonst die dunkle Ink-Betonungsfarbe -> unsichtbar auf Ink-Flaeche
 * (Fund 03.08: "Fuer Klein bis Gross" im Angebotsspektrum-Split) */
.stoll-split--ink .stoll-split__copy strong{color:var(--text-on-inverse)}
.stoll-split__copy{margin:0 0 16px}
/* Leistungs-Plus-Liste im Split (Original-Startseite "Ueberzeugt vierfach"):
 * 2 Spalten, Gold-Plus-Marker, Punkte auf ihre Leistungsseiten verlinkt. */
.stoll-split__copy .pst-plusliste{list-style:none;margin:24px 0 0;padding:0;columns:2;column-gap:48px;max-width:none}
.stoll-split__copy .pst-plusliste li{break-inside:avoid;margin:0 0 12px;padding-left:24px;position:relative;font:400 16px/1.4 var(--font-brand)}
.stoll-split__copy .pst-plusliste li::before{content:"+";position:absolute;left:0;top:-1px;color:var(--gold-500);font-weight:700}
.stoll-split__copy .pst-plusliste a{color:inherit;text-decoration:none}
.stoll-split__copy .pst-plusliste a:hover{color:var(--gold-400,#d6bc7a);text-decoration:underline;text-underline-offset:3px}
.stoll-split--ink .stoll-split__copy .pst-plusliste li{color:rgba(246,243,236,.85)}
@media (max-width:640px){.stoll-split__copy .pst-plusliste{columns:1}}
@media (max-width:1024px){
  .stoll-split__text{padding:64px 32px}
  .stoll-split--media-right .stoll-split__text{padding-left:32px}
  .stoll-split--media-left .stoll-split__text{padding-right:32px}
}
@media (max-width:767px){
  .stoll-split{grid-template-columns:1fr;min-height:0}
  .stoll-split__media{order:-1;min-height:260px;aspect-ratio:4/3}
  .stoll-split__text{padding:40px 16px 48px}
}

/* ---- M29 zahneins-Band (B-09, Layouts.dc.html 5a) — Partner-Brand-Orange,
 * einzige erlaubte Nicht-Gold-Flaeche. Overflow-Regel (Joe-BINDING 01.08.):
 * die Tube laeuft ueber die Bandunterkante hinaus — overflow:visible, NIE
 * abschneiden; margin-bottom reserviert die weisse Folgeflaeche. ---- */
.stoll-zahneins{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:700px;background:linear-gradient(90deg,#E27803 0%,#E76617 52%,#E56415 100%);overflow:visible;margin-bottom:230px}
.stoll-zahneins__text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:96px 48px 96px var(--split-gutter, max(32px, calc((100vw - 1615px) / 2 + 32px)));position:relative;z-index:2}
/* .stoll-zahneins-Vorfahre noetig: Kit-h2-Farbregel (.elementor-kit-N h2, 0,1,1)
 * schlaegt sonst die einfache Klasse — zweite Titelzeile renderte ink statt weiss. */
.stoll-zahneins .stoll-zahneins__title{font:400 clamp(30px, 2.6vw, 42px)/1.2 var(--font-brand);color:#fff;margin:0;text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.stoll-zahneins__title strong{font-weight:800;display:block;color:#fff}
.stoll-zahneins__text p{font:400 18px/1.7 var(--font-brand);color:#fff;margin:0;max-width:60ch;text-wrap:pretty}
.stoll-zahneins__text p strong{color:#fff}
/* Joe 02.08 (bindend): Leitfarbe des Buttons ist GOLD, nicht Orange/Weiss —
 * gleiches Verhalten wie der Primaerbutton sitewide (gold-500 + ink-900,
 * Hover gold-600). Das Orange bleibt der Bandflaeche vorbehalten. */
/* Ancestor-Selektor (0,2,0): Kit-Linkfarbe `.elementor-kit-N a` (0,1,1)
 * sticht sonst die Textfarbe (bekannte Falle, s. Anrufen-Titel/Doc 19). */
.stoll-zahneins .stoll-zahneins__btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold-500);color:var(--ink-900);font:700 16px/1 var(--font-brand);padding:15px 28px;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease)}
.stoll-zahneins .stoll-zahneins__btn:hover{background:var(--gold-600);color:var(--ink-900)}
.stoll-zahneins__btn-plus{font-weight:800}
.stoll-zahneins__btn:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}
.stoll-zahneins__media{position:relative}
.stoll-zahneins__media img{position:absolute;top:0;right:0;height:119.88%;width:auto;max-width:none;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px);mask-image:linear-gradient(90deg,transparent 0,#000 60px)}
@media (max-width:1024px){
  .stoll-zahneins{grid-template-columns:1fr;min-height:0;margin-bottom:180px}
  .stoll-zahneins__text{padding:64px 32px 32px}
  .stoll-zahneins__media{min-height:320px}
  .stoll-zahneins__media img{position:absolute;top:0;right:0;height:130%}
}

/* ---- M18 404-Extras: Suche + 4er-Schnellzugriff + Ruecklink (03.08) ----
 * Raster-Optik: 1px-gap auf sand-200-Grund = feine Trennlinien (M18). */
.pst-nf{max-width:820px;margin:0 auto}
.pst-nf-search{display:flex;gap:12px;margin:8px 0 44px}
.pst-nf-search input[type=search]{flex:1;min-width:0;padding:14px 18px;font:400 16px/1.4 var(--font-brand);color:var(--ink-800);background:#fff;border:1px solid var(--border-control,#8A857B);border-radius:0;-webkit-appearance:none;appearance:none}
.pst-nf-search input[type=search]:focus-visible{outline:2px solid var(--gold-700);outline-offset:2px;border-color:var(--gold-700)}
.pst-nf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sand-200);border:1px solid var(--sand-200)}
.pst-nf .pst-nf-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;padding:26px 18px;text-align:center;text-decoration:none;transition:background .3s cubic-bezier(.22,1,.36,1)}
.pst-nf .pst-nf-card:hover{background:var(--sand-50)}
.pst-nf-card__ico{display:inline-block;flex:none;width:32px;height:32px;background:var(--gold-600);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.pst-nf-card__t{font:700 16px/1.2 var(--font-brand);color:var(--ink-800)}
.pst-nf-card__s{font:400 14px/1.4 var(--font-brand);color:var(--ink-600)}
.pst-nf .pst-nf-back{display:inline-flex;align-items:center;gap:8px;margin-top:36px;font:700 15px/1 var(--font-brand);color:var(--gold-800,#7D6529);text-decoration:none}
.pst-nf .pst-nf-back:hover{text-decoration:underline;text-underline-offset:3px}
.pst-nf-back__chev{width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
@media (max-width:767px){
  .pst-nf-grid{grid-template-columns:repeat(2,1fr)}
  .pst-nf-search{flex-direction:column}
}