/* ------------------------------------------------------------------------- */
/* Reset, Grundtypografie, Header, Navigation und Hero stehen im konsolidierten Relaunch-Abschnitt. */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Allgemeines Layout, Header, Navigation und Hero stehen im konsolidierten Relaunch-Abschnitt. */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* ----------------------------- WRAPPER START ----------------------------- */

.wrapper { padding: 0 20px; }

/* ------------------------------ WRAPPER END ------------------------------ */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* ---------------------------- BREADCRUMB START --------------------------- */

.sli {
	background: #eee;
	margin: 0 auto;
	max-width: 1180px;
	padding: 0 88px 0 40px;
	border-bottom: 1px solid #ccc;
	position: relative;
	z-index: 1;
	height: 41px;
}

.sli_inner { float: left; }

.sli form {
	float: right;
	width: 100%;
	max-width: 292px;
	position: relative;
	border-left: 1px solid #ccc;
}

.sli input {
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding: 0 15px 0 30px;
	background: none;
	font-size: 16px;
	font-weight: 300;
}

.sli form:hover input, .sli input:active, .sli input:focus { background: #fff; }

.sli button {
	position: absolute;
	right: 8px;
	top: 8px;
	width: 25px;
	height: 25px;
	color: #e30620;
	background: none;
	cursor: pointer;
	font-size: 16px;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	transition: 0.3s all;
}

.sli button:hover { color: #bd0711; }

.sli button:before {
	font-family: 'mws_iconset';
	content: '\e808';
	vertical-align: 1px;
}

.sli_info {
	border-right: 1px solid #ddd;
	display: inline-block;
	padding: 10px 10px 10px 0;
}

.content .sli .sli_link {
	padding: 10px 6px 9px;
	background: none;
	display: inline-block;
	text-decoration: none;
	color: #555;
}

.content .sli .sli_link:hover, .content .sli a.sli_link:last-child { text-decoration: underline; }

.content .sli a.sli_link:last-child:hover { color: #e30620; }

.content .sli .sli_spacer:before {
	content: "»";
	display: inline-block;
	padding: 0 3px;
}

.content .sli .print, .content .sli .share {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 44px;
	text-align: center;
	background: none;
	line-height: 40px;
	color: #e30620;
	border-left: 1px solid #ccc;
	cursor: pointer;
}

.content .sli .print:hover, .content .sli .share:hover {
	text-decoration: none !important;
	background: #fafafa;
}

.content .sli .print:before, .content .sli .share:before { font-family: 'mws_iconset'; }

.content .sli .print:before { content: '\e807'; }

.content .sli .share { right: 44px; }

.content .sli .share:before { content: '\e811'; }

/* ----------------------------- BREADCRUMB END ---------------------------- */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* ------------------------------ BOXES START ------------------------------ */

.boxes {
	margin: 25px auto;
	max-width: 1180px;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.boxes .box {
	float: left;
	width: 31.8%;
	background-color: #ddd;
	background-size:cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	box-shadow: var(--mhg-shadow-soft);
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	transition: 0.3s all;
}

.boxes .box span {
	display: block;
	width: 100%;
	padding: 25px 40px;
	background: rgba(227,6,32,0.8);
	color: #fff;
	font-size: 16px;
	height: 100%;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	transition: 0.3s all;
}

.boxes .box span h2 {
	color: #fff;
	font-size: 18px;
	border-bottom:1px solid #fff;
	padding-bottom:12px;
	margin-bottom:12px;
}

.boxes .box:hover span { background: rgba(227,6,32,0.92); }

.boxes .box span a.btn {
	color: #e30620;
	background: #fff;
}

/* ------------------------------- BOXES END ------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* ----------------------------- CONTENT START ----------------------------- */

.content {
	margin: 0 auto 20px;
	max-width: 1180px;
	position: relative;
	background: #fff;
	min-height: 380px;
}

.content h1 { padding-bottom: 10px; }

.content:before {
	background: #fff;
	content: "";
	height: 100%;
	position: absolute;
	right: 0;
	top: 70px;
	height: calc(100% - 105px);
	width: calc(0% + 380px);
	z-index: 0;
	border-left: 1px solid #ddd;
}

.content.full_size:before { display: none; }

.content .column {
	float: left;
	position: relative;
	z-index: 1;
}

.content .column.full {
	float: none;
	padding: 30px 40px;
}

.content p {
	line-height: 1.4;
	padding-bottom: 12px;
}

.content a:not([class]) {
	text-decoration: underline;
	color: #333;
}

.content ul:not([class]) li:not([class]), .content ol:not([class]) li:not([class]) {
	margin-left: 20px;
	padding-left: 5px;
	margin-bottom: 8px;
}

.content ul:not([class]), .content ol:not([class]) { padding-bottom: 10px; }

.content .column.left {
	width: calc(100% - 380px);
	padding: 30px 50px 40px 40px;
}

.content .column.right {
	width: 380px;
	padding: 34px 30px;
}

.contact_phonenumber, .contact_faxnumber, .contact_mail { color: #e30620; }

.contact_phonenumber:before, .contact_faxnumber:before, .contact_mail:before {
	font-family: 'mws_iconset';
	display: inline-block;
	width: 24px;
}

.contact_phonenumber:before { content: "\e804"; }

.contact_faxnumber:before { content: "\e807"; }

.contact_mail:before { content: "\e80f"; }

.column:last-child, .box:last-child { margin-right: 0; }

/* Vermietungstabelle */
.renttable_div {
	margin-top: 18px;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #d2d2d2;
	border-radius: 10px 10px 0 0;
	background: #fff;
	box-shadow: var(--mhg-shadow-soft);
}

.renttable {
	width: 100%;
	min-width: 980px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.3;
}

.renttable th,
.renttable td {
	padding: 13px 12px;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
	vertical-align: middle;
	text-align: center;
}

.renttable th:last-child,
.renttable td:last-child { border-right: 0; }

.renttable thead th {
	background-color: #000;
	background-image: var(--mhg-dark-surface-gradient);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.renttable thead th:first-child { border-top-left-radius: 10px; }
.renttable thead th:last-child { border-top-right-radius: 10px; }

.renttable thead th:first-child,
.renttable thead th:nth-child(2),
.renttable tbody td:first-child,
.renttable tbody td:nth-child(2) { text-align: left; }

.renttable thead small {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.82);
}

.renttable tbody .color_change_1:nth-child(odd) { background: #f3f3f3; }

.renttable tbody .color_change_1:hover { background: #e5e5e5; }

.renttable tbody .rent_price_group_row td {
	padding: 11px 12px;
	background: #d8d8d8;
	border-bottom-color: #bdbdbd;
	text-align: left;
}

.renttable .rent_price_group h2 {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.2;
	color: #202020;
}

.renttable tbody tr:last-child td { border-bottom: 0; }

/* Ansprechpartner */
.mhg-team {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin: 32px 0;
}

.mhg-team__member {
	margin: 0;
	min-width: 0;
	width: 66.666%;
	justify-self: center;
}

.mhg-team__member img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.mhg-team__member figcaption {
	padding: 16px 4px 0;
	color: #202020;
	font-size: 18px;
	line-height: 1.35;
}

.mhg-team__name {
	display: block;
	font-size: 20px;
	font-weight: 700;
}

.mhg-team__role {
	display: block;
	margin-top: 2px;
	color: #555;
}

@media (max-width: 700px) {
	.mhg-team {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mhg-team__member {
		width: 100%;
	}
}

/* ------------------------------ CONTENT END ------------------------------ */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* Der Footer steht im konsolidierten Relaunch-Abschnitt. */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* --------------------------- CONTACTFORM START --------------------------- */

#contactform input[type="text"], #contactform textarea, #contactform select {
	background: rgba(0,0,0,0.02);
	border: 1px solid #ccc;
	color: #555;
	display: block;
	font-size: 14px;
	padding: 8px 15px;
	vertical-align: middle;
	width: 100%;
	margin-bottom: 12px;
}

#contactform input[type="text"]:focus, #contactform textarea:focus {
	border-color: #e30620;
	outline: 0 none;
}

#contactform input[type="text"]#url { display: none; }

#contactform textarea {
	resize: vertical;
	min-height: 100px;
	clear: both;
}

/* Ankaufformular: acht kurze Eingabefelder zweispaltig anordnen. */
#contactform #id_7,
#contactform #id_8,
#contactform #id_9,
#contactform #id_10,
#contactform #id_11,
#contactform #id_12,
#contactform #id_13,
#contactform #id_14 {
	width: calc(50% - 6px);
	float: left;
}

#contactform #id_8,
#contactform #id_10,
#contactform #id_12,
#contactform #id_14 {
	float: right;
}

@media (max-width: 700px) {
	#contactform #id_7,
	#contactform #id_8,
	#contactform #id_9,
	#contactform #id_10,
	#contactform #id_11,
	#contactform #id_12,
	#contactform #id_13,
	#contactform #id_14 {
		width: 100%;
		float: none;
	}
}

#contactform label.head_label {
	display: block;
	wicth: 100%;
	font-weight: 700;
	padding: 8px 0;
}

/* ----------------------------- Costum Radios ----------------------------- */

#contactform input[type="radio"] { display: none; }

#contactform input[type="radio"] + label {
	color: #292321;
	font-family: Arial, sans-serif;
	font-size: 14px;
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 8px;
}

#contactform input[type="radio"] + label span {
	display: inline-block;
	width: 19px;
	height: 19px;
	margin: -2px 7px 0 0;
	vertical-align: middle;
	cursor: pointer;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#contactform input[type="radio"] + label span {
	background-color: #eee;
	border: 1px solid #555;
}

#contactform input[type="radio"]:checked + label span {
	background-color: #e30620;
	border: 1px solid #e30620;
}

#contactform input[type="radio"] + label span, #contactform input[type="radio"]:checked + label span {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

/* --------------------------- Costum Checkboxes --------------------------- */

#contactform input[type="checkbox"]:not(:checked), #contactform input[type="checkbox"]:checked {
	position: absolute;
	left: -9999px;
}

#contactform input[type="checkbox"]:not(:checked) + label, #contactform input[type="checkbox"]:checked + label {
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	margin-right: 15px;
	width: 100%;
	display: inline-block;
	margin-bottom: 15px;
	font-size:14px;
}

#contactform input[type="checkbox"]:not(:checked) + label span, #contactform input[type="checkbox"]:checked + label span {
	position: relative;
	top: 2px;
}

#contactform input[type="checkbox"]:not(:checked) + label:before, #contactform input[type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 17px;
	height: 17px;
	border: 1px solid #aaa;
	background: #f8f8f8;
	border-radius: 3px;
}

#contactform input[type="checkbox"]:not(:checked) + label:after, #contactform input[type="checkbox"]:checked + label:after {
	content: '✔';
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 14px;
	line-height: 1;
	color: #e30620;
	transition: all .2s;
}

#contactform input[type="checkbox"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}

#contactform input[type="checkbox"]:checked + label:after {
	opacity: 1;
	transform: scale(1);
}

#contactform input[type="checkbox"]:disabled:not(:checked) + label:before, #contactform input[type="checkbox"]:disabled:checked + label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #ddd;
}

#contactform input[type="checkbox"]:disabled:checked + label:after { color: #999; }

#contactform input[type="checkbox"]:disabled + label { color: #aaa; }

#contactform input[type="checkbox"]:checked:focus + label:before, #contactform input[type="checkbox"]:not(:checked):focus + label:before { border: 1px solid #e30620; }

#contactform input[type="checkbox"] label:hover:before { border: 1px solid #e30620!important; }

#contactform button {
	background: #e30620;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	padding: 8px 25px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	margin: 10px 0 15px;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

#contactform button:hover { background: #bd0711; }

.contactinfo {
	border: 1px dashed #666;
	padding: 15px 24px 5px;
	font-size: 12px;
	color: #595959;
}

.contactinfo p { padding-bottom: 10px; }

.errormeldung {
	padding: 10px 15px;
	border: 1px dashed #cb3434;
	background: rgba(203,52,52,0.12);
	font-size: 13px;
	color: #cb3434;
	margin-bottom: 15px;
}

.mail-success {
	border: 2px dashed #0A9200;
	padding: 20px 30px 20px 80px;
	color: #0A9200;
	font-size: 18px;
	font-weight: 400;
	position: relative;
}

.mail-success:before {
	position: absolute;
	left: 20px;
	top: 21px;
	font-size: 42px;
	font-family: 'mws_iconset';
	content: '\e805';
}

/* ---------------------------- CONTACTFORM END ---------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* ------------------------------- TABS START ------------------------------ */

ul.tabs {
	border-bottom: 1px solid #e30620;
	font-size: 0;
	margin-bottom: 20px;
}

ul.tabs li {
	color: #e30620;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	padding: 8px 20px;
	text-align: center;
}

ul.tabs li.current {
	background: #e30620 none repeat scroll 0 0;
	color: #fff;
}

.tab-content {
	background: #fff none repeat scroll 0 0;
	display: none;
}

.tab-content.current { display: block; }

/* -------------------------------- TABS END ------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* ----------------------------- ACCORDION START --------------------------- */

#accordion {
	display: grid;
	gap: 2px;
	margin-block: 1.5rem;
}

.accordion_heading {
	margin: 0;
	font: inherit;
}

.acc_head {
	position: relative;
	display: block;
	width: 100%;
	padding: 15px 52px 15px 18px;
	border: 1px solid var(--mhg-border);
	border-radius: 0;
	background-color: #efefef;
	background-image: var(--mhg-gray-surface-gradient);
	color: #202020;
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	margin-top: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.acc_head::after {
	position: absolute;
	top: 50%;
	right: 18px;
	content: "+";
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-52%);
}

.acc_head:hover,
.acc_head:focus-visible,
.acc_head.active {
	border-color: var(--mhg-red);
	background-color: #efefef;
	background-image: var(--mhg-gray-surface-gradient);
	color: var(--mhg-red);
}

.acc_head.active { box-shadow: inset 4px 0 0 var(--mhg-red); }

.acc_head.active::after { content: "−"; }

.accordion_content {
	display: none;
	padding: 20px 18px 24px;
	border: 1px solid var(--mhg-border);
	border-top: 0;
	background: var(--mhg-white);
}

.accordion_content > :first-child { margin-top: 0; }
.accordion_content > :last-child { margin-bottom: 0; }

.accordion_section {
	margin: 32px 0 8px;
	font-size: 1.35rem;
	line-height: 1.25;
	font-weight: 700;
}

.accordion_section:first-child { margin-top: 0; }

.accordion_contentcode {
	margin: 0 0 10px;
	font-weight: 700;
}


















/* ------------------------------ ACCORDION END ---------------------------- */
/* ------------------------------------------------------------------------- */




/* ------------------------------------------------------------------------- */
/* ------------------------------ GALLERY START ---------------------------- */

.gallery_wrapper {
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.gallery_wrapper a.gal_pic {
	width: 31%;
	height: auto;
	position: relative;
	margin-bottom: 20px;
}

.gallery_wrapper a.gal_pic img {
	display: block;
	width: 100%;
}

.gallery_wrapper a.gal_pic span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 6px 10px;
	background: rgba(33,33,33,0.8);
	color: #fff;
}

/* ------------------------------- GALLERY END ----------------------------- */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* -------------------------------- NEWS START ----------------------------- */

section.news article {
	border-bottom: 1px solid #ddd;
	margin-bottom: 22px;
	padding-bottom: 10px;
}

section.news article h3 {
	border-bottom: 1px solid #e30620;
	margin-bottom: 8px;
	position: relative;
	padding-right: 100px;
}

section.news article h3 aside {
	position: absolute;
	right: 0;
	bottom: 8px;
	font-size: 16px;
	font-weight:400;
}

.aktuelles-galerie {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 1rem 0 1.5rem;
}

.aktuelles-galerie img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--mhg-radius);
	box-shadow: var(--mhg-shadow-soft);
}

@media (max-width: 700px) {
	.aktuelles-galerie {
		grid-template-columns: 1fr;
	}
}

section.news.topmeldung { margin-top: 15px; }

section.news.topmeldung article {
	border-bottom: 1px solid #ccc;
	padding-bottom: 0;
	margin-bottom: 12px;
}

section.news.topmeldung article h4 { padding: 0; }

section.news.topmeldung article span.date {
	display: block;
	padding-bottom: 5px;
}

.aktinfo {
	border:1px dashed #ccc;
	padding:20px 30px;
	color:#777;
}


/* --------------------------------- NEWS END ------------------------------ */
/* ------------------------------------------------------------------------- */

#shareplus {
	box-shadow: 0 0 10px rgba(0,0,0,0.7);
	color: #4e4e4e;
	display: none;
	max-width: 320px;
	position: fixed;
	width: 100%;
	z-index: 10000
}

#shareplus_icons {
	background: #fff;
	overflow: auto;
	padding: 20px
}

#shareplus_icons .shareplus_icon {
	display: block;
	height: 42px;
	line-height: 42px;
	margin: 5px 10px;
	opacity: .9;
	color: #fff;
	padding-left: 60px;
	text-decoration: none;
	position: relative
}

#shareplus_icons .shareplus_icon:hover { opacity: 1 }

#shareplus_icons .email { background: #e30620 }

#shareplus_icons .linkedin { background: #e30620 }

#shareplus_icons .google { background: #ca4e40 }

#shareplus_icons .facebook { background: #e30620 }

#shareplus_icons .twitter { background: #e30620 }

#shareplus_icons .shareplus_icon:before {
	font-family: 'mws_iconset';
	position: absolute;
	left: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 22px
}

#shareplus_icons .email:before { content: '\e80f' }

#shareplus_icons .linkedin:before { content: '\f0e1' }

#shareplus_icons .google:before {
	content: '\f0d5';
	font-size: 20px
}

#shareplus_icons .facebook:before { content: '\e81c' }

#shareplus_icons .twitter:before { content: '\e81b' }

#shareplus_overlay {
	background: rgba(36,36,38,0.6);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000
}

/* ------------------------------------------------------------------------- */
/* ------------------------- CUSTOM ELEMENTS START ------------------------- */

.btn {
	background: #e30620;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	padding: 8px 25px;
	margin-bottom: 15px;
	box-shadow: var(--mhg-shadow-soft);
}

.btn:hover { background: #bd0711; }

/* ------------------------- CUSTOM ELEMENTS END --------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* ---------------------------- RESPONSIVE START --------------------------- */

@media (max-width:1024px) {

.menu-trigger {
	position: absolute;
	right: 30px;
	width: 40px;
	height: 40px;
	background: #fff;
	border: 1px solid #e30620;
	z-index: 2;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.menu-trigger span {
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	background: #e30620;
	top: 44%;
	margin-top: -1px;
	left: 50%;
	margin-left: -10px;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	-ms-transition: background 0.3s;
	transition: background 0.3s;
}

.menu-trigger span i {
	display: block;
	position: relative;
	top: -17px;
	color: #e30620;
	font-size: 10px;
	font-style: normal;
	height: 13px;
	left: -2px;
	line-height: 12px;
	margin: 0;
	overflow: hidden;
	top: 10px;
	width: 30px;
}

.menu-trigger span::before, .menu-trigger span::after {
	content: '';
	position: absolute;
	left: 0;
	background: inherit;
	width: 100%;
	height: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, background 0s;
	-moz-transition: -moz-transform 0.3s, background 0s;
	-ms-transition: -moz-transform 0.3s, background 0s;
	transition: transform 0.3s, background 0s;
}

.menu-trigger span::before {
	top: -6px;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
}

.menu-trigger span::after {
	bottom: -6px;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
}

html:not(.hidden) .menu-trigger { box-shadow: none; }

html:not(.hidden) .menu-trigger span { background: none; }

html:not(.hidden) .menu-trigger span::before, html:not(.hidden) .menu-trigger span::after { background: #e30620; }

html:not(.hidden) .menu-trigger span::before {
	top: 0;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

html:not(.hidden) .menu-trigger span::after {
	bottom: 0;
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
}

.menu-trigger { display: block; }

nav.desktop {
	z-index: 99999;
	position: fixed;
	left: 0;
	top: 0;
	width: 300px;
	max-width: 90%;
	height: 100%;
	overflow-y: scroll;
	font-size: 0;
	background: #f5f5f5;
	-webkit-transition: 0.3s left;
	-moz-transition: 0.3s left;
	transition: 0.3s left;
}

nav.desktop.hidden { left: -300px; }

nav.desktop:not(.hidden) {
	-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
	-ms-box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
}

nav.desktop li {
	list-style-type: none;
	position: static;
}

nav.desktop > ul { text-align: left; }

nav.desktop ul.main-menu > li {
	display: block;
	position: static;
}

.nav1, .nav1on, ul.main-menu li:hover .nav1 {
	color: #e30620;
	background: none;
	height: auto;
	line-height: inherit;
	padding: 12px 28px;
	display: block;
	font-size: 16px;
	font-weight: 300;
	border: 1px solid transparent;
	border-bottom: 1px solid #d5d5d5;
	text-decoration: none;
}

.nav_headline {
	display: block;
	padding: 0;
	font-size: 20px;
}

.nav_headline a {
	padding: 12px 28px;
	display: block;
	color: #e30620;
	font-weight: 700;
}

ul.dropdown_first, ul.dropdown_second, ul.dropdown_third {
	position: absolute;
	left: -120% !important;
	top: 0;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	width: 300px;
	background: #f5f5f5;
	opacity: 1;
	visibility: visible;
	padding: 0;
	margin: 0;
	z-index: 0;
	-webkit-transition: 0.5s left;
	-moz-transition: 0.5s left;
	transition: 0.5s left;
}

ul.dropdown_first.active, ul.dropdown_second.active, ul.dropdown_third.active { left: 0 !important; }

ul.dropdown_first.active { z-index: 1 !important; }

ul.dropdown_second.active { z-index: 2 !important; }

ul.dropdown_third.active { z-index: 3 !important; }

ul.dropdown_first > li:last-child, ul.dropdown_second > li:last-child, ul.dropdown_third > li:last-child { margin-bottom: 300px; }

nav.desktop ul.main-menu > li:last-child ul {
	margin-left: 0 !important;
	width: 300px !important;
}

.nav2, .nav2on, ul.first_dropdown li:hover .nav2 {
	color: #e30620 !important;
	padding: 8px 28px;
	display: block;
	width: 100%;
	background: none !important;
	font-size: 14px;
	font-weight: 300;
	border: 1px solid transparent;
	text-decoration: none;
	border-bottom: 1px solid #d5d5d5;
}

nav.desktop .menu-back {
	background: #e5e5e5;
	display: block;
	padding: 10px 30px;
	font-size: 14px;
	border-top: 1px solid #d5d5d5;
	border-bottom: 1px solid #d5d5d5;
}

nav.desktop .menu-back:before {
	content: '‹';
	line-height: 14px;
	font-size: 22px;
	vertical-align: -1px;
	margin-right: 10px;
}

.nav3, .nav3on, ul.second_dropdown li:hover .nav3 {
	color: #e30620 !important;
	padding: 8px 28px;
	display: block;
	font-size: 14px;
	font-weight: 300;
	background: none !important;
	width: 100%;
	border: 1px solid transparent;
	text-decoration: none;
	border-bottom: 1px solid #d5d5d5;
}

.nav4, .nav4on, ul.third_dropdown li:hover .nav4 {
	color: #e30620 !important;
	padding: 8px 28px;
	display: block;
	background: none !important;
	font-size: 14px;
	font-weight: 300;
	width: 100%;
	border: 1px solid transparent;
	text-decoration: none;
	border-bottom: 1px solid #d5d5d5;
}

.nav2on, .nav3on, .nav4on {
	color: #fff !important;
	background-color: #e30620 !important;
}

nav.desktop ul.main-menu li.has-submenu > a {
	background: url(../img/nav_arrow.png) no-repeat center right !important;
	background-size: 18px !important;
}

nav.desktop ul.main-menu li.has-submenu > a.nav2on, nav.desktop ul.main-menu li.has-submenu > a.nav3on, nav.desktop ul.main-menu li.has-submenu > a.nav4on {
	background: #e30620 url(../img/nav_arrow_white.png) no-repeat center right !important;
	background-size: 18px !important;
}

.wrapper { padding: 0; }

.content .column.left {	padding: 30px; }

.content .column.right { padding: 30px; }

header { padding: 0 30px; }

.sli { padding: 0 88px 0 30px; }

.sli form { max-width: 200px; }
}

@media (max-width:900px) {
	
.menu-trigger {	right: 20px; }

header { padding: 0 20px; }

.content { margin: 0 auto; }

.content::before { display: none; }

.content .column.left {
	padding: 25px 30px 10px;
	width: 100%;
}

.content .column.right {
	padding: 10px 30px 30px;
	width: 100%;
}

.content .column.full { padding: 25px 20px; }

/* Vermietungstabellen werden mobil zu Karten. */
.renttable_div {
	overflow: visible;
	border: 0;
	box-shadow: none;
}

.renttable {
	display: block;
	min-width: 0;
	font-size: 15px;
}

.renttable thead { display: none; }

.renttable tbody { display: block; }

.renttable tbody .color_change_1 {
	display: block;
	margin-bottom: 14px;
	border: 1px solid #d2d2d2;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.renttable tbody .color_change_1:nth-child(odd),
.renttable tbody .color_change_1:hover { background: #fff; }

.renttable tbody .color_change_1 td {
	display: grid;
	grid-template-columns: minmax(118px, 38%) 1fr;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border-right: 0;
	border-bottom: 1px solid #e2e2e2;
	text-align: right;
	word-break: break-word;
}

.renttable tbody .color_change_1 td:last-child { border-bottom: 0; }

.renttable td[data-label]::before {
	content: attr(data-label);
	font-weight: 700;
	color: #292929;
	text-align: left;
}

.renttable td[data-label]::before {
	font-size: 14px;
	line-height: 1.35;
}

.renttable tbody .color_change_1 td:first-child,
.renttable tbody .color_change_1 td:nth-child(2) {
	width: 100%;
	text-align: right;
}

.renttable tbody .rent_price_group_row {
	display: block;
	margin: 22px 0 10px;
}

.renttable tbody .rent_price_group_row:first-child { margin-top: 0; }

.renttable tbody .rent_price_group_row td {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 0;
}

}

/* ----------------------------- RESPONSIVE END ---------------------------- */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* Farben werden zentral über die Variablen im konsolidierten Relaunch-Abschnitt gesteuert. */
/* ------------------------------------------------------------------------- */

/* ==========================================================================
   MHG Relaunch: allgemeines Layout und Komponenten
   Dieser Abschnitt ist Bestandteil der kanonischen style.css.
============================================================================ */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-v15-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-v15-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-v15-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-v17-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-v17-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-v17-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --mhg-red: #e30620;
  --mhg-black: #111111;
  --mhg-dark-gray: #6c6c6c;
  --mhg-light-gray: #f3f3f3;
  --mhg-border: #d8d8d8;
  --mhg-white: #ffffff;
  --mhg-dark-surface-gradient: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(16, 16, 16, 1) 8%, rgba(32, 32, 32, 1) 53%, rgba(16, 16, 16, 1) 94%, rgba(0, 0, 0, 1) 100%);
  --mhg-gray-surface-gradient: linear-gradient(0deg, #e8e8e8 0%, #efefef 8%, #f7f7f7 53%, #efefef 94%, #e8e8e8 100%);
  --mhg-content: 1440px;
  --mhg-radius: 18px;
  --mhg-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  --mhg-shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.08);
  --mhg-section-space: clamp(4.5rem, 8vw, 8.5rem);
  --content-readable: 760px;
  --content-layout-gap: clamp(2rem, 5vw, 5rem);
  --content-card-gap: clamp(1rem, 2.5vw, 2rem);
  --content-media-ratio: 16 / 10;
}

*, *::before, *::after { box-sizing: border-box; }

/* Wiederverwendbare Flächenstandards. */
.mhg-dark-surface {
  background-color: #000;
  background-image: var(--mhg-dark-surface-gradient);
  color: var(--mhg-white);
}

.mhg-gray-surface {
  background-color: #efefef;
  background-image: var(--mhg-gray-surface-gradient);
  color: #202020;
}

.mhg-dark-heading-surface {
  background-color: #000;
  background-image: var(--mhg-dark-surface-gradient);
  color: var(--mhg-white);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--mhg-black);
  background: var(--mhg-white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

html.mhg-font-small { font-size: 90%; }
html.mhg-font-large { font-size: 115%; }
html.mhg-high-contrast {
  --mhg-red: #ffeb00;
  --mhg-black: #fff;
  --mhg-dark-gray: #fff;
  --mhg-light-gray: #000;
  --mhg-border: #fff;
  --mhg-white: #000;
  color-scheme: dark;
}
html.mhg-high-contrast body,
html.mhg-high-contrast .mhg-brandbar,
html.mhg-high-contrast .mhg-mainnav,
html.mhg-high-contrast .mhg-subnav,
html.mhg-high-contrast .mhg-service-card,
html.mhg-high-contrast .mhg-review-card,
html.mhg-high-contrast .mhg-accessibility-panel,
html.mhg-high-contrast .mhg-footer {
  color: #fff;
  background-color: #000;
  background-image: none;
  border-color: #fff;
}
html.mhg-high-contrast .mhg-dark-surface,
html.mhg-high-contrast .mhg-dark-heading-surface,
html.mhg-high-contrast .mhg-gray-surface,
html.mhg-high-contrast .mhg-topbar,
html.mhg-high-contrast .content-section--dark,
html.mhg-high-contrast .renttable thead th { background-image: none; }
html.mhg-high-contrast .acc_head {
  border-color: #fff;
  background-color: #000;
  background-image: none;
  color: #fff;
}
html.mhg-high-contrast .acc_head:hover,
html.mhg-high-contrast .acc_head:focus-visible,
html.mhg-high-contrast .acc_head.active {
  border-color: #ffeb00;
  color: #ffeb00;
}
html.mhg-high-contrast a:not(.mhg-button):not(.mhg-whatsapp-button) {
  color: #ffeb00;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
html.mhg-high-contrast :focus-visible {
  outline-color: #ffeb00;
  outline-width: 4px;
}
html.mhg-high-contrast .mhg-button,
html.mhg-high-contrast .mhg-font-controls button[aria-pressed="true"],
html.mhg-high-contrast .mhg-contrast-toggle[aria-pressed="true"] {
  border-color: #ffeb00;
  background: #ffeb00;
  color: #000;
}

.mhg-skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  padding: .75rem 1rem;
  background: var(--mhg-black);
  color: var(--mhg-white);
  transform: translateY(-200%);
}
.mhg-skip-link:focus { transform: translateY(0); }

.mhg-container {
  width: min(calc(100% - 3rem), var(--mhg-content));
  margin-inline: auto;
}

.mhg-topbar {
  color: var(--mhg-white);
  background-color: #000;
  background-image: var(--mhg-dark-surface-gradient);
  font-size: 1.125rem;
	font-weight: 600;
}
.mhg-topbar__inner {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.mhg-topbar p { margin: 0; }
.mhg-topbar__contact { display: flex; gap: 1.25rem; }
.mhg-topbar a { text-decoration: none; }
.mhg-topbar a:hover { text-decoration: underline; }
.mhg-topbar a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  line-height: 1;
}

.mhg-topbar a svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.mhg-brandbar { background: var(--mhg-white); }
.mhg-brandbar__inner {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2rem;
}
.mhg-brandbar__logo img { display: inline-block;}
/*.mhg-brandbar__yamaha img { width: min(145px, 20vw); }*/
.mhg-brandbar__actions { display: flex; align-items: center; gap: 1rem; }
.mhg-accessibility-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border: 0;
  background: transparent;
  color: var(--mhg-black);
  cursor: pointer;
}
.mhg-accessibility-toggle svg { width: 26px; height: 26px; }
.mhg-menu-toggle { display: none; }

.mhg-accessibility-panel {
  position: fixed;
  right: 1rem;
  bottom: 6.5rem;
  z-index: 1200;
  width: min(360px, calc(100% - 2rem));
  padding: 1.25rem;
  border: 2px solid var(--mhg-black);
  border-radius: 14px;
  background: var(--mhg-white);
  color: var(--mhg-black);
  box-shadow: var(--mhg-shadow);
}
.mhg-accessibility-panel[hidden] { display: none; }
.mhg-accessibility-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mhg-accessibility-panel h2 { margin: 0; font-size: 1.25rem; }
.mhg-accessibility-panel fieldset { margin: 1rem 0; padding: 0; border: 0; }
.mhg-accessibility-panel legend { margin-bottom: .5rem; font-weight: 700; }
.mhg-accessibility-close {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.mhg-font-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mhg-font-controls button,
.mhg-contrast-toggle,
.mhg-accessibility-reset {
  min-height: 44px;
  padding: .55rem .75rem;
  border: 2px solid var(--mhg-black);
  border-radius: 6px;
  background: var(--mhg-white);
  color: var(--mhg-black);
  cursor: pointer;
}
.mhg-font-controls button[aria-pressed="true"],
.mhg-contrast-toggle[aria-pressed="true"] {
  background: var(--mhg-black);
  color: var(--mhg-white);
}
.mhg-contrast-toggle,
.mhg-accessibility-reset { width: 100%; margin-top: .5rem; }
.mhg-accessibility-reset { border-color: var(--mhg-border); }

.mhg-whatsapp-button {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: #0b7139;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font-weight: 700;
  text-decoration: none;
}
.mhg-whatsapp-button:hover { background: #0b7139; }
.mhg-whatsapp-button svg { width: 28px; height: 28px; }

.mhg-mainnav {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid var(--mhg-border);
  background: var(--mhg-white);
}
.mhg-mainnav ul,
.mhg-quicklinks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mhg-mainnav ul {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
}
.mhg-mainnav a {
  display: block;
  padding-block: 1rem;
  text-decoration: none;
  font-family: "Outfit", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.mhg-mainnav a:hover,
.mhg-mainnav a:focus-visible { 
	background-color: var(--mhg-red);
	color: var(--mhg-white); 
}

.mhg-hero {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 52vw, 730px);
  overflow: hidden;
}
.mhg-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}
.mhg-hero__inner {
  position: relative;
  min-height: inherit;
  display: flex;
  align-items: center;
}

/*.mhg-hero__panel {
  width: min(590px, 54vw);
  padding: clamp(2rem, 4vw, 4rem);

  border-radius: 58px 58px 58px 58px;

  background: rgba(255,255,255,.5);

  backdrop-filter: blur(5px);
}*/
.mhg-hero__panel {
  width: min(590px, 54vw);
  padding-top: clamp(2rem, 4vw, 4rem);
padding-bottom: clamp(2rem, 4vw, 4rem);
  border-radius: 0 58px 58px 0;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(5px);
  position: relative;
	
	
}
.mhg-hero__panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 50vw;

  background-color: rgba(255,255,255,.5);
  background-image: url("https://proto.yamaha-neuss.net/UserFiles/999/de/img/hero/yamlogo.webp");
  background-repeat: no-repeat;
  background-position: right 120px center;
  background-size: 350px auto;
}
@media (max-width: 2240px) {
	.mhg-hero__panel::before {
		/*background-image:url(https://proto.yamaha-neuss.net/UserFiles/999/de/img/hero/noyamlogo.webp)*/
		background-image: none;
		
	}
}
.mhg-hero h1 {
  margin: 0 0 1rem;
  color: var(--mhg-red);
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.0rem, 4.4vw, 4.35rem);
  line-height: .98;
  letter-spacing: -.025em;
}
.mhg-hero p {
  max-width: 18ch;
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
}

.mhg-quicklinks {
  border-bottom: 1px solid var(--mhg-border);
  background: var(--mhg-white);
}
.mhg-quicklinks ul {
  min-height: 92px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
}
.mhg-quicklinks a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  text-decoration: none;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  transition: color .2s ease, background .2s ease;
}
.mhg-quicklinks a:hover,
.mhg-quicklinks a:focus-visible {
  color: var(--mhg-red);
  background: #fafafa;
}
.mhg-quicklinks img { width: 125px; height: auto; object-fit: contain; }

.mhg-section { padding-block: var(--mhg-section-space); }
.mhg-section--muted { background: var(--mhg-light-gray); }

.mhg-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem) clamp(2rem, 5vw, 6rem);
}
.mhg-service-card {
  min-height: 235px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(220px, 1.1fr);
  overflow: hidden;
  border-radius: var(--mhg-radius);
  background: var(--mhg-white);
  box-shadow: var(--mhg-shadow-soft);
}
.mhg-service-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.35rem 1.25rem 1.15rem 1.35rem;
}
.mhg-service-card h2,
.mhg-about h2,
.mhg-reviews h2,
.mhg-eyebrow {
  color: var(--mhg-red);
  font-family: "Outfit", sans-serif;
}
.mhg-service-card h2 {
  margin: 0 0 .9rem;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.15;
}
.mhg-service-card p { 
	margin: 0 0 1.2rem; 
	font-size: 1.125rem;
	font-weight: 600;
}
.mhg-service-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .35s ease;
}
.mhg-service-card:hover img { transform: scale(1.035); }

.mhg-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  min-width: 100%;
  margin-top: auto;
  padding: .55rem 1rem;
  border: 1px solid #777;
  border-radius: 4px;
  color: var(--mhg-white);
  background: #777;
  box-shadow: var(--mhg-shadow-soft);
  text-decoration: none;
  font-size: 1.125rem;
	font-weight: 600;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mhg-button:hover,
.mhg-button:focus-visible {
  border-color: var(--mhg-red);
  background: var(--mhg-red);
  transform: translateY(-2px);
}

.mhg-about__grid {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.7fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}
.mhg-about__content { max-width: 520px; }
.mhg-about h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.4rem, 1.9vw, 2rem);
  line-height: 1.12;
}
.mhg-about p { margin: 0 0 1.2rem; }
.mhg-about__image {
  width: 100%;
  border-radius: var(--mhg-radius);
  box-shadow: var(--mhg-shadow-soft);
}

.mhg-featured__nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
  color: var(--mhg-red);
  font-size: .78rem;
}
.mhg-featured__nav--bottom { margin: 1.5rem 0 0; }
.mhg-featured__nav--next { justify-content: flex-end; }
.mhg-featured__nav a { color: inherit; font-weight: 600; text-decoration: none; }
.mhg-featured__nav a:hover,
.mhg-featured__nav a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.mhg-featured__grid {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.55fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
}
.mhg-eyebrow {
  margin: 0 0 1.5rem;
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  font-weight: 700;
}
.mhg-featured h2 {
  margin: 0;
  color: #707070;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
}
.mhg-featured__price {
  margin: .2rem 0 1rem;
  color: var(--mhg-red);
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.65rem, 2.3vw, 2.4rem);
  font-weight: 700;
}
.mhg-featured__content p { margin-block: .7rem; }
.mhg-specs { width: min(100%, 320px); margin: 1.6rem 0; }
.mhg-specs div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--mhg-border);
}
.mhg-specs div:last-child { border-bottom: 1px solid var(--mhg-border); }
.mhg-specs dt,
.mhg-specs dd { margin: 0; padding: .45rem .6rem; }
.mhg-specs dd { border-left: 1px solid var(--mhg-border); }
.mhg-featured__main-image {
  width: 100%;
  max-height: 580px;
  object-fit: contain;
}
.mhg-featured__thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1.5rem;
}
.mhg-featured__thumbs button {
  padding: .3rem;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mhg-featured__thumbs button:hover,
.mhg-featured__thumbs button.is-active {
  border-color: var(--mhg-red);
}
.mhg-featured__thumbs button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.mhg-featured__thumbs img { aspect-ratio: 1.55; object-fit: contain; }

.mhg-reviews h2 {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
}
.mhg-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
.mhg-review-card {
  min-height: 315px;
  padding: 2rem;
  border-radius: var(--mhg-radius);
  background: var(--mhg-white);
  box-shadow: var(--mhg-shadow-soft);
}
.mhg-review-card__stars {
  margin: 0 0 .2rem;
  color: #765600;
  font-size: 1.5rem;
  letter-spacing: .06em;
}
.mhg-review-card h3 {
  margin: 0 0 1rem;
  color: var(--mhg-red);
  font-family: "Outfit", sans-serif;
  font-size: 1.05rem;
}
.mhg-review-card p:last-child { margin-bottom: 0; }

.mhg-footer {
  min-height: 390px;
  padding: 2rem 0 4.5rem;
  color: var(--mhg-white);
  background-color: #000;
  background-image: var(--mhg-dark-surface-gradient);
}

.mhg-footer > .mhg-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.mhg-footer a { text-decoration: none; }
.mhg-footer a:hover { color: var(--mhg-red); }
.mhg-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 0;
  font-size: .78rem;
}
.mhg-footer__content { width: 100%; max-width: 360px; justify-self: end; }
.mhg-footer h2 { margin: 0 0 .2rem; font-size: 1rem; }
.mhg-footer p,
.mhg-footer address { margin: 0 0 1rem; font-size: .86rem; font-style: normal; }

:focus-visible { outline: 3px solid var(--mhg-red); outline-offset: 3px; }

@media (max-width: 1199px) {
  .mhg-container { width: min(calc(100% - 2.5rem), var(--mhg-content)); }
  .mhg-service-card { grid-template-columns: minmax(0, 1fr) minmax(190px, .95fr); }
  .mhg-services__grid { gap: 2rem; }
}

@media (max-width: 1024px) {
  .mhg-topbar__contact span { 
	  display: none; 
	}
	.mhg-topbar__contact {
		display: block;
		text-align: right;
	}
	.mhg-topbar a svg {
    width: 1.5em;
    height: auto;
	}
  .mhg-brandbar__inner { min-height: 70px; grid-template-columns: 1fr auto auto; }
  .mhg-brandbar__logo img { width: min(285px, 52vw); }
  .mhg-brandbar__yamaha img { width: 120px; }
  .mhg-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: "Outfit", sans-serif;
  }
  .mhg-menu-toggle__icon,
  .mhg-menu-toggle__icon::before,
  .mhg-menu-toggle__icon::after {
    width: 26px;
    height: 2px;
    display: block;
    background: var(--mhg-black);
    transition: transform .2s ease, opacity .2s ease;
  }
  .mhg-menu-toggle__icon { position: relative; }
  .mhg-menu-toggle__icon::before,
  .mhg-menu-toggle__icon::after { content: ""; position: absolute; left: 0; }
  .mhg-menu-toggle__icon::before { top: -8px; }
  .mhg-menu-toggle__icon::after { top: 8px; }
  .mhg-menu-toggle[aria-expanded="true"] .mhg-menu-toggle__icon { background: transparent; }
  .mhg-menu-toggle[aria-expanded="true"] .mhg-menu-toggle__icon::before { top: 0; transform: rotate(45deg); }
  .mhg-menu-toggle[aria-expanded="true"] .mhg-menu-toggle__icon::after { top: 0; transform: rotate(-45deg); }

  .mhg-mainnav { display: none; }
  .mhg-mainnav.is-open { display: block; }
  .mhg-mainnav ul { min-height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
  .mhg-mainnav li { border-bottom: 1px solid #eee; }
  .mhg-mainnav a { padding: .9rem 1rem; }

  .mhg-hero { min-height: 560px; }
  .mhg-hero__panel { width: min(560px, 72vw); }
  .mhg-quicklinks ul { overflow-x: auto; grid-template-columns: repeat(6, minmax(150px, 1fr)); }

  .mhg-services__grid { grid-template-columns: 1fr; }
  .mhg-service-card { min-height: 240px; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.1fr); }

  .mhg-about__grid,
  .mhg-featured__grid { grid-template-columns: 1fr; }
  .mhg-about__content { max-width: 760px; }
  .mhg-about__image { order: -1; }
  .mhg-featured__visual { order: -1; }
  .mhg-featured__content { max-width: 680px; }
  .mhg-reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .mhg-review-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  :root { --mhg-section-space: 4.5rem; }
  body { font-size: .97rem; }
  .mhg-container { width: min(calc(100% - 2rem), var(--mhg-content)); }
  .mhg-topbar__inner { text-align: right; display: block;}
  
  /*.mhg-topbar__contact { width: 100%; justify-content: space-between; }*/
  .mhg-topbar__contact a:last-child { display: inline; }
  .mhg-brandbar__yamaha { display: none; }
  .mhg-brandbar__inner { grid-template-columns: 1fr auto; }
  .mhg-brandbar__logo img { width: min(245px, 64vw); }
  .mhg-menu-toggle__label { display: none; }
  .mhg-accessibility-toggle__label { display: none; }
  .mhg-brandbar__actions { gap: .65rem; }
  .mhg-whatsapp-button { width: 56px; height: 56px; justify-content: center; padding: 0; }
  .mhg-whatsapp-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mhg-mainnav ul { grid-template-columns: 1fr; }

  .mhg-hero { min-height: 510px; }
  /*.mhg-hero__image { object-position: 44% center; }*/
	.mhg-hero__image { object-position: right bottom; }
  .mhg-hero__inner { align-items: flex-end; width: 100%; }
  .mhg-hero__panel {
    width: calc(100% - 1.25rem);
    margin: 0 1.25rem 1.25rem 0;
    padding: 1.8rem 1.5rem;
    border-radius: 0 34px 34px 0;
  }
  .mhg-hero h1 { font-size: clamp(2.55rem, 13vw, 4.1rem); }
  .mhg-hero p { max-width: 20ch; font-size: 1.3rem; }

  .mhg-quicklinks ul { min-height: 76px; grid-template-columns: repeat(6, minmax(118px, 1fr)); }
  .mhg-quicklinks a { gap: .45rem; padding: .75rem .55rem; font-size: .85rem; }
  .mhg-quicklinks img { width: 40px; height: 34px; }

  .mhg-service-card {
    min-height: 0;
    grid-template-columns: 1fr;
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--mhg-shadow-soft);
  }
  .mhg-service-card__content { order: 2; min-height: 220px; padding: 1.35rem; }
  .mhg-service-card img { aspect-ratio: 16 / 9; }

  .mhg-about__grid { gap: 2rem; }
  .mhg-about__image { border-radius: 12px; }
  .mhg-featured__nav { font-size: .7rem; }
  .mhg-featured__main-image { max-height: 390px; }
  .mhg-featured__thumbs { gap: .35rem; }
  .mhg-specs { width: 100%; }
  .mhg-reviews__grid { grid-template-columns: 1fr; }
  .mhg-review-card,
  .mhg-review-card:last-child { grid-column: auto; min-height: 0; }
  .mhg-footer__nav {
    display: block;
    width: 100%;
    padding-bottom: 3rem;
  }
  .mhg-footer__nav .sitemap {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mhg-footer__nav .sitemap > .footer-nav-item { width: 100%; }
  .mhg-footer__nav .sitemap > .footer-nav-item > .footer-nav-link {
    width: 100%;
    padding: .55rem 0;
    font-weight: 600;
  }
  .mhg-footer__nav .footer-submenu {
    margin: 0 0 .65rem .35rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, .25);
  }
  .mhg-footer__nav .footer-submenu .footer-nav-link { padding: .2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================
   Inhaltsseiten
   Der alte Inhaltsbereich bleibt funktional, verwendet aber
   dieselben Außenmaße wie der neue Startseitenrahmen.
========================================================== */
body.inhalt .mhg-header {
  width: 100%;
  height: auto;
  padding: 0;
}

body.inhalt .mhg-header > .mhg-topbar,
body.inhalt .mhg-header > .mhg-brandbar,
body.inhalt .mhg-header > .mhg-mainnav {
  width: 100%;
  height: auto;
  max-width: none;
  margin-inline: 0;
}

/* Inhaltsseiten verwenden das ältere Content-Markup. Die Abgrenzung über
   body.inhalt hält dessen Layout vom gemeinsamen Header getrennt. */
body.inhalt .mhg-mainnav > .mhg-container > nav.desktop {
  float: none;
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  padding-top: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
}

body.inhalt .mhg-mainnav a.nav1,
body.inhalt .mhg-mainnav a.nav1on {
  height: auto;
  line-height: normal;
  background: transparent;
}

body.inhalt .mhg-mainnav a.nav1:hover,
body.inhalt .mhg-mainnav a.nav1:focus-visible {
  background: var(--mhg-red);
  color: var(--mhg-white);
}

body.inhalt .mhg-mainnav a.nav1on {
  color: var(--mhg-red);
  background: transparent;
}

body.inhalt .mhg-header .mhg-container,
body.inhalt .content {
  width: min(calc(100% - 3rem), var(--mhg-content));
  max-width: none;
  margin-inline: auto;
}

body.inhalt .hero {
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: clamp(320px, 35vw, 520px);
  overflow: hidden;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.inhalt .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 48%, rgba(0, 0, 0, .08) 100%);
}

body.inhalt .hero__inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 3rem), var(--mhg-content));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vw, 6rem);
  color: var(--mhg-white);
}

body.inhalt .hero__title {
  max-width: 18ch;
  margin: 0;
  color: inherit;
  font-family: "Outfit", Arial, sans-serif;
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1.02;
  text-wrap: balance;
}

body.inhalt .hero__subtitle {
  max-width: 48rem;
  margin-top: 1rem;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.4;
}

body.inhalt .hero__subtitle > :first-child { margin-top: 0; }
body.inhalt .hero__subtitle > :last-child { margin-bottom: 0; }

body.inhalt .wrapper {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

body.inhalt .content {
  min-height: 0;
  margin-bottom: 2rem;
}

body.inhalt .content::before {
  display: none;
}

/* -------------------------------------------------------------------------
   Wiederverwendbare CMS-Inhaltssektionen
   Hintergrundflächen laufen über die gesamte Browserbreite, während der
   Inhalt an der allgemeinen Seitenbreite ausgerichtet bleibt.
---------------------------------------------------------------------------- */
.content-section {
  position:relative;
  left:50%;
  width:100vw;
  max-width:100vw;
  margin-left:-50vw;
  padding-inline:max(1rem, calc((100vw - var(--mhg-content)) / 2 + 1.5rem));
}

.content-section--compact { padding-block:clamp(3.25rem, 3.5vw, 2rem)!important; }
.content-section--regular { padding-block:clamp(4rem, 6vw, 5.5rem)!important; }
.content-section--spacious { padding-block:clamp(6rem, 6vw, 7rem) !important; }

.content-section--white { background:var(--mhg-white); }
.content-section--light { background:radial-gradient(circle,rgba(239, 239, 239, 1) 0%, rgba(247, 247, 247, 1) 100%); }
.content-section--muted { background:radial-gradient(circle,rgba(237, 237, 237, 1) 0%, rgba(247, 247, 247, 1) 100%); }
.content-section--dark { color:var(--mhg-white); background-color:#000; background-image:var(--mhg-dark-surface-gradient); }

/* Sichere Grundfarben verhindern unlesbare Farbvererbungen zwischen
   redaktionell kombinierbaren hellen und dunklen Sektionen. */
.content-section--white,
.content-section--light,
.content-section--muted {
  color: var(--mhg-black);
}

.content-section--dark,
.content-section--dark h1,
.content-section--dark h2,
.content-section--dark h3,
.content-section--dark h4,
.content-section--dark h5,
.content-section--dark h6,
.content-section--dark p,
.content-section--dark li,
.content-section--dark address {
  color: var(--mhg-white);
}

.content-section--dark a:not(.mhg-button) {
  color: var(--mhg-white);
  text-decoration-color: currentColor;
}

.content-section__inner {
  width:100%;
  max-width:var(--mhg-content);
  margin-inline:auto;
}
.content-measure { max-width:var(--content-readable); }

/* Projektneutrale Inhaltsbausteine. Diese Klassen bilden die gemeinsame
   Basis für Bild/Text-Flächen, Kartenraster und abschließende CTAs. */
.content-split,
.career-about__layout {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--content-layout-gap);
  align-items:start;
}
.content-split__copy,
.career-about__copy { max-width:none; }
.content-split__media,
.career-about__media { width:100%; margin:0; }
.content-split__media img,
.career-about__media img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--content-media-ratio);
  object-fit:cover;
  border-radius:var(--mhg-radius);
  box-shadow:var(--mhg-shadow-soft);
}
.content-card-grid,
.career-jobs__grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--content-card-gap);
  align-items:stretch;
}
.content-card,
.career-job-card {
  height:100%;
  padding:clamp(1.4rem,3vw,2.4rem);
  border:1px solid var(--mhg-border);
  border-radius:var(--mhg-radius);
  background:var(--mhg-white);
  box-shadow:var(--mhg-shadow-soft);
}
.content-card > :first-child { margin-top:0; }
.content-card > :last-child { margin-bottom:0; padding-bottom:0; }
.content-section--dark .content-card,
.content-section--dark .content-card h1,
.content-section--dark .content-card h2,
.content-section--dark .content-card h3,
.content-section--dark .content-card h4,
.content-section--dark .content-card p,
.content-section--dark .content-card li,
.content-section--dark .content-card address {
  color:var(--mhg-black);
}
.content-section--dark .content-card a:not(.mhg-button) { color:var(--mhg-red); }
.content-cta,
.career-initiative__inner {
  display:flex;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
  justify-content:space-between;
}
.content-cta__copy,
.career-initiative__copy { max-width:var(--content-readable); }

@media (max-width:850px) {
  .content-split,
  .career-about__layout { grid-template-columns:1fr; }
}

@media (max-width:700px) {
  .content-card-grid,
  .career-jobs__grid { grid-template-columns:1fr; }
  .content-cta,
  .career-initiative__inner { align-items:flex-start; flex-direction:column; }
}

/* Seiten aus durchgehenden Sektionen beginnen direkt unter dem Hero und
   enden ohne den allgemeinen Abstand der klassischen CMS-Inhaltsspalte. */
body.inhalt .content:has(.content-sections),
body.inhalt .content:has(.content--rental),
body.inhalt .content:has(.job-page) {
  margin-bottom:0;
}

body.inhalt .content .column.full:has(> .content-sections),
body.inhalt .content .column.full:has(> .content--rental),
body.inhalt .content .column.full:has(> .job-page) {
  padding-block:0;
}

/* Die Einleitung der Initiativbewerbung beginnt am Hero; der darunter vom
   CMS erzeugte Formularbereich behält seinen regulären unteren Abstand. */
body.inhalt .content .column.full:has(> .career-application-intro) {
  padding-top:0;
}

@media (max-width:700px) {
  .content-section {
    padding-inline:1rem;
  }
}


body.inhalt .content .column.full {
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

@media (max-width: 700px) {
  body.inhalt .mhg-header .mhg-container,
  body.inhalt .content,
  body.inhalt .hero__inner {
    width: min(calc(100% - 2rem), var(--mhg-content));
  }

  /* Der äußere Content-Rahmen liefert bereits 1rem Seitenabstand. Ohne
     zusätzliches Spalten-Padding fluchtet der Text mit dem Hero-Inhalt. */
  body.inhalt .content .column.full {
    padding-inline: 0;
  }

  body.inhalt .hero {
    min-height: 380px;
    background-position: 58% center;
  }

  body.inhalt .hero::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3));
  }

}

/* ==========================================================
   HybridCMS-Kompatibilität
   Das Markup und die Zustandsklassen werden in
   data/h_layer_nav.inc.php erzeugt und bleiben unverändert.
========================================================== */
.mhg-mainnav > .mhg-container > nav.desktop {
  display: block;
  position: relative;
}

.mhg-mainnav .skip-link {
  position: absolute;
  left: -9999px;
}

.mhg-mainnav .skip-link:focus {
  left: 1rem;
  top: .5rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--mhg-black);
  color: var(--mhg-white);
}

.mhg-mainnav .main-menu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mhg-mainnav .main-menu > li {
  position: relative;
  display: flex;
}

.mhg-mainnav a.nav1,
.mhg-mainnav a.nav1on {
  display: flex;
  align-items: center;
  padding: .8rem clamp(.7rem, 1.25vw, 1.35rem);
  color: var(--mhg-black);
  font-family: "Outfit", Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.mhg-mainnav a.nav1:hover,
.mhg-mainnav a.nav1:focus-visible,
.mhg-mainnav a.nav1on {
  color: var(--mhg-red);
}

.mhg-mainnav a.nav1on {
  box-shadow: inset 0 -4px 0 var(--mhg-red);
}

.mhg-mainnav ul.dropdown_first,
.mhg-mainnav ul.dropdown_second,
.mhg-mainnav ul.dropdown_third {
  display: none;
  margin: 0;
  padding: .5rem 0;
  min-width: 240px;
  border-radius: 0;
  list-style: none;
  background: var(--mhg-white);
  box-shadow: var(--mhg-shadow);
}

.mhg-mainnav ul.dropdown_first {
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
}

.mhg-mainnav ul.dropdown_second,
.mhg-mainnav ul.dropdown_third {
  position: absolute;
  z-index: 51;
  top: 0;
  left: 100%;
}

.mhg-mainnav li:hover > ul.dropdown_first,
.mhg-mainnav li:focus-within > ul.dropdown_first,
.mhg-mainnav li:hover > ul.dropdown_second,
.mhg-mainnav li:focus-within > ul.dropdown_second,
.mhg-mainnav li:hover > ul.dropdown_third,
.mhg-mainnav li:focus-within > ul.dropdown_third {
  display: block;
}

.mhg-mainnav a.nav2,
.mhg-mainnav a.nav2on,
.mhg-mainnav a.nav3,
.mhg-mainnav a.nav3on,
.mhg-mainnav a.nav4,
.mhg-mainnav a.nav4on,
.mhg-mainnav .nav_headline a,
.mhg-mainnav .menu-back a {
  display: block;
  padding: .7rem 1rem;
  color: var(--mhg-black);
  text-decoration: none;
}

.mhg-mainnav a.nav2on,
.mhg-mainnav a.nav3on,
.mhg-mainnav a.nav4on,
.mhg-mainnav a.nav2:hover,
.mhg-mainnav a.nav3:hover,
.mhg-mainnav a.nav4:hover,
.mhg-mainnav a.nav2:focus-visible,
.mhg-mainnav a.nav3:focus-visible,
.mhg-mainnav a.nav4:focus-visible {
  background: var(--mhg-red);
  color: var(--mhg-white);
}

@media (min-width: 1025px) {
  .mhg-mainnav li:hover > a.nav-forward-link + ul > li.menu-back + li > a,
  .mhg-mainnav li:focus-within > a.nav-forward-link + ul > li.menu-back + li > a,
  .mhg-mainnav li:hover > ul > li > a.nav-forward-target,
  .mhg-mainnav li:focus-within > ul > li > a.nav-forward-target {
    background: var(--mhg-red);
    color: var(--mhg-white);
  }
}

.mhg-mainnav ul.dropdown_first a,
.mhg-mainnav ul.dropdown_second a,
.mhg-mainnav ul.dropdown_third a {
  border-radius: 0;
}

.mhg-mainnav .nav_headline,
.mhg-mainnav .menu-back {
  display: none;
}

/* Zeitgesteuerte Topmeldungen als modaler Hinweis. */
.mhg-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.mhg-notice-modal[hidden] { display: none; }
.mhg-notice-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.mhg-notice-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--mhg-radius);
  background: var(--mhg-white);
  box-shadow: var(--mhg-shadow);
}
.mhg-notice-modal__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--mhg-black);
  color: var(--mhg-white);
  font-size: 1.7rem;
  cursor: pointer;
}
.mhg-notice-modal__items { display: grid; gap: 1.5rem; }
.mhg-notice-modal__item + .mhg-notice-modal__item { padding-top: 1.5rem; border-top: 1px solid var(--mhg-border); }
.mhg-notice-modal__item h3 { margin: 0 0 .25rem; }
.mhg-notice-modal__date { margin: 0 0 .75rem; color: var(--mhg-dark-gray); font-size: .9rem; }
body.mhg-modal-open { overflow: hidden; }

.mhg-footer__nav .sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mhg-footer__nav .sitemap .frow { margin: 0; }
.mhg-footer__nav .footer-nav-link { display: block; }
.mhg-footer__nav .footer-submenu {
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
}
.mhg-footer__nav .footer-submenu .footer-submenu { margin-left: 1rem; }
.mhg-footer__nav .footer-submenu > .footer-nav-item + .footer-nav-item { margin-top: .25rem; }
.mhg-footer__nav .footer-nav-item:hover > .nav-forward-link + .footer-submenu > .footer-nav-item > .nav-forward-target,
.mhg-footer__nav .footer-nav-item:focus-within > .nav-forward-link + .footer-submenu > .footer-nav-item > .nav-forward-target {
  color: var(--mhg-red);
}
.mhg-footer__service { margin-top: 1.5rem; font-size: .8rem; }
.mhg-footer__service #nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mhg-footer__service #nav li { display: flex; align-items: center; margin: 0; }
.mhg-footer__service #nav li + li::before {
  content: "\00b7";
  margin-right: .5rem;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 1024px) {
  .mhg-footer > .mhg-container { grid-template-columns: 1fr; gap: 2.5rem; }
  .mhg-footer__nav { padding-bottom: 0; }
  .mhg-footer__content { max-width: none; justify-self: stretch; }
  .mhg-mainnav > .mhg-container > nav.desktop { display: block; }
  .mhg-mainnav .main-menu { display: grid; grid-template-columns: 1fr; }
  .mhg-mainnav .main-menu > li { display: block; }
  .mhg-mainnav a.nav1,
  .mhg-mainnav a.nav1on { padding: .9rem 1rem; }
  .mhg-mainnav ul.dropdown_first,
  .mhg-mainnav ul.dropdown_second,
  .mhg-mainnav ul.dropdown_third {
    position: static;
    min-width: 0;
    box-shadow: none;
    padding-left: 1rem;
  }
  .mhg-mainnav li:hover > ul.dropdown_first,
  .mhg-mainnav li:focus-within > ul.dropdown_first,
  .mhg-mainnav li:hover > ul.dropdown_second,
  .mhg-mainnav li:focus-within > ul.dropdown_second,
  .mhg-mainnav li:hover > ul.dropdown_third,
  .mhg-mainnav li:focus-within > ul.dropdown_third { display: none; }
  .mhg-mainnav ul.active { display: block !important; }
  .mhg-mainnav .nav_headline,
  .mhg-mainnav .menu-back { display: block; }
}

/* =====================================================
   UPDATE 01: Navigation, Logos, Schnellzugriffe, Footer
===================================================== */

.mhg-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Logo-Gruppe: beide MHG-Bestandteile bleiben erhalten */
.mhg-brandbar__logo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

/* Hauptnavigation: nur die erste Ebene als horizontale Leiste */
.mhg-mainnav > .mhg-container > .mhg-mainnav__list {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: .15rem;
}

.mhg-mainnav .nav1 {
  position: relative;
  display: flex;
  align-items: stretch;
}

.mhg-mainnav .nav1 > a,
.mhg-mainnav .mhg-navitem-row > a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: .9rem clamp(.65rem, 1vw, 1.15rem);
}

.mhg-mainnav .nav1_on > a,
.mhg-mainnav .nav1_on > .mhg-navitem-row > a,
.mhg-mainnav .nav2_on > a {
  color: var(--mhg-red);
  font-weight: 700;
}

.mhg-navitem-row {
  display: flex;
  align-items: stretch;
}

.mhg-submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 44px;
  padding: .4rem;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.mhg-submenu-toggle:hover,
.mhg-submenu-toggle:focus-visible {
  color: var(--mhg-red);
}

.mhg-subnav {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  min-width: 190px;
  min-height: 0;
  margin: 0;
  padding: .4rem 0;
  display: none;
  list-style: none;
  border: 1px solid var(--mhg-border);
  background: var(--mhg-white);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.mhg-subnav .nav2 {
  display: block;
}

.mhg-subnav .nav2 > a {
  display: block;
  min-height: 44px;
  padding: .75rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.mhg-has-submenu:hover > .mhg-subnav,
.mhg-has-submenu:focus-within > .mhg-subnav,
.mhg-has-submenu.is-submenu-open > .mhg-subnav {
  display: block;
}

/* Schnellzugriffe: größere Icons und klare Klickflächen */
.mhg-quicklinks ul {
  min-height: 106px;
}

.mhg-quicklinks a {
  min-height: 106px;
  gap: .7rem;
  font-size: 1rem;
}

.mhg-quicklinks img {
  width: clamp(72px, 6.3vw, 112px);
  height: 62px;
  object-fit: contain;
}

/* Footer: besser lesbar und Kontakt mit Icons */
.mhg-footer {
  font-size: 1rem;
}

.mhg-footer__nav {
  font-size: .96rem;
}

.mhg-footer h2 {
  font-size: 1.2rem;
}

.mhg-footer p,
.mhg-footer address {
  font-size: 1rem;
  line-height: 1.65;
}

.mhg-footer__contact {
  display: grid;
  gap: .45rem;
  margin-top: .85rem;
}

.mhg-footer__contact a {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.mhg-footer__contact svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

@media (max-width: 1024px) {
  .mhg-brandbar__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
  }

  .mhg-mainnav > .mhg-container > .mhg-mainnav__list {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .mhg-mainnav .nav1 {
    display: block;
    border-bottom: 1px solid #eee;
  }

  .mhg-navitem-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .mhg-mainnav .nav1 > a,
  .mhg-mainnav .mhg-navitem-row > a {
    min-height: 48px;
    padding: .85rem 1rem;
  }

  .mhg-submenu-toggle {
    min-width: 48px;
    min-height: 48px;
    border-left: 1px solid #eee;
  }

  .mhg-subnav {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #eee;
    box-shadow: none;
    background: #f7f7f7;
  }

  .mhg-has-submenu:hover > .mhg-subnav,
  .mhg-has-submenu:focus-within > .mhg-subnav {
    display: none;
  }

  .mhg-has-submenu.is-submenu-open > .mhg-subnav {
    display: block;
  }

  .mhg-subnav .nav2 > a {
    padding-left: 2rem;
  }

  .mhg-quicklinks ul {
    overflow: visible;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mhg-quicklinks a {
    min-height: 94px;
    padding-inline: .45rem;
  }

  .mhg-quicklinks img {
    width: clamp(58px, 8vw, 84px);
    height: 52px;
  }
}

@media (max-width: 700px) {
  .mhg-brandbar__inner {
    min-height: 84px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .65rem;
  }
	.mhg-topbar p {
		display: none;
	}

  .mhg-brandbar__logo {
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem;
  }

  .mhg-brandbar__logo img:first-child {
    width: min(200px, 47vw);
  }

  .mhg-brandbar__logo img:nth-child(2) {
    display: block;
    width: min(155px, 38vw);
  }

  .mhg-brandbar__yamaha {
    display: block;
  }

  .mhg-brandbar__yamaha img {
    width: clamp(150px, 16vw, 76px);
    height: auto;
  }

  .mhg-mainnav > .mhg-container > .mhg-mainnav__list {
    grid-template-columns: 1fr;
  }

  .mhg-quicklinks ul {
    min-height: 82px;
  }

  .mhg-quicklinks a {
    min-height: 82px;
    flex-direction: column;
    gap: .25rem;
    padding: .55rem .2rem;
    text-align: center;
    font-size: .8rem;
  }

  .mhg-quicklinks img {
    width: clamp(46px, 12vw, 62px);
    height: 42px;
  }

  .mhg-footer__nav {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
	.mhg-topbar p { display: none; }

  .mhg-brandbar__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .mhg-brandbar__logo img:first-child {
    width: min(180px, 45vw);
  }

  .mhg-brandbar__logo img:nth-child(2) {
    width: min(138px, 35vw);
  }

  .mhg-brandbar__yamaha img {
    width: 100px;
  }

  .mhg-quicklinks a {
    min-height: 70px;
  }

  .mhg-quicklinks img {
    width: 50px;
    height: 42px;
  }

  .mhg-quicklinks__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* =====================================================
   NAVIGATION – DROPDOWN-KORREKTUR
   Hauptlink bleibt anklickbar, Untermenü erscheint nur
   bei Hover/Tastaturfokus bzw. mobil über den Pfeilbutton.
===================================================== */
.mhg-mainnav .mhg-subnav {
  display: none;
}

@media (min-width: 1025px) {
  .mhg-mainnav .mhg-has-submenu:hover > .mhg-subnav,
  .mhg-mainnav .mhg-has-submenu:focus-within > .mhg-subnav,
  .mhg-mainnav .mhg-has-submenu.is-submenu-open > .mhg-subnav {
    display: block;
  }
}

@media (max-width: 1024px) {
  .mhg-mainnav .mhg-has-submenu:hover > .mhg-subnav,
  .mhg-mainnav .mhg-has-submenu:focus-within > .mhg-subnav {
    display: none;
  }

  .mhg-mainnav .mhg-has-submenu.is-submenu-open > .mhg-subnav {
    display: block;
  }
}

/* =====================================================
   STICKY HEADER MIT VERKLEINERUNG BEIM SCROLLEN
===================================================== */

.mhg-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--mhg-white);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

/* Die Topbar wird flüssig eingeklappt, ohne negatives Margin. */
.mhg-topbar {
  max-height: 48px;
  overflow: hidden;
  opacity: 1;
  transition:
    max-height .28s ease,
    opacity .2s ease;
}

/* Feste Ausgangshöhe ermöglicht ein echtes Schrumpfen der Brandbar. */
.mhg-brandbar {
  overflow: hidden;
}

.mhg-brandbar__inner {
  height: 78px;
  min-height: 0;
  transition: height .28s ease;
}

.mhg-brandbar__logo,
.mhg-brandbar__yamaha {
  transition: transform .28s ease;
  will-change: transform;
}

.mhg-brandbar__logo {
  transform-origin: left center;
}

.mhg-brandbar__yamaha {
  transform-origin: right center;
}

/* Scrollzustand */
.mhg-header.is-scrolled .mhg-topbar {
  max-height: 0;
  opacity: 0;
}

.mhg-header.is-scrolled .mhg-brandbar__inner {
  height: 58px;
}

.mhg-header.is-scrolled .mhg-brandbar__logo {
  transform: translateY(-4px) scale(.78);
}

.mhg-header.is-scrolled .mhg-brandbar__yamaha {
  transform: scale(.78);
}

/* Dropdowns müssen über dem nachfolgenden Inhalt liegen. */
.mhg-mainnav,
.mhg-subnav {
  overflow: visible;
}

/* Geöffnete mobile Navigation bleibt im sichtbaren Fenster scrollbar. */
@media (max-width: 1024px) {
  .mhg-mainnav.is-open {
    max-height: calc(100vh - 114px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 700px) {
  .mhg-brandbar__inner {
    height: 84px;
  }

  .mhg-header.is-scrolled .mhg-brandbar__inner {
    height: 64px;
  }

  .mhg-header.is-scrolled .mhg-brandbar__logo {
    transform: translateY(-4px) scale(.72);
  }

  .mhg-header.is-scrolled .mhg-brandbar__yamaha {
    transform: scale(.82);
  }

  .mhg-mainnav.is-open {
    max-height: calc(100vh - 64px);
  }
}

/* Sprungziele werden nicht vom Sticky Header verdeckt. */
[id] {
  scroll-margin-top: 190px;
}

@media (max-width: 1024px) {
  [id] {
    scroll-margin-top: 150px;
  }
}

/* Bei reduzierter Bewegung erfolgt der Zustandswechsel ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .mhg-topbar,
  .mhg-brandbar__inner,
  .mhg-brandbar__logo,
  .mhg-brandbar__yamaha {
    transition: none !important;
  }
}

@media (max-width: 1024px) {
  .mhg-mainnav.is-open > .mhg-container {
    width: 100%;
  }

  .mhg-mainnav.is-open > .mhg-container > nav.desktop {
    position: static;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
    background: var(--mhg-white);
    box-shadow: none;
    font-size: inherit;
  }

  .mhg-mainnav.is-open .main-menu {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .mhg-mainnav.is-open ul.dropdown_first,
  .mhg-mainnav.is-open ul.dropdown_second,
  .mhg-mainnav.is-open ul.dropdown_third {
    position: static;
    left: auto !important;
    width: 100% !important;
    height: auto;
    overflow: visible;
  }
}

/* =====================================================
   FINE-TUNING: Header, Navigation und Flächen
===================================================== */

/* Die schwarze Leiste läuft auch bei schmalen Viewports wirklich von Kante
   zu Kante, unabhängig von den Breitenregeln des älteren Seitenlayouts. */
.mhg-topbar {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

/* Der Text wird beim Hover auf rotem Grund weiß. Die getrennten Selektoren
   berücksichtigen beide vom CMS ausgegebenen Navigationsvarianten. */
.mhg-mainnav a.nav1:hover,
.mhg-mainnav a.nav1:focus-visible,
.mhg-mainnav .nav1 > a:hover,
.mhg-mainnav .nav1 > a:focus-visible,
.mhg-mainnav .mhg-navitem-row > a:hover,
.mhg-mainnav .mhg-navitem-row > a:focus-visible {
  color: var(--mhg-white);
  background: var(--mhg-red);
}

/* Kleine Rundung für reguläre Aktionsflächen, deutlich zurückhaltender als
   bei Karten und großen Inhaltsflächen. */
.content .btn,
.content button[type="submit"],
.content input[type="submit"] {
  border-radius: 4px;
  box-shadow: var(--mhg-shadow-soft);
}

/* Tablets im Querformat erhalten bereits die kompakte Navigation. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .mhg-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: "Outfit", sans-serif;
  }

  .mhg-mainnav { display: none; }
  .mhg-mainnav.is-open {
    display: block;
    max-height: calc(100vh - 114px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mhg-mainnav.is-open > .mhg-container { width: 100%; }
  .mhg-mainnav.is-open > .mhg-container > nav.desktop {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
    background: var(--mhg-white);
    box-shadow: none;
  }
  .mhg-mainnav .main-menu,
  .mhg-mainnav > .mhg-container > .mhg-mainnav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-height: auto;
    gap: 0;
  }
  .mhg-mainnav .main-menu > li,
  .mhg-mainnav .nav1 {
    display: block;
    border-bottom: 1px solid #eee;
  }
  .mhg-navitem-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
  }
  .mhg-mainnav ul.dropdown_first,
  .mhg-mainnav ul.dropdown_second,
  .mhg-mainnav ul.dropdown_third,
  .mhg-subnav {
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
  }
  .mhg-mainnav .mhg-has-submenu:hover > .mhg-subnav,
  .mhg-mainnav .mhg-has-submenu:focus-within > .mhg-subnav { display: none; }
  .mhg-mainnav .mhg-has-submenu.is-submenu-open > .mhg-subnav { display: block; }
}

@media (max-width: 480px) {
  /* Das MHG-Logo enthält bereits den Yamaha-Hinweis. Das zusätzliche Logo
     entfällt auf sehr schmalen Geräten und verhindert horizontalen Überstand. */
  .mhg-brandbar__yamaha { display: none; }
  .mhg-brandbar__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 1199px) {
  .mhg-mainnav .menu-back {
    display: flex !important;
    align-items: center;
    padding: 0 1rem;
  }

  .mhg-mainnav .menu-back::before { content: none; }

  .mhg-mainnav .menu-back a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .8rem 0;
  }

  .mhg-mainnav .menu-back a::before {
    content: "‹";
    flex: 0 0 auto;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
  }
}

/* =====================================================
   NAVIGATION – MEHRSTUFIGES SEITENMENÜ
   Wie bei großen Inhaltsbäumen üblich zeigt die kompakte Navigation immer
   nur eine Ebene. So bleibt sie auch mit sehr vielen CMS-Seiten bedienbar.
===================================================== */
@media (max-width: 1199px) {
  body.mhg-navigation-open {
    overflow: hidden;
  }

  .mhg-mainnav,
  .mhg-mainnav.is-open {
    position: fixed;
    z-index: 900;
    top: var(--mhg-mobile-header-height, 64px);
    right: auto;
    bottom: 0;
    left: 0;
    width: min(360px, 90vw);
    max-height: none;
    overflow: hidden;
    background: var(--mhg-white);
    box-shadow: 100vw 0 0 rgba(0, 0, 0, .62), 8px 0 28px rgba(0, 0, 0, .2);
  }

  .mhg-mainnav {
    display: block;
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform .35s ease, visibility 0s linear .35s;
  }

  .mhg-mainnav.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform .35s ease;
  }

  .mhg-mainnav > .mhg-container,
  .mhg-mainnav > .mhg-container > nav.desktop {
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: hidden;
  }

  .mhg-mainnav .main-menu {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem 0 5rem;
    background: var(--mhg-white);
  }

  .mhg-mainnav .main-menu > li {
    position: static;
    display: block;
    border-bottom: 1px solid var(--mhg-border);
  }

  .mhg-mainnav .main-menu li {
    position: static !important;
  }

  .mhg-mainnav a.nav1,
  .mhg-mainnav a.nav1on,
  .mhg-mainnav a.nav2,
  .mhg-mainnav a.nav2on,
  .mhg-mainnav a.nav3,
  .mhg-mainnav a.nav3on,
  .mhg-mainnav a.nav4,
  .mhg-mainnav a.nav4on,
  .mhg-mainnav .nav_headline a,
  .mhg-mainnav .menu-back a {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--mhg-border);
    background: transparent;
    color: var(--mhg-black);
    font-size: 1rem;
    line-height: 1.35;
    text-transform: none;
    white-space: normal;
  }

  .mhg-mainnav a.nav1,
  .mhg-mainnav a.nav1on {
    font-weight: 700;
  }

  .mhg-mainnav nav.desktop ul.main-menu li > a[aria-haspopup="true"] {
    position: relative;
    padding-right: 3.25rem;
    background: transparent !important;
  }

  .mhg-mainnav nav.desktop ul.main-menu li > a[aria-haspopup="true"]::after {
    content: "›";
    position: absolute;
    right: 1.25rem;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1;
  }

  .mhg-mainnav nav.desktop ul.main-menu li > a[aria-haspopup="true"]:hover,
  .mhg-mainnav nav.desktop ul.main-menu li > a[aria-haspopup="true"]:focus-visible {
    background: var(--mhg-red) !important;
    color: var(--mhg-white);
  }

  /* Alte Theme-Regeln färben Unterpunkte blau. Normale Einträge bleiben
     schwarz; nur Hover, Fokus und der aktive Eintrag erhalten Rot. */
  .mhg-mainnav nav.desktop ul.main-menu a.nav2,
  .mhg-mainnav nav.desktop ul.main-menu a.nav3,
  .mhg-mainnav nav.desktop ul.main-menu a.nav4 {
    background-color: transparent !important;
    color: var(--mhg-black) !important;
  }

  .mhg-mainnav nav.desktop ul.main-menu a.nav2:hover,
  .mhg-mainnav nav.desktop ul.main-menu a.nav2:focus-visible,
  .mhg-mainnav nav.desktop ul.main-menu a.nav3:hover,
  .mhg-mainnav nav.desktop ul.main-menu a.nav3:focus-visible,
  .mhg-mainnav nav.desktop ul.main-menu a.nav4:hover,
  .mhg-mainnav nav.desktop ul.main-menu a.nav4:focus-visible {
    background-color: var(--mhg-red) !important;
    color: var(--mhg-white) !important;
  }

  .mhg-mainnav ul.dropdown_first,
  .mhg-mainnav ul.dropdown_second,
  .mhg-mainnav ul.dropdown_third,
  .mhg-mainnav.is-open ul.dropdown_first,
  .mhg-mainnav.is-open ul.dropdown_second,
  .mhg-mainnav.is-open ul.dropdown_third {
    position: absolute !important;
    z-index: 2;
    inset: 0 auto 0 0 !important;
    display: block !important;
    visibility: hidden;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 0 5rem !important;
    border: 0;
    background: var(--mhg-white) !important;
    box-shadow: none;
    opacity: 1;
    transform: translateX(-105%);
    transition: transform .35s ease, visibility 0s linear .35s;
  }

  .mhg-mainnav ul.dropdown_second { z-index: 3; }
  .mhg-mainnav ul.dropdown_third { z-index: 4; }

  .mhg-mainnav ul.dropdown_first.active,
  .mhg-mainnav ul.dropdown_second.active,
  .mhg-mainnav ul.dropdown_third.active {
    visibility: visible;
    transform: translateX(0);
    transition: transform .35s ease;
  }

  .mhg-mainnav .nav_headline,
  .mhg-mainnav .menu-back {
    display: block !important;
  }

  .mhg-mainnav .nav_headline a {
    color: var(--mhg-red);
    font-weight: 700;
  }

  .mhg-mainnav .menu-back {
    padding: 0;
    background: #f3f3f3;
  }

  /* Der alte Navigationsstil erzeugt den Zurück-Pfeil am Listenelement.
     Im neuen Seitenmenü sitzt er ausschließlich im anklickbaren Link. */
  .mhg-mainnav nav.desktop .menu-back::before {
    content: none !important;
    display: none !important;
  }

  .mhg-mainnav .menu-back a::before {
    content: "‹";
    margin-right: .65rem;
    font-size: 1.65rem;
    line-height: 1;
  }

  /* Die Überschrift bezeichnet die aktuelle Ebene; deren direkte Kinder
     werden leicht eingerückt und dadurch als Unterpunkte erkennbar. */
  .mhg-mainnav ul.dropdown_first > li:not(.menu-back):not(.nav_headline) > a.nav2,
  .mhg-mainnav ul.dropdown_first > li:not(.menu-back):not(.nav_headline) > a.nav2on,
  .mhg-mainnav ul.dropdown_second > li:not(.menu-back):not(.nav_headline) > a.nav3,
  .mhg-mainnav ul.dropdown_second > li:not(.menu-back):not(.nav_headline) > a.nav3on,
  .mhg-mainnav ul.dropdown_third > li:not(.menu-back):not(.nav_headline) > a.nav4,
  .mhg-mainnav ul.dropdown_third > li:not(.menu-back):not(.nav_headline) > a.nav4on {
    padding-left: 2.25rem;
  }

  /* Aktive Unterseiten verwenden die MHG-Hausfarbe statt des alten Blaus. */
  .mhg-mainnav a.nav2on,
  .mhg-mainnav a.nav3on,
  .mhg-mainnav a.nav4on {
    background: var(--mhg-red) !important;
    color: var(--mhg-white) !important;
  }

  .mhg-mainnav a:hover,
  .mhg-mainnav a:focus-visible,
  .mhg-mainnav a.nav1:hover,
  .mhg-mainnav a.nav1:focus-visible {
    background-color: var(--mhg-red);
    color: var(--mhg-white);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mhg-mainnav,
  .mhg-mainnav ul.dropdown_first,
  .mhg-mainnav ul.dropdown_second,
  .mhg-mainnav ul.dropdown_third {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   Stellenanzeigen und dreistufige Bewerbung
---------------------------------------------------------------------------- */
.job-page { margin-inline:auto; max-width:var(--mhg-content); }
.job-page__section-inner { max-width:var(--mhg-content); }

.job-page__hero-layout {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.job-page__portrait { justify-self:stretch; }
.job-page__portrait img {
  aspect-ratio:var(--content-media-ratio);
  object-position:left center;
}

.job-page__intro { max-width:860px; margin:0; }
.job-page__intro h2 { max-width:900px; margin:.2rem 0 .75rem; font-size:clamp(1.9rem,3.2vw,2.75rem); line-height:1.1; }
.job-page__eyebrow { margin:0; color:var(--mhg-red); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.job-page__claim { margin:0; font-size:clamp(1.2rem,2vw,1.65rem); font-weight:600; }

.job-page__columns {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.job-page__card {
  min-width:0;
}
.job-page__card h3 { margin:0 0 1.1rem; font-size:clamp(1.35rem,2vw,1.8rem); }
.job-page__list { display:grid; gap:.8rem; margin:0; padding:0; list-style:none; }
.content .job-page__list li { position:relative; margin:0; padding:0 0 0 1.7rem; }
.job-page__list li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--mhg-red);
  font-weight:700;
}

.job-page__cta {
  margin:0;
  padding:0;
  color:inherit;
  background:transparent;
  box-shadow:none;
}
.job-page__cta h2 { margin:0 0 .5rem; color:inherit; }
.job-page__cta p { margin:0; }
.job-page__cta form { flex:0 0 auto; }
.job-page__button { min-width:0; width:auto; margin:0; border-color:var(--mhg-red); background:var(--mhg-red); }
.job-page__button--cta { padding:1.1rem 2rem; }
.job-page__section--cta,
.career-initiative {
  background-color:#70000d;
  background-image:radial-gradient(ellipse at 30% 20%,var(--mhg-red) 0%,#a90015 52%,#70000d 100%);
}
.job-page__section--cta .job-page__button--cta {
  border-color:var(--mhg-white);
  color:var(--mhg-red);
  background:var(--mhg-white);
}
.job-page__section--cta .job-page__button--cta:hover,
.job-page__section--cta .job-page__button--cta:focus-visible {
  border-color:var(--mhg-black);
  color:var(--mhg-white);
  background:var(--mhg-black);
}
.job-page__button:hover,
.job-page__button:focus-visible { border-color:#bd0711; background:#bd0711; }
.job-page__details { max-width:var(--content-readable); }
.job-page__details h2 { margin-top:0; }
.content-section--dark .job-page__card,
.content-section--dark .job-page__card h3,
.content-section--dark .job-page__card li { color:var(--mhg-black); }

.job-application { max-width:900px; margin-inline:auto; }
.job-application__steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
  margin:0 0 clamp(2rem,5vw,4rem);
  padding:0;
  list-style:none;
  counter-reset:job-step;
}
.content .job-application__steps li {
  counter-increment:job-step;
  margin:0;
  padding:.85rem 1rem;
  border-bottom:3px solid var(--mhg-border);
  color:var(--mhg-dark-gray);
  font-weight:600;
  text-align:center;
}
.job-application__steps li::before { content:counter(job-step) ". "; }
.content .job-application__steps li.is-active { border-color:var(--mhg-red); color:var(--mhg-black); }

.job-application__form { display:grid; gap:1.25rem; }
.job-application__form fieldset { display:grid; gap:.8rem; margin:0; padding:0; border:0; }
.job-application__check {
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  padding:1rem;
  border:1px solid var(--mhg-border);
  border-radius:10px;
  background:var(--mhg-white);
  cursor:pointer;
  box-shadow:var(--mhg-shadow-soft);
}
.job-application__check input { flex:0 0 auto; width:1.3rem; height:1.3rem; margin:.1rem 0 0; accent-color:var(--mhg-red); }
.job-application__fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.job-application__fields label { display:grid; gap:.4rem; font-weight:600; }
.job-application__fields input,
.job-application__fields textarea {
  width:100%;
  padding:.8rem 1rem;
  border:1px solid var(--mhg-border);
  border-radius:8px;
  color:var(--mhg-black);
  background:var(--mhg-white);
}
.job-application__fields input:focus,
.job-application__fields textarea:focus { border-color:var(--mhg-red); outline:2px solid rgba(227,6,32,.18); }
.job-application__field--wide { grid-column:1 / -1; }
.job-application__privacy { font-weight:400; cursor:default; }
.job-application__honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.job-application__required { color:var(--mhg-dark-gray); font-size:.9rem; }
.job-application__alternatives { margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--mhg-border); }
.job-application__message { margin-bottom:1.5rem; padding:1.2rem 1.4rem; border-radius:10px; }
.job-application__message ul { margin:0; padding-left:1.2rem; }
.job-application__message--error { border:1px solid #cb3434; color:#8c1d1d; background:rgba(203,52,52,.1); }
.job-application__message--success { border:1px solid #0a9200; color:#075f00; background:rgba(10,146,0,.08); }

@media (max-width:850px) {
  .job-page__hero-layout { grid-template-columns:1fr; }
  .job-page__portrait { max-width:none; justify-self:stretch; }
  .job-page__cta { align-items:flex-start; flex-direction:column; }
}

@media (max-width:700px) {
  .job-page__columns,
  .job-application__fields { grid-template-columns:1fr; }
  .job-application__field--wide { grid-column:auto; }
  .content .job-application__steps li { padding:.7rem .25rem; font-size:.8rem; }
  .job-page__cta form { width:100%; }
  .job-page__button { width:100%; }
}

/* -------------------------------------------------------------------------
   Karriere: Übersicht der offenen Stellen
---------------------------------------------------------------------------- */
.career-jobs__intro {
  max-width:var(--content-readable);
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.career-jobs__eyebrow {
  margin:0;
  padding:0;
  color:var(--mhg-red);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.career-jobs__intro h2 { margin:.3rem 0 .8rem; }
.career-jobs__intro > p:last-child { margin:0; padding:0; }
.career-job-card {
  display:flex;
  flex-direction:column;
  color:var(--mhg-black);
}
.career-job-card__category {
  margin:0 0 .5rem;
  padding:0;
  color:var(--mhg-red);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.career-job-card h3 { margin:0 0 1rem; color:var(--mhg-black); }
.career-job-card__text {
  flex-grow:1;
  margin:0 0 1.5rem;
  padding:0;
  color:var(--mhg-black);
}
.career-job-card .mhg-button {
  border-color:var(--mhg-red);
  background:var(--mhg-red);
}
.content-section--dark .career-jobs__eyebrow,
.content-section--dark .career-job-card__category { color:var(--mhg-red); }
.content-section--dark .career-job-card h3,
.content-section--dark .career-job-card__text { color:var(--mhg-black); }

.career-about__inner { max-width:var(--mhg-content); }
.career-about h2 { margin-top:0; }
.career-about p:last-child { margin-bottom:0; padding-bottom:0; }
.career-initiative h2 { margin:0 0 .5rem; }
.career-initiative p { margin:0; padding:0; }
.career-initiative .mhg-button {
  flex:0 0 auto;
  width:auto;
  min-width:0;
  margin:0;
  padding:1.1rem 2rem;
  border-color:var(--mhg-white);
  color:var(--mhg-red);
  background:var(--mhg-white);
}
.career-initiative .mhg-button:hover,
.career-initiative .mhg-button:focus-visible {
  border-color:var(--mhg-black);
  color:var(--mhg-white);
  background:var(--mhg-black);
}

@media (max-width:700px) {
  .career-initiative .mhg-button { width:100%; }
}