/* sw-rollout-fixes.css — gebuendelte Korrekturen fuer den 80er-Canvas-Rollout.
 * Wird als LETZTES geladen -> gewinnt bei Spezifitaets-Gleichstand. Eigene Datei,
 * damit es nicht mit sw-layout.css (Parallel-Session) kollidiert.
 */

/* Mobile-Menue auch auf Seiten mit <nav>-Navbar (kein <header>) sichtbar machen.
 * sw-mobilenav.css zeigte das Menue nur via header.sw-menu-open; 9 Portale haben
 * aber eine <nav>-Navbar -> Burger da, Menue oeffnete nicht. Klassenbasiert greift
 * fuer header UND nav. */
@media (max-width: 1023px) {
	.sw-menu-open .sw-mobile-menu {
		display: block;
	}
	.sw-menu-open .sw-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.sw-menu-open .sw-burger span:nth-child(2) {
		opacity: 0;
	}
	.sw-menu-open .sw-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* Kontrast in dunklen bg-primary-Sektionen ("Klare Abgrenzung": Listen "Was wir
 * nicht sind / sind"). Die Items verloren ihre text-primary-foreground-Farbe und
 * wurden dunkelgrau auf dunkelblau (gemessen Kontrast 1.10 = unlesbar). bg-primary
 * ist im Lovable-Template durchgaengig die dunkle Markenfarbe -> Text hell erzwingen
 * (Original-Intention). [class~="bg-primary"] = EXAKT die Klasse (nicht bg-primary/10
 * o.ae.); Buttons/Badges mit eigenem bg bleiben unberuehrt. */
.sw-canvas-body [class~="bg-primary"] li:not([class*="bg-"]),
.sw-canvas-body [class~="bg-primary"] li:not([class*="bg-"]) span {
	color: rgba(255, 255, 255, 0.85);
}

/* Anker-Sprung-Absicherung bei fixer/sticky Navbar: ohne scroll-padding landet das
 * Ziel beim Menue-Klick am Viewport-Top = unter der Navbar. ~90px Freiraum lassen.
 * Harmlos auf Seiten, deren Sektionen ohnehin genug Eigen-Abstand haben. */
html {
	scroll-padding-top: 90px;
}

/* Hero-Positionierung + Lesbarkeit. Die Lovable-Hero-Textbox ist absolute (top:50%) im
 * 100vh-Hero. WordPress' cover__inner-container kollabiert bei rein-absoluten Kindern auf
 * Hoehe 0 -> die Box rutscht hoch hinter die Navbar. Loesung: das Cover als Flexbox vertikal
 * zentrieren (haelt die Box mittig, egal ob absolut oder im normalen Fluss wie cybersecurity)
 * UND dem inner-container position:relative + z-index:2 geben, damit der (weisse) Hero-Text
 * UEBER dem Cover-Overlay liegt und lesbar bleibt. (Ein frueherer Versuch mit position:static
 * verlor den z-index -> das dunkle Overlay deckte den Text ab, er wurde unlesbar.) */
.sw-canvas-body .wp-block-cover:not(.absolute) {
	display: flex;
	align-items: center;
}
.sw-canvas-body .wp-block-cover__inner-container {
	position: relative !important;
	z-index: 2 !important;
	width: 100%;
}

/* Gradient-Text (.text-gradient = background-clip:text + text-fill-color:transparent).
 * Nach der Head-Isolation fehlt der Gradient-Background -> der Text bleibt transparent
 * und ist unsichtbar (betrifft nur byser, 11 Stellen; sonst nirgends verwendet).
 * Fallback: normale (geerbte) Textfarbe einblenden, damit der Text lesbar ist. */
.sw-canvas-body .text-gradient {
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
	background-clip: initial !important;
}

/* Icon-Listen (Haekchen/Kreuz + Text). Lovable hatte je Punkt ein Flex-Item
 * (Icon links, Text daneben). Der Konverter macht daraus ein <li> mit <svg>+<span>;
 * Tailwind setzt svg{display:block} -> das Icon steht UEBER dem Text statt daneben.
 * Nur <li> mit direktem <svg>-Kind als Flexbox auslegen (normale Textlisten unberuehrt). */
.sw-canvas-body .wp-block-list li:has(svg) {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}
.sw-canvas-body .wp-block-list li:has(svg) > svg {
	flex: none;
}

/* Vollbild-Hero ohne core/cover: manche Heroes sind eine Gruppe (#hero) mit einem
 * absolut gefuellten Hintergrundbild als <figure class="wp-block-image absolute inset-0
 * h-full w-full object-cover">. Die Tailwind-Fuellklassen sitzen aber auf dem <figure>,
 * NICHT auf dem inneren <img> -> das Bild folgt seinem eigenen Seitenverhaeltnis (Hoehe
 * 949-1125px statt 900px) und ragt unten ueber den Hero hinaus / wirkt verzerrt+versetzt
 * (object-fit:fill greift mangels fixer Hoehe nicht). Das Bild den Figure-Rahmen fuellen
 * lassen. Eng gescopt auf figure MIT absolute UND object-cover -> normale Inhaltsbilder
 * (w-full h-auto) bleiben unberuehrt. Betrifft 13 Portale (u.a. wasser/tourismus/messe). */
.sw-canvas-body figure.wp-block-image.absolute.object-cover > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Vollbild-Hero-Bilder als ROHES <img class="... object-cover"> (aus dem Multi-Route-Crawl,
 * NICHT als wp:image-Figure): tragen ein width="1920"-Attribut. Wenn die Tailwind-Klasse w-full
 * nicht greift, ragt das Bild ueber den Viewport (horizontaler Overflow; athenaris/b2b2c/logistik).
 * Auf die Containerbreite begrenzen. Standard-Responsive-Regel fuer ALLE Bilder (verhindert
 * horizontalen Overflow durch width="1920"-Attribute aus dem Crawl; athenaris/b2b2c/logistik
 * hatten rohe <img> teils OHNE Klasse). object-cover-Hero-Bilder fuellen ihren Rahmen (Regel
 * danach ueberschreibt height:auto). */
.sw-canvas-body img {
	max-width: 100%;
	height: auto;
}
.sw-canvas-body img.object-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ueberlange deutsche Komposita (z.B. "Lieferkettensorgfaltspflichtengesetz",
 * "Textilkennzeichnungsverordnung") brechen nicht und ragten ueber schmale Karten/
 * Ueberschriften hinaus (textilpartnerportal: H3 lief bis 88px ueber die Kartenkante).
 * Ueberlange Woerter umbrechen lassen. NUR innerhalb von Karten ([class*="card"]) — NICHT auf
 * allen .wp-block-heading, sonst brechen auch Hero-Titel mitten im Wort (z.B. influencer:
 * "Scheinselbstaendigkei-t"). In Karten ist der Wortumbruch gewollt (schmale Spalten). */
.sw-canvas-body [class*="card"],
.sw-canvas-body [class*="card"] .wp-block-heading,
.sw-canvas-body [class*="card"] p {
	overflow-wrap: break-word;
}

/* influencer: Hero-Titel zu gross + Inhalt hinter der Navbar. Der Inhaltsblock (.sws-6) ist
 * position:absolute mit top:50%, sein Bezug (cover__inner-container) kollabiert durch die
 * Cover-Flex-Regel auf Hoehe 0 -> top:50% rechnet gegen 0 -> Inhalt landet bei top=-114 (hinter
 * Navbar). Zudem ist der Titel mit 62px fuer den sehr langen Text zu gross (Inhalt 1271px > Hero
 * 900px). Loesung: inner-container den Hero fuellen + als Flexbox vertikal zentrieren, .sws-6 in
 * den normalen Fluss nehmen (kein absolutes top:50% mehr) und Titel auf 46px (passt zu den
 * Geschwisterseiten ~56px, hier aber sehr langer Titel). */
.sw-page-influencerpartnerportal #hero .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
}
.sw-page-influencerpartnerportal #hero .sws-6 {
	position: static;
	transform: none;
	margin-left: max(80px, 8vw);
}
.sw-page-influencerpartnerportal #hero .ipp-h1 {
	font-size: 46px;
}

/* lebensmittel: Hero-Titel klebte bei 48px am linken Rand, waehrend der restliche Seiteninhalt
 * in einem zentrierten max-w-7xl-Container (1280px, Text ~128px) sitzt -> Titel wirkte "zu weit
 * links". Hero-Inhaltsbox auf denselben zentrierten Container ausrichten; Titel-Spalte schmal
 * halten (sonst zieht der Titel ohne eigene max-width auf die volle Containerbreite). */
.sw-page-lebensmittelpartnerportal #hero > div.relative {
	max-width: 1280px;
	margin-inline: auto;
	width: 100%;
}
.sw-page-lebensmittelpartnerportal #hero h1 {
	max-width: 680px;
}

/* prpartnerportal: Hero-Titel "hinter" dem Bild/Overlay. Das Cover ist hier die reine
 * Hintergrund-Ebene (position:absolute), der Titel-Block (.sws-5) steht als statischer
 * Geschwister-Block daneben. Positionierte Elemente (das absolute Cover) malen ueber
 * statische -> das Cover-Overlay deckt den Titel ab (washed-out). Den Inhaltsblock
 * positionieren und ueber das Cover heben. */
.sw-page-prpartnerportal #hero .sws-5 {
	position: relative;
	z-index: 2;
}

/* byser: Kontaktformular war zerquetscht (Felder ~26px schmal). Ursache: die Kontakt-Sektion
 * ist ein CSS-Grid; der Info-Block hat col-span-5, das Formular (.frm_forms, vom Formidable-
 * Shortcode erzeugt) bekam aber grid-column:auto -> nur EINE 41px-Spalte. Form in die restlichen
 * Spalten legen (ab Spalte 6 bis Ende). */
.sw-page-byser .frm_forms {
	grid-column: 6 / -1 !important;
}
/* byser ist dunkel -> die global dunkel erzwungenen Labels (sw-forms.css, fuer HELLE Formulare,
 * auch in der Theme-Kopie) sind unsichtbar. Hoehere Spezifitaet als die Theme-Kopie
 * (.sw-canvas-body .frm_forms label = 0,3,0) -> hier 0,4,0 + !important. Eingabefelder bleiben weiss. */
.sw-canvas-body .sw-page-byser .frm_forms label,
.sw-canvas-body .sw-page-byser .frm_forms .frm_primary_label,
.sw-canvas-body .sw-page-byser .frm_forms legend {
	color: rgba(255, 255, 255, 0.92) !important;
}
.sw-canvas-body .sw-page-byser .frm_forms .frm_required {
	color: #f87171 !important;
}