/*
 * Mobile-Fixes: Hero (Problem 1), Logo-Slider (Problem 2), CTA-Abschnitt (Problem 5)
 * und die Nachtraege vom 26./27.08.2026. Vorher im Customizer ("Zusaetzliches CSS"),
 * jetzt versioniert im Theme. Laedt nach flatsome-main und den CTA-Buttons (Prioritaet 110),
 * damit die !important-freien Regeln die Theme-Defaults ueberschreiben.
 * Messwerte und Herleitung: docs/mobile-fixes/ im Projekt-Root.
 */

/* Logo-Slider (Block header_logo_slider).
   War global und ohne Scope, hat dadurch jeden Slider der Seite auf 100px gezwungen. */
.logo-slider .flickity-viewport {
	height: 100px !important;
}
@media (max-width: 549px) {
	.logo-slider .flickity-viewport {
		height: 110px !important;
	}
	.logo-slider .box-image {
		width: 100% !important;
	}
	.logo-slider .box-image img {
		display: block;
		width: auto !important;
		max-width: 72%;
		max-height: 80px;
		margin: 0 auto;
	}
	.logo-slider .flickity-prev-next-button {
		width: 26px;
	}
	.logo-slider.slider-nav-circle .flickity-prev-next-button svg {
		height: 22px !important;
	}
	.logo-slider .flickity-prev-next-button.previous {
		left: 0;
		transform: none;
	}
	.logo-slider .flickity-prev-next-button.next {
		right: 0;
		left: auto;
		transform: none;
	}
}
img.trp-flag-image {
	width: 24px;
}
.footer-1, .footer-2 {
  border-top: 0px solid rgba(0, 0, 0, .05);
}

/* Problem 1: Hero mobil, Fokuspunkt + Schleier (Klasse hero-mobil).
   Motive liegen gemessen bei 65-80 % der Bildbreite, Median 73 %. */
@media (max-width: 849px) {
	.hero-mobil .banner-bg img.bg {
		object-position: 73% 50% !important;
	}
	.hero-mobil .banner-bg::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.85);
		pointer-events: none;
	}
}

/* Problem 5: CTA-Bild auf dem Handy ausblenden, Cremeflaeche aus bg_color bleibt. */
@media (max-width: 549px) {
	.section .section-bg img.bg {
		display: none;
	}
}

/* Logo-Slider: Pfeile und Logos vertikal zentriert (Nachtrag 26.08.) */
@media (max-width: 549px) {
	.logo-slider .gallery-col > .col-inner {
		height: 110px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.logo-slider .flickity-prev-next-button {
		top: 50% !important;
		bottom: auto !important;
		margin-top: -19px !important;
	}
}

/* Logo-Slider: blauen Hover-Kreis auf den Pfeilen entfernen (Nachtrag 26.08.) */
.logo-slider.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.logo-slider.slider-nav-circle .flickity-prev-next-button:hover svg {
	fill: var(--fs-color-primary) !important;
	background-color: transparent !important;
	border-color: transparent !important;
}

/* Problem 1, Tablet-Fenster 550-1149px (V2, Stand 27.08. nach neuen Button-Styles):
   Hero bekommt eine Mindesthoehe, damit Text und Buttons nicht in die naechste Sektion
   laufen. Werte = gemessener Maximalbedarf je Fenster (ohne Post 22, siehe Offene-Punkte).
   Desktop ab 1150px unveraendert. */
@media (min-width: 550px) and (max-width: 699px) {
	.hero-mobil {
		min-height: 990px;
	}
}
@media (min-width: 700px) and (max-width: 849px) {
	.hero-mobil {
		min-height: 870px;
	}
}
@media (min-width: 850px) and (max-width: 999px) {
	.hero-mobil {
		min-height: 850px;
	}
}
@media (min-width: 1000px) and (max-width: 1149px) {
	.hero-mobil {
		min-height: 760px;
	}
}

/* Hero-Textbox: width 100% + linker Margin schob die Box 20-40px ueber den rechten Rand */
@media (max-width: 849px) {
	.hero-mobil .banner-layers .text-box {
		max-width: calc(100% - 40px);
	}
}

/* Silbentrennung fuer Ueberschriften (Nachtrag 27.08.), z.B. "Lagerverwaltung" im Hero */
h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span, p.headline > span {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	hyphens: auto;
}

/* Hero: kein innerer Scrollbalken (Flatsome setzt .banner-layers auf overflow:auto),
   und H1 mobil etwas kleiner (Nachtrag 27.08.) */
.hero-mobil .banner-layers {
	overflow: hidden;
}
@media (max-width: 549px) {
	.hero-mobil h1 {
		font-size: clamp(30px, 9.2vw, 38px) !important;
	}
}