/* OMSAG Heroshot 2026 · seriös (v5), Kreativ A (v7) und Kreativ B (v7b), gemeinsame Bausteine.
   Typografie und Farben wie auf den Leistungsseiten: Outfit, Grün #50aa3c,
   Akzent als Verlauf #50aa3c → #aad337. */
.omsag-h26 {
	--ink: var(--omsag-lp-ink, #232730);
	--soft: var(--omsag-lp-text-soft, #5a6270);
	--green: var(--omsag-lp-brand, #50aa3c);
	--lime: var(--omsag-lp-lime, #aad337);
	--grad: linear-gradient(135deg, #50aa3c 0%, #aad337 100%);
	--mint: #ebfedc;
	--sky: #ddf0fb;
	--night: #232730;
	--max: 1390px;
	--gut: clamp(20px, 4vw, 40px);
	--edge: max(var(--gut), calc((100cqw - var(--max)) / 2));
	--head: 90px;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--font: var(--omsag-lp-font, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
	--fg: var(--ink);
	--fg-soft: var(--soft);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	container-type: inline-size;
	margin-block: 0 !important;
	color: var(--fg);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.omsag-h26 *, .omsag-h26 *::before, .omsag-h26 *::after { box-sizing: border-box; }
.omsag-h26 p, .omsag-h26 h1, .omsag-h26 h2, .omsag-h26 h3, .omsag-h26 ul, .omsag-h26 ol, .omsag-h26 fieldset { margin: 0; padding: 0; }
.omsag-h26 ul, .omsag-h26 ol { list-style: none; }
.omsag-h26 img { display: block; max-width: 100%; }
.omsag-h26 svg { display: block; }
.omsag-h26 a { color: inherit; text-decoration: none; }
:where(.omsag-h26) button { font: inherit; color: inherit; }
.omsag-h26__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.omsag-h26 + .omsag-h26 { margin-top: 0 !important; }
.omsag-h26 [hidden] { display: none !important; }
.omsag-h26 :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.omsag-h26.is-dark {
	--fg: #fff;
	--fg-soft: rgba(255, 255, 255, .7);
	background: var(--night);
	color-scheme: dark;
}

/* ── Bühne: Raster an der Kante des Headers (1390 px) ────────────────── */
.omsag-h26__stage {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: clamp(520px, calc(100svh - var(--head) - 132px), 760px);
}
.omsag-h26__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(48px, 7vh, 88px) clamp(28px, 4vw, 64px) clamp(44px, 6vh, 72px) var(--edge);
}
.omsag-h26__media { position: relative; min-width: 0; }

/* ── Typografie wie auf den Leistungsseiten ──────────────────────────── */
.omsag-h26__eyebrow {
	margin: 0 0 20px !important;
	color: var(--green);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
}
.omsag-h26__h {
	margin: 0 !important;
	color: var(--fg);
	font-family: var(--font);
	font-size: clamp(36px, 4.2vw, 60px);
	font-weight: 700;
	letter-spacing: -.028em;
	line-height: 1.05;
}
.omsag-h26__ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.omsag-h26__ln > span { display: inline-block; white-space: nowrap; }
.omsag-h26__acc {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.omsag-h26__lead {
	max-width: 46ch;
	margin-top: 24px !important;
	color: var(--fg-soft);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 400;
	line-height: 1.6;
}
.omsag-h26__lead .omsag-h26__acc { background: none; color: var(--fg); -webkit-text-fill-color: currentColor; font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.omsag-h26__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.omsag-h26__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s ease, color .2s ease;
}
.omsag-h26__btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.omsag-h26__btn:hover svg { transform: translate(2px, -2px); }
.omsag-h26__btn.is-primary { background: var(--ink); color: #fff !important; }
.omsag-h26__btn.is-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(35, 39, 48, .45); }
.omsag-h26__btn.is-ghost { color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); }
.omsag-h26__btn.is-ghost:hover { background: rgba(35, 39, 48, .05); }
.is-dark .omsag-h26__btn.is-primary { background: var(--grad); color: #132009 !important; box-shadow: 0 10px 26px -14px rgba(80, 170, 60, .55); }
.is-dark .omsag-h26__btn.is-ghost { color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.is-dark .omsag-h26__btn.is-ghost:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }

/* ── Partner-Badges ──────────────────────────────────────────────────── */
.omsag-h26__badges-w { margin-top: clamp(32px, 4.5vh, 48px); }
.omsag-h26__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.omsag-h26__badges li { flex: none; }
.omsag-h26__badges img { width: auto; max-width: 100%; height: var(--bh, 70px); object-fit: contain; opacity: .85; transition: opacity .3s ease; }
.omsag-h26__badges img:hover { opacity: 1; }
@media (max-width: 992px) { .omsag-h26__badges img { height: var(--bht, 55px); } }
@media (max-width: 768px) { .omsag-h26__badges img { height: var(--bhm, 45px); } .omsag-h26__badges { gap: 12px; } }
.omsag-h26__badges-link { display: inline-block; }

/* ── Leiste „Wir verstärken, was bereits stark ist“ ──────────────────── */
.omsag-h26__pl { position: relative; z-index: 2; }
.omsag-h26__pl-in {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(0, 4fr);
	align-items: center;
	gap: 20px clamp(24px, 3vw, 48px);
	padding: 26px var(--edge);
}
.omsag-h26__pl-h { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; max-width: 15em; }
.omsag-h26__pl-h .omsag-h26__acc { display: inline-block; }
.omsag-h26__pl-list { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.omsag-h26__pl-list li { display: flex; flex-direction: column; gap: 6px; padding: 2px clamp(14px, 1.6vw, 24px); border-left: 1px solid rgba(35, 39, 48, .12); }
.omsag-h26__pl-k { color: var(--green); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.omsag-h26__pl-k b { font-weight: 700; }
.omsag-h26__pl-t { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
.omsag-h26__pl.is-light { background: #f2f4f3; border-bottom: 1px solid rgba(35, 39, 48, .08); }
/* Leiste hebt sich hellgrau mit feinen Linien oben und unten vom weißen Folgeabschnitt ab. */
.omsag-h26__pl.is-line .omsag-h26__pl-in { border-top: 1px solid rgba(35, 39, 48, .08); border-bottom: 1px solid rgba(35, 39, 48, .08); background: #f2f4f3; }
.omsag-h26__pl.is-glass .omsag-h26__pl-in { border-top: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .025); }
.omsag-h26__pl.is-glass .omsag-h26__pl-h, .omsag-h26__pl.is-glass .omsag-h26__pl-t { color: #fff; }
.omsag-h26__pl.is-glass .omsag-h26__pl-list li { border-left-color: rgba(255, 255, 255, .12); }

/* ── Kundenreferenzen (alle Varianten): Logo und bis zu drei Kennzahlen, Kunden wechseln ── */
.omsag-h26__refs { display: grid; color: var(--ink); }
.omsag-h26__ref { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; opacity: 0; translate: 0 10px; filter: blur(6px); pointer-events: none; transition: opacity .6s ease, translate .9s var(--ease), filter .6s ease; }
.omsag-h26__ref.is-on { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; }
.omsag-h26__ref.is-out { opacity: 0; translate: 0 -10px; filter: blur(6px); }
.omsag-h26__ref-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.omsag-h26__ref-logo { display: inline-flex; align-items: center; height: 44px; }
.omsag-h26__ref-logo img { width: auto; max-width: 160px; height: 40px; object-fit: contain; object-position: left center; }
.omsag-h26__refs.is-light .omsag-h26__ref-logo img { mix-blend-mode: multiply; }
.omsag-h26__ref-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.omsag-h26__ref-k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.omsag-h26__ref-k span { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .7; }
.omsag-h26__ref-k a { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.omsag-h26__ref-k a svg { width: 13px; height: 13px; }
.omsag-h26__ref-k a:hover { color: var(--ink); }
.omsag-h26__ref-kpis { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0 !important; padding: 0 !important; list-style: none; }
.omsag-h26__ref-kpis li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 12px; border-left: 1px solid rgba(35, 39, 48, .1); }
.omsag-h26__ref-kpis li:first-child { padding-left: 0; border-left: 0; }
.omsag-h26__ref-v { color: var(--ink); font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.omsag-h26__ref-v small { margin-left: .06em; font-size: .55em; letter-spacing: 0; color: var(--green); }
.omsag-h26__ref-m { color: var(--soft); font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.omsag-h26__ref-n { margin: -4px 0 0 !important; color: var(--soft); font-size: 12px; opacity: .8; }
.omsag-h26__refs.is-dark, .omsag-h26__refs.is-dark .omsag-h26__ref-v { color: #fff; }
.omsag-h26__refs.is-dark .omsag-h26__ref-v small { color: var(--lime); }
.omsag-h26__refs.is-dark .omsag-h26__ref-m, .omsag-h26__refs.is-dark .omsag-h26__ref-k, .omsag-h26__refs.is-dark .omsag-h26__ref-n { color: rgba(255, 255, 255, .66); }
.omsag-h26__refs.is-dark .omsag-h26__ref-kpis li { border-left-color: rgba(255, 255, 255, .12); }
.omsag-h26__refs.is-dark .omsag-h26__ref-logo { padding: 0 10px; border-radius: 9px; background: #fff; }
.omsag-h26__refs.is-dark .omsag-h26__ref-logo img { height: 34px; }
/* v5: freistehende Glas-Karte unten rechts auf dem Foto */
.omsag-h26__refs.is-float { position: absolute; z-index: 2; right: clamp(24px, 2.6vw, 48px); bottom: clamp(24px, 4vh, 48px); width: min(470px, calc(100% - 48px)); padding: 20px 22px 20px; border-radius: 22px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 50px -24px rgba(35, 39, 48, .35); animation: omsagH26Pop 1s var(--ease) both .55s; }
/* Kreativ A und B: in der Glas-Karte, die mit dem Grün erscheint */
.omsag-h26__factcard.is-refs { width: min(470px, calc(100% - 48px)); padding: 20px 22px 20px; }

/* ═════════════════ Dunkel (Kreativ A und B) ═════════════════ */
.omsag-h26.is-dark {
	background:
		radial-gradient(circle at 3% 0%, rgba(80, 170, 60, .22), rgba(80, 170, 60, 0) 46%),
		radial-gradient(circle at 100% 94%, rgba(111, 180, 221, .16), rgba(111, 180, 221, 0) 48%),
		#232730;
}
.omsag-h26__amb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(74px); opacity: .5; pointer-events: none; }
.omsag-h26__amb.is-a { width: 360px; height: 360px; top: -110px; left: 46%; background: rgba(80, 170, 60, .5); animation: omsagH26Float 14s ease-in-out infinite; }
.omsag-h26__amb.is-b { width: 300px; height: 300px; bottom: -90px; left: 4%; background: rgba(111, 180, 221, .4); animation: omsagH26Float 17s ease-in-out infinite reverse; }
.omsag-h26__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(150, 190, 195, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 195, .05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse at 62% 28%, #000, transparent 78%);
	mask-image: radial-gradient(ellipse at 62% 28%, #000, transparent 78%);
}

@keyframes omsagH26Float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(16px, -18px); } }
.is-dark .omsag-h26__eyebrow { color: var(--lime); }
.is-dark .omsag-h26__lead { color: #9eabb5; }

.omsag-h26__wash {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(42% 60% at 8% 92%, rgba(186, 216, 236, .7) 0%, rgba(186, 216, 236, 0) 70%),
		radial-gradient(40% 55% at 46% 0%, rgba(214, 245, 196, .8) 0%, rgba(214, 245, 196, 0) 70%);
	pointer-events: none;
}
.omsag-h26__wash::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(35, 39, 48, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 39, 48, .045) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(60% 70% at 30% 40%, #000 0%, transparent 80%);
	mask-image: radial-gradient(60% 70% at 30% 40%, #000 0%, transparent 80%);
}

/* ═════════════════ V5 · Licht (hell) ═════════════════ */
.is-v5, .is-v6 { background: #f6f7f7; }
/* Helle Farbflächen wie in v2: Grün oben hinter der Überschrift, Hellblau unten links bei den Badges.
   Sie liegen hinter der Bühne und scheinen durch den weichen Bildrand. */
.is-v5 .omsag-h26__wash, .is-v6 .omsag-h26__wash {
	background:
		radial-gradient(40% 70% at 4% 100%, rgba(178, 212, 236, .95) 0%, rgba(186, 216, 236, 0) 72%),
		radial-gradient(36% 58% at 24% 0%, rgba(214, 245, 196, .9) 0%, rgba(214, 245, 196, 0) 72%),
		radial-gradient(26% 40% at 46% 58%, rgba(214, 245, 196, .35) 0%, rgba(214, 245, 196, 0) 70%);
}
.is-v5 .omsag-h26__wash::after, .is-v6 .omsag-h26__wash::after {
	-webkit-mask-image: radial-gradient(42% 70% at 16% 45%, #000 0%, transparent 80%);
	mask-image: radial-gradient(42% 70% at 16% 45%, #000 0%, transparent 80%);
}
.is-v5 .omsag-h26__stage { min-height: clamp(620px, calc(100svh - var(--head) - 72px), 900px); }
.is-v5 .omsag-h26__copy { padding-top: clamp(64px, 9vh, 120px); padding-bottom: clamp(56px, 8vh, 104px); }
/* Das Foto ist ein eigener Kasten rechts, seine linke Kante läuft per Maske in den Hintergrund aus.
   Der Verlauf ist schräg (oben früher, unten neben den Badges später) und unten links zusätzlich
   rund ausgeschnitten, damit der Übergang organisch wirkt und keine senkrechte Linie entsteht.
   Er hängt am Bildkasten, wandert also bei jeder Breite mit dem Foto mit. */
.omsag-h26__bg {
	--fade: clamp(240px, 24vw, 480px);
	--off: 240px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: calc(50% - var(--fade));
	z-index: 0;
	display: block;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(75deg, transparent 0, transparent var(--off), rgba(0, 0, 0, .04) calc(var(--off) + var(--fade) * .15), rgba(0, 0, 0, .12) calc(var(--off) + var(--fade) * .3), rgba(0, 0, 0, .27) calc(var(--off) + var(--fade) * .45), rgba(0, 0, 0, .5) calc(var(--off) + var(--fade) * .6), rgba(0, 0, 0, .74) calc(var(--off) + var(--fade) * .75), rgba(0, 0, 0, .91) calc(var(--off) + var(--fade) * .88), #000 calc(var(--off) + var(--fade))), radial-gradient(ellipse 62% 58% at 0% 100%, transparent 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .8) 75%, #000 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(75deg, transparent 0, transparent var(--off), rgba(0, 0, 0, .04) calc(var(--off) + var(--fade) * .15), rgba(0, 0, 0, .12) calc(var(--off) + var(--fade) * .3), rgba(0, 0, 0, .27) calc(var(--off) + var(--fade) * .45), rgba(0, 0, 0, .5) calc(var(--off) + var(--fade) * .6), rgba(0, 0, 0, .74) calc(var(--off) + var(--fade) * .75), rgba(0, 0, 0, .91) calc(var(--off) + var(--fade) * .88), #000 calc(var(--off) + var(--fade))), radial-gradient(ellipse 62% 58% at 0% 100%, transparent 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .8) 75%, #000 100%);
	mask-composite: intersect;
}
.omsag-h26__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 55% 40%); }
.omsag-h26__veil { display: none; pointer-events: none; }
.is-v5 .omsag-h26__media { position: relative; z-index: 2; }

.is-v5 .omsag-h26__bg img { animation: omsagH26Fade 1.2s ease both; }
/* v5: kürzerer Übergang, damit die Personen links (z. B. die Kollegin in der Mitte) nicht im Weiß verschwinden */
@media (min-width: 1181px) { .is-v5 .omsag-h26__bg { --fade: 200px; --off: 200px; left: calc(50% - 320px); } }
@media (min-width: 1400px) { .is-v5 .omsag-h26__bg { left: calc(50% - 420px); } }

/* ═════════════════ V6 · Wachstum (hell) ═════════════════ */
/* Bühne wie v5: Bildkasten rechts mit organischem Rand (.omsag-h26__bg). Darin liegen das
   karge Foto, das grüne Foto (Fallback), die WebGL-Fläche und die Fakten-Marker. */
.is-v6 .omsag-h26__stage { min-height: clamp(620px, calc(100svh - var(--head) - 72px), 900px); }
.is-v6 .omsag-h26__copy { padding-top: clamp(64px, 9vh, 120px); padding-bottom: clamp(56px, 8vh, 104px); }
.omsag-h26__scene .omsag-h26__scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 58% 45%); }
.omsag-h26__scene .is-green { opacity: 0; transition: opacity 2.6s cubic-bezier(.4, 0, .2, 1); }
.omsag-h26__scene.is-fade .is-green, .omsag-h26__scene.is-done .is-green { opacity: 1; }
.omsag-h26__scene.is-done .is-green { transition: none; }
.omsag-h26__scene-gl { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
.omsag-h26__scene.is-gl .omsag-h26__scene-gl { opacity: 1; }
.omsag-h26__scene.is-gl { cursor: crosshair; }

/* Fakten: ruhige Glas-Karte unten rechts, an der Stelle der Referenz in v5.
   Die Werte erscheinen nacheinander, während die Landschaft grün wird, und zählen hoch. */
.is-v6 .omsag-h26__media { position: relative; z-index: 2; pointer-events: none; }
.omsag-h26__factcard {
	position: absolute;
	right: clamp(24px, 2.6vw, 48px);
	bottom: clamp(24px, 4vh, 48px);
	width: min(360px, calc(100% - 48px));
	padding: 6px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 28px 60px -28px rgba(22, 44, 18, .45);
	pointer-events: auto;
	opacity: 0;
	translate: 0 14px;
	transition: opacity .8s ease, translate 1.1s var(--ease);
}
.omsag-h26__factcard.is-on { opacity: 1; translate: 0 0; }
.omsag-h26__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 !important; padding: 0 !important; list-style: none; }
.omsag-h26__facts li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 15px; opacity: .22; translate: 0 6px; filter: blur(4px) grayscale(1); transition: opacity .7s ease, translate 1s var(--ease), filter .8s ease; }
.omsag-h26__facts li:nth-child(2n) { border-left: 1px solid rgba(35, 39, 48, .08); }
.omsag-h26__facts li:nth-child(n + 3) { border-top: 1px solid rgba(35, 39, 48, .08); }
.omsag-h26__facts li.is-on { opacity: 1; translate: 0 0; filter: none; }
.omsag-h26__facts li.is-on { transition-delay: calc(var(--fi, 0) * 90ms); }

/* v6 dunkel: Hintergrund wie v1 und die Leistungsseiten, Bild läuft ins Dunkel aus, Fakten auf dunklem Glas */
/* Dunkel: Tiefenunschärfe statt Schleier. Rechts das scharfe Foto (Ausschnitt wie hell), dahinter über die
   ganze Breite dieselbe Landschaft stark unscharf und gedämpft. Sie wächst mit (--g), der Bildrand läuft also
   von scharf nach unscharf statt nach dunkel. Ein leichter Verlauf von links hält den Text lesbar. */
.omsag-h26__dof { display: none; }
.is-v6.is-dark .omsag-h26__dof { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; pointer-events: none; }
.is-v6.is-dark .omsag-h26__dof img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: var(--pos, 62% 45%); filter: blur(var(--dof-blur, 26px)) saturate(1.35) brightness(.82); }
.is-v6.is-dark .omsag-h26__dof .is-green { opacity: var(--g, 0); }
.is-v6.is-dark .omsag-h26__dof::after, .is-v6.is-dark .omsag-h26__scene::after { opacity: var(--dof-dim, 1); }
.is-v6.is-dark .omsag-h26__dof::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 32, 40, .72) 0%, rgba(28, 32, 40, .5) 28%, rgba(28, 32, 40, .12) 50%, rgba(28, 32, 40, 0) 64%), linear-gradient(0deg, rgba(28, 32, 40, .45) 0%, rgba(28, 32, 40, 0) 28%); }
.is-v6.is-dark .omsag-h26__scene::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(35, 39, 48, .35) 0%, rgba(35, 39, 48, 0) 26%); }
.is-v6.is-dark .omsag-h26__amb { opacity: .2; }
.is-v6.is-dark .omsag-h26__lead { color: rgba(255, 255, 255, .78); }
.is-v6.is-dark .omsag-h26__h { text-shadow: 0 2px 30px rgba(20, 24, 30, .35); }
@media (max-width: 900px) { .is-v6.is-dark .omsag-h26__dof { display: none; } }
.is-v6.is-dark .omsag-h26__grid { -webkit-mask-image: radial-gradient(ellipse at 22% 40%, #000, transparent 68%); mask-image: radial-gradient(ellipse at 22% 40%, #000, transparent 68%); }
.is-v6.is-dark .omsag-h26__amb.is-a { left: 22%; }
.is-v6.is-dark .omsag-h26__factcard { background: rgba(35, 39, 48, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -24px rgba(0, 0, 0, .6); }
.is-v6.is-dark .omsag-h26__facts li:nth-child(2n) { border-left-color: rgba(255, 255, 255, .1); }
.is-v6.is-dark .omsag-h26__facts li:nth-child(n + 3) { border-top-color: rgba(255, 255, 255, .1); }

/* Kreativ A und B: Video statt WebGL. Wachsen einmal, dann Schleife, Übergang als weiche Überblendung ab dem gleichen Bild. */
.omsag-h26__film video { opacity: 0; transition: opacity .9s ease; }
.omsag-h26__film.is-playing .is-grow { opacity: 1; }
.omsag-h26__film .is-loop { transition: opacity var(--xf, 1.4s) cubic-bezier(.45, 0, .55, 1); }
.omsag-h26__film.is-looping .is-loop { opacity: 1; }
.omsag-h26__film .is-green { opacity: 0; transition: opacity 1.2s ease; }
.omsag-h26__film.is-still .is-green { opacity: 1; }
/* Maus als warmes Sonnenlicht über dem Video */
.omsag-h26__sun { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; mix-blend-mode: soft-light; background: radial-gradient(circle 260px at var(--mx, 70%) var(--my, 50%), rgba(255, 236, 190, .9), rgba(255, 236, 190, 0) 70%); }
.omsag-h26__film.is-sun .omsag-h26__sun { opacity: 1; }
.omsag-h26__glow { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .4s ease; }
.omsag-h26__film.is-glow .omsag-h26__glow { opacity: 1; }
.omsag-h26__film:has(.omsag-h26__glow) { cursor: crosshair; }

/* Dunkel, Unschärfe 0: Bild läuft scharf über die ganze Breite, nur ein dunkler Verlauf liegt für die Lesbarkeit darüber */
@media (min-width: 901px) {
	.is-dark .omsag-h26__dof.is-sharp img { display: none; }
	.is-dark .omsag-h26__stage.is-sharp .omsag-h26__scene { left: 0; -webkit-mask-image: none; mask-image: none; }
	.is-dark .omsag-h26__stage.is-sharp .omsag-h26__scene::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(28, 32, 40, .8) 0%, rgba(28, 32, 40, .62) 30%, rgba(28, 32, 40, .18) 50%, rgba(28, 32, 40, 0) 62%), linear-gradient(0deg, rgba(28, 32, 40, .45) 0%, rgba(28, 32, 40, 0) 28%); }
}

/* Im Editor keine Animation: gleich das grüne Bild */
.editor-styles-wrapper .omsag-h26__film .is-green, .editor-styles-wrapper .omsag-h26__scene .is-green, .editor-styles-wrapper .omsag-h26__facts li, .editor-styles-wrapper .omsag-h26__factcard, .editor-styles-wrapper .omsag-h26__refs { opacity: 1; translate: none; filter: none; transition: none; }

/* ── Ein Auftritt beim Laden ─────────────────────────────────────────── */
@keyframes omsagH26In { from { opacity: 0; transform: translateY(14px); } }
@keyframes omsagH26Rise { from { transform: translateY(105%); } }
@keyframes omsagH26Fade { from { opacity: 0; } }

.omsag-h26 [data-h26-in] { animation: omsagH26In .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
.omsag-h26 .omsag-h26__ln[data-h26-in] { animation: none; }
.omsag-h26 .omsag-h26__ln > span { animation: omsagH26Rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }

.editor-styles-wrapper .omsag-h26 *, .editor-styles-wrapper .omsag-h26 *::before, .editor-styles-wrapper .omsag-h26 *::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.omsag-h26 *, .omsag-h26 *::before, .omsag-h26 *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
	.omsag-h26__pl-in { grid-template-columns: 1fr; gap: 14px; }
	.omsag-h26__pl-h { max-width: none; }
	.omsag-h26__pl-list li:first-child { padding-left: 0; border-left: 0; }
	.omsag-h26__bg { --fade: 220px; --off: 120px; left: calc(50% - var(--fade) * .45); }
	.is-v5 .omsag-h26__bg img { object-position: var(--pos, 56% 40%); }
}

@media (max-width: 900px) {
	/* Handy und Tablet hochkant: Bild oben, darunter der Inhalt, dann eine schmale Referenzleiste. */
	.omsag-h26__stage, .is-v5 .omsag-h26__stage, .is-v6 .omsag-h26__stage { grid-template-columns: 1fr; min-height: 0; }
	.omsag-h26__copy, .is-v5 .omsag-h26__copy, .is-v6 .omsag-h26__copy { order: 1; padding: 28px var(--gut) 28px; }
	.omsag-h26__h { font-size: clamp(34px, 8.6vw, 52px); }
	.omsag-h26__badges-w { margin-top: 26px; }

	/* v5: Bildbereich auflösen, damit Foto nach oben und Referenz nach unten kann */
	.is-v5 .omsag-h26__media { display: contents; }

	/* v5: Foto oben, weich in den Hintergrund */
	.is-v5 .omsag-h26__stage { min-height: 0; }
	.is-v5 .omsag-h26__bg { position: relative; inset: auto; order: 0; grid-row: 1; grid-column: 1; height: clamp(340px, 96vw, 620px); -webkit-mask-image: none; mask-image: none; }
	.is-v5 .omsag-h26__bg img { object-position: var(--pos-m, 50% 30%); }
	.is-v5 .omsag-h26__veil { display: block; position: relative; order: 0; grid-row: 1; grid-column: 1; background: linear-gradient(0deg, #f6f7f7 0%, rgba(246, 247, 247, 0) 32%); }
	.is-v5 .omsag-h26__copy { grid-row: 2; padding-top: 4px; }

	/* Kreativ A und B: Szene oben, Inhalt, dann die Referenz-Karte */
	.is-v6 .omsag-h26__stage { min-height: 0; }
	/* Szene hoch wie bisher (zeigt die volle Bildhöhe), unten aber nur ein schmaler Auslauf statt 30 %,
	   damit Ufer, Reh, Reiher und Blumen, wo das Wachsen passiert, frei bleiben. */
	.is-v6 .omsag-h26__scene { position: relative; inset: auto; order: 0; height: clamp(360px, 104vw, 640px); -webkit-mask-image: linear-gradient(180deg, #000 93%, transparent); mask-image: linear-gradient(180deg, #000 93%, transparent); }
	.is-v6.is-dark .omsag-h26__scene::after { display: none; }
	.is-v6 .omsag-h26__copy { padding-top: 18px; }
	.is-v6 .omsag-h26__media { order: 2; padding: 0 var(--gut) 32px; }
	.omsag-h26__factcard { position: relative; inset: auto; width: auto; max-width: 460px; }
	.omsag-h26__factcard.is-refs { width: auto; padding: 16px 18px; }
	/* Szene auf dem Handy höher und weiter rechts, damit Reh, Reiher, Skyline und Wasserfall groß im Bild sind */
	.is-v6 .omsag-h26__scene .omsag-h26__scene-img { object-position: var(--pos-m, 66% 50%); }
	.omsag-h26 .omsag-h26__stage .omsag-h26__refs.is-float { order: 2; position: relative; inset: auto; width: auto; max-width: none; margin: 0 var(--gut) 32px; padding: 16px 18px; }
	.omsag-h26__ref-v { font-size: 28px; }
	.omsag-h26__ref-m { font-size: 12px; }
	.omsag-h26__ref-kpis li { padding: 0 10px; }
}
@media (max-width: 600px) {
	/* schmal: nur zwei Kennzahlen */
	.omsag-h26__ref-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.omsag-h26__ref-kpis li:nth-child(n + 3) { display: none; }
	.omsag-h26__ref-logo { height: 38px; }
	.omsag-h26__ref-logo img { height: 34px; }

	.omsag-h26__pl-in { padding: 22px var(--gut); }
	.omsag-h26__pl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
	.omsag-h26__pl-list li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ── Handy ───────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.omsag-h26__copy, .is-v5 .omsag-h26__copy { padding-top: 24px; }
	.is-v5 .omsag-h26__copy { padding-top: 0; }
	.omsag-h26__eyebrow { font-size: 12px; }
	.omsag-h26__ln > span { white-space: normal; }
	.omsag-h26__ctas { width: 100%; gap: 10px; }
	.omsag-h26__btn { flex: 1 1 auto; padding: 14px 18px; }
	.omsag-h26__pl-t { font-size: 15px; }
}