/* Rothermel — Korrekturen nach Yehors Prüfliste (06.11.2026). Wird nach allen Seiten-Styles geladen (rm_korrekturen in functions.php).
   Die Seiten selbst bleiben unverändert; jede Regel hier ist eine bewusste Abweichung vom Original (Nachweis: LOG.md 2026-11-08). */

/* Feste Container-Breiten des Exports (750/970/1150 px) passten bei 768–814, 992–1034 und 1200–1214 px nicht in den
   Bildschirm → Inhalt rechts abgeschnitten, bei genau 768 px zusätzlich ohne linken Rand. Höchstens Bildschirm minus Rand. */
.con-kit-organism .con-kit-container {
	--b-grid_container-sm: min(750px, calc(100vw - var(--one-kit-outside-padding, 32px) * 2));
	--b-grid_container-md: min(970px, calc(100vw - var(--one-kit-outside-padding, 32px) * 2));
	--b-grid_container-lg: min(1150px, calc(100vw - var(--one-kit-outside-padding, 32px) * 2));
}

/* Tablet (768–1024 px): lange Wörter brachen ohne Trennstrich mitten im Wort um („Unternehmen|gruppe", „Kraftstoffverbr|auch").
   Silbentrennung nur für lange Wörter (ab 10 Zeichen, je Teil mind. 4) — kurze Wörter und Handy/Desktop bleiben unverändert. */
@media (min-width: 768px) and (max-width: 1024px) {
	html body {
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 10 4 4;
	}
}

/* Bewerbung, Abschnitt Formular + „Für den Job bewerben…": ≤1024 px verlieren die Spalten ihren Innenabstand, die Zeile behält
   aber −50 px Außenrand → Liste lief 15–26 px rechts aus dem Bild, Symbole klebten links am Rand (Fund der Tablet-Prüfung 08.11.). */
@media (max-width: 1024px) {
	html section[data-id="6bHPESZqN2uusehRfhnRk"] .con-kit-layout {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* A1 Hero-Video: auch ≤1024 px randlos füllen (site-fixes.css zeigte dort ein Querformat-Band mit schwarzer Fläche darunter).
   Der Text steht dort jetzt ganz auf dem Video (statt auf Schwarz) → leichte Abdunklung für die Lesbarkeit. */
@media (max-width: 1024px) {
	.con-kit-organism-parallax--video video {
		object-fit: cover !important;
		object-position: center center !important;
	}
	.con-kit-organism-parallax--video::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(0, 0, 0, 0.35);
		pointer-events: none;
	}
}

/* A2 Rote/blaue Linie unter Überschriften: eine Stärke (4 px) statt 1,6–5,1 px je nach Abschnitt. */
.highlight-effect-underline:before {
	height: 4px !important;
	min-height: 4px !important;
}

/* A4 Sprachauswahl öffnet per Klick (korrekturen.js), nicht mehr beim Überfahren. „html" vorn: Die Original-Regel steht im <body>. */
html #custom-language-switcher:hover .gtranslate_wrapper {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}
html #custom-language-switcher.rm-offen .gtranslate_wrapper {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
html #custom-language-switcher .lang-button:focus-visible {
	outline: 2px solid #0d45a1;
	outline-offset: 2px;
}

/* A5 Link im dunklen Abschnitt (Planensattel-/Schwerlast-Seite): weiß + unterstrichen statt Browser-Blau (Kontrast 1,2 : 1). */
html .st-region p a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
html .st-region p a:hover {
	color: #ff6b5e;
}

/* B1 Timeline (Über uns, Nachhaltigkeit): von 769 bis 1024 px einspaltig wie auf dem Handy. Die abwechselnde Desktop-Anordnung
   lief dort bis zu 165 px aus dem Bild, die Linie durch den Text. (≤768 px schaltet interactions.js schon auf --align-left.) */
@media (min-width: 769px) and (max-width: 1024px) {
	html .con-kit-component-grid-timeline--align-center {
		align-items: flex-start !important;
		padding-left: 40px !important;
	}
	html .con-kit-component-grid-timeline--align-center .con-kit-component-grid-timeline__item:nth-child(n) {
		left: auto !important;
		right: auto !important;
		padding: 28px 0 28px 12px !important;
	}
	html .con-kit-component-grid-timeline--align-center .con-kit-component-grid-timeline__item:nth-child(n) .con-kit-component-grid-timeline__icon {
		left: -40px !important;
		right: auto !important;
	}
	html .con-kit-component-grid-timeline--align-center .con-kit-component-grid-timeline__progress-bar {
		margin-left: calc(-20px - var(--one-kit-border-width) / 2) !important;
	}
	html .con-kit-component-grid-timeline--align-center .con-kit-media-item-bullet {
		--one-kit-bullet-size: 40px !important;
		--one-kit-size: 40px !important;
	}
	html .con-kit-component-grid-timeline--align-center .con-kit-media-item--type-bullet {
		--media-item--size: 40px !important;
	}
	html .con-kit-component-grid-timeline--align-center .con-kit-component-header,
	html .con-kit-component-grid-timeline--align-center .con-kit-component-text,
	html .con-kit-component-grid-timeline--align-center .con-kit-quark-paragraph {
		text-align: left !important;
	}
}

/* B2 „Ihre Logistik – digital & transparent" (Transportlogistik): Der Lkw im Hintergrundbild belegt rechts gut ein Drittel.
   Text endet ab Tablet vor dem Bild.
   Kundenwunsch 10.11. (Phillip): Bild gerade statt gedreht/schräg angeschnitten und weiter weg vom Text. Das gedrehte SVG wird
   ausgeblendet, dasselbe Foto (aus dem SVG gelöst) steht gerade als rechte Fläche (44 %); Text endet 64 px davor. */
@media (min-width: 769px) {
	section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-molecule-textBlock {
		max-width: calc(56vw - 64px - (100vw - var(--grid-container__width)) / 2);
	}
	section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-organism-background > * {
		visibility: hidden;
	}
	section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-organism-background::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 44%;
		background: url("bilder/eactros-600.jpg") 22% 60% / cover no-repeat;
	}
}
/* M3 (Yehors Ergänzung 09.11., ersetzt die Handy-Lösung aus B2): Auf dem Handy war der Lkw klein, gedreht und schräg angeschnitten
   oben rechts (Drehung + Schnitt stecken im SVG-Hintergrund). Jetzt dasselbe Foto (aus dem SVG gelöst) als Querformat 16:9 in voller
   Breite über dem Text. Desktop/Tablet unverändert. */
@media (max-width: 768px) {
	section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-frame {
		padding-top: calc(100vw * 9 / 16 + 32px);
	}
	section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-organism-background {
		height: calc(100vw * 9 / 16);
		overflow: hidden;
		background: url("bilder/eactros-600-quer.jpg") center / cover no-repeat;
	}
	section[data-id="3df81be6-ce39-4e10-ab1d-8ac5ea4036de"] .con-kit-organism-background > * {
		visibility: hidden;
	}
}

/* M1 Startseite, Karriere-Kachel: „Bewerbung / Dialog / Start" — auf schmalen Handys lief „Bewerbung" aus der schwarzen Pille
   (Karte mit 40 px Innenabstand, Knöpfe nur ~74 px breit). Die Pille war außerdem schmaler als ein Knopf (33,33 % − 10 px statt
   (100 % − 10 px) / 3) und wanderte bei „Dialog"/„Start" nach links aus dem Knopf. Die Original-Regeln stehen im <body> → „html" vorn. */
html .pill-switch-container .nav-pill {
	width: calc((100% - 10px) / 3);
}
html .pill-switch-container .switch-btn {
	min-width: 0;
}
@media (max-width: 480px) {
	html .process-card {
		padding: 28px 16px;
	}
	html .pill-switch-container .switch-btn {
		padding-left: 4px;
		padding-right: 4px;
		font-size: clamp(14px, 4vw, 16px);
	}
}

/* M2 Überschriften mit roter Linie: Bei engem Zeilenabstand lag die Linie der ersten Zeile auf der zweiten Zeile (z. B. „Wir sind
   ELVIS-Mitglied", „Ihre Logistik – digital & transparent"). korrekturen.js setzt dann in der Mobilansicht (≤ 768 px) nur noch eine
   Linie unter die letzte Zeile, so breit wie die ganze Überschrift. Einzeilige Überschriften und Desktop bleiben unverändert. */
.highlight-effect-underline.rm-ohne-linie:before {
	display: none;
}
.highlight-effect-underline.rm-linie-ganz:before {
	left: var(--rm-linie-links, 0px);
	width: var(--rm-linie-breite, 100%);
}

/* M4 Seitlicher Abstand.
   a) Genau bei 768 px (iPad hochkant) lag der Text überall nur 8 px vom Rand: Die Spaltenzeile behält ab 768 px −16 px Außenrand,
      die Spalten verlieren ihren Innenabstand aber schon unterhalb von 992 px; die Mobilansicht (≤ 768 px) kennt den Rand nicht. */
@media (min-width: 768px) and (max-width: 768px) {
	html .con-kit-layout[data-kit-grid-type="columns"] {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}
/* b) Schwerlast- (und gleich gebaute Planensattel-)Seite: Kopfbereich und Vorteils-Liste überschreiben den Seitenrand von .st-wrap
      mit „padding: … 0" → Text klebte am Rand, sobald der Bildschirm schmaler als 1200 px + Rand ist. Anfrage-Formular und
      Kontaktkasten (≤ 920 px) sowie der dunkle Regionsabschnitt (≤ 820 px) liefen auf schmalen Handys rechts über den Rand. */
@media (max-width: 1287px) {
	html .st-wrap.st-hero-in,
	html .st-wrap.st-usp-grid {
		padding-left: clamp(18px, 4vw, 44px);
		padding-right: clamp(18px, 4vw, 44px);
	}
}
@media (max-width: 920px) {
	html .st-split {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 820px) {
	html .st-region .cols {
		grid-template-columns: minmax(0, 1fr);
	}
}
/*    „Schwerlast-/Sondertransporte" (Regions-Überschrift, Formular-Titel) passt bei ≤ 380 px nicht in eine Zeile → Silbentrennung. */
@media (max-width: 480px) {
	html .st-h,
	html .st-form h3 {
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* M5 Timeline Nachhaltigkeit, Handy (≤ 768 px, einspaltig): Die Linie steht bei Innenabstand − --media-item--size / 2 (dort 48 px),
   die Punkte sind aber 40 px groß und sitzen am linken Rand → Linie 4 px rechts neben der Punktmitte. Linie jetzt auf die
   Punktmitte (20 px): auf „Über uns" (--media-item--size 40 px) ergibt das denselben Wert wie bisher. */
@media (max-width: 768px) {
	html .con-kit-component-grid-timeline--align-left .con-kit-component-grid-timeline__progress-bar {
		margin-left: calc(20px - var(--media-item--size) - var(--one-kit-border-width) / 2) !important;
	}
}

/* C1 E-Lkw-Karte (Planensattel): Bildspalte erzwang über aspect-ratio + min-height eine Mindestbreite von 498 px und schob
   sich bei 821–1000 px über den Text. Spalten jetzt fest im Verhältnis, Bild füllt seine Spalte.
   „html" vorn: Die Seiten-Styles der st-Abschnitte stehen im <body>, also nach dieser Datei. */
html .st-elkw {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
html .st-elkw-img {
	min-width: 0;
}
@media (max-width: 1024px) {
	html .st-elkw-img {
		aspect-ratio: auto;
	}
}
@media (max-width: 820px) {
	html .st-elkw {
		grid-template-columns: 1fr;
	}
	html .st-elkw-img {
		aspect-ratio: 16 / 10;
	}
}

/* D1 Auswahlfeld (Transportanfrage): gewählter Wert und Optionen in voller Textfarbe, nur der Platzhalter bleibt blass. */
.funnel-native-select:valid,
.funnel-native-select option {
	color: #000;
}
.funnel-native-select option[value=""] {
	color: rgba(0, 0, 0, 0.45);
}

/* D2 Fehlermeldungen der Formulare in der Seitenschrift statt Times. */
.funnel-error,
.rothermel-form-msg {
	font-family: "Open Sans", "Source Sans 3", Arial, sans-serif;
}

/* D3 Ländervorwahl: natives Auswahlfeld (korrekturen.js, im Shadow-Root) liegt unsichtbar über Flagge + Pfeil. */
.react-tel-input .rm-vorwahl {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.react-tel-input .selected-flag:focus-within {
	outline: 2px solid #0d45a1;
	outline-offset: 2px;
}