/* =========================================================================
   Wahl Child – project styles (1:1-Nachbau der Contao-Site)
   ========================================================================= */

:root {
	--wahl-teal: #02afb5;
	--wahl-teal-bar: #04aab8;
	--wahl-blue: #0069b4;
	--wahl-text: #555555;
}

h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: none; }
/* In Titeln: <em>-Teil regulär statt fett anzeigen (z.B. "Glas- und Metallbau nach Mass<br><em>in der Nordwestschweiz</em>") */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.wp-block-heading em, .wahl-cover__title em { font-weight: 400 !important; font-style: normal; }

/* --- Hero ---------------------------------------------------------------- */
.wahl-hero .wahl-eyebrow {
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	font-size: 0.95rem;
	margin-block-end: 0.5rem;
}
.wahl-hero .wp-block-cover__inner-container { width: min(100%, 1100px); }
.wahl-hero__sub {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem);
	font-weight: 500;
}

/* --- Intro (Hintergrundbild bg-blue, weißer Text) ----------------------- */
.wahl-intro { color: #fff; }
.wahl-intro .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--content-size, 1170px); }
.wahl-intro :is(h1, h2, h3, p) { color: #fff; }
.wahl-intro h2 { margin-block-end: 1.25rem; }

/* --- Formulare (Contact Form 7) ----------------------------------------- */
.wpcf7 label { display: block; font-weight: 600; margin-block-end: 1rem; }
.wpcf7 input:not([type="submit"]),
.wpcf7 select,
.wpcf7 textarea {
	width: 100%; padding: 0.7rem 0.9rem;
	box-sizing: border-box; max-width: 100%; transform: none;
	border: 1px solid var(--wp--preset--color--border, #d8dde3);
	border-radius: var(--wp--custom--shape--radius, 0.25rem);
	background: #fff; font: inherit; margin-block-start: 0.35rem;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
	outline: 2px solid var(--wahl-blue) !important; outline-offset: -2px !important;
	border-color: var(--wahl-blue); transform: none !important; box-shadow: none !important;
}
/* iOS und andere Touch-Browser zoomen Formularfelder mit Schrift unter 16px
   beim Fokussieren automatisch. Das lässt das Feld scheinbar wachsen und
   schneidet die rechte Formularspalte ab. */
@media (hover: none) and (pointer: coarse) {
	.wpcf7 input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
	.wpcf7 select,
	.wpcf7 textarea { font-size: 16px !important; }
}
.wpcf7 textarea { min-height: 160px; }
.wpcf7 input[type="submit"] {
	background: var(--wahl-blue); color: #fff; border: 0; font-weight: 650;
	padding: 0.85rem 1.75rem; border-radius: var(--wp--custom--button--radius, 0.25rem); cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wahl-teal); }

/* --- Produkt-Unterseiten (metallbau, pergola, schraubfundament, wintergarten)
   Häkchenlisten wie das Live-Original (ce_list hasIcon): FontAwesome-Check
   17px #555 mit 17px Textabstand, li 17/25.5 + 20px Abstand; die zwei
   Intro-Listen stehen wie live nebeneinander (col_6+col_6, 30px Gutter). */
.wahl-checklist { list-style: none; padding-left: 0; margin: 0 0 15px; }
.wp-block-column[style*="55%"] > .wahl-checklist { float: left; width: calc(50% - 15px); margin-top: 34px; }
.wp-block-column[style*="55%"] > .wahl-checklist + .wahl-checklist { margin-left: 30px; }
.wp-block-column[style*="55%"] > .wp-block-buttons { clear: both; padding-top: 10px; }
.wahl-checklist li { display: flex; align-items: flex-start; font-size: 17px; line-height: 25.5px; margin-bottom: 20px; padding-left: 0; }
/* Häkchen-Glyphe ist live BLAU (i::before rgb(45,106,171)) — das i-Element selbst ist grau */
.wahl-checklist li::before { content: "\f00c"; font-family: FontAwesome; font-size: 17px; line-height: 25.5px; color: #2d6aab; margin-right: 17px; flex: 0 0 auto; }

/* Dienstleistungs-Karten: kompakte Listen wie live (li mb0/lh27, Häkchen 16px,
   Titel→Liste 10px, GIF-Icons 80px mit 28px Abstand zum Titel) */
.wp-block-column:not([style*="55%"]) > .wahl-checklist li { margin-bottom: 0; line-height: 27px; }
.wp-block-column:not([style*="55%"]) > .wahl-checklist li::before { font-size: 16px; line-height: 27px; margin-right: 14px; }
.wp-block-column > h4:has(+ .wahl-checklist) { margin-top: 0; margin-bottom: 10px; }
.wahl-service-icon { margin-bottom: 28px; }
.wahl-service-icon img { display: block; width: 80px !important; height: 80px !important; }

/* Intro-Typo der Produktseiten wie live: Titel 34/42, Lauftext 20/27;
   Sektionstitel («Unsere Dienstleistungen» etc.) live mb 60, Intro-Titel mb 20 */
h2.is-style-bm-title-m { font-size: 34px; line-height: 42px; margin-bottom: 60px !important; }
.wp-block-column[style*="55%"] > h2.is-style-bm-title-m { margin-bottom: 20px !important; }
.wp-block-column[style*="55%"] > p { font-size: 20px; line-height: 27px; }

.wahl-service-icon img { width: 64px; height: 64px; object-fit: contain; }

.wahl-cardimg img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.wahl-introgal { margin: 0; }

/* CTA «Interesse geweckt?» — Live-Werte (ce_wrap bg-accent pd-m border-radius-10) */
.wahl-cta {
	background: #2d6aab;
	border-radius: 10px;
	color: #fff;
	padding: 60px;
	margin-block: var(--wp--preset--spacing--60, 3rem);
}
.wahl-cta :is(h1, h2, h3, p) { color: #fff; }
/* !important: Parent-Blockstil (bm-title-m) und Button-Token-CSS liegen
   spezifischer/später — Live-Werte müssen gewinnen. */
.wahl-cta h2 { font-size: 55px !important; line-height: 71.5px !important; margin: 0 0 25px !important; }
.wahl-cta p { font-size: 17px; margin-bottom: 15px; }
.wahl-cta .wp-block-buttons { margin-top: 60px; margin-bottom: 23px; gap: 9px; }
.wahl-cta .wp-block-button.wahl-cta-btn .wp-block-button__link {
	background: #fff !important; color: #2d6aab !important; border: 2px solid #fff !important; border-radius: 100px;
	padding: 15px 20px !important; font-size: 15px !important; font-weight: 700; line-height: 1.8 !important;
}
.wahl-cta .wp-block-button__link[href^="mailto"]::before,
.wahl-cta .wp-block-button__link[href^="tel"]::before {
	font-family: FontAwesome; font-weight: 400; margin-right: 10px;
}
.wahl-cta .wp-block-button__link[href^="mailto"]::before { content: "\f003"; }
.wahl-cta .wp-block-button__link[href^="tel"]::before { content: "\f095"; }
/* CTA Wahl: weiss/blau im Ruhezustand, beim Hover dezent durchscheinend. */
.wahl-cta .wp-block-button .wp-block-button__link,
.wahl-cta .wp-block-button.is-style-outline .wp-block-button__link,
.wahl-pagehero .wp-block-button .wp-block-button__link,
.wahl-pagehero .wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff !important;
	color: var(--wahl-btn-blue, #2d6aab) !important;
	border: 2px solid #fff !important;
	transition: background-color 180ms ease, color 180ms ease;
}
.wahl-cta .wp-block-button .wp-block-button__link:hover,
.wahl-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wahl-pagehero .wp-block-button .wp-block-button__link:hover,
.wahl-pagehero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
}
/* Andere blaue Inhaltsboxen behalten ihren Outline-Button. */
.wahl-bluebox .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
}
.wahl-bluebox .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--wahl-btn-blue) !important;
}

/* Hero der Produktseiten: Inhalt bündig auf Container-Breite (wie Live) */
.wahl-subhero .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--content-size, 1170px); }
.wahl-subhero :is(h1, p) { color: #fff !important; text-align: left; }
.wahl-subhero { margin-bottom: 0 !important; }

/* =====================================================================
   Button-Standard site-weit — exakt nach Live-Messung:
   15px / 700, Padding 15×20, Pill (radius 100px), Höhe ~61px,
   Button-Blau #2d6aab. Ausnahmen: bm-text-Links und CTA-Buttons (klein).
   ===================================================================== */
:root { --wahl-btn-blue: #2d6aab; }

/* Live-Buttons haben durchgehend einen 2px-Rand in Eigenfarbe (masswirksam:
   +4px); Zeilenhöhe 1.8 = 27px wie live, Gesamthöhe 61px. */
.wp-block-button:not(.is-style-bm-text) .wp-block-button__link {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.8 !important;
	padding: 15px 20px !important;
	border-radius: 100px !important;
}
.wp-block-button:not(.is-style-bm-text):not(.is-style-bm-outline):not(.is-style-outline):not(.wahl-hero-btn):not(.wahl-btn-outline-blue):not(.wahl-btn-outline-white):not(.wahl-btn-outline-black) .wp-block-button__link {
	background: var(--wahl-btn-blue) !important;
	color: #fff !important;
	border: 2px solid var(--wahl-btn-blue) !important;
}
/* Natives Button-Format «Outline» (is-style-outline): explizit auf den site-
   weiten gefüllten Pill-Stil gemappt (Parent-Theme liefert sonst einen
   transparenten Rand-Button über --wp--custom--outline--color). Separat von
   der obigen :not()-Kette geführt, damit die Bluebox/CTA-Override unten
   (höhere Selektor-Spezifität) zuverlässig gewinnen kann. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wahl-btn-blue) !important;
	color: #fff !important;
	border: 2px solid var(--wahl-btn-blue) !important;
}
/* Blauer Outline-Pill (z. B. «Produkte» auf /schraubfundament — live 2px-Rand) */
.wahl-btn-outline-blue .wp-block-button__link {
	background: transparent !important;
	color: #2d6aab !important;
	border: 2px solid #2d6aab !important;
}
.wahl-btn-outline-blue .wp-block-button__link:hover { background: #2d6aab !important; color: #fff !important; }
/* Flyer-Link steht unter den gefloateten Häkchenlisten (live 51px Abstand) */
.wahl-flyerlink { clear: both; padding-top: 11px; }
.wahl-flyerlink + .wp-block-buttons { gap: 9px; }
.wpcf7 input[type="submit"] {
	font-size: 15px !important; font-weight: 700 !important;
	padding: 15px 28px !important; border-radius: 100px !important;
	background: var(--wahl-btn-blue) !important;
}

/* Hero-Button: weisser runder Pill mit Pfeil (wie Live) */
.wahl-hero-btn .wp-block-button__link {
	background: #fff !important;
	color: var(--wahl-btn-blue) !important;
	border: 2px solid #fff !important;
	transition: background-color 180ms ease, color 180ms ease;
}
.wahl-hero-btn .wp-block-button__link::before {
	content: "\f063";
	font-family: FontAwesome;
	margin-right: 0.6em;
	font-weight: 400;
}
.wahl-hero-btn .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }

/* CTA-Texte weiss halten (Contao-CSS färbt Headings sonst blau !important) */
.wahl-cta :is(h1, h2, h3, p) { color: #fff !important; }
.wp-block-column h4 { font-size: 1.2rem; overflow-wrap: normal; word-break: keep-all; }
/* Live-Typografie: H4 wie Original (Roboto 900, 22.5px, blau) */
.entry-content h4 { font-size: 1.41rem; font-weight: 900; }
/* Native Views in Contao-Chrome: keine bm-Aussenabstände, Hero klebt am Header */
body.wahl-native main.site-main { padding-block: 0; margin-block: 0; }
body.wahl-native .entry-content > .wahl-subhero:first-child { margin-top: 0 !important; }
.wahl-subhero p { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }

/* Gutenberg-Raster im Template "Contao-Sektionen (volle Breite)":
   Das Template gibt the_content() ohne .entry-content direkt in #main .inside
   aus. Darum greifen die Breitenregeln des Parent-Themes dort nicht.

   Neu eingefügte Standardblöcke folgen der globalen Contentbreite, alignwide
   der erweiterten Breite und alignfull weiterhin der gesamten Seitenbreite.
   Bestehende Contao-Artikel (.mod_article) verwalten ihr Raster weiterhin
   selbst und werden hier bewusst nicht verändert. */
body.wahl-native #main > .inside > :where(
	:not(.alignfull):not(.alignwide):not(.mod_article):not(script):not(style)
) {
	width: min(
		var(--wp--style--global--content-size, 1220px),
		calc(100% - 80px)
	);
	max-width: var(--wp--style--global--content-size, 1220px);
	margin-inline: auto !important;
}

body.wahl-native #main > .inside > .alignwide:not(.mod_article) {
	width: min(
		var(--wp--style--global--wide-size, 1525px),
		calc(100% - 80px)
	);
	max-width: var(--wp--style--global--wide-size, 1525px);
	margin-inline: auto !important;
}

body.wahl-native #main > .inside > .alignfull:not(.mod_article) {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
}

@media (max-width: 767px) {
	body.wahl-native #main > .inside > :where(
		:not(.alignfull):not(.alignwide):not(.mod_article):not(script):not(style)
	),
	body.wahl-native #main > .inside > .alignwide:not(.mod_article) {
		width: calc(100% - 40px);
	}
}
/* Archiv-/Suchkarten: leere Excerpt-Anführungszeichen ausblenden */
.post-card__excerpt:empty, .post-card q:empty, .entry-summary:empty { display: none; }

/* --- Job-Detail (Plenta-Reader, wie Live gemessen) ----------------------- */
.mod_plenta_jobs_basic_offer_reader > h2:first-child,
.mod_plenta_jobs_basic_offer_reader h2 { font-size: 40px !important; font-weight: 900; margin-bottom: 25px; }
.mod_plenta_jobs_basic_offer_reader ul { padding-left: 1.2em; }
.mod_plenta_jobs_basic_offer_reader li { margin-bottom: 4px; }

/* --- Bewerbungsformular (runde Felder, wie Live) -------------------------- */
.wahl-bewerbung { margin-top: 80px; }
.wahl-bewerbung h2, .wahl-bewerbung h3 { font-size: 34px; font-weight: 900; margin-bottom: 25px; }
.wahl-bewerbung .wahl-bewerbung__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-bottom: 22px; }
@media (max-width: 700px) { .wahl-bewerbung .wahl-bewerbung__grid { grid-template-columns: 1fr; } }
.wahl-bewerbung .wpcf7-form-control-wrap { display: block; }
.wahl-bewerbung input:not([type="submit"]):not([type="file"]) {
	width: 100%; background: #f4f4f4; border: 0 !important;
	border-radius: 50px !important; padding: 20px !important;
	font-size: 13.5px; margin: 0 !important;
}
.wahl-bewerbung textarea {
	width: 100%; background: #f4f4f4; border: 0 !important;
	border-radius: 24px !important; padding: 20px !important;
	font-size: 13.5px; min-height: 210px; margin: 0 0 20px !important;
}
.wahl-bewerbung .wahl-bewerbung__files { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 28px; margin-bottom: 22px; }
@media (max-width: 700px) { .wahl-bewerbung .wahl-bewerbung__files { grid-template-columns: 1fr; } }
.wahl-bewerbung .wahl-bewerbung__files label { display: block; font-size: 13.5px; font-weight: 400; color: var(--wahl-text); margin-bottom: 8px; }
.wahl-bewerbung input[type="file"] {
	width: 100%; background: #f4f4f4; border: 0; border-radius: 50px;
	padding: 12px 16px; font-size: 12.5px;
}
.wahl-bewerbung input[type="submit"] {
	background: var(--wahl-btn-blue) !important; color: #fff;
	font-size: 14px !important; font-weight: 400 !important;
	padding: 13px 32px !important; border-radius: 50px !important; border: 0;
}
.wahl-bewerbung input[type="submit"] { width: auto !important; }
/* Contao-Basistypografie in Artikel-Sektionen: Theme-CSS lädt nach der
   Chrome-CSS und würde die Original-Grössen sonst überschreiben.
   Werte = Live gemessen / themedesigner 19er-CSS. */
body.wahl-native .mod_article h1 { font-size: 60px; line-height: 65px; }
body.wahl-native .mod_article h2 { font-size: 55px; line-height: 1.3; }
body.wahl-native .mod_article h3 { font-size: 34px; line-height: 42px; }
body.wahl-native .mod_article h4 { font-size: 22.5px; line-height: 1.3; }
/* Häkchen-/Stichwortlisten behalten die kompakte Original-Grösse */
body.wahl-native .colored-block__list h4 { font-size: 16.5px; line-height: 21.45px; }
body.wahl-native .mod_article :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: 25px; }
body.wahl-native .mod_article p { margin-top: 0; margin-bottom: 15px; }
body.wahl-native .mod_article p,
body.wahl-native .mod_article li { line-height: 27px; }
@media (max-width: 767px) {
	body.wahl-native .mod_article h1 { font-size: 35px; line-height: 42px; }
	body.wahl-native .mod_article h3 { font-size: 26px; line-height: 33px; }
	body.wahl-native .mod_article h4 { font-size: 19.2px; }
	body.wahl-native .mod_article :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 10px; }
	body.wahl-native .mod_article p { font-size: 16px; }
	body.wahl-native .mod_article p,
	body.wahl-native .mod_article li { line-height: 24px; }
}

/* --- Startseite nativ: Hero, Parallax, Rezensionen ----------------------- */
.wahl-hero-article { margin: 0; }
.wahl-cover { position: relative; width: 100%; min-height: clamp(420px, 52vw, 800px); background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.wahl-cover__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); }
.wahl-cover__inner { position: relative; z-index: 1; color: #fff; max-width: 1100px; padding: 2rem 1.5rem; }
.wahl-cover .wahl-cover__title { color: #fff !important; font-family: Roboto, -apple-system, sans-serif; font-weight: 900; line-height: 1.05; margin: 0 0 0.5rem; font-size: clamp(2rem, 5.2vw, 4.25rem); }
.wahl-cover .wahl-cover__sub { color: #fff !important; font-weight: 300; line-height: 1.15; margin: 0 0 1.1rem; font-size: clamp(1.25rem, 3vw, 2.25rem); }
.wahl-cover .wahl-cover__since { color: #fff !important; font-weight: 700; letter-spacing: 0.4em; margin: 0; font-size: clamp(0.8rem, 1.4vw, 1.05rem); }
.wahl-parallax-fixed .ce_bgimage-image { background-attachment: fixed; background-size: cover; background-position: center center; position: absolute; inset: 0; }
body.wahl-native .review-slider .review-slide .review-text::after { display: none !important; }
body.wahl-native .review-slider .review-slide .angle { bottom: 61px !important; }
@media (max-width: 767px) { body.wahl-native .review-slider .review-slide .angle { bottom: 54px !important; } }

/* Trustindex-Rezensionen-Widget: eigene Schriftart erzwingen.
   Das Plugin setzt "Trustindex Poppins" ohne Fallback-Schriftfamilie; laedt
   dieser Webfont nicht (Blocker/Netzwerk), zeigt der Browser stattdessen
   seine Standard-Serifenschrift statt der Seitenschrift Roboto an. */
.ti-widget .ti-widget-container,
.ti-widget .ti-widget-container * { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }

/* Original: inline gestellte Hyperlink-Buttons (Theme setzt div auf block) */
body.wahl-native .ce_hyperlink.align-inline { display: inline-block; margin-right: 12px; }

/* Logo-Galerien: nie beschneiden (Core is-cropped erzwingt sonst cover) */
.wahl-logos .wp-block-image img { object-fit: contain !important; width: auto !important; height: auto !important; max-height: 135px !important; }

/* Karten-Platzhalter (Kontakt): dezenter Hinweis statt Alarmfläche */
.ce_google_map { background: #e9eef2; }
.ce_google_map .privacy { background: none !important; color: #555 !important; text-align: center; padding: 30px 20px 0; margin: 0; font-size: 15px; }
.ce_google_map .privacy a { color: var(--wahl-blue); }

/* Select im Kontaktformular: Text nicht abschneiden */
.wahl-kontaktform select { padding: 15px 20px !important; line-height: 1.4; height: auto; }

/* Kontaktformular (CF7) im Original-Pill-Look */
.wahl-kontaktform .wpcf7-form-control-wrap { display: block; }
.wahl-kontaktform input:not([type="submit"]):not([type="file"]),
.wahl-kontaktform select {
	width: 100%; background: #f4f4f4; border: 0 !important;
	border-radius: 50px !important; padding: 20px !important;
	font-size: 13.5px; margin: 0 !important; appearance: auto;
}
.wahl-kontaktform textarea {
	width: 100%; background: #f4f4f4; border: 0 !important;
	border-radius: 24px !important; padding: 20px !important;
	font-size: 13.5px; min-height: 210px; margin: 0 !important;
}
.search-results .navigation.pagination {
 margin-bottom: 80px;
}

.wahl-kontaktform p { margin: 0 0 25px; }
.wahl-kontaktform textarea { min-height: 360px; }
.wahl-kontaktform .wahl-form__human label { display: inline; font-weight: 400; font-size: 13.5px; }
.wahl-kontaktform .wahl-form__human input[type="checkbox"] { width: auto !important; padding: 0 !important; border-radius: 0 !important; margin-right: 8px !important; }
.wahl-kontaktform .wahl-form__uploadlabel { font-size: 13.5px; margin-bottom: 6px; }
.wahl-kontaktform input[type="file"] {
	width: 100%; background: #f4f4f4; border: 0; border-radius: 50px;
	padding: 12px 16px; font-size: 12.5px;
}
.wahl-kontaktform input[type="submit"] {
	background: var(--wahl-btn-blue) !important; color: #fff;
	font-size: 14px !important; font-weight: 400 !important;
	padding: 13px 32px !important; border-radius: 50px !important; border: 0;
	width: auto !important; cursor: pointer;
}
body.wahl-native main.site-main { max-width: none; padding-inline: 0; margin-inline: 0; width: 100%; }
/* System-Views (Suche, Archive, 404): 20px Seitenrand, sobald das Fenster
   schmaler als der 1220er-Container ist — die 1220px-Kinder zentrieren bei
   breiten Fenstern unverändert (identische 110px-Kante @1440). Alle direkten
   Kinder aufs Raster (die Pagination hat vom Theme keine eigene Breite). */
body.wahl-native main.site-main--system { padding-inline: 20px; padding-bottom: 60px; }
body.wahl-native main.site-main--system > * { max-width: 1220px; margin-inline: auto; }
/* Suchformular auf der Ergebnisseite entfernen (Suche läuft über die Lupe) */
body.search .site-main--system .search-form { display: none; }
.mod_plenta_jobs_basic_offer_reader ul { list-style: disc; padding-left: 1.4em; }

/* --- Jobs-Seite (nativ, editierbar) -------------------------------------- */
.wahl-jobshero { padding-block: 70px 300px; }
.wahl-jobshero .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--content-size, 1170px); }
.wahl-jobshero :is(h1, h2, p) { color: #fff !important; }
.wahl-jobshero__title { font-size: 48px; font-weight: 900; margin: 0; text-align: left; }
.wahl-jobshero__sub { font-size: 44px; font-weight: 300; line-height: 1.1; margin: 0 0 34px; }
.wahl-jobshero__lead { font-size: 19px; line-height: 1.55; }
.wahl-jobshero__search { font-size: 40px; font-weight: 900; margin-top: 46px; }
.wahl-teal-band { background: var(--wahl-teal-bar); height: 90px; }
.wahl-jobsgrid { margin-top: -300px !important; background: transparent; }
.wahl-jobsgrid .mod_newslist.jobs { max-width: var(--wp--style--global--content-size, 1170px); margin-inline: auto; }
.wahl-jobsgrid .ce_productbox_inside { background: #fff; }
.wahl-jobsgrid h3 { overflow-wrap: normal; word-break: keep-all; }
/* Team-Sektion = Live-Container der Counter-Sektion (100/40 Desktop, 50/20 Mobile, Inhalt 1220px) */
.wahl-team { padding: 100px 40px !important; }
.wahl-team > .wahl-ctr { max-width: 1220px !important; margin-inline: auto; }
@media (max-width: 767px) { .wahl-team { padding: 50px 20px !important; } }

/* =========================================================================
   Standard-Gutenberg-Komponenten (Ersatz für ACF-Layoutblöcke)
   Werte 1:1 von Live/lokalem Referenzstand gemessen.
   ========================================================================= */

/* Fixes Standard-Blöcke: Original-Negativ-Margin neutralisieren, Scroll-Transform am Parallax-Cover unterbinden */
.wahl-ticker-band { margin-top: 0 !important; }
.wahl-parallaxband { transform: none !important; }

/* Produktbox-Karten: leichter Bild-Zoom beim Hover (site-weit konsistent) */
.ce_productbox.version3 .image-wrapper { overflow: hidden; }
.ce_productbox.version3 .image_container img { transition: transform 0.3s ease-in-out; }
.ce_productbox.version3:hover .image_container img { transform: scale(1.05); }
/* Karte (acf/wahl-karten) ist komplett verlinkt (<a class="ce_productbox …">):
   Browser-Linkfarbe/-Unterstreichung am Wrapper selbst neutralisieren, damit
   Titel (eigene Farbe via customize.css) und Text wie zuvor unverlinkt wirken. */
.ce_productbox.version3 { text-decoration: none; color: inherit; }
.ce_productbox_content_top p { color: #000; }

/* 3 Karten Startseite (acf/wahl-karten, Wrapper-Klasse .produkte): Bilder immer 16:9 */
.produkte .image_container img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 767px) {
	.produkte .ce_productbox_inside { min-height: 0; }
}

/* Referenz-Vorschauen: unverfärbtes Bild mit dezentem Verlauf und
   Beschriftung am unteren Bildrand. */
#collection-list-product .item-teaser {
	transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}
#collection-list-product .item-teaser:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
}
#collection-list-product .item-teaser__media {
	align-items: flex-end;
	background: transparent;
}
#collection-list-product .item-teaser__media::after {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .72) 0%,
		rgba(0, 0, 0, .34) 42%,
		rgba(0, 0, 0, 0) 78%
	);
	background-size: 100% 100%;
}
#collection-list-product .item-teaser__media__text {
	position: relative;
	z-index: 3;
	width: 100%;
	box-sizing: border-box;
	padding: 20px 20px 26px;
	text-align: center;
}
#collection-list-product .item-teaser__media__title {
	font-size: 22px;
	line-height: 1.1;
}
#collection-list-product .item-teaser__media__subtitle {
	font-size: 17px;
	line-height: 1.15;
	margin-top: 2px;
}
#collection-list-product .item-teaser__media__image img {
	transition: transform .3s ease-in-out;
}
#collection-list-product .item-teaser:hover .item-teaser__media__image img {
	transform: scale(1.05);
}
#collection-list-product .item-teaser:hover .item-teaser__media__text {
	opacity: 1;
}

/* Hero Startseite (core/cover.wahl-homehero) */
.wahl-homehero { min-height: clamp(420px, 52vw, 800px) !important; }
.wahl-homehero .wp-block-cover__inner-container { max-width: 1100px; text-align: center; }
.wahl-homehero h1 { color: #fff !important; font-weight: 900; line-height: 1.05; margin: 0 0 0.5rem !important; font-size: clamp(2rem, 5.2vw, 4.25rem) !important; }
.wahl-homehero .wahl-hero-sub { color: #fff !important; font-weight: 300; line-height: 1.15; margin: 0 0 1.1rem; font-size: clamp(1.25rem, 3vw, 2.25rem); }
.wahl-homehero .wahl-hero-since { color: #fff !important; font-weight: 700; letter-spacing: 0.4em; margin: 0; font-size: clamp(0.8rem, 1.4vw, 1.05rem); }

/* Laufband (Gruppe .wahl-ticker mit Absatz) */
.wahl-ticker-band { overflow: hidden; }
.wahl-ticker-band .wahl-ticker-text {
	white-space: nowrap; display: inline-block; padding-left: 100%;
	color: #fff; font-size: 18px; line-height: 27px; margin: 0;
	animation: wahl-ticker 35s linear infinite;
}
.wahl-ticker-band .container { padding-top: 30px; padding-bottom: 28px; }
@keyframes wahl-ticker { from { transform: translateX(0); } to { transform: translateX(-200%); } }

/* Der aktuell verwendete ACF-Laufbandblock rendert das alte Contao-Markup
   (.alle-einsatzbereiche + marquee). Mobil keine Parallax-Verschiebung oder
   negative Überlappung zwischen Hero und Laufband; das Band bleibt eine
   kompakte, vertikal zentrierte Textzeile. */
@media (max-width: 767px) {
	.wahl-homehero,
	.wahl-homehero .wp-block-cover__image-background {
		transform: none !important;
	}

	.alle-einsatzbereiche {
		margin-top: 0 !important;
	}

	body.wahl-native .mod_article.alle-einsatzbereiche > .container {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}

	.alle-einsatzbereiche marquee {
		display: block;
		margin-bottom: 0 !important;
		line-height: 27px;
	}
}

/* Intro/Seiten-Hero auf blauem Verlauf (Gruppe/Cover mit Original-Klassen) */
body.wahl-native .wp-block-group.alignfull.wahl-pagehero.has-background {
	padding-inline: 0;
}
.wahl-homeintro h1, .wahl-pagehero h1 { color: #fff !important; text-align: left; }
.wahl-homeintro h1 mark, .wahl-pagehero h1 mark { font-weight: 400; background: transparent; }
.wahl-homeintro p, .wahl-pagehero p { color: #fff !important; font-size: 17px; line-height: 27px; }
/* Legacy-Regel "p, a { font-size:17px }" setzt Links global fix auf 17px;
   hier soll der Link stattdessen die tatsächliche Fliesstextgrösse des
   umgebenden Absatzes uebernehmen (z.B. 19.5px bei is-style-bm-intro). */
.wahl-homeintro p a, .wahl-pagehero p a { color: #fff !important; font-size: inherit; }
.wahl-homeintro .wp-block-columns { gap: 30px; margin-top: 30px; }
.wahl-pagehero .wahl-lead { max-width: 58.33%; }
@media (max-width: 781px) { .wahl-pagehero .wahl-lead { max-width: 100%; } }

/* 3 Karten (columns.wahl-cards > group.wahl-card) */
.wahl-cards-wrap > .container-like { max-width: 1220px; margin-inline: auto; }
.wahl-cards { gap: 30px; }
.wahl-card {
	background: #fff; border-radius: 20px; overflow: hidden;
	border-bottom: 10px solid var(--wahl-teal);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
	padding: 0; height: 100%;
}
.wahl-card .wp-block-image { margin: 0; }
.wahl-card .wp-block-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 20px 20px 0 0; }
.wahl-card__body, .wahl-card > h3, .wahl-card > p { padding-inline: 20px; }
.wahl-card h3 { font-size: 34px !important; font-weight: 900; color: var(--wahl-blue); line-height: 42px; text-align: center; margin: 15px 0 !important; }
.wahl-card p { font-size: 17px; line-height: 27px; color: var(--wahl-text); text-align: center; margin: 0 0 5px; }
.wahl-card p:last-child { padding-bottom: 20px; }
.wahl-card p a { color: #000; text-decoration: none; font-size: 17px; }
.wahl-card p a:hover { text-decoration: underline; }

/* News-Überschrift (Gruppe .wahl-newshead) */
.wahl-newshead { padding-top: 60px; }
.wahl-newshead h2 { text-align: center; color: var(--wahl-blue); }

/* Blaue Text-Box + Bewerten-Button (Über uns). Live ist die Box (ce_bgimage)
   selbst randlos/volle Breite (bg-owncolor), nur der Inhalt sitzt in
   .ce_bgimage-inside.contentwrap (max 1300, zentriert, 40px Seitenpolster
   -> Inhalt 1220px, wie .wahl-innerbox). Darum NICHT die Box selbst
   (.wahl-bluebox, trägt die Hintergrundfarbe) einschränken, sondern nur den
   inneren Wrapper .wahl-bluebox-inner. */
.wahl-bluebox { padding: 110px 0; color: #fff; }
.wahl-bluebox .wahl-bluebox-inner { max-width: 1300px; margin-inline: auto; padding-inline: 40px; }
.wahl-bluebox :is(h2, h3, p) { color: #fff !important; }
.wahl-bluebox .wp-block-columns { gap: 30px; }
/* Innenbox wie live (ce_bgimage-inside.contentwrap): max 1300, zentriert,
   40px Seitenpolster → Inhalt exakt 1220. Der .container in fullwidth-
   Artikeln ist live UNGEBOXT (vgl. Kontakt-Karte) — nicht dort fixen! */
.wahl-innerbox { max-width: 1300px; margin-inline: auto; padding: 30px 40px; }
.wahl-outline-btn a {
	display: inline-block; padding: 15px 20px; border: 2px solid var(--wahl-btn-blue);
	border-radius: 100px; color: var(--wahl-btn-blue) !important; background: transparent !important;
	font-size: 15px !important; font-weight: 400 !important; text-decoration: none;
}

/* Partner-/Mitgliedschafts-Logos (core/gallery.wahl-logos) */
.wahl-logos { gap: 30px !important; }
.wahl-logos .wp-block-image {
	height: 180px; padding: 22.5px; margin: 0;
	display: flex; align-items: center; justify-content: center;
}
.wahl-logos .wp-block-image :is(a, img) { max-height: 100%; }
.wahl-logos .wp-block-image img { max-width: 90%; max-height: 135px; width: auto; object-fit: contain; filter: brightness(0.7); }
.wahl-logos-title h3 { color: var(--wahl-teal) !important; }

/* Such-Overlay (body_bottom .mod_search .inside) parkt fixed bei top:-575px.
   Das Scroll-Script transformiert Vorfahren, wodurch das fixed-Element in den
   Viewport rutscht (sichtbares weisses Band über Bild-Heros). Deshalb bis zum
   Lupen-Klick (customize.js togglet body.search_overlay) hart verstecken. */
body:not(.search_overlay) .body_bottom .mod_search .inside { visibility: hidden; }

/* Kontakt-Sektion (Standard-Blöcke) — Werte von der Live-Site gemessen */
.wahl-kontakt-cols { gap: 30px; }
figure.wahl-zeiten { margin-bottom: 30px; }
.wahl-zeiten table { border-collapse: separate; width: 100%; table-layout: auto; }
.wahl-zeiten td { border: 0; border-bottom: 1px solid #e3e3e3; padding: 12px; font-size: 15px; line-height: 27px; color: var(--wahl-text); }
.wahl-zeiten td:first-child { width: 37.5%; }
body.wahl-native .mod_article .ce_iconbox p { margin-bottom: 0; line-height: 27px; }
/* blockGap der Spalte (2rem auf jedes Kind) neutralisieren — live liegen die Zeilen direkt untereinander */
body.wahl-native .mod_article .ce_iconbox { margin-block: 0; }
@media (max-width: 767px) {
	.wahl-kontakt-cols .ce_iconbox.version3 .ce_iconbox_inside {
		justify-content: flex-start;
	}
}

/* --- Produkt-/Angebot-Sektionen (Standard-Blöcke) ------------------------ */
.wahl-sektionbox { padding: 110px max(40px, calc((100% - 1220px) / 2)); }
.wahl-sektionbox.has-background :is(h1, h2, h3, h4, p, li) { color: #fff !important; }
.wahl-sektion-cols { gap: 60px; }
.wahl-sektion-cols .wp-block-image { margin: 0 0 30px; }
.wahl-sektion-cols .wp-block-image img { width: 100%; height: auto; }
.wahl-blaubalken { padding: 30px max(40px, calc((100% - 1220px) / 2)); }
.wahl-blaubalken :is(h3, h4, li, a) { color: #fff !important; }
.wahl-blaubalken .wp-block-columns { gap: 30px; margin-block: 30px; }
.wahl-blaubalken .wahl-liste { margin-block: 30px; }
.wahl-angebot-body { padding: 30px max(40px, calc((100% - 1220px) / 2)) 0; }
.wahl-angebot-body .wp-block-columns { gap: 60px; }

/* Häkchen-Listen-Block */
.wahl-liste__grid { display: grid; grid-template-columns: repeat(var(--wahl-liste-cols, 3), 1fr); gap: 0 30px; }
.wahl-sektion-cols .wahl-liste { margin-block: 30px; }
.wahl-pagehero p { max-width: 58.33%; }
@media (max-width: 781px) { .wahl-pagehero p { max-width: 100%; } }
.wahl-liste__titel { margin: 0 0 15px !important; }
.wahl-liste--tuerkis .wahl-liste__titel { color: var(--wahl-teal) !important; }
.wahl-liste .colored-block__list { margin: 0 0 15px; }
@media (max-width: 781px) { .wahl-liste__grid { grid-template-columns: 1fr 1fr; } }

/* Outline-Buttons (Pill) für farbige/weisse Sektionen */
.wahl-btn-outline-white .wp-block-button__link,
.wahl-btn-outline-black .wp-block-button__link {
	background: transparent !important; border-radius: 100px !important;
	padding: 15px 20px !important; font-size: 15px !important; font-weight: 700 !important;
	line-height: 1.2; text-decoration: none;
}
.wahl-btn-outline-white .wp-block-button__link { border: 2px solid #fff !important; color: #fff !important; }
.wahl-btn-outline-white .wp-block-button__link:hover { background: #fff !important; color: var(--wahl-blue) !important; }
/* «-black» ist live BLAU (#0069b4) — Name bleibt wegen bestehender Inhalte */
.wahl-btn-outline-black .wp-block-button__link { border: 2px solid #0069b4 !important; color: #0069b4 !important; }
.wahl-btn-outline-black .wp-block-button__link:hover { background: #0069b4 !important; color: #fff !important; }

/* Galerie-Block mit Zusatzklasse "gallery-same": Spaltenzahl bleibt auf allen
   Bildschirmgrössen identisch (WP-Core reduziert Galerien sonst < 600px
   immer auf 2 Spalten). Werte 1:1 aus wp-includes/blocks/gallery/style.css
   übernommen, nur ohne die min-width:600px-Schranke. */
.wp-block-gallery.gallery-same.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) { width: 100%; }
.wp-block-gallery.gallery-same.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) { width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667); }
.wp-block-gallery.gallery-same.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) { width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75); }
.wp-block-gallery.gallery-same.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) { width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8); }
.wp-block-gallery.gallery-same.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) { width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333); }
.wp-block-gallery.gallery-same.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) { width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571); }
.wp-block-gallery.gallery-same.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) { width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875); }
.wp-block-gallery.gallery-same.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) { width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667); }
.wp-block-gallery.gallery-same.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
.wp-block-gallery.gallery-same.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5); }
.wp-block-gallery.gallery-same.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) { width: 100%; }

/* --- Modernes Megamenü (Desktop-Nav + Sticky-Klon) --------------------------
   Blaues Panel mit weissen Kachel-Buttons, sitzt knapp unter dem Menüpunkt
   (Anker: Link-Mitte des lh32-Menülinks = li-Mitte → top 50% + 26px),
   sanfte Einblendung, Tastatur-Support (:focus-within). Markup unverändert;
   das Original-display:none wird durch visibility/opacity ersetzt. */
.mainmenu li.submenu { position: relative; }
.mainmenu ul.level_2 {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(185px, 1fr));
	gap: 3px 26px;
	position: absolute; top: calc(50% + 26px); left: 50%;
	width: max-content;
	max-width: min(760px, calc(100vw - 48px));
	padding: 22px !important;
	background: linear-gradient(165deg, #0069b4 0%, #00589a 100%) !important;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	box-shadow: 0 28px 60px rgba(0, 47, 89, .35), 0 4px 14px rgba(0, 47, 89, .18);
	opacity: 0; visibility: hidden;
	transform: translateX(-50%) translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	z-index: 900;
}
.mainmenu li.submenu:hover > ul.level_2,
.mainmenu li.submenu:focus-within > ul.level_2 {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity .2s ease, transform .2s ease;
}
/* Unsichtbare Hover-Brücke über dem Panel */
.mainmenu ul.level_2::before {
	content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
/* Contao-Spacer-Pseudo würde sonst als leere Grid-Zelle mitlaufen */
.mainmenu ul.level_2::after { display: none !important; }
.mainmenu ul.level_2 > li { margin: 0 !important; padding: 0 !important; }
/* Einträge als cleane Zeilen mit Pfeil-Icon (fa-angle-right, wie die
   Site sie in Buttons/Slidern nutzt); Hover rückt Zeile + Pfeil nach,
   Akzent im Site-Türkis. */
.mainmenu ul.level_2 > li > a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 8px !important;
	background: transparent;
	border: 0;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: #fff !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	transition: transform .18s ease;
}
.mainmenu ul.level_2 > li > a::before {
	content: "\f105";
	font-family: FontAwesome;
	font-size: 15px;
	line-height: 1;
	/* FA "angle-right" sitzt optisch etwas zu hoch im eigenen Zeichen-Kasten;
	   trotz align-items:center wirkt er dadurch nicht text-mittig. */
	position: relative;
	top: 1px;
	color: rgba(255, 255, 255, .5);
	transition: transform .18s ease, color .18s ease;
}
.mainmenu ul.level_2 > li > a:hover { transform: translateX(4px); color: #fff !important; }
.mainmenu ul.level_2 > li > a:hover::before { color: #6fd9dd; transform: translateX(3px); }
/* Aktueller Bereich markiert */
.mainmenu ul.level_2 > li.trail > a::before,
.mainmenu ul.level_2 > li.active > a::before { color: #6fd9dd; }

/* Schmalere Desktop-Viewports: 2 Spalten, Panel darf nicht überstehen */
@media (max-width: 1240px) {
	.mainmenu ul.level_2 { grid-template-columns: repeat(2, minmax(175px, 1fr)); max-width: calc(100vw - 32px); }
}

/* Original-Chrome-CSS blendet .mainmenu zwischen 768–1024px zugunsten eines
   ".smartmenu"-Tablet-Menüs aus (bundle.css: "breakpoint show smartmenu /
   hide mainmenu") — dieses Theme baut aber gar kein .smartmenu-Trigger-
   Markup, nur #mmenu/.mmenu_trigger (per Original-CSS nur ≤767px sichtbar).
   Ohne Korrektur bleibt 768–1024px also komplett ohne Navigation (Bug schon
   im Original live nachvollzogen). Fix: .mmenu_trigger/#mmenu zusätzlich in
   dieser Lücke aktivieren, bis .mainmenu bei 1025px wieder übernimmt. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mmenu_trigger { display: flex !important; }
	/* Original-Regel "@media (min-width:768px){ #mmenu{display:none} }" muss
	   in dieser Lücke ebenfalls aufgehoben werden, sonst bleibt das Panel
	   trotz sichtbarem Trigger unsichtbar. */
	#mmenu { display: block !important; }
}

/* --- Modernes Mobile-Menü (#mmenu) ------------------------------------------
   Die vollständige Navigation (mobile_horizontal, inkl. aller Unterpunkte)
   war per display:none versteckt — nur eine flache Hauptpunktliste war
   sichtbar. Jetzt: komplette Navigation als blaues Off-canvas mit
   Kachel-Grid für Unterpunkte; das flache Duplikat wird ausgeblendet. */
#mmenu { background: linear-gradient(170deg, #0069b4 0%, #004f87 100%) !important; }
#mmenu .inside { padding: 22px 20px 40px; }
#mmenu #mmenu_top, #mmenu #mmenu_middle, #mmenu #mmenu_bottom { background: transparent !important; }
#mmenu .mod_navigation.mobile_horizontal { display: block !important; }
#mmenu .mod_navigation.mobile_vertical { display: none !important; }
/* Öffnen/Schliessen: chrome-footer togglet .wahl-mmenu-open auf html/body —
   das Menü fährt aus der geparkten Position (translateY(-100%…)) herunter. */
#mmenu { transition: transform .35s ease !important; }
body.wahl-mmenu-open #mmenu { transform: translateY(0) !important; }
html.wahl-mmenu-open,
body.wahl-mmenu-open {
	overflow: hidden !important;
	overscroll-behavior: none;
}
body.wahl-mmenu-open #mmenu {
	max-width: 100vw;
	overflow-x: hidden;
}
#mmenu .scrollable {
	overflow-x: hidden;
	overscroll-behavior-x: none;
	touch-action: pan-y;
}
/* Burger animiert zum X */
.mmenu_trigger { cursor: pointer; }
.mmenu_trigger .burger_lines,
.mmenu_trigger .burger_lines::before,
.mmenu_trigger .burger_lines::after { transition: transform .3s ease, top .3s ease, background .3s ease; }
body.wahl-mmenu-open .mmenu_trigger .burger_lines { background: transparent !important; }
body.wahl-mmenu-open .mmenu_trigger .burger_lines::before { top: 0 !important; transform: rotate(-45deg); }
body.wahl-mmenu-open .mmenu_trigger .burger_lines::after { top: 0 !important; bottom: auto !important; transform: rotate(45deg); }
/* Suche als heller Pill */
#mmenu .mod_search { height: auto !important; margin-bottom: 18px; }
#mmenu .mod_search .formbody { display: flex; gap: 8px; }
#mmenu .mod_search .widget-text { flex: 1; }
/* Der Submit-Button ist vom Original-CSS versteckt — sein leerer Wrapper
   quetschte das Suchfeld auf 38px zusammen. Suche läuft per Enter. */
#mmenu .mod_search .widget-submit { display: none !important; }
#mmenu .mod_search input.text {
	width: 100%; background: rgba(255, 255, 255, .12) !important;
	border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 50px !important;
	color: #fff !important; padding: 12px 18px !important; font-size: 16px;
}
/* WICHTIG: Placeholder-Selektoren NICHT in einer Liste mischen — ein
   invalider Legacy-Selektor verwirft sonst die ganze Regel. */
#mmenu .mod_search input.text::placeholder { color: rgba(255, 255, 255, .75) !important; opacity: 1; }
#mmenu .mod_search input.text::-webkit-input-placeholder { color: rgba(255, 255, 255, .75) !important; }
#mmenu .mod_search button.submit {
	background: rgba(255, 255, 255, .16) !important; color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 50px !important;
	padding: 0 18px !important; font-size: 14px !important; font-weight: 600;
}
/* Hauptpunkte */
#mmenu .mobile_horizontal li { list-style: none; }
#mmenu .mobile_horizontal a.a-level_1 {
	display: block; color: #fff !important;
	font-size: 19px !important; font-weight: 700 !important;
	text-transform: none !important; line-height: 1.3 !important;
	padding: 14px 2px 12px !important;
	text-align: left !important;
}
#mmenu .mobile_horizontal a.a-level_1::after { display: none !important; }
#mmenu .mobile_horizontal > ul > li:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, .14); }
/* Unterpunkte als cleane Zeilen mit Pfeil-Icon (2 Spalten, ohne Kacheln) */
#mmenu .mobile_horizontal ul.level_2 {
	display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 18px;
	padding: 0 0 16px; margin: 0;
}
#mmenu .mobile_horizontal ul.level_2 li { display: block !important; }
#mmenu .mobile_horizontal ul.level_2 a {
	display: flex; align-items: flex-start; gap: 9px;
	color: #fff !important;
	background: transparent; border: 0;
	padding: 8px 2px !important;
	font-size: 15px !important; font-weight: 500 !important;
	text-transform: none !important; line-height: 1.3 !important;
	text-align: left !important;
}
#mmenu .mobile_horizontal ul.level_2 a::before {
	content: "\f105"; font-family: FontAwesome;
	font-size: 14px; line-height: 1; color: rgba(255, 255, 255, .5);
	position: relative; top: 1px;
}
#mmenu .mobile_horizontal ul.level_2 li.active > a::before,
#mmenu .mobile_horizontal ul.level_2 li.trail > a::before { color: #6fd9dd; }
/* Meta-Navigation (News/Jobs) + Socials */
#mmenu .top_metanavi { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
#mmenu .top_metanavi > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 30px;
	padding: 0;
	margin: 0;
}
#mmenu .top_metanavi li { display: block; margin: 0; }
#mmenu .top_metanavi a { color: rgba(255, 255, 255, .85) !important; font-size: 15px !important; padding: 6px 2px !important; display: inline-block; }
#mmenu #mmenu_bottom { margin-top: 10px; }
#mmenu #mmenu_bottom i { color: #fff !important; font-size: 18px; }
#mmenu #mmenu_bottom a { margin-right: 16px; }

/* Jobs-Zähler in der Service-Navigation (dynamisch, siehe
   wahl_child_jobs_menu_li() — bei 0 offenen Stellen kein Badge).
   Optik wie das Original: weisse Zahl auf hellblauem Kreis
   (li.notification::after auf wahl-ag.ch: 16px, #219ddc, 12/700). */
.wahl-jobs-badge {
	display: inline-block;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	margin-left: 5px;
	background: #219ddc;
	color: #fff;
	border-radius: 8px;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 16px !important;
	text-align: center;
	position: relative;
	top: -6px;
	box-sizing: border-box;
}
/* Contao setzt «#top span» auf 16px !important — ID-Spezifität kontern */
#top .wahl-jobs-badge,
#mmenu .wahl-jobs-badge { font-size: 12px !important; line-height: 16px !important; }

/* --- Vollständiger Footer auf Mobilgeräten -------------------------------
   Die Contao-Hilfsklasse .m-d-none blendet Kontakt, Navigation und die
   Social-Media-Überschrift unter 768px aus. Im Footer sollen diese Inhalte
   jedoch vollständig und in einer gut lesbaren Spalte erscheinen. */
@media (max-width: 767px) {
	#footer .autogrid_row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		margin-inline: 0 !important;
	}

	#footer .autogrid_row > .column {
		width: 100%;
		max-width: none;
		padding-inline: 0 !important;
		margin: 0 !important;
	}

	#footer .autogrid_row > .column.m-d-none.col_3,
	#footer .autogrid_row > .column.m-d-none.col_2,
	#footer .ce_headline.m-d-none {
		display: block !important;
	}

	/* Die leere Rasterspalte aus dem Desktop-Footer wird mobil nicht benötigt. */
	#footer .autogrid_row > .column.m-d-none.col_1 {
		display: none !important;
	}

	#footer .ce_iconbox.version3 .ce_iconbox_inside {
		justify-content: flex-start;
	}

	#bottom .inside {
		overflow: visible;
		padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}

	#bottom .inside > div {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	#bottom .inside .right {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		gap: 8px 18px;
	}

	#bottom .inside .right a {
		margin: 0 !important;
	}
}

/* --- Einheitliches mobiles Seitenraster -----------------------------------
   WordPress gibt Gruppen mit Hintergrund standardmässig 2.375em horizontalen
   Innenabstand. Zusammen mit dem Contao-.container (20px) entstanden dadurch
   auf vielen Seiten 55.625px Abstand zum Viewport. Die vollbreiten Gruppen
   überlassen das mobile Seitenraster deshalb ihrem inneren Container.

   Einige native Seitensektionen haben keinen solchen Container und verwenden
   desktopseitig bewusst 40px. Diese werden mobil ebenfalls auf das globale
   20px-Raster gesetzt. Komponenten-Innenabstände (z.B. Karten) bleiben davon
   unberührt. */
@media (max-width: 767px) {
	body.wahl-native .wp-block-group.alignfull.has-background {
		padding-inline: 0;
	}

	body.wahl-native .wp-block-cover.alignfull {
		padding-inline: 20px;
	}

	body.wahl-native :is(
		.wahl-innerbox,
		.wahl-bluebox .wahl-bluebox-inner,
		.wahl-sektionbox,
		.wahl-blaubalken,
		.wahl-angebot-body
	) {
		padding-inline: 20px;
	}
}