/* Überblick geteilt (13.10.2026, Erdems Vorlage Bild 117): Text links, Foto rechts bis zum Bildschirmrand mit schräger Kante,
   Knöpfe unter dem Text. Nur auf Leistungsseiten mit 'ueberblick_stil' => 'split' (template-leistung.php lädt die Datei dann).
   Farben aus der Palette, Schrift Inter. Selektoren mit zwei bis drei Klassen, damit fixes.css (.section, .ueberblick-text …) sie nicht überschreibt. */
.section.ueberblick--split { position: relative; overflow: hidden; padding: 0; background: linear-gradient(180deg, #ffffff 0, #f3f8fc 30%, #f3f8fc 70%, #ffffff 100%); }
.ueberblick--split .ueberblick-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 0; align-items: center; }
.ueberblick--split .ueberblick-text { max-width: 680px; padding: clamp(44px, 5vw, 76px) 0; }
.ueberblick--split .ueberblick-text .section-head { margin: 0 0 16px; max-width: none; }
.ueberblick--split .section-eyebrow { display: flex; align-items: center; gap: 12px; }
.ueberblick--split .section-eyebrow::before { content: ""; flex: 0 0 28px; height: 2px; border-radius: 2px; background: #1685b6; }
.ueberblick--split .section-title { max-width: 660px; font-size: clamp(2rem, 2.3vw, 2.75rem); }
.ueberblick--split .section-title .akzent { color: #1685b6; }
.ueberblick--split .ueberblick-text .section-text { color: #4a5f6e; max-width: 620px; }
.ub-split__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ub-split__actions .btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.ub-split__foto { position: absolute; top: 0; right: 0; bottom: 0; width: 48%;
  background: var(--ub-foto) 50% 12% / cover no-repeat #dceefa;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  /* 18.10.2026 (Erdem: „zu stark, man sieht die Haare nicht mehr"): Einblendung oben nur noch leicht (ab 50 % auf 70 px) und Foto höher gesetzt (12 % statt 30 %), damit der Kopf ganz im Bild ist. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0, #000 70px); mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0, #000 70px); }
/* Fließender Übergang: Hero-Foto und Tönung laufen unten weich in Weiß aus, wenn direkt der geteilte Überblick folgt. */
.subpage-hero:has(+ .ueberblick--split) .subpage-hero__bg,
.subpage-hero:has(+ .ueberblick--split) .subpage-hero__tint { -webkit-mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,0) 100%); }
@media (max-width: 1200px) {
  .ub-split__foto { width: 44%; }
}
@media (max-width: 960px) {
  .ueberblick--split .ueberblick-grid { grid-template-columns: 1fr; }
  .ueberblick--split .ueberblick-text { max-width: none; padding: 36px 0 32px; }
  .ueberblick--split .section-title { max-width: none; font-size: clamp(1.75rem, 7vw, 2.2rem); }
  .ueberblick--split .ueberblick-text .section-text { max-width: none; }
  /* 18.10.2026: Foto rechtsbündig und leicht vergrößert, damit der linke Bildrand (Reserve für die schräge Kante am Desktop) am Handy außerhalb liegt. */
  .ub-split__foto { position: relative; width: auto; height: 300px; clip-path: none; -webkit-mask-image: none; mask-image: none; border-radius: 18px 18px 0 0; background-size: 108% auto; background-position: 100% 10%; }
}