/* Mobil-Optimierung 09.11.2026 – wird nach theme.css geladen.
 * Alles hier steht in max-width-Media-Queries; ab 1280px (Desktop) greift nichts davon.
 * Gruppen:
 *   A  Kopf: Burger-Menue bis 1279px (Insel bricht darunter zweizeilig um), Tippflaechen, Overlay
 *   B  Fliesstext >= 16px, Ueberschriften
 *   C  KPI-Baender, Schritte, Raster
 *   D  Tippflaechen (Slider-Punkte, Fusszeile)
 */

/* ==========================================================================
   A  Kopf und Menue
   ========================================================================== */

/* A1  600–1279px: Die Menue-Insel passt erst ab ca. 1280px in eine Zeile.
       Darunter bricht der Kopf zweizeilig um (Insel ueber zwei Reihen, Button in
       eigener Zeile). Deshalb hier wie auf dem Handy das Burger-Overlay zeigen. */
@media (min-width: 600px) and (max-width: 1279px) {
	.outtra-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.outtra-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	/* Insel-Rahmen und Pillen im Overlay neutralisieren */
	.outtra-kopf .wp-block-navigation.is-insel .is-menu-open .wp-block-navigation__container {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		gap: 0 !important;
	}
	.outtra-kopf .wp-block-navigation.is-insel .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		display: flex;
		padding: 0;
		border-radius: 0;
		background: none;
	}
	.outtra-kopf .is-menu-open .wp-block-navigation-submenu::after { display: none; }
	/* Mega-Menue im Overlay: statisch, Gruppen nebeneinander wie Karten */
	.wp-block-navigation .is-menu-open .outtra-menue {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		width: auto;
		max-width: none;
		transform: none !important;
		left: auto !important;
		top: auto !important;
		padding: .5rem 0 0 !important;
		gap: 1rem 1.5rem;
		box-shadow: none;
		background: none;
	}
	.is-menu-open .outtra-menue__gruppe { min-width: 0; max-width: none; }
	.outtra-kopf .is-menu-open .wp-block-navigation__container,
	.outtra-kopf .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		align-items: flex-start !important;
		width: 100%;
	}
	.outtra-kopf .wp-block-navigation.is-insel .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child { flex-direction: column; }
	.wp-block-navigation .is-menu-open .outtra-menue { width: 100% !important; box-sizing: border-box; }
	.is-menu-open .outtra-menue__fuss { margin: .5rem 0 0; border-radius: 8px; }
	.is-menu-open .wp-block-navigation__responsive-container-content { padding-inline: clamp(24px, 4vw, 48px); }
}

/* A2  Tippflaechen im Kopf (alle Breiten bis 1279px) */
@media (max-width: 1279px) {
	.outtra-kopf .wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}
	/* Trefferflaeche groesser, Kopfhoehe bleibt: negative Raender gleichen aus */
	.outtra-kopf .wp-block-navigation__responsive-container-open { margin: -10px; }
	.outtra-sprachen__schalter { box-sizing: border-box; min-height: 44px; margin-block: -6px; }
	.outtra-sprachen__eintrag a,
	.outtra-sprachen__eintrag.is-aktuell { min-height: 44px; display: flex; align-items: center; }
	/* Overlay: Hauptpunkte und Unterpunkte mit Daumen treffen */
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
	.wp-block-navigation .is-menu-open .outtra-menue .outtra-menue__link { min-height: 44px; }
	.wp-block-navigation .is-menu-open .outtra-menue__name { white-space: normal; }
}

/* A3  Handy-Overlay: Karten volle Breite, Gruppen mit Luft */
@media (max-width: 599px) {
	.wp-block-navigation .is-menu-open .outtra-menue {
		width: 100%;
		box-sizing: border-box;
		box-shadow: none;
		gap: 1.75rem;
	}
	.outtra-kopf .is-menu-open .wp-block-navigation__container { gap: 2px !important; }
	.outtra-kopf .is-menu-open .wp-block-navigation-item.has-child { width: 100%; }
	.is-menu-open .outtra-menue__gruppe + .outtra-menue__gruppe { margin-top: 14px; }
	.is-menu-open .wp-block-navigation__responsive-container-content { padding-bottom: 48px; }
	.is-menu-open .outtra-menue__text { font-size: 13.5px; }
}

/* ==========================================================================
   B  Schrift
   ========================================================================== */

/* B1  Fliesstext auf Tablet und Handy mindestens 16px.
       Die Preset-Groesse "Text" faengt bei 15px an; Klassen mit eigener Groesse
       (14,5–15,5px) werden einzeln angehoben. */
@media (max-width: 899px) {
	:root:root { --wp--preset--font-size--medium: 16px; }

	.outtra-hero__absatz,
	.outtra-einleitung,
	.outtra-loesung__text,
	ul.outtra-haken li,
	.kmr-hinweis,
	.kmr-studie__text,
	.kmi-fazit,
	.kmr-check__text,
	.outtra-projekt__schritt p:last-child,
	.outtra-layerliste li > span:last-child,
	.refv2-text,
	.refv2-fakten dd,
	.refv2-ergebnis > p:last-child,
	.refv2-loesungen span:not(.outtra-pfeil),
	.outtra-omis-hinweis,
	.outtra-zitat blockquote,
	.pdj__folge > p,
	.outtra-zweiwege__karten .outtra-weg p:not([class*="is-style"]),
	.outtra-zeitstrahl li > p {
		font-size: 16px !important;
	}
}

@media (max-width: 599px) {
	/* Kartentexte (13–13,5px) */
	.outtra-partnerkarte > p,
	.outtra-partnerkarte h3 + p,
	.outtra-netzfluss__reihe .outtra-schritt p:not([class*="is-style"]),
	.outtra-kontakt__stoerer p {
		font-size: 15.5px !important;
	}
	/* Fusszeile: 13,5px -> 15px */
	.outtra-fuss { font-size: 15px; }
	.outtra-fuss h3.outtra-fuss__titel { font-size: 14px; }

	/* B2  Ueberschriften: lange Komposita duerfen trennen statt rauszuragen */
	h1, h2, h3, h4, .wp-block-heading {
		overflow-wrap: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
		hyphenate-limit-chars: 12 5 5;
	}
}

/* ==========================================================================
   C  Kennzahlen, Schritte, Raster
   ========================================================================== */

/* C1  KPI-Band: Kennzahlen sind nowrap. Bei langen Werten ("5 KI-Systeme",
       englische Texte) lief die zweite Spalte rechts aus dem Bild (bis 443px).
       Flex statt Grid: zwei pro Reihe, wenn sie passen, sonst eine. */
@media (max-width: 599px) {
	.outtra-kpi-band__raster,
	.outtra-kpi-band__raster[style*="--zahlen:4"] {
		display: flex;
		flex-wrap: wrap;
		gap: 28px 24px;
	}
	.outtra-kpi-band__raster > div {
		flex: 1 1 calc(50% - 12px);
		min-width: 0;
	}
	.outtra-kpi-band__raster > div:has(> .outtra-zahl) { min-width: min-content; }
	.outtra-kpi-band__raster > div > p:not(.outtra-zahl) { hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 10 4 4; }
	.outtra-kpi-band__raster .outtra-zahl { font-size: clamp(30px, 8.6vw, 36px); }

	/* C2  "So laeuft der Start" (Netzfluss-Schritte): auf dem Handy untereinander */
	.outtra-netzfluss__reihe { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ==========================================================================
   D  Tippflaechen
   ========================================================================== */
@media (max-width: 899px) {
	/* Slider-Punkte: sichtbare Groesse bleibt, Trefferflaeche 44px */
	.outtra-stimmen-slider__punkt,
	.kmr-lauf__punkt {
		position: relative;
	}
	.outtra-stimmen-slider__punkt::after,
	.kmr-lauf__punkt::after,
	.kmr-marker__knopf::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
	.outtra-stimmen-slider__punkte { gap: 18px; }

	/* Fusszeile: Links als 44px hohe Zeilen statt 21px */
	.outtra-fuss ul { line-height: 1.4; }
	.outtra-fuss ul a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.outtra-fuss__social a { min-height: 44px; }
}
@media (max-width: 899px) {
	.kmr-lauf__punkt::after { width: calc(100% + 8px); }
}

/* ==========================================================================
   E  Grafiken: eigene Mobilfassungen (09.11.2026)
      Die SVG-Grafiken im Hero (KI-Marktreport, Lost Sales, Produktdaten-Anreicherung)
      schrumpften auf dem Handy auf 6–9px Schrift. Darunter steht jetzt eine eigene
      HTML-Fassung (.outtra-schmal) in echter Schriftgroesse; Desktop bleibt unberuehrt.
      Die Ablauf-Grafik "So entsteht der Report" stapelt die Stationen bis 899px.
   ========================================================================== */
.outtra-schmal { display: none; }

@media (max-width: 599px) {
	.outtra-kmgrafik > svg,
	.outtra-lsgrafik > svg,
	.outtra-pdgrafik > svg { display: none; }
	.outtra-kmgrafik > .outtra-schmal,
	.outtra-lsgrafik > .outtra-schmal,
	.outtra-pdgrafik > .outtra-schmal { display: block; }
}
@media (max-width: 899px) {
	.outtra-kmw .kmw-rahmen { display: none; }
	.outtra-kmw > .kmwm { display: grid; }
}

@media (max-width: 899px) {
	/* E0  Gemeinsam */
	.outtra-schmal { font-family: var(--wp--preset--font-family--text); font-size: 15px; line-height: 1.4; color: var(--o-text); }
	.outtra-schmal p { margin: 0; }
	.outtra-schmal ul, .outtra-schmal ol { margin: 0; padding: 0; list-style: none; }
	.outtra-schmal .outtra-menue__icon { flex: none; width: 20px; height: 20px; }
	.outtra-schmal > * { animation: ls-auf 0.6s var(--o-kurve) both; }
	.outtra-schmal > :nth-child(2) { animation-delay: 0.35s; }
	.outtra-schmal > :nth-child(3) { animation-delay: 0.7s; }
	.outtra-schmal > :nth-child(4) { animation-delay: 1.05s; }
	.outtra-schmal > :nth-child(5) { animation-delay: 1.4s; }
	.outtra-schmal > :nth-child(6) { animation-delay: 1.75s; }
	.outtra-schmal > :nth-child(7) { animation-delay: 2.1s; }
	.outtra-schmal > :nth-child(8) { animation-delay: 2.45s; }
	/* Verbindung nach unten: gepunktete Linie mit Pfeilspitze */
	.outtra-schmal__pfeil { position: relative; display: block; width: 0; height: 24px; margin: 6px auto 12px; border-left: 2px dotted var(--o-orange); }
	.outtra-schmal__pfeil::after { content: ""; position: absolute; left: -6px; bottom: -3px; width: 7px; height: 7px; border-right: 2px solid var(--o-orange); border-bottom: 2px solid var(--o-orange); transform: rotate(45deg); }
	.outtra-schmal__pfeil.is-grau { border-left-color: #A9A59D; }
	.outtra-schmal__pfeil.is-grau::after { border-color: #A9A59D; }

	/* E1  KI-Marktreport-Hero: Frage -> KI-Antwort -> Ranking */
	.kmm-frage { display: flex; align-items: flex-start; gap: 12px; }
	.kmm-kunde { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #15171C; color: #fff; }
	.kmm-frage p { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid #E5E2DC; border-radius: 4px 18px 18px 18px; background: #fff; font-weight: 500; }
	.kmm-antwort { margin: 14px 6px 0 0; padding: 14px 16px 16px; border: 1px solid #E5E2DC; border-radius: 16px; background: #fff; box-shadow: 6px 6px 0 -1px #fff, 6px 6px 0 0 #E5E2DC; }
	.kmm-mono { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.14em; color: var(--o-orange); }
	.kmm-mono .outtra-menue__icon { width: 18px; height: 18px; }
	.kmm-zeilen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 12px; }
	.kmm-balken { display: block; height: 10px; border-radius: 5px; background: #EEEBE6; }
	.kmm-chip { padding: 3px 10px; border-radius: 6px; background: #FDEEE7; color: var(--o-orange); font-size: 14px; font-weight: 600; }
	.kmm-chip.is-du { background: var(--o-orange); color: #fff; }
	.kmm-report { padding: 16px 18px 18px; border-radius: 16px; background: #15171C; color: rgba(255, 255, 255, 0.85); }
	.kmm-klein { margin-top: 2px !important; font-size: 14px; color: rgba(255, 255, 255, 0.65); }
	.kmm-report ol { display: grid; gap: 10px; margin-top: 14px; }
	.kmm-report li { display: grid; grid-template-columns: 16px minmax(0, 8em) minmax(0, 1fr); align-items: center; gap: 10px; font-size: 14px; }
	.kmm-nr { font: 600 13px var(--o-mono); color: rgba(255, 255, 255, 0.5); }
	.kmm-spur i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); transform-origin: left center; animation: km-wachsen 0.7s var(--o-kurve) both; }
	.kmm-report li.is-du { font-weight: 700; color: var(--o-orange); }
	.kmm-report li.is-du .kmm-nr { color: var(--o-orange); }
	.kmm-report li.is-du .kmm-spur i { background: var(--o-orange); }
	.kmm-systeme { margin-top: 14px !important; font: 500 13px/1.5 var(--o-mono); letter-spacing: 0.08em; color: var(--o-leise); }

	/* E2  Lost-Sales-Hero: Suche -> kein Treffer -> Lost Sales -> Nachorder */
	.lsm-reihe { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
	.lsm-person { display: flex; flex: none; flex-direction: column; align-items: center; gap: 6px; }
	.lsm-rund { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%; }
	.lsm-rund .outtra-menue__icon { width: 26px; height: 26px; }
	.lsm-rund.is-dunkel { background: #15171C; color: #fff; }
	.lsm-rund.is-orange { background: var(--o-orange); color: #fff; }
	.lsm-rund.is-laden { border: 2px solid var(--o-orange); background: #fff; color: var(--o-orange); }
	.outtra-lsgrafik .lsm-badge { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; }
	.outtra-lsgrafik .lsm-badge.is-haken { width: 24px; height: 24px; }
	.lsm-tag { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #15171C; color: #fff; font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.1em; }
	.lsm-tag.is-grau { background: #77736C; }
	.lsm-tag.is-orange { background: var(--o-orange); }
	.lsm-a { justify-content: flex-start; }
	.lsm-suche { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; margin-top: 3px; padding: 12px 16px; border: 1px solid #E5E2DC; border-radius: 999px; background: #fff; font-weight: 500; }
	.lsm-suche .outtra-menue__icon { width: 18px; height: 18px; color: var(--o-orange); }
	.lsm-b { gap: 26px; padding-top: 8px; }
	.lsm-mitte { margin-top: 10px !important; text-align: center; }
	.lsm-karte { display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: end; gap: 0 14px; padding: 16px 18px; border-radius: 16px; background: #15171C; color: #fff; }
	.lsm-mono { grid-column: 1 / -1; font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.14em; color: var(--o-orange); }
	.lsm-zahl { margin-top: 6px !important; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; }
	.lsm-klein { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
	.outtra-lsgrafik .lsm-kurve { grid-column: 2; grid-row: 2 / span 2; align-self: center; width: 100%; height: 44px; overflow: visible; }
	.lsm-c { gap: 8px; padding-top: 6px; }
	.lsm-linie { flex: 1 1 12px; min-width: 12px; margin-top: 25px; border-top: 2px dotted var(--o-orange); }
	.lsm-pille { flex: none; margin-top: 12px; padding: 4px 12px; border: 1px solid var(--o-orange); border-radius: 999px; background: #fff; color: var(--o-orange); font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.1em; }
	.lsm-c .lsm-badge.is-haken { animation: ls-pop 0.45s var(--o-kurve) 3.2s both; }

	/* E3  Produktdaten-Anreicherung-Hero: unvollstaendig -> KI -> vollstaendig */
	.pdm-mono { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.1em; }
	.pdm-mono.is-orange { color: var(--o-orange); }
	.pdm-mono.is-rot { color: #D0361F; }
	.pdm-mono.is-gruen { color: var(--o-gruen); }
	.pdm-mono.is-leise { color: var(--o-leise); }
	.pdm-mono .outtra-menue__icon { width: 18px; height: 18px; }
	.pdm-layer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border-radius: 14px; background: #15171C; color: #fff; }
	.pdm-layername { font-weight: 600; }
	.pdm-karten { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
	.pdm-karte { padding: 12px 8px; border: 1px solid #E5E2DC; border-radius: 14px; background: #fff; }
	.pdm-karte > .pdm-mono { margin: 0 6px 8px !important; padding-bottom: 10px; border-bottom: 1px solid #E5E2DC; }
	.pdm-karte ul { display: grid; gap: 3px; }
	.pdm-karte li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 8px; font-size: 14px; line-height: 1.3; }
	.pdm-karte li span { min-width: 0; overflow-wrap: anywhere; }
	.pdm-karte li svg { flex: none; width: 18px; height: 18px; }
	.pdm-karte li.is-fehlt { background: #FDECE7; }
	.pdm-karte li.is-neu { background: #E2F6EC; }
	.pdm-ki { position: absolute; top: 4px; left: 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--o-orange); box-shadow: 0 0 0 4px var(--o-weiss); transform: translateX(-50%); }
	.outtra-pdgrafik .pdm-ki svg { width: 18px; height: 18px; }
	.pdm-q { display: flex; justify-content: space-between; gap: 6px; margin: 10px 6px 0 !important; font-size: 13px; color: var(--o-leise); }
	.pdm-q b { color: #D0361F; }
	.pdm-karte.is-nachher .pdm-q b { color: var(--o-gruen); }
	.pdm-balken { display: block; height: 8px; margin: 6px 6px 0; overflow: hidden; border-radius: 4px; background: #EEEBE6; }
	.pdm-balken i { display: block; width: 50%; height: 100%; border-radius: 4px; background: #E2422B; }
	.pdm-karte.is-nachher .pdm-balken i { width: 100%; background: #27AE74; transform-origin: left center; animation: km-wachsen 0.9s var(--o-kurve) 1.2s both; }
	.pdm > .pdm-mono.is-leise { margin-top: 18px !important; }
	.pdm-kanaele { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; }
	.pdm-kanaele li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid #E5E2DC; border-radius: 999px; background: #fff; font-size: 14px; }
	.pdm-kanaele .outtra-menue__icon { width: 16px; height: 16px; color: var(--o-orange); }

	/* E4  KI-Marktreport "So entsteht der Report": vier Stationen untereinander */
	.outtra-kmw > .kmwm { gap: 30px; margin: 0; padding: 0; list-style: none; }
	.kmwm-station { position: relative; padding: 18px 18px 20px; border: 1px solid var(--o-linie); border-radius: 18px; background: var(--o-weiss); }
	.kmwm-station + .kmwm-station::before { content: ""; position: absolute; top: -31px; left: 50%; height: 26px; border-left: 2px dotted var(--o-orange); }
	.kmwm-station + .kmwm-station::after { content: ""; position: absolute; top: -10px; left: calc(50% - 4px); width: 7px; height: 7px; border-right: 2px solid var(--o-orange); border-bottom: 2px solid var(--o-orange); transform: rotate(45deg); }
	.kmwm-kopf { font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.14em; color: var(--o-leise); }
	.kmwm-bild { margin: 14px 0 16px; }
	.kmwm-zahl { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--o-orange); }
	.kmwm-text { margin-top: 4px !important; color: var(--o-leise); }
	.is-fragen .kmwm-bild { display: grid; gap: 8px; }
	.kmwm-frage { display: block; padding: 10px 12px; border: 1px solid #E5E2DC; border-radius: 10px; }
	.kmwm-frage b { display: block; font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.08em; color: var(--o-orange); }
	.kmwm-frage i { display: block; width: 70%; height: 7px; margin-top: 8px; border-radius: 4px; background: #EEEBE6; }
	.kmwm-ki { display: flex; flex-wrap: wrap; gap: 10px; }
	.outtra-kmw .kmwm-ki svg { width: 44px; min-width: 0; height: 44px; }
	.kmwm-namen { display: block; margin-top: 10px; font-size: 14px; }
	.kmwm-raster { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 4px; }
	.kmwm-raster i { aspect-ratio: 1; border-radius: 3px; background: #FDEEE7; }
	.kmwm-raster i.is-orange { background: var(--o-orange); }
	.kmwm-report { display: grid; gap: 8px; padding: 14px 16px 16px; border-radius: 14px; background: #15171C; }
	.kmwm-mono { font: 600 13px/1.3 var(--o-mono); letter-spacing: 0.14em; color: var(--o-orange); }
	.kmwm-rang { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; }
	.kmwm-rang b { font: 600 13px var(--o-mono); color: rgba(255, 255, 255, 0.5); }
	.kmwm-rang i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.24); transform-origin: left center; animation: km-wachsen 0.7s var(--o-kurve) 1.6s both; }
	.kmwm-rang.is-hervor b { color: var(--o-orange); }
	.kmwm-rang.is-hervor i { background: var(--o-orange); }
	.kmwm-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
	.kmwm-pillen span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); font: 600 13px/1.4 var(--o-mono); letter-spacing: 0.06em; }
}
/* Tablet: zwei Stationen nebeneinander, Reihenfolge ueber die Nummern */
@media (min-width: 600px) and (max-width: 899px) {
	.outtra-kmw > .kmwm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.kmwm-station + .kmwm-station::before,
	.kmwm-station + .kmwm-station::after { display: none; }
}

/* E5  Lost-Sales-Dashboard (HTML): Schrift auf Handy und Tablet mindestens 13px statt 9–11px */
@media (max-width: 899px) {
	.outtra-lsd { font-size: 14px; }
	.outtra-lsd .lsd-label,
	.outtra-lsd .lsd-legende,
	.outtra-lsd .lsd-produkte li { font-size: 13px; }
	.outtra-lsd .lsd-haendler th,
	.outtra-lsd .lsd-haendler td span { font-size: 13px; }
}
@media (max-width: 599px) {
	.outtra-lsd { padding: 16px; }
	.outtra-lsd .lsd-kopf { flex-wrap: wrap; gap: 4px 12px; }
	.outtra-lsd .lsd-zahl { font-size: 19px; white-space: normal; }
	.outtra-lsd .lsd-label,
	.outtra-lsd .lsd-legende,
	.outtra-lsd .lsd-produkte li { font-size: 13px; }
	.outtra-lsd .lsd-produkte li:nth-child(n+4) { display: none; }
	.outtra-lsd .lsd-haendler table { font-size: 14px; }
	.outtra-lsd .lsd-haendler th,
	.outtra-lsd .lsd-haendler td span { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.outtra-schmal,
	.outtra-schmal *,
	.outtra-schmal *::before,
	.outtra-schmal *::after { animation: none !important; }
}