/*
 * OUTTRA – Ergaenzungen zu theme.json.
 *
 * Regel fuer dieses Theme: Was theme.json ausdruecken kann, steht dort.
 * Hier steht nur, was es nicht kann – Raster, Block-Stile, die Hero-Varianten,
 * die Netzgrafik und ein paar Eigenheiten der deutschen Sprache.
 *
 * Alle Farben und Abstaende kommen als Variablen aus theme.json. In dieser
 * Datei steht bewusst kein einziger Hex-Wert, damit ein Farbwechsel spaeter
 * an genau einer Stelle passiert.
 *
 * Vorlage: Claude Design, "outtra Startseite v3 - Seite", Stand 16.09.2026.
 */

/* --------------------------------------------------------------------------
   0. Kurznamen fuer die haeufigsten Werte
   -------------------------------------------------------------------------- */

:root {
	--o-orange: var(--wp--preset--color--accent);
	--o-orange-dunkel: var(--wp--preset--color--accent-dark);
	--o-orange-hell: var(--wp--preset--color--accent-light);
	--o-text: var(--wp--preset--color--contrast);
	--o-fliesstext: var(--wp--preset--color--body);
	--o-leise: var(--wp--preset--color--muted);
	--o-weiss: var(--wp--preset--color--base);
	--o-grau: var(--wp--preset--color--surface);
	--o-linie: var(--wp--preset--color--border);
	--o-rahmen: var(--wp--preset--color--border-strong);
	--o-rand: var(--wp--custom--seitenrand);
	--o-kurve: var(--wp--custom--bewegung--kurve);
	--o-mono: var(--wp--preset--font-family--mono);
	--o-gruen: #178A5B; /* Plattform-Gruen (#35cb8a), fuer Text abgedunkelt */
	--o-inhalt: var(--wp--style--global--wide-size, 1280px);
}

/* --------------------------------------------------------------------------
   1. Grundlagen
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Deutsche Komposita ("Produktverfuegbarkeiten", "Haendlerverzeichnis")
 * sprengen sonst enge Spalten und grosse Headlines.
 */
h1, h2, h3,
.wp-block-heading {
	overflow-wrap: break-word;
	hyphens: manual;
	text-wrap: pretty;
}

/* Die grosse Headline nie trennen: "Kun-den" liest sich schlecht. */
h1,
h1.wp-block-heading {
	hyphens: manual;
}

h2.wp-block-heading { max-width: 30ch; }
h3.wp-block-heading { max-width: 24ch; }

/* Sprunglink: unsichtbar, bis er per Tab den Fokus bekommt. */
.outtra-sprung {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: var(--wp--custom--radius--klein);
	background: var(--o-text);
	color: var(--o-weiss);
	font-weight: 600;
	text-decoration: none;
}

.outtra-sprung:focus-visible {
	top: 16px;
}

/* Ankerziele rutschen nicht unter den Seitenkopf. */
[id] {
	scroll-margin-top: 96px;
}

/* Ueberschriften ohne Witwen. */
h1, h2, h3 {
	text-wrap: balance;
}

/* Kennzahlen mit gleich breiten Ziffern, damit Zaehler nicht springen. */
.outtra-zahl {
	font-variant-numeric: tabular-nums;
}

/* Kein Doppeltipp-Zoom, kein grauer Tipp-Blitz. */
a, button, [role="button"], input, label, summary {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Videoschalter: kleiner Knopf, der Schleifen-Videos anhaelt. */
.outtra-videoschalter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--voll);
	background: var(--o-weiss);
	font: inherit;
	font-family: var(--o-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--laufweite--label);
	text-transform: uppercase;
	color: var(--o-leise);
	cursor: pointer;
	transition: color 0.18s var(--o-kurve), border-color 0.18s var(--o-kurve);
}

.outtra-videoschalter__zeile {
	margin: 0 0 clamp(16px, 1.6vw, 24px);
}

.outtra-videoschalter:hover {
	color: var(--o-text);
	border-color: var(--o-linie-stark, var(--wp--preset--color--border-strong));
}

.outtra-videoschalter__pause {
	display: inline-block;
	width: 8px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.outtra-videoschalter[aria-pressed="true"] .outtra-videoschalter__pause {
	width: 0;
	height: 0;
	border-left: 9px solid currentColor;
	border-right: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.outtra-videoschalter.is-klein {
	margin: 0 0 0 auto;
	padding: 4px 10px;
}

.outtra-browserrahmen__zeile {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Tastaturbedienung muss immer sichtbar bleiben. */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--o-orange);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * Vollflaechige Abschnitte stossen direkt aneinander. Der Standardabstand
 * zwischen Bloecken wuerde sonst weisse Streifen zwischen die Flaechen legen.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull:last-child {
	margin-block-end: 0;
}

/* Abschnitte: Hintergrund ueber die volle Breite, Inhalt auf 1280 px. */
.outtra-abschnitt {
	padding-block: var(--wp--preset--spacing--70);
}

.outtra-abschnitt.is-kompakt {
	padding-block: var(--wp--preset--spacing--80);
}

.outtra-abschnitt.has-surface-background-color,
.outtra-abschnitt + .outtra-abschnitt.has-base-background-color {
	border-top: 1px solid var(--o-linie);
}

.outtra-abschnitt.has-surface-background-color {
	border-bottom: 1px solid var(--o-linie);
}

/*
 * Im Abschnitt zentriert WordPress jedes Kind mit eigener Hoechstbreite.
 * Ueberschriften und Einleitung sollen aber links auf der Rasterkante stehen.
 */
.outtra-abschnitt > .wp-block-heading,
.outtra-abschnitt > .outtra-einleitung {
	margin-left: max(0px, calc((100% - var(--o-inhalt)) / 2)) !important;
	margin-right: auto !important;
}

.outtra-abschnitt > .wp-block-heading {
	margin-block: 0 clamp(16px, 1.5vw, 24px);
}

.outtra-abschnitt > .outtra-einleitung {
	margin-block: 0;
}

/* Zurueckgenommener Fliesstext unter Abschnittsueberschriften. */
.outtra-einleitung {
	max-width: min(100%, 660px);
	color: var(--o-leise);
}

@keyframes outtra-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   2. Buttons – primaer, sekundaer, klein
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	white-space: nowrap;
	transition: background-color 0.18s var(--o-kurve), color 0.18s var(--o-kurve), box-shadow 0.18s var(--o-kurve);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.wp-block-button.is-style-sekundaer .wp-block-button__link {
	background-color: transparent;
	color: var(--o-text);
	box-shadow: inset 0 0 0 1px var(--o-rahmen);
}

.wp-block-button.is-style-sekundaer .wp-block-button__link:hover {
	background-color: var(--o-orange);
	color: var(--wp--preset--color--accent-contrast);
	box-shadow: inset 0 0 0 1px var(--o-orange);
}

.wp-block-button.is-style-klein .wp-block-button__link {
	padding: 11px 19px;
	font-size: clamp(12.5px, 0.95vw, 14px);
}

/*
 * Auf dunklen Flaechen dreht sich der sekundaere Button um. Erkannt wird das
 * an der Hintergrundklasse des umgebenden Abschnitts, nicht an einer eigenen
 * Klasse – so muss beim Pflegen niemand daran denken.
 */
.has-surface-dark-background-color .wp-block-button.is-style-sekundaer .wp-block-button__link,
.has-contrast-background-color .wp-block-button.is-style-sekundaer .wp-block-button__link {
	color: var(--wp--preset--color--inverse);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-dark);
}

/* --------------------------------------------------------------------------
   3. Mono-Label, Abschnittskopf, Pille, Weiterlesen-Link
   -------------------------------------------------------------------------- */

p.is-style-mono-label,
p.is-style-mono-label-orange,
.is-style-abschnittskopf p {
	margin-block: 0;
	font-family: var(--o-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--laufweite--label);
	text-transform: uppercase;
	color: var(--o-leise);
}

p.is-style-mono-label-orange,
.is-style-abschnittskopf p,
.outtra-loesung p.is-style-mono-label,
.outtra-weg p.is-style-mono-label,
.outtra-hero__kopfzeile p.is-style-mono-label {
	color: var(--o-orange);
}

.has-surface-dark-background-color p.is-style-mono-label,
.has-contrast-background-color p.is-style-mono-label {
	color: var(--wp--preset--color--muted-inverse);
}

/* "01  EIN STARKES NETZ  ————————" */
.wp-block-group.is-style-abschnittskopf {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: clamp(20px, 2vw, 34px);
}

.is-style-abschnittskopf p:first-child {
	color: var(--o-orange);
}

.wp-block-group.is-style-abschnittskopf::after {
	content: "";
	flex: 1;
	height: 1px;
	align-self: center;
	background: var(--o-linie);
}

p.is-style-pille {
	display: inline-block;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--voll);
	font-family: var(--o-mono);
	font-size: clamp(10.5px, 0.8vw, 12px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

p.is-style-pille.is-orange {
	padding: 5px 11px;
	color: var(--o-orange);
	border-color: var(--o-orange-hell);
}

p.is-style-pfeil-link {
	margin-top: clamp(20px, 1.8vw, 30px);
	font-weight: 600;
	font-size: clamp(14px, 1.05vw, 16px);
}

p.is-style-pfeil-link a {
	color: var(--o-orange);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-decoration-color: var(--o-orange-hell);
	text-underline-offset: 0.28em;
	transition: color 0.18s var(--o-kurve), text-decoration-color 0.18s var(--o-kurve);
}

p.is-style-pfeil-link a:hover,
p.is-style-pfeil-link a:focus-visible {
	color: var(--o-orange-dunkel);
	text-decoration-color: currentColor;
}

/* Der Pfeil ist inline-block: keine Unterstreichung, aber Bewegung beim Zeigen. */
p.is-style-pfeil-link .outtra-pfeil {
	display: inline-block;
	margin-left: 0.15em;
	transition: transform 0.25s var(--o-kurve);
}

p.is-style-pfeil-link a:hover .outtra-pfeil,
p.is-style-pfeil-link a:focus-visible .outtra-pfeil {
	transform: translateX(0.3em);
}

/* --------------------------------------------------------------------------
   4. Karte, Hinweis, Kennzahl, Platzhalter, Browserrahmen
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-karte {
	padding: clamp(20px, 1.9vw, 30px);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background-color: var(--o-weiss);
}

.has-surface-dark-background-color .wp-block-group.is-style-karte,
.has-contrast-background-color .wp-block-group.is-style-karte {
	background-color: transparent;
	border-color: var(--wp--preset--color--border-dark);
}

/* Hinweiskasten: helle Flaeche mit feiner Linie, darueber ein kleines Label. (Keine orange Klammer – Vorgabe Kathrin 26.10.) */
.wp-block-group.is-style-hinweis {
	padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-grau);
}
.has-surface-background-color .wp-block-group.is-style-hinweis { background: var(--o-weiss); }

.wp-block-group.is-style-hinweis > * {
	margin-block: 0;
}

.wp-block-group.is-style-hinweis > * + * {
	margin-top: 8px;
}

.wp-block-group.is-style-hinweis p:not([class*="is-style"]) {
	max-width: 46ch;
	font-size: clamp(13.5px, 1vw, 15.5px);
	line-height: 1.6;
	color: var(--o-fliesstext);
}

/* Kennzahl: grosse Zahl, darunter eine kurze Erklaerung. */
.outtra-zahl {
	margin: 0;
	font-size: var(--wp--preset--font-size--zahl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
}

.outtra-zahl.is-orange {
	color: var(--o-orange);
}

.outtra-zahl + p:not([class*="is-style"]) {
	margin-top: 10px;
	max-width: 24ch;
	hyphens: auto;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--o-leise);
}

.wp-block-group.is-style-zahl {
	padding-top: 16px;
	border-top: 2px solid var(--o-orange);
}

/*
 * Bildplatzhalter: sichtbar als Platzhalter, damit niemand ihn fuer ein
 * fertiges Motiv haelt. Das Label sagt, was hier hinkommt.
 */
.wp-block-group.is-style-platzhalter {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	margin: 0;
	padding: 20px;
	background:
		repeating-linear-gradient(135deg, transparent 0 14px, var(--o-linie) 14px 15px),
		var(--o-grau);
	text-align: center;
}

.wp-block-group.is-style-platzhalter p {
	margin: 0;
	padding: 6px 10px;
	background: var(--o-weiss);
	border-radius: 4px;
	font-family: var(--o-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--o-leise);
}

/* Screenshot im Browserrahmen: Leiste mit zwei Punkten und der Adresse. */
.wp-block-group.is-style-browserrahmen {
	overflow: hidden;
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-weiss);
	box-shadow: var(--wp--preset--shadow--karte);
}

.wp-block-group.is-style-browserrahmen > * {
	margin: 0 !important;
}

.wp-block-group.is-style-browserrahmen > p:first-child {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--o-linie);
	background: var(--o-grau);
	font-family: var(--o-mono);
	font-size: clamp(10px, 0.78vw, 11.5px);
	color: var(--o-leise);
}

.wp-block-group.is-style-browserrahmen > p:first-child::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 36px;
	border-radius: 50%;
	background: #FF5F57;
	box-shadow: 14px 0 0 #FEBC2E, 28px 0 0 #28C840;
	margin-right: 36px;
}

/* Browserrahmen als Link zur Referenz: Hinweis rechts in der Kopfzeile, Pfeil rueckt beim Hover nach. */
a.outtra-browserrahmen-link { display: block; color: inherit; text-decoration: none; }
a.outtra-browserrahmen-link:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 4px; border-radius: var(--wp--custom--radius--normal); }
.outtra-browserrahmen__hinweis { margin-left: auto; color: var(--o-orange); font-weight: 600; white-space: nowrap; }
.outtra-browserrahmen__hinweis .outtra-pfeil { display: inline-block; transition: transform 0.25s var(--o-kurve); }
a.outtra-browserrahmen-link:hover .outtra-browserrahmen__hinweis .outtra-pfeil { transform: translateX(3px); }

.wp-block-group.is-style-browserrahmen img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
}

.wp-block-group.is-style-browserrahmen .is-style-platzhalter {
	border-radius: 0;
}

/* Logo-Kachel */
.wp-block-image.is-style-logo-kachel {
	display: grid;
	place-items: center;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--o-linie);
	border-radius: 10px;
	background: var(--o-weiss);
}

.wp-block-image.is-style-logo-kachel img {
	width: 100%;
	height: 40px;
	object-fit: contain;
}

/* Video-Standbild: der Player laedt erst nach Klick (kommt mit den Videos). */
.wp-block-image.is-style-video-standbild {
	position: relative;
	margin: 0;
}

.wp-block-image.is-style-video-standbild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.wp-block-image.is-style-video-standbild::before,
.wp-block-image.is-style-video-standbild::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	pointer-events: none;
}

.wp-block-image.is-style-video-standbild::before {
	width: 62px;
	height: 62px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--o-orange);
}

/* Das Dreieck, leicht nach rechts versetzt, damit es optisch mittig sitzt. */
.wp-block-image.is-style-video-standbild::after {
	transform: translate(-35%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--wp--preset--color--accent-contrast);
}

/* --------------------------------------------------------------------------
   5. Kopfbereich
   -------------------------------------------------------------------------- */

/* Klebt am oberen Rand. Sticky sitzt auf dem Template-Part, nicht auf der
   Gruppe darin – sonst hat die Gruppe keinen Platz zum Mitwandern. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.outtra-kopf {
	background-color: var(--o-weiss);
	border-bottom: 1px solid var(--o-linie);
}

/* Handy: Logo, Sprache, Menue. Login und Startknopf stehen im Menue bzw. im Hero. */
@media (max-width: 599px) {
	.outtra-kopf__login,
	.outtra-kopf .wp-block-buttons {
		display: none;
	}
}

.outtra-kopf__login {
	margin: 0;
	font-size: clamp(12.5px, 0.95vw, 14px);
	font-weight: 500;
}

.outtra-kopf__login a {
	color: var(--o-text);
}

.outtra-kopf .wp-block-site-logo img {
	width: clamp(92px, 7vw, 124px);
	height: auto;
}

.outtra-kopf .wp-block-navigation {
	font-size: clamp(13px, 1vw, 14.5px);
	font-weight: 500;
}

.outtra-kopf .wp-block-navigation a:hover {
	color: var(--o-orange);
}

.wp-block-navigation .wp-block-navigation-submenu__toggle {
	font-weight: inherit;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	border-radius: var(--wp--custom--radius--normal);
	border-color: var(--o-linie);
	box-shadow: var(--wp--preset--shadow--karte);
	padding: 0.4rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.7rem;
	border-radius: 4px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--o-grau);
}

/* --------------------------------------------------------------------------
   6. Hero – gemeinsame Regeln
   -------------------------------------------------------------------------- */

.outtra-hero {
	border-bottom: 1px solid var(--o-linie);
	background: var(--o-weiss);
}

.outtra-hero .wp-block-heading {
	max-width: none;
	margin: 0;
}

.outtra-hero .outtra-hero__absatz {
	color: var(--o-fliesstext);
	line-height: 1.65;
}

.outtra-hero .wp-block-buttons {
	flex-wrap: wrap;
}

/* Textmarker: aufgehelltes Orange als Balken auf halber Schrifthoehe. */
.wp-block-heading.is-style-textmarker {
	display: inline;
	padding: 0 0.06em;
	background: linear-gradient(var(--o-orange-hell), var(--o-orange-hell)) 0 0.78em / 100% 0.34em no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Unterzeile im Hero tippt sich ein; der Strich blinkt nur waehrend des Tippens. */
.outtra-tipp {
	min-height: 1.3em;
}

.outtra-tipp.is-tippt::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.95em;
	margin-left: 2px;
	vertical-align: -0.12em;
	background: var(--o-orange);
	animation: outtra-blink 0.9s steps(2, start) infinite;
}

@keyframes outtra-blink {
	to { visibility: hidden; }
}

/* Ladeauftritt: Linie, Headline, Text – gestaffelt, ohne JavaScript. */
.outtra-hero__kopfzeile { animation: outtra-rise 0.6s var(--o-kurve) both; }
.outtra-hero__titel { animation: outtra-rise 0.7s 60ms var(--o-kurve) both; }
.outtra-hero__text { animation: outtra-rise 0.7s 140ms var(--o-kurve) both; }
.outtra-hero__medien { animation: outtra-rise 0.7s 150ms var(--o-kurve) backwards; /* backwards: sonst bleibt die Grafik als Ebene gerastert, Logos fransig */ }

/* --------------------------------------------------------------------------
   7. Hero · Raster – durchgehend weiss, sichtbares Zwoelfspaltenraster
   -------------------------------------------------------------------------- */

.outtra-hero--raster {
	display: grid;
	align-content: center;
	min-height: clamp(540px, 66vh, 760px);
	padding-block: clamp(36px, 4.4vw, 72px);
}

.outtra-hero__raster {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 32px);
	row-gap: clamp(20px, 2.4vw, 40px);
	width: 100%;
}

.outtra-hero__raster > * {
	margin: 0 !important;
	min-width: 0;
}

.outtra-hero__kopfzeile {
	grid-column: 1 / -1;
	align-items: baseline;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--o-orange);
}

.outtra-hero--aussage .outtra-hero__kopfzeile > * {
	margin: 0 !important;
}

.outtra-hero--raster .outtra-hero__titel {
	grid-column: 1 / 7;
	grid-row: 2;
	align-self: end;
	text-wrap: balance;
}

.outtra-hero--raster .outtra-hero__text {
	grid-column: 1 / 7;
	grid-row: 3;
}

.outtra-hero--raster .outtra-hero__text > * {
	margin-block: 0;
}

.outtra-hero--raster .outtra-hero__unterzeile {
	max-width: 30ch;
	margin-bottom: clamp(16px, 1.6vw, 26px);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.outtra-hero--raster .outtra-hero__absatz {
	max-width: 48ch;
	margin-bottom: clamp(22px, 2.2vw, 34px);
	font-size: clamp(14.5px, 1.05vw, 16.5px);
}

.outtra-hero--raster .outtra-hero__medien {
	grid-column: 7 / -1;
	grid-row: 2 / 4;
	align-self: center;
	padding-left: clamp(20px, 2.6vw, 44px);
	border-left: 1px solid var(--o-linie);
}

.outtra-hero__foto {
	margin: 0;
}

.outtra-hero__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Querformat-Foto neben einer kurzen Headline: nicht hoeher als der Text. */
.outtra-hero--raster .outtra-hero__foto img {
	aspect-ratio: 5 / 4;
	max-height: 62vh;
}

@media (max-width: 899px) {
	.outtra-hero--raster {
		min-height: 0;
	}

	.outtra-hero--raster .outtra-hero__titel,
	.outtra-hero--raster .outtra-hero__text,
	.outtra-hero--raster .outtra-hero__medien {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.outtra-hero--raster .outtra-hero__medien {
		padding-left: 0;
		padding-top: clamp(20px, 4vw, 32px);
		border-left: 0;
		border-top: 1px solid var(--o-linie);
	}
}

/* --------------------------------------------------------------------------
   8b. Hero · Aussage – zentriert, ohne Bild, unten das Bergkamm-Band
   -------------------------------------------------------------------------- */

.outtra-hero.outtra-hero--aussage {
	position: relative;
	padding-top: clamp(28px, 3vw, 48px);
	padding-bottom: clamp(36px, 3.6vw, 56px);
}

/* Kopfzeile wie im Raster-Hero: Label links, Label rechts, orange Linie. */
.outtra-hero--aussage .outtra-hero__kopfzeile {
	align-items: baseline;
	margin-bottom: clamp(32px, 3.4vw, 56px) !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--o-orange);
}

/* Kinetische Fassung: fast bildschirmhoch, Linien im Hintergrund, Inhalt mittig. */
.outtra-hero--kinetisch {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(520px, 74svh, 780px);
	padding-top: clamp(24px, 2.6vw, 40px) !important;
	padding-bottom: clamp(24px, 2.6vw, 40px) !important;
	overflow: hidden;
}

.outtra-hero__linien {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
	pointer-events: none;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 30%, #000 70%, rgba(0, 0, 0, 0.35));
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 30%, #000 70%, rgba(0, 0, 0, 0.35));
}

.outtra-hero--kinetisch .outtra-hero__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
}

.outtra-hero--kinetisch .outtra-hero__text > * {
	width: 100%;
	max-width: none;
}

.outtra-hero--kinetisch .outtra-hero__mitte {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 0;
}

.outtra-hero--kinetisch .outtra-hero__eyebrow {
	margin-bottom: clamp(16px, 1.8vw, 26px) !important;
}

/* Text bleibt lesbar: leiser weisser Schein hinter Headline und Absatz. */
.outtra-hero--kinetisch h1,
.outtra-hero--kinetisch .outtra-hero__absatz {
	text-shadow: 0 0 18px #fff, 0 0 36px #fff;
}

/* Im kinetischen Hero: der zweite Knopf deckt die Linien ab. */
.outtra-hero--kinetisch .wp-block-button.is-style-sekundaer .wp-block-button__link {
	background-color: var(--o-weiss);
}

.outtra-hero--kinetisch .wp-block-button.is-style-sekundaer .wp-block-button__link:hover {
	background-color: var(--o-orange);
}

/* Topografische Fassung: Canvas ohne Ausblendmaske, Abschnitte tauschen das SVG gegen die lebende Flaeche. */
.outtra-hero--topo .outtra-hero__linien {
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), #000 25%, #000 75%, rgba(0, 0, 0, 0.6));
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), #000 25%, #000 75%, rgba(0, 0, 0, 0.6));
}

.outtra-hoehenlinien.has-topo {
	background-image: none;
}

.outtra-hoehenlinien.has-topo::before {
	display: none;
}

.outtra-hoehenlinien > .outtra-topo-flaeche {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
	opacity: 0.7;
	pointer-events: none;
}

/* Berglandschaft: three.js-Flaeche als Hintergrund, oben ins Papier ausgeblendet. */
.outtra-hero__berg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
	pointer-events: none;
}

.outtra-hero__berg canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.outtra-hero__berg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--o-weiss) 0%, rgba(255, 255, 255, 0.85) 38%, rgba(255, 255, 255, 0.35) 62%, rgba(255, 255, 255, 0.2) 86%, var(--o-weiss) 100%);
}

.outtra-hero__berg canvas {
	opacity: 0.85;
}

/* Unterseiten-Hero: das Bergmotiv der Startseite als leise, graue Variante im Hintergrund. */
.outtra-hero--seite:not(.outtra-hero--kontakt) { position: relative; overflow: hidden; }
.outtra-hero--seite .outtra-hero__raster { position: relative; z-index: 1; }
.outtra-hero__berg--leise canvas { opacity: 0.5; }
.outtra-hero__berg--leise::after { background: linear-gradient(180deg, var(--o-weiss) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.35) 85%, var(--o-weiss) 100%); }
@media (min-width: 1600px) { .outtra-hero--raster.outtra-hero--seite { min-height: clamp(480px, 54vh, 640px); } }
@media (max-width: 899px) { .outtra-hero__berg--leise { display: none; } }

.outtra-hero--berg h1,
.outtra-hero--berg .outtra-hero__absatz {
	text-shadow: none;
}

.outtra-zahlenzeile {
	border-top: 1px solid var(--o-linie);
	border-bottom: 1px solid var(--o-linie);
	background: var(--o-weiss);
}

.outtra-zahlenzeile .outtra-hero__zahlen.is-eigene-zeile {
	margin-top: 0 !important;
	padding-top: 0;
	border-top: 0;
	animation: none;
}

/* --------------------------------------------------------------------------
   7b. Hero · Foto vollflaechig – dunkler Verlauf, weisser Text, Glas-Knopf
   -------------------------------------------------------------------------- */

.outtra-hero.outtra-hero--foto-voll {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(540px, 78svh, 820px);
	padding-top: clamp(64px, 8vw, 120px) !important;
	padding-bottom: clamp(48px, 5vw, 80px) !important;
	overflow: hidden;
	border-bottom: 0;
	background: var(--o-text);
	color: var(--o-weiss);
}

.outtra-hero__hintergrund {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.outtra-hero__hintergrund img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--o-lage, center 40%);
	animation: outtra-zoom 14s var(--o-kurve) both;
}

/* Verlauf: unten dunkel fuer den Text, oben leicht, damit das Motiv wirkt. */
.outtra-hero__hintergrund::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(21, 23, 28, 0.35) 0%, rgba(21, 23, 28, 0.1) 35%, rgba(21, 23, 28, 0.72) 100%),
		linear-gradient(90deg, rgba(21, 23, 28, 0.55) 0%, rgba(21, 23, 28, 0) 60%);
}

/* Warme, dunkle Motive brauchen weniger Verlauf; helle Motive mehr Halt unten. */
.outtra-hero--foto-voll.is-warm .outtra-hero__hintergrund::after {
	background:
		linear-gradient(180deg, rgba(21, 23, 28, 0.15) 0%, rgba(21, 23, 28, 0) 40%, rgba(21, 23, 28, 0.55) 100%),
		linear-gradient(90deg, rgba(21, 23, 28, 0.45) 0%, rgba(21, 23, 28, 0) 55%);
}

.outtra-hero--foto-voll.is-hell .outtra-hero__hintergrund::after {
	background:
		linear-gradient(180deg, rgba(21, 23, 28, 0.2) 0%, rgba(21, 23, 28, 0.15) 40%, rgba(21, 23, 28, 0.7) 100%),
		linear-gradient(90deg, rgba(21, 23, 28, 0.5) 0%, rgba(21, 23, 28, 0) 60%);
}

@keyframes outtra-zoom {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

.outtra-hero--foto-voll .outtra-hero__text {
	position: relative;
	z-index: 1;
	box-sizing: content-box;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, 20px);
}

.outtra-hero--foto-voll .outtra-hero__text > * {
	max-width: 62ch;
}

.outtra-hero--foto-voll .outtra-hero__eyebrow {
	max-width: none;
	white-space: normal;
}

.outtra-hero--foto-voll .outtra-hero__text > * {
	margin-block: 0;
}

.outtra-hero--foto-voll .outtra-hero__eyebrow {
	margin-bottom: clamp(16px, 1.8vw, 26px) !important;
	animation: outtra-rise 0.6s var(--o-kurve) both;
}

.outtra-hero--foto-voll h1.wp-block-heading {
	max-width: 21ch;
	margin-bottom: clamp(18px, 1.8vw, 28px);
	font-size: clamp(34px, 4.6vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.038em;
	color: var(--o-weiss);
	text-wrap: balance;
	animation: outtra-rise 0.7s 80ms var(--o-kurve) both;
}

.outtra-hero--foto-voll .outtra-hero__absatz {
	max-width: 52ch;
	margin-bottom: clamp(24px, 2.4vw, 36px) !important;
	font-size: clamp(15px, 1.1vw, 17.5px);
	color: rgba(255, 255, 255, 0.82);
	animation: outtra-rise 0.7s 160ms var(--o-kurve) both;
}

.outtra-hero--foto-voll .wp-block-buttons {
	animation: outtra-rise 0.7s 240ms var(--o-kurve) both;
}

/* Glas-Knopf: halbtransparent mit Weichzeichner, wie in der Vorlage. */
.wp-block-button.is-style-glas .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--o-weiss);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.wp-block-button.is-style-glas .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.22);
	color: var(--o-weiss);
}

.outtra-hero__bildnachweis {
	position: absolute;
	right: clamp(16px, 2vw, 28px);
	bottom: 12px;
	z-index: 1;
	margin: 0;
	font-family: var(--o-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.outtra-hero__hintergrund img { animation: none !important; }
}

.outtra-hero--aussage .outtra-hero__text > * {
	margin-block: 0;
}

.outtra-hero--aussage p.is-style-mono-label-orange {
	margin-bottom: clamp(22px, 2.2vw, 34px);
}

.outtra-hero--aussage h1.wp-block-heading {
	max-width: none;
	margin: 0 auto clamp(18px, 1.8vw, 28px);
	font-size: clamp(32px, 4.4vw, 68px);
	line-height: 1.04;
	letter-spacing: -0.038em;
	text-wrap: balance;
}

.outtra-hero--aussage h1 .is-orange {
	color: var(--o-orange);
}

.outtra-hero--aussage .outtra-hero__absatz {
	max-width: 60ch;
	margin: 0 auto clamp(22px, 2.2vw, 32px) !important;
	font-size: clamp(15px, 1.1vw, 17.5px);
}

.outtra-hero__zahlen {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
	gap: clamp(24px, 2.4vw, 28px) clamp(16px, 1.8vw, 28px) !important;
	margin-top: clamp(28px, 2.8vw, 44px) !important;
	padding-top: clamp(20px, 2vw, 32px);
	border-top: 1px solid var(--o-linie);
	animation: outtra-rise 0.7s 220ms var(--o-kurve) both;
}

.outtra-hero__zahlen > * > * {
	margin-block: 0;
}

.outtra-hero__zahlen .outtra-zahl {
	font-size: clamp(38px, 3.6vw, 60px);
}

.outtra-hero__zahlen p.is-style-mono-label {
	margin-top: 14px;
	color: var(--o-fliesstext);
}

/* Schmuck-Netz als Schaltbild: Kacheln links (Marken) und rechts (Haendler), Leitungen zum Signet. */
.outtra-netz-schmuck {
	position: relative;
	width: 100%;
	aspect-ratio: 640 / 410;
}

/* Punktraster als eigene Ebene: reicht etwas ueber die Grafik hinaus und blendet erst dort aus,
   damit Kacheln und Beschriftung nicht im Verlauf liegen. */
.outtra-netz-schmuck::before {
	content: "";
	position: absolute;
	inset: -10% -8%;
	z-index: 0;
	background-image: radial-gradient(circle, var(--wp--preset--color--border-strong) 1px, transparent 1.2px);
	background-size: 28px 28px;
	background-position: center;
	-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 70%, transparent 100%);
	mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 70%, transparent 100%);
	pointer-events: none;
}

.outtra-netz-schmuck > * {
	position: relative;
}

.outtra-netz-schmuck__leitungen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.outtra-leitung {
	fill: none;
	stroke: var(--wp--preset--color--border-strong);
	stroke-width: 1.2;
	stroke-linecap: round;
}

/* Der Impuls: ein kurzer oranger Strich, der die Leitung entlanglaeuft. */
.outtra-leitung.is-fluss {
	stroke: var(--o-orange);
	stroke-width: 2;
	stroke-dasharray: 26 260;
	stroke-dashoffset: 286;
	animation: outtra-leitung 4.2s linear infinite;
}

@keyframes outtra-leitung {
	to { stroke-dashoffset: -260; }
}

.outtra-kachel {
	position: absolute;
	display: grid;
	place-items: center;
	width: 12.5%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: 1px solid var(--o-linie);
	border-radius: 14px;
	background: var(--o-weiss);
	box-shadow: 0 6px 20px rgba(21, 23, 28, 0.06);
	animation: outtra-kachel-auf 0.6s var(--o-kurve) both;
	animation-delay: var(--verzug, 0s);
}

.outtra-kachel img {
	display: block;
	width: 80%;
	height: 64%;
	object-fit: contain;
	filter: brightness(0);
}

/* Logos, die selbst schon schwarz-weiss sind (z. B. ORTLIEB-Badge), bleiben unveraendert. */
.outtra-kachel.is-original img {
	filter: none;
}

.outtra-kachel.is-signet {
	width: 17%;
	border-radius: 18px;
	box-shadow: 0 12px 34px rgba(21, 23, 28, 0.1);
}

.outtra-kachel.is-signet img {
	width: 62%;
	height: 62%;
	filter: none;
	mix-blend-mode: normal;
}

/* Puls um das Signet: ein Rahmen, der sich weitet und verblasst. */
.outtra-kachel__puls {
	position: absolute;
	inset: -2px;
	border: 2px solid var(--o-orange);
	border-radius: 20px;
	opacity: 0;
	animation: outtra-puls-rahmen 3s var(--o-kurve) infinite;
}

@keyframes outtra-puls-rahmen {
	0% { transform: scale(1); opacity: 0.35; }
	60% { transform: scale(1.18); opacity: 0; }
	100% { transform: scale(1.18); opacity: 0; }
}

@keyframes outtra-kachel-auf {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.outtra-netz-schmuck__spalte {
	position: absolute;
	top: 2%;
	margin: 0;
	font-family: var(--o-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--laufweite--label);
	text-transform: uppercase;
	color: var(--o-orange);
	white-space: nowrap;
}

.outtra-netz-schmuck__spalte.is-links { left: 15.6%; transform: translateX(-50%); }
.outtra-netz-schmuck__spalte.is-rechts { left: 84.4%; transform: translateX(-50%); }

/* Schmuck-Fassung im Raster: 50/50, keine Trennlinie, Eyebrow direkt ueber der H1 statt Kopfzeile. */
.outtra-hero--schmuck .outtra-hero__medien {
	grid-column: 7 / -1;
	grid-row: 1 / 3;
	padding-left: clamp(16px, 2vw, 32px);
	border-left: 0;
}

.outtra-hero--schmuck .outtra-hero__titel {
	grid-column: 1 / 7;
	grid-row: 1;
	align-self: end;
}

.outtra-hero--schmuck .outtra-hero__text {
	grid-column: 1 / 7;
	grid-row: 2;
}

.outtra-hero--schmuck .outtra-hero__eyebrow {
	margin-bottom: clamp(14px, 1.4vw, 22px) !important;
}

.outtra-hero--schmuck-berg p.outtra-hero__eyebrow {
	font-size: clamp(13px, 1vw, 15px);
	letter-spacing: 0.12em;
	white-space: nowrap;
}
@media (max-width: 899px) { .outtra-hero--schmuck-berg p.outtra-hero__eyebrow { white-space: normal; } }

.outtra-hero--schmuck .outtra-netz-schmuck__leitungen,
.outtra-hero--schmuck .outtra-netz-schmuck::before {
	position: absolute;
}

@media (max-width: 899px) {
	.outtra-hero--schmuck .outtra-hero__titel,
	.outtra-hero--schmuck .outtra-hero__text,
	.outtra-hero--schmuck .outtra-hero__medien {
		grid-column: 1 / -1;
	}
	.outtra-hero--schmuck .outtra-hero__titel { grid-row: 1; }
	.outtra-hero--schmuck .outtra-hero__text { grid-row: 2; }
	.outtra-hero--schmuck .outtra-hero__medien { grid-row: 3; padding-left: 0; margin-top: clamp(24px, 6vw, 40px); }
	.outtra-hero--schmuck .outtra-hero__eyebrow { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.outtra-leitung.is-fluss, .outtra-kachel__puls { animation: none !important; }
	.outtra-leitung.is-fluss { stroke-dasharray: none; stroke-width: 1.2; stroke: var(--o-orange); opacity: 0.5; }
	.outtra-kachel { animation: none !important; }
}

/* --------------------------------------------------------------------------
   9. Netzgrafik
   -------------------------------------------------------------------------- */

.outtra-netz {
	container-type: inline-size;
	width: 100%;
}

.outtra-netz__kopf {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 4px;
}

.outtra-netz__kopf span {
	flex: 0 1 210px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--o-orange);
	font-size: clamp(14px, 3cqi, 18px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--o-orange);
}

.outtra-netz__kopf span + span {
	text-align: right;
}

.outtra-netz__grafik {
	position: relative;
	width: 100%;
	aspect-ratio: 1.283;
}

.outtra-netz__grafik svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.outtra-netz__linien path {
	fill: none;
	stroke: var(--o-orange);
	stroke-width: 1.6;
	stroke-dasharray: 4 7;
	stroke-linecap: round;
}

.outtra-netz__punkte circle {
	fill: var(--o-orange);
}

.outtra-netz__signet {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28.81%;
	height: auto;
	transform: translate(-50%, -50%);
}

.outtra-netz__name {
	position: absolute;
	font-size: clamp(12.5px, 2.35cqi, 16px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.015em;
	white-space: nowrap;
	color: var(--o-text);
}

.outtra-netz__name.is-links { transform: translate(calc(-100% - 8px), -50%); }
.outtra-netz__name.is-rechts { transform: translate(8px, -50%); }
.outtra-netz__name.is-links-oben { transform: translate(calc(-100% - 4px), calc(-100% - 6px)); }
.outtra-netz__name.is-links-unten { transform: translate(calc(-100% - 4px), 6px); }
.outtra-netz__name.is-rechts-oben { transform: translate(4px, calc(-100% - 6px)); }
.outtra-netz__name.is-rechts-unten { transform: translate(4px, 6px); }

/* Kurzfassung fuer schmale Spalten: Marken → Signet → Haendler. */
.outtra-netz__kurz {
	display: none;
	justify-items: center;
	gap: 16px;
	text-align: center;
}

.outtra-netz__kurz img {
	width: 120px;
	height: auto;
}

.outtra-netz__kurz-titel {
	font-size: clamp(18px, 6cqi, 28px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.outtra-netz__kurz-titel small {
	display: block;
	margin-top: 8px;
	font-family: var(--o-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--o-leise);
}

.outtra-netz__kurz-linie {
	height: 40px;
	border-left: 1px dashed var(--o-orange);
}

@container (max-width: 480px) {
	.outtra-netz__kopf,
	.outtra-netz__grafik {
		display: none;
	}

	.outtra-netz__kurz {
		display: grid;
	}
}

/* --------------------------------------------------------------------------
   10. Kundenstimmen
   -------------------------------------------------------------------------- */

/* Kundenstimmen: grosses Gespraech mit laufendem Video, darunter drei Karten. */
.outtra-video {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-text);
	cursor: pointer;
}

.outtra-video > video,
.outtra-video > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.outtra-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.4s var(--o-kurve);
	pointer-events: none;
}

.outtra-video__plus {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity 0.3s var(--o-kurve), transform 0.3s var(--o-kurve);
	pointer-events: none;
}

.outtra-video:hover > video,
.outtra-video:hover > img,
.outtra-video:focus-within > video,
.outtra-video:focus-within > img {
	transform: scale(1.08);
}

.outtra-video:hover::after,
.outtra-video:focus-within::after {
	opacity: 1;
}

.outtra-video:hover .outtra-video__plus,
.outtra-video:focus-within .outtra-video__plus {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Grosses Gespraech: Video links, Text rechts. */
.outtra-stimme-gross {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 390px;
	overflow: hidden;
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-weiss);
}

.outtra-stimme-gross .outtra-video {
	border-radius: 0;
	min-height: 280px;
}

a.outtra-video {
	display: block;
}

.outtra-video:focus-visible {
	outline: 2px solid var(--o-orange);
	outline-offset: 3px;
}

.outtra-stimme-gross__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(24px, 3.2vw, 44px);
}

.outtra-stimme-gross__pille {
	align-self: flex-start;
	margin-bottom: clamp(18px, 2vw, 28px);
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--voll);
	background: var(--o-text);
	color: var(--o-weiss);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.outtra-stimme-gross__text > p.is-style-mono-label-orange {
	margin-bottom: clamp(14px, 1.4vw, 20px);
}

.outtra-stimme-gross__zitat {
	max-width: 30ch;
	hyphens: manual;
	margin: 0 0 clamp(16px, 1.6vw, 22px);
	font-size: clamp(20px, 1.9vw, 27px);
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.024em;
	text-wrap: pretty;
}

.outtra-stimme-gross__text > .outtra-stimme__name {
	margin: 0;
}

.outtra-stimme-gross__text > p.is-style-pfeil-link {
	margin-top: clamp(18px, 1.8vw, 26px);
}

/* Kundenstimmen-Slider: eine grosse Stimme sichtbar, die naechste schiebt sich samt Ueberschrift von rechts herein. */
.outtra-stimmen-slider { position: relative; }
.outtra-stimmen-slider__fenster { overflow: hidden; }
.outtra-stimmen-slider__spur { display: flex; align-items: flex-start; transition: transform 0.8s var(--o-kurve); will-change: transform; }
.outtra-stimmen-slider__folie { flex: 0 0 100%; min-width: 0; }
.outtra-stimmen-slider__titel { margin-top: 0 !important; max-width: none; text-wrap: pretty; }
.outtra-stimmen-slider__punkte { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: clamp(22px, 2.2vw, 30px); padding: 4px 0; }
.outtra-stimmen-slider__punkt { display: block; flex: 0 0 10px; width: 10px; height: 10px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--o-linie); color: transparent; font-size: 0; line-height: 0; cursor: pointer; appearance: none; -webkit-appearance: none; box-sizing: border-box; transition: background 0.3s var(--o-kurve), transform 0.3s var(--o-kurve); }
.outtra-stimmen-slider__punkt.is-aktiv { background: var(--o-orange); transform: scale(1.2); }
.outtra-stimmen-slider__punkt:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .outtra-stimmen-slider__spur { transition: none; } }

/* Drei Karten darunter. */
.outtra-stimmen__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 25px;
	margin-top: 25px;
}

.outtra-stimme-klein .outtra-video {
	aspect-ratio: 16 / 10;
}

.outtra-stimme-klein__zeile {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.outtra-stimme-klein__marke {
	margin: 16px 0 8px !important;
}

.outtra-stimme-klein__titel {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.012em;
	text-wrap: pretty;
}

.outtra-stimme-klein__zeile .is-style-pille,
.outtra-stimme-gross__fuss .is-style-pille {
	flex: 0 0 auto;
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--voll);
	background: var(--o-orange);
	color: var(--o-weiss);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	border: 0;
	text-transform: none;
	font-family: inherit;
}

.outtra-stimme-klein .outtra-stimme__name {
	margin-top: 10px;
}

.outtra-stimme-klein p.is-style-pfeil-link {
	margin-top: 10px;
	font-size: 14px;
}

/* Karten treten nacheinander auf. */
.has-js .outtra-stimmen__raster > .outtra-stimme-klein {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--o-kurve), transform 0.7s var(--o-kurve);
}

.has-js .outtra-stimmen__raster.is-sichtbar > .outtra-stimme-klein {
	opacity: 1;
	transform: none;
}

.has-js .outtra-stimmen__raster > .outtra-stimme-klein:nth-child(2) { transition-delay: 0.12s; }
.has-js .outtra-stimmen__raster > .outtra-stimme-klein:nth-child(3) { transition-delay: 0.24s; }

.has-js .outtra-stimmen__raster.outtra-anim {
	opacity: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.outtra-stimme-gross {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.outtra-stimme-gross__text {
		padding: clamp(24px, 4vw, 40px);
	}

	.outtra-stimmen__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.outtra-stimmen__raster {
		grid-template-columns: 1fr;
	}
}

.outtra-stimme__text {
	padding: clamp(20px, 1.9vw, 30px);
}

.outtra-stimme__text > * {
	margin-block: 0;
}

.outtra-stimme__zitat {
	margin-bottom: 14px !important;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: -0.018em;
}

.outtra-stimme__name {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--o-leise);
}

.outtra-stimme__name strong {
	color: var(--o-text);
}

.outtra-stimme__name span {
	display: block;
	color: var(--o-leise);
}

.outtra-stimme__text p.is-style-mono-label {
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   11. Loesungen – abwechselnd Text und Bild
   -------------------------------------------------------------------------- */

.outtra-loesung {
	gap: clamp(28px, 3.2vw, 56px) !important;
	margin: 0 auto !important;
	padding-block: clamp(36px, 4vw, 72px);
	border-top: 1px solid var(--o-linie);
}

.outtra-loesung:last-child {
	border-bottom: 1px solid var(--o-linie);
}

/* Keine Linie direkt unter der Abschnittsueberschrift; die Bloecke trennen sich untereinander. */
.outtra-loesung:first-child {
	border-top: 0;
	padding-top: 0;
}

.outtra-loesung .wp-block-column > * {
	margin-block: 0;
}

.outtra-loesung .wp-block-column > h3 {
	margin-bottom: clamp(14px, 1.3vw, 22px);
}

.outtra-loesung .wp-block-column > .outtra-loesung__text,
.outtra-loesung .wp-block-column > .outtra-kennzahlen,
.outtra-loesung .wp-block-column > .outtra-pillen,
.outtra-loesung .wp-block-column > .is-style-hinweis,
.outtra-loesung .wp-block-column > .outtra-ki-box {
	margin-bottom: clamp(20px, 1.8vw, 30px);
}

.outtra-loesung p.is-style-mono-label {
	margin-bottom: 14px;
}

.outtra-loesung h3 {
	margin-bottom: clamp(14px, 1.3vw, 22px);
}

.outtra-loesung .outtra-loesung__text {
	max-width: 50ch;
	margin-bottom: clamp(20px, 1.8vw, 30px);
	font-size: clamp(14.5px, 1.05vw, 17px);
	color: var(--o-leise);
}

.outtra-loesung.is-bildstark .is-style-browserrahmen img,
.outtra-loesung.is-bildstark .is-style-browserrahmen video {
	display: block;
	width: 100%;
	height: auto;
}

/* Aufnahmen, deren Inhalt bis an den Rand laeuft, bekommen im Browserrahmen etwas Luft. */
.outtra-videorahmen.is-wtb-local-ortovox { background: var(--o-weiss); padding: clamp(10px, 1.4vw, 20px) clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px); }
.outtra-videorahmen.is-wtb-local-ortovox video { border-radius: 6px; box-shadow: 0 0 0 1px var(--o-linie); }

.outtra-videorahmen {
	margin: 0;
}

.has-js .outtra-loesung .is-style-browserrahmen video {
	clip-path: inset(0 0 100% 0);
	transform: scale(1.04);
	transition: clip-path 1s var(--o-kurve) 0.2s, transform 1.2s var(--o-kurve) 0.2s;
}

.has-js .outtra-loesung.is-sichtbar .is-style-browserrahmen video {
	clip-path: inset(0);
	transform: none;
}

.outtra-loesung .outtra-kennzahlen,
.outtra-loesung .outtra-pillen,
.outtra-loesung .is-style-hinweis,
.outtra-loesung .outtra-ki-box {
	margin-bottom: clamp(20px, 1.8vw, 30px);
}

.outtra-kennzahlen {
	gap: clamp(20px, 2vw, 36px) !important;
}

.outtra-pillen {
	gap: 8px !important;
}

.outtra-loesung p.is-style-pfeil-link {
	margin-top: 0;
}

.outtra-ki-box {
	padding: clamp(18px, 1.7vw, 26px);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-grau);
}

/* KI-Check: Domain eingeben, Knopf daneben. */
.outtra-ki-check__formular {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.outtra-ki-check input {
	flex: 1;
	min-width: 190px;
	padding: 14px 16px;
	font: inherit;
	font-size: clamp(14px, 1vw, 16px);
	color: var(--o-text);
	background: var(--o-weiss);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--klein);
}

.outtra-ki-check input:focus-visible {
	outline: 2px solid var(--o-orange);
	outline-offset: 2px;
	border-color: var(--o-orange);
}

.outtra-ki-check button {
	border: 0;
	cursor: pointer;
	padding: 14px 22px;
}

.outtra-ki-check__hinweis {
	margin: 12px 0 0;
	font-family: var(--o-mono);
	font-size: clamp(10px, 0.78vw, 11.5px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--o-leise);
}

/* Zahlenblock: zwei weisse Zellen, darunter eine dunkle ueber die volle Breite. */
.outtra-zahlenblock {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px !important;
	overflow: hidden;
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-linie);
}

.outtra-zahlenblock > * {
	margin: 0 !important;
	padding: clamp(20px, 2vw, 34px);
	background: var(--o-weiss);
}

.outtra-zahlenblock > * > * {
	margin-block: 0;
}

.outtra-zahlenblock .outtra-zahl {
	font-size: clamp(30px, 2.7vw, 44px);
}

.outtra-zahlenblock .outtra-zahl + p {
	margin-top: 12px;
}

.outtra-zahlenblock > .has-surface-dark-background-color {
	grid-column: 1 / -1;
	background: var(--wp--preset--color--surface-dark);
}

.outtra-zahlenblock > .has-surface-dark-background-color p.is-style-mono-label-orange {
	margin-bottom: 12px;
}

.outtra-zahlenblock__satz {
	font-size: clamp(18px, 1.5vw, 26px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.024em;
}

/* --------------------------------------------------------------------------
   12. Partner, Netzwerk, Fotobahn, Zwei Wege, Abschluss
   -------------------------------------------------------------------------- */

.outtra-partnerkarte > * {
	margin-block: 0;
}

.outtra-partnerreihe {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 28px);
}

@media (max-width: 899px) {
	.outtra-partnerreihe {
		grid-template-columns: 1fr;
	}
}

a.outtra-partnerkarte {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 1.9vw, 30px);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background-color: var(--o-weiss);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s var(--o-kurve), box-shadow 0.25s var(--o-kurve), border-color 0.25s var(--o-kurve);
}

a.outtra-partnerkarte:hover {
	transform: translateY(-4px);
}

a.outtra-partnerkarte > p {
	margin: 8px 0 0;
	font-size: clamp(13px, 0.95vw, 14.5px);
	line-height: 1.6;
	color: var(--o-leise);
}

a.outtra-partnerkarte:hover,
a.outtra-partnerkarte:focus-visible {
	box-shadow: 0 16px 40px rgba(21, 23, 28, 0.1);
}

.outtra-partnerkarte h3 {
	margin-bottom: 0;
}

.outtra-partnerkarte__art {
	margin: auto 0 10px !important;
	padding-top: clamp(28px, 3vw, 48px);
	color: var(--o-orange);
}

a.outtra-partnerkarte .outtra-partnerkarte__logo {
	margin-bottom: 0;
}

.outtra-partnerkarte__link {
	display: inline-block;
	margin-top: 0;
	padding-top: clamp(16px, 1.6vw, 24px);
	font-size: clamp(14px, 1.05vw, 16px);
	font-weight: 600;
	color: var(--o-orange);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-decoration-color: var(--o-orange-hell);
	text-underline-offset: 0.28em;
}

.outtra-partnerkarte__link .outtra-pfeil {
	display: inline-block;
	margin-left: 0.15em;
	transition: transform 0.25s var(--o-kurve);
}

a.outtra-partnerkarte:hover .outtra-partnerkarte__link {
	text-decoration-color: currentColor;
}

a.outtra-partnerkarte:hover .outtra-pfeil {
	transform: translateX(0.3em);
}

/* Karten treten nacheinander auf. */
.has-js .outtra-partnerreihe > .outtra-partnerkarte {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--o-kurve), transform 0.7s var(--o-kurve), border-color 0.25s var(--o-kurve), box-shadow 0.25s var(--o-kurve);
}

.has-js .outtra-partnerreihe.is-sichtbar > .outtra-partnerkarte {
	opacity: 1;
	transform: none;
}

.has-js .outtra-partnerreihe > .outtra-partnerkarte:nth-child(2) { transition-delay: 0.14s; }
.has-js .outtra-partnerreihe > .outtra-partnerkarte:nth-child(3) { transition-delay: 0.28s; }

.has-js .outtra-partnerreihe.outtra-anim {
	opacity: 1;
	transform: none;
}

.outtra-partnerkarte__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

/* Platz fuer das Partnerlogo; bis es da ist, steht der Name als Wortmarke. */
.outtra-partnerkarte__logo {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

.outtra-partnerkarte__logo img {
	display: block;
	width: auto;
	max-width: 170px;
	height: auto;
	max-height: 38px;
	object-fit: contain;
}

.outtra-partnerkarte__kopf .is-style-pille {
	display: inline-block;
	margin: 0;
	padding: 5px 11px;
	border: 1px solid var(--o-orange-hell);
	border-radius: var(--wp--custom--radius--voll);
	font-family: var(--o-mono);
	font-size: clamp(10.5px, 0.8vw, 12px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o-orange);
}

.outtra-partnerkarte h3 {
	max-width: none;
	font-size: clamp(17px, 1.3vw, 20px);
}

.outtra-partnerkarte h3 + p {
	margin-top: 8px;
	font-size: clamp(13px, 0.95vw, 14.5px);
	line-height: 1.6;
	color: var(--o-leise);
}

.outtra-zeilenkopf {
	align-items: baseline !important;
	padding-bottom: 18px;
	margin-bottom: clamp(20px, 2vw, 32px) !important;
	border-bottom: 1px solid var(--o-linie);
}

.outtra-zeilenkopf > * {
	margin: 0;
}

.outtra-zeilenkopf > p:first-child {
	font-size: clamp(16px, 1.25vw, 20px);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.outtra-logoraster {
	gap: 14px !important;
}

.outtra-logoraster + .outtra-zeilenkopf {
	margin-top: clamp(32px, 3vw, 52px) !important;
}

.wp-block-cover.outtra-fotobahn {
	/* Feste Hoehe statt Seitenverhaeltnis: zusammen mit einer Mindesthoehe
	   wuerde ein Seitenverhaeltnis die Breite auf dem Handy aufblaehen. */
	height: clamp(340px, 25vw, 560px);
	min-height: 0 !important;
	padding: 0 var(--o-rand) clamp(18px, 2.4vw, 44px) !important;
	border-bottom: 1px solid var(--o-linie);
}

.outtra-fotobahn .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--o-inhalt);
	margin-inline: auto;
}

.outtra-textplatte {
	max-width: min(100%, 46ch);
	padding: clamp(20px, 2vw, 32px);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-weiss);
	color: var(--o-text);
}

.outtra-textplatte__text {
	margin-top: 10px !important;
	color: var(--o-leise);
}

/* Zwei Wege hinein: zwei Karten, die oben ins Foto hineinragen. */
.outtra-fotobahn {
	min-height: clamp(360px, 42vw, 600px);
}

.outtra-abschnitt.outtra-zweiwege {
	padding-top: 0;
	margin-top: calc(-1 * clamp(90px, 11vw, 170px));
}

/* Die Hoehenlinien beginnen erst unterhalb der Ueberlappung, sonst decken sie das Foto ab. */
.outtra-abschnitt.outtra-zweiwege.outtra-hoehenlinien {
	background-image: none;
}

.outtra-abschnitt.outtra-zweiwege::before {
	top: clamp(90px, 11vw, 170px);
	background: var(--o-weiss);
	opacity: 1;
}

/* Der Abschnittskopf liegt auf dem Foto: weisse Linie, heller Text. */
.outtra-zweiwege .is-style-abschnittskopf.is-auf-foto p:last-child {
	color: var(--o-weiss);
}

.outtra-zweiwege .is-style-abschnittskopf.is-auf-foto::after {
	background: rgba(255, 255, 255, 0.55);
}

.outtra-zweiwege__karten .outtra-weg.is-style-karte {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.6vw, 36px);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-weiss);
	box-shadow: var(--wp--preset--shadow--karte);
	transition: transform 0.25s var(--o-kurve), box-shadow 0.25s var(--o-kurve), border-color 0.25s var(--o-kurve);
}

.outtra-zweiwege__karten .outtra-weg.is-style-karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(21, 23, 28, 0.1);
}

.outtra-zweiwege__karten .outtra-weg .wp-block-buttons {
	margin-top: auto;
	padding-top: 4px;
}

.outtra-zweiwege__karten .outtra-weg h3 {
	max-width: none;
	font-size: clamp(22px, 2.1vw, 32px);
}

.outtra-zweiwege__karten .outtra-weg p:not([class*="is-style"]) {
	max-width: none;
}

/* Zwei Perspektiven: Abstand zwischen den Karten (Hilfsfunktion bekommt keine WP-Layoutklassen). */
.outtra-zweiwege__karten {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
}

/* Kartenkopf: Label links, Icon rechts oben in der Ecke. */
.outtra-zweiwege__karten .outtra-weg.is-style-karte {
	position: relative;
}

.outtra-weg__kopf {
	margin-bottom: clamp(10px, 1vw, 14px);
}

.outtra-weg__kopf:has(.outtra-weg__icon) {
	padding-right: 64px;
}

/* Ohne Label steht die Überschrift neben dem Icon. */
.outtra-weg:has(> .outtra-weg__icon) > h3 {
	min-height: 44px;
	padding-right: 64px;
	display: flex;
	align-items: center;
}

.outtra-weg__kopf .is-style-mono-label {
	margin: 0;
	color: var(--o-orange);
}

.outtra-weg__icon {
	position: absolute;
	top: clamp(22px, 2.6vw, 36px);
	right: clamp(22px, 2.6vw, 36px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--o-orange);
	border-radius: 10px;
	background: transparent;
	color: var(--o-orange);
}

.outtra-weg__icon .outtra-menue__icon {
	width: 24px;
	height: 24px;
}

/* Haken-Liste in den Karten: Zeilen mit feiner Linie, runder Haken. */
.outtra-weg ul.outtra-haken {
	margin-top: 8px;
}

.outtra-weg ul.outtra-haken li {
	margin: 0;
	padding: 12px 0 12px 36px;
	border-top: 1px solid var(--o-linie);
}

.outtra-weg ul.outtra-haken li::before {
	left: 0;
	top: 50%;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: var(--o-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
	transform: translateY(-50%);
}

/* Zweite Karte dunkel: zwei Perspektiven, sichtbar unterschieden. */
.outtra-zweiwege__karten .outtra-weg.is-style-karte:nth-child(2) {
	border-color: transparent;
	background: var(--o-text);
	color: var(--o-weiss);
}

.outtra-zweiwege__karten .outtra-weg:nth-child(2) h3,
.outtra-zweiwege__karten .outtra-weg:nth-child(2) p:not([class*="is-style"]),
.outtra-zweiwege__karten .outtra-weg:nth-child(2) li {
	color: var(--o-weiss);
}

.outtra-zweiwege__karten .outtra-weg:nth-child(2) ul.outtra-haken li {
	border-top-color: rgba(255, 255, 255, 0.14);
}

.outtra-zweiwege__karten .outtra-weg:nth-child(2) ul.outtra-haken li::before {
	background: var(--o-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.outtra-zweiwege__karten .outtra-weg:nth-child(2) .outtra-weg__icon {
	border-color: var(--o-weiss);
	background: transparent;
	color: var(--o-weiss);
}

.outtra-zweiwege__karten .outtra-weg:nth-child(2) .outtra-weg__kopf .is-style-mono-label {
	color: var(--o-weiss);
}

/* Erste Karte: Überschrift orange. Zweite Karte: Button weiß. */
.outtra-zweiwege__karten .outtra-weg:nth-child(1) h3 {
	color: var(--o-orange);
}

.outtra-zweiwege__karten .outtra-weg:nth-child(2) .wp-block-button .wp-block-button__link {
	border-color: var(--o-weiss);
	background: var(--o-weiss);
	color: var(--o-text);
}

.outtra-zweiwege__karten .outtra-weg:nth-child(2) .wp-block-button .wp-block-button__link:hover {
	background: var(--o-grau);
	color: var(--o-text);
}

@media (max-width: 781px) {
	.outtra-zweiwege__karten { flex-direction: column; }
}

.outtra-textplatte > * {
	margin-block: 0;
}

.outtra-textplatte p.is-style-mono-label-orange {
	margin-bottom: 10px;
}

.outtra-textplatte__satz {
	font-size: clamp(20px, 1.9vw, 32px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.outtra-weg > * {
	margin-block: 0;
}

.outtra-weg p.is-style-mono-label {
	margin-bottom: 14px;
}

.outtra-weg h3 {
	max-width: 22ch;
	margin-bottom: clamp(14px, 1.2vw, 20px);
}

.outtra-weg p:not([class*="is-style"]) {
	max-width: 46ch;
	margin-bottom: clamp(20px, 1.8vw, 30px);
	color: var(--o-leise);
}

.outtra-abschluss .wp-block-column > * {
	margin-block: 0;
}

.outtra-abschluss p.is-style-mono-label-orange {
	margin-bottom: 16px;
}

.outtra-abschluss__satz {
	max-width: 24ch;
	font-size: clamp(26px, 3vw, 46px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.034em;
	text-wrap: pretty;
}

.outtra-abschluss__fakten {
	margin-top: 18px !important;
	font-size: clamp(13.5px, 1vw, 15px);
	color: var(--wp--preset--color--muted-inverse);
}

/* --------------------------------------------------------------------------
   12b. Bausteine der Unterseiten
   -------------------------------------------------------------------------- */

/* Hero der Unterseite: wie das Raster, aber ohne Kopfzeile; Eyebrow ueber der H1. */
.outtra-hero--seite .outtra-hero__titel {
	grid-row: 1;
	align-self: end;
}

.outtra-hero--seite .outtra-hero__text {
	grid-row: 2;
}

.outtra-hero--seite .outtra-hero__medien {
	grid-row: 1 / 3;
	border-left: 0;
	padding-left: clamp(16px, 2vw, 32px);
}

.outtra-hero--seite .outtra-hero__absatz {
	max-width: none;
}

.outtra-hero--seite .outtra-hero__eyebrow {
	margin-bottom: clamp(14px, 1.4vw, 22px) !important;
}

.outtra-hero--seite.is-ohne-medien .outtra-hero__titel,
.outtra-hero--seite.is-ohne-medien .outtra-hero__text {
	grid-column: 1 / 10;
}

.outtra-hero--seite h1.wp-block-heading {
	font-size: clamp(34px, 4.4vw, 68px);
}

/* Textmarker auch als Teil einer Ueberschrift. */
h1 .is-style-textmarker {
	padding: 0 0.06em;
	background: linear-gradient(var(--o-orange-hell), var(--o-orange-hell)) 0 0.78em / 100% 0.34em no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.outtra-loesung .is-style-browserrahmen img,
.outtra-loesung .is-style-browserrahmen video,
.outtra-hero--seite .is-style-browserrahmen img,
.outtra-hero--seite .is-style-browserrahmen video,
.outtra-hero--seite .outtra-hero__foto img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 899px) {
	.outtra-hero--seite .outtra-hero__titel,
	.outtra-hero--seite .outtra-hero__text,
	.outtra-hero--seite .outtra-hero__medien {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* Kartenreihe: wie die Partnerkarten, Spaltenzahl per Variable. */
.outtra-kartenreihe {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 28px);
	margin-top: var(--wp--preset--spacing--60);
}

.outtra-kartenreihe .outtra-partnerkarte {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 1.9vw, 30px);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-weiss);
	color: inherit;
	text-decoration: none;
}

.outtra-kartenreihe .outtra-karte__art,
.outtra-kartenreihe .outtra-partnerkarte > p.outtra-karte__art {
	margin: 0 0 10px !important;
	color: var(--o-orange);
}

.outtra-kartenreihe .outtra-partnerkarte > p.outtra-karte__art.is-gruen {
	color: var(--o-gruen);
}

/* Icon in Funktionskarten: Linien-Icon im hellen Quadrat ueber dem Eyebrow. */
.outtra-karte__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 10px; background: var(--o-grau); color: var(--o-orange); }
.outtra-karte__icon .outtra-menue__icon { width: 24px; height: 24px; }
.outtra-knopfzeile { margin-top: clamp(28px, 3vw, 44px) !important; }

.outtra-kartenreihe .outtra-partnerkarte > p {
	margin: 8px 0 0;
	font-size: clamp(13.5px, 0.98vw, 15px);
	line-height: 1.6;
	color: var(--o-leise);
}

.has-js .outtra-kartenreihe > .outtra-partnerkarte {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--o-kurve), transform 0.7s var(--o-kurve), box-shadow 0.25s var(--o-kurve);
}

.has-js .outtra-kartenreihe.is-sichtbar > .outtra-partnerkarte {
	opacity: 1;
	transform: none;
}

.has-js .outtra-kartenreihe > .outtra-partnerkarte:nth-child(2) { transition-delay: 0.12s; }
.has-js .outtra-kartenreihe > .outtra-partnerkarte:nth-child(3) { transition-delay: 0.24s; }
.has-js .outtra-kartenreihe > .outtra-partnerkarte:nth-child(4) { transition-delay: 0.36s; }

.has-js .outtra-kartenreihe.outtra-anim {
	opacity: 1;
	transform: none;
}

@media (max-width: 899px) {
	.outtra-kartenreihe {
		grid-template-columns: 1fr;
	}
}

/* Schritte ohne Grafik: alle aktiv, Linie oben orange. */
.outtra-netzfluss__reihe.is-statisch {
	margin-top: var(--wp--preset--spacing--60);
}

.outtra-netzfluss__reihe.is-statisch .outtra-schritt {
	opacity: 1;
	cursor: default;
	border-top-color: var(--o-orange);
}

.outtra-netzfluss__reihe.is-statisch .outtra-schritt::before {
	display: none;
}

/* Hakenliste. */
ul.outtra-haken {
	margin: 0 0 clamp(20px, 1.8vw, 30px);
	padding: 0;
	list-style: none;
}

ul.outtra-haken li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	font-size: clamp(14.5px, 1.05vw, 16.5px);
	line-height: 1.5;
}

ul.outtra-haken li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--o-orange);
	border-bottom: 2px solid var(--o-orange);
	transform: rotate(-45deg);
}

/* KI-Hinweis: der rote Faden. */
.outtra-ki-hinweis {
	margin: clamp(18px, 1.6vw, 26px) 0;
}

.outtra-ki-hinweis p:last-child {
	font-size: clamp(14px, 1vw, 15.5px);
	color: var(--o-leise);
}

/* FAQ: volle Inhaltsbreite, buendig mit dem Abschnittskopf (Breite kommt vom Layout). */
.outtra-faq {
	margin-top: var(--wp--preset--spacing--50);
}

.outtra-zweiwege__karten.outtra-anim {
	margin-top: var(--wp--preset--spacing--60);
}

.outtra-abschnitt .outtra-hero__zahlen.is-eigene-zeile {
	display: grid;
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: 0;
	border-top: 0;
	animation: none;
}

.outtra-abschnitt .outtra-stimme-gross {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   13. Fussbereich (hell)
   -------------------------------------------------------------------------- */

.outtra-fuss {
	font-size: 13.5px;
	color: var(--o-leise);
	border-top: 1px solid var(--o-linie);
}

.outtra-fuss h3.outtra-fuss__titel {
	margin: 0 0 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--o-text);
}

.outtra-fuss ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2;
}

.outtra-fuss a {
	color: inherit;
}

.outtra-fuss a:hover {
	color: var(--o-orange);
}

.outtra-fuss .wp-block-site-logo img {
	width: 104px;
	height: auto;
}

.outtra-fuss__leiste {
	padding-top: 20px;
	border-top: 1px solid var(--o-linie);
	font-size: 12.5px;
}

.outtra-fuss__leiste > * {
	margin: 0;
}

/* --------------------------------------------------------------------------
   14. Vorschau-Leiste (nur auf den Entwurfsseiten fuer die Freigabe)
   -------------------------------------------------------------------------- */

.outtra-vorschau {
	padding-block: 10px;
	background: var(--o-text);
	color: var(--wp--preset--color--inverse);
	font-family: var(--o-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
}

.outtra-vorschau p {
	margin: 0;
}

.outtra-vorschau a {
	color: var(--wp--preset--color--muted-inverse);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.outtra-vorschau a:hover,
.outtra-vorschau strong {
	color: var(--o-orange);
}

/* --------------------------------------------------------------------------
   14b. Bewegung – Einblenden, Zeichnen, Band, Hover
   -------------------------------------------------------------------------- */

/* Erst sichtbar, wenn das Skript die Klasse setzt. Ohne JavaScript sofort da. */
.has-js :where(.outtra-anim, .outtra-netz, .outtra-abschnitt > .wp-block-columns, .outtra-abschnitt > .wp-block-group:not(.is-style-abschnittskopf)) {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--o-kurve), transform 0.7s var(--o-kurve);
}

.has-js .is-sichtbar {
	opacity: 1;
	transform: none;
}

/* Abschnittskopf: die Linie waechst von links, Ueberschrift und Einleitung folgen. */
.has-js .is-style-abschnittskopf::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s var(--o-kurve) 0.15s;
}

.has-js .is-style-abschnittskopf.is-sichtbar::after {
	transform: scaleX(1);
}

.has-js :where(.outtra-abschnitt > h2, .outtra-abschnitt > .outtra-einleitung) {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--o-kurve), transform 0.7s var(--o-kurve);
}

.has-js .outtra-abschnitt > .outtra-einleitung {
	transition-delay: 0.12s;
}

/* Spalten treten nacheinander auf, nicht als Block. */
.has-js .outtra-abschnitt > .wp-block-columns,
.has-js .outtra-loesung {
	opacity: 1;
	transform: none;
}

.has-js .outtra-abschnitt > .wp-block-columns > .wp-block-column,
.has-js .outtra-loesung > .wp-block-column {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--o-kurve), transform 0.7s var(--o-kurve);
}

.has-js .outtra-abschnitt > .wp-block-columns.is-sichtbar > .wp-block-column,
.has-js .outtra-loesung.is-sichtbar > .wp-block-column {
	opacity: 1;
	transform: none;
}

.has-js .wp-block-columns > .wp-block-column:nth-child(2) { transition-delay: 0.14s; }
.has-js .wp-block-columns > .wp-block-column:nth-child(3) { transition-delay: 0.28s; }
.has-js .wp-block-columns > .wp-block-column:nth-child(4) { transition-delay: 0.42s; }

/* Innerhalb einer Loesung: Pillen poppen nacheinander, Bild schiebt sich frei. */
.has-js .outtra-loesung p.is-style-pille {
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.45s var(--o-kurve), transform 0.45s var(--o-kurve);
}

.has-js .outtra-loesung.is-sichtbar p.is-style-pille {
	opacity: 1;
	transform: none;
}

.has-js .outtra-loesung p.is-style-pille:nth-child(1) { transition-delay: 0.45s; }
.has-js .outtra-loesung p.is-style-pille:nth-child(2) { transition-delay: 0.55s; }
.has-js .outtra-loesung p.is-style-pille:nth-child(3) { transition-delay: 0.65s; }
.has-js .outtra-loesung p.is-style-pille:nth-child(4) { transition-delay: 0.75s; }

.has-js .outtra-loesung .is-style-browserrahmen img {
	clip-path: inset(0 0 100% 0);
	transform: scale(1.04);
	transition: clip-path 1s var(--o-kurve) 0.2s, transform 1.2s var(--o-kurve) 0.2s;
}

.has-js .outtra-loesung.is-sichtbar .is-style-browserrahmen img {
	clip-path: inset(0);
	transform: none;
}

/* Data-&-Image-Hub-Grafik: Kaesten erscheinen, Linien zeichnen sich, Punkte poppen. */
.outtra-datahub {
	margin: 0;
}

.outtra-datahub__svg {
	display: block;
	width: 100%;
	height: auto;
}

.has-js .outtra-datahub__kaesten rect {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.5s var(--o-kurve), transform 0.5s var(--o-kurve);
}

.has-js .outtra-datahub__kaesten rect:nth-child(n + 5) {
	transform: translateX(10px);
}

.has-js .outtra-datahub__kaesten rect:nth-child(2) { transition-delay: 0.08s; }
.has-js .outtra-datahub__kaesten rect:nth-child(3) { transition-delay: 0.16s; }
.has-js .outtra-datahub__kaesten rect:nth-child(4) { transition-delay: 0.24s; }
.has-js .outtra-datahub__kaesten rect:nth-child(5) { transition-delay: 1.1s; }
.has-js .outtra-datahub__kaesten rect:nth-child(6) { transition-delay: 1.18s; }
.has-js .outtra-datahub__kaesten rect:nth-child(7) { transition-delay: 1.26s; }

.has-js .outtra-datahub.is-sichtbar .outtra-datahub__kaesten rect {
	opacity: 1;
	transform: none;
}

.has-js .outtra-datahub__linien path {
	stroke-dashoffset: 300;
	transition: stroke-dashoffset 1.1s var(--o-kurve) 0.35s;
}

.has-js .outtra-datahub__linien path:nth-child(n + 5) {
	transition-delay: 0.9s;
}

.has-js .outtra-datahub.is-sichtbar .outtra-datahub__linien path {
	stroke-dashoffset: 0;
}

.has-js .outtra-datahub__punkte circle {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0);
	transition: transform 0.5s var(--o-kurve) 0.3s;
}

.has-js .outtra-datahub__punkte circle:nth-child(n + 5) {
	transition-delay: 1.35s;
}

.has-js .outtra-datahub.is-sichtbar .outtra-datahub__punkte circle {
	transform: scale(1);
}

/* Fotobahn: das Bild bewegt sich beim Scrollen langsamer als die Seite. */
@supports (animation-timeline: view()) {
	.has-js .outtra-fotobahn .wp-block-cover__image-background {
		animation: outtra-parallax linear both;
		animation-timeline: view();
	}
}

@keyframes outtra-parallax {
	from { transform: translateY(-12%) scale(1.25); }
	to { transform: translateY(12%) scale(1.25); }
}

/* Netzgrafik: Linien zeichnen sich, Punkte poppen. */
.has-js .outtra-netz .outtra-netz__linien path {
	stroke-dashoffset: 600;
	stroke-dasharray: 4 7;
	transition: stroke-dashoffset 1.4s var(--o-kurve) 0.2s;
}

.outtra-netz.is-sichtbar .outtra-netz__linien path {
	stroke-dashoffset: 0;
}

.has-js .outtra-netz .outtra-netz__punkte circle {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.3);
	transition: transform 0.6s var(--o-kurve) 0.9s;
}

.outtra-netz.is-sichtbar .outtra-netz__punkte circle {
	transform: scale(1);
	animation: outtra-puls 3.2s var(--o-kurve) 2.2s infinite;
}

/* Nach dem Zeichnen fliessen die Striche dauerhaft in Richtung Signet, die Punkte atmen. */
.outtra-netz.is-sichtbar .outtra-netz__linien path {
	animation: outtra-fliessen 1.3s linear 2s infinite;
}

.outtra-netz__punkte circle:nth-child(2n) { animation-delay: 2.6s !important; }
.outtra-netz__punkte circle:nth-child(3n) { animation-delay: 3s !important; }
.outtra-netz__punkte circle:nth-child(5n) { animation-delay: 3.5s !important; }

@keyframes outtra-fliessen {
	from { stroke-dashoffset: 11; }
	to { stroke-dashoffset: 0; }
}

@keyframes outtra-puls {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.45); }
}

/* Logo-Baender: Titel links, Band rechts. */
.outtra-abschnitt.outtra-band {
	padding-block: clamp(44px, 4.5vw, 76px);
}

.outtra-band .is-style-logo-kachel {
	padding: 22px 28px;
}

.outtra-band__zeile {
	display: grid;
	grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
}

.outtra-band__titel {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.outtra-band__titel small {
	display: block;
	margin-top: 6px;
	font-family: var(--o-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--laufweite--label);
	text-transform: uppercase;
	color: var(--o-orange);
}

/* Nur noch die Zahl als Label, ohne Ueberschrift darueber. */
.outtra-band__titel small:first-child {
	margin-top: 0;
	font-size: clamp(13px, 1vw, 15px);
	letter-spacing: .12em;
}

.outtra-band .outtra-logoband {
	display: flex;
}

/* Alle Logos einfarbig schwarz, Marken wie Haendler. */
.outtra-band .is-style-logo-kachel img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 60px;
	object-fit: contain;
	/* Einfarbig: Farben werden schwarz, weisse Hintergruende verschwinden durch Multiplizieren. */
	filter: grayscale(1) contrast(3);
	mix-blend-mode: multiply;
}

/* Haendler-Logos sind SVG mit transparentem Grund: direkt schwarz. */
.outtra-band.is-haendler .is-style-logo-kachel img,
.outtra-band .is-style-logo-kachel.is-svg img {
	filter: brightness(0);
	mix-blend-mode: normal;
}
/* Logos, die selbst schon schwarz-weiss sind (ORTLIEB-Badge), bleiben unveraendert. */
.outtra-band .is-style-logo-kachel.is-original img { filter: none; mix-blend-mode: normal; }
/* Farbige PNG-Logos im Haendlerband (Bruendl, SPORT 2000) wie im Markenband entsaettigen. */
.outtra-band.is-haendler .is-style-logo-kachel.is-png img {
	filter: grayscale(1) contrast(3);
	mix-blend-mode: multiply;
}

.outtra-logoband.is-rueckwaerts .outtra-logoband__spur {
	animation-direction: reverse;
}

@media (max-width: 599px) {
	.outtra-band__zeile {
		grid-template-columns: 1fr;
	}
}

/* Logo-Band: laeuft endlos, haelt bei Hover an. */
.outtra-logoband {
	overflow: hidden;
	gap: 14px !important;
	flex-wrap: nowrap !important;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Spur mit zwei identischen Kopien: wandert um genau eine Kopie, dann nahtloser Neustart. */
.outtra-logoband__spur {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	width: max-content;
	animation: outtra-band var(--dauer, 60s) linear infinite;
	will-change: transform;
}

.outtra-logoband__spur > * {
	flex: 0 0 clamp(170px, 17vw, 240px);
}

.outtra-logoband:hover .outtra-logoband__spur {
	animation-play-state: paused;
}

@keyframes outtra-band {
	to { transform: translateX(calc(-50% - 7px)); }
}

.outtra-logoband + .outtra-zeilenkopf {
	margin-top: clamp(32px, 3vw, 52px) !important;
}

/* Karten heben sich leicht. */
.wp-block-group.is-style-karte,
.wp-block-group.is-style-browserrahmen {
	transition: transform 0.25s var(--o-kurve), box-shadow 0.25s var(--o-kurve);
}

.wp-block-group.is-style-karte:hover,
.wp-block-group.is-style-browserrahmen:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(21, 23, 28, 0.08);
}

/* --------------------------------------------------------------------------
   14c. Abschnitt "So funktioniert das Netz"
   -------------------------------------------------------------------------- */

.outtra-netzfluss {
	position: relative;
}

/* Hoehenlinien als leiser Hintergrund fuer textlastige Abschnitte. */
.outtra-hoehenlinien {
	position: relative;
	background-image: url("../images/hoehenlinien.svg");
	background-size: cover;
	background-position: center;
}

.outtra-hoehenlinien::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--o-weiss);
	opacity: 0.94;
	pointer-events: none;
}

.outtra-hoehenlinien.has-surface-background-color::before {
	background: var(--wp--preset--color--surface);
}

.outtra-hoehenlinien > * {
	position: relative;
}

.outtra-netzfluss__schritte {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3vw, 48px);
}

.outtra-schritt {
	padding-left: 20px;
	border-left: 2px solid var(--o-linie);
	opacity: 0.45;
	transition: opacity 0.4s var(--o-kurve), border-color 0.4s var(--o-kurve);
}

.outtra-schritt > * {
	margin-block: 0;
}

.outtra-schritt h3 {
	margin: 8px 0 10px;
	font-size: clamp(20px, 1.8vw, 28px);
}

.outtra-schritt p:not([class*="is-style"]) {
	max-width: 44ch;
	color: var(--o-leise);
}

.outtra-schritt.is-aktiv {
	opacity: 1;
	border-left-color: var(--o-orange);
}

.outtra-schritt.is-aktiv p.is-style-mono-label {
	color: var(--o-orange);
}

.outtra-netzfluss__grafik {
	align-self: stretch;
}

.outtra-fluss {
	position: sticky;
	top: max(calc(var(--wp-admin--admin-bar--height, 0px) + 96px), calc(50vh - 26vw * 0.5));
	width: 100%;
}

.outtra-fluss {
	box-sizing: border-box;
	max-width: 100%;
	padding: clamp(14px, 1.6vw, 26px);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--wp--preset--color--surface);
}

.outtra-fluss__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 900 / 520;
	overflow: visible;
	font-family: var(--wp--preset--font-family--text);
}

.outtra-fluss__punkte circle {
	fill: var(--o-orange);
	opacity: 0.35;
	transition: opacity 0.4s var(--o-kurve);
}

.outtra-fluss__punkte circle.is-aktiv,
.outtra-fluss__punkte circle.is-erledigt,
.outtra-fluss__punkte circle.is-zeigen {
	opacity: 1;
}

.outtra-fluss__linien path {
	fill: none;
	stroke: var(--o-orange);
	opacity: 0.35;
	stroke-width: 1.6;
	stroke-dasharray: 4 7;
	stroke-linecap: round;
	transition: stroke 0.4s var(--o-kurve);
}

.outtra-fluss__linien path.is-aktiv,
.outtra-fluss__linien path.is-erledigt,
.outtra-fluss__linien path.is-zeigen {
	opacity: 1;
}

.outtra-fluss__linien path.is-zeigen {
	stroke-width: 2.2;
}

.outtra-fluss__knoten rect,
.outtra-fluss__knoten circle {
	fill: var(--o-weiss);
	stroke: var(--o-linie);
	stroke-width: 1.2;
	transition: stroke 0.4s var(--o-kurve), fill 0.4s var(--o-kurve);
}

.outtra-fluss__knoten.is-aktiv rect,
.outtra-fluss__knoten.is-zeigen rect {
	stroke: var(--o-orange);
	stroke-width: 2;
}

/* Signet ohne Ring: nur ein leiser Schein, wenn der Schritt aktiv ist. */
.outtra-fluss__knoten .outtra-fluss__hub-schein {
	fill: var(--o-orange-hell);
	stroke: none !important;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.8);
	transition: opacity 0.4s var(--o-kurve), transform 0.5s var(--o-kurve);
}

.outtra-fluss__hub.is-aktiv .outtra-fluss__hub-schein,
.outtra-fluss__hub.is-zeigen .outtra-fluss__hub-schein {
	opacity: 0.55;
	transform: scale(1);
}

.outtra-fluss__knoten {
	cursor: default;
}

.outtra-schritt.is-zeigen {
	opacity: 1;
	border-left-color: var(--o-orange);
}

.outtra-fluss__knoten.is-erledigt rect {
	stroke: var(--o-orange);
}

.outtra-fluss__knoten text {
	fill: var(--o-text);
	transition: fill 0.4s var(--o-kurve);
}

.outtra-fluss__label {
	font-family: var(--o-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	fill: var(--o-leise) !important;
}

.outtra-fluss__knoten.is-aktiv .outtra-fluss__label,
.outtra-fluss__knoten.is-zeigen .outtra-fluss__label {
	fill: var(--o-orange) !important;
}

.outtra-fluss__titel {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.outtra-fluss__titel-klein {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.outtra-fluss__klein {
	font-size: 13px;
	fill: var(--o-leise) !important;
}

.outtra-fluss__icon {
	fill: none;
	stroke: var(--o-text);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.outtra-fluss__knoten.is-aktiv .outtra-fluss__icon,
.outtra-fluss__knoten.is-zeigen .outtra-fluss__icon {
	stroke: var(--o-orange);
}

.outtra-fluss__ergebnis rect {
	fill: var(--o-text) !important;
	stroke: var(--o-text) !important;
}

.outtra-fluss__ergebnis text {
	fill: var(--wp--preset--color--inverse);
}

.outtra-fluss__ergebnis .outtra-fluss__label {
	fill: var(--o-orange) !important;
}

.outtra-fluss__ergebnis.is-aktiv rect,
.outtra-fluss__ergebnis.is-zeigen rect {
	fill: var(--o-orange) !important;
	stroke: var(--o-orange) !important;
}

/* Horizontale Fassung: vier Schritte nebeneinander, Grafik darunter. */
.outtra-netzfluss__reihe {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 32px);
	margin: 0 0 clamp(28px, 3vw, 48px);
	padding: 0;
	list-style: none;
}

.outtra-netzfluss__reihe .outtra-schritt {
	position: relative;
	padding: 18px 0 0;
	border-left: 0;
	border-top: 2px solid var(--o-linie);
	cursor: pointer;
	opacity: 0.55;
}

.outtra-netzfluss__reihe .outtra-schritt::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--o-orange);
	transition: width 0.4s var(--o-kurve);
}

.outtra-netzfluss__reihe .outtra-schritt.is-aktiv {
	opacity: 1;
	border-top-color: var(--o-linie);
}

.outtra-netzfluss__reihe .outtra-schritt.is-aktiv::before {
	width: 100%;
	transition: width 3.2s linear;
}

.outtra-netzfluss__reihe .outtra-schritt:focus-visible {
	outline: 2px solid var(--o-orange);
	outline-offset: 6px;
}

.outtra-netzfluss__reihe .outtra-schritt h3 {
	font-size: clamp(17px, 1.3vw, 21px);
}

.outtra-netzfluss__reihe .outtra-schritt p:not([class*="is-style"]) {
	font-size: clamp(13.5px, 1vw, 15px);
}

.outtra-netzfluss--horizontal .outtra-fluss {
	position: static;
}

@media (max-width: 899px) {
	.outtra-netzfluss__reihe {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	/* Grafik zuerst, dann die Schritte. Kein column-reverse: WordPress setzt
	   den Spalten flex-basis 100 %, das kollidiert mit einer Spaltenachse. */
	.outtra-netzfluss__grafik {
		order: -1;
		margin-bottom: clamp(28px, 6vw, 48px);
	}

	.outtra-fluss {
		position: static;
	}

	/* Auf kleinen Bildschirmen wird die Grafik stark verkleinert – Schrift anheben. */
	.outtra-fluss__label { font-size: 16px; }
	.outtra-fluss__titel { font-size: 26px; }
	.outtra-fluss__titel-klein { font-size: 21px; }
	.outtra-fluss__klein { font-size: 17px; }

	.outtra-schritt {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   14d. Termin-Knopf (schwebend)
   -------------------------------------------------------------------------- */

.outtra-termin {
	position: fixed;
	right: clamp(16px, 2vw, 28px);
	bottom: clamp(16px, 2vw, 28px);
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 6px;
}

.outtra-termin__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-radius: var(--wp--custom--radius--voll);
	background: var(--o-text);
	color: var(--wp--preset--color--inverse);
	font-size: clamp(13.5px, 1vw, 15px);
	font-weight: 600;
	box-shadow: 0 10px 30px rgba(21, 23, 28, 0.22);
	transition: background-color 0.2s var(--o-kurve), transform 0.2s var(--o-kurve);
}

.outtra-termin__link:hover {
	background: var(--o-orange);
	color: var(--wp--preset--color--inverse);
	transform: translateY(-2px);
}

.outtra-termin__zu {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--o-weiss);
	color: var(--o-leise);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(21, 23, 28, 0.14);
}

@media (max-width: 599px) {
	.outtra-termin {
		right: 0;
		bottom: 0;
		left: 0;
		gap: 0;
		padding: 10px 12px env(safe-area-inset-bottom, 10px);
		background: var(--o-weiss);
		border-top: 1px solid var(--o-linie);
	}

	.outtra-termin__link {
		flex: 1;
		justify-content: center;
		padding: 13px 16px;
		border-radius: var(--wp--custom--radius--klein);
	}

	.outtra-termin__zu {
		margin-left: 10px;
		box-shadow: none;
	}

	/* Damit der Balken nichts verdeckt. */
	.outtra-fuss {
		padding-bottom: 72px !important;
	}
}

/* --------------------------------------------------------------------------
   15. Sprachumschalter
   -------------------------------------------------------------------------- */

.outtra-sprachen {
	position: relative;
	font-size: clamp(12.5px, 0.95vw, 14px);
}

.outtra-sprachen__schalter {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.6rem;
	border-radius: 4px;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
}

/* Den Standardpfeil von <details> entfernen und einen eigenen setzen. */
.outtra-sprachen__schalter::-webkit-details-marker { display: none; }
.outtra-sprachen__schalter::marker { content: ""; }

.outtra-sprachen__schalter::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.15s ease;
}

.outtra-sprachen[open] .outtra-sprachen__schalter::after {
	transform: translateY(10%) rotate(-135deg);
}

.outtra-sprachen__liste {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 60;
	min-width: 11rem;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background-color: var(--o-weiss);
	color: var(--o-text);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	box-shadow: var(--wp--preset--shadow--karte);
}

.outtra-sprachen__eintrag {
	margin: 0;
}

.outtra-sprachen__eintrag a,
.outtra-sprachen__eintrag.is-aktuell,
.outtra-sprachen__eintrag.is-geplant {
	display: block;
	padding: 0.45rem 0.6rem;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}

.outtra-sprachen__eintrag a:hover {
	background-color: var(--o-grau);
}

.outtra-sprachen__eintrag.is-aktuell {
	font-weight: 600;
}

/* Sprachen, die es noch nicht gibt: sichtbar, aber erkennbar inaktiv. */
.outtra-sprachen__eintrag.is-geplant {
	color: var(--o-leise);
	cursor: default;
}

.outtra-sprachen__eintrag.is-geplant span {
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   16. Details / FAQ – der native WordPress-Block, ohne JavaScript
   -------------------------------------------------------------------------- */

.wp-block-details {
	border-bottom: 1px solid var(--o-linie);
	padding: var(--wp--preset--spacing--40) 0;
}

.wp-block-details summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::marker { content: ""; }

.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1;
	color: var(--o-orange);
}

.wp-block-details[open] summary::after {
	content: "\2212"; /* Minuszeichen */
}

.wp-block-details > *:not(summary) {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--o-leise);
}

.has-surface-dark-background-color .wp-block-details,
.has-contrast-background-color .wp-block-details {
	border-bottom-color: var(--wp--preset--color--border-dark);
}

.has-surface-dark-background-color .wp-block-details > *:not(summary),
.has-contrast-background-color .wp-block-details > *:not(summary) {
	color: var(--wp--preset--color--muted-inverse);
}

/* --------------------------------------------------------------------------
   17. Kontaktformular
   -------------------------------------------------------------------------- */

.outtra-formular {
	max-width: 34rem;
}

.outtra-formular__feld {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.outtra-formular__feld label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.outtra-formular input,
.outtra-formular textarea,
.outtra-formular select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--o-text);
	background-color: var(--o-weiss);
	border: 1px solid var(--o-rahmen);
	border-radius: var(--wp--custom--radius--klein);
}

.outtra-formular select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
}

.outtra-formular input:focus,
.outtra-formular textarea:focus,
.outtra-formular select:focus {
	border-color: var(--o-orange);
}

.outtra-formular textarea {
	resize: vertical;
	min-height: 8rem;
}

/* Der Honigtopf gegen Bots. Fuer Menschen unsichtbar, aber nicht per
   display:none – manche Bots erkennen das und lassen das Feld dann leer. */
.outtra-formular__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.outtra-formular__absenden {
	margin-top: var(--wp--preset--spacing--50);
}

.outtra-formular__hinweis {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--normal);
	border: 1px solid var(--o-linie);
	background-color: var(--o-grau);
}
.outtra-formular__hinweis.is-erfolg, .outtra-formular__hinweis.is-danke { background-color: #FEF4EF; border-color: #FDDCC0; }
.outtra-formular__hinweis.is-fehler { background-color: #FDF1F0; border-color: #F3C9C4; }
.outtra-formular__hinweis.is-erfolg p:first-child::before, .outtra-formular__hinweis.is-danke p:first-child::before { content: ""; display: inline-block; width: 10px; height: 6px; margin: 0 10px 3px 0; border-left: 2px solid var(--o-orange); border-bottom: 2px solid var(--o-orange); transform: rotate(-45deg); }

.outtra-formular__hinweis p {
	margin: 0;
}

.outtra-formular__hinweis p + p {
	margin-top: 0.4rem;
	color: var(--o-leise);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   18. Bewegung nur, wenn gewuenscht
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.outtra-anim,
	.outtra-netz,
	.outtra-abschnitt > .wp-block-columns,
	.outtra-abschnitt > .wp-block-group,
	.outtra-schritt {
		opacity: 1 !important;
		transform: none !important;
	}

	.outtra-abschnitt > h2,
	.outtra-abschnitt > .outtra-einleitung,
	.wp-block-column,
	.outtra-loesung p.is-style-pille,
	.outtra-loesung .is-style-browserrahmen img,
	.outtra-loesung .is-style-browserrahmen video,
	.outtra-datahub__kaesten rect,
	.outtra-datahub__punkte circle,
	.outtra-wechsel__stapel > span {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	.is-style-abschnittskopf::after { transform: none !important; }
	.outtra-stimmen__raster > .outtra-stimme-klein,
	.outtra-partnerreihe > .outtra-partnerkarte { opacity: 1 !important; transform: none !important; }
	.outtra-netz__linien path, .outtra-netz__punkte circle { animation: none !important; }
	.outtra-datahub__linien path { stroke-dashoffset: 0 !important; }
	.outtra-fotobahn .wp-block-cover__image-background { animation: none !important; }
	.outtra-netz .outtra-netz__linien path { stroke-dashoffset: 0 !important; }
	.outtra-netz .outtra-netz__punkte circle { transform: none !important; }
	.outtra-logoband__spur { animation: none !important; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 12c. Über uns und Produktdaten-Anreicherung ------------------------------ */
.outtra-vergleich {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--normal);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
}
.outtra-vergleich__spalte { background: var(--wp--preset--color--base); padding: 1.25rem; }
.outtra-vergleich__spalte.is-nachher { background: var(--wp--preset--color--surface); }
.outtra-vergleich dl { margin: 1rem 0 0; display: grid; gap: .65rem; }
.outtra-vergleich dl > div { display: grid; grid-template-columns: 6.5em 1fr; gap: .5rem; align-items: baseline; }
.outtra-vergleich dt { font-family: var(--wp--preset--font-family--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--o-leise); }
.outtra-vergleich dd { margin: 0; line-height: 1.4; }
.outtra-vergleich dd.is-leer { color: var(--o-leise); }
.outtra-vergleich .is-vorher dd:not(.is-leer) { color: var(--o-leise); }
.outtra-vergleich .is-nachher dd { color: var(--wp--preset--color--contrast); }
@media (max-width: 599px) {
	.outtra-vergleich { grid-template-columns: 1fr; }
}

.outtra-zeitstrahl {
	list-style: none;
	margin: 2.5rem auto 0 !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 2.5rem;
}
.outtra-zeitstrahl li { position: relative; padding-top: 1.25rem; margin: 0; }
.outtra-zeitstrahl li::before {
	content: "";
	position: absolute; inset: 0 0 auto 0;
	height: 2px;
	background: var(--wp--preset--color--border);
}
.outtra-zeitstrahl li::after {
	content: "";
	position: absolute; top: -3px; left: 0;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--o-orange);
}
.outtra-zeitstrahl h3 { font-size: var(--wp--preset--font-size--medium); margin: .35rem 0 .5rem; }
.outtra-zeitstrahl p:last-child { font-size: var(--wp--preset--font-size--small); margin: 0; }
@media (max-width: 899px) { .outtra-zeitstrahl { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .outtra-zeitstrahl { grid-template-columns: 1fr; gap: 1.5rem; } }

.outtra-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 2.5rem;
}
.outtra-team__person { margin: 0; }
.outtra-team__person img { width: 100%; height: auto !important; max-height: none; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--wp--custom--radius--normal); display: block; }
.outtra-team__person figcaption { margin-top: .85rem; display: grid; gap: .1rem; }
.outtra-team__person figcaption strong { font-weight: 600; }
.outtra-team__person figcaption span { color: var(--o-leise); font-size: var(--wp--preset--font-size--small); }
.outtra-team__person.is-text { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.outtra-team__zitat { font-size: var(--wp--preset--font-size--medium); line-height: 1.4; margin: 0; text-wrap: balance; }
@media (max-width: 899px) { .outtra-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .outtra-team { grid-template-columns: 1fr; } }
.outtra-team__person.is-text { padding: clamp(20px, 1.9vw, 30px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.outtra-team { align-items: stretch; }
.outtra-hero__medien .outtra-hero__zahlen.is-eigene-zeile { grid-template-columns: 1fr; gap: 1.75rem; padding: clamp(20px, 2vw, 32px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-grau); margin: 0; }
.outtra-hero__medien .outtra-hero__zahlen.is-eigene-zeile .outtra-zahl { margin-bottom: .15rem; }
.outtra-team__platzhalter { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--wp--custom--radius--normal); background: var(--o-grau); border: 1px solid var(--o-linie); display: grid; place-items: center; font-family: var(--o-mono); font-size: 3rem; color: var(--o-leise); }

/* 12d. Hero Schmuck-Netz mit Berg-Hintergrund ------------------------------ */
.outtra-hero--schmuck-berg { position: relative; overflow: hidden; }
.outtra-hero--schmuck-berg > .outtra-hero__raster { position: relative; z-index: 1; }
.outtra-hero--schmuck-berg .outtra-hero__berg { z-index: 0; }
.outtra-nowrap { white-space: nowrap; }
/* Schmuck-Netz mit Berg: Grafik groesser (7 von 12 Spalten), Kacheln im 720er-Raster, weisser Sekundaer-Button. */
.outtra-hero--schmuck-berg .outtra-hero__titel,
.outtra-hero--schmuck-berg .outtra-hero__text { grid-column: 1 / 7; }
.outtra-hero--schmuck-berg .outtra-hero__medien { grid-column: 7 / -1; padding-left: clamp(8px, 1vw, 20px); width: calc(100% + var(--o-rand)); max-width: none; }
.outtra-hero--schmuck-berg h1.is-orange-h1 { color: var(--o-text); }
.outtra-hero--schmuck-berg .outtra-hero__unterzeile { color: var(--o-orange); max-width: none; white-space: nowrap; font-size: clamp(20px, 1.9vw, 28px); font-weight: 400; }
@media (max-width: 899px) { .outtra-hero--schmuck-berg .outtra-hero__unterzeile { white-space: normal; } }
.outtra-netz-schmuck--gross .outtra-kachel { width: calc(86 / 720 * 100%); }
.outtra-netz-schmuck--gross .outtra-kachel.is-signet { width: calc(150 / 720 * 100%); }
.outtra-netz-schmuck--gross .outtra-kachel.is-signet img { width: 86%; height: 86%; }
.outtra-netz-schmuck--gross .outtra-netz-schmuck__spalte { transform: none; font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.12em; }
.outtra-netz-schmuck--gross .outtra-netz-schmuck__spalte.is-rechts { left: auto; }
.outtra-netz-schmuck--gross .outtra-kachel:not(.is-signet) img { width: 88%; height: 72%; }
.outtra-hero--schmuck-berg .wp-block-button.is-style-sekundaer .wp-block-button__link { background-color: var(--o-weiss); }
.outtra-hero--schmuck-berg .wp-block-button.is-style-sekundaer .wp-block-button__link:hover { background-color: var(--o-orange); }
@media (max-width: 899px) {
	.outtra-hero--schmuck-berg .outtra-hero__titel,
	.outtra-hero--schmuck-berg .outtra-hero__text,
	.outtra-hero--schmuck-berg .outtra-hero__medien { grid-column: 1 / -1; width: 100%; }
}

/* Farbige Logos einfarbig machen: Badge mit Transparenz nur entsaettigen, Logo auf weissem Grund multiplizieren. */
.outtra-kachel.is-grau img { filter: grayscale(1) contrast(1.05); }
.outtra-kachel.is-mono-weiss img { filter: grayscale(1) contrast(3); mix-blend-mode: multiply; }
/* Schmuck-Netz mit Berg: Logos in Originalfarben. */
.outtra-netz-schmuck--gross .outtra-kachel img { filter: none; mix-blend-mode: normal; }
/* Startseiten-Hero: mehr Luft oben und unten. */
.outtra-hero--schmuck-berg { min-height: clamp(600px, 82svh, 900px); padding-block: clamp(56px, 6.5vw, 112px) !important; }
@media (max-width: 899px) { .outtra-hero--schmuck-berg { min-height: 0; padding-block: clamp(32px, 6vw, 56px) !important; } }

/* Rueckfluss: Verfuegbarkeiten der Haendler laufen in Dunkel zurueck zu den Marken. */
.outtra-leitung.is-fluss.is-rueck { stroke: var(--o-text); opacity: 0.75; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .outtra-leitung.is-fluss.is-rueck { display: none; } }
/* Kombi-Hero: ruhigerer Fluss – nur orange, langsamer, ein Impuls je Leitung. */
.outtra-netz-schmuck--gross .outtra-leitung.is-fluss { stroke-dasharray: 22 640; stroke-dashoffset: 662; animation: outtra-leitung-ruhig 7.5s linear infinite; }
.outtra-netz-schmuck--gross .outtra-leitung.is-fluss.is-rueck { stroke: var(--o-orange); opacity: 0.85; animation-direction: reverse; }
@keyframes outtra-leitung-ruhig { to { stroke-dashoffset: 0; } }

/* Video-Schalter als kleines Symbol auf dem grossen Video statt als Knopf unter der Einleitung. */
.outtra-stimme-gross { position: relative; }
.outtra-videoschalter__zeile.is-ueberlagert { position: absolute; left: 16px; bottom: 16px; margin: 0; z-index: 2; }
.is-ueberlagert .outtra-videoschalter { padding: 10px; gap: 0; box-shadow: 0 2px 10px rgba(21, 23, 28, 0.12); }
.is-ueberlagert .outtra-videoschalter__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1023px) { .outtra-videoschalter__zeile.is-ueberlagert { bottom: auto; top: 16px; } }

/* Datenfluss, Fassung Oktober: baut sich von links nach rechts auf. Spaetere Schritte liegen blass im Hintergrund. */
.outtra-fluss [data-schritt] { transition: opacity 0.5s var(--o-kurve); }
.outtra-fluss [data-schritt].is-spaeter { opacity: 0.16; }
.outtra-fluss__linien path.is-rueck { stroke: var(--o-text); }
.outtra-fluss__punkte circle.is-rueck { fill: var(--o-text); }
.outtra-fluss__linien path.is-weg { stroke: var(--o-text); stroke-dasharray: none; stroke-width: 1.4; }
.outtra-fluss__linien path.is-laden { stroke-width: 2; }
.outtra-fluss__punkte circle.is-weg { fill: var(--o-text); }
.outtra-fluss__chips rect { fill: var(--o-grau); stroke: var(--o-linie); stroke-width: 1; }
.outtra-fluss__chip { font-family: var(--o-mono); font-size: 10.5px; letter-spacing: 0.06em; fill: var(--o-text); }
.outtra-fluss__hub.is-aktiv .outtra-fluss__chips rect, .outtra-fluss__hub.is-zeigen .outtra-fluss__chips rect { fill: var(--o-weiss); stroke: var(--o-orange); }
.outtra-fluss__ort { font-size: 12px; font-weight: 600; letter-spacing: -0.015em; }
.outtra-fluss__label.is-laden { letter-spacing: 0.1em; font-size: 11px; }
.outtra-fluss__ergebnis circle { fill: var(--o-text) !important; stroke: var(--o-text) !important; }
.outtra-fluss__ergebnis.is-aktiv circle, .outtra-fluss__ergebnis.is-zeigen circle { fill: var(--o-orange) !important; stroke: var(--o-orange) !important; }
.outtra-fluss__ergebnis .outtra-fluss__icon.is-hell { stroke: var(--wp--preset--color--inverse); }
.outtra-fluss__ergebnis text { fill: var(--o-text); }
.outtra-fluss__ergebnis .outtra-fluss__label.is-laden { fill: var(--o-leise) !important; }
.outtra-fluss__ergebnis.is-aktiv .outtra-fluss__label.is-laden, .outtra-fluss__ergebnis.is-zeigen .outtra-fluss__label.is-laden { fill: var(--o-orange) !important; }
.outtra-fluss__legende line { stroke-width: 2; stroke-linecap: round; }
.outtra-fluss__legende .is-orange { stroke: var(--o-orange); stroke-dasharray: 4 6; }
.outtra-fluss__legende .is-dunkel { stroke: var(--o-text); stroke-dasharray: 4 6; }
text.outtra-fluss__label[data-schritt] { fill: var(--o-leise) !important; }
text.outtra-fluss__label[data-schritt].is-aktiv, text.outtra-fluss__label[data-schritt].is-zeigen { fill: var(--o-orange) !important; }

/* Netz kompakt: Kopf links, einfache Netzgrafik rechts, Karten darunter. */
.outtra-netz-kompakt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.outtra-netz-kompakt__text .is-style-abschnittskopf { grid-column: 1 / -1; }
.outtra-netz-kompakt__grafik { padding: clamp(16px, 1.8vw, 28px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-grau); }
.outtra-netz-einfach__svg { display: block; width: 100%; height: auto; font-family: var(--wp--preset--font-family--text); overflow: visible; }
.outtra-netz-einfach__knoten rect { fill: var(--o-weiss); stroke: var(--o-linie); stroke-width: 1.2; }
.outtra-netz-einfach__knoten rect.is-kunde { fill: var(--o-weiss); stroke: var(--o-orange); stroke-width: 1.8; }
.outtra-netz-einfach__label { font-family: var(--o-mono); font-size: 11px; letter-spacing: 0.14em; fill: var(--o-orange); }
.outtra-netz-einfach__hub { fill: var(--o-weiss); stroke: var(--o-linie); stroke-width: 1.2; }
.outtra-netz-einfach__titel { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; fill: var(--o-text); }
.outtra-netz-einfach__klein { font-size: 12px; fill: var(--o-leise); }
.outtra-netz-einfach__titel.is-hell, .outtra-netz-einfach__klein.is-hell { fill: var(--wp--preset--color--inverse); }
.outtra-netz-einfach__klein.is-hell { opacity: 0.8; }
.outtra-netz-einfach__linien path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 7; }
.outtra-netz-einfach__linien .is-orange { stroke: var(--o-orange); opacity: 0.55; }
.outtra-netz-einfach__linien .is-dunkel { stroke: var(--o-text); opacity: 0.45; }
.outtra-netz-einfach__linien .is-beide, .outtra-netz-einfach__linien .is-laden { stroke: var(--o-text); stroke-dasharray: none; stroke-width: 1.6; opacity: 0.8; }
.outtra-netz-einfach__linien .is-puls { opacity: 1; stroke-width: 2.4; stroke-dasharray: 14 240; stroke-dashoffset: 254; animation: outtra-netz-puls 5.5s linear infinite; }
.outtra-netz-einfach__linien .is-dunkel.is-puls { animation-delay: 2.5s; }
@keyframes outtra-netz-puls { to { stroke-dashoffset: 0; } }
.outtra-netz-einfach__legende line { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; }
.outtra-netz-einfach__legende .is-orange { stroke: var(--o-orange); }
.outtra-netz-einfach__legende .is-dunkel { stroke: var(--o-text); }
@media (prefers-reduced-motion: reduce) { .outtra-netz-einfach__linien .is-puls { display: none; } }
@media (max-width: 899px) { .outtra-netz-kompakt { grid-template-columns: 1fr; } }

/* Netz kompakt: Rollen-Eyebrows orange. */
.outtra-netzfluss .outtra-kartenreihe .outtra-karte__art, #netz .outtra-kartenreihe .outtra-karte__art { color: var(--o-orange); }

/* Logobaender: Kacheln verlinkt. */
.outtra-band .is-style-logo-kachel a { display: block; }
.outtra-band .is-style-logo-kachel a:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 4px; border-radius: 6px; }

/* 13. Referenzen ------------------------------------------------------------ */
.outtra-referenz__kopf { display: grid; gap: 1.5rem; padding: clamp(20px, 2vw, 32px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-grau); }
.outtra-referenz__logo { display: block; width: auto; max-width: 220px; height: 44px; object-fit: contain; object-position: left; filter: brightness(0); }
.outtra-referenz__logo.is-original { filter: none; }
.outtra-referenz__logo--hero { height: 52px; }
.outtra-referenz__fakten { margin: 0; display: grid; gap: .8rem; }
.outtra-referenz__fakten > div { display: grid; grid-template-columns: 7em 1fr; gap: .75rem; align-items: baseline; }
.outtra-referenz__fakten dt { font-family: var(--o-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--o-leise); }
.outtra-referenz__fakten dd { margin: 0; font-size: var(--wp--preset--font-size--small); }
.outtra-referenz__video { margin: 2.5rem 0 0; position: relative; border-radius: var(--wp--custom--radius--normal); overflow: hidden; border: 1px solid var(--o-linie); background: var(--o-text); }
.outtra-referenz__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.outtra-referenz__sprache { position: absolute; top: 14px; left: 14px; margin: 0; padding: 4px 10px; border-radius: var(--wp--custom--radius--voll); background: rgba(255,255,255,.9); color: var(--o-text) !important; }
.outtra-referenz__zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; margin-top: 2rem; }
.outtra-referenz__text { font-size: var(--wp--preset--font-size--medium); line-height: 1.55; max-width: 60ch; }
.outtra-referenz__zitat { margin: 0; padding: clamp(24px, 2.6vw, 40px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.outtra-referenz__zitat p { margin: 0 0 1.25rem; font-size: var(--wp--preset--font-size--large); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; text-wrap: balance; }
.outtra-referenz__zitat footer, .outtra-referenz__band figcaption { display: grid; gap: .1rem; font-size: var(--wp--preset--font-size--small); }
.outtra-referenz__zitat footer span, .outtra-referenz__band figcaption span { color: var(--o-leise); }
.outtra-referenz__band { margin: 0; max-width: 56ch; }
.outtra-referenz__band blockquote { margin: 1rem 0 1.5rem; padding: 0; border: 0; font-size: var(--wp--preset--font-size--x-large); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.outtra-referenz__band figcaption span { color: var(--wp--preset--color--muted-inverse); }
.outtra-referenz-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 2.5rem; }
.outtra-referenz-karte { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); color: inherit; text-decoration: none; transition: transform .35s var(--o-kurve), box-shadow .35s var(--o-kurve); }
.outtra-referenz-karte:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(21,23,28,.08); }
.outtra-referenz-karte__bild img { display: block; width: 100%; height: auto !important; max-height: none; aspect-ratio: 16 / 10; object-fit: cover; }
.outtra-referenz-karte__text { display: flex; flex-direction: column; gap: .6rem; padding: clamp(18px, 1.8vw, 26px); flex: 1; }
.outtra-referenz-karte__logo { height: 28px; max-width: 150px; margin-bottom: .4rem; }
.outtra-referenz-karte h3 { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.3; }
.outtra-referenz-karte__zitat { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--o-fliesstext); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.outtra-referenz-karte .outtra-partnerkarte__link { margin-top: auto; padding-top: .5rem; }
@media (max-width: 899px) { .outtra-referenz-raster { grid-template-columns: 1fr 1fr; } .outtra-referenz__zwei { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .outtra-referenz-raster { grid-template-columns: 1fr; } .outtra-referenz__fakten > div { grid-template-columns: 1fr; gap: .15rem; } }

/* „Wusstest du?“-Kasten in den Loesungen. */
.outtra-wusstest { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.outtra-wusstest p:not([class*="is-style"]) { font-size: var(--wp--preset--font-size--medium); line-height: 1.5; max-width: 40ch; }
.outtra-wusstest strong.is-orange { color: var(--o-orange); font-weight: 700; font-variant-numeric: tabular-nums; }
.outtra-loesung__text strong { font-weight: 600; color: var(--o-text); }

/* Browserrahmen mit leichtem Schatten, damit die Videos nicht flach auf der Flaeche liegen. */
.outtra-loesung .wp-block-group.is-style-browserrahmen { box-shadow: 0 18px 44px rgba(21, 23, 28, 0.10), 0 2px 6px rgba(21, 23, 28, 0.05); }

/* Wusstest du? – zwei grosse Zahlen nebeneinander. */
.outtra-wusstest { padding-top: 10px; padding-bottom: 10px; }
.outtra-wusstest__zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); margin-top: .75rem; }
.wp-block-group.is-style-hinweis .outtra-wusstest__zahlen p.outtra-zahl { font-size: clamp(40px, 3.6vw, 56px); line-height: 1; margin: 0 0 .4rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--o-orange); max-width: none; }
.wp-block-group.is-style-hinweis .outtra-wusstest__zahlen p:not(.outtra-zahl) { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.45; max-width: 22ch; color: var(--o-fliesstext); }
@media (max-width: 599px) { .outtra-wusstest__zahlen { grid-template-columns: 1fr; } }

/* Netzgrafik: Kunden ausserhalb des Datenstroms. */
.outtra-netz-einfach__linien .is-sehen { stroke: var(--o-leise); stroke-dasharray: 2 6; stroke-width: 1.4; opacity: .8; }
.outtra-netz-einfach__grenze { stroke: var(--o-linie); stroke-width: 1; stroke-dasharray: 6 6; }
.outtra-netz-einfach__label.is-grau { fill: var(--o-leise); }
.outtra-netz-einfach__legende .is-grau { stroke: var(--o-leise); stroke-dasharray: 2 5; }

/* Netzgrafik: Hinweis zu den Kunden unter dem Dreieck. */
.outtra-netz-einfach__hinweis circle { fill: var(--o-orange); }
.outtra-netz-einfach__klein.is-text { fill: var(--o-text); font-size: 12.5px; }

/* Netzgrafik: praegnanter – groessere Knoten, kraeftigere Linien, Halo um die Drehscheibe. */
.outtra-netz-einfach__halo { fill: var(--o-orange-hell); opacity: .55; }
.outtra-netz-einfach__hub { stroke: var(--o-orange); stroke-width: 2; }
.outtra-netz-einfach__knoten rect.is-knoten { stroke: var(--o-rahmen); stroke-width: 1.5; filter: drop-shadow(0 8px 18px rgba(21, 23, 28, 0.08)); }
.outtra-netz-einfach__titel { font-size: 21px; font-weight: 700; }
.outtra-netz-einfach__klein { font-size: 13px; }
.outtra-netz-einfach__label { font-size: 12px; letter-spacing: 0.18em; }
.outtra-netz-einfach__linien path { stroke-width: 2.2; stroke-dasharray: 5 8; }
.outtra-netz-einfach__linien .is-orange { opacity: .7; }
.outtra-netz-einfach__linien .is-dunkel { opacity: .6; }
.outtra-netz-einfach__linien .is-puls { stroke-width: 3.4; stroke-dasharray: 18 240; stroke-dashoffset: 258; animation: outtra-netz-puls 4.5s linear infinite; }
.outtra-netz-kompakt__grafik { background: var(--o-weiss); }

/* Netzgrafik: Marken und Haendler gleichwertig zur Drehscheibe, Linien feiner. */
.outtra-netz-einfach__halo.is-knoten { fill: var(--o-grau); opacity: 1; stroke: none; }
.outtra-netz-einfach__knoten rect.is-knoten:not(.outtra-netz-einfach__halo) { stroke: var(--o-text); stroke-width: 1.6; filter: none; }
.outtra-netz-einfach__titel { font-size: 24px; }
.outtra-netz-einfach__klein { font-size: 13.5px; }
.outtra-netz-einfach__linien path { stroke-width: 1.8; }
.outtra-netz-einfach__linien .is-puls { stroke-width: 2.6; }

/* 14. Aufklappmenue (Spalten) ------------------------------------------------ */
.wp-block-navigation .outtra-menue { display: grid !important; grid-template-columns: repeat(var(--spalten, 3), max-content); gap: clamp(16px, 1.8vw, 28px); padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px) !important; width: max-content; max-width: min(94vw, 1040px); left: 50% !important; transform: translate(-50%, 6px); top: calc(100% + 18px) !important; border-radius: 16px; transition: opacity .22s var(--o-kurve), transform .28s var(--o-kurve), visibility 0s linear .22s; }
.outtra-kopf .wp-block-navigation-submenu:hover > .outtra-menue, .outtra-kopf .wp-block-navigation-submenu:focus-within > .outtra-menue { transform: translate(-50%, 0); transition: opacity .22s var(--o-kurve), transform .28s var(--o-kurve), visibility 0s; }
.outtra-kopf .wp-block-navigation-submenu > .outtra-menue::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.wp-block-navigation .outtra-menue.has-fuss { padding-bottom: 0 !important; }
.wp-block-navigation .outtra-menue--2 { --spalten: 2; }
.wp-block-navigation .outtra-menue--3 { --spalten: 3; }
.outtra-menue__gruppe { list-style: none; min-width: 0; max-width: 360px; }
.outtra-menue__gruppe > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.outtra-menue__titel { margin: 0 0 .5rem !important; padding: 0 .55rem .5rem; border-bottom: 1px solid var(--o-linie); font-family: var(--o-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--o-orange); }
.wp-block-navigation .outtra-menue .outtra-menue__link { display: grid !important; grid-template-columns: 28px 1fr; align-items: start; column-gap: 10px; padding: .55rem .55rem; border-radius: 10px; color: var(--o-text); }
.wp-block-navigation .outtra-menue .outtra-menue__link:hover, .wp-block-navigation .outtra-menue .outtra-menue__link:focus-visible { background: var(--o-grau); color: var(--o-text); }
.wp-block-navigation .outtra-menue svg.outtra-menue__icon { flex: none; box-sizing: border-box; width: 28px !important; height: 28px !important; padding: 6px; margin-top: 1px; border: 1px solid var(--o-linie); border-radius: 9px; background: var(--o-weiss); color: var(--o-leise); transition: color .2s var(--o-kurve), border-color .2s var(--o-kurve); }
.wp-block-navigation .outtra-menue .outtra-menue__link:hover svg.outtra-menue__icon, .wp-block-navigation .outtra-menue .outtra-menue__link:focus-visible svg.outtra-menue__icon { color: var(--o-weiss); background: var(--o-text); border-color: var(--o-text); }
.wp-block-navigation .outtra-menue .outtra-menue__link { transition: background .18s var(--o-kurve), transform .18s var(--o-kurve); }
.wp-block-navigation .outtra-menue .outtra-menue__link:hover, .wp-block-navigation .outtra-menue .outtra-menue__link:focus-visible { transform: translateX(3px); }
.wp-block-navigation .outtra-menue .outtra-menue__link:hover .outtra-menue__text { color: var(--o-text); }
.outtra-menue__inhalt { display: grid; gap: 1px; min-width: 0; }
.outtra-menue__name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; white-space: nowrap; }
.outtra-menue__text { font-size: 12.5px; font-weight: 400; color: var(--o-leise); line-height: 1.35; text-wrap: pretty; }
.outtra-menue__pille { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #E6F5EE; color: var(--o-gruen); font-family: var(--o-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.outtra-menue__fuss { grid-column: 1 / -1; list-style: none; margin: .6rem calc(-1 * clamp(18px, 1.8vw, 24px)) 0; padding: .7rem clamp(18px, 1.8vw, 24px); border-top: 1px solid var(--o-linie); background: var(--o-grau); font-size: 12.5px; font-weight: 500; border-radius: 0 0 16px 16px; }
.outtra-menue__fuss a { color: var(--o-text); }
.outtra-menue__fuss a:hover { color: var(--o-orange); }
.outtra-menue__fuss a:hover .outtra-pfeil { transform: translateX(3px); }
.outtra-menue__fuss .outtra-pfeil { display: inline-block; transition: transform .2s var(--o-kurve); }
/* aktiver Hauptpunkt: orange Unterstreichung wie im Entwurf */
.outtra-kopf .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item { position: relative; }
.outtra-kopf .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { color: var(--o-orange); }
.outtra-kopf .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content, .outtra-kopf .wp-block-navigation-submenu:focus-within > .wp-block-navigation-item__content { color: var(--o-orange); }
.outtra-kopf .wp-block-navigation-submenu::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: var(--o-orange); opacity: 0; transition: opacity .25s var(--o-kurve); }
.outtra-kopf .wp-block-navigation-submenu:hover::after, .outtra-kopf .wp-block-navigation-submenu:focus-within::after { opacity: 1; }
/* Partner-Eyebrows in Gruen, wie die Pille im Menue */
p.is-style-mono-label.is-gruen { color: var(--o-gruen) !important; }
/* Handy-Overlay: Spalten untereinander */
@media (max-width: 599px) {
	.wp-block-navigation .outtra-menue { grid-template-columns: 1fr; width: auto; max-width: none; transform: none; left: auto !important; top: auto !important; padding: .5rem 0 0 !important; gap: 1rem; }
	.outtra-menue__gruppe { min-width: 0; max-width: none; }
	.outtra-menue__fuss { margin: .5rem 0 0; border-radius: 8px; }
	.outtra-kopf .wp-block-navigation-submenu::after { display: none; }
}

/* 15. Menue-Insel: abgerundeter Kasten um die Hauptpunkte (Vorschlag 26.10.) --------- */
@media (min-width: 600px) {
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation__container { padding: 4px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); gap: 2px !important; }
	.outtra-kopf .wp-block-navigation.is-insel.is-insel-orange .wp-block-navigation__container { border-color: var(--o-orange-hell); border-color: color-mix(in srgb, var(--o-orange) 45%, white); }
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation__container > .wp-block-navigation-item { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; transition: background .2s var(--o-kurve), box-shadow .2s var(--o-kurve); }
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation__container > .wp-block-navigation-item:hover,
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item { background: var(--o-grau); box-shadow: none; }
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 0; }
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation-submenu__toggle { padding: 0; margin-left: 2px; }
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation-submenu::after { display: none; }
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation-submenu > .outtra-menue { top: calc(100% + 12px) !important; }
	.outtra-kopf .wp-block-navigation.is-insel .wp-block-navigation-submenu > .outtra-menue::before { top: -14px; height: 14px; }
}

/* Kombi-Hero mit Berg: kein Punktraster hinter dem Schaltbild. */
.outtra-hero--schmuck-berg .outtra-netz-schmuck::before { display: none; }

/* 16. Netzgrafik aus dem Claude-Design-Handoff (26.10.2026) -------------------- */
.outtra-netz-kompakt__grafik { padding: 0; border: 0; background: none; }
.outtra-netzgrafik { margin: 0; max-width: 620px; }
.outtra-netzgrafik svg { display: block; width: 100%; height: auto; }
.outtra-netzgrafik .narrow { display: none; }
@media (max-width: 480px) { .outtra-netzgrafik .wide { display: none; } .outtra-netzgrafik .narrow { display: block; } }
/* Grafik auf dunklerem Abschnitt: weisse Tafel, Karten in der Flaechenfarbe, Signet mit orangem Ring. */
.outtra-netzgrafik .panel { fill: var(--o-weiss); stroke: var(--o-linie); }
.outtra-netzgrafik .card { fill: var(--o-grau); stroke: var(--o-linie); }
.outtra-netzgrafik .hub { fill: var(--o-weiss); stroke: none; }
.outtra-netzgrafik .eyebrow { font: 500 19px var(--o-mono); letter-spacing: 0.16em; fill: var(--o-orange); } /* OUTTRA ueber dem Signet in Mono (06.11.2026) */
.outtra-netzgrafik .title { font: 700 17px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-netzgrafik .sub, .outtra-netzgrafik .lg { font: 400 12.5px var(--wp--preset--font-family--text); fill: var(--o-leise); }
.outtra-netzgrafik .base { fill: none; stroke-width: 1.25; stroke-dasharray: 4 4; }
.outtra-netzgrafik .base.p { stroke: #F0A07E; } .outtra-netzgrafik .base.v { stroke: #8F8B85; }
.outtra-netzgrafik .pkt { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: 9 91; stroke-dashoffset: 9; animation: outtra-netz-travel 4s cubic-bezier(.45, 0, .55, 1) infinite; }
.outtra-netzgrafik .pkt.p { stroke: var(--o-orange); } .outtra-netzgrafik .pkt.v { stroke: #2E2D2B; }
.outtra-netzgrafik .key { fill: none; stroke-width: 1.5; stroke-dasharray: 4 3; }
.outtra-netzgrafik .key.p { stroke: var(--o-orange); } .outtra-netzgrafik .key.v { stroke: #2E2D2B; }
@keyframes outtra-netz-travel { 0% { stroke-dashoffset: 9; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -91; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .outtra-netzgrafik .pkt { animation: none; opacity: 0; } }


/* Fuss: Adresse unter dem Logo. */
.outtra-fuss__adresse { font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--o-leise); }
/* Fuss: Platz fuer den schwebenden Termin-Knopf, damit Impressum/Datenschutz/AGB frei bleiben. */
.outtra-fuss__leiste { padding-right: clamp(0px, 20vw, 240px); }
@media (max-width: 599px) { .outtra-fuss__leiste { padding-right: 0; padding-bottom: 72px; } }

/* Fuss: LinkedIn-Link unter der Adresse. */
.outtra-fuss__social { margin: 14px 0 0; }
.outtra-fuss__social + .outtra-fuss__social { margin-top: 8px; }
.outtra-fuss__social a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--o-text); text-decoration: none; }
.outtra-fuss__social a:hover { color: var(--o-orange); }

/* 17. Newsletter ------------------------------------------------------------- */
.outtra-newsletter .outtra-formular__hinweis { margin-bottom: 1rem; }
.outtra-newsletter__eingabe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.outtra-newsletter.is-kompakt .outtra-newsletter__eingabe { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.3fr) auto; }
.outtra-newsletter-fuss .outtra-newsletter.is-kompakt .outtra-newsletter__eingabe { grid-template-columns: 1fr 1fr; }
.outtra-newsletter-fuss .outtra-newsletter.is-kompakt .outtra-formular__feld--email { grid-column: 1 / -1; }
.outtra-newsletter-fuss .outtra-newsletter.is-kompakt .outtra-formular__absenden { grid-column: 1 / -1; }
.outtra-newsletter-fuss .outtra-newsletter.is-kompakt .wp-element-button { width: 100%; }
.outtra-newsletter__eingabe .outtra-formular__feld, .outtra-newsletter__eingabe .outtra-formular__absenden { margin: 0; }
.outtra-newsletter__eingabe label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.outtra-newsletter.is-voll .outtra-newsletter__eingabe label { position: static; width: auto; height: auto; clip: auto; }
.outtra-newsletter__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.outtra-newsletter__zeile .outtra-formular__feld { margin: 0 0 12px; }
.outtra-newsletter select { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid var(--o-linie); border-radius: 8px; background: var(--o-weiss); font: inherit; color: var(--o-text); }
.outtra-newsletter__recht { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--o-leise); max-width: 60ch; }
.outtra-newsletter__recht a { color: inherit; text-decoration: underline; }
/* Fuss-Zeile */
.outtra-newsletter-fuss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(24px, 2.6vw, 40px); margin-bottom: clamp(32px, 3.6vw, 56px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.outtra-newsletter-fuss__text h3 { margin: .4rem 0 .5rem; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
.outtra-newsletter-fuss__text p:last-child { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--o-fliesstext); max-width: 44ch; }
.outtra-newsletter-fuss .outtra-newsletter__recht { max-width: none; }
/* Abschnitt auf Unterseiten + Karte auf der Newsletter-Seite */
.outtra-newsletter-block .outtra-newsletter { max-width: 560px; margin-top: 1.5rem; }
.outtra-newsletter-karte { padding: clamp(20px, 2.2vw, 32px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); box-shadow: var(--wp--preset--shadow--karte); }
@media (max-width: 899px) { .outtra-newsletter-fuss { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .outtra-newsletter__eingabe, .outtra-newsletter.is-kompakt .outtra-newsletter__eingabe, .outtra-newsletter__zeile { grid-template-columns: 1fr; } .outtra-newsletter__eingabe .wp-element-button { width: 100%; } }
.outtra-newsletter input, .outtra-newsletter select { box-sizing: border-box; min-width: 0; max-width: 100%; }

/* Abschnitt 02: CTA unter der Einleitung. */
.outtra-netz-kompakt__cta { margin-top: clamp(20px, 2vw, 28px); }


/* Vorsatz wie "bis zu" vor einer Kennzahl kleiner. */
.outtra-zahl small { font-size: 0.42em; font-weight: 500; letter-spacing: 0; vertical-align: 0.35em; }

/* Sehr kompakte Wortmarken (z. B. Rab) etwas kleiner laufen lassen. */
.outtra-band .is-style-logo-kachel.is-klein img { height: 42px; }

/* Schwebender Termin-Hinweis nicht auf der Startseite. */
.home .outtra-termin { display: none; }

/* Fussbereich dunkel. */
.outtra-fuss.has-surface-dark-background-color {
	color: var(--wp--preset--color--muted-inverse);
	border-top: 0;
}
.outtra-fuss.has-surface-dark-background-color h3.outtra-fuss__titel,
.outtra-fuss.has-surface-dark-background-color .outtra-fuss__social a {
	color: var(--wp--preset--color--inverse);
}
.outtra-fuss.has-surface-dark-background-color .outtra-fuss__adresse { color: var(--wp--preset--color--muted-inverse); }
.outtra-fuss.has-surface-dark-background-color a:hover,
.outtra-fuss.has-surface-dark-background-color .outtra-fuss__social a:hover { color: var(--o-orange); }
.outtra-fuss.has-surface-dark-background-color .outtra-fuss__leiste { border-top-color: rgba(255, 255, 255, 0.14); }

/* Partnerkarten: Logozeile gleich hoch, Texte beginnen oben buendig. */
.outtra-partnerkarte__logo { height: 38px; }
.outtra-partnerkarte .outtra-partnerkarte__art { margin-top: 0 !important; }

/* Partnerlogos groesser; Wortmarken (Frontnow) bleiben in der Breite begrenzt, alle mittig in der Logozeile. */
.outtra-partnerkarte__logo { height: 52px; display: flex; align-items: center; }
.outtra-partnerkarte__logo img { max-height: 52px; max-width: 190px; }
.outtra-partnerkarte__logo { height: 64px; }
.outtra-partnerkarte__logo img[alt="OMIS"],
.outtra-partnerkarte__logo img[alt="Chainbalance"] { max-height: 64px; max-width: 220px; }

/* --------------------------------------------------------------------------
   Kontaktseite: Formular im Hero, rechts Schmuckbild mit Haendler-Hinweis
   -------------------------------------------------------------------------- */
.outtra-hero--kontakt { min-height: 0; }
.outtra-hero--kontakt .outtra-hero__titel { align-self: end; }
.outtra-hero--kontakt .outtra-hero__absatz { margin-bottom: clamp(18px, 1.8vw, 28px); }
.outtra-hero--kontakt .outtra-formular { max-width: 36rem; }
.outtra-hero--kontakt .outtra-formular__hinweis { margin-bottom: var(--wp--preset--spacing--40); }
.outtra-hero--kontakt .outtra-hero__medien {
	position: relative;
	align-self: stretch;
	grid-column: 8 / -1;
	padding-left: 0;
}
.outtra-hero--kontakt .outtra-kontakt__foto { height: 100%; }
.outtra-hero--kontakt .outtra-kontakt__foto img {
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--normal);
}
.outtra-kontakt__stoerer {
	position: absolute;
	left: clamp(16px, 1.8vw, 28px);
	right: clamp(16px, 1.8vw, 28px);
	top: clamp(16px, 1.8vw, 28px);
	max-width: 24rem;
	padding: clamp(18px, 1.6vw, 24px);
	background: var(--o-weiss);
	border-radius: var(--wp--custom--radius--normal);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
	animation: outtra-rise 0.7s 1100ms var(--o-kurve) both;
}
.outtra-kontakt__stoerer > p { margin: 0; }
.outtra-kontakt__stoerer-titel { font-weight: 600; font-size: var(--wp--preset--font-size--medium); letter-spacing: -0.01em; }
.outtra-kontakt__stoerer > p + p { margin-top: .55rem; }
.outtra-kontakt__stoerer > p:nth-child(2) { font-size: var(--wp--preset--font-size--small); color: var(--o-fliesstext); }
@media (max-width: 899px) {
	.outtra-hero--kontakt .outtra-hero__titel,
	.outtra-hero--kontakt .outtra-hero__text,
	.outtra-hero--kontakt .outtra-hero__medien { grid-column: 1 / -1; grid-row: auto; }
	.outtra-hero--kontakt .outtra-hero__medien { border-top: 0; padding-top: 0; }
	.outtra-hero--kontakt .outtra-formular, .outtra-hero--kontakt .outtra-formular__feld { max-width: 100%; min-width: 0; }
	.outtra-hero--kontakt .outtra-hero__medien { align-self: start; }
	.outtra-hero--kontakt .outtra-kontakt__foto { height: auto; }
	.outtra-hero--kontakt .outtra-kontakt__foto img { height: auto; aspect-ratio: 3 / 2; }
	.outtra-kontakt__stoerer { position: static; max-width: none; margin-top: 16px; box-shadow: none; border: 1px solid var(--o-linie); }
}

/* Kontaktseite: Seitenaufbau in Schritten */
.outtra-hero--kontakt .outtra-formular__feld,
.outtra-hero--kontakt .outtra-formular__absenden,
.outtra-hero--kontakt .outtra-newsletter__recht { animation: outtra-rise 0.6s var(--o-kurve) both; }
.outtra-hero--kontakt .outtra-formular__feld:nth-of-type(1) { animation-delay: 260ms; }
.outtra-hero--kontakt .outtra-formular__feld:nth-of-type(2) { animation-delay: 360ms; }
.outtra-hero--kontakt .outtra-formular__feld:nth-of-type(3) { animation-delay: 460ms; }
.outtra-hero--kontakt .outtra-formular__absenden { animation-delay: 560ms; }
.outtra-hero--kontakt .outtra-newsletter__recht { animation-delay: 640ms; }
@keyframes outtra-vorhang {
	from { clip-path: inset(0 0 100% 0 round var(--wp--custom--radius--normal)); }
	to { clip-path: inset(0 0 0 0 round var(--wp--custom--radius--normal)); }
}
@keyframes outtra-zoom-aus { from { transform: scale(1.08); } to { transform: scale(1); } }
.outtra-hero--kontakt .outtra-hero__medien { animation: none; }
.outtra-hero--kontakt .outtra-kontakt__foto { animation: outtra-vorhang 1s 300ms var(--o-kurve) both; overflow: hidden; border-radius: var(--wp--custom--radius--normal); }
.outtra-hero--kontakt .outtra-kontakt__foto img { animation: outtra-zoom-aus 1.6s 300ms var(--o-kurve) both; }
@media (prefers-reduced-motion: reduce) {
	.outtra-hero--kontakt .outtra-formular__feld, .outtra-hero--kontakt .outtra-formular__absenden, .outtra-hero--kontakt .outtra-newsletter__recht,
	.outtra-hero--kontakt .outtra-kontakt__foto, .outtra-hero--kontakt .outtra-kontakt__foto img, .outtra-kontakt__stoerer { animation: none; }
}

/* --------------------------------------------------------------------------
   Team als Bild-Akkordeon: vier Bilder, beim Ueberfahren weitet sich eines
   -------------------------------------------------------------------------- */
.outtra-team--akkordeon { display: flex; gap: 12px; margin-top: 2.5rem; }
.outtra-team--akkordeon .outtra-team__person {
	position: relative; flex: 1 1 0; min-width: 0;
	height: clamp(320px, 34vw, 460px); overflow: hidden;
	border-radius: var(--wp--custom--radius--normal);
	transition: flex-basis .5s cubic-bezier(.5,.85,.25,1.1), flex-grow .5s cubic-bezier(.5,.85,.25,1.1);
}
.outtra-team--akkordeon .outtra-team__person img {
	width: 100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%;
	border-radius: 0; transition: filter .35s, transform .7s var(--o-kurve);
}
.outtra-team--akkordeon .outtra-team__person::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
	background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); transition: opacity .3s;
}
.outtra-team--akkordeon .outtra-team__person figcaption {
	position: absolute; left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.6vw, 22px);
	z-index: 2; margin: 0; display: grid; gap: .15rem; color: var(--o-weiss);
	transition: opacity .25s, transform .25s;
}
.outtra-team--akkordeon .outtra-team__person figcaption strong { color: var(--o-weiss); font-size: clamp(15px, 1.15vw, 19px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outtra-team--akkordeon .outtra-team__person figcaption span { color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (min-width: 900px) {
	.outtra-team--akkordeon:hover .outtra-team__person:not(:hover),
	.outtra-team--akkordeon:has(.is-offen) .outtra-team__person:not(.is-offen) { flex: 0 0 11%; }
	.outtra-team--akkordeon .outtra-team__person:hover,
	.outtra-team--akkordeon .outtra-team__person.is-offen { flex: 1 1 0; }
	.outtra-team--akkordeon:hover .outtra-team__person:not(:hover) img,
	.outtra-team--akkordeon:has(.is-offen) .outtra-team__person:not(.is-offen) img { filter: saturate(.55) brightness(.92); }
	.outtra-team--akkordeon:hover .outtra-team__person:not(:hover) figcaption,
	.outtra-team--akkordeon:has(.is-offen) .outtra-team__person:not(.is-offen) figcaption { opacity: 0; transform: translateY(8px); }
	.outtra-team--akkordeon .outtra-team__person:hover img,
	.outtra-team--akkordeon .outtra-team__person.is-offen img { transform: scale(1.03); }
}
@media (max-width: 899px) {
	.outtra-team--akkordeon { flex-direction: column; }
	.outtra-team--akkordeon .outtra-team__person { height: clamp(240px, 56vw, 340px); }
}
@media (prefers-reduced-motion: reduce) {
	.outtra-team--akkordeon .outtra-team__person, .outtra-team--akkordeon .outtra-team__person img { transition: none; }
}

/* Team: Raster, drei Spalten, zwei Reihen, quadratische Bilder (nach shadcn members-03) */
.outtra-team--raster { grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: start; gap: clamp(20px, 2vw, 32px) clamp(16px, 1.6vw, 24px); }
.outtra-team--raster .outtra-team__person img { aspect-ratio: 1 / 1; object-position: 50% 42%; background: var(--o-grau); }
.outtra-team--raster .outtra-team__person figcaption { margin-top: .75rem; }
.outtra-team--raster .outtra-team__person figcaption strong { font-size: var(--wp--preset--font-size--medium); font-weight: 500; }
@media (max-width: 599px) { .outtra-team--raster { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } }

/* Kennzahlen in Abschnitten: je Zahl eine Karte, Label in Orange. */
.outtra-abschnitt .outtra-hero__zahlen.is-eigene-zeile { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; gap: clamp(14px, 1.4vw, 20px) !important; }
.outtra-abschnitt .outtra-hero__zahlen.is-eigene-zeile > div { padding: clamp(20px, 2vw, 30px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.outtra-abschnitt .outtra-hero__zahlen.is-eigene-zeile .outtra-zahl { font-size: clamp(36px, 3.2vw, 54px); }
.outtra-abschnitt .outtra-hero__zahlen.is-eigene-zeile p.is-style-mono-label { color: var(--o-orange); margin-top: 10px; }
.outtra-abschnitt:not(.is-flaeche) .outtra-hero__zahlen.is-eigene-zeile > div { background: var(--o-grau); }

/* Statistik-Hinweis auf der Where-To-Buy-Seite: Text laeuft breiter. */
.outtra-statistik-hinweis p:not(.is-style-mono-label-orange) { max-width: 820px !important; }
.outtra-statistik-hinweis + .outtra-statistik-hinweis { margin-top: 16px !important; }

/* Funktionszeilen (Where-To-Buy): Text und Screenshot im Wechsel, Platzhalter bis die Aufnahmen da sind. */
.outtra-funktionszeilen { display: grid; gap: clamp(40px, 4vw, 72px); margin-top: var(--wp--preset--spacing--60); }
.outtra-funktionszeilen .outtra-loesung { margin: 0 !important; }
.outtra-screen-platzhalter { aspect-ratio: 1442 / 824; display: grid; place-content: center; text-align: center; gap: 6px; padding: 24px; background: var(--o-grau); color: var(--o-leise); }
.outtra-screen-platzhalter p { margin: 0; max-width: 32ch; }

/* Funktionszeilen (Where-To-Buy): je Zeile ein eigener Abschnitt im Wechsel hell/dunkel, keine Trennlinien. */
.outtra-abschnitt > .outtra-loesung:first-child, .outtra-abschnitt > .outtra-loesung:last-child, .outtra-abschnitt > .outtra-kopf + .outtra-loesung { border-top: 0; border-bottom: 0; }
.outtra-abschnitt > .outtra-loesung:first-child { padding-top: 0; }
.outtra-abschnitt > .outtra-loesung:last-child { padding-bottom: 0; }
.outtra-funktionen__cta { margin-top: clamp(32px, 3.2vw, 48px) !important; }
/* Kennzahlen im Hero der Unterseiten: drei Spalten unter den Buttons. */
.outtra-hero--seite .outtra-hero__text .outtra-hero__zahlen { display: grid; grid-template-columns: repeat(3, 1fr) !important; gap: 20px clamp(16px, 1.8vw, 28px) !important; }
.outtra-hero--seite .outtra-hero__text .outtra-hero__zahlen .outtra-zahl { font-size: clamp(32px, 2.8vw, 46px); }
.outtra-hero--seite .outtra-hero__text .outtra-hero__zahlen p.is-style-mono-label { margin-top: 8px; color: var(--o-orange); }
@media (max-width: 599px) { .outtra-hero--seite .outtra-hero__text .outtra-hero__zahlen { grid-template-columns: 1fr 1fr !important; } }

/* KPI-Band unter dem Hero: graues Band ueber die volle Breite, Zahlen wie auf der Startseite (Abschnitt 3). */
.outtra-kpi-band { background: var(--o-text); color: var(--o-weiss); padding-block: clamp(40px, 4.2vw, 64px) !important; }
/* KPI-Band dunkel (06.11.2026): orange Zahlen, helle Texte, Eyebrow bleibt orange. */
.outtra-kpi-band .outtra-kpi-band__raster > div > p:not(.outtra-zahl) { color: rgba(255, 255, 255, 0.72); }
.outtra-kpi-band__eyebrow { max-width: var(--o-inhalt); margin: 0 auto 1.5rem !important; }
.outtra-kpi-band__raster { display: grid; grid-template-columns: repeat(var(--zahlen, 3), 1fr); gap: clamp(24px, 3vw, 48px); max-width: var(--o-inhalt); margin-inline: auto; }
.outtra-kpi-band__raster > div > * { margin: 0; }
.outtra-kpi-band .outtra-zahl { font-size: clamp(40px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: .5rem; white-space: nowrap; }
.outtra-kpi-band__raster > div > p:not(.outtra-zahl) { font-size: var(--wp--preset--font-size--medium); line-height: 1.45; max-width: 26ch; color: var(--o-fliesstext); }
@media (max-width: 1023px) { .outtra-kpi-band__raster[style*="--zahlen:4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .outtra-kpi-band__raster { grid-template-columns: 1fr; gap: 24px; } }

/* Funktionszeilen: breiterer Fliesstext. */
.outtra-abschnitt[id^="funktionen"] .outtra-loesung .outtra-loesung__text { max-width: none; }

/* Abschnittsueberschriften duerfen ueber die volle Inhaltsbreite laufen. */
.outtra-abschnitt > h2.wp-block-heading { max-width: none; text-wrap: pretty; }

/* Projektschritte als Zeitleiste (Loesungsseiten): Linie mit Markern, Zeitangabe, Titel, Text. */
.outtra-projekt { margin-top: var(--wp--preset--spacing--60); }
.outtra-projekt__leiste { list-style: none; margin: 0 !important; padding: 0; display: grid; grid-template-columns: repeat(var(--schritte, 4), 1fr); gap: 0 clamp(20px, 2.4vw, 40px); position: relative; }
.outtra-projekt__leiste::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--o-linie); }
.outtra-projekt__schritt { position: relative; margin: 0; padding-top: 1.75rem; }
.outtra-projekt__schritt::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--o-weiss); border: 3px solid var(--o-orange); box-sizing: border-box; }
.outtra-projekt__schritt.is-ziel::before { background: var(--o-orange); }
.outtra-projekt__schritt > * { margin: 0; }
.outtra-projekt__zeit { margin-bottom: .5rem !important; }
.outtra-projekt__schritt h3 { font-size: var(--wp--preset--font-size--medium); margin-bottom: .5rem; }
.outtra-projekt__schritt p:last-child { color: var(--o-leise); font-size: clamp(14.5px, 1.05vw, 16.5px); }
.outtra-projekt__ziel { margin: clamp(28px, 3vw, 44px) 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); font-weight: 600; }
.outtra-projekt__fahne { width: 10px; height: 10px; border-radius: 50%; background: var(--o-orange); flex: none; }
@media (max-width: 899px) { .outtra-projekt__leiste { grid-template-columns: 1fr 1fr; gap: 2rem clamp(20px, 2.4vw, 40px); } .outtra-projekt__leiste::before { display: none; } .outtra-projekt__schritt::after { content: ""; position: absolute; top: 7px; left: 16px; right: 0; height: 2px; background: var(--o-linie); } }
@media (max-width: 599px) { .outtra-projekt__leiste { grid-template-columns: 1fr; } }

/* Projekt-Zeitstrahl: Linie waechst von links, Schritte folgen nacheinander, zum Schluss das Ziel. */
.has-js .outtra-projekt.outtra-anim { opacity: 1; transform: none; }
.has-js .outtra-projekt .outtra-projekt__leiste::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.5s var(--o-kurve); }
.has-js .outtra-projekt.is-sichtbar .outtra-projekt__leiste::before { transform: scaleX(1); }
.has-js .outtra-projekt .outtra-projekt__schritt { opacity: 0; transform: translateX(-18px); transition: opacity 0.6s var(--o-kurve), transform 0.6s var(--o-kurve); }
.has-js .outtra-projekt .outtra-projekt__schritt:nth-child(2) { transition-delay: 0.35s; }
.has-js .outtra-projekt .outtra-projekt__schritt:nth-child(3) { transition-delay: 0.7s; }
.has-js .outtra-projekt .outtra-projekt__schritt:nth-child(4) { transition-delay: 1.05s; }
.has-js .outtra-projekt.is-sichtbar .outtra-projekt__schritt { opacity: 1; transform: none; }
.has-js .outtra-projekt .outtra-projekt__ziel { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--o-kurve) 1.4s, transform 0.6s var(--o-kurve) 1.4s; }
.has-js .outtra-projekt.is-sichtbar .outtra-projekt__ziel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .outtra-projekt__leiste::before, .outtra-projekt__schritt, .outtra-projekt__ziel { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Text-Bild-Zeile direkt unter der Abschnittsueberschrift: weniger Abstand. */
.outtra-abschnitt > h2.wp-block-heading + .outtra-loesung, .outtra-abschnitt > .outtra-einleitung + .outtra-loesung { padding-top: 0; margin-top: clamp(28px, 3vw, 44px) !important; border-top: 0; }


/* --------------------------------------------------------------------------
   Hero-Varianten der Loesungsseiten (Vorschlag 11/2026)
   „Buehne“: Text schmaler, Bild groesser und rechts angeschnitten.
   Bild zoomt beim Scrollen leicht heran (--kipp 1 -> 0), keine Perspektive.
   Detailkarten haengen an festen Punkten im Video und skalieren mit der Bildbreite.
   -------------------------------------------------------------------------- */

.outtra-hero__buehne {
	--kipp: 1;
}

.outtra-hero__buehne > * {
	transform: scale(calc(1 - var(--kipp) * 0.04));
	transform-origin: center top;
	transition: transform 0.15s linear;
	box-shadow: 0 30px 80px rgba(21, 23, 28, 0.14);
}

/* A: Buehne */
.outtra-hero--seite.outtra-hero--buehne .outtra-hero__titel,
.outtra-hero--seite.outtra-hero--buehne .outtra-hero__text,
.outtra-hero--seite.outtra-hero--grafik .outtra-hero__titel,
.outtra-hero--seite.outtra-hero--grafik .outtra-hero__text {
	grid-column: 1 / 6;
}

.outtra-hero--seite.outtra-hero--grafik .outtra-hero__medien {
	grid-column: 6 / -1;
	padding-left: clamp(24px, 3vw, 56px);
}

.outtra-hero--seite.outtra-hero--buehne .outtra-hero__medien {
	grid-column: 6 / -1;
	width: calc(100% + min(max(var(--o-rand), (100vw - 1280px) / 2), 320px));
	max-width: none;
	padding-left: clamp(24px, 3vw, 56px);
}

.outtra-hero--buehne .outtra-hero__buehne > * {
	transform-origin: left center;
}

.outtra-hero--buehne .outtra-hero__buehne .is-style-browserrahmen {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Detailkarten: Groessen in em, Schrift folgt der Videobreite (Container-Einheit). */
.outtra-hero__buehne .outtra-videorahmen,
.outtra-videorahmen:has(> .outtra-hero__details) {
	position: relative;
	container-type: inline-size;
}

.outtra-hero__details {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-size: clamp(7px, 1.35cqi, 15px);
}

.outtra-hero__detail {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
}

.outtra-hero__punkt {
	position: absolute;
	left: -0.45em;
	top: -0.45em;
	width: 0.9em;
	height: 0.9em;
	border: 2px solid var(--o-weiss);
	border-radius: 50%;
	background: var(--o-orange);
	box-shadow: 0 0 0 0 rgba(231, 80, 18, 0.45);
	animation: outtra-detail 0.4s var(--o-kurve) var(--verz) both, outtra-puls 2.4s ease-out calc(var(--verz) + 0.4s) infinite;
}

.outtra-hero__plakette {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.8em;
	width: max-content;
	padding: 0.7em 1.2em 0.7em 0.7em;
	border: 1px solid var(--o-linie);
	border-radius: 0.8em;
	background: var(--o-weiss);
	box-shadow: 0 1em 2.4em rgba(21, 23, 28, 0.16);
	animation: outtra-detail 0.6s var(--o-kurve) calc(var(--verz) + 0.15s) both;
}

/* r: rechts neben dem Punkt, vertikal mittig. u: unter dem Punkt. */
.outtra-hero__detail.is-r .outtra-hero__plakette { left: 1.3em; top: 0; translate: 0 -50%; }
.outtra-hero__detail.is-u .outtra-hero__plakette { left: -0.9em; top: 1.3em; }
.outtra-hero__detail.is-o .outtra-hero__plakette { left: -0.9em; bottom: 1.3em; }

.outtra-hero__plakette p {
	margin: 0;
	font-size: 0.86em;
	line-height: 1.35;
	color: var(--o-leise);
}

.outtra-hero__plakette strong {
	display: block;
	font-size: 1.16em;
	color: var(--o-text);
}

.outtra-hero__detail-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border: 1.5px solid var(--o-orange);
	border-radius: 0.6em;
	color: var(--o-orange);
}

.outtra-hero__detail-icon .outtra-menue__icon { width: 1.35em; height: 1.35em; }

/* Plaketten mit Zeitfenster: ein- und ausblenden statt einmaliger Animation. */
.outtra-hero__detail[data-von] .outtra-hero__punkt,
.outtra-hero__detail[data-von] .outtra-hero__plakette {
	opacity: 0;
	scale: 0.9;
	animation: none;
	transition: opacity 0.35s var(--o-kurve), scale 0.35s var(--o-kurve);
}

.outtra-hero__detail[data-von] .outtra-hero__plakette { transition-delay: 0.1s; }

.outtra-hero__detail[data-von].is-an .outtra-hero__punkt,
.outtra-hero__detail[data-von].is-an .outtra-hero__plakette {
	opacity: 1;
	scale: 1;
}

.outtra-hero__detail[data-von].is-an .outtra-hero__punkt {
	animation: outtra-puls 2.4s ease-out 0.4s infinite;
}

@keyframes outtra-detail {
	from { opacity: 0; scale: 0.9; }
	to { opacity: 1; scale: 1; }
}

@keyframes outtra-puls {
	0% { box-shadow: 0 0 0 0 rgba(231, 80, 18, 0.45); }
	70%, 100% { box-shadow: 0 0 0 0.9em rgba(231, 80, 18, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.outtra-hero__punkt, .outtra-hero__plakette { animation: none; }
	.outtra-hero__buehne > * { transform: none !important; }
}

@media (max-width: 899px) {
	.outtra-hero--seite.outtra-hero--buehne .outtra-hero__titel,
	.outtra-hero--seite.outtra-hero--buehne .outtra-hero__text,
	.outtra-hero--seite.outtra-hero--buehne .outtra-hero__medien,
	.outtra-hero--seite.outtra-hero--grafik .outtra-hero__titel,
	.outtra-hero--seite.outtra-hero--grafik .outtra-hero__text,
	.outtra-hero--seite.outtra-hero--grafik .outtra-hero__medien {
		grid-column: 1 / -1;
		grid-row: auto;
		width: 100%;
		padding-left: 0;
	}
	.outtra-hero--buehne .outtra-hero__buehne .is-style-browserrahmen { border-radius: var(--wp--custom--radius--normal); }
	.outtra-hero__buehne > * { transform: none !important; }
}

/* Schmal: nur Titel der Plakette, ohne Unterzeile. */
@container (max-width: 520px) {
	.outtra-hero__plakette p > span { display: none; }
	.outtra-hero__plakette strong { font-size: 1.05em; }
}

/* Text-Bild breit: mehr Luft zwischen den Bausteinen (jeder steht in einem eigenen Abschnitt). */
.outtra-abschnitt:has(.outtra-loesung.is-breit) {
	padding-block: clamp(72px, 8vw, 144px);
}

.outtra-loesung.is-breit {
	padding-block: 0;
	border: 0 !important;
}

/* Text-Bild breit: Text im ersten Drittel, Bild ueber die anderen zwei Drittel, innerhalb der Inhaltsbreite. */
@media (min-width: 782px) {
	.outtra-loesung.is-breit > .outtra-loesung__textspalte {
		flex: 0 0 calc((100% - 2 * clamp(28px, 3.2vw, 56px)) / 3);
	}

	.outtra-loesung.is-breit > .outtra-loesung__bildspalte {
		flex: 1 1 0;
	}
}

.outtra-loesung .wp-block-column > .outtra-loesung__knopf {
	margin-top: clamp(22px, 2.2vw, 34px);
}

/* ROI-Rechner (Lost Sales) */
.outtra-roi {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(16px, 2vw, 28px);
	margin-top: var(--wp--preset--spacing--60);
}

.outtra-roi__regler {
	display: grid;
	gap: clamp(18px, 1.8vw, 26px);
	padding: clamp(22px, 2.6vw, 36px);
	border: 1px solid var(--o-linie);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-weiss);
}

.outtra-roi__kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.outtra-roi__kopf label {
	font-weight: 600;
	color: var(--o-text);
}

.outtra-roi__kopf output {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--o-orange);
}

.outtra-roi__hilfe {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--o-leise);
}

.outtra-roi input[type="range"] {
	--anteil: 50%;
	width: 100%;
	height: 6px;
	margin: 12px 0 0;
	border-radius: 3px;
	background: linear-gradient(to right, var(--o-orange) var(--anteil), var(--o-linie) var(--anteil));
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.outtra-roi input[type="range"]::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	border: 3px solid var(--o-weiss);
	border-radius: 50%;
	background: var(--o-orange);
	box-shadow: 0 1px 4px rgba(21, 23, 28, 0.3);
	-webkit-appearance: none;
}

.outtra-roi input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--o-weiss);
	border-radius: 50%;
	background: var(--o-orange);
}

.outtra-roi input[type="range"]:focus-visible {
	outline: 2px solid var(--o-orange);
	outline-offset: 6px;
}

.outtra-roi__ergebnis {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(26px, 3vw, 44px);
	border-radius: var(--wp--custom--radius--normal);
	background: var(--o-text);
	color: var(--o-weiss);
}

.outtra-roi__ergebnis > * { margin: 0; }

.outtra-roi__ergebnis .is-style-mono-label { color: var(--o-weiss); }

.outtra-roi__summe {
	margin-top: 10px !important;
	font-size: clamp(40px, 4.6vw, 72px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--o-orange);
}

.outtra-roi__formel {
	margin-top: 14px !important;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

.outtra-roi__ergebnis .wp-block-buttons { margin-top: clamp(22px, 2.4vw, 34px); }

.outtra-roi__ergebnis .wp-block-button__link {
	border-color: var(--o-weiss);
	background: var(--o-weiss);
	color: var(--o-text);
}

.outtra-roi__hinweis {
	margin-top: 10px !important;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 899px) {
	.outtra-roi { grid-template-columns: 1fr; }
}

/* Lost-Sales-Schaubild im Hero: Kunde tippt (0,4–2,1 s), Linien zu den Haendlern, kein Treffer,
   Lost Sales, Marke, Nachorder – am Ende wird beim dritten Haendler aus dem Kreuz ein Haken. */
.outtra-lsgrafik { margin: 0; }
.outtra-lsgrafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.outtra-lsgrafik .ls-fluss { fill: none; stroke: #E75012; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: ls-fluss 1.4s linear infinite; }
.outtra-lsgrafik .ls-fluss.is-grau { stroke: #A9A59D; stroke-width: 2.2; animation-duration: 2.4s; }
.outtra-lsgrafik .ls-zeichnen { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ls-zeichnen 0.8s var(--o-kurve) forwards; }
.outtra-lsgrafik .ls-tag { font: 600 12px var(--o-mono); letter-spacing: 1.5px; fill: #fff; }
.outtra-lsgrafik .ls-pille { font: 600 11.5px var(--o-mono); letter-spacing: 1.5px; fill: #E75012; }
.outtra-lsgrafik .ls-text { font: 500 15px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-lsgrafik .ls-mono { font: 600 12px var(--o-mono); letter-spacing: 2px; fill: #E75012; }
.outtra-lsgrafik .ls-zahl { font: 700 34px var(--wp--preset--font-family--text); letter-spacing: -0.02em; fill: #fff; }
.outtra-lsgrafik .ls-klein { font: 400 12.5px var(--wp--preset--font-family--text); fill: rgba(255, 255, 255, 0.65); }
.outtra-lsgrafik .ls-schritt { animation: ls-auf 0.6s var(--o-kurve) both; }
.outtra-lsgrafik .ls-schritt.is-suche { animation-delay: 0.2s; }
.outtra-lsgrafik .ls-schritt.is-haendler { animation-delay: 2.5s; }
.outtra-lsgrafik .ls-schritt.is-ls { animation-delay: 3.7s; }
.outtra-lsgrafik .ls-schritt.is-marke { animation-delay: 4.4s; }
.outtra-lsgrafik .ls-schritt.is-nachorder { animation-delay: 5.1s; }
.outtra-lsgrafik .ls-tippen { width: 0; animation: ls-tippen 1.7s steps(22, end) 0.5s forwards; }
.outtra-lsgrafik .ls-cursor { animation: ls-cursor-weg 1.7s steps(22, end) 0.5s forwards, ls-blinken 0.9s steps(1) infinite; }
.outtra-lsgrafik .ls-kurve { stroke-dasharray: 260; stroke-dashoffset: 260; animation: ls-kurve 1.4s 4s var(--o-kurve) forwards; }
.outtra-lsgrafik .ls-badge { transform-box: fill-box; transform-origin: center; }
.outtra-lsgrafik .ls-badge.is-kreuz { animation: ls-pop 0.4s 3s var(--o-kurve) both; }
.outtra-lsgrafik .ls-badge.is-kreuz.wird-ersetzt { animation: ls-pop 0.4s 3s var(--o-kurve) both, ls-weg 0.3s 5.5s forwards; }
.outtra-lsgrafik .ls-badge.is-haken { opacity: 0; animation: ls-pop 0.45s 5.6s var(--o-kurve) both; }
@keyframes ls-fluss { to { stroke-dashoffset: -18.2; } }
@keyframes ls-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes ls-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ls-tippen { to { width: 152px; } }
@keyframes ls-cursor-weg { from { transform: translateX(0); } to { transform: translateX(154px); } }
@keyframes ls-blinken { 50% { opacity: 0; } }
@keyframes ls-kurve { to { stroke-dashoffset: 0; } }
@keyframes ls-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes ls-weg { to { opacity: 0; transform: scale(0.4); } }
@media (prefers-reduced-motion: reduce) {
	.outtra-lsgrafik *, .outtra-lsgrafik .ls-kurve, .outtra-lsgrafik .ls-zeichnen { animation: none !important; stroke-dashoffset: 0; }
	.outtra-lsgrafik .ls-tippen { width: 152px; }
	.outtra-lsgrafik .ls-cursor, .outtra-lsgrafik .wird-ersetzt { display: none; }
	.outtra-lsgrafik .ls-badge.is-haken { opacity: 1; }
}

/* Lost Sales: nachgebaute Dashboard-Ansicht im Browserrahmen */
.outtra-lsd {
	container-type: inline-size;
	padding: clamp(16px, 3cqi, 30px);
	background: var(--o-weiss);
	font-size: clamp(11px, 1.9cqi, 14px);
	color: var(--o-text);
}
.outtra-lsd p { margin: 0; }
.lsd-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2em; }
.lsd-monat { color: var(--o-orange); border-bottom: 1px solid var(--o-orange); }
.lsd-marke { font-weight: 700; letter-spacing: 0.02em; }
.lsd-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 0.8em; }
.lsd-kachel { padding: 0.75em 0.85em; border: 1px solid var(--o-linie); border-radius: 10px; background: var(--o-grau); }
.lsd-kachel.is-dunkel { border-color: transparent; background: var(--o-text); color: var(--o-weiss); }
.lsd-zahl { font-size: 1.4em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lsd-kachel:nth-child(2) .lsd-zahl, .lsd-kachel.is-dunkel .lsd-zahl { color: var(--o-orange); }
.lsd-label { margin-top: 0.3em !important; font-size: 0.82em; color: var(--o-leise); }
.lsd-kachel.is-dunkel .lsd-label { color: rgba(255, 255, 255, 0.65); }
.lsd-chart { margin: 1em 0 0.2em; }
.lsd-chart svg { display: block; width: 100%; height: clamp(64px, 14cqi, 110px); background: linear-gradient(var(--o-linie), var(--o-linie)) 0 25% / 100% 1px no-repeat, linear-gradient(var(--o-linie), var(--o-linie)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--o-linie), var(--o-linie)) 0 75% / 100% 1px no-repeat; }
.lsd-flaeche { fill: var(--o-text); opacity: 0.85; }
.lsd-linie { fill: none; stroke: var(--o-orange); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lsd-legende { display: flex; gap: 1.4em; margin-top: 0.6em !important; font-size: 0.82em; color: var(--o-leise); }
.lsd-legende span::before { content: ""; display: inline-block; width: 1.4em; height: 0.6em; margin-right: 0.5em; vertical-align: middle; border-radius: 2px; }
.lsd-legende .is-linie::before { height: 2px; background: var(--o-orange); }
.lsd-legende .is-flaeche::before { background: var(--o-text); }
.lsd-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.6em; margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--o-linie); }
.lsd-titel { margin-bottom: 0.7em !important; font-weight: 700; }
.lsd-produkte ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9em 0.6em; margin: 0; padding: 0; list-style: none; }
.lsd-produkte li { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 0.85em; line-height: 1.3; }
.outtra-lsd .lsd-produkte img { width: 4.4em !important; height: 4.4em !important; max-width: none; object-fit: contain; margin-bottom: 0.3em; clip-path: none !important; transform: none !important; }
.lsd-produkte span { color: var(--o-leise); }
.lsd-haendler table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.lsd-haendler th { padding: 0 0.5em 0.5em; font-weight: 400; font-size: 0.85em; color: var(--o-leise); text-align: right; }
.lsd-haendler th:first-child, .lsd-haendler td:first-child { text-align: left; padding-left: 0.6em; }
.lsd-haendler td { padding: 0.55em 0.5em; border-top: 1px solid var(--o-linie); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lsd-haendler td:last-child { font-weight: 700; color: var(--o-orange); }
.lsd-haendler td strong { display: block; font-weight: 600; }
.lsd-haendler td span { font-size: 0.85em; color: var(--o-leise); }
.outtra-lsd.is-sichtbar .lsd-haendler tr.is-markiert td { animation: lsd-markieren 0.6s 2.2s var(--o-kurve) both; }
.has-js .outtra-lsd .lsd-chart svg { clip-path: inset(0 100% 0 0); }
.has-js .outtra-lsd.is-sichtbar .lsd-chart svg { animation: lsd-enthuellen 1.8s 0.3s var(--o-kurve) forwards; }
@keyframes lsd-enthuellen { to { clip-path: inset(0 0 0 0); } }
@keyframes lsd-markieren { to { background-color: var(--o-orange-hell); } }
@container (max-width: 600px) {
	.lsd-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 520px) {
	.lsd-unten { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.has-js .outtra-lsd .lsd-chart svg { clip-path: none; animation: none; }
}

/* ROI-Rechner Produktdaten-Anreicherung: vier Kennzahlen unter dem Hauptergebnis */
.outtra-roi.is-frontnow .outtra-roi__regler { gap: clamp(14px, 1.4vw, 20px); }
.outtra-roi__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 24px !important; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.outtra-roi__raster > div > * { margin: 0; }
.outtra-roi__wert { font-size: clamp(20px, 1.8vw, 28px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--o-weiss); }
.outtra-roi__raster .outtra-roi__formel { margin-top: 2px !important; }
.outtra-roi.is-frontnow .outtra-roi__hinweis { margin-top: 22px !important; line-height: 1.5; }
.outtra-roi.is-frontnow .wp-block-buttons { margin-top: 18px; }

/* Text-Bild mittel: Text etwa 40 %, Bild etwa 60 % der Inhaltsbreite. */
@media (min-width: 782px) {
	.outtra-loesung.is-mittel > .outtra-loesung__textspalte { flex: 0 0 38%; }
	.outtra-loesung.is-mittel > .outtra-loesung__bildspalte { flex: 1 1 0; }
}

/* Beispielrechnung (Lost Sales): kompakt, Wert links, Bezeichnung rechts */
.outtra-beispiel { overflow: hidden; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); box-shadow: var(--wp--preset--shadow--karte); }
.outtra-beispiel dl { margin: 0; padding: 8px clamp(20px, 2.2vw, 30px) 4px; }
.outtra-beispiel dl > div { display: grid; grid-template-columns: 4.6em 1fr; align-items: first baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--o-linie); }
.outtra-beispiel dl > div:last-child { border-bottom: 0; }
.outtra-beispiel dd { margin: 0; text-align: right; font-size: 17px; line-height: 1.35; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--o-orange); }
.outtra-beispiel dt { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--o-text); }
.outtra-beispiel dt span { display: block; margin-top: 2px; font-weight: 400; font-size: 13.5px; color: var(--o-leise); }
.outtra-beispiel__ergebnis { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 4px 14px; padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 30px) 6px; background: var(--o-text); color: var(--o-weiss); }
.outtra-beispiel__ergebnis p { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.outtra-beispiel__summe { font-variant-numeric: tabular-nums; color: var(--o-orange); }
.outtra-beispiel__formel { margin: 0; padding: 4px clamp(20px, 2.2vw, 30px) 18px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); background: var(--o-text); }
@media (max-width: 899px) { .outtra-beispiel { margin-inline: 0; max-width: none; } }

/* Data-&-Image-Hub-Schaubild im Hero (Stil wie Lost Sales) */
.outtra-dhgrafik { margin: 0; }
.outtra-dhgrafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.outtra-dhgrafik .dh-fluss { fill: none; stroke: #E75012; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: dh-fluss 3s linear infinite; }
.outtra-dhgrafik .dh-zeichnen { fill: none; stroke: #fff; stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dh-zeichnen 0.7s var(--o-kurve) forwards; }
.outtra-dhgrafik .dh-tag { font: 600 12px var(--o-mono); letter-spacing: 1.5px; fill: #fff; }
.outtra-dhgrafik .dh-pillentext { font: 600 11.5px var(--o-mono); letter-spacing: 1px; fill: #E75012; }
.outtra-dhgrafik .dh-element svg { stroke-width: 1.3; }
.outtra-dhgrafik .dh-format { font: 600 12px var(--wp--preset--font-family--text); fill: #15171C; }
.outtra-dhgrafik .dh-schritt, .outtra-dhgrafik .dh-pille, .outtra-dhgrafik .dh-knoten { transform-box: fill-box; transform-origin: center; animation: dh-pop 0.55s var(--o-kurve) both; }
.outtra-dhgrafik .dh-schritt.is-marke { animation-name: dh-auf; }
.outtra-dhgrafik .dh-schritt.is-hub { animation-delay: 2.7s; }
.outtra-dhgrafik .dh-schritt.is-ziele { animation-name: dh-auf; animation-delay: 4.1s; }
.outtra-dhgrafik .dh-element { transform-box: fill-box; transform-origin: center; animation: dh-pop 0.5s var(--o-kurve) both, dh-schweben 5s ease-in-out infinite; }
.outtra-dhgrafik .dh-puls { transform-box: fill-box; transform-origin: center; opacity: 0; animation: dh-puls 2.6s ease-out 3.4s infinite; }
.outtra-dhgrafik .dh-punkt { opacity: 0; animation: dh-sichtbar 0.3s 4.8s forwards; }
@keyframes dh-fluss { to { stroke-dashoffset: -18.2; } }
@keyframes dh-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes dh-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dh-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes dh-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes dh-puls { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes dh-sichtbar { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.outtra-dhgrafik *, .outtra-dhgrafik .dh-zeichnen { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
	.outtra-dhgrafik .dh-punkt, .outtra-dhgrafik .dh-puls { display: none; }
}

/* Erklaerfilme */
.outtra-filme { display: grid; grid-template-columns: repeat(var(--filme, 1), minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: var(--wp--preset--spacing--60); }
.outtra-filme[style*="--filme:1"] { max-width: 960px; }
.outtra-film { margin: 0; }
.outtra-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--wp--custom--radius--normal); background: var(--o-text); box-shadow: var(--wp--preset--shadow--karte); }
.outtra-film figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.outtra-film figcaption strong { font-weight: 600; color: var(--o-text); }
.outtra-film figcaption span { font-variant-numeric: tabular-nums; color: var(--o-leise); }
@media (max-width: 781px) { .outtra-filme { grid-template-columns: 1fr; } }
.outtra-loesung .outtra-filme { margin-top: 0; max-width: none; }

/* Produktdaten-Anreicherung: Hero-Grafik Vorher -> KI -> Nachher */
.outtra-enrich { display: grid; grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: 14px; }
.outtra-enrich__karte { padding: clamp(14px, 1.4vw, 20px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); box-shadow: var(--wp--preset--shadow--karte); }
.outtra-enrich__karte.is-vorher { background: var(--o-grau); box-shadow: none; }
.outtra-enrich__karte.is-nachher { border-color: var(--o-orange); }
.outtra-enrich__karte > p { margin: 0; }
.outtra-enrich__titel { margin-top: 6px !important; font-weight: 700; color: var(--o-text); }
.outtra-enrich dl { margin: 10px 0 0; font-size: 13px; line-height: 1.35; }
.outtra-enrich dl > div { padding: 6px 0; border-top: 1px solid var(--o-linie); }
.outtra-enrich dt { font: 600 10.5px var(--o-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--o-leise); }
.outtra-enrich dd { margin: 2px 0 0; color: var(--o-text); }
.outtra-enrich dd.is-leer { color: #B9B5AD; }
.outtra-enrich__layer { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 110px; text-align: center; font-size: 12px; line-height: 1.3; color: var(--o-leise); }
.outtra-enrich__layer strong { color: var(--o-text); }
.outtra-enrich__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--o-orange); color: var(--o-weiss); box-shadow: 0 0 0 0 rgba(231, 80, 18, 0.4); animation: enrich-puls 2.4s ease-out 1.2s infinite; }
.outtra-enrich__icon .outtra-menue__icon { width: 26px; height: 26px; }
.outtra-enrich__score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--o-leise); }
.outtra-enrich__score strong { color: var(--o-orange); }
.outtra-enrich__balken { height: 6px; border-radius: 3px; background: var(--o-linie); overflow: hidden; }
.outtra-enrich__balken i { display: block; width: 92%; height: 100%; background: var(--o-orange); transform-origin: left; animation: enrich-balken 1.2s var(--o-kurve) 1.6s both; }
.outtra-enrich__ki { grid-column: 1 / -1; position: relative; margin-left: 18%; padding: 14px 18px; border-radius: 14px 14px 14px 4px; background: var(--o-text); color: var(--o-weiss); font-size: 14px; line-height: 1.45; animation: enrich-auf 0.6s var(--o-kurve) 2.4s both; }
.outtra-enrich__ki-kopf { display: block; margin-bottom: 4px; font: 600 10.5px var(--o-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--o-orange); }
.outtra-enrich__karte.is-nachher dl > div { animation: enrich-auf 0.5s var(--o-kurve) both; }
.outtra-enrich__karte.is-nachher dl > div:nth-child(1) { animation-delay: 0.8s; }
.outtra-enrich__karte.is-nachher dl > div:nth-child(2) { animation-delay: 1.0s; }
.outtra-enrich__karte.is-nachher dl > div:nth-child(3) { animation-delay: 1.2s; }
.outtra-enrich__karte.is-nachher dl > div:nth-child(4) { animation-delay: 1.4s; }
@keyframes enrich-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes enrich-balken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes enrich-puls { 0% { box-shadow: 0 0 0 0 rgba(231, 80, 18, 0.4); } 70%, 100% { box-shadow: 0 0 0 14px rgba(231, 80, 18, 0); } }
@media (max-width: 599px) { .outtra-enrich { grid-template-columns: 1fr; } .outtra-enrich__layer { flex-direction: row; max-width: none; } .outtra-enrich__ki { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .outtra-enrich * { animation: none !important; } }

/* Customer Journey: zwei Reihen Bisher/Heute */
.outtra-journey { display: grid; gap: 14px; margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50); }
.outtra-journey__reihe { display: grid; grid-template-columns: 7em 1fr; align-items: center; gap: 16px; }
.outtra-journey__reihe > p { margin: 0; }
.outtra-journey ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.outtra-journey li { padding: 10px 18px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); font-weight: 600; color: var(--o-leise); }
.outtra-journey li:not(:last-child)::after { content: "→"; margin-left: 18px; color: #B9B5AD; }
.outtra-journey__reihe.is-heute li { border-color: var(--o-orange); color: var(--o-text); }
.outtra-journey__reihe.is-heute li:not(:last-child)::after { color: var(--o-orange); }
.outtra-journey__reihe.is-heute li:last-child { background: var(--o-orange); color: var(--o-weiss); }
@media (max-width: 599px) { .outtra-journey__reihe { grid-template-columns: 1fr; } }

/* KI-Anreicherung als ruhige Liste */
.outtra-layerliste { margin: 0; padding: 0; list-style: none; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); box-shadow: var(--wp--preset--shadow--karte); }
.outtra-layerliste li { display: grid; grid-template-columns: 44px 6.6em 1fr; align-items: center; gap: 14px; padding: 14px clamp(16px, 2vw, 26px); border-top: 1px solid var(--o-linie); }
.outtra-layerliste li:first-child { border-top: 0; }
.outtra-layerliste strong { color: var(--o-text); }
.outtra-layerliste li > span:last-child { color: var(--o-leise); font-size: 15px; }
.outtra-layerliste__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--o-orange); border-radius: 10px; color: var(--o-orange); }
.outtra-layerliste__icon .outtra-menue__icon { width: 22px; height: 22px; }
@media (max-width: 599px) { .outtra-layerliste li { grid-template-columns: 40px 1fr; } .outtra-layerliste li > span:last-child { grid-column: 2; } }

/* Zitate (Ergebnisse) */
.outtra-zitate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: var(--wp--preset--spacing--60); }
.outtra-zitat { margin: 0; padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.outtra-zitat blockquote { margin: 0; font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--o-text); }
.outtra-zitat figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.outtra-zitat figcaption span { font-size: 14px; color: var(--o-leise); }
@media (max-width: 781px) { .outtra-zitate { grid-template-columns: 1fr; } }




/* Startseiten-Hero im Lost-Sales-Stil (06.11.2026): Signet -> Marken -> Leitungen zeichnen sich -> Haendler -> Haken,
   danach gepunkteter Fluss mit laufenden Datenpunkten (orange Produktdaten, dunkel Verfuegbarkeiten). */
.outtra-netz-schmuck.is-ablauf .outtra-leitung { display: none; }
.outtra-netz-schmuck.is-ablauf .hs-fluss { fill: none; stroke: #E75012; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.1 9; opacity: 0.75; }
.outtra-netz-schmuck.is-ablauf .hs-zeichnen { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: butt; stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: hs-zeichnen 0.9s var(--o-kurve) forwards; }
.outtra-netz-schmuck.is-ablauf .hs-pille { transform-box: fill-box; transform-origin: center; animation: hs-pop 0.5s var(--o-kurve) both; }
.outtra-netz-schmuck.is-ablauf .hs-pille text { font: 600 11.5px var(--o-mono); letter-spacing: 1px; }
.outtra-netz-schmuck.is-ablauf .outtra-kachel { animation: hs-kachel 0.6s var(--o-kurve) backwards; animation-delay: var(--verzug, 0s); }
.outtra-netz-schmuck.is-ablauf .outtra-kachel__puls { animation-delay: 1.2s; }
.outtra-netz-schmuck.is-ablauf .outtra-kachel__haken { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; background: #15171C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; animation: hs-pop-html 0.45s var(--o-kurve) both; animation-delay: var(--verzug, 0s); }
.outtra-netz-schmuck--gross.is-ablauf .outtra-netz-schmuck__spalte { padding: 4px 10px; border-radius: 6px; background: var(--o-orange); color: var(--o-weiss); font-weight: 600; font-size: clamp(11px, 0.85vw, 13px); animation: hs-auf 0.5s var(--o-kurve) 0.4s both; }
.outtra-netz-schmuck--gross.is-ablauf .outtra-netz-schmuck__spalte.is-rechts { background: var(--o-text); animation-delay: 2.8s; }
@keyframes hs-fluss { to { stroke-dashoffset: -18.2; } }
@keyframes hs-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes hs-sichtbar { to { opacity: 1; } }
@keyframes hs-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes hs-pop-html { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes hs-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hs-kachel { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
	.outtra-netz-schmuck.is-ablauf *, .outtra-netz-schmuck.is-ablauf .hs-zeichnen { animation: none !important; stroke-dashoffset: 0; }
	.outtra-netz-schmuck.is-ablauf .hs-punkt { display: none; }
}

/* Hero-Logos groesser in der Kachel (06.11.2026). */
.outtra-netz-schmuck--gross.is-ablauf .outtra-kachel:not(.is-signet) img { width: 94%; height: 80%; }

/* Hero-Plaketten (06.11.2026): Position ueber --xq (quadratisch) bzw. --xr (rechteckig), mehr Luft links/rechts, deuter kleiner. */
.outtra-netz-schmuck.is-ablauf .outtra-kachel:not(.is-signet) { left: var(--xq); }
.outtra-netz-schmuck--gross.is-ablauf .outtra-kachel:not(.is-signet) img { width: 74%; height: 60%; }
.outtra-netz-schmuck--gross.is-ablauf .outtra-kachel.is-mittel img { width: 62%; height: 52%; }
.outtra-netz-schmuck--gross.is-ablauf .outtra-kachel.is-klein img { width: 50%; height: 50%; }
.outtra-netz-schmuck.is-ablauf .hs-variante.is-rechteck { display: none; }
/* Vorschlag: rechteckige Plaketten, eine Spalte je Seite */
.outtra-netz-schmuck.is-ablauf.is-rechteck .hs-variante.is-quadrat { display: none; }
.outtra-netz-schmuck.is-ablauf.is-rechteck .hs-variante.is-rechteck { display: inline; }
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck .outtra-kachel:not(.is-signet) { left: var(--xr); width: calc(130 / 720 * 100%); aspect-ratio: 130 / 56; border-radius: 12px; min-height: 0; overflow: hidden; }
/* Logo-Masse relativ zur Grafikbreite (Kachel 130x56 im 720er-Raster). */
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck { container-type: inline-size; }
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck .outtra-kachel:not(.is-signet) img { width: 13.6cqw; height: 5.2cqw; max-width: none; object-fit: contain; }
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck .outtra-kachel.is-mittel img { height: 5.8cqw; }
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck .outtra-kachel.is-klein img { height: 5cqw; }
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck .outtra-netz-schmuck__spalte.is-links { left: calc(10 / 720 * 100%) !important; }
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck .outtra-netz-schmuck__spalte.is-rechts { right: calc(10 / 720 * 100%) !important; }

/* adidas-Performance-Zeichen kleiner, wirkt als kompakte Bildmarke sonst zu gross (06.11.2026). */
.outtra-netz-schmuck--gross.is-ablauf .outtra-kachel.is-adidas img { width: 46%; height: 40%; }
.outtra-netz-schmuck--gross.is-ablauf.is-rechteck .outtra-kachel.is-adidas img { height: 3.6cqw; }

/* Hero: berechnete Punktierung (keine Doppelpunkte an Abzweigen), Abstaende zwischen den Plaketten groesser (y-Raster 78) (06.11.2026) */
.outtra-netz-schmuck.is-ablauf .hs-punkte { fill: #E75012; opacity: 0.75; }
.outtra-netz-schmuck--gross.is-ablauf .outtra-netz-schmuck__spalte { top: -2px !important; } /* oben buendig mit der Eyebrow links */
.outtra-netz-schmuck--gross.is-ablauf .outtra-kachel:not(.is-signet) { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))); } /* Logos pixelgenau, siehe Skript im Hero-Pattern */

/* KI-Marktreport-Schaubild im Hero (06.11.2026, ueberarbeitet), Stil wie Lost Sales */
.outtra-kmgrafik { margin: 0; }
.outtra-kmgrafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.outtra-kmgrafik .km-fluss { fill: none; stroke: #E75012; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: ls-fluss 1.4s linear infinite; }
.outtra-kmgrafik .km-zeichnen { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ls-zeichnen 0.6s var(--o-kurve) forwards; }
.outtra-kmgrafik .km-tag { font: 600 12px var(--o-mono); letter-spacing: 1.5px; fill: #fff; }
.outtra-kmgrafik .km-text { font: 500 15px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-kmgrafik .km-chip { font: 600 13px var(--wp--preset--font-family--text); fill: #E75012; }
.outtra-kmgrafik .km-chip.is-du { fill: #fff; }
.outtra-kmgrafik .km-mono { font: 600 12px var(--o-mono); letter-spacing: 2px; fill: #E75012; }
.outtra-kmgrafik .km-klein { font: 400 12px var(--wp--preset--font-family--text); fill: rgba(255, 255, 255, 0.6); }
.outtra-kmgrafik .km-rangnr { font: 600 11px var(--o-mono); fill: rgba(255, 255, 255, 0.5); }
.outtra-kmgrafik .km-rangname { font: 500 12.5px var(--wp--preset--font-family--text); fill: rgba(255, 255, 255, 0.85); }
.outtra-kmgrafik .km-rangzeile.is-du .km-rangname { font-weight: 700; fill: #E75012; }
.outtra-kmgrafik .km-rangzeile.is-du .km-rangnr { fill: #E75012; }
.outtra-kmgrafik .km-rang { fill: rgba(255, 255, 255, 0.22); transform-box: fill-box; transform-origin: left center; animation: km-wachsen 0.7s var(--o-kurve) both; }
.outtra-kmgrafik .km-rangzeile.is-du .km-rang { fill: #E75012; }
.outtra-kmgrafik .km-plus { font: 700 12px var(--o-mono); fill: #E75012; transform-box: fill-box; transform-origin: center; animation: km-plus 0.5s var(--o-kurve) both; }
.outtra-kmgrafik .km-systeme { font: 500 11px var(--o-mono); letter-spacing: 1.5px; fill: #8F8B85; animation: ls-auf 0.6s var(--o-kurve) 7.1s both; }
.outtra-kmgrafik .km-schritt { animation: ls-auf 0.6s var(--o-kurve) both; }
.outtra-kmgrafik .km-schritt.is-eingabe { animation-delay: 0.2s; }
.outtra-kmgrafik .km-schritt.is-antwort { animation-delay: 3.6s; }
.outtra-kmgrafik .km-schritt.is-report { animation-delay: 5.7s; }
.outtra-kmgrafik .km-tippen1 { width: 0; animation: km-tippen1 1.6s steps(57, end) 0.5s forwards; }
.outtra-kmgrafik .km-tippen2 { width: 0; animation: km-tippen2 1s steps(36, end) 2.15s forwards; }
.outtra-kmgrafik .km-cursor1 { animation: km-cursor1 1.6s steps(57, end) 0.5s forwards, km-aus 0.01s 2.15s forwards, ls-blinken 0.9s steps(1) infinite; }
.outtra-kmgrafik .km-cursor2 { opacity: 0; animation: km-an 0.01s 2.15s forwards, km-cursor2 1s steps(36, end) 2.15s forwards; }
.outtra-kmgrafik .km-senden { transform-box: fill-box; transform-origin: center; animation: km-druck 0.35s ease-in-out 3.25s; }
.outtra-kmgrafik .km-denken { fill: #C9C5BD; opacity: 0; animation: km-denken 0.9s 3.8s both; }
.outtra-kmgrafik .km-denken circle { animation: ls-blinken 0.6s steps(1) infinite; }
.outtra-kmgrafik .km-denken circle:nth-child(2) { animation-delay: 0.2s; }
.outtra-kmgrafik .km-denken circle:nth-child(3) { animation-delay: 0.4s; }
.outtra-kmgrafik .km-zeile { animation: ls-auf 0.5s var(--o-kurve) both; }
@keyframes km-tippen1 { to { width: 424px; } }
@keyframes km-tippen2 { to { width: 266px; } }
@keyframes km-cursor1 { from { transform: translateX(0); } to { transform: translateX(422px); } }
@keyframes km-cursor2 { from { transform: translateX(0); } to { transform: translateX(264px); } }
@keyframes km-aus { to { opacity: 0; visibility: hidden; } }
@keyframes km-an { to { opacity: 1; } }
@keyframes km-druck { 50% { transform: scale(0.82); } }
@keyframes km-denken { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes km-wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes km-plus { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 60% { opacity: 1; transform: translateY(-2px) scale(1.15); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.outtra-kmgrafik *, .outtra-kmgrafik .km-zeichnen { animation: none !important; stroke-dashoffset: 0; }
	.outtra-kmgrafik .km-tippen1 { width: 424px; }
	.outtra-kmgrafik .km-tippen2 { width: 266px; }
	.outtra-kmgrafik .km-cursor1, .outtra-kmgrafik .km-cursor2, .outtra-kmgrafik .km-denken { display: none; }
}

/* ===== Seite KI-Marktreport (06.11.2026) ===== */
/* Studien-Kacheln */
.kmr-studien { display: grid; grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 3vw, 44px); }
.kmr-studie { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--o-linie); border-radius: 16px; background: var(--o-weiss); }
.kmr-studie__zahl { margin: 0; font-size: clamp(34px, 3.4vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--o-orange); }
.kmr-studie__text { margin: 0.8em 0 1.2em; color: var(--o-fliesstext); }
.kmr-studie__quelle { margin: auto 0 0 !important; font: 500 11px var(--o-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--o-leise); }
@media (max-width: 900px) { .kmr-studien { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kmr-studien { grid-template-columns: 1fr; } }

/* Dashboard-Nachbau */
.outtra-kmd { container-type: inline-size; padding: clamp(16px, 3cqi, 28px); background: var(--o-weiss); font-size: clamp(11px, 1.9cqi, 14px); color: var(--o-text); }
.outtra-kmd p { margin: 0; }
.kmd-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: 1em; }
.kmd-titel { font: 600 0.8em var(--o-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--o-orange); }
.kmd-marke { font-weight: 700; }
.kmd-reiterleiste { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 1em; }
.kmd-reiter { padding: 0.45em 0.9em; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); font: inherit; font-size: 0.85em; color: var(--o-text); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.kmd-reiter:hover { border-color: var(--o-orange); }
.kmd-reiter.is-aktiv { border-color: var(--o-text); background: var(--o-text); color: var(--o-weiss); }
.kmd-reiter:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 2px; }
.kmd-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 0.7em; }
.kmd-kachel { padding: 0.75em 0.85em; border: 1px solid var(--o-linie); border-radius: 10px; background: var(--o-grau); }
.kmd-kachel.is-dunkel { border-color: transparent; background: var(--o-text); color: var(--o-weiss); }
.kmd-zahl { font-size: 1.4em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kmd-kachel.is-dunkel .kmd-zahl { color: var(--o-orange); }
.kmd-label { margin-top: 0.3em !important; font-size: 0.8em; color: var(--o-leise); }
.kmd-kachel.is-dunkel .kmd-label { color: rgba(255, 255, 255, 0.65); }
.kmd-unten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.6em; margin-top: 1.2em; padding-top: 1.1em; border-top: 1px solid var(--o-linie); }
.kmd-zwischentitel { margin-bottom: 0.7em !important; font-weight: 700; }
.kmd-chart svg { display: block; width: 100%; height: clamp(80px, 18cqi, 140px); overflow: visible; background: linear-gradient(var(--o-linie), var(--o-linie)) 0 33% / 100% 1px no-repeat, linear-gradient(var(--o-linie), var(--o-linie)) 0 66% / 100% 1px no-repeat; }
.kmd-flaeche { fill: var(--o-orange); opacity: 0.12; transition: d 0.5s var(--o-kurve); }
.kmd-linie { fill: none; stroke: var(--o-orange); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: points 0.5s var(--o-kurve); }
.kmd-achse { position: relative; height: 1.4em; margin-top: 0.4em; font-size: 0.75em; color: var(--o-leise); }
.kmd-achse span { position: absolute; transform: translateX(-50%); }
.kmd-achse span:first-child { transform: none; }
.kmd-achse span:last-child { transform: translateX(-100%); }
.kmd-rang ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35em; }
.kmd-rang li { display: grid; grid-template-columns: 1.4em 6.2em 1fr; align-items: center; gap: 0.5em; padding: 0.2em 0.4em; border-radius: 6px; font-size: 0.85em; transition: background 0.3s; }
.kmd-rang__nr { font-family: var(--o-mono); color: var(--o-leise); }
.kmd-rang__name { color: var(--o-leise); white-space: nowrap; }
.kmd-rang__balken { height: 0.55em; width: var(--b); border-radius: 999px; background: var(--o-linie); }
.kmd-rang li.is-du { background: var(--o-orange-hell, #FDEEE7); }
.kmd-rang li.is-du .kmd-rang__name { font-weight: 700; color: var(--o-text); }
.kmd-rang li.is-du .kmd-rang__balken { background: var(--o-orange); }
.kmd-rang li.is-du .kmd-rang__nr { color: var(--o-orange); }
.kmd-hinweis { margin-top: 0.7em !important; font-size: 0.78em; color: var(--o-leise); }
.kmd-fuss { margin-top: 1em !important; padding-top: 0.8em; border-top: 1px solid var(--o-linie); font: 500 0.72em var(--o-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--o-leise); }
@container (max-width: 640px) {
	.kmd-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kmd-kachel.is-dunkel { grid-column: 1 / -1; }
	.kmd-unten { grid-template-columns: 1fr; }
}

/* Erkenntnisse: umschaltbare Balken */
.outtra-kmi { max-width: 860px; margin-top: clamp(28px, 3vw, 44px); padding: clamp(20px, 3vw, 36px); border: 1px solid var(--o-linie); border-radius: 20px; background: var(--o-weiss); }
.kmi-reiterleiste { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 1.4em; border-radius: 999px; background: var(--o-grau); }
.kmi-reiter { padding: 0.55em 1.1em; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; font-size: 15px; color: var(--o-leise); cursor: pointer; transition: background 0.2s, color 0.2s; }
.kmi-reiter.is-aktiv { background: var(--o-text); color: var(--o-weiss); }
.kmi-reiter:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 2px; }
.kmi-unter { margin: 0 0 1.2em; font: 500 12px var(--o-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--o-leise); }
.kmi-liste { display: grid; gap: 0.75em; margin: 0; padding: 0; list-style: none; }
.kmi-liste li { display: grid; grid-template-columns: minmax(7em, 11em) 1fr 4.2em; align-items: center; gap: 1em; }
.kmi-label { font-weight: 500; }
.kmi-spur { height: 14px; border-radius: 999px; background: var(--o-grau); overflow: hidden; }
.kmi-balken { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--o-text); opacity: 0.8; }
.kmi-liste li.is-hervor .kmi-balken { background: var(--o-orange); opacity: 1; }
.kmi-wert { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.kmi-fazit { margin: 1.4em 0 0; padding: 0.9em 1.1em; border-radius: 12px; background: var(--o-text); color: var(--o-weiss); font-weight: 600; }
.has-js .outtra-kmi .kmi-balken { transform-origin: left center; transform: scaleX(0); }
.has-js .outtra-kmi.is-sichtbar .kmi-panel.is-aktiv .kmi-balken { animation: kmi-wachsen 0.9s var(--o-kurve) forwards; }
.kmi-liste li:nth-child(2) .kmi-balken { animation-delay: 0.06s !important; }
.kmi-liste li:nth-child(3) .kmi-balken { animation-delay: 0.12s !important; }
.kmi-liste li:nth-child(4) .kmi-balken { animation-delay: 0.18s !important; }
.kmi-liste li:nth-child(5) .kmi-balken { animation-delay: 0.24s !important; }
.kmi-liste li:nth-child(6) .kmi-balken { animation-delay: 0.3s !important; }
.kmi-liste li:nth-child(7) .kmi-balken { animation-delay: 0.36s !important; }
@keyframes kmi-wachsen { to { transform: scaleX(1); } }
@media (max-width: 560px) { .kmi-liste li { grid-template-columns: 1fr 3.8em; } .kmi-spur { grid-column: 1 / -1; grid-row: 2; } .kmi-reiter { font-size: 13px; padding: 0.5em 0.8em; } }

/* Wusstest du? */
.kmr-wusstest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(20px, 2.4vw, 32px); }
.kmr-wusstest__karte { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); border-radius: 16px; background: var(--o-orange-hell, #FDEEE7); }
.kmr-wusstest__text { margin: 0.7em 0 1.2em; font-size: 17px; line-height: 1.5; color: var(--o-text); }
.kmr-wusstest__text strong { color: var(--o-orange); }
@media (max-width: 900px) { .kmr-wusstest { grid-template-columns: 1fr; } }

/* Pro-Test */
.kmr-pro { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3vw, 44px); padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: var(--o-text); color: var(--o-weiss); }
.kmr-pro__zahl { display: flex; flex-direction: column; font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; color: var(--o-orange); }
.kmr-pro__text h3 { margin: 0.35em 0 0.4em; color: var(--o-weiss); }
.kmr-pro__text p:last-child { margin: 0; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 760px) { .kmr-pro { grid-template-columns: 1fr; } .kmr-pro__zahl { flex-direction: row; gap: 0.3em; } }

/* Webinar-Karte */
.kmr-webinar { display: block; overflow: hidden; border: 1px solid var(--o-linie); border-radius: 20px; background: var(--o-weiss); color: var(--o-text); text-decoration: none; transition: transform 0.3s var(--o-kurve), box-shadow 0.3s; }
.kmr-webinar:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(21, 23, 28, 0.1); }
.kmr-webinar__bild { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 80% 10%, rgba(231, 80, 18, 0.45), transparent 60%), var(--o-text); }
.kmr-webinar__play { width: 72px; height: 72px; border-radius: 50%; background: var(--o-orange); box-shadow: 0 0 0 10px rgba(231, 80, 18, 0.25); transition: transform 0.3s var(--o-kurve); }
.kmr-webinar__play::after { content: ""; display: block; margin: 24px 0 0 29px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.kmr-webinar:hover .kmr-webinar__play { transform: scale(1.08); }
.kmr-webinar__marke { position: absolute; left: 20px; bottom: 16px; font: 600 12px var(--o-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.kmr-webinar__text { display: flex; flex-direction: column; gap: 0.5em; padding: clamp(18px, 2vw, 26px); }
.kmr-webinar__text strong { font-size: 19px; line-height: 1.3; }
.kmr-webinar__text > span:nth-child(3) { color: var(--o-leise); }
@media (prefers-reduced-motion: reduce) { .kmd-flaeche, .kmd-linie { transition: none; } .has-js .outtra-kmi .kmi-balken { transform: none; animation: none !important; } }
.outtra-kmi, .kmr-pro { box-sizing: border-box; max-width: var(--wp--style--global--content-size, 1280px) !important; margin-inline: auto !important; }
.kmd-achse span { white-space: nowrap; }
.kmr-webinar__text > .is-style-mono-label-orange { font: 600 11px var(--o-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--o-orange); }
.outtra-hero__eyebrow .outtra-kooperation { display: inline-flex; align-items: center; gap: 0.6em; }
.outtra-hero__eyebrow .outtra-kooperation img { display: inline-block; height: 1.9em; width: auto; vertical-align: middle; }
.kmr-studie__zahl { font-variant-numeric: tabular-nums; }
/* KI-Marktreport-Hero: Grafik groesser, darf in den rechten Rand laufen */
@media (min-width: 900px) {
	.outtra-hero--seite.outtra-hero--grafik .outtra-hero__medien:has(.outtra-kmgrafik) { grid-column: 6 / -1; padding-left: clamp(8px, 1vw, 20px); width: calc(100% + min(var(--o-rand), 140px)); max-width: none; }
}

/* KI-Marktreport: So entsteht der Report (Ablauf-Grafik) */
.outtra-kmw { margin: clamp(28px, 3vw, 44px) 0 0; }
.kmw-rahmen { overflow-x: auto; padding: clamp(16px, 2.4vw, 32px); border: 1px solid var(--o-linie); border-radius: 20px; background: var(--o-weiss); }
.outtra-kmw svg { display: block; width: 100%; min-width: 760px; height: auto; overflow: visible; }
.outtra-kmw .kmw-kopf { font: 600 12px var(--o-mono); letter-spacing: 2px; fill: #8F8B85; }
.outtra-kmw .kmw-tag { font: 600 11px var(--o-mono); letter-spacing: 1.2px; fill: #E75012; }
.outtra-kmw .kmw-name { font: 500 14px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-kmw .kmw-mono { font: 600 12px var(--o-mono); letter-spacing: 2px; fill: #E75012; }
.outtra-kmw .kmw-rangnr { font: 600 11px var(--o-mono); fill: rgba(255, 255, 255, 0.5); }
.outtra-kmw .kmw-rang { fill: rgba(255, 255, 255, 0.24); transform-box: fill-box; transform-origin: left center; animation: km-wachsen 0.7s var(--o-kurve) both; }
.outtra-kmw .kmw-rang.is-hervor { fill: #E75012; }
.outtra-kmw .kmw-pille { font: 600 9.5px var(--o-mono); letter-spacing: 1px; fill: rgba(255, 255, 255, 0.85); }
.outtra-kmw .kmw-zahl { font: 700 26px var(--wp--preset--font-family--text); letter-spacing: -0.02em; fill: #E75012; }
.outtra-kmw .kmw-klein { font: 400 13px var(--wp--preset--font-family--text); fill: var(--o-leise); }
.outtra-kmw .kmw-fluss { fill: none; stroke: #E75012; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: ls-fluss 1.4s linear infinite; }
.outtra-kmw .kmw-zeichnen { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ls-zeichnen 0.6s var(--o-kurve) forwards; }
.outtra-kmw .kmw-auf { animation: ls-auf 0.6s var(--o-kurve) both; }
.outtra-kmw .kmw-pop { transform-box: fill-box; transform-origin: center; animation: ls-pop 0.45s var(--o-kurve) both; }
.outtra-kmw .kmw-zelle { transform-box: fill-box; transform-origin: center; animation: ls-pop 0.35s var(--o-kurve) both; }
.has-js .outtra-kmw:not(.is-sichtbar) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	.outtra-kmw *, .outtra-kmw .kmw-zeichnen { animation: none !important; stroke-dashoffset: 0; }
}
.outtra-kmw .kmw-netzlinie { stroke: #D9D5CE; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ls-zeichnen 0.5s var(--o-kurve) forwards; }
.outtra-kmw .kmw-zelle { animation-duration: 0.3s; }
.outtra-kmw .kmw-pille { font-size: 9px; }

/* KI-Marktreport: Screenshot-Tour mit Plaketten und sanftem Zoom */
.kmr-tour { position: relative; overflow: hidden; container-type: inline-size; }
.kmr-tour img { display: block; width: 100%; height: auto; transform-origin: var(--fx, 50%) var(--fy, 50%); transition: transform 1.4s var(--o-kurve); }
.kmr-tour.is-zoom img { transform: scale(1.16); }
@media (prefers-reduced-motion: reduce) { .kmr-tour img { transition: none; } }
.has-js .outtra-loesung.is-sichtbar .is-style-browserrahmen .kmr-tour img { transform-origin: var(--fx, 50%) var(--fy, 50%); transition: clip-path 0.9s var(--o-kurve), transform 1.4s var(--o-kurve); }
.has-js .outtra-loesung.is-sichtbar .is-style-browserrahmen .kmr-tour.is-zoom img { transform: scale(1.16); }

/* KI-Marktreport: Screenshot mit nummerierten Markern */
.kmr-markerbild { position: relative; margin: 0; }
.kmr-markerbild img { display: block; width: 100%; height: auto; }
.kmr-marker { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid #fff; border-radius: 50%; background: var(--o-orange); color: #fff; font: 700 13px/1 var(--wp--preset--font-family--text); box-shadow: 0 4px 12px rgba(21, 23, 28, 0.25); transition: transform 0.25s var(--o-kurve), box-shadow 0.25s; }
.kmr-marker.is-hervor { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(231, 80, 18, 0.25), 0 4px 12px rgba(21, 23, 28, 0.25); }
.has-js .outtra-loesung .kmr-marker { opacity: 0; scale: 0.4; }
.has-js .outtra-loesung.is-sichtbar .kmr-marker { opacity: 1; scale: 1; transition: opacity 0.4s var(--o-kurve) calc(var(--verz) + 0.6s), scale 0.45s var(--o-kurve) calc(var(--verz) + 0.6s), transform 0.25s var(--o-kurve), box-shadow 0.25s; }
.kmr-nr { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 0.5em; border-radius: 50%; background: var(--o-orange); color: #fff; font: 700 12px/1 var(--wp--preset--font-family--text); vertical-align: 1px; }
.outtra-loesung:has(.kmr-nr) .outtra-haken li { padding-left: 0; }
.outtra-loesung:has(.kmr-nr) .outtra-haken li::before { display: none; }
.outtra-loesung:has(.kmr-nr) .outtra-haken li { cursor: default; }
@media (prefers-reduced-motion: reduce) { .kmr-marker { transition: none; } }

/* Marker v2: Knopf, Puls, Infokarte */
.kmr-marker { display: block; width: 0; height: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.kmr-marker__knopf { position: absolute; left: -13px; top: -13px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--o-orange); color: #fff; font: 700 13px/1 var(--wp--preset--font-family--text); box-shadow: 0 4px 12px rgba(21, 23, 28, 0.25); cursor: pointer; animation: kmr-puls 2.6s ease-out infinite; animation-delay: var(--verz); transition: transform 0.25s var(--o-kurve); }
.kmr-marker__knopf:focus-visible { outline: 2px solid var(--o-text); outline-offset: 3px; }
.kmr-marker.is-hervor .kmr-marker__knopf, .kmr-marker.is-offen .kmr-marker__knopf, .kmr-marker__knopf:hover { transform: scale(1.25); }
.kmr-marker.is-hervor, .kmr-marker.is-offen { z-index: 3; }
@keyframes kmr-puls { 0% { box-shadow: 0 0 0 0 rgba(231, 80, 18, 0.5), 0 4px 12px rgba(21, 23, 28, 0.25); } 70% { box-shadow: 0 0 0 12px rgba(231, 80, 18, 0), 0 4px 12px rgba(21, 23, 28, 0.25); } 100% { box-shadow: 0 0 0 0 rgba(231, 80, 18, 0), 0 4px 12px rgba(21, 23, 28, 0.25); } }
.kmr-marker__info { position: absolute; top: -14px; width: 240px; padding: 12px 14px; border-radius: 12px; background: var(--o-text); color: rgba(255, 255, 255, 0.78); font-size: 13px; line-height: 1.45; box-shadow: 0 14px 34px rgba(21, 23, 28, 0.3); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity 0.25s var(--o-kurve), translate 0.25s var(--o-kurve), visibility 0s 0.25s; pointer-events: none; }
.kmr-marker__info strong { display: block; margin-bottom: 3px; color: #fff; font-size: 14px; }
.kmr-marker.is-r .kmr-marker__info { left: 22px; }
.kmr-marker.is-l .kmr-marker__info { right: 22px; }
.kmr-marker.is-offen .kmr-marker__info { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.25s var(--o-kurve), translate 0.25s var(--o-kurve); pointer-events: auto; }
.has-js .outtra-loesung .kmr-marker__knopf { opacity: 0; scale: 0.4; }
.has-js .outtra-loesung.is-sichtbar .kmr-marker__knopf { opacity: 1; scale: 1; transition: opacity 0.4s var(--o-kurve) calc(var(--verz) + 0.6s), scale 0.45s var(--o-kurve) calc(var(--verz) + 0.6s), transform 0.25s var(--o-kurve); }
.has-js .outtra-loesung .kmr-marker { opacity: 1; scale: 1; }
.outtra-loesung:has(.kmr-nr) .outtra-haken li { cursor: pointer; border-radius: 8px; transition: background 0.2s; }
.outtra-loesung:has(.kmr-nr) .outtra-haken li.is-aktiv { background: var(--o-orange-hell, #FDEEE7); }
@media (prefers-reduced-motion: reduce) { .kmr-marker__knopf { animation: none; } }
.kmr-hinweis { display: flex; align-items: center; gap: 0.6em; margin-top: 1.2em; font-weight: 600; color: var(--o-text); }
.kmr-hinweis::before { content: "1"; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background: var(--o-orange); color: #fff; font-size: 12px; box-shadow: 0 0 0 0 rgba(231, 80, 18, 0.5); animation: kmr-puls 2.6s ease-out infinite; }

/* KI-Marktreport Runde 19: Schon-gewusst-Lauf, Pruef-Kasten mit Stoerer, Webinar-Thumbnail */
.kmr-lauf { position: relative; max-width: var(--wp--style--global--content-size, 1280px); margin: clamp(20px, 2.4vw, 32px) auto 0 !important; padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: #FEF4EF; box-sizing: border-box; }
.kmr-lauf__buehne { display: grid; min-height: 7.5em; }
.kmr-lauf__satz { grid-area: 1 / 1; opacity: 0; translate: 0 8px; transition: opacity 0.6s var(--o-kurve), translate 0.6s var(--o-kurve); pointer-events: none; }
.kmr-lauf__satz.is-an { opacity: 1; translate: 0 0; pointer-events: auto; }
.kmr-lauf__text { margin: 0.4em 0 0.8em; max-width: 46em; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; color: var(--o-text); }
.kmr-lauf__text strong { color: var(--o-orange); }
.kmr-lauf__punkte { display: flex; gap: 8px; margin-top: 0.6em; }
.kmr-lauf__punkt { width: 28px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(231, 80, 18, 0.22); cursor: pointer; transition: background 0.3s, width 0.3s; }
.kmr-lauf__punkt.is-an { width: 44px; background: var(--o-orange); }
.kmr-wusstest__karte { background: #FEF4EF; }

.kmr-check { position: relative; box-sizing: border-box; max-width: var(--wp--style--global--content-size, 1280px); margin: clamp(28px, 3vw, 44px) auto 0 !important; padding: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 16vw, 240px); border-radius: 20px; background: var(--o-text); color: var(--o-weiss); }
.kmr-check h3 { margin: 0.35em 0 0.4em; color: var(--o-weiss); font-size: clamp(24px, 2.4vw, 34px); }
.kmr-check__text { max-width: 40em; margin: 0 0 1.4em; color: rgba(255, 255, 255, 0.72); }
.kmr-check .outtra-ki-check { max-width: 640px; }
.kmr-check .outtra-ki-check__hinweis { color: rgba(255, 255, 255, 0.6); }
.kmr-check__stoerer { position: absolute; top: clamp(-28px, -2vw, -18px); right: clamp(20px, 4vw, 56px); display: grid; place-content: center; gap: 2px; width: clamp(120px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--o-orange); color: #fff; text-align: center; rotate: 10deg; box-shadow: 0 12px 30px rgba(231, 80, 18, 0.35); }
.kmr-check__stoerer span { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.kmr-check__stoerer small { padding: 0 14px; font-size: clamp(10.5px, 0.9vw, 12.5px); font-weight: 600; line-height: 1.25; }
@media (max-width: 760px) { .kmr-check { padding-right: clamp(28px, 4vw, 56px); padding-top: 110px; } .kmr-check__stoerer { top: -24px; } }

.kmr-webinar__bild { place-items: stretch; padding: clamp(18px, 2.4vw, 28px); background: radial-gradient(120% 90% at 85% 0%, rgba(231, 80, 18, 0.55), transparent 60%), var(--o-text); }
.kmr-webinar__thumb { display: flex; flex-direction: column; height: 100%; }
.kmr-webinar__marke { position: static; }
.kmr-webinar__titel { margin-top: 0.6em; max-width: 13em; color: #fff; font-size: clamp(20px, 2.1vw, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.kmr-webinar__fuss { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.kmr-webinar__koepfe { display: flex; }
.kmr-webinar__koepfe img { width: clamp(40px, 4vw, 52px); height: clamp(40px, 4vw, 52px); border: 3px solid #fff; border-radius: 50%; object-fit: cover; background: #fff; }
.kmr-webinar__koepfe img + img { margin-left: -12px; }
.kmr-webinar__namen { color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.3; }
.kmr-webinar__namen strong { display: block; color: #fff; }
.kmr-webinar__play { position: absolute; right: clamp(18px, 2.4vw, 28px); bottom: clamp(18px, 2.4vw, 28px); }

/* Schon gewusst: kuerzere Zeilen, Fragezeichen als Bildelement, Label als Plakette */
.kmr-lauf { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); align-items: center; overflow: hidden; }
.kmr-lauf__zeichen { grid-row: 1 / span 3; display: grid; place-items: center; width: clamp(96px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--o-orange); color: #fff; font-size: clamp(64px, 7vw, 100px); font-weight: 800; line-height: 1; box-shadow: 0 0 0 12px rgba(231, 80, 18, 0.12); }
.kmr-lauf__label { justify-self: start; margin: 0 0 0.4em !important; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--o-orange); font: 600 12px var(--o-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.kmr-lauf__buehne, .kmr-lauf__punkte { grid-column: 2; }
.kmr-lauf__text { max-width: 30em; }
.kmr-lauf__satz { transition-duration: 0.9s; }
@media (max-width: 640px) { .kmr-lauf { grid-template-columns: 1fr; } .kmr-lauf__zeichen { grid-row: auto; width: 72px; font-size: 48px; margin-bottom: 16px; } .kmr-lauf__buehne, .kmr-lauf__punkte { grid-column: 1; } }
.kmr-check__stoerer { right: clamp(140px, 20vw, 300px); box-shadow: none; }

/* Schon gewusst: Icon je Aussage statt Fragezeichen, kleinere Schrift */
.kmr-lauf__zeichen { position: relative; font-size: 0; }
.kmr-lauf__icon { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; scale: 0.7; transition: opacity 0.6s var(--o-kurve), scale 0.6s var(--o-kurve); }
.kmr-lauf__icon.is-an { opacity: 1; scale: 1; }
.kmr-lauf__icon svg { width: 46%; height: 46%; stroke: #fff; stroke-width: 1.6; }
.kmr-lauf__text { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; }
.kmr-lauf__buehne { min-height: 6em; }
.kmr-check { padding-right: clamp(28px, 4vw, 56px); }
.kmr-check h3 { white-space: nowrap; }
.kmr-check__stoerer { right: clamp(160px, 30vw, 420px); }
@media (max-width: 760px) { .kmr-check h3 { white-space: normal; } .kmr-check__stoerer { right: 24px; } }

/* Webinar-Karte mit echtem YouTube-Vorschaubild, Koepfe unter dem Titel */
.kmr-webinar.is-foto .kmr-webinar__bild { display: block; position: relative; padding: 0; background: #fff; border-bottom: 1px solid var(--o-linie); }
.kmr-webinar__vorschau { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.kmr-webinar.is-foto .kmr-webinar__play { position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; translate: -50% -50%; }
.kmr-webinar.is-foto .kmr-webinar__fuss { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.kmr-webinar.is-foto .kmr-webinar__koepfe img { border-color: #fff; box-shadow: 0 0 0 1px var(--o-linie); }
.kmr-webinar.is-foto .kmr-webinar__namen { color: var(--o-leise); }
.kmr-webinar.is-foto .kmr-webinar__namen strong { display: block; color: var(--o-text); font-size: 14px; }
.kmr-webinar.is-foto .kmr-webinar__play { left: auto; top: auto; right: 18px; bottom: 18px; translate: none; }

/* Produktdaten-Anreicherung: Hero-Schaubild (06.11.2026), Stil wie Lost Sales */
.outtra-pdgrafik { margin: 0; }
.outtra-pdgrafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.outtra-pdgrafik .pd-fluss { fill: none; stroke: #E75012; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: ls-fluss 1.4s linear infinite; }
.outtra-pdgrafik .pd-zeichnen { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ls-zeichnen 0.5s var(--o-kurve) forwards; }
.outtra-pdgrafik .pd-mono { font: 600 11.5px var(--o-mono); letter-spacing: 1.8px; fill: #8F8B85; }
.outtra-pdgrafik .pd-mono.is-orange { fill: #E75012; }
.outtra-pdgrafik .pd-name { font: 500 13.5px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-pdgrafik .pd-name.is-fehlt { fill: #A9A49C; }
.outtra-pdgrafik .pd-klein { font: 400 11.5px var(--wp--preset--font-family--text); fill: #8F8B85; }
.outtra-pdgrafik .pd-prozent { font: 600 11.5px var(--o-mono); fill: #8F8B85; }
.outtra-pdgrafik .pd-prozent.is-orange { fill: #E75012; }
.outtra-pdgrafik .pd-qualitaet { transform-box: fill-box; transform-origin: left center; animation: km-wachsen 0.8s var(--o-kurve) 1.2s backwards; }
.outtra-pdgrafik .pd-qualitaet.is-voll { animation-delay: 5.4s; }
.outtra-pdgrafik .pd-layer { font: 600 14px var(--wp--preset--font-family--text); fill: #fff; }
.outtra-pdgrafik .pd-layer-klein { font: 400 12px var(--wp--preset--font-family--text); fill: rgba(255, 255, 255, 0.62); }
.outtra-pdgrafik .pd-gefunden { font: 600 11.5px var(--o-mono); letter-spacing: 1.8px; fill: #8F8B85; animation: ls-auf 0.5s var(--o-kurve) 5.7s backwards; }
.outtra-pdgrafik .pd-kanalname { font: 500 13px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-pdgrafik .pd-schritt { animation: ls-auf 0.6s var(--o-kurve) backwards; }
.outtra-pdgrafik .pd-schritt.is-layer { animation-delay: 2.5s; }
.outtra-pdgrafik .pd-schritt.is-nachher { animation-delay: 3.75s; }
.outtra-pdgrafik .pd-zeile { animation: ls-auf 0.45s var(--o-kurve) backwards; }
.outtra-pdgrafik .pd-luecke { animation: ls-blinken 1.1s steps(1) 1.2s 3; }
.outtra-pdgrafik .pd-neu { opacity: 0; animation: km-an 0.4s ease forwards; }
.outtra-pdgrafik .pd-haken.is-neu { transform-box: fill-box; transform-origin: center; animation: ls-pop 0.4s var(--o-kurve) backwards; }
.outtra-pdgrafik .pd-kanal { transform-box: fill-box; transform-origin: center; animation: ls-pop 0.45s var(--o-kurve) backwards; }
.outtra-pdgrafik .pd-puls { transform-box: fill-box; transform-origin: center; animation: pd-puls 1.8s ease-out 3s infinite backwards; }
@keyframes pd-puls { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) {
	.outtra-pdgrafik *, .outtra-pdgrafik .pd-zeichnen { animation: none !important; stroke-dashoffset: 0; }
	.outtra-pdgrafik .pd-neu { opacity: 1; }
}
@media (min-width: 900px) {
	.outtra-hero--seite.outtra-hero--grafik .outtra-hero__medien:has(.outtra-pdgrafik) { grid-column: 6 / -1; padding-left: clamp(8px, 1vw, 20px); width: calc(100% + min(var(--o-rand), 140px)); max-width: none; }
}
.outtra-hero__eyebrow .outtra-kooperation img.is-frontnow { height: 1.2em; }

/* Produktdaten-Anreicherung: Gruen = vorhanden, Rot = fehlt (06.11.2026) */
.outtra-pdgrafik .pd-mono.is-gruen, .outtra-pdgrafik .pd-prozent.is-gruen { fill: #27AE74; }
.outtra-pdgrafik .pd-mono.is-rot, .outtra-pdgrafik .pd-prozent.is-rot { fill: #E2422B; }
.outtra-pdgrafik .pd-kreuz { transform-box: fill-box; transform-origin: center; animation: ls-pop 0.4s var(--o-kurve) 1.2s backwards; }
.outtra-hero__eyebrow .outtra-kooperation img.is-frontnow { height: 1.55em; position: relative; top: -0.2em; }

.outtra-journey__folge { margin-top: var(--wp--preset--spacing--70) !important; margin-bottom: var(--wp--preset--spacing--30) !important; }

/* Produktdaten-Anreicherung: Customer Journey als Umschalter Bisher/Heute (06.11.2026, ueberarbeitet) */
.pdj { --pdj-text: clamp(14.5px, 1.05vw, 16.5px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; margin-top: var(--wp--preset--spacing--60) !important; }
.pdj[data-modus="bisher"] [data-fuer="heute"], .pdj[data-modus="heute"] [data-fuer="bisher"] { display: none !important; }
.pdj__bildschirm { position: relative; border: 1px solid var(--o-linie); border-radius: 18px; background: var(--o-weiss); box-shadow: var(--wp--preset--shadow--karte); overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--o-text); }
.pdj__leiste { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--o-linie); background: #F7F5F2; }
.pdj__leiste i { width: 9px; height: 9px; border-radius: 50%; background: #DDD9D2; }
.pdj__buehne { position: relative; height: 352px; padding: 18px 22px; box-sizing: border-box; overflow: hidden; }
.pdj__tippen { display: inline-block; white-space: nowrap; }
.pdj__suche { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--o-linie); border-radius: 999px; font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.pdj__suche svg { width: 16px; height: 16px; color: var(--o-orange); flex: none; }
.pdj__anzahl { margin: 10px 0 4px 4px !important; font-size: 11.5px; color: #8F8B85; }
.pdj__treffer { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pdj__treffer li { display: grid; gap: 2px; padding: 5px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.pdj__domain { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #8F8B85; }
.pdj__domain i { width: 12px; height: 12px; border-radius: 50%; background: #E5E2DC; }
.pdj__domain b { padding: 0 5px; border: 1px solid #C9C5BD; border-radius: 4px; font-size: 9.5px; font-weight: 600; color: var(--o-leise); }
.pdj__titelzeile { font-size: 13.5px; font-weight: 600; color: #2E2D2B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdj__treffer li.is-ziel { border-color: var(--o-orange); background: #FDEEE7; }
.pdj__treffer li.is-ziel, .pdj__shop .pdj__kaufen { position: relative; }
.pdj__zeiger { position: absolute; left: 58%; top: 55%; z-index: 2; pointer-events: none; }
.pdj__shop { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--o-weiss); }
.pdj__shopkopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--o-linie); font-size: 14px; }
.pdj__korb { position: relative; display: inline-flex; color: var(--o-text); }
.pdj__korb svg { width: 20px; height: 20px; }
.pdj__korbzahl { position: absolute; right: -8px; top: -7px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--o-orange); color: #fff; font-size: 10px; }
.pdj__shopinhalt { flex: 1; display: flex; gap: 20px; align-items: center; padding: 18px 22px; }
.pdj__shopbild { flex: none; display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 14px; background: #F7F5F2; }
.pdj__shopbild svg { width: 62%; height: 62%; }
.pdj__shoptext { flex: 1; display: grid; gap: 8px; justify-items: start; }
.pdj__shoptext > strong { font-size: 16px; }
.pdj__sterne { color: var(--o-orange); font-size: 11px; letter-spacing: 1px; }
.pdj__sterne em { font-style: normal; color: #8F8B85; letter-spacing: 0; }
.pdj__shoppreis { font-size: 18px; font-weight: 700; }
.pdj__groessen { display: flex; gap: 6px; }
.pdj__groessen span { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 6px; border: 1px solid var(--o-linie); border-radius: 7px; font-size: 12px; font-weight: 600; }
.pdj__groessen span.is-wahl { border-color: #15171C; background: #15171C; color: #fff; }
.pdj__kaufen { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--o-orange); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pdj__zeiger2 { position: absolute; left: 55%; top: 50%; z-index: 4; pointer-events: none; }
.pdj__frage { margin: 0 0 0 auto !important; width: fit-content; max-width: 80%; padding: 10px 15px; border-radius: 16px 16px 4px 16px; background: #15171C; color: #fff; font-size: 14px; }
.pdj__denken { position: absolute; left: 24px; top: 74px; display: flex; gap: 5px; opacity: 0; }
.pdj__denken i { width: 7px; height: 7px; border-radius: 50%; background: #C9C5BD; animation: ls-blinken 0.6s steps(1) infinite; }
.pdj__denken i:nth-child(2) { animation-delay: 0.2s; }
.pdj__denken i:nth-child(3) { animation-delay: 0.4s; }
.pdj__antwort { position: absolute; left: 22px; right: 22px; top: 66px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #F4F2EE; }
.pdj__antwort > p { display: flex; align-items: center; gap: 8px; margin: 0 0 9px !important; font-size: 13.5px; }
.pdj__antwort > p svg { width: 15px; height: 15px; color: var(--o-orange); flex: none; }
.pdj__antwort ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pdj__antwort li { display: flex; align-items: center; gap: 11px; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--o-weiss); }
.pdj__bild { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #F7F5F2; }
.pdj__bild svg { width: 28px; height: 28px; }
.pdj__produkt { flex: 1; display: grid; font-size: 12px; color: var(--o-leise); }
.pdj__produkt strong { color: var(--o-text); font-size: 13.5px; }
.pdj__preis { display: grid; justify-items: end; font-weight: 700; font-size: 13px; }
.pdj__preis .pdj__sterne { font-size: 9.5px; font-weight: 400; }
.pdj__kaufen.is-tausch { display: inline-grid; padding: 6px 12px; }
.pdj__kaufen.is-tausch > span { grid-area: 1 / 1; text-align: center; }
.pdj__k2 { opacity: 0; }
.pdj__eingabe { position: absolute; left: 22px; right: 22px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); font-size: 13.5px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.pdj__platzhalter { color: #A9A49C; }
.pdj__eingabetext { position: absolute; left: 16px; opacity: 0; }
.pdj__senden { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--o-orange); color: #fff; font-weight: 700; }
/* Seite rechts: Schalter oben, Schritte unten buendig mit dem Bildschirm */
.pdj__seite { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: clamp(28px, 3vw, 40px); }
.pdj__schalter { display: inline-flex; padding: 3px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); }
.pdj__schalter button { padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--o-leise); cursor: pointer; transition: background 0.25s, color 0.25s; }
.pdj__schalter button[aria-pressed="true"] { background: #15171C; color: #fff; }
.pdj[data-modus="heute"] .pdj__schalter button[aria-pressed="true"] { background: var(--o-orange); }
.pdj__zahl { display: flex; align-items: last baseline; gap: 14px; margin: 0 0 18px !important; }
.pdj__zahl strong { font-size: clamp(40px, 4vw, 56px); line-height: 0.9; letter-spacing: -0.04em; }
.pdj[data-modus="heute"] .pdj__zahl strong { color: var(--o-orange); }
.pdj__zahl span { max-width: 12em; font-size: var(--pdj-text); line-height: 1.4; color: var(--o-leise); }
.pdj__schritte { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pdj__schritte li { display: flex; align-items: center; gap: 12px; font-size: var(--pdj-text); line-height: 1.4; font-weight: 600; }
.pdj__nr { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--o-linie); border-radius: 50%; font: 600 12px var(--o-mono); color: var(--o-leise); background: var(--o-weiss); }
.pdj[data-modus="heute"] .pdj__nr { border-color: var(--o-orange); color: var(--o-orange); }
.pdj .pdj__schritte li.is-kauf .pdj__nr { background: #15171C; border-color: #15171C; color: #fff; }
.pdj[data-modus="heute"] .pdj__schritte li.is-kauf .pdj__nr { background: var(--o-orange); border-color: var(--o-orange); }
/* Ablauf: nur mit JS, startet bei jedem Umschalten neu */
.pdj.is-js .pdj__schritte li { opacity: 0.3; }
.pdj.is-laeuft .pdj__schritte li { animation: pdj-an 0.64s var(--v) forwards; }
.pdj.is-js:not(.is-laeuft) .pdj__shop { opacity: 0; }
.pdj.is-laeuft [data-fuer="bisher"] .pdj__suche { animation: ls-auf 0.73s 0.18s backwards; }
.pdj.is-laeuft .pdj__suche .pdj__tippen { animation: pdj-tippen 1.1s steps(32, end) 0.73s backwards; }
.pdj.is-laeuft .pdj__anzahl { animation: ls-auf 0.55s 2.64s backwards; }
.pdj.is-laeuft .pdj__treffer li { animation: ls-auf 0.64s calc(2.91s + var(--i) * 0.22s) backwards; }
.pdj.is-laeuft .pdj__treffer li.is-ziel { animation: ls-auf 0.64s calc(2.91s + var(--i) * 0.22s) backwards, pdj-ziel 0.45s 5.73s backwards; }
.pdj.is-laeuft .pdj__zeiger { animation: pdj-zeiger 1.46s var(--o-kurve) 4.37s backwards, pdj-klick 0.45s 5.92s; }
.pdj.is-laeuft .pdj__shop { animation: pdj-shop 0.82s var(--o-kurve) 6.73s backwards; }
.pdj.is-laeuft .pdj__groessen .is-wahl { animation: pdj-wahl 0.45s 7.83s backwards; }
.pdj.is-laeuft .pdj__zeiger2 { animation: pdj-zeiger2 1.27s var(--o-kurve) 7.19s backwards, pdj-klick 0.45s 8.74s; }
.pdj.is-laeuft .pdj__shop .pdj__kaufen { animation: km-druck 0.64s ease-in-out 8.74s; }
.pdj.is-laeuft .pdj__korbzahl { animation: ls-pop 0.64s var(--o-kurve) 9.1s backwards; }
.pdj.is-laeuft .pdj__eingabe { animation: ls-auf 0.64s 0.09s backwards; }
.pdj.is-laeuft .pdj__platzhalter { animation: pdj-weg 2.64s 0.55s; }
.pdj.is-laeuft .pdj__eingabetext { animation: pdj-tippen 1.4s steps(40, end) 0.55s backwards, pdj-da 2.64s 0.55s; }
.pdj.is-laeuft .pdj__senden { animation: km-druck 0.55s ease-in-out 2.82s; }
.pdj.is-laeuft .pdj__frage { animation: ls-auf 0.73s 3.19s backwards; }
.pdj.is-laeuft .pdj__denken { animation: km-denken 1.27s 3.55s both; }
.pdj.is-laeuft .pdj__antwort { animation: ls-auf 0.73s var(--o-kurve) 4.73s backwards; }
.pdj.is-laeuft .pdj__antwort li { animation: ls-auf 0.64s calc(5s + var(--i) * 0.27s) backwards; }
.pdj.is-laeuft .pdj__antwort .pdj__kaufen { animation: km-druck 0.64s ease-in-out 7.01s; }
.pdj.is-laeuft .pdj__k1 { animation: pdj-aus 0.36s 7.37s forwards; }
.pdj.is-laeuft .pdj__k2 { animation: pdj-an 0.36s 7.37s forwards; }
.pdj.is-laeuft .pdj__kaufen.is-tausch { animation: km-druck 0.64s ease-in-out 7.01s, pdj-gekauft 0.36s 7.37s forwards; }
@keyframes pdj-an { to { opacity: 1; } }
@keyframes pdj-aus { to { opacity: 0; } }
@keyframes pdj-tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pdj-weg { from, to { opacity: 0; } }
@keyframes pdj-da { from, to { opacity: 1; } }
@keyframes pdj-ziel { from { border-color: transparent; background: transparent; } }
@keyframes pdj-zeiger { from { opacity: 0; transform: translate(110px, 120px); } 25% { opacity: 1; } }
@keyframes pdj-zeiger2 { from { opacity: 0; transform: translate(90px, -110px); } 25% { opacity: 1; } }
@keyframes pdj-klick { 50% { transform: scale(0.8); } }
@keyframes pdj-shop { from { opacity: 0; transform: translateY(14px); } }
@keyframes pdj-wahl { from { border-color: var(--o-linie); background: transparent; color: var(--o-text); } }
@keyframes pdj-gekauft { to { background: #27AE74; } }
@media (prefers-reduced-motion: reduce) {
	.pdj *, .pdj.is-laeuft * { animation: none !important; }
	.pdj.is-js .pdj__schritte li { opacity: 1; }
	.pdj.is-js .pdj__shop, .pdj.is-js:not(.is-laeuft) .pdj__shop { opacity: 1; }
}
@media (max-width: 899px) { .pdj { grid-template-columns: 1fr; } .pdj__seite { order: -1; } }
/* Journey: Schlussfolgerung unter Bildschirm und Schritten, wechselt mit dem Schalter (06.11.2026) */
.pdj { row-gap: clamp(20px, 2vw, 28px); }
.pdj__folge { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 1.8vw, 24px); align-items: center; padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px); border-radius: 16px; background: #15171C; }
.pdj__folge p { margin: 0 !important; font-size: clamp(15.5px, 1.25vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.pdj__folge p strong { color: #fff; }
.pdj.is-laeuft .pdj__folge[data-fuer="bisher"] { animation: ls-auf 0.78s var(--o-kurve) 9.62s backwards; }
.pdj.is-laeuft .pdj__folge[data-fuer="heute"] { animation: ls-auf 0.78s var(--o-kurve) 7.8s backwards; }
.pdj__pfeil { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--o-orange); color: #fff; font-size: 20px; font-weight: 700; }
.pdj__folge[data-fuer="heute"] .pdj__pfeil { background: var(--o-orange); }
/* Jeder Modus baut sich nur einmal auf, danach steht er fertig da */
.pdj.is-fertig .pdj__schritte li { opacity: 1; }
.pdj.is-js.is-fertig .pdj__shop { opacity: 1; }
.pdj.is-fertig .pdj__k1 { opacity: 0; }
.pdj.is-fertig .pdj__k2 { opacity: 1; }
.pdj.is-fertig .pdj__kaufen.is-tausch { background: #27AE74; }
@media (max-width: 899px) { .pdj__folge { align-items: start; } }
/* Fliesstext einheitlich: Abschnitts-Einleitungen so gross wie der Hero-Text (06.11.2026) */
.outtra-einleitung { font-size: clamp(14.5px, 1.05vw, 16.5px); }

/* Layerliste: Zeilen bauen sich auf, danach leuchtet reihum ein Icon kurz orange (06.11.2026) */
.has-js .outtra-layerliste li { opacity: 0; }
.has-js .outtra-layerliste.is-sichtbar li { animation: ls-auf 0.5s var(--o-kurve) forwards; }
.outtra-layerliste.is-sichtbar .outtra-layerliste__icon { animation: ll-akzent 10s ease-in-out infinite; }
.has-js .outtra-layerliste.is-sichtbar li:nth-child(1) { animation-delay: 0.00s; } .outtra-layerliste.is-sichtbar li:nth-child(1) .outtra-layerliste__icon { animation-delay: 1.2s; }
.has-js .outtra-layerliste.is-sichtbar li:nth-child(2) { animation-delay: 0.12s; } .outtra-layerliste.is-sichtbar li:nth-child(2) .outtra-layerliste__icon { animation-delay: 3.2s; }
.has-js .outtra-layerliste.is-sichtbar li:nth-child(3) { animation-delay: 0.24s; } .outtra-layerliste.is-sichtbar li:nth-child(3) .outtra-layerliste__icon { animation-delay: 5.2s; }
.has-js .outtra-layerliste.is-sichtbar li:nth-child(4) { animation-delay: 0.36s; } .outtra-layerliste.is-sichtbar li:nth-child(4) .outtra-layerliste__icon { animation-delay: 7.2s; }
.has-js .outtra-layerliste.is-sichtbar li:nth-child(5) { animation-delay: 0.48s; } .outtra-layerliste.is-sichtbar li:nth-child(5) .outtra-layerliste__icon { animation-delay: 9.2s; }
@keyframes ll-akzent { 0%, 14%, 100% { background: transparent; color: var(--o-orange); } 4%, 10% { background: var(--o-orange); color: #fff; } }
@media (prefers-reduced-motion: reduce) { .has-js .outtra-layerliste li { opacity: 1; animation: none !important; } .outtra-layerliste__icon { animation: none !important; } }

/* Zitat-Karten: Logo rechts neben Name und Rolle (07.11.2026) */
.outtra-zitat figcaption:has(.outtra-zitat__logo) { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.outtra-zitat figcaption .outtra-zitat__wer { display: flex; flex-direction: column; gap: 2px; font-size: inherit; color: inherit; }
.outtra-zitat__logo { height: 22px; width: auto; flex: none; }
.outtra-zitat__logo.is-globus { height: 34px; }

/* ROI-Rechner kompakter: Regler-Spalte schmaler, mehr Luft drumherum, Regler naeher zusammen (07.11.2026) */
@media (min-width: 900px) {
	.outtra-roi.is-frontnow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
	.outtra-roi.is-frontnow .outtra-roi__regler { align-content: center; }
}
.outtra-roi.is-frontnow .outtra-roi__regler { gap: 14px; padding: clamp(26px, 3vw, 40px) clamp(28px, 4vw, 56px); }
.outtra-roi.is-frontnow .outtra-roi__kopf label { font-size: 15px; }
.outtra-roi.is-frontnow .outtra-roi__kopf output { font-size: 15px; }
.outtra-roi.is-frontnow input[type="range"] { margin-top: 6px; }
/* ROI-Rechner kompakter, rechte Seite (07.11.2026) */
.outtra-roi.is-frontnow .outtra-roi__ergebnis { padding: clamp(26px, 3vw, 40px) clamp(28px, 3.4vw, 48px); }
.outtra-roi.is-frontnow .outtra-roi__summe { font-size: clamp(34px, 3.4vw, 50px); }
.outtra-roi.is-frontnow .outtra-roi__summe + .outtra-roi__formel { margin-top: 6px !important; }
.outtra-roi.is-frontnow .outtra-roi__raster { gap: 14px 24px; margin-top: 18px !important; padding-top: 18px; }
.outtra-roi.is-frontnow .outtra-roi__wert { font-size: clamp(19px, 1.6vw, 24px); }
.outtra-roi.is-frontnow .outtra-roi__hinweis { margin-top: 18px !important; }

/* Smart Replenishment: Hero-Schaubild (07.11.2026), Stil wie Lost Sales */
.outtra-srgrafik { margin: 0; }
.outtra-srgrafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.outtra-srgrafik .sr-fluss { fill: none; stroke: #E75012; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: ls-fluss 1.4s linear infinite; }
.outtra-srgrafik .sr-zeichnen { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ls-zeichnen 0.6s var(--o-kurve) forwards; }
.outtra-srgrafik .sr-verlauf { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.outtra-srgrafik .sr-prognose { fill: none; stroke: #E75012; stroke-width: 2.2; stroke-dasharray: 4 4; stroke-linecap: round; }
.outtra-srgrafik .sr-mono { font: 600 11.5px var(--o-mono); letter-spacing: 1.8px; fill: #8F8B85; }
.outtra-srgrafik .sr-mono.is-orange { fill: #E75012; }
.outtra-srgrafik .sr-tag { font: 600 12px var(--o-mono); letter-spacing: 1.5px; fill: #fff; }
.outtra-srgrafik .sr-produkt { font: 600 14px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-srgrafik .sr-klein { font: 400 12px var(--wp--preset--font-family--text); fill: #8F8B85; }
.outtra-srgrafik .sr-klein.is-hell { fill: rgba(255, 255, 255, 0.62); }
.outtra-srgrafik .sr-groesse { font: 600 12px var(--o-mono); fill: var(--o-text); }
.outtra-srgrafik .sr-zahl { font: 600 12.5px var(--o-mono); fill: var(--o-text); }
.outtra-srgrafik .sr-pille { font: 600 11.5px var(--o-mono); letter-spacing: 1.5px; fill: #E75012; }
.outtra-srgrafik .sr-prognosetext { font: 600 13px var(--wp--preset--font-family--text); fill: #fff; }
.outtra-srgrafik .sr-hinweistext { font: 600 12px var(--wp--preset--font-family--text); }
.outtra-srgrafik .sr-hinweistext.is-rot { fill: #E2422B; }
.outtra-srgrafik .sr-hinweistext.is-gruen { fill: #1E8F5E; }
.outtra-srgrafik .sr-wtbtext { font: 500 13px var(--wp--preset--font-family--text); fill: var(--o-text); }
/* Groesse M: wird knapp, dann wieder aufgefuellt */
.outtra-srgrafik .sr-m-alt { fill: #C9C5BD; transform-box: fill-box; transform-origin: left center; animation: sr-schrumpfen 0.8s var(--o-kurve) 1s forwards, sr-weg 0.3s 6.2s forwards; }
.outtra-srgrafik .sr-m-neu { fill: #27AE74; transform-box: fill-box; transform-origin: left center; animation: km-wachsen 0.8s var(--o-kurve) 6.2s backwards; }
.outtra-srgrafik .sr-z-alt { animation: sr-weg 0.2s 1.6s forwards; }
.outtra-srgrafik .sr-z-knapp { fill: #E2422B; opacity: 0; animation: sr-kommt 0.2s 1.6s forwards, sr-weg 0.2s 6.2s forwards; }
.outtra-srgrafik .sr-z-neu { fill: #1E8F5E; opacity: 0; animation: sr-kommt 0.2s 6.4s forwards; }
.outtra-srgrafik .sr-hinweis.is-knapp { opacity: 0; animation: sr-kommt 0.3s 1.9s forwards, sr-weg 0.3s 6.2s forwards; }
.outtra-srgrafik .sr-hinweis.is-wieder { opacity: 0; animation: sr-kommt 0.3s 6.5s forwards; }
/* Ablauf */
.outtra-srgrafik .sr-schritt { animation: ls-auf 0.6s var(--o-kurve) backwards; }
.outtra-srgrafik .sr-zeile { animation: ls-auf 0.45s var(--o-kurve) backwards; }
.outtra-srgrafik .sr-schritt.is-cb { animation-delay: 2.6s; }
.outtra-srgrafik .sr-punkt { transform-box: fill-box; transform-origin: center; animation: ls-pop 0.4s var(--o-kurve) 4.1s backwards; }
.outtra-srgrafik .sr-prognosetext { animation: ls-auf 0.4s var(--o-kurve) 4.1s backwards; }
.outtra-srgrafik .sr-schritt.is-nachorder { animation: ls-pop 0.45s var(--o-kurve) 4.8s backwards; transform-box: fill-box; transform-origin: center; }
.outtra-srgrafik .sr-schritt.is-marke { animation: ls-pop 0.45s var(--o-kurve) 5s backwards; transform-box: fill-box; transform-origin: center; }
.outtra-srgrafik .sr-schritt.is-wtb { animation-delay: 7s; }
.outtra-srgrafik .sr-haken { transform-box: fill-box; transform-origin: center; animation: ls-pop 0.4s var(--o-kurve) 7.4s backwards; }
@keyframes sr-schrumpfen { to { transform: scaleX(0.75); fill: #E2422B; } }
@keyframes sr-weg { to { opacity: 0; } }
@keyframes sr-kommt { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.outtra-srgrafik *, .outtra-srgrafik .sr-zeichnen { animation: none !important; stroke-dashoffset: 0; }
	.outtra-srgrafik .sr-z-alt, .outtra-srgrafik .sr-z-knapp, .outtra-srgrafik .sr-hinweis.is-knapp { opacity: 0; }
	.outtra-srgrafik .sr-z-neu, .outtra-srgrafik .sr-hinweis.is-wieder { opacity: 1; }
}
@media (min-width: 900px) {
	.outtra-hero--seite.outtra-hero--grafik .outtra-hero__medien:has(.outtra-srgrafik) { grid-column: 6 / -1; padding-left: clamp(8px, 1vw, 20px); width: calc(100% + min(var(--o-rand), 140px)); max-width: none; }
}
.outtra-hero__eyebrow .outtra-kooperation img.is-chainbalance { height: 2.6em; position: relative; top: -0.05em; margin-block: -0.6em; }

.outtra-quelle { margin-top: 14px !important; font-size: 13px; color: var(--o-leise); }
.outtra-zitate.is-einzeln { grid-template-columns: 1fr; margin-bottom: clamp(16px, 2vw, 24px); }

/* OMIS: Hero-Schaubild (07.11.2026), Stil wie Lost Sales */
.outtra-omgrafik { margin: 0; }
.outtra-omgrafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.outtra-omgrafik .om-fluss { fill: none; stroke: #E75012; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: ls-fluss 1.4s linear infinite; }
.outtra-omgrafik .om-zeichnen { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ls-zeichnen 0.6s var(--o-kurve) forwards; }
.outtra-omgrafik .om-mono { font: 600 11.5px var(--o-mono); letter-spacing: 1.8px; fill: #8F8B85; }
.outtra-omgrafik .om-mono.is-orange { fill: #E75012; font-size: 13px; letter-spacing: 3px; }
.outtra-omgrafik .om-hell { font: 400 12.5px var(--wp--preset--font-family--text); fill: rgba(255, 255, 255, 0.7); }
.outtra-omgrafik .om-zahl { font: 700 24px var(--wp--preset--font-family--text); letter-spacing: -0.02em; fill: var(--o-text); }
.outtra-omgrafik .om-zahl.is-gruen { fill: #1E8F5E; }
.outtra-omgrafik .om-klein { font: 400 12px var(--wp--preset--font-family--text); fill: #8F8B85; }
.outtra-omgrafik .om-kat { font: 500 12.5px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-omgrafik .om-kat.is-orange { font-weight: 700; fill: #E75012; }
.outtra-omgrafik .om-balken { fill: #C9C5BD; transform-box: fill-box; transform-origin: left center; animation: km-wachsen 0.7s var(--o-kurve) backwards; }
.outtra-omgrafik .om-balken.is-orange { fill: #E75012; }
.outtra-omgrafik .om-plus { font: 700 12px var(--o-mono); fill: #E75012; animation: ls-auf 0.4s var(--o-kurve) 4.2s backwards; }
.outtra-omgrafik .om-pillentext { font: 400 13px var(--wp--preset--font-family--text); fill: var(--o-text); }
.outtra-omgrafik .om-haendler, .outtra-omgrafik .om-oben { animation: ls-auf 0.5s var(--o-kurve) backwards; }
.outtra-omgrafik .om-schritt { animation: ls-auf 0.6s var(--o-kurve) backwards; }
.outtra-omgrafik .om-schritt.is-omis { animation-delay: 1.5s; }
.outtra-omgrafik .om-schritt.is-dashboard { animation-delay: 2.5s; }
.outtra-omgrafik .om-kpi { animation: ls-auf 0.5s var(--o-kurve) 2.8s backwards; }
.outtra-omgrafik .om-zeile { animation: ls-auf 0.4s var(--o-kurve) backwards; }
.outtra-omgrafik .om-fuss { animation: ls-auf 0.4s var(--o-kurve) 4s backwards; }
.outtra-omgrafik .om-schritt.is-zugang { animation-delay: 4.6s; }
.outtra-omgrafik .om-puls { transform-box: fill-box; transform-origin: center; animation: pd-puls 1.8s ease-out 2s infinite backwards; }
@media (prefers-reduced-motion: reduce) { .outtra-omgrafik *, .outtra-omgrafik .om-zeichnen { animation: none !important; stroke-dashoffset: 0; } }
@media (min-width: 900px) {
	.outtra-hero--seite.outtra-hero--grafik .outtra-hero__medien:has(.outtra-omgrafik) { grid-column: 6 / -1; padding-left: clamp(8px, 1vw, 20px); width: calc(100% + min(var(--o-rand), 140px)); max-width: none; }
}
.outtra-hero__eyebrow .outtra-omis-marke { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; letter-spacing: 0.2em; color: var(--o-text); }
.outtra-hero__eyebrow .outtra-kooperation .outtra-omis-marke img.is-omis { height: 1.8em; margin-block: -0.4em; }


/* Zielgruppenseiten 07.11.2026 */
/* Partnerloesungen als schmale Leiste unter den Loesungen (Fuer Marken). */
.outtra-partnerleiste { margin-top: 0; padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--o-linie); }
.outtra-partnerleiste > p.is-style-mono-label { margin: 0 0 14px; }
.outtra-partnerleiste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.outtra-partnerleiste a { display: flex; flex-direction: column; gap: 4px; height: 100%; text-decoration: none; color: var(--o-text); }
.outtra-partnerleiste a strong { font-weight: 600; }
.outtra-partnerleiste a > span { color: var(--o-leise); }
.outtra-partnerleiste .outtra-pfeil { display: inline-block; margin-left: 4px; color: var(--o-orange); transition: transform 0.3s var(--o-kurve); }
.outtra-partnerleiste a:hover strong, .outtra-partnerleiste a:focus-visible strong { color: var(--o-orange); }
.outtra-partnerleiste a:hover .outtra-pfeil, .outtra-partnerleiste a:focus-visible .outtra-pfeil { transform: translateX(4px); }
@media (max-width: 780px) { .outtra-partnerleiste ul { grid-template-columns: 1fr; } }
/* Hero-Grafiken in Text-Bild-Zeilen starten erst, wenn die Zeile sichtbar wird. */
.has-js .outtra-loesung:not(.is-sichtbar) :is(.outtra-dhgrafik, .outtra-kmgrafik, .outtra-omgrafik) * { animation-play-state: paused !important; }


/* Referenzen 07.11.2026 */
/* Hero: Video-Wand aus sechs Loops, zwei versetzte Spalten, laufen beim Scrollen leicht gegeneinander (--wand aus bewegung.js). */
.outtra-hero--videowand .outtra-hero__medien { align-self: center; }
.ref-wand { --wand: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); }
.ref-wand__spalte { display: grid; align-content: start; gap: clamp(10px, 1.1vw, 18px); transform: translateY(calc(var(--wand) * -40px)); will-change: transform; }
.ref-wand__spalte.is-versetzt { margin-top: clamp(28px, 3.4vw, 56px); transform: translateY(calc(var(--wand) * 40px)); }
.ref-wand__kachel { display: grid; gap: 8px; color: var(--o-text); text-decoration: none; }
.ref-wand__video { display: block; aspect-ratio: 1 / 1; }
.ref-wand__video .outtra-video__plus { width: 48px; height: 48px; font-size: 26px; }
.ref-wand__name { font-family: var(--o-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--wp--custom--laufweite--label); text-transform: uppercase; color: var(--o-leise); transition: color 0.2s var(--o-kurve); }
.ref-wand__kachel:hover .ref-wand__name, .ref-wand__kachel:focus-visible .ref-wand__name { color: var(--o-orange); }
.ref-wand__kachel:focus-visible { outline: none; }
.ref-wand__kachel:focus-visible .ref-wand__video { outline: 2px solid var(--o-orange); outline-offset: 3px; }
@media (max-width: 899px) {
	.ref-wand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.ref-wand__spalte, .ref-wand__spalte.is-versetzt { display: contents; }
	.ref-wand__name { font-size: 10px; letter-spacing: 0.06em; }
}

/* Abstaende zwischen Kopf und Stimmen. */
.outtra-abschnitt.ref-geschichte .ref-stimme,
.outtra-abschnitt.ref-kapitel .ref-slider { margin-top: var(--wp--preset--spacing--60); }

/* Grosse Zitate auf dunklem Band: nur Typografie, kein Balken, kein Kasten. */
.outtra-abschnitt.ref-statement-abschnitt { padding-block: clamp(84px, 10vw, 168px); background: #15171C; }
.ref-statement { margin: 0; }
.ref-statement blockquote { margin: clamp(20px, 2.2vw, 32px) 0 clamp(26px, 2.8vw, 44px); padding: 0; border: 0; }
.ref-statement blockquote p { max-width: 26ch; margin: 0; font-size: clamp(30px, 4.3vw, 66px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.ref-statement__hervor { color: var(--o-orange); }
.ref-statement figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.ref-statement figcaption strong { color: #fff; }
.ref-statement figcaption > span { color: var(--wp--preset--color--muted-inverse); }
.ref-statement__link { color: var(--o-orange); font-weight: 600; text-decoration: none; }
.ref-statement__link .outtra-pfeil { display: inline-block; transition: transform 0.3s var(--o-kurve); }
.ref-statement__link:hover .outtra-pfeil, .ref-statement__link:focus-visible .outtra-pfeil { transform: translateX(4px); }
@media (min-width: 900px) { .ref-statement__auf { margin-left: -0.4em; } }

/* Fuer den Fachhandel: Karten mit Markenzitat, Haendlerband im grauen Abschnitt. */
.ref-handelkarte { display: flex; flex-direction: column; margin: 0; }
.ref-handelkarte h3 { margin-top: 10px; }
.ref-handelkarte blockquote { flex: 1; margin: 12px 0 18px; padding: 0; border: 0; }
.ref-handelkarte blockquote p { margin: 0; font-size: clamp(15px, 1.1vw, 17px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--o-text); }
.ref-handelkarte .outtra-stimme__name { margin: 0; }
.outtra-abschnitt .ref-haendlerband { margin-top: clamp(40px, 4.4vw, 68px); }

/* Alle Gespraeche: Text-Reiter als Filter, Karten mit Loop-Video. */
.ref-reiterleiste { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2.4vw, 36px); margin-top: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--o-linie); }
.ref-reiter { min-height: 44px; margin: 0 0 -1px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--o-leise); cursor: pointer; appearance: none; -webkit-appearance: none; transition: color 0.2s var(--o-kurve), border-color 0.2s var(--o-kurve); }
.ref-reiter:hover { color: var(--o-text); }
.ref-reiter[aria-pressed="true"] { color: var(--o-text); border-bottom-color: var(--o-orange); }
.ref-reiter:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 2px; }
.ref-reiter__zahl { margin-left: 3px; font-family: var(--o-mono); font-size: 11px; font-weight: 500; color: var(--o-orange); }
.outtra-referenz-raster.ref-raster { margin-top: clamp(26px, 2.8vw, 40px); }
.ref-karte[hidden] { display: none; }
.ref-karte__medium { display: block; overflow: hidden; }
.ref-karte__medium video, .ref-karte__medium img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s var(--o-kurve); }
.ref-karte:hover .ref-karte__medium video, .ref-karte:hover .ref-karte__medium img { transform: scale(1.04); }
.ref-karte .ref-karte__sprache { margin-top: -4px; }

/* Abschluss: Textlink unter dem Knopf. */
.outtra-abschnitt.ref-start .outtra-zweiwege__karten { margin-top: var(--wp--preset--spacing--60); }
.outtra-zweiwege__karten .outtra-weg .ref-weg__link { margin-top: 14px; }
@media (max-width: 599px) { .ref-reiter { font-size: 14px; } }

/* OMIS: Texte von outtra.com/omis (07.11.2026) */
.outtra-omis-hinweis { max-width: min(100%, 760px); margin-top: clamp(20px, 2.4vw, 32px) !important; padding: 16px 20px; border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); border: 1px solid var(--o-linie); font-size: clamp(14.5px, 1.05vw, 16.5px); color: var(--o-fliesstext); }
.outtra-abschnitt > .outtra-omis-hinweis { margin-left: max(0px, calc((100% - var(--o-inhalt)) / 2)) !important; margin-right: auto !important; }
.outtra-omis-webinar { position: relative; display: block; max-width: 460px; border-radius: var(--wp--custom--radius--normal); overflow: hidden; box-shadow: var(--wp--preset--shadow--karte); }
.outtra-omis-webinar img { display: block; width: 100%; height: auto; }
.outtra-omis-webinar .kmr-webinar__play { position: absolute; left: 22px; bottom: 22px; }
/* OMIS: echte Screenshots und Partnerlogos (07.11.2026) */
.outtra-omis-teilnehmer { margin: var(--wp--preset--spacing--50) auto 0 !important; max-width: min(100%, 1000px); }
.outtra-omis-teilnehmer img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.outtra-omis-bild { display: block; width: 100%; height: auto; }
.outtra-omis-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 72px); margin: var(--wp--preset--spacing--50) 0 0 max(0px, calc((100% - var(--o-inhalt)) / 2)) !important; }
.outtra-omis-logos img { width: auto; height: clamp(52px, 5vw, 72px); mix-blend-mode: multiply; }
.outtra-omis-logos img[alt^="OMIS"] { height: clamp(40px, 3.6vw, 54px); }

/* OMIS Runde 3 (08.11.2026): offizielles Logo, Logoband, Stoerer, einheitliche Textfarbe */
.outtra-hero__eyebrow .outtra-kooperation img.is-omis-voll { height: 4.2em; margin-block: -1.4em; }

.outtra-omis-stoerer-rahmen { position: relative; }
/* Haken-Listen in Text-Bild-Abschnitten haben dieselbe Farbe wie der Absatz darueber */
.outtra-loesung ul.outtra-haken li { color: var(--o-fliesstext); }
.outtra-loesung .outtra-loesung__text { color: var(--o-fliesstext); }
.outtra-loesung ul.outtra-haken li strong { color: var(--o-text); }
.outtra-omis-band > .outtra-band__zeile { max-width: 1280px !important; width: 100%; }

/* OMIS: Hinweis kostenfrei als ruhiges Etikett am Screenshot, Plakette 4 oeffnet nach oben (08.11.2026) */
.outtra-omis-stoerer { position: absolute; z-index: 3; top: -17px; right: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); box-shadow: 0 6px 18px rgba(21, 23, 28, 0.12); font-size: 13px; font-weight: 600; color: var(--o-text); white-space: nowrap; }
.outtra-omis-stoerer__haken { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #27AE74; }
.outtra-omis-stoerer__haken::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.kmr-marker.is-hoch .kmr-marker__info { top: auto; bottom: -14px; }

/* Video-Dialog fuer Webinar-Karten (08.11.2026) */
.outtra-videodialog { width: min(1100px, 92vw); max-width: none; padding: 0; border: 0; border-radius: 16px; background: #000; overflow: visible; }
.outtra-videodialog::backdrop { background: rgba(21, 23, 28, 0.82); }
.outtra-videodialog__rahmen { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.outtra-videodialog__rahmen iframe, .outtra-videodialog__rahmen video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.outtra-videodialog__zu { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: var(--o-text); font-size: 24px; line-height: 1; cursor: pointer; }

/* OMIS: Partnerlogos freigestellt, drei Partner EOG, Sporting Insights, OUTTRA (08.11.2026) */
.outtra-omis-logos { gap: clamp(36px, 6vw, 88px) !important; }
.outtra-omis-logos .outtra-omis-partner { width: auto; mix-blend-mode: normal; }
.outtra-omis-partner.is-eog { height: clamp(84px, 8vw, 116px); margin-block: -14px; }
.outtra-omis-partner.is-si { height: clamp(24px, 2.2vw, 32px); }
.outtra-omis-partner.is-outtra { height: clamp(26px, 2.4vw, 34px); }
.outtra-srgrafik .sr-lieferung { animation: ls-auf 0.4s var(--o-kurve) 5.8s backwards; }

/* Smart Replenishment: Zitate und Ergebnisse mit Firmenlogos (08.11.2026) */
.outtra-zitate.is-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.outtra-zitate.is-drei blockquote { font-size: clamp(16px, 1.25vw, 19px); }
.outtra-firmenlogo { display: block; width: auto; height: 22px; max-width: 160px; margin-bottom: 20px; object-fit: contain; object-position: left center; }
.outtra-firmenlogo.is-quadrat { height: 40px; }
@media (max-width: 899px) { .outtra-zitate.is-drei { grid-template-columns: 1fr; } }

/* Smart Replenishment: Einblick mit Chainbalance-Ansichten (08.11.2026) */
.outtra-cb-bild { display: block; width: 100%; height: auto; }
img.outtra-cb-bild[src*="bestellvorschlag"] { max-width: 380px; margin-inline: auto; }
.outtra-abschnitt > .outtra-cb-quelle { margin-left: max(0px, calc((100% - var(--o-inhalt)) / 2)) !important; }

/* Smart Replenishment: Fallkarten mit Groesse, KPI, Zitat, Name und Logo unten rechts (08.11.2026) */
.outtra-zitate.is-fall .outtra-zitat { display: flex; flex-direction: column; }
.outtra-zitate.is-fall .outtra-fall__groesse { margin: 0 0 6px !important; }
.outtra-zitate.is-fall .outtra-fall__kpi { margin: 0 0 18px !important; font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--o-orange); }
.outtra-zitate.is-fall blockquote { font-size: clamp(15.5px, 1.15vw, 17.5px); font-weight: 500; }
.outtra-zitate.is-fall figcaption { margin-top: auto !important; padding-top: 22px; }
.outtra-zitat__logo.is-quadrat { height: 34px; }
.outtra-zitate.is-fall .outtra-fall__kpi { min-height: 2.6em; }
/* SR: erste Zeile direkt unter der Ueberschrift, Text oben buendig mit der Grafik (08.11.2026) */
#bestseller > .outtra-loesung { margin-top: 28px !important; align-items: flex-start !important; }
#bestseller > .outtra-loesung > .wp-block-column { align-self: flex-start !important; }
.outtra-loesung__knopf + .is-style-pfeil-link { margin-top: 16px !important; }
.outtra-zitate.is-fall .outtra-zitat__logo.is-quadrat { height: 48px; }

/* Hero mit Video statt Foto (Probe Haendlerseite, 08.11.2026) */
.outtra-hero__foto.is-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--wp--custom--radius--normal); background: #15171C; }

/* Referenzen v2 08.11.2026 */
/* Hero: ein Video 16:9 (ganzes Bild, kein Anschnitt), Play-Knopf oeffnet das Gespraech im Dialog. */
.outtra-hero--refv2 .outtra-hero__medien { align-self: center; }
.refv2-player-rahmen { margin: 0; }
.refv2-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: var(--wp--custom--radius--normal); overflow: hidden; background: #15171C; cursor: pointer; appearance: none; -webkit-appearance: none; }
.refv2-player > video, .refv2-player > img { display: block; width: 100%; height: 100% !important; max-height: none; object-fit: cover; }
.refv2-player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 23, 28, 0.35), rgba(21, 23, 28, 0) 45%); pointer-events: none; }
.refv2-play { position: absolute; z-index: 2; left: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px); display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff; color: var(--o-text); font-size: 14px; font-weight: 600; line-height: 1; box-shadow: 0 8px 24px rgba(21, 23, 28, 0.18); }
.refv2-play__kreis { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--o-orange); transition: transform 0.3s var(--o-kurve); }
.refv2-play__kreis::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -4px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.refv2-player:hover .refv2-play__kreis, .refv2-player:focus-visible .refv2-play__kreis { transform: scale(1.1); }
.refv2-player:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 3px; }
.refv2-unterzeile { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--o-leise); }

/* Logo als Eyebrow und Loesungen als kleine Tags. */
.outtra-hero__eyebrow .refv2-eyebrow { display: inline-flex; align-items: center; }
.outtra-hero__eyebrow .refv2-eyebrow__logo { height: clamp(32px, 3vw, 42px); max-width: 220px; }
.refv2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.refv2-tag { margin: 0; padding: 5px 9px; border-radius: 6px; background: var(--o-grau); color: var(--o-fliesstext); font-family: var(--o-mono); font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
.outtra-hero--refv2 .outtra-hero__text .refv2-tags { margin-top: 0; }

/* Karten 16:9: Loop oder Standbild, Logo, Ergebnis-Zeile, Tags. */
.refv2-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(26px, 2.8vw, 40px); }
.refv2-karte { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); color: inherit; text-decoration: none; transition: transform 0.35s var(--o-kurve), box-shadow 0.35s var(--o-kurve); }
.refv2-karte[hidden] { display: none; }
.refv2-karte:hover, .refv2-karte:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(21, 23, 28, 0.08); }
.refv2-karte:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 3px; }
.refv2-karte__medium { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #15171C; }
.refv2-karte__medium video, .refv2-karte__medium img { display: block; width: 100%; height: 100% !important; max-height: none; object-fit: cover; }
.refv2-karte__sprache { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--o-text); font-family: var(--o-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.refv2-karte__text { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: clamp(18px, 1.8vw, 24px); }
.refv2-karte .refv2-karte__logo { height: 26px; max-width: 140px; }
.refv2-karte h3 { margin: 0; font-size: clamp(17px, 1.25vw, 19px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.refv2-karte .refv2-tags { margin-top: auto; padding-top: 4px; }

/* Ein Zitat in normaler Groesse, linksbuendig. */
.refv2-zitat { margin: 0; }
.outtra-abschnitt > .refv2-zitat { max-width: var(--wp--style--global--content-size, 1280px); width: 100%; }
.refv2-zitat > .is-style-mono-label-orange { margin: 0 0 14px; }
.refv2-zitat blockquote { margin: 0 0 18px; padding: 0; border: 0; }
.refv2-zitat blockquote p { margin: 0; max-width: 34ch; font-size: clamp(22px, 2.1vw, 30px); font-weight: 500; line-height: 1.28; letter-spacing: -0.02em; color: var(--o-text); text-wrap: pretty; }
.refv2-zitat .is-style-pfeil-link { margin-top: 16px; }
.outtra-abschnitt.refv2-stimme { padding-block: clamp(64px, 7vw, 112px); }

/* Einzelseite: Kernzitat + Fakten. */
.refv2-kern { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.refv2-fakten { margin: 0; }
.refv2-fakten > div { padding: 14px 0; border-top: 1px solid var(--o-linie); }
.refv2-fakten > div:last-child { border-bottom: 1px solid var(--o-linie); }
.refv2-fakten dt { margin-bottom: 4px; font-family: var(--o-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--o-leise); }
.refv2-fakten dd { margin: 0; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.45; color: var(--o-text); }

/* Einzelseite: Ausgangslage, Loesung, Ergebnis als drei Zeilen. */
.refv2-zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 72px); padding-block: clamp(28px, 3.2vw, 48px); border-top: 1px solid var(--o-linie); }
.refv2-zeile:first-child { border-top: 0; padding-top: 0; }
.refv2-zeile:last-child { padding-bottom: 0; }
.refv2-zeile__kopf > p { margin: 0 0 10px; }
.refv2-zeile__kopf h2 { margin: 0; max-width: 18ch; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.refv2-text { margin: 0; max-width: 60ch; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.6; color: var(--o-fliesstext); }
.refv2-loesungen { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.refv2-loesungen li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--o-linie); }
.refv2-loesungen li:first-child { padding-top: 0; }
.refv2-loesungen a { justify-self: start; color: var(--o-text); font-weight: 600; text-decoration: none; }
.refv2-loesungen a .outtra-pfeil { display: inline-block; color: var(--o-orange); transition: transform 0.3s var(--o-kurve); }
.refv2-loesungen a:hover .outtra-pfeil, .refv2-loesungen a:focus-visible .outtra-pfeil { transform: translateX(4px); }
.refv2-loesungen span:not(.outtra-pfeil) { font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.5; color: var(--o-fliesstext); }
.refv2-ergebnisse { display: grid; gap: clamp(18px, 2vw, 26px); }
.refv2-ergebnis > p.is-style-mono-label { margin: 0 0 6px; }
.refv2-ergebnis h3 { margin: 0 0 6px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.3; }
.refv2-ergebnis > p:last-child { margin: 0; max-width: 60ch; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.55; color: var(--o-fliesstext); }

/* Einzelseite: weitere Zitate als Karten. */
.refv2-zitatkarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: var(--wp--preset--spacing--60); }
.refv2-zitatkarte { display: flex; flex-direction: column; margin: 0; padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.refv2-zitatkarte blockquote { flex: 1; margin: 0 0 18px; padding: 0; border: 0; }
.refv2-zitatkarte blockquote p { margin: 0; font-size: clamp(16px, 1.25vw, 19px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--o-text); text-wrap: pretty; }
.refv2-zitatkarte .outtra-stimme__name { margin: 0; }

/* Einzelseite: weitere Gespraeche als Reihe mit Pfeilen. */
.refv2-weitere__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.refv2-weitere__titel { flex: 1; min-width: 0; }
.refv2-weitere__titel > h2 { margin-bottom: 0; }
.refv2-pfeile { display: flex; flex: 0 0 auto; gap: 8px; }
.refv2-pfeil { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--o-linie); border-radius: 50%; background: var(--o-weiss); color: var(--o-text); font-size: 18px; line-height: 1; cursor: pointer; transition: border-color 0.2s var(--o-kurve), color 0.2s var(--o-kurve); }
.refv2-pfeil:hover, .refv2-pfeil:focus-visible { border-color: var(--o-orange); color: var(--o-orange); }
.refv2-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3); gap: clamp(16px, 2vw, 28px); margin-top: var(--wp--preset--spacing--60); padding: 6px 0 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.refv2-reihe .refv2-karte { scroll-snap-align: start; }
.refv2-reihe .refv2-karte:hover { transform: none; }
.refv2-reihe:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 4px; }
.outtra-abschnitt.refv2-weitere .outtra-knopfzeile { margin-top: clamp(24px, 2.6vw, 36px); }

@media (max-width: 899px) {
	.refv2-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.refv2-kern, .refv2-zeile { grid-template-columns: 1fr; }
	.refv2-reihe { grid-auto-columns: 46%; }
	.refv2-zeile__kopf h2 { max-width: none; }
}
@media (max-width: 599px) {
	.refv2-raster, .refv2-zitatkarten { grid-template-columns: 1fr; }
	.refv2-reihe { grid-auto-columns: 84%; }
	.refv2-pfeile { display: none; }
	.refv2-play__text { font-size: 13px; }
}

/* Referenzen v3 09.11.2026 */
/* Player: Video 16:9, Play-Knopf mittig, gross und klar. */
.ref3-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: var(--wp--custom--radius--normal); overflow: hidden; background: #15171C; cursor: pointer; appearance: none; -webkit-appearance: none; }
.ref3-player > video, .ref3-player > img { display: block; width: 100%; height: 100% !important; max-height: none; object-fit: cover; transition: transform 0.6s var(--o-kurve); }
.ref3-player::after { content: ""; position: absolute; inset: 0; background: rgba(21, 23, 28, 0.18); transition: background 0.3s var(--o-kurve); pointer-events: none; }
.ref3-player:hover::after, .ref3-player:focus-visible::after { background: rgba(21, 23, 28, 0.32); }
.ref3-player:hover > video, .ref3-player:hover > img { transform: scale(1.03); }
.ref3-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translate(-50%, -50%); color: #fff; font-size: 14px; font-weight: 600; line-height: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); pointer-events: none; }
.ref3-play__kreis { position: relative; display: block; width: clamp(60px, 6vw, 78px); height: clamp(60px, 6vw, 78px); border-radius: 50%; background: var(--o-orange); box-shadow: 0 10px 30px rgba(21, 23, 28, 0.28); transition: transform 0.3s var(--o-kurve); }
.ref3-play__kreis::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.ref3-player:hover .ref3-play__kreis, .ref3-player:focus-visible .ref3-play__kreis { transform: scale(1.08); }
.ref3-player:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 3px; }

/* Hero-Slider der Uebersicht: Video, darunter eine Karte mit Logo, Zitat, Name. */
.outtra-hero--refv3 .outtra-hero__medien { align-self: center; min-width: 0; }
.ref3-slider .outtra-stimmen-slider__punkte { justify-content: flex-start; margin-top: 18px; }
.ref3-folie { position: relative; }
.ref3-folie__karte { position: relative; z-index: 2; margin: -44px clamp(14px, 2vw, 28px) 0; padding: clamp(18px, 1.8vw, 24px) clamp(18px, 2vw, 26px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); box-shadow: 0 14px 34px rgba(21, 23, 28, 0.08); }
.ref3-folie__karte .ref3-folie__logo { display: block; height: 24px; width: auto; max-width: 140px; margin: 0 0 12px; }
.ref3-folie__karte blockquote { margin: 0 0 12px; padding: 0; border: 0; }
.ref3-folie__karte blockquote p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; color: var(--o-text); text-wrap: pretty; }
.ref3-folie__karte .outtra-stimme__name { margin: 0; }

/* Alle Gespraeche: Raster in sechs Spalten, gross ueber die ganze Breite, klein ein Drittel, halb die Haelfte. */
.ref3-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) 25px; margin-top: clamp(26px, 2.8vw, 40px); }
.ref3-raster > .ref3-karte { min-width: 0; margin: 0; }
.ref3-raster > .ref3-karte[hidden] { display: none; }
.ref3-raster > .is-gross { grid-column: 1 / -1; }
.ref3-raster > .is-klein { grid-column: span 2; }
.ref3-raster > .is-halb { grid-column: span 3; }
.ref3-karte.is-gespiegelt > .outtra-video { order: 2; }
.ref3-karte .refv2-tags { margin-top: 14px; }
.ref3-karte.is-halb .outtra-video { aspect-ratio: 16 / 9; }
.outtra-stimme-gross.ref3-karte .outtra-stimme-gross__text > .refv2-tags { margin-top: 16px; }
/* Gefiltert: alle Karten klein im Raster. */
.ref3-raster.is-gefiltert > .ref3-karte { grid-column: span 2; }
.ref3-raster.is-gefiltert > .is-gross { display: block; min-height: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.ref3-raster.is-gefiltert > .is-gross[hidden] { display: none; }
.ref3-raster.is-gefiltert > .is-gross .outtra-video { aspect-ratio: 16 / 10; min-height: 0; border-radius: var(--wp--custom--radius--normal); }
.ref3-raster.is-gefiltert > .is-gross .outtra-stimme-gross__text { display: block; padding: 0; }
.ref3-raster.is-gefiltert > .is-gross .outtra-stimme-gross__text > p.is-style-mono-label-orange { margin: 16px 0 8px; }
.ref3-raster.is-gefiltert > .is-gross .outtra-stimme-gross__zitat { max-width: none; margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: -0.012em; }
.ref3-raster.is-gefiltert > .is-gross .outtra-stimme__name { margin-top: 10px; }
.ref3-raster.is-gefiltert > .is-gross p.is-style-pfeil-link { margin-top: 10px; font-size: 14px; }
.ref3-raster.is-gefiltert > .ref3-karte .outtra-video { aspect-ratio: 16 / 10; }

/* Schriftliche Stimmen von Marken und Haendlern. */
.ref3-stimmen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: var(--wp--preset--spacing--60); }
.ref3-stimme { display: flex; flex-direction: column; margin: 0; padding: clamp(24px, 2.6vw, 38px); border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.ref3-stimme__logo { display: block; height: 30px; width: auto; max-width: 170px; margin-bottom: clamp(18px, 2vw, 26px); object-fit: contain; object-position: left center; }
.ref3-stimme__logo.is-wortmarke { height: auto; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--o-text); }
.ref3-stimme blockquote { flex: 1; margin: 0 0 20px; padding: 0; border: 0; }
.ref3-stimme blockquote p { margin: 0; font-size: clamp(16px, 1.2vw, 18px); font-weight: 500; line-height: 1.5; letter-spacing: -0.008em; color: var(--o-text); text-wrap: pretty; }
.ref3-stimme .outtra-stimme__name { margin: 0; }
.ref3-handel .ref-haendlerband { margin-top: clamp(36px, 4vw, 56px); }

/* Einzelseite: Hero-Video mit deutlicher Unterzeile. */
.ref3-hero-video { margin: 0; }
.ref3-unterzeile { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; font-size: 15px; line-height: 1.4; }
.ref3-unterzeile strong { color: var(--o-text); font-weight: 600; }
.ref3-unterzeile span { font-size: 13.5px; color: var(--o-leise); }

/* Einzelseite: Zeilen Text + Medium. */
.ref3-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ref3-zeile.is-gespiegelt > .ref3-zeile__medium { order: -1; }
.ref3-zeile__text > p.is-style-mono-label-orange { margin: 0 0 10px; }
.ref3-zeile__text h2 { margin: 0 0 clamp(16px, 1.6vw, 22px); max-width: 20ch; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.ref3-zeile__medium:empty { display: none; }
.ref3-foto, .ref3-recording { margin: 0; }
.ref3-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wp--custom--radius--normal); }
.ref3-recording video { display: block; width: 100%; height: auto; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-grau); }
.ref3-recording figcaption { margin-top: 10px; font-size: 13.5px; color: var(--o-leise); }

/* Einzelseite: ein Zitat mit rundem Portraet, Fakten daneben. */
.ref3-kern { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(220px, 300px); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: var(--wp--preset--spacing--60); }
.ref3-person { margin: 0; text-align: center; }
.ref3-portraet { display: block; width: 160px; height: 160px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; }
.ref3-person .outtra-stimme__name { margin: 0; }
.ref3-kern__zitat { margin: 0; padding: 0; border: 0; }
.ref3-kern__zitat p { margin: 0; max-width: 32ch; font-size: clamp(22px, 2.1vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--o-text); text-wrap: pretty; }
.ref3-kern__zitat p.ref3-kern__hinweis { margin-top: 14px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--o-leise); }

@media (max-width: 1023px) {
	.ref3-raster > .is-klein, .ref3-raster > .is-halb, .ref3-raster.is-gefiltert > .ref3-karte { grid-column: span 3; }
	.ref3-karte.is-gespiegelt > .outtra-video { order: 0; }
	.ref3-kern { grid-template-columns: 160px minmax(0, 1fr); }
	.ref3-kern > .refv2-fakten { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.ref3-raster > .ref3-karte, .ref3-raster.is-gefiltert > .ref3-karte { grid-column: 1 / -1; }
	.ref3-stimmen__raster, .ref3-zeile { grid-template-columns: 1fr; }
	.ref3-zeile.is-gespiegelt > .ref3-zeile__medium { order: 0; }
	.ref3-kern { grid-template-columns: 1fr; }
	.ref3-person { display: flex; align-items: center; gap: 16px; text-align: left; }
	.ref3-portraet { width: 96px; height: 96px; margin: 0; flex: 0 0 auto; }
	.ref3-folie__karte { margin: -28px 10px 0; }
}

/* Hochkant-Video im Seiten-Hero (Probe Marken 09.11.2026) */
.outtra-hero__foto.is-video.is-hoch { max-width: 440px; margin-inline: auto; }
.outtra-hero__foto.is-video.is-hoch video { aspect-ratio: 4 / 5; max-height: 72vh; object-position: 50% 30%; }
@media (max-width: 899px) { .outtra-hero__foto.is-video.is-hoch { max-width: none; } }
.outtra-hero__foto.is-video.is-hoch.is-haendler video { object-position: 71% 50%; }

/* Referenzen v4 09.11.2026 */
/* Play-Knopf: weisser Kreis, oranges Dreieck, heller Ring; darunter ein dunkles Etikett. */
.ref4-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: var(--wp--custom--radius--normal); overflow: hidden; background: #15171C; cursor: pointer; appearance: none; -webkit-appearance: none; }
.ref4-player > video, .ref4-player > img { display: block; width: 100%; height: 100% !important; max-height: none; object-fit: cover; transition: transform 0.6s var(--o-kurve); }
.ref4-player::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(21, 23, 28, 0.28), rgba(21, 23, 28, 0.06) 60%); transition: background 0.3s var(--o-kurve); pointer-events: none; }
.ref4-player:hover > video, .ref4-player:hover > img { transform: scale(1.025); }
.ref4-play { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.ref4-play__knopf { display: grid; place-items: center; width: clamp(64px, 5.6vw, 80px); aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--o-orange); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.28), 0 12px 32px rgba(21, 23, 28, 0.3); transition: transform 0.3s var(--o-kurve), box-shadow 0.3s var(--o-kurve), background 0.3s var(--o-kurve), color 0.3s var(--o-kurve); }
.ref4-play__knopf svg { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; }
.ref4-play__text { padding: 6px 12px; border-radius: 999px; background: rgba(21, 23, 28, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-family: var(--o-mono); font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.ref4-player:hover .ref4-play__knopf, .ref4-player:focus-visible .ref4-play__knopf { transform: scale(1.06); background: var(--o-orange); color: #fff; box-shadow: 0 0 0 12px rgba(231, 80, 18, 0.22), 0 12px 32px rgba(21, 23, 28, 0.3); }
.ref4-player:focus-visible { outline: 3px solid var(--o-orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ref4-player > video, .ref4-player > img, .ref4-play__knopf { transition: none; } .ref4-player:hover > video, .ref4-player:hover > img { transform: none; } }

/* Hero-Slider: unter dem Video Logo und Zitat als ruhige Zeile, ohne Karte. */
.ref4-slider .outtra-stimmen-slider__punkte { justify-content: flex-start; margin-top: 20px; }
.ref4-folie__zitat { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px clamp(18px, 2vw, 28px); margin: clamp(20px, 2vw, 26px) 0 0; padding-top: clamp(18px, 1.8vw, 22px); border-top: 1px solid var(--o-linie); }
.ref4-folie__logo { grid-row: 1 / span 2; padding-top: 4px; }
.ref4-folie__logo img { display: block; width: auto; height: auto; max-width: 112px; max-height: 36px; object-fit: contain; object-position: left top; }
.ref4-folie__zitat blockquote { margin: 0; padding: 0; border: 0; }
.ref4-folie__zitat blockquote p { margin: 0; font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; color: var(--o-text); text-wrap: pretty; }
.ref4-folie__zitat .outtra-stimme__name { margin: 4px 0 0; }

/* Karten „Alle Gespraeche“: Markenlogo ueber der Eyebrow. */
.ref4-karte__logo { display: flex; align-items: center; height: 30px; margin: 18px 0 12px; }
.outtra-stimme-gross .ref4-karte__logo { height: 36px; margin-top: 0; }
.ref4-karte__logo img { display: block; width: auto; height: auto; max-width: 128px; max-height: 28px; object-fit: contain; object-position: left center; }
.outtra-stimme-gross .ref4-karte__logo img { max-width: 150px; max-height: 34px; }
.ref4-karte__logo + .is-style-mono-label-orange { margin-top: 0; }

/* Haendlerlogos direkt unter dem Markenband. */
.outtra-abschnitt.ref4-haendlerband { padding-block: 0 clamp(44px, 4.5vw, 76px); border-top: 0 !important; box-shadow: none; }
@media (max-width: 899px) { .outtra-abschnitt.ref4-haendlerband { padding-top: 8px; } }
.outtra-abschnitt.ref4-haendlerband .ref-haendlerband { margin-top: 0; }
.ref4-handel .ref3-stimme { background: var(--o-grau); border-color: transparent; }

/* Einzelseite: Logo ueber dem Zitat. */
.ref4-kern__logo { margin-bottom: 16px; }
.ref4-kern__logo img { display: block; width: auto; height: auto; max-width: 140px; max-height: 32px; object-fit: contain; object-position: left center; }

@media (max-width: 599px) {
	.ref4-folie__zitat { grid-template-columns: 1fr; }
	.ref4-folie__logo { grid-row: auto; padding-top: 0; }
	.ref4-play__knopf { width: 60px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.28), 0 10px 24px rgba(21, 23, 28, 0.3); }
}

/* Referenzen v5 09.11.2026 */
/* Hero: Text breiter (7 von 12 Spalten), rechte Spalte oben buendig mit der Eyebrow. */
@media (min-width: 900px) {
	.outtra-hero--refv3 .outtra-hero__raster, .outtra-hero--refv2 .outtra-hero__raster { grid-template-rows: auto auto 1fr; }
	.outtra-hero--refv3 .outtra-hero__titel, .outtra-hero--refv2 .outtra-hero__titel { grid-column: 1 / 8; grid-row: 1; align-self: start; }
	.outtra-hero--refv3 .outtra-hero__text, .outtra-hero--refv2 .outtra-hero__text { grid-column: 1 / 8; grid-row: 2; }
	.outtra-hero--refv3 .outtra-hero__medien, .outtra-hero--refv2 .outtra-hero__medien { grid-column: 8 / -1; grid-row: 1 / 4; align-self: start; padding-left: clamp(8px, 1vw, 16px); }
}
/* Video-Karte im Stil der Webinar-Karte (kmr-webinar is-foto). */
.ref5-karte { width: 100%; text-align: left; }
.ref5-karte .kmr-webinar__bild > video, .ref5-karte .kmr-webinar__bild > img { display: block; width: 100%; height: auto !important; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
.ref5-karte .ref5-titel { font-size: clamp(17px, 1.3vw, 19px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.ref5-karte .ref5-inhalt { font-size: 14.5px; line-height: 1.5; color: var(--o-leise); }
.ref5-karte:focus-visible { outline: 3px solid var(--o-orange); outline-offset: 3px; }
.ref5-slider .outtra-stimmen-slider__fenster { padding-bottom: 6px; }
.ref5-slider .ref5-karte:hover { transform: none; }
.ref5-slider .outtra-stimmen-slider__punkte { justify-content: center; margin-top: 18px; }
/* Logos: einheitliche optische Groesse, quadratische Logos (deuter) groesser. */
.ref5-logo { display: flex; align-items: center; height: 44px; margin-bottom: 4px; }
.ref5-logo img { display: block; width: auto; height: auto; max-width: 150px; max-height: 30px; object-fit: contain; object-position: left center; }
.ref5-logo img.is-logo-deuter { max-height: 44px; }
.ref4-karte__logo { height: 40px; }
.ref4-karte__logo img.is-logo-deuter { max-height: 40px; }
.ref4-kern__logo img.is-logo-deuter { max-height: 46px; }
@media (max-width: 899px) { .outtra-hero--refv3 .outtra-hero__medien, .outtra-hero--refv2 .outtra-hero__medien { padding-left: 0; } }

/* Referenzen v6 09.11.2026 */
/* Hero Uebersicht: rechte Spalte breiter (7 von 12), Text links schmaler. */
@media (min-width: 900px) {
	.outtra-hero--refv3 .outtra-hero__titel, .outtra-hero--refv3 .outtra-hero__text { grid-column: 1 / 6; }
	.outtra-hero--refv3 .outtra-hero__medien { grid-column: 6 / -1; padding-left: clamp(12px, 1.6vw, 28px); }
}
/* Slider: Karte exakt so breit wie die Folie (Rahmen innen), nichts ragt in die Nachbarfolie. */
.ref5-slider .outtra-stimmen-slider__fenster { padding-bottom: 0; }
.ref5-slider .outtra-stimmen-slider__folie { overflow: hidden; }
.ref5-karte { box-sizing: border-box; max-width: 100%; }
/* Karte kompakter: Eyebrow links, Logo rechts oben, kein Link unten. */
.ref5-karte .kmr-webinar__text { gap: 8px; padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px); }
.ref5-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 30px; }
.ref5-kopf > .is-style-mono-label-orange { font: 600 11px var(--o-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--o-orange); }
.ref5-kopf .ref5-logo { flex: 0 0 auto; height: auto; margin: 0; }
.ref5-kopf .ref5-logo img { max-width: 120px; max-height: 26px; object-position: right center; }
.ref5-kopf .ref5-logo img.is-logo-deuter { max-height: 38px; }
.ref5-karte .ref5-inhalt { font-size: 14px; }
.ref5-karte .kmr-webinar__fuss { margin: 6px 0 0; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video, .ref5-slider .ref5-karte .kmr-webinar__bild > img { aspect-ratio: 2 / 1; }
.ref5-slider .ref5-karte .kmr-webinar__bild { aspect-ratio: auto; }

/* Referenzen v7 09.11.2026 */
/* Alle Gespraeche in Gruppen (grau/weiss im Wechsel), Haendlerband als Trenner. */
.outtra-abschnitt.ref7-band { padding-block: clamp(48px, 5vw, 84px) !important; }
.outtra-abschnitt.ref7-gruppe:not(.is-erste) { padding-block: clamp(56px, 6vw, 96px); }
.outtra-abschnitt.ref7-gruppe:not(.is-erste) .ref3-raster { margin-top: 0; }
/* Beim Filtern: Gruppen ohne sichtbare Karte ausblenden. */
.ref7-gruppe:not(.is-erste):not(:has(.ref3-karte:not([hidden]))) { display: none; }
/* Karten mit weisser Flaeche und Rahmen, auch in grauen Abschnitten. */
.ref7-raster > .outtra-stimme-klein.ref3-karte { display: flex; flex-direction: column; padding: 0 22px 22px; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); overflow: hidden; }
.ref7-raster > .outtra-stimme-klein.ref3-karte > .outtra-video { margin-inline: -22px !important; }
.ref7-raster > .outtra-stimme-klein.ref3-karte > .outtra-video { border-radius: 0; }
.ref7-raster > .outtra-stimme-klein.ref3-karte > .is-style-pfeil-link { margin-top: auto; padding-top: 14px; }
.ref7-raster > .outtra-stimme-gross.ref3-karte { background: var(--o-weiss); border: 1px solid var(--o-linie); }
.ref7-gruppe:not(.is-flaeche) .ref7-raster > .ref3-karte { border-color: var(--o-linie); }
/* Gefiltert (alle Gruppen, nicht nur das erste Raster): alle Karten klein, weiss. */
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .ref3-karte { grid-column: span 2; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 22px; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-weiss); }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross[hidden] { display: none; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross > .outtra-video { order: 0; aspect-ratio: 16 / 10; min-height: 0; border-radius: 0; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross .outtra-stimme-gross__text { display: block; padding: 0 22px; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross .ref4-karte__logo { margin-top: 18px; height: 40px; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross .outtra-stimme-gross__text > p.is-style-mono-label-orange { margin: 0 0 8px; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross .outtra-stimme-gross__zitat { max-width: none; margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: -0.012em; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross .outtra-stimme__name { margin-top: 10px; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .is-gross p.is-style-pfeil-link { margin-top: 10px; font-size: 14px; }
.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .ref3-karte .outtra-video { aspect-ratio: 16 / 10; }
@media (max-width: 1023px) {
	.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .ref3-karte { grid-column: span 3; }
}
@media (max-width: 767px) {
	.ref7-filter:has(.ref-reiter[aria-pressed="true"]:not([data-filter="alle"])) .ref7-raster > .ref3-karte { grid-column: 1 / -1; }
}
/* Was Haendler sagen jetzt grau: Zitatkarten weiss. */
.ref4-handel.is-flaeche .ref3-stimme { background: var(--o-weiss); border-color: var(--o-linie); }
.ref7-raster > .ref3-karte[hidden] { display: none !important; }
/* Referenzen v8 09.11.2026 */
.ref5-kopf .ref5-logo img { height: 26px; width: auto; object-fit: contain; }
.ref5-kopf .ref5-logo img.is-logo-deuter { height: 38px; }
/* Referenzen v9 09.11.2026: Logo mit mehr Luft zum Video, Eyebrow und Zitat ruecken nach unten. */
.ref5-karte .kmr-webinar__text { padding-top: clamp(22px, 2vw, 28px); }
.ref5-kopf { align-items: flex-end; margin-bottom: 6px; }
.ref5-kopf > .is-style-mono-label-orange { padding-bottom: 2px; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video, .ref5-slider .ref5-karte .kmr-webinar__bild > img { aspect-ratio: 21 / 9; }
/* Referenzen v10 09.11.2026: je Person Name und Titel untereinander. */
.ref5-karte .kmr-webinar__namen { display: grid; gap: 6px; }
.ref5-karte .ref5-person { display: block; line-height: 1.3; }
.ref5-karte .ref5-person strong { display: block; }
.ref7-gruppe.is-erste > h2.wp-block-heading { max-width: none; }
@media (max-width: 767px) { .ref10-umbruch { display: none; } }
/* Referenzen v11 09.11.2026: Zitat groesser, Video 2:1 mit Ausschnitt je Marke, alle Slider-Karten gleich hoch. */
.ref5-slider .ref5-karte .ref5-titel { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.32; letter-spacing: -0.015em; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video, .ref5-slider .ref5-karte .kmr-webinar__bild > img { aspect-ratio: 2 / 1; object-position: 50% 20%; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video.is-chillaz { object-position: 50% 0%; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video.is-deuter { object-position: 50% 25%; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video.is-ortovox { object-position: 50% 15%; }
.ref5-slider .outtra-stimmen-slider__spur { align-items: stretch; }
.ref5-slider .ref5-folie { display: flex; }
.ref5-slider .ref5-karte { display: flex; flex-direction: column; height: 100%; }
.ref5-slider .ref5-karte .kmr-webinar__text { flex: 1 1 auto; justify-content: flex-start; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video, .ref5-slider .ref5-karte .kmr-webinar__bild > img { aspect-ratio: 21 / 9; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video.is-deuter { object-position: 50% 30%; }
.ref5-slider .ref5-karte .kmr-webinar__bild > video.is-ortovox { object-position: 50% 10%; }
/* Referenzen v12 09.11.2026: Atomic/Fischer als grosse Karten, Atomic-Logo groesser, Haendler-Einstieg im letzten Abschnitt. */
.ref4-karte__logo img.is-logo-atomic { max-width: 190px; max-height: 40px; }
.outtra-stimme-gross .ref4-karte__logo img.is-logo-atomic { max-width: 220px; max-height: 46px; }
.refv2-karte .refv2-karte__logo[src*="marke-atomic"] { height: 34px; max-width: 180px; }
.outtra-abschnitt .ref12-knopf { margin-top: clamp(40px, 4vw, 64px); }

/* Referenzen v13 09.11.2026: Personen nebeneinander, Zitat schmaler, Text tiefer, Logos groesser mit Luft. */
.ref5-karte .ref13-personen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 10px; }
.ref5-karte .ref13-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ref5-karte .ref13-person .kmr-webinar__koepfe img { width: clamp(44px, 3.6vw, 52px); height: clamp(44px, 3.6vw, 52px); }
.ref5-karte .ref13-person .kmr-webinar__namen { display: block; font-size: 13px; line-height: 1.3; }
.ref5-karte .ref13-person .kmr-webinar__namen strong { display: block; font-size: 14px; }
.ref5-slider .ref5-karte .ref5-titel { max-width: 30ch; }
.ref5-slider .ref5-karte .kmr-webinar__text { padding-top: clamp(30px, 2.8vw, 40px); }
.ref5-kopf { margin-bottom: 10px; }
.ref5-kopf .ref5-logo { margin: 0 6px 0 0; }
.ref5-kopf .ref5-logo img { height: 32px; max-width: 150px; }
.ref5-kopf .ref5-logo img.is-logo-deuter { height: 46px; }
.ref5-slider .ref5-karte .ref5-titel { max-width: 36ch; }

/* Referenzen v14 09.11.2026: Zitat fast volle Breite, Logos groesser, runde Ecken waehrend des Slidens, Einzelseiten-Hero wie Uebersicht. */
.ref5-slider .ref5-karte .ref5-titel { max-width: none; }
.ref5-kopf .ref5-logo img { height: 38px; max-width: 170px; }
.ref5-kopf .ref5-logo img.is-logo-deuter { height: 54px; }
.ref5-slider .outtra-stimmen-slider__fenster { border-radius: 20px; clip-path: inset(0 round 20px); isolation: isolate; }
.ref5-slider .ref5-folie { overflow: visible; }
.ref5-karte { border-radius: 20px; clip-path: inset(0 round 20px); isolation: isolate; }
.ref5-karte .kmr-webinar__bild { overflow: hidden; }
@media (min-width: 900px) {
	.outtra-hero--refv2 .outtra-hero__titel, .outtra-hero--refv2 .outtra-hero__text { grid-column: 1 / 6; }
	.outtra-hero--refv2 .outtra-hero__medien { grid-column: 6 / -1; padding-left: clamp(12px, 1.6vw, 28px); }
}
.outtra-hero--refv2 .ref5-karte .kmr-webinar__bild > video, .outtra-hero--refv2 .ref5-karte .kmr-webinar__bild > img { aspect-ratio: 2 / 1; height: auto !important; object-fit: cover; object-position: 50% 25%; }
.outtra-hero--refv2 .ref5-karte .kmr-webinar__bild { aspect-ratio: auto; }
.outtra-hero--refv2 .ref5-karte .kmr-webinar__text { padding-top: clamp(30px, 2.8vw, 40px); }
.outtra-hero--refv2 .ref5-karte .ref5-titel { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.32; letter-spacing: -0.015em; }

/* Referenzen v15 09.11.2026: Fakten im Hero der Einzelseiten, Zitat-Abschnitt ohne Fakten, Screen-Recording 8/12, Reihe ohne Scrollbar. */
.outtra-hero__text .ref15-fakten { margin-top: clamp(20px, 2vw, 28px); }
.outtra-hero__text .ref15-fakten > div { padding: 10px 0; }
.outtra-hero__text .ref15-fakten dd { font-size: 15px; }
.ref3-kern { grid-template-columns: 180px minmax(0, 1fr); }
@media (max-width: 767px) { .ref3-kern { grid-template-columns: 1fr; } }
@media (min-width: 768px) {
	.ref3-zeile.is-gespiegelt:has(.ref3-recording) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3.5vw, 56px); }
}
.refv2-reihe { scrollbar-width: none; -ms-overflow-style: none; }
.refv2-reihe::-webkit-scrollbar { display: none; }
/* Referenzen v18 09.11.2026: Zitat in „Aus dem Gespraech“ breiter. */
.ref3-kern__zitat p { max-width: 54ch; }

/* Referenzen v19 09.11.2026: Recording-Slider im Abschnitt Loesung. */
.ref19-rec { min-width: 0; }
.ref19-rec__leiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ref19-rec__reiter { min-height: 36px; padding: 7px 14px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); color: var(--o-text); font-family: var(--o-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s var(--o-kurve), color 0.2s var(--o-kurve), border-color 0.2s var(--o-kurve); }
.ref19-rec__reiter:hover { border-color: var(--o-orange); color: var(--o-orange); }
.ref19-rec__reiter.is-aktiv { background: var(--o-text); border-color: var(--o-text); color: #fff; }
.ref19-rec__reiter:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 2px; }
.ref19-rec__fenster { overflow: hidden; border-radius: var(--wp--custom--radius--normal); clip-path: inset(0 round var(--wp--custom--radius--normal)); isolation: isolate; }
.ref19-rec__spur { display: flex; align-items: flex-start; transition: transform 0.7s var(--o-kurve); will-change: transform; }
.ref19-rec__folie { flex: 0 0 100%; min-width: 0; margin: 0; }
.ref19-rec__folie video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
@media (prefers-reduced-motion: reduce) { .ref19-rec__spur { transition: none; } }

/* Referenzen v19 09.11.2026: Recording-Slider im Abschnitt Loesung. */
.ref19-rec { min-width: 0; }
.ref19-rec__leiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ref19-rec__reiter { min-height: 36px; padding: 7px 14px; border: 1px solid var(--o-linie); border-radius: 999px; background: var(--o-weiss); color: var(--o-text); font-family: var(--o-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s var(--o-kurve), color 0.2s var(--o-kurve), border-color 0.2s var(--o-kurve); }
.ref19-rec__reiter:hover { border-color: var(--o-orange); color: var(--o-orange); }
.ref19-rec__reiter.is-aktiv { background: var(--o-text); border-color: var(--o-text); color: #fff; }
.ref19-rec__reiter:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 2px; }
.ref19-rec__fenster { overflow: hidden; border-radius: var(--wp--custom--radius--normal); clip-path: inset(0 round var(--wp--custom--radius--normal)); isolation: isolate; }
.ref19-rec__spur { display: flex; align-items: flex-start; transition: transform 0.7s var(--o-kurve); will-change: transform; }
.ref19-rec__folie { flex: 0 0 100%; min-width: 0; margin: 0; }
.ref19-rec__folie video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
@media (prefers-reduced-motion: reduce) { .ref19-rec__spur { transition: none; } }

/* Referenzen v22 09.11.2026: Recording-Modul im Abschnitt Loesung (Pfeile, Zaehler, kein Anschnitt, Text wechselt mit). */
.ref22-kopf { margin-bottom: clamp(24px, 2.6vw, 40px); }
.ref22-kopf > p { margin: 0 0 10px; }
.ref22-kopf h2 { margin: 0; max-width: 24ch; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.ref22-modul { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.ref22-buehne { min-width: 0; }
.ref22-fenster { position: relative; overflow: hidden; border: 1px solid var(--o-linie); border-radius: var(--wp--custom--radius--normal); background: var(--o-grau); clip-path: inset(0 round var(--wp--custom--radius--normal)); isolation: isolate; }
.ref22-spur { display: flex; height: 100%; transition: transform 0.7s var(--o-kurve); will-change: transform; }
.ref22-folie { display: flex; flex: 0 0 100%; align-items: center; justify-content: center; min-width: 0; height: 100%; margin: 0; }
.ref22-folie video { display: block; width: 100%; height: 100% !important; max-height: none; object-fit: contain; background: var(--o-grau); }
.ref22-steuer { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ref22-zaehler { min-width: 3.6em; font-family: var(--o-mono); font-size: 13px; letter-spacing: 0.04em; text-align: center; color: var(--o-leise); }
.ref22-punkte { display: flex; gap: 8px; margin-left: auto; }
.ref22-punkt { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--o-linie); cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 0.2s var(--o-kurve); }
.ref22-punkt.is-aktiv { background: var(--o-orange); }
.ref22-punkt:focus-visible { outline: 2px solid var(--o-orange); outline-offset: 3px; }
.ref22-text > p.is-style-mono-label-orange { margin: 0 0 10px; }
.ref22-text__absatz { margin: 0 0 14px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--o-fliesstext); }
.ref22-text[hidden] { display: none; }
.ref22-auch { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--o-linie); font-size: 14px; line-height: 1.5; color: var(--o-leise); }
.ref22-auch a { color: var(--o-text); font-weight: 600; text-decoration: none; }
.ref22-auch a:hover { color: var(--o-orange); }
@media (max-width: 899px) { .ref22-modul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ref22-spur { transition: none; } }

/* Referenzen v23 09.11.2026: Fakten-Band unter dem Hero der Einzelseiten (Variante des KPI-Bands). */
.outtra-kpi-band.is-fakten { padding-block: clamp(32px, 3.4vw, 52px) !important; }
.outtra-kpi-band.is-fakten .outtra-kpi-band__raster > div > p.ref23-label { margin: 0 0 8px; color: var(--o-orange); font-size: 11px; max-width: none; }
.outtra-kpi-band.is-fakten .outtra-kpi-band__raster > div > p.ref23-wert { margin: 0; max-width: 34ch; color: var(--o-orange); font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
@media (max-width: 599px) { .outtra-kpi-band.is-fakten .outtra-kpi-band__raster { gap: 20px; } }

/* v24: Links unter Text-Bild-Abschnitten mit mehr Abstand nach oben */
.outtra-loesung .wp-block-column > p.is-style-pfeil-link { margin-top: clamp(30px, 2.8vw, 44px); }
/* v24: breitere Textspalte auf den Zielgruppenseiten */
@media (min-width: 900px) {
	.outtra-loesung.is-textbreit > .outtra-loesung__textspalte { flex: 0 0 52% !important; }
	.outtra-loesung.is-textbreit > .outtra-loesung__bildspalte { flex: 1 1 0 !important; }
}
.outtra-loesung.is-textbreit .outtra-loesung__text { max-width: 66ch; }