/**
 * Hövelrat – Startseite
 * Navbar + Footer: HTML-Sektionen (full-bleed).
 * Inhalts-Sektionen: native BeBuilder-Elemente (heading, column/Text, button,
 * image, icon_box, list) – hier nur visuell nach Figma gestylt.
 *
 * Designregeln aus Figma:
 *   - keine abgerundeten Ecken; nur Buttons sind Pills
 *   - Flaechen: Weiss, Hellgrau (Karten), Navy / Navy-Verlauf (dunkle Baender)
 */

/* =====================================================================
 * Blank-Template Grundlage
 * ===================================================================== */
.template-blank #Content { padding: 0; }
.template-blank .the_content.no_content { display: none; }

/* Full-bleed NUR fuer die HTML-Sektionen Navbar/Footer,
 * damit deren eigener .hv-container die Breite steuert. */
.hv-builder-navbar,
.hv-builder-footer { padding: 0 !important; }
.hv-builder-navbar .section_wrapper,
.hv-builder-footer .section_wrapper,
.hv-builder-navbar .mcb-wrap,
.hv-builder-footer .mcb-wrap,
.hv-builder-navbar .mcb-wrap-inner,
.hv-builder-footer .mcb-wrap-inner,
.hv-builder-navbar .mcb-column,
.hv-builder-footer .mcb-column,
.hv-builder-navbar .mcb-column-inner,
.hv-builder-footer .mcb-column-inner {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* =====================================================================
 * Gemeinsame Bausteine
 * ===================================================================== */
.mfn-hoevelrat * { box-sizing: border-box; }
.mfn-hoevelrat img { max-width: 100%; display: block; }
.mfn-hoevelrat a { color: inherit; text-decoration: none; }

.hv-container {
	max-width: var(--hv-container);
	margin: 0 auto;
	padding: 0 var(--hv-gutter);
}

.hv-btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--hv-font-body); font-weight: var(--hv-fw-medium);
	font-size: var(--hv-fs-body-s); line-height: var(--hv-lh-body-s);
	padding: 8px 18px; border-radius: var(--hv-radius-btn-sm); border: 0;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease; cursor: pointer;
}
.hv-btn--primary { background: var(--mfn-button-bg, var(--hv-blue-900)); color: var(--mfn-button-color, var(--hv-white)); }
.hv-btn--primary:hover { background: var(--hv-color-primary-hover); color: var(--hv-blue-900); }
.hv-btn--gold { background: var(--mfn-button-theme-bg, var(--hv-gold-900)); color: var(--mfn-button-theme-color, var(--hv-white)); }
.hv-btn--gold:hover { background: var(--hv-color-accent-hover); color: var(--hv-white); }
.hv-btn--navy { background: var(--mfn-button-bg, var(--hv-blue-900)); color: var(--mfn-button-color, var(--hv-white)); }
.hv-btn--navy:hover { background: var(--hv-color-primary-hover); color: var(--hv-blue-900); }

/* Steht in den Karten unter dem Text und laeuft deshalb auf Kachelgroesse.
 * Wort navy, Pfeil gold – Hover aendert keine Farbe, nur den Pfeilversatz. */
.hv-link-arrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--hv-font-body); font-weight: var(--hv-fw-medium);
	font-size: var(--hv-fs-card); line-height: var(--hv-lh-card);
	color: var(--hv-blue-900);
}
/* In der Vorlage ist nur der Pfeil golden, das Wort bleibt navy; Abstand 10px.
 * Der Abstand haengt am Pfeil selbst, weil das gap des Elternteils dort nicht
 * greift, wo BeTheme dessen display auf block zieht. */
/* inline-block, weil transform auf reinen Inline-Elementen wirkungslos ist. */
.hv-link-arrow__pfeil {
	color: var(--hv-color-accent); margin-left: 10px;
	display: inline-block; font-size: 1.375em; line-height: 1;
	transition: transform .22s ease-out;
}
.hv-link-arrow:hover { color: var(--hv-blue-900); }
.hv-link-arrow:hover .hv-link-arrow__pfeil {
	color: var(--hv-color-accent);
	transform: translateX(8px);
}

/* =====================================================================
 * Header- und Footer-Vorlage (BeTheme > Vorlagen)
 *
 * Beide sind normale BeBuilder-Vorlagen und liegen ausserhalb der Seite.
 * BeTheme rahmt sie mit #mfn-header-template bzw. #mfn-footer-template ein.
 * ===================================================================== */

/* BeTheme setzt ueber dem Inhalt einen Standardabstand, den die Vorlage
 * nicht braucht – der Hero soll direkt unter dem Header beginnen. */
#Content { padding-top: 0; }

/* Inhaltsbreite wie in den Inhalts-Sektionen: 1280 plus Seitenrand.
 * BeThemes Layoutbreite (1220) wird dafuer ueberschrieben. */
.hv-hdr .section_wrapper,
.hv-ftr .section_wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: min(100%, calc(var(--hv-content) + var(--hv-gutter) * 2));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hv-gutter);
	padding-right: var(--hv-gutter);
}
/* Spaltenrinne und Spaltenabstand von BeTheme aufheben, das Raster
 * steuern wir wie in den Inhalts-Sektionen selbst. */
.hv-hdr .mcb-wrap-inner,
.hv-hdr .mcb-column-inner,
.hv-ftr .mcb-wrap-inner,
.hv-ftr .mcb-column-inner { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.hv-hdr .mcb-column,
.hv-ftr .mcb-column { margin-bottom: 0; }

/* ------------------------------------------------------------- Header */
/* fixed statt sticky: am Handy hat body/html overflow, dadurch wuerde
 * sticky mit der Seite wegscrollen. BeTheme schiebt den Inhalt um die
 * Bandhoehe nach unten (body_offset_header), sobald die Vorlage auf
 * Position "fixed" steht. */
#mfn-header-template {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	isolation: isolate;
	background-color: var(--hv-color-dark-bg);
}
.admin-bar #mfn-header-template { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar #mfn-header-template { top: 46px; }
}
#mfn-header-template > * { position: relative; z-index: 1; }

/* Logo, Menue, Button mit gleichen Zwischenraeumen – Bandhoehe 100px.
 * Nicht das Menue zentrieren: die Vorlage verteilt den freien Platz auf zwei
 * gleiche Luecken, wodurch das Menue 18px rechts der Bandmitte steht. */
.hv-hdr .section_wrapper {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 100px;
}
.hv-hdr .mcb-wrap { width: auto; flex: 0 0 auto; }
.hv-hdr .mcb-wrap:last-child .mcb-wrap-inner { display: flex; justify-content: flex-end; }

/* Block statt Inline: als Inline-Element wuerde der Anker auf der Grundlinie
 * sitzen und das Logo um vier Pixel nach oben schieben. */
.hv-hdr .hv-hdr-logo,
.hv-hdr .logo-wrapper { position: relative; z-index: 2; flex-shrink: 0; }
.hv-hdr .logo-wrapper { display: flex; width: 126px; line-height: 0; }
.hv-hdr .logo-wrapper img {
	display: block;
	width: 126px;
	height: 65px;
	max-width: none;
	opacity: 1;
	visibility: visible;
}

/* Das <nav> um das Menue aendert das Flex-Layout nicht. */
#mfn-header-template .hv-nav,
#mfn-footer-template .hv-nav {
	display: contents;
}

/* BeTheme bringt fuer das Menue eigene Abstaende und Farben mit, deshalb
 * hier ueber die ID adressiert. */
#mfn-header-template .mfn-header-menu {
	display: flex; gap: 32px; margin: 0; padding: 0; list-style: none;
}
#mfn-header-template .mfn-header-menu > li { margin: 0; padding: 0; }
#mfn-header-template .mfn-header-menu > li > a.mfn-menu-link {
	display: block; padding: 0; border: 0; background: none;
	font-family: var(--hv-font-body); font-size: var(--hv-fs-nav);
	font-weight: var(--hv-fw-light); line-height: var(--hv-lh-nav);
}
#mfn-header-template .mfn-header-menu .menu-label {
	font-family: var(--hv-font-body); font-size: var(--hv-fs-nav);
	font-weight: var(--hv-fw-light); line-height: var(--hv-lh-nav);
	color: var(--hv-color-nav-text);
	transition: color .2s ease;
}
#mfn-header-template .mfn-header-menu > li > a.mfn-menu-link:hover .menu-label {
	color: var(--hv-white);
}
#mfn-header-template .mfn-header-menu > li.current-menu-item > a.mfn-menu-link .menu-label,
#mfn-header-template .mfn-header-menu > li.current-menu-ancestor > a.mfn-menu-link .menu-label,
#mfn-header-template .mfn-header-menu > li.current-page-ancestor > a.mfn-menu-link .menu-label,
#mfn-header-template .mfn-header-menu > li.current_page_item > a.mfn-menu-link .menu-label {
	color: var(--hv-color-nav-text);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}
#mfn-header-template .mfn-header-menu > li.current-menu-item > a.mfn-menu-link:hover .menu-label,
#mfn-header-template .mfn-header-menu > li.current-menu-ancestor > a.mfn-menu-link:hover .menu-label,
#mfn-header-template .mfn-header-menu > li.current-page-ancestor > a.mfn-menu-link:hover .menu-label,
#mfn-header-template .mfn-header-menu > li.current_page_item > a.mfn-menu-link:hover .menu-label {
	color: var(--hv-white);
}
#mfn-header-template .mfn-menu-subicon,
#mfn-header-template .mfn-menu-item-helper { display: none; }

/* Button rechtsbuendig im letzten Wrap */
.hv-hdr .mcb-wrap:last-child .mcb-column-inner { text-align: right; }

/* ---------- Mobiles Menue (BeTheme-Element "header_burger") ----------
 * Das Element liefert Schaltflaeche und Seitenfeld. Auf breiten Viewports
 * steht die Menueleiste selbst da, die Schaltflaeche bleibt deshalb aus.
 * Unterhalb von 959px kehrt sich das um (siehe Responsive). Das offene
 * Feld folgt Figma „Mobil Navigation“: Navy-Overlay von rechts. */
.hv-hdr .hv-hdr-burger { display: none; }
@media (min-width: 960px) {
	#mfn-header-template .mfn-header-tmpl-menu-sidebar { display: none !important; }
}
.hv-hdr .hv-hdr-burger .mfn-header-menu-burger {
	/* 44px Antippflaeche um das 26px-Symbol, ohne das Band hoeher zu machen. */
	width: 44px; height: 44px; margin: 0;
	align-items: center; justify-content: center;
	color: var(--hv-color-nav-text);
	background: none; border: 0; padding: 0;
}
.hv-hdr .hv-hdr-burger .mfn-header-menu-burger i {
	font-size: 26px; line-height: 1; color: inherit;
}
.hv-hdr .hv-hdr-burger .mfn-header-menu-burger:hover { color: var(--hv-white); }
.column_header_burger.mfn-header-tmpl-menu-active .mfn-header-menu-burger {
	visibility: hidden;
}

#mfn-header-template .hv-hdr {
	--mfn-header-menu-sidebar-width: 68.67vw;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar {
	background: rgba(0, 48, 86, 0.9);
	border: 0;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
	z-index: 40;
	overflow: hidden;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar-wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 110px 32px 40px 34px;
	text-align: left;
	height: 100%;
	min-height: 0;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
#mfn-header-template .mfn-header-classic-mobile-menu-close-icon-hidden .mfn-close-icon,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-close-icon {
	display: flex !important;
	position: absolute;
	top: 23px;
	left: 30px;
	right: auto;
	width: 36px;
	height: 36px;
	padding: 0;
	background: url("../assets/svg/icon-nav-close.svg") center / 36px 36px no-repeat;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-close-icon .icon {
	display: none;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	gap: 22px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li {
	width: 100%;
	border: 0;
	margin: 0;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li > a.mfn-menu-link {
	display: block;
	padding: 0;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .menu-label {
	color: var(--hv-white);
	font-family: var(--hv-font-body);
	font-size: var(--hv-fs-copy);
	font-weight: var(--hv-fw-light);
	line-height: 1.25;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar > .mfn-header-menu > li > a.mfn-menu-link:hover .menu-label,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li > a.mfn-menu-link:hover .menu-label {
	color: var(--hv-gold-300);
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li.current-menu-item > a.mfn-menu-link .menu-label,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li.current-menu-ancestor > a.mfn-menu-link .menu-label,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li.current-page-ancestor > a.mfn-menu-link .menu-label,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li.current_page_item > a.mfn-menu-link .menu-label {
	color: var(--hv-white);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-link,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .hv-nav-legal__link,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .hv-nav-kontakt {
	text-decoration: none !important;
}
#mfn-header-template .hv-nav-extra {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	align-items: flex-start;
	gap: 24px;
	margin-top: 28px;
	width: 100%;
	max-width: 100%;
}
#mfn-header-template .hv-nav-kontakt,
#mfn-header-template .hv-nav-kontakt.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 24px;
	min-height: 0;
	height: auto;
	border: 0;
	border-radius: var(--hv-radius-btn);
	background: var(--hv-gold-900);
	color: var(--hv-white);
	font-family: var(--hv-font-body);
	font-size: var(--hv-fs-body-s);
	font-weight: var(--hv-fw-regular);
	line-height: var(--hv-lh-body-s);
	box-shadow: none;
	text-shadow: none;
}
#mfn-header-template .hv-nav-kontakt:hover,
#mfn-header-template .hv-nav-kontakt.button:hover {
	background: var(--hv-gold-950);
	color: var(--hv-white);
}
#mfn-header-template .hv-nav-legal {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#mfn-header-template .hv-nav-legal__link {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hv-blue-300);
	font-family: var(--hv-font-body);
	font-size: var(--hv-fs-caption);
	font-weight: var(--hv-fw-light);
	line-height: var(--hv-lh-body-s);
	cursor: pointer;
	text-align: left;
}
#mfn-header-template .hv-nav-legal__link:hover {
	color: var(--hv-white);
}
@media (max-height: 700px) {
	#mfn-header-template .mfn-header-tmpl-menu-sidebar-wrapper {
		padding-top: 72px;
		padding-bottom: 24px;
	}
	#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-menu {
		gap: 14px;
	}
	#mfn-header-template .hv-nav-extra {
		margin-top: 16px;
		gap: 16px;
	}
}

/* Der Knopf sitzt in der Navigationszeile und laeuft deshalb auf derselben
 * Groesse mit; mit 8px/19px Polsterung wird das Band 42 statt 38px hoch. */
.hv-hdr .hv-hdr-btn .button {
	display: inline-flex; align-items: center; border-radius: var(--hv-radius-btn);
	font-family: var(--hv-font-body); font-weight: var(--hv-fw-medium);
	font-size: var(--hv-fs-body-s); line-height: var(--hv-lh-body-s);
	padding: 11px 24px; min-height: 0; height: auto;
	border: 0; box-shadow: none; text-shadow: none;
}
/* ID plus Klassen, damit die Werte die BeBuilder-Styles in post-37.css
 * ueberschreiben (Schrift navy, Hover helleres Gold). */
#mfn-header-template .hv-hdr .hv-hdr-btn .button {
	color: var(--hv-white);
	font-size: var(--hv-fs-body-s);
	line-height: var(--hv-lh-body-s);
	padding: 11px 24px;
	min-height: 0;
	height: auto;
}
#mfn-header-template .hv-hdr .hv-hdr-btn .button:hover,
#mfn-header-template .hv-hdr .hv-hdr-btn .button:before {
	background: var(--hv-gold-950);
}
#mfn-header-template .hv-hdr .hv-hdr-btn .button:hover {
	color: var(--hv-white);
}

/* ------------------------------------------------------------- Footer */
/* Die Vorlage rechnet die 14px-Zeile mit 22px statt der 21.7px, die sich aus
 * dem Faktor 1.55 ergeben. An dieser Zeilenhoehe haengt das gesamte Raster:
 * Adresse 110, Grid 192, Trennlinie bei 320, Gesamthoehe 387. */
#mfn-footer-template { --hv-ftr-lh: var(--hv-lh-footer); }

#mfn-footer-template {
	position: relative;
	background-color: var(--hv-color-dark-bg);
	color: var(--hv-blue-100);
}
#mfn-footer-template > * { position: relative; z-index: 1; }

/* Drei gleich breite Spalten mit 64px Rinne (Vorlage: 3 x 384 auf 1280). */
.hv-ftr--main .section_wrapper { display: flex; flex-wrap: wrap; column-gap: 64px; }
.hv-ftr--main .mcb-wrap { flex: 1 1 0; width: auto; min-width: 0; }

.hv-ftr-logo .logo-wrapper { display: inline-flex; line-height: 0; margin-bottom: 22px; }
.hv-ftr-logo .logo-wrapper img { display: block; width: auto; height: 60px; }

.hv-ftr .hv-ftr-address address {
	font-style: normal; margin: 0;
	font-size: var(--hv-fs-footer); line-height: var(--hv-ftr-lh);
	font-weight: var(--hv-fw-light);
	color: var(--hv-blue-100);
}

/* Ueberschriften und Menuelinks ueber die ID adressiert, sonst gewinnen
 * BeThemes eigene Zeilenhoehen und Schriftstaerken. */
#mfn-footer-template .hv-ftr-h h4.title {
	color: var(--hv-gold-900); font-family: var(--hv-font-body);
	font-weight: var(--hv-fw-medium); font-size: var(--hv-fs-footer);
	line-height: var(--hv-ftr-lh);
	letter-spacing: normal; text-transform: uppercase; margin: 0 0 9px;
}

#mfn-footer-template .mfn-footer-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 9px;
}
#mfn-footer-template .mfn-footer-menu li { margin: 0; padding: 0; }
#mfn-footer-template .mfn-footer-menu li::before { content: none; }
#mfn-footer-template .mfn-footer-menu a {
	font-family: var(--hv-font-body); font-size: var(--hv-fs-footer);
	font-weight: var(--hv-fw-light); color: var(--hv-blue-100);
}

/* Zeilenhoehe 21.7px plus 9px Luecke ergibt die Schrittweite von 31px. */
#mfn-footer-template .hv-ftr-menu .mfn-footer-menu li {
	font-size: var(--hv-fs-footer); line-height: var(--hv-ftr-lh);
}
#mfn-footer-template .hv-ftr-menu .mfn-footer-menu a {
	display: inline; line-height: var(--hv-ftr-lh);
}
#mfn-footer-template .mfn-footer-menu a:hover { color: var(--hv-white); }

/* Fusszeile: die Trennlinie liegt auf der Inhaltsbreite, nicht randlos.
 * Sie haengt deshalb an einem eigenen Element innerhalb der Polsterung. */
.hv-ftr--bottom .section_wrapper {
	position: relative;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	column-gap: 24px; padding-top: 22px; padding-bottom: 22px;
}
.hv-ftr--bottom .section_wrapper::before {
	content: ""; position: absolute; top: 0;
	left: var(--hv-gutter); right: var(--hv-gutter); height: 1px;
	background: var(--hv-blue-700);
}
.hv-ftr--bottom .mcb-wrap { width: auto; }
.hv-ftr .hv-ftr-copy p {
	margin: 0; font-weight: var(--hv-fw-light);
	font-size: var(--hv-fs-footer); line-height: var(--hv-ftr-lh);
	color: var(--hv-blue-300);
}
#mfn-footer-template .hv-ftr-legal .mfn-footer-menu { flex-direction: row; flex-wrap: wrap; gap: 24px; justify-content: flex-end; }
/* Die horizontale Menuevariante bringt eigene Innenabstaende mit, die den
 * Abstand von 24px verfaelschen wuerden. */
#mfn-footer-template .hv-ftr-legal .mfn-footer-menu a {
	padding: 0;
	font-size: var(--hv-fs-footer); line-height: var(--hv-ftr-lh);
	color: var(--hv-blue-300);
}
#mfn-footer-template .hv-ftr-legal .mfn-footer-menu a:hover { color: var(--hv-white); }

/* =====================================================================
 * NATIVE BeBuilder-Sektionen (.hv-nsec)
 * ===================================================================== */
.hv-nsec { position: relative; }
/* Inhaltsbreite 1280px plus seitliches Padding, damit der Text auf schmalen
 * Viewports nicht am Rand klebt (BeTheme setzt hier kein Padding). */
.hv-nsec .section_wrapper {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	max-width: min(100%, calc(var(--hv-content) + var(--hv-gutter) * 2));
	padding-left: var(--hv-gutter);
	padding-right: var(--hv-gutter);
	margin: 0 auto;
}
/* BeTheme-Clearfix (::after, width 100%) wird im Flex-Raster zur letzten
 * Zeile – row-gap erscheint dann noch einmal unter dem Inhalt. */
.hv-nsec .section_wrapper::after {
	content: none;
	display: none;
}
/* BeTheme legt auf jede Spalte eine Rinne von 0 12px. Sie schiebt den Inhalt
 * um 12px vom Rasterrand weg (80 wird zu 92) und addiert sich zusaetzlich auf
 * den column-gap, wodurch die Kartenluecken 48 statt 24 breit werden.
 * Die Abstaende steuert hier durchgehend column-gap, deshalb aufheben. */
.hv-nsec .mcb-column-inner { margin-left: 0; margin-right: 0; }

/* ---------- Typografie ---------- */
.hv-nsec .title {
	font-family: var(--hv-font-head); font-weight: var(--hv-fw-medium);
	color: var(--hv-color-heading); letter-spacing: -0.01em; margin: 0;
}
.hv-nsec h1.title { font-size: var(--hv-fs-display); line-height: var(--hv-lh-display); letter-spacing: -0.02em; }
.hv-nsec h2.title { font-size: var(--hv-fs-h2); line-height: var(--hv-lh-h2); }
.hv-nsec h3.title { font-size: var(--hv-fs-h3); line-height: var(--hv-lh-h3); }
.hv-nsec .column_attr,
.hv-nsec .column_attr p {
	font-family: var(--hv-font-body); color: var(--hv-neutral-700);
	font-size: var(--hv-fs-copy); line-height: var(--hv-lh-copy);
}
.hv-nsec .column_attr p { margin: 0 0 1em; }
.hv-nsec .column_attr p:last-child { margin-bottom: 0; }
.hv-nsec .mcb-column { margin-bottom: 0; }

.hv-nsec .hv-lead .column_attr p { font-size: var(--hv-fs-copy); line-height: var(--hv-lh-copy); }
.hv-nsec .hv-sub .column_attr p { font-size: var(--hv-fs-copy); line-height: var(--hv-lh-copy); color: var(--hv-color-text-muted); }
.hv-nsec .hv-center .column_attr,
.hv-nsec .hv-center .title { text-align: center; }

/* ---------- Vertikaler Rhythmus (Figma) ----------
 * BeTheme gibt jedem Element ein margin-bottom von 40px – hier zuruecksetzen,
 * damit die Abstaende aus dem Design gelten. */
.hv-nsec .mcb-column-inner { margin-bottom: 0; }
.hv-nsec .column_heading { margin-bottom: 14px; }
.hv-nsec .column_column { margin-bottom: 18px; }
.hv-nsec .column_column:last-child { margin-bottom: 0; }
.hv-nsec .column_button { margin-bottom: 0; margin-top: 12px; }

/* Sektionskopf (Heading + Subline) mit Abstand zu den Karten */
.hv-nsec .hv-sec-head { margin-bottom: 44px; }
.hv-nsec .hv-sec-head .column_heading { margin-bottom: 12px; }
.hv-nsec .hv-sec-head .column_column { margin-bottom: 0; }
.hv-nsec .hv-sec-head--center .column_attr { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Zentrierte CTA unter einem Karten-Raster */
.hv-nsec .hv-cta-center { margin-top: 44px; }
.hv-nsec .hv-cta-center .column_button { text-align: center; margin-top: 0; }

/* =====================================================================
 * Section-Hintergruende
 * ===================================================================== */

/* Hero: vollflaechiges Bild, Text links darueber (dunkle Schrift).
 * Das Motiv haengt als Section-Hintergrund im BeBuilder (Section >
 * Background) und laesst sich dort austauschen. Hier steht nur, was zur
 * Lesbarkeit gehoert. */
.hv-nsec--hero {
	position: relative;
	padding: 260px 0 !important;
	background-color: #dfe3e2;
	background-size: cover;
	background-position: 70% center;
	background-repeat: no-repeat;
}
/* In der grossen Ansicht liegt das Foto unberuehrt da: die Textspalte steht
 * links auf der hellen Fensterflaeche und braucht keine Aufhellung. Erst wenn
 * der Text schmaleren Viewports ueber das Motiv rueckt, kommt weiter unten
 * eine Ebene dazu (siehe Responsive). */
.hv-nsec--hero > .section_wrapper { position: relative; z-index: 1; }
.hv-nsec--hero .hv-lead .column_attr p { color: var(--hv-neutral-800); max-width: 460px; }
.hv-nsec--hero .column_heading { margin-bottom: 22px; }

/* Helle Flaechen: sehr feines Korn, damit sie nicht steril flach wirken */
.hv-nsec--intro,
.hv-nsec--ways,
.hv-nsec--group,
.hv-nsec--blog,
.hv-nsec--ir {
	background-color: var(--hv-white);
	background-image: var(--hv-noise-soft);
	background-repeat: repeat;
}
.hv-nsec--intro .hv-intro-text .column_attr p { color: var(--hv-neutral-700); }
.hv-nsec--intro .hv-intro-head { text-align: left; }
/* Diese Ueberschrift steht groesser als die uebrige h2-Skala. */
.hv-nsec .hv-intro-head h2.title { font-size: 2.375rem; }

/* Partnerschaft: flaches Navy mit feinem Korn – kein Verlauf. Nachgemessen
 * an der Vorlage: alle vier Quadranten identisch #043257, Streuung des Korns
 * rund 3,7 Helligkeitsstufen. Die frueher hier liegende Wolkentextur
 * (textur-partnerschaft.jpg) war falsch. */
.hv-nsec--partner {
	position: relative;
	overflow: hidden;
	background-color: var(--hv-blue-900);
	background-image: none;
}
/* Koernung_A aus dem Figma-Import als Flaeche hinter Text und Fotos. */
.hv-nsec--partner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../assets/img/koernung-a.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.hv-nsec--partner > .section_wrapper { position: relative; z-index: 1; }
/* Newsletter: Koernung_B als Flaeche hinter Formular und Bild. */
.section.hv-nsec--newsletter {
	position: relative;
	overflow: hidden;
	background-color: var(--hv-blue-900);
	background-image: none !important;
}
.section.hv-nsec--newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../assets/img/koernung-b.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.hv-nsec--newsletter > .section_wrapper { position: relative; z-index: 1; }
.hv-nsec--partner .title,
.hv-nsec--newsletter .title { color: var(--hv-white); }
.hv-nsec--partner .column_attr,
.hv-nsec--partner .column_attr p,
.hv-nsec--newsletter .column_attr,
.hv-nsec--newsletter .column_attr p { color: rgba(255,255,255,.82); }
.hv-nsec--partner .hv-sub .column_attr p,
.hv-nsec--newsletter .hv-sub .column_attr p { color: rgba(255,255,255,.82); }

/* =====================================================================
 * Karten (icon_box) – Bild oben, hellgraue Textflaeche, ohne Radius
 * ===================================================================== */
.hv-nsec .hv-card { margin-bottom: 0; }
.hv-nsec .hv-card .icon_box {
	background: var(--hv-color-card-bg);
	/* Die Vorlage zeigt rundum eine feine Linie, auch oben ueber dem Foto. */
	border: 1px solid var(--hv-color-card-border); border-radius: 0; overflow: visible; height: 100%;
	display: flex; flex-direction: column; text-align: left;
	/* BeTheme setzt bei icon_position_left ein padding-left von 145px */
	margin: 0 !important; padding: 0 !important;
	box-shadow: none; transition: none;
}

/* Gleich hohe Karten innerhalb einer Reihe.
 * BeTheme setzt auf .mcb-wrap-inner align-content: flex-start – das verhindert
 * das Strecken der Spalten und muss ueberschrieben werden. */
.hv-nsec--ways .section_wrapper,
.hv-nsec--group .section_wrapper,
.hv-nsec--blog .section_wrapper {
	display: flex; flex-wrap: wrap; align-items: stretch;
	column-gap: var(--hv-col-gap);
}
/* Diese Sektionen trugen ihren Spaltenabstand bisher ueber die BeTheme-Rinne.
 * Nachdem die weg ist, uebernimmt ihn column-gap. */
.hv-nsec--newsletter .section_wrapper,
.hv-nsec--ir .section_wrapper {
	display: flex; flex-wrap: wrap;
	column-gap: var(--hv-col-gap);
}
/* Im Intro sitzt die Headline in der Vorlage auf x=80, der Fliesstext auf
 * x=592 – die Spalten stehen also an den beiden Rasterraendern. */
.hv-nsec--intro .section_wrapper {
	display: flex; flex-wrap: wrap; justify-content: space-between;
}
/* Spaltenbreiten um die Rinne reduzieren: (100/n)% - gap*(n-1)/n.
 * Je Breakpoint separat, damit die tablet-/mobile-Klassen von BeTheme
 * (768-959px bzw. bis 767px) nicht ueberschrieben werden. */
@media (min-width: 960px) {
	.hv-nsec .section_wrapper > .mcb-wrap.one-fourth { width: calc(25% - var(--hv-col-gap) * 0.75); }
	.hv-nsec .section_wrapper > .mcb-wrap.one-third  { width: calc(33.3333% - var(--hv-col-gap) * 0.6667); }
	.hv-nsec .section_wrapper > .mcb-wrap.one-second { width: calc(50% - var(--hv-col-gap) * 0.5); }
}
@media (min-width: 768px) and (max-width: 959px) {
	.hv-nsec .section_wrapper > .mcb-wrap.tablet-one-second { width: calc(50% - var(--hv-col-gap) * 0.5); }
	.hv-nsec .section_wrapper > .mcb-wrap.tablet-one { width: 100%; }
}
@media (max-width: 767px) {
	.hv-nsec .section_wrapper > .mcb-wrap.mobile-one { width: 100%; }
}
/* Gestapelte Karten brauchen den Abstand vertikal */
@media (max-width: 959px) {
	.hv-nsec .section_wrapper > .mcb-wrap:has(.hv-card) { margin-bottom: var(--hv-col-gap); }
}
.hv-nsec .mcb-wrap:has(.hv-card) { display: flex; align-items: stretch; overflow: visible; }
.hv-nsec .mcb-wrap:has(.hv-card) .mcb-wrap-inner,
.hv-nsec .hv-card,
.hv-nsec .hv-card .mcb-column-inner {
	display: flex; width: 100%; align-items: stretch; align-content: stretch;
	overflow: visible;
}
.hv-nsec .hv-card .mcb-column-inner > * { width: 100%; align-self: stretch; }
.hv-nsec .hv-card .icon_box { flex: 1; }
/* Hover: leichter Schatten rundum die Karte, der Pfeil rueckt ein Stueck nach.
 * Beide Lagen ohne Versatz, damit der Schatten auf allen vier Seiten gleich
 * stark liegt und die Karte nicht nach oben gedrueckt wirkt.
 * transform: none haelt BeThemes eigenes Skalieren der icon_box weiterhin auf. */
.hv-nsec .hv-card .icon_box { transition: box-shadow .22s ease-out; }
.hv-nsec .hv-card .icon_box:hover,
.hv-nsec .hv-card:hover .icon_box {
	transform: none;
	box-shadow: 0 0 8px rgba(0, 48, 86, .07), 0 0 28px rgba(0, 48, 86, .12);
}
.hv-nsec .hv-card:hover .hv-link-arrow__pfeil { transform: translateX(8px); }
.hv-nsec .hv-card .image_wrapper {
	height: 176px; margin: 0; border-radius: 0;
	background-color: #cbd3d3;
	background-image: var(--hv-noise-soft), linear-gradient(135deg, #b9c6d1 0%, #dcd5c6 100%);
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	background-position: top left, center;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hv-nsec .hv-card .image_wrapper img {
	width: 100% !important; height: auto; align-self: stretch; object-fit: cover;
	opacity: 1; margin: 0; border-radius: 0;
}
.hv-nsec .hv-card .desc_wrapper {
	/* In der Vorlage steht der Inhalt 28px von der Aussenkante. Der Rahmen liegt
	 * dort innen, in CSS kommt er zum padding hinzu – deshalb 27 statt 28. */
	padding: 27px; display: flex; flex-direction: column; gap: 12px; flex: 1; text-align: left;
}
.hv-nsec .hv-card .title { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.hv-card-meta { display: flex; align-items: center; gap: 12px; }
.hv-card-label {
	font-family: var(--hv-font-body); font-size: var(--hv-fs-caption); font-weight: var(--hv-fw-regular);
	letter-spacing: .02em; color: var(--hv-blue-900); background: var(--hv-color-chip-bg);
	/* An der Vorlage nachgemessen: "Regulierung" ergibt 80x26. */
	padding: 6px 7px; border-radius: 0; line-height: 1.167;
}
.hv-card-read {
	font-family: var(--hv-font-body); font-size: var(--hv-fs-caption);
	color: var(--hv-neutral-500); line-height: 1.2;
}
.hv-card-title {
	font-family: var(--hv-font-head); font-weight: var(--hv-fw-medium);
	font-size: var(--hv-fs-h4); line-height: var(--hv-lh-h4); color: var(--hv-color-heading);
}
.hv-nsec .hv-card .desc {
	color: var(--hv-color-text-muted); font-size: var(--hv-fs-card); line-height: var(--hv-lh-card);
	display: flex; flex-direction: column; gap: 16px; flex: 1;
}
.hv-nsec .hv-card .desc p { margin: 0; flex: 1; }

/* Breite Nachfolge-Karte: Bild links / Text rechts */
.hv-nsec .hv-card--wide .icon_box { display: flex; flex-direction: row; align-items: stretch; }
.hv-nsec .hv-card--wide .image_wrapper {
	position: static !important; width: 52% !important; height: auto;
	align-self: stretch; min-height: 100%; margin: 0 !important;
}
.hv-nsec .hv-card--wide .image_wrapper img { height: 100%; }
.hv-nsec .hv-card--wide .desc_wrapper { position: static !important; width: 48% !important; padding: 32px; justify-content: center; }
/* Textblock als Ganzes zentrieren statt den Link nach unten zu druecken */
.hv-nsec .hv-card--wide .desc,
.hv-nsec .hv-card--wide .desc p { flex: 0 0 auto; }

/* Firmen-Karten: dunkle Logoflaeche, weisse Textflaeche mit feiner Kontur */
.hv-nsec--group .hv-card .icon_box { background: var(--hv-white); border: 1px solid var(--hv-color-card-border); }
.hv-nsec--group .hv-card .image_wrapper {
	height: 188px;
	background-color: #304768;
	background-image: url("../assets/img/textur-logokachel.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
/* Firmenlogos liegen weiss vor und sitzen frei zentriert auf der Kachel */
.hv-nsec--group .hv-card .image_wrapper img {
	width: auto !important; height: auto; align-self: center; object-fit: contain;
	max-width: 62%; max-height: 54px; opacity: 1;
}
.hv-nsec--group .hv-card .desc_wrapper { padding: 28px; }

.hv-nsec .section_wrapper > .mcb-wrap.hv-unternehmen-liste { width: 100%; }
.hv-nsec .hv-unternehmen-liste .column_attr { padding: 0; background: none; border: 0; min-height: 0; }

.hv-unternehmen-track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 80px;
}
.hv-unternehmen-track > .hv-card {
	width: calc((100% - 80px) / 2);
	max-width: 600px;
	display: flex;
	margin: 0;
}
.hv-unternehmen-track > .hv-card .icon_box { width: 100%; }
/* Hover-Schein braucht rundum Platz. overflow:hidden der Viewports wuerde
 * ihn sonst auf allen vier Seiten abschneiden. content-box + Padding halten
 * die Kartenbreite, der negative Margin holt das Layout zurueck. */
.hv-unternehmen.is-slider .hv-unternehmen-viewport,
.hv-schritte.is-slider .hv-schritte-viewport {
	overflow: hidden;
	box-sizing: content-box;
	width: 100%;
	padding: var(--hv-shadow-gutter);
	margin: calc(var(--hv-shadow-gutter) * -1);
}
/* Beitraege: Viewport laesst den Hover-Schein durch. Nachbarkarten
 * blendet slider.js per .is-inview aus, damit sie nicht ueberstehen. */
.hv-beitraege.is-slider .hv-beitraege-viewport {
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
}
.hv-beitraege.is-slider.is-ready .hv-beitraege-viewport {
	overflow: visible;
}
.hv-beitraege.is-slider .hv-card:not(.is-inview) {
	visibility: hidden;
	pointer-events: none;
}
.hv-unternehmen,
.hv-unternehmen-liste,
.hv-unternehmen-liste .column_attr,
.hv-unternehmen-liste .mcb-wrap-inner,
.hv-nsec--ways,
.hv-nsec--blog,
.hv-nsec--group,
.hv-nsec--ways .section_wrapper,
.hv-nsec--blog .section_wrapper,
.hv-nsec--group .section_wrapper {
	overflow: visible;
}
.hv-unternehmen.is-slider .hv-unternehmen-track {
	flex-wrap: nowrap;
	transition: transform .35s ease;
	will-change: transform;
}
.hv-unternehmen.is-slider .hv-card {
	flex: 0 0 calc((100% - 80px) / 2);
	max-width: 600px;
	width: auto;
}
.hv-unternehmen .hv-slider-nav { margin-top: 32px; }
.hv-unternehmen .hv-slider-btn:disabled { opacity: .35; cursor: default; }
.hv-unternehmen .hv-slider-btn:disabled:hover {
	background: var(--hv-blue-900);
	color: var(--hv-white);
}

@media (max-width: 1239px) {
	.hv-unternehmen-track { gap: var(--hv-col-gap); }
	.hv-unternehmen-track > .hv-card { width: calc((100% - var(--hv-col-gap)) / 2); }
	.hv-unternehmen.is-slider .hv-card { flex-basis: calc((100% - var(--hv-col-gap)) / 2); }
}
@media (max-width: 767px) {
	.hv-unternehmen-track > .hv-card,
	.hv-unternehmen.is-slider .hv-card { width: 100%; flex-basis: 100%; }
}

/* Slider-Steuerung unter den Firmenkarten */
.hv-nsec--group .hv-slider-row { margin-top: 32px; }
.hv-slider-nav { position: relative; display: flex; align-items: center; }
.hv-slider-arrows { display: flex; gap: 12px; }
.hv-slider-btn {
	width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: var(--hv-blue-900); color: var(--hv-white);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .2s ease;
}
.hv-slider-btn:hover { background: var(--hv-color-primary-hover); color: var(--hv-blue-900); }
.hv-slider-btn svg { width: 17px; height: 17px; }
.hv-slider-dots {
	position: absolute; left: 50%; transform: translateX(-50%);
	display: flex; align-items: center; gap: 7px;
}
.hv-slider-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--hv-neutral-300); }
.hv-slider-dots span.is-active { background: var(--hv-blue-900); }

/* Blog-Karten: gleiche Grauflaeche wie die Leistungskarten */
.hv-nsec--blog .hv-card .image_wrapper { height: 188px; }

/* =====================================================================
 * Medien (image-Platzhalter) – ohne Radius
 * ===================================================================== */
.hv-nsec .hv-media .image_frame { margin: 0; width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.hv-nsec .hv-media .image_wrapper {
	border-radius: 0;
	background-color: #cbd3d3;
	background-image: var(--hv-noise-soft), linear-gradient(135deg, #b9c6d1 0%, #dcd5c6 100%);
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	background-position: top left, center;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hv-nsec .hv-media .image_wrapper img {
	width: 100% !important; height: auto; align-self: stretch; object-fit: cover;
	opacity: 1; margin: 0; border-radius: 0;
}

.hv-nsec .hv-media--partner-sm .image_wrapper { min-height: 280px; }
/* Der Bildausschnitt der Vorlage ist enger gefasst als ein schlichtes
 * object-fit: cover – eingemessen 1.24 Zoom und 12px Versatz nach links.
 * Der Rahmen schneidet den Ueberstand ab. */
.hv-nsec .hv-media--partner-sm .image_frame { overflow: hidden; }
/* In der Vorlage ist dieses Foto waagerecht gespiegelt: die Frau steht links.
 * Die Spiegelung sitzt auf dem Wrapper, nicht auf dem img – auf dem img liegt
 * bereits BeThemes Hover-Transform und ueberschreibt sie. */
.hv-nsec .hv-media--partner-sm .image_wrapper {
	transform: translateX(-12px) scale(-1.24, 1.24);
}
.hv-nsec .hv-media--partner-lg .image_wrapper { min-height: 570px; }

/* Partnerschaft: Textspalte 700px, Bildspalte 580px (Figma).
 * Das kleine Bild sitzt rechtsbuendig in der Textspalte und haelt zum grossen
 * Bild dieselbe Rinne wie die uebrigen Raster. */
@media (min-width: 960px) {
	.hv-nsec--partner .section_wrapper { column-gap: 0; }
	.hv-nsec--partner .section_wrapper > .mcb-wrap:first-child { width: 54.6875%; }
	.hv-nsec--partner .section_wrapper > .mcb-wrap:last-child { width: 45.3125%; }
	/* Linksbuendig auf der Textkante, 406x280 (an der Vorlage nachgemessen). */
	.hv-nsec .hv-media--partner-sm {
		width: 406px; max-width: none;
		margin: 0 auto 30px 0;
	}
	.hv-nsec--partner .hv-partner-text .column_attr { max-width: 598px; }
}

/* Typografie dieser Sektion weicht von der Standardskala ab */
.hv-nsec .hv-partner-head h2.title { font-size: 2rem; }
.hv-nsec--partner .column_attr p {
	font-size: var(--hv-fs-copy); line-height: var(--hv-lh-copy);
}
.hv-nsec .hv-media--news .image_wrapper { min-height: 400px; }
.hv-nsec .hv-media--ir .image_wrapper { min-height: 430px; }

/* =====================================================================
 * Investoren-Liste (list) – kompakte Zeilen mit Trennlinien
 * ===================================================================== */
.hv-nsec--ir .hv-ir-item { margin-bottom: 0; }
.hv-nsec--ir .hv-ir-item .list_item { margin: 0; padding: 0; border: 0; }
.hv-nsec--ir .hv-ir-item a {
	display: flex; align-items: center; gap: 14px;
	padding: 13px 0; border-bottom: 1px solid var(--hv-color-border);
	text-decoration: none;
}
/* BeTheme reserviert im lists_2-Stil eine 80px hohe Icon-Spalte */
.hv-nsec--ir .hv-ir-item .list_item,
.hv-nsec--ir .hv-ir-item a,
.hv-nsec--ir .hv-ir-item .list_left {
	overflow: visible;
}
.hv-nsec--ir .hv-ir-item .list_left {
	width: auto; min-width: 0; height: auto; min-height: 0;
	margin: 0; padding: 0; align-items: center; flex: 0 0 auto;
}
.hv-nsec--ir .hv-ir-item .list_left img {
	width: 27px; height: 27px; margin: 0; padding: 0;
	object-fit: contain; display: block;
	overflow: visible;
	transform-origin: left center;
	transition: transform .18s ease-out;
}
.hv-nsec--ir .hv-ir-item .list_left img[src*="icon-adhoc"] {
	width: 30px;
	height: 30px;
	object-position: left center;
	margin-left: -1px;
}
.hv-nsec--ir .hv-ir-item .list_right { margin: 0; padding: 0; }
.hv-nsec--ir .hv-ir-item .list_right .title,
.hv-nsec--ir .hv-ir-item .list_right h5.title {
	margin: 0;
	font-family: var(--hv-font-body);
	font-weight: var(--hv-fw-light);
	font-size: var(--hv-fs-body-l);
	line-height: var(--hv-lh-h4);
	color: var(--hv-blue-900);
	transition: color .18s ease-out;
}
.hv-nsec--ir .hv-ir-item a:hover .list_right .title,
.hv-nsec--ir .hv-ir-item a:hover .list_right h5.title,
.hv-nsec--ir .hv-ir-item a:focus-visible .list_right .title,
.hv-nsec--ir .hv-ir-item a:focus-visible .list_right h5.title {
	color: var(--hv-color-accent);
}
.hv-nsec--ir .hv-ir-item a:hover .list_left img,
.hv-nsec--ir .hv-ir-item a:focus-visible .list_left img {
	transform: scale(1.08);
}
.hv-nsec--ir .hv-ir-item .list_right .desc { display: none; }
/* Erster Listenpunkt folgt auf die Textspalte und bekommt die obere Trennlinie */
.hv-nsec--ir .column_column + .hv-ir-item a { border-top: 1px solid var(--hv-color-border); }
.hv-nsec--ir .column_column + .hv-ir-item { margin-top: 6px; }
.hv-nsec--ir .hv-btn-native { margin-top: 28px; }

/* =====================================================================
 * Native Buttons – Pills
 * ===================================================================== */
.hv-nsec .hv-btn-native .button {
	display: inline-flex; align-items: center; border-radius: var(--hv-radius-btn);
	font-family: var(--hv-font-body); font-weight: var(--hv-fw-medium);
	font-size: var(--hv-fs-body-s); line-height: var(--hv-lh-body-s);
	padding: 11px 24px; border: 0; box-shadow: none; text-shadow: none;
}
/* Hover: Gold dunkler, Navy auf blue-100 mit navy-Schrift.
 * Spezifitaet ueber BeBuilder-Item-CSS. */
body .mcb-section .mcb-wrap .hv-btn-gold .button,
body .mcb-section .mcb-wrap .hv-btn-gold .button:hover {
	color: var(--hv-white);
}
body .mcb-section .mcb-wrap .hv-btn-gold .button:hover,
body .mcb-section .mcb-wrap .hv-btn-gold .button:before {
	background: var(--hv-gold-950);
}
body .mcb-section .mcb-wrap .hv-btn-primary .button:hover,
body .mcb-section .mcb-wrap .hv-btn-primary .button:before,
body .mcb-section .mcb-wrap .hv-btn-navy .button:hover,
body .mcb-section .mcb-wrap .hv-btn-navy .button:before {
	background: var(--hv-blue-100);
}
body .mcb-section .mcb-wrap .hv-btn-primary .button:hover,
body .mcb-section .mcb-wrap .hv-btn-navy .button:hover {
	color: var(--hv-blue-900);
}

body {
	--mfn-button-bg-hover: var(--hv-blue-100);
	--mfn-button-color-hover: var(--hv-blue-900);
	--mfn-button-icon-color-hover: var(--hv-blue-900);
	--mfn-button-theme-bg-hover: var(--hv-gold-950);
}

/* =====================================================================
 * Newsletter-Formular (im nativen Text-Element)
 * ===================================================================== */
.hv-nsec--newsletter .column_heading { margin-bottom: 16px; }
.hv-newsletter__form { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.hv-newsletter__form .wpcf7-form-control-wrap { flex: 1; min-width: 240px; max-width: 407px; margin: 0; }
.hv-newsletter__form input.wpcf7-submit { margin: 0; }
.hv-nsec--newsletter .hv-newsletter__form input.wpcf7-submit.hv-btn--gold,
.hv-nsec--newsletter .hv-newsletter__form input.wpcf7-submit {
	background: var(--hv-gold-900);
	color: var(--hv-white);
	border: 0;
	border-radius: var(--hv-radius-btn);
	height: auto;
	min-height: 0;
	padding: 11px 24px;
	font-family: var(--hv-font-body);
	font-weight: var(--hv-fw-medium);
	font-size: var(--hv-fs-body-s);
	line-height: var(--hv-lh-body-s);
	box-shadow: none;
	text-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}
.hv-nsec--newsletter .hv-newsletter__form input.wpcf7-submit:hover {
	background: var(--hv-gold-950);
	color: var(--hv-white);
}
/* Mindestens 16px: darunter zoomt Safari auf dem iPhone beim Antippen des
 * Feldes automatisch in die Seite hinein. */
.hv-newsletter__form input[type="email"],
.hv-newsletter__form input.wpcf7-text,
.hv-newsletter__form input:not([type="submit"]) {
	flex: 1; min-width: 240px; max-width: 407px; height: 46px; padding: 12px 14px; border-radius: 0;
	border: 1px solid #cccdce; background: var(--hv-white); color: var(--hv-neutral-900);
	font-family: var(--hv-font-body); font-size: var(--hv-fs-body-s); font-weight: 200;
}
/* Button bleibt Pill neben dem Feld, nicht auf Feldhoehe gestreckt */
.hv-newsletter__form .hv-btn,
.hv-newsletter__form input.wpcf7-submit.hv-btn {
	height: auto; padding: 11px 24px; display: inline-flex; align-items: center; justify-content: center;
}
.hv-newsletter__form input::placeholder { color: var(--hv-neutral-500); }
.hv-nsec--newsletter .hv-fineprint {
	margin: 16px 0 0 !important;
	color: rgba(255,255,255,.6) !important;
}
/* BeTheme .column_attr p haelt den Hinweis sonst auf 18px. */
.hv-nsec--newsletter .column_attr p.hv-fineprint {
	font-size: var(--hv-fs-body-s);
	line-height: var(--hv-lh-body-s);
}

/* =====================================================================
 * Responsive
 * ===================================================================== */
/* Breakpoints folgen BeTheme: Tablet 768-959px, Mobile bis 767px */

/* Hero: Das Foto wird mit "cover" beschnitten, je schmaler das Fenster, desto
 * weiter rueckt die Gruppe nach links unter die Textspalte. Gemessen hinter
 * dem Fliesstext betraegt der Kontrast bei 1366px noch 5,0:1 und faellt bei
 * 1280px auf 3,3:1. Ab hier kommt deshalb eine Aufhellung dazu; in der
 * grossen Ansicht bleibt das Bild unangetastet. */
@media (max-width: 1365px) {
	.hv-nsec--hero::before {
		content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
		background-image: linear-gradient(90deg,
			rgba(255,255,255,.92) 0%,
			rgba(255,255,255,.84) 24%,
			rgba(255,255,255,.40) 45%,
			rgba(255,255,255,0) 62%);
	}
}

@media (max-width: 959px) {
	:root { --hv-gutter: 40px; }

	/* Ab hier uebernimmt der Burger. Bei 960px bleiben zwischen Logo, Menue
	 * und Knopf noch 66px Luft, bei 768px nur noch 10px – die Leiste wuerde
	 * dort aneinanderkleben. Die Liste im Klappfeld traegt denselben
	 * Klassennamen, deshalb ist hier nur die Leiste im Band gemeint; ueber die
	 * ID adressiert, weil die Grundregel weiter oben ebenfalls dort haengt. */
	#mfn-header-template .hv-hdr-menu .mfn-header-menu { display: none; }
	.hv-hdr .hv-hdr-burger { display: block; }
	.hv-hdr .hv-hdr-btn { display: none; }
	#mfn-header-template .mfn-header-tmpl-menu-sidebar,
	#mfn-header-template .mfn-header-tmpl-menu-sidebar.mfn-header-classic-mobile-menu {
		top: 0 !important;
		max-height: none !important;
		height: 100vh !important;
		width: var(--mfn-header-menu-sidebar-width);
	}

	.hv-nsec--hero { padding: 160px 0 !important; }
	/* Die Textspalte nimmt hier fast die ganze Breite ein, deshalb reicht die
	 * Aufhellung weiter nach rechts. */
	.hv-nsec--hero::before {
		background-image: linear-gradient(90deg,
			rgba(255,255,255,.92) 0%,
			rgba(255,255,255,.86) 55%,
			rgba(255,255,255,.55) 100%);
	}
	.hv-nsec .hv-media--partner-lg .image_wrapper { min-height: 380px; }
	.hv-nsec .hv-card--wide .icon_box { flex-direction: column; }
	.hv-nsec .hv-card--wide .image_wrapper { width: 100% !important; min-height: 0; height: 176px; }
	.hv-nsec .hv-card--wide .desc_wrapper { width: 100% !important; padding: 24px; }
	.hv-nsec .hv-media .image_wrapper { min-height: 280px !important; }
	.hv-nsec .hv-media--partner-sm { max-width: none; margin: 0 0 28px 0; }
	/* Marke ueber die volle Breite, Menuespalten daneben */
	.hv-ftr--main .section_wrapper { column-gap: 40px; }
	.hv-ftr--main .mcb-wrap:nth-child(1) { flex: 0 0 100%; margin-bottom: 40px; }
	.hv-ftr--main .mcb-wrap:nth-child(2),
	.hv-ftr--main .mcb-wrap:nth-child(3) { flex: 0 0 calc(50% - 20px); }
}
@media (max-width: 767px) {
	:root { --hv-gutter: 20px; --hv-fs-display: 2.375rem; --hv-fs-h1: 2rem; --hv-fs-h2: 1.625rem; }
	/* Mit der uebrigen h2-Skala mitverkleinert, sonst waere sie am Handy
	 * groesser als die Hero-Zeile. */
	.hv-nsec .hv-intro-head h2.title { font-size: 1.8125rem; }
	/* BeTheme legt den Seitenrand auf schmalen Viewports auf die Sektion und
	 * nimmt ihn dem Wrapper weg. Wir bleiben bei unserem eigenen Rand. */
	#mfn-header-template .section_wrapper {
		padding-left: var(--hv-gutter) !important;
		padding-right: var(--hv-gutter) !important;
	}
	#mfn-footer-template .mcb-section {
		max-width: none; padding-left: 0; padding-right: 0;
	}
	.hv-ftr--bottom .section_wrapper { justify-content: flex-start; }
	.hv-ftr .hv-ftr-legal .mfn-footer-menu { justify-content: flex-start; }
	/* Mobil: Bild zuerst als Streifen, Text darunter auf weiss. */
	.hv-nsec--hero {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 0 0 48px !important;
		background-color: var(--hv-white);
		background-size: 0 0;
	}
	.hv-nsec--hero::after { content: none; display: none; }
	.hv-nsec--hero::before {
		content: "";
		display: block;
		position: static;
		inset: auto;
		width: 100%;
		height: 280px;
		flex: 0 0 auto;
		pointer-events: none;
		background-image: inherit;
		background-size: cover;
		background-position: 72% 40%;
		background-repeat: no-repeat;
		background-color: #dfe3e2;
	}
	.hv-nsec--hero > .section_wrapper {
		padding-top: 32px;
	}
}

/* =====================================================================
 * Reduzierte Bewegung
 * Muss am Dateiende stehen: die Karten-Hover-Regeln weiter oben haben
 * dieselbe Spezifitaet und wuerden sonst gewinnen.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hv-nsec .hv-card .icon_box,
	.hv-link-arrow__pfeil { transition: none; }
	.hv-nsec .hv-card:hover .hv-link-arrow__pfeil,
	.hv-link-arrow:hover .hv-link-arrow__pfeil { transform: none; }
}