/* ==========================================================================
   baloop – Mobile Optimierung (Viewport, Grundschrift, Off Canvas)
   Datei:   baloop-mobile.css   |   Version 1.6   |   Stand: 25.09.2026
   Projekt: update.baloop.de (WordPress + Avada 7.x / Fusion Builder)

   Diese Datei ersetzt baloop-mobile.css 1.0 UND
   baloop-mobile-offcanvas.css 1.1 – alles in einem Stück.

   AUSGANGSLAGE (gemessen bei 375 x 812 px)
   - Fließtext 24px / Zeilenhöhe 36px in einer 311px breiten Spalte
     -> ca. 26 Zeichen pro Zeile (Webstandard für gute Lesbarkeit: 45–75)
   - Avada skaliert per "Responsive Typography" NUR Überschriften, nicht
     Fließtext, Buttons, Listen oder Menü -> dort stehen Desktop-Werte
   - Seitenrand 32px, Sektionspolster 48px
   - Untergrenze der Avada-Fluid-Typo global bei 27px (1,5 x 18px)
   - Off Canvas: Close-Icon 48px mit 4rem Abstand liegt auf der Überschrift,
     Kacheln 86px hoch

   ANSATZ
   Keine Einzelkorrekturen an Modulen, sondern zentrale Überschreibung der
   Avada-CSS-Variablen (Typography Sets 1–5, --minFontSize, Container-
   Padding der Small-Screen-Stufe). Wirkt damit auf alle bestehenden UND
   alle künftig gebauten Seiten.

   SCOPE
   Alles liegt in Media Queries <= 1024px. Ab 1025px bleibt die Seite
   unverändert. Die Skalen erreichen bei exakt 1024px wieder die
   Desktop-Werte -> kein sichtbarer Sprung am Breakpoint.

   EINBAU
   Avada > Theme Options > Custom CSS, danach Avada-Cache und
   WP-Rocket-Cache (inkl. "Used CSS leeren") leeren.
   Alternativ als eigenes Stylesheet nach 'fusion-dynamic-css' – Snippet
   am Dateiende.

   GEPRÜFT gegen: Startseite, /einrichtungen/, /fachbereich/erzieher/,
   /kontakt/, /gehaltsrechner/, /einrichtungen/anfrage/ (Quform),
   Off Canvas awb-oc-454 und awb-oc-649
   ========================================================================== */


/* ==========================================================================
   0. STELLSCHRAUBEN – nur hier justieren
   ========================================================================== */

html:root {
	/* Seitenrand (Gutter) auf Smartphones */
	--bl-gutter: 20px;

	/* Obergrenze für vertikales Sektionspolster auf Smartphones */
	--bl-section-py: 40px;

	/* Mindestmaß für Touch-Flächen (Apple HIG 44px / Material 48px) */
	--bl-tap: 48px;

	/* Hero: Höhe des Bildstreifens und Überlappung der Textkarte (Block 11) */
	--bl-hero-band: 300px; /* Fallback für Browser ohne svh */
	--bl-hero-band: clamp(220px, 38svh, 320px);
	--bl-hero-overlap: 32px;

	/* ----------------------------------------------------------------------
	   Fluide Schriftgrößen-Skala  ->  clamp(MIN, BASIS + STEIGUNG, MAX)
	   MIN = Wert bei 375px      MAX = bestehender Desktop-Wert
	   ---------------------------------------------------------------------- */

	/* Set 1 – Display / H1+H2    64px  ->  ~34px @375 */
	--bl-typo1: clamp(2.125rem, 16.7px + 4.62vw, 4rem);
	/* Set 2 – Headline / H3      32px  ->  ~24px @375 */
	--bl-typo2: clamp(1.5rem, 19.4px + 1.23vw, 2rem);
	/* Set 3 – GRUNDSCHRIFT       24px  ->  17,5px @375 */
	--bl-typo3: clamp(1.09375rem, 13px + 1.08vw, 1.5rem);
	/* Set 4 – Sekundär / Buttons 20px  ->  16,5px @375 */
	--bl-typo4: clamp(1.03125rem, 13.7px + 0.62vw, 1.25rem);
	/* Set 5 – Klein / Meta       18px  ->  16px @375 */
	--bl-typo5: clamp(1rem, 14px + 0.46vw, 1.125rem);
}


/* ==========================================================================
   1. GRUNDLAGEN / VIEWPORT-HYGIENE (alle Breiten)
   ========================================================================== */

html {
	/* verhindert das automatische Aufblasen von Text im Querformat */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Sicherheitsnetz gegen horizontales Scrollen.
   'clip' statt 'hidden', damit position:sticky/fixed weiter funktioniert. */
html,
body {
	overflow-x: clip;
}

/* Medien brechen nie aus dem Viewport aus */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* Tabellen und Code scrollen für sich, statt die Seite zu sprengen */
.fusion-body table,
.fusion-body pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   2. TYPOGRAFIE <= 1024px
   Die Avada Typography Sets werden fluid. Alles, was im Builder auf ein
   Set gesetzt ist (Textblöcke, Titel, Buttons, Menü, Listen), skaliert mit.
   ========================================================================== */

@media only screen and (max-width: 1024px) {

	html:root {
		--awb-typography1-font-size: var(--bl-typo1);
		--awb-typography2-font-size: var(--bl-typo2);
		--awb-typography3-font-size: var(--bl-typo3);
		--awb-typography4-font-size: var(--bl-typo4);
		--awb-typography5-font-size: var(--bl-typo5);

		/* kleinere Schrift braucht relativ mehr Durchschuss */
		--awb-typography1-line-height: 1.15;
		--awb-typography2-line-height: 1.25;
		--awb-typography3-line-height: 1.55;
		--awb-typography4-line-height: 1.55;
		--awb-typography5-line-height: 1.55;

		/* Basis-Typo des Themes (Avada leitet sie aus Set 5 ab) */
		--body_typography-font-size: var(--bl-typo5);
		--body_typography-line-height: 1.6;

		/* Fallback-Größen der Theme-Überschriften h1..h6 */
		--h1_typography-font-size: var(--bl-typo1);
		--h2_typography-font-size: var(--bl-typo1);
		--h3_typography-font-size: var(--bl-typo2);
		--h4_typography-font-size: var(--bl-typo3);
		--h5_typography-font-size: var(--bl-typo4);
		--h6_typography-font-size: var(--bl-typo5);
	}

	/* Avada Responsive Typography
	   Formel: fontSize - Sensitivity * (fontSize - minFontSize) * ...
	   Original: minFontSize = 1,5 x 18px = 27px -> H1 bleibt bei 35px.
	   22px ergibt ~31px H1 / ~24px H3 bei 375px, Hierarchie bleibt erhalten.
	   Module mit eigenem, im Builder gesetztem Minimum bleiben unberührt. */
	.fusion-body .fusion-responsive-typography-calculated {
		--minFontSize: 22;
	}

	/* Lange deutsche Komposita (Heilerziehungspfleger, Empfehlungsprämie)
	   dürfen umbrechen, statt die Spalte zu sprengen */
	.fusion-body h1,
	.fusion-body h2,
	.fusion-body h3,
	.fusion-body h4,
	.fusion-body .fusion-title-heading {
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.fusion-body .fusion-text p,
	.fusion-body .fusion-text li {
		overflow-wrap: break-word;
		text-wrap: pretty;
	}
}


/* ==========================================================================
   3. ABSTÄNDE / GUTTER <= 640px (Avada "Small Screen")
   min() kappt nur zu große Werte: bewusst randlose (full-bleed) Sektionen
   bleiben bei 0, 32px werden zu 20px. Sektionen mit eigenem Small-Screen-
   Wert aus dem Builder bleiben unberührt.
   ========================================================================== */

@media only screen and (max-width: 640px) {

	.fusion-body .fusion-fullwidth,
	.fusion-body .fusion-builder-row-container {
		--awb-padding-left-small: min(var(--awb-padding-left, var(--bl-gutter)), var(--bl-gutter));
		--awb-padding-right-small: min(var(--awb-padding-right, var(--bl-gutter)), var(--bl-gutter));
		--awb-padding-top-small: min(var(--awb-padding-top, var(--bl-section-py)), var(--bl-section-py));
		--awb-padding-bottom-small: min(var(--awb-padding-bottom, var(--bl-section-py)), var(--bl-section-py));
	}

	/* Header ausgenommen: dort hängt die Position des Off-Canvas-Menüs am
	   Container-Padding. Die 32px im Header sind auf 375px unkritisch. */
	.fusion-body .fusion-tb-header .fusion-fullwidth {
		--awb-padding-left-small: var(--awb-padding-left-medium, var(--awb-padding-left));
		--awb-padding-right-small: var(--awb-padding-right-medium, var(--awb-padding-right));
		--awb-padding-top-small: var(--awb-padding-top-medium, var(--awb-padding-top));
		--awb-padding-bottom-small: var(--awb-padding-bottom-medium, var(--awb-padding-bottom));
	}

	/* Innenabstände von Karten/Spalten kappen */
	.fusion-body .fusion-column-wrapper {
		--awb-padding-left-small: min(var(--awb-padding-left, 24px), 24px);
		--awb-padding-right-small: min(var(--awb-padding-right, 24px), 24px);
	}
}


/* ==========================================================================
   4. BUTTONS & TOUCH-TARGETS <= 1024px
   ========================================================================== */

@media only screen and (max-width: 1024px) {

	.fusion-body .fusion-button,
	.fusion-body .fusion-button.button-large,
	.fusion-body .fusion-button.button-xlarge {
		font-size: clamp(1rem, 14.4px + 0.62vw, 1.25rem);
		line-height: 1.4;
		min-height: var(--bl-tap);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		max-width: 100%;
		white-space: normal; /* langer Button-Text darf umbrechen */
	}

	.fusion-body .fusion-button.button-default-size,
	.fusion-body .fusion-button.fusion-button-default-size {
		padding: 14px 24px;
	}

	.fusion-body .fusion-button.button-xlarge {
		padding: 16px 28px;
	}

	/* Menüzeilen als volle Trefferfläche */
	.fusion-body .awb-menu__main-a,
	.fusion-body .awb-menu__sub-a {
		min-height: var(--bl-tap);
		display: flex;
		align-items: center;
	}

	/* Burger-Button */
	.fusion-body .awb-menu__m-toggle {
		min-width: 44px;
		min-height: 44px;
	}
}

@media only screen and (max-width: 640px) {

	/* Slider-Punkte: optisch klein, Trefferfläche unsichtbar auf 44px */
	.fusion-body .bl-slider__dot {
		position: relative;
	}

	.fusion-body .bl-slider__dot::after {
		content: "";
		position: absolute;
		inset: -16px;
	}

	.fusion-body .bl-slider__dots {
		gap: 12px;
	}

	/* OPTIONAL – CTA-Buttons über die volle Breite.
	   Passt zum Design nur an ausgewählten Stellen, daher deaktiviert.
	.fusion-body .fusion-button.fusion-button-span-yes {
		width: 100%;
	}
	*/
}


/* ==========================================================================
   5. FORMULARE (Quform) <= 782px
   Die Formulare sind bereits mobiltauglich (Feldhöhe 56px, 18px Schrift).
   Diese Regel ist die Absicherung: unter 16px zoomt iOS Safari beim Fokus
   automatisch in die Seite hinein.
   ========================================================================== */

@media only screen and (max-width: 782px) {

	.fusion-body .quform-input input:not([type="checkbox"]):not([type="radio"]),
	.fusion-body .quform-input select,
	.fusion-body .quform-input textarea,
	.fusion-body input[type="text"],
	.fusion-body input[type="email"],
	.fusion-body input[type="tel"],
	.fusion-body input[type="search"],
	.fusion-body select,
	.fusion-body textarea {
		font-size: max(16px, 1em); /* NIE unter 16px (iOS-Auto-Zoom) */
		max-width: 100%;
	}

	.fusion-body .quform-button-submit button,
	.fusion-body .quform-button-back button {
		min-height: var(--bl-tap);
	}
}


/* ==========================================================================
   6. HEADER / MOBILE MENÜ <= 1024px
   ========================================================================== */

@media only screen and (max-width: 1024px) {

	/* Logo verkleinern.
	   WICHTIG: feste height + width:auto, NICHT max-height + width:auto.
	   Das Logo ist ein SVG und trägt die HTML-Attribute width="180"
	   height="40". 'width:auto' setzt diese Angabe außer Kraft; da die
	   Logo-Spalte im Flex-Header selbst auf 'auto' steht, hat das Bild
	   dann keine definierte Breite mehr, an der sich max-width:100%
	   orientieren könnte – Ergebnis: 0 x 0 Pixel, das Logo verschwindet.
	   Mit fester Höhe rechnet der Browser die Breite aus dem
	   Seitenverhältnis (36px -> 162px) und alles ist eindeutig. */
	.fusion-body .fusion-tb-header .fusion-imageframe img,
	.fusion-body .fusion-tb-header .fusion-logo img {
		height: 36px;
		width: auto;
		max-width: 100%;
	}

	/* Collapse-Menü bekommt eigene, kleinere Werte
	   (stand vorher auf den Desktop-Größen des Typography Sets) */
	.fusion-body .awb-menu.collapse-enabled {
		--awb-mobile-font-size: var(--bl-typo4);
		--awb-mobile-line-height: 1.5;
	}
}


/* Slider (Benefits + Magazin) & Magazin-Cards <= 1024px */
@media only screen and (max-width: 1024px) {

	/* Letzte Karte nicht mehr schmaler machen – Endabstand über Platzhalter */
	.fusion-body .bl-slider__slide:last-child {
		padding-right: 0 !important;
	}
	.fusion-body .bl-slider__track::after {
		content: "";
		flex: 0 0 1px;
	}

	/* Magazin-Slider: mehr Luft zwischen den Karten */
	.fusion-body .bl-postslider .bl-slider__track {
		gap: 16px;
	}

	/* Anreißer auf 4 Zeilen kürzen + Abstand zum Button */
	.fusion-body .bl-slider .post-card .fusion-text {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 16px;
	}
	.fusion-body .bl-slider .post-card .fusion-text p {
		margin: 0;
	}
}

/* Post-Cards: Text kürzen, Button unten bündig */
.fusion-body .bl-postslider .post-card .fusion-text{
  display:-webkit-box; -webkit-line-clamp:4; line-clamp:4;
  -webkit-box-orient:vertical; overflow:hidden; margin-bottom:24px;
}
.fusion-body .bl-postslider .post-card .fusion-text p{ margin:0; }
.fusion-body .bl-postslider .post-card .fusion-builder-row-inner{ flex:1 1 auto; }
.fusion-body .bl-postslider .post-card .fusion_builder_column_inner > .fusion-column-wrapper{ height:100%; }
.fusion-body .bl-postslider .post-card .fusion-column-wrapper > div:has(> .fusion-button){ margin-top:auto; }
.fusion-body .bl-postslider .post-card h3{ hyphens:auto; -webkit-hyphens:auto; }

/* Slider-Punkte: größere Klickfläche */
.fusion-body .bl-slider__dot{ position:relative; }
.fusion-body .bl-slider__dot::before{ content:""; position:absolute; inset:-12px; }


/* ==========================================================================
   7. FEINSCHLIFF <= 640px
   ========================================================================== */

@media only screen and (max-width: 640px) {

	/* Zusatztexte wie "(m/w/d)" oder Rechtshinweise nicht unter 15px */
	.fusion-body small,
	.fusion-body .fusion-meta-info {
		font-size: 0.9375rem; /* 15px */
		line-height: 1.5;
	}
}


/* ==========================================================================
   8. BEWEGUNG / BARRIEREFREIHEIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

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


/* ==========================================================================
   9. OFF CANVAS – Panel <= 640px
   Betrifft beide Elemente: awb-oc-454 „Werde Teil unseres Teams" (B2C,
   Trigger .sticky-btn) und awb-oc-649 „Jetzt Personal anfragen" (B2B).
   Befund: Close-Icon 48px mit je 4rem (64px) Abstand – auf 375px landet
   das X mitten in der Überschrift. Seitenrand 2rem, Radius oben 4rem.
   ========================================================================== */

@media only screen and (max-width: 640px) {

	.fusion-body .awb-off-canvas-wrap {
		--awb-close-button-margin-top: 16px !important;
		--awb-close-button-margin-right: 16px !important;
		--awb-close-icon-size: 32px !important;

		/* Eckenradius oben: 4rem -> 24px */
		--awb-border-top-left-radius: 24px !important;
		--awb-border-top-right-radius: 24px !important;
	}

	.fusion-body .off-canvas-close {
		min-width: 44px;
		min-height: 44px;
		z-index: 10;
	}

	/* Seitlicher Innenabstand auf Gutter-Maß, unten kompakter.
	   Oben bleiben 4rem – darunter sitzt der Close-Button. */
	.fusion-body .awb-off-canvas .fusion-fullwidth {
		--awb-padding-right-small: var(--bl-gutter, 20px) !important;
		--awb-padding-left-small: var(--bl-gutter, 20px) !important;
		--awb-padding-bottom-small: 24px !important;
	}

	/* dvh statt vh: rechnet die ein-/ausfahrende Browserleiste mit */
	.fusion-body .awb-off-canvas-inner,
	.fusion-body .off-canvas-content {
		max-height: 100dvh;
	}

	.fusion-body .off-canvas-content {
		overscroll-behavior: contain; /* Seite dahinter scrollt nicht mit */
		-webkit-overflow-scrolling: touch;
		padding-bottom: env(safe-area-inset-bottom); /* Home-Indicator */
	}
}


/* ==========================================================================
   10. OFF CANVAS – Kacheln/Buttons kompakter <= 640px
   Befund: Innenabstand 1,5rem rundum + Label 24px -> 86px Kachelhöhe.
   Neu: 14px/16px + Label 20px -> 58px (einzeilig) bzw. 83px (mit
   Beschreibungszeile). Trefferfläche bleibt über 48px.
   Greift nur auf die verlinkten Kacheln, nicht auf den Textblock oben.
   ========================================================================== */

@media only screen and (max-width: 640px) {

	.fusion-body .awb-off-canvas .fusion-column-wrapper.fusion-flex-justify-content-center {
		--awb-padding-top-small: 14px !important;
		--awb-padding-bottom-small: 14px !important;
		--awb-padding-left-small: 16px !important;
		--awb-padding-right-small: 16px !important;
	}

	.fusion-body .awb-off-canvas .fusion-column-wrapper.fusion-flex-justify-content-center .fusion-title-heading {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}

	.fusion-body .awb-off-canvas .fusion-column-wrapper.fusion-flex-justify-content-center .fusion-title {
		--awb-margin-top-small: 2px !important;
		--awb-margin-bottom-small: 2px !important;
	}

	/* Abstand zwischen Einleitungstext und erster Kachel: 32px -> 20px */
	.fusion-body .awb-off-canvas .fusion-builder-row > .fusion-layout-column:first-child {
		--awb-margin-bottom-small: 20px !important;
	}

	/* OPTIONAL – falls die Kacheln im B2B-Panel ebenfalls einzeilig
	   (58px statt 83px) werden sollen: Beschreibungszeile mobil ausblenden.
	   Im B2C-Panel ist das bereits im Builder so eingestellt.
	.fusion-body .awb-off-canvas .fusion-column-wrapper.fusion-flex-justify-content-center .fusion-text {
		display: none;
	}
	*/
}


/* ==========================================================================
   11. HERO <= 640px – Bildstreifen statt Vollflächen-Bild
   Befund: Hero-Sektion 75vh (609px), davon belegt die weiße Karte ~380px.
   Übrig bleiben gut 220px Bild – und zwar der falsche Ausschnitt:
   - Startseite (Slider): object-position 89% 48% (Fokuspunkt aus dem
     Builder). Im schmalen Hochformat zeigt das nur den rechten Bildrand,
     die Personen liegen außerhalb. Dazu 2,4-fache Hochskalierung.
   - Unterseiten (statisches Hintergrundbild): background cover über die
     volle Sektionshöhe -> starker Zoom, Köpfe werden angeschnitten.

   Neu für beide Varianten: definierter Bildstreifen oben
   (--bl-hero-band, 220–320px je nach Gerätehöhe), die Textkarte schiebt
   sich 32px darüber. Dadurch mittiger Ausschnitt und deutlich weniger Zoom.

   Erkennung des Heros über --awb-min-height:75vh (auf allen Seiten genau
   eine Sektion, immer der Hero) IN KOMBINATION mit einem vorhandenen Bild.
   Heros ohne Bild (/magazin/, /faqs/, /mitarbeiterbereich/) bleiben
   unverändert – sonst entstünde dort ein leerer Farbstreifen.

   A und B stehen bewusst als getrennte Blöcke: Browser ohne :has()
   verwerfen nur Block B, Block A greift weiter.
   ========================================================================== */

/* --- A: Hero mit statischem Hintergrundbild (Unterseiten) -------------- */

@media only screen and (max-width: 640px) {

	.fusion-body .fusion-fullwidth[style*="--awb-min-height:75vh"][style*="--awb-background-image"] {
		min-height: 0 !important;
		padding-top: var(--bl-hero-band) !important;
	}

	/* Bildstreifen. background-image:inherit übernimmt das Bild der
	   Sektion, background-size:cover rechnet den Ausschnitt neu – deshalb
	   deutlich weniger Zoom als beim Vollflächen-Hintergrund. */
	.fusion-body .fusion-fullwidth[style*="--awb-min-height:75vh"][style*="--awb-background-image"]::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--bl-hero-band);
		background-image: inherit;
		background-size: cover;
		background-position: 50% 35%;
		background-repeat: no-repeat;
	}

	.fusion-body .fusion-fullwidth[style*="--awb-min-height:75vh"][style*="--awb-background-image"] > .fusion-builder-row {
		margin-top: calc(var(--bl-hero-overlap) * -1) !important;
		position: relative;
		z-index: 7;
	}

	.fusion-body .fusion-fullwidth[style*="--awb-min-height:75vh"][style*="--awb-background-image"] .fusion-column-wrapper {
		--awb-padding-top-small: 32px !important;
		--awb-padding-bottom-small: 32px !important;
	}
}

/* --- B: Hero mit Avada-Hintergrund-Slider (Startseite) ----------------- */

@media only screen and (max-width: 640px) {

	.fusion-body .fusion-fullwidth[style*="--awb-min-height:75vh"]:has(> .awb-background-slider) {
		min-height: 0 !important;
		padding-top: var(--bl-hero-band) !important;
	}

	.fusion-body .fusion-fullwidth > .awb-background-slider {
		height: var(--bl-hero-band) !important;
	}

	/* Bildfokus: im Hochformat mittig statt am rechten Rand */
	.fusion-body .awb-background-slider img {
		object-position: 50% 42% !important;
	}

	.fusion-body .fusion-fullwidth[style*="--awb-min-height:75vh"]:has(> .awb-background-slider) > .fusion-builder-row {
		margin-top: calc(var(--bl-hero-overlap) * -1) !important;
		position: relative;
		z-index: 7;
	}

	.fusion-body .fusion-fullwidth[style*="--awb-min-height:75vh"]:has(> .awb-background-slider) .fusion-column-wrapper {
		--awb-padding-top-small: 32px !important;
		--awb-padding-bottom-small: 32px !important;
	}
}


/* ==========================================================================
   12. ECKENRADIEN <= 640px
   Befund: Das Design arbeitet mit sehr großen Radien – Sektionen 4rem
   (64px), Karten 4rem/3rem/2rem. Auf einem 1664px-Container wirkt das
   elegant; auf 375px frisst ein 64px-Radius 128px der 335px Kartenbreite,
   die Ecken sehen aus wie abgeschnitten.

   Umrechnung (rund 50–60 %):  4rem -> 32px | 3rem -> 24px | 2rem -> 20px
                               1,5rem -> 16px | 1rem -> 12px | 0 bleibt 0

   Sektionen laufen über min(): nur zu große Werte werden gekappt, welche
   Ecken überhaupt gerundet sind, bleibt erhalten – gilt auch für künftige
   Sektionen. Spalten/Karten haben in Avada nur eine Shorthand-Variable,
   deshalb sind die vorhandenen Muster einzeln aufgeführt. Ein neues
   Muster fällt nicht auf die Nase, es behält schlicht den Desktop-Wert.

   Buttons bleiben unverändert (Pill-Form, 64px auf ~51px Höhe).
   ========================================================================== */

@media only screen and (max-width: 640px) {

	/* --- Sektionen: jede Ecke einzeln auf 32px gedeckelt ---------------- */
	.fusion-body .fusion-fullwidth {
		border-top-left-radius: min(var(--awb-border-radius-top-left, 0px), 32px) !important;
		border-top-right-radius: min(var(--awb-border-radius-top-right, 0px), 32px) !important;
		border-bottom-right-radius: min(var(--awb-border-radius-bottom-right, 0px), 32px) !important;
		border-bottom-left-radius: min(var(--awb-border-radius-bottom-left, 0px), 32px) !important;
	}

	/* --- Spalten / Karten: 4rem-Muster -> 32px -------------------------- */
	.fusion-body .fusion-layout-column[style*="--awb-border-radius:4rem 4rem 4rem 4rem"] > .fusion-column-wrapper {
		border-radius: 32px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:4rem 4rem 0px 4rem"] > .fusion-column-wrapper {
		border-radius: 32px 32px 0 32px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:4rem 0px 4rem 4rem"] > .fusion-column-wrapper {
		border-radius: 32px 0 32px 32px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:0px 0px 4rem 4rem"] > .fusion-column-wrapper {
		border-radius: 0 0 32px 32px !important;
	}

	/* --- Spalten / Karten: 3rem-Muster -> 24px -------------------------- */
	.fusion-body .fusion-layout-column[style*="--awb-border-radius:3rem 3rem 3rem 3rem"] > .fusion-column-wrapper {
		border-radius: 24px !important;
	}

	/* Hero-Karte: die betonte vierte Ecke bleibt proportional größer */
	.fusion-body .fusion-layout-column[style*="--awb-border-radius:3rem 3rem 3rem 4rem"] > .fusion-column-wrapper {
		border-radius: 24px 24px 24px 32px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:3rem 3rem 0px 3rem"] > .fusion-column-wrapper {
		border-radius: 24px 24px 0 24px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:3rem 0px 3rem 0px"] > .fusion-column-wrapper {
		border-radius: 24px 0 24px 0 !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:3rem 0px 3rem 3rem"] > .fusion-column-wrapper {
		border-radius: 24px 0 24px 24px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:3rem 3rem 3rem 0px"] > .fusion-column-wrapper {
		border-radius: 24px 24px 24px 0 !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:0px 3rem 3rem 3rem"] > .fusion-column-wrapper {
		border-radius: 0 24px 24px 24px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:0px 3rem 0px 3rem"] > .fusion-column-wrapper {
		border-radius: 0 24px 0 24px !important;
	}

	/* --- Spalten / Karten: 2rem und kleiner ----------------------------- */
	.fusion-body .fusion-layout-column[style*="--awb-border-radius:2rem 2rem 2rem 2rem"] > .fusion-column-wrapper {
		border-radius: 20px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:0px 0px 2rem 2rem"] > .fusion-column-wrapper {
		border-radius: 0 0 20px 20px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:1.5rem"] > .fusion-column-wrapper {
		border-radius: 16px !important;
	}

	.fusion-body .fusion-layout-column[style*="--awb-border-radius:1rem"] > .fusion-column-wrapper {
		border-radius: 12px !important;
	}

	/* --- Akkordeon (FAQs): 2rem -> 20px --------------------------------
	   Avada setzt hier mit !important, daher die höhere Spezifität. */
	.fusion-body .fusion-accordian .fusion-panel.fusion-toggle-boxed-mode,
	.fusion-body .fusion-faqs-wrapper .fusion-accordian .fusion-panel {
		border-radius: 20px !important;
	}

	/* --- Ausnahme: Off-Canvas-Kacheln behalten ihre Pillenform ---------- */
	.fusion-body .awb-off-canvas .fusion-column-wrapper.fusion-flex-justify-content-center {
		border-radius: 32px !important;
	}
}


/* ==========================================================================
   ERGEBNIS bei 375 x 812
                              vorher        nachher
   Fließtext                  24 / 36 px    17,5 / 27 px
   Zeichen pro Zeile          26            37
   H1 / H2                    35 px         31 px
   H3 / Kartentitel           28 / 24 px    24 px
   Buttons                    20 px, 66 hoch  16,7 px, 51 hoch
   Menü-Links                 24 px, 30 hoch  16,5 px, 48 hoch
   Seitenrand                 32 px         20 px
   Off-Canvas-Kachel B2C      86 px         58 px
   Off-Canvas-Kachel B2B      86 px         83 px
   Off-Canvas-Panel B2C       559 px        462 px
   Hero-Bildstreifen          ~226 px       ~300 px, mittiger Ausschnitt
   Hero-Bild Skalierung       2,4-fach      1,17-fach
   (Hero-Werte gelten für Startseite und alle Unterseiten-Heros mit Bild;
    Heros ohne Bild bleiben unverändert)
   Radius Sektionen           64 px         32 px
   Radius Karten              64/48/32 px   32/24/20 px
   Radius Akkordeon           32 px         20 px


   NICHT PER CSS LÖSBAR – bitte separat erledigen

   1) Viewport-Meta-Tag
      aktuell: width=device-width, initial-scale=1, maximum-scale=1
      'maximum-scale=1' verbietet Pinch-Zoom und verstößt gegen
      WCAG 2.1 (1.4.4 Resize Text, Level AA).
      Empfohlen: width=device-width, initial-scale=1, viewport-fit=cover

   2) Die beiden Off-Canvas-Panels sind unterschiedlich konfiguriert: im
      B2C-Panel stehen die Erklärtexte unter den Labels auf
      fusion-no-small-visibility (mobil ausgeblendet), im B2B-Panel nicht.
      Entweder beide zeigen oder beide ausblenden – siehe OPTIONAL oben.

   3) Die Off-Canvas-Kachel „Anfrageformular" verlinkt auf
      /einrichtung/anfrage/ (Einzahl). Die Seite liegt unter
      /einrichtungen/anfrage/ und wird nur per Redirect erreicht.

   4) Der CTA „Jetzt direkt bewerben" trägt die Klasse .sticky-btn, zu der
      es kein CSS gibt (er öffnet das Off Canvas awb-oc-454). Entweder
      Sticky-Verhalten ausbauen oder die Klasse entfernen.

   5) Hero-Bildschärfe: die Slider-Bilder liefern sizes="100vw". Der
      Browser lädt deshalb die 768px-Variante, gebraucht werden im
      Hochformat rund 900px. Mit dem neuen Bildstreifen ist das nur noch
      eine 1,17-fache Skalierung (vorher 2,4-fach) und kaum sichtbar.
      Wirklich scharf wird es erst mit eigenen Hochformat-Zuschnitten
      (4:5) für Mobil – als zweite Hero-Sektion mit
      fusion-no-large-visibility / fusion-no-small-visibility.

   6) Der Bildfokus 89% / 48% der Hero-Slider-Bilder stammt aus dem
      Builder. Diese Datei überschreibt ihn nur unter 640px. Sinnvoller
      wäre, ihn direkt im Slider-Element auf 50% zu setzen – dann wird
      Regel 11 an dieser Stelle überflüssig.


   EINBAU ALS EIGENES STYLESHEET (functions.php des Child-Themes):

   add_action( 'wp_enqueue_scripts', function () {
       wp_enqueue_style(
           'baloop-mobile',
           get_stylesheet_directory_uri() . '/css/baloop-mobile.css',
           array( 'fusion-dynamic-css' ),
           '1.6.0'
       );
   }, 999 );
   ========================================================================== */