/*
Theme Name: Holzbau Mann
Description: Child theme for Avada theme
Author: Heliotronic
Author URI: https://theme-fusion.com
Template: Avada
Version: 2.0.0
Text Domain:  Avada
*/

/* Design A header: black contact bar, white header with the logo (64px), menu and the gold button */
.mann-topbar {
	background: #1a1a1a;
	color: var(--awb-color1);
	font-size: 13px;
	line-height: 20px;
}

.mann-topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 15px;
}

.mann-topbar-kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.mann-topbar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--awb-color1);
	text-decoration: none;
}

.mann-topbar a:hover {
	color: var(--awb-color4);
}

.fusion-logo img.fusion-standard-logo {
	height: 64px !important; /* Avada renders the logo at half size because of the retina setting */
	max-height: none;
	width: auto !important;
}

.fusion-header {
	border-bottom: 1px solid #eee;
}

@media (min-width: 1025px) {
	.fusion-header {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.fusion-header .fusion-row {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.fusion-main-menu > ul > li:last-child {
		padding-right: 0 !important;
	}

	/* "Anfrage stellen" as gold button, vertically centred in the 96px header */
	.fusion-main-menu > ul > li.mann-cta > a {
		height: 44px !important;
		margin-top: 26px;
		padding: 0 22px !important;
		background: var(--awb-color4);
		color: var(--awb-color8) !important;
	}

	.fusion-main-menu > ul > li.mann-cta > a:hover {
		background: var(--awb-color8);
		color: var(--awb-color1) !important;
	}
}

/* Bold text as on the old site (semibold 600). Avada's CSS loads later and sets "bolder",
   which on the light body text only gives 400, hence the higher specificity. */
body strong,
body b {
	font-weight: 600;
}

/* Main menu: gold line below the active item, text stays dark */
.fusion-main-menu > ul > li > a,
.fusion-main-menu > ul > li > a:hover,
.fusion-main-menu > ul > li.current-menu-item > a,
.fusion-main-menu > ul > li.current-menu-ancestor > a {
	color: var(--awb-color8) !important;
}

.fusion-main-menu > ul > li:not(.mann-cta) > a .menu-text {
	padding: 6px 0 3px;
	border-bottom: 3px solid transparent;
}

.fusion-main-menu > ul > li.current-menu-item:not(.mann-cta) > a .menu-text,
.fusion-main-menu > ul > li.current-menu-ancestor > a .menu-text,
.fusion-main-menu > ul > li:not(.mann-cta) > a:hover .menu-text {
	border-bottom-color: var(--awb-color4);
}

/* Header images in the heights of the old site: fixed per banner category and device (tablet below
   1401px, phone below 800px), full screen width. Start page slider: 640px, 520px on small screens. */
.mann-banner {
	height: var(--mann-banner-h, 700px);
	background-size: cover;
	background-position: center;
}

.mann-start-slider .fusion-slider-sc .slides img {
	width: 100%;
	height: 640px;
	object-fit: cover;
}

@media (max-width: 1400px) {
	.mann-banner {
		height: var(--mann-banner-h-tablet, 550px);
	}
}

@media (max-width: 799px) {
	.mann-banner {
		height: var(--mann-banner-h-mobile, 450px);
	}

	.mann-start-slider .fusion-slider-sc .slides img {
		height: 520px;
	}
}

/* Content 15px inside the 1280px width (same as the logo in the header) once the window is wider
   than 1280px plus #main's padding. The 30px column gutters come from Avada's col_spacing option. */
@media (min-width: 1311px) {
	#main .fusion-fullwidth:not(.mann-start-slider) > .fusion-row {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* not for containers nested in a column (e.g. the contact form) */
	#main .fusion-layout-column .fusion-fullwidth > .fusion-row {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Paragraph and list spacing as in Bootstrap 3 */
#main .fusion-text p {
	margin: 0 0 10px;
}

#main .fusion-text ul,
#main .fusion-text ol {
	margin-top: 0;
	margin-bottom: 10px;
}

#main .fusion-text li > ul,
#main .fusion-text li > ol {
	margin-bottom: 0;
}

#main .fusion-text hr {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid #f5f5f5;
}

/* Old Bootstrap 3 grid: the converter copies the old col-sm/md/lg-N classes as mann-sm/md/lg-N
   (build_pages.py). Phones below 768px full width, sm from 768px, md from 992px, lg from 1200px.
   Avada itself keeps the desktop widths down to 640px. */
#main .fusion-layout-column.mann-bs {
	width: 100% !important;
	flex-basis: 100% !important;
}

@media (min-width: 768px) {
	#main .fusion-layout-column.mann-sm-3 {
		width: 25% !important;
		flex-basis: 25% !important;
	}

	#main .fusion-layout-column.mann-sm-4 {
		width: 33.3333% !important;
		flex-basis: 33.3333% !important;
	}

	#main .fusion-layout-column.mann-sm-6 {
		width: 50% !important;
		flex-basis: 50% !important;
	}

	#main .fusion-layout-column.mann-sm-12 {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

@media (min-width: 992px) {
	#main .fusion-layout-column.mann-md-2 {
		width: 16.6667% !important;
		flex-basis: 16.6667% !important;
	}

	#main .fusion-layout-column.mann-md-3 {
		width: 25% !important;
		flex-basis: 25% !important;
	}

	#main .fusion-layout-column.mann-md-4 {
		width: 33.3333% !important;
		flex-basis: 33.3333% !important;
	}

	#main .fusion-layout-column.mann-md-5 {
		width: 41.6667% !important;
		flex-basis: 41.6667% !important;
	}

	#main .fusion-layout-column.mann-md-6 {
		width: 50% !important;
		flex-basis: 50% !important;
	}

	#main .fusion-layout-column.mann-md-8 {
		width: 66.6667% !important;
		flex-basis: 66.6667% !important;
	}

	#main .fusion-layout-column.mann-md-10 {
		width: 83.3333% !important;
		flex-basis: 83.3333% !important;
	}

	#main .fusion-layout-column.mann-md-12 {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

@media (min-width: 1200px) {
	#main .fusion-layout-column.mann-lg-3 {
		width: 25% !important;
		flex-basis: 25% !important;
	}

	#main .fusion-layout-column.mann-lg-4 {
		width: 33.3333% !important;
		flex-basis: 33.3333% !important;
	}

	#main .fusion-layout-column.mann-lg-12 {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* Contact block on the contact page: company name in bold, address blocks 20px apart */
.mann-kontakt .mann-lead {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

#main .mann-kontakt p {
	margin-bottom: 20px;
}

.mann-kontakt a.mann-tel {
	color: inherit;
}

/* Buttons (design A): gold, outlined or dark */
.mann-button {
	display: inline-block;
	padding: 14px 26px;
	background: var(--awb-color4);
	color: var(--awb-color8) !important;
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
}

.mann-button:hover {
	background: var(--awb-color8);
	color: var(--awb-color1) !important;
}

.mann-button-rahmen {
	padding: 12px 24px;
	border: 2px solid var(--awb-color8);
	background: transparent;
}

.mann-button-dunkel {
	background: #1a1a1a;
	color: var(--awb-color1) !important;
}

.mann-button-dunkel:hover {
	background: var(--awb-color4);
	color: var(--awb-color8) !important;
}

/* Start page (design A): slider with the intro panel, intro, services, gold band, contact */
body.home #main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.mann-start-slider {
	padding-bottom: 80px !important;
}

.mann-start-slider .fusion-layout-column {
	position: relative;
	margin-bottom: 0 !important;
}

#main .mann-hero-panel {
	position: absolute;
	left: max(15px, calc((100vw - 1280px) / 2 + 15px));
	bottom: -80px;
	z-index: 6;
	max-width: 620px;
	margin: 0;
	padding: 40px 44px;
	/* translucent so the image shows through (customer meeting 2026-11-11) */
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

#main .mann-hero-panel h1 {
	margin: 0 0 16px;
	font-size: 44px;
	line-height: 52px;
}

#main .mann-hero-panel p {
	margin: 0 0 28px;
}

#main .mann-dachzeile {
	margin: 0 0 12px;
	color: var(--awb-color6);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

#main .mann-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.mann-sec {
	padding: 88px 15px !important;
}

.mann-sec-grau {
	background-color: #f5f5f5 !important;
}

.mann-sec-gold {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
	background-color: var(--awb-color4) !important;
}

#main .mann-sec h2 {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
}

.mann-intro,
.mann-start-kontakt {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: start;
}

.mann-start-kontakt {
	align-items: stretch;
}

#main .mann-start-kontakt h2 {
	margin-bottom: 24px;
}

#main .mann-start-kontakt p {
	margin-bottom: 20px;
}

.mann-punkte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.mann-punkte > div {
	padding-top: 12px;
	border-top: 3px solid var(--awb-color4);
}

.mann-punkte strong {
	display: block;
	font-weight: 700;
}

.mann-punkte span {
	color: var(--awb-color6);
	font-size: 15px;
	line-height: 24px;
}

.mann-kopfzeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
	margin-bottom: 40px;
}

.mann-kopfzeile a {
	color: var(--awb-color8);
	font-weight: 700;
}

.mann-leistungen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.mann-leistung {
	display: flex;
	flex-direction: column;
	background: var(--awb-color1);
	color: var(--awb-color8) !important;
	text-decoration: none;
}

.mann-leistung img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.mann-leistung-text {
	display: block;
	padding: 22px 24px 26px;
}

.mann-leistung-titel {
	display: block;
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

.mann-leistung-beschreibung {
	display: block;
	margin-bottom: 14px;
	color: var(--awb-color6);
	font-size: 15px;
	line-height: 24px;
}

.mann-mehr {
	border-bottom: 2px solid var(--awb-color4);
	font-size: 14px;
	font-weight: 700;
}

.mann-leistung:hover .mann-mehr {
	border-bottom-color: var(--awb-color8);
}

.mann-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
}

#main .mann-band-slogan {
	margin: 0 0 8px;
	font-size: 40px;
	font-weight: 800;
	line-height: 48px;
	text-transform: uppercase;
}

#main .mann-band p {
	margin-bottom: 0;
}

.mann-band-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.mann-band-logos img {
	display: block;
	height: 96px;
	width: auto;
	padding: 8px;
	background: var(--awb-color1);
}

@media (max-width: 900px) {
	.mann-start-slider {
		padding-bottom: 0 !important;
	}

	#main .mann-hero-panel {
		position: relative;
		left: auto;
		bottom: auto;
		max-width: none;
		margin: -60px 16px 0;
		padding: 28px 24px;
		background: var(--awb-color1); /* below the image on small screens: stays opaque */
	}

	#main .mann-hero-panel h1 {
		font-size: 32px;
		line-height: 40px;
	}

	.mann-intro,
	.mann-start-kontakt,
	.mann-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.mann-sec {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	#main .mann-sec h2 {
		font-size: 28px;
		line-height: 36px;
	}

	#main .mann-band-slogan {
		font-size: 32px;
		line-height: 40px;
	}

	.mann-band-logos img {
		height: 80px;
	}
}

/* Slider dots inside the image, 16px above its lower edge, on the right (away from the intro panel):
   white rings, the active one filled. Avada reserves 60px below the slider for the dots. */
.mann-start-slider .flexslider {
	position: relative;
	height: auto !important;
	margin-bottom: 0 !important;
}

.mann-start-slider .flex-control-nav {
	position: absolute;
	bottom: 16px;
	left: 0;
	width: 100%;
	margin: 0;
	padding-right: max(15px, calc((100vw - 1280px) / 2 + 15px));
	box-sizing: border-box;
	line-height: 0;
	text-align: right;
	z-index: 5;
}

.mann-start-slider .flex-control-nav li {
	margin: 0 4px !important;
}

.mann-start-slider .flex-control-nav li a {
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
}

.mann-start-slider .flex-control-nav li a.flex-active,
.mann-start-slider .flex-control-nav li a:hover {
	background: #fff;
}

/* Breadcrumb line below the header image (11px, grey links, current page bold, hairline below over
   the full width), then the grey title bar with the uppercase title. Both start at the content
   edge: 15px inside the 1280px width and from the window edge below. */
.mann-breadcrumbs {
	padding: 16px 0 1vw; /* old site: 1vw below the line, 19px at 1920px */
	border-bottom: 1px solid #f5f5f5;
	font-size: 11px;
	line-height: 15.7px;
	color: var(--awb-color8);
}

.mann-breadcrumbs-inner,
.fusion-page-title-bar .fusion-page-title-row {
	box-sizing: border-box;
	max-width: none !important;
	padding-left: max(15px, calc((100% - 1280px) / 2 + 15px)) !important;
	padding-right: max(15px, calc((100% - 1280px) / 2 + 15px)) !important;
}

.mann-breadcrumbs a {
	color: var(--awb-color6);
}

.mann-breadcrumbs a.aktiv {
	font-weight: 800;
}

/* 20px above and below the title (64px bar); long titles wrap and the bar grows, as on the old site */
.fusion-page-title-bar {
	height: auto !important;
	min-height: 0 !important;
	padding: 20px 0 !important;
}

.fusion-page-title-bar .fusion-page-title-row {
	height: auto !important;
	min-height: 0 !important;
}

.fusion-page-title-bar h1.entry-title {
	text-transform: uppercase !important;
	font-weight: 700;
	line-height: 24.2px !important;
	margin: 0;
}

/* Footer (design A): black bar, small logo with copyright on the left, legal links on the right */
.fusion-copyright-notice {
	width: 100%;
}

.mann-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	text-align: left; /* Avada centers the copyright on small screens */
	font-size: 14px;
	line-height: 22px;
}

.mann-footer-marke {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mann-footer-marke img {
	display: block;
	width: 44px;
	height: 44px;
}

.mann-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.mann-footer-menu a {
	text-decoration: underline;
}

/* Referenzen: category filter as a sidebar on the left, active category in gold */
@media (min-width: 1000px) {
	.mann-referenzen .fusion-recent-works {
		display: flex;
		align-items: flex-start;
		gap: 30px;
	}

	.mann-referenzen .fusion-portfolio-wrapper {
		flex: 1;
	}
}

.mann-referenzen .fusion-filters {
	flex: 0 0 220px;
	display: block;
	margin: 0 0 30px;
	padding: 0;
	border: 0;
}

.mann-referenzen .fusion-filters .fusion-filter {
	float: none;
	display: block;
	margin: 0 0 2px;
	padding: 0;
	border: 0;
}

.mann-referenzen .fusion-filters .fusion-filter a {
	display: block;
	padding: 10px 14px;
	background: var(--awb-color2);
	color: var(--awb-color8);
	border: 0;
}

.mann-referenzen .fusion-filters .fusion-filter.fusion-active a,
.mann-referenzen .fusion-filters .fusion-filter a:hover {
	background: var(--awb-color4);
	color: var(--awb-color8);
}

/* VELUX configurator: full content width, 60px below the title bar, 1450px block as on the old site */
.mann-velux {
	box-sizing: border-box;
	height: 1450px;
	margin: 0 -15px;
	padding-top: 60px;
}

.mann-velux iframe {
	display: block;
	width: 100%;
}

/* Referenzen: sidebar 3/12 with category boxes and the project list (design A: wider than the old
   2/12, so the place names fit on one line), project 9/12 with thumbnails in four columns. */
.mann-ref {
	display: grid;
	grid-template-columns: calc((100% + 30px) * 3 / 12 - 30px) 1fr;
	column-gap: 30px;
	align-items: start;
	margin-top: 20px;
}

.mann-ref-kategorie {
	display: block;
	padding: 10px 18px;
	background: #f4f4f4;
	color: var(--awb-color8) !important;
	font-weight: 400;
	line-height: 20px;
}

.mann-ref-kategorie.aktiv,
.mann-ref-kategorie:hover {
	background: var(--awb-color4);
}

.mann-ref-projektliste {
	margin: 25px 0 0;
	padding: 10px;
	list-style: none;
}

.mann-ref-projektliste a {
	display: block;
	padding: 10px;
	line-height: 20px;
	color: var(--awb-color6);
}

.mann-ref-projektliste a.aktiv {
	background: var(--awb-color8);
	color: var(--awb-color1);
	font-weight: 700;
}

#main .mann-ref-titel {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 33px;
}

#main .mann-ref-untertitel {
	margin: 20px 0 10px;
}

#main .mann-ref-beschreibung {
	margin: 0 0 10px;
}

.mann-ref-bilder {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 30px;
	margin-bottom: 20px;
}

.mann-ref-bilder img {
	display: block;
	width: 283px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 283 / 214;
	object-fit: cover;
}

#main .mann-ref-hinweis {
	margin: 0 0 10px;
	padding-top: 10px;
	font-size: 11px;
	line-height: 15.7px;
	text-align: center;
}

/* Smaller screens like the old grid: sidebar 5/12 and thumbnails in three columns from 768px,
   everything stacked with two thumbnails per row below */
@media (max-width: 991px) {
	.mann-ref {
		grid-template-columns: calc((100% + 30px) * 5 / 12 - 30px) 1fr;
	}

	.mann-ref-bilder {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.mann-ref {
		grid-template-columns: 1fr;
	}

	.mann-ref-bilder {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 360° tour: two 500px panoramas side by side, no gap below (as the old krpano containers) */
.mann-tour iframe {
	display: block;
}

/* OpenStreetMap boxes (contact page header, start page column), loaded after consent */
.mann-karte {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e5e3df;
}

.mann-karte iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mann-map-consent {
	max-width: 520px;
	padding: 0 30px;
	text-align: center;
}

.mann-map-consent button {
	padding: 8px 15px;
	border: 0;
	background: var(--awb-color8);
	color: var(--awb-color1);
	font: inherit;
	cursor: pointer;
}

/* Start page: map next to the contact details */
.mann-karte-start {
	height: 100%;
	min-height: 340px;
}

.mann-karte-start .mann-map-consent {
	padding: 0 24px;
	font-size: 14px;
	line-height: 22px;
}

/* Contact form like the old Bootstrap form: no labels, placeholders, 34px fields 10px apart */
#main .fusion-form .fusion-form-field {
	margin-top: 0;
	margin-bottom: 10px;
}

#main .fusion-form .fusion-form-input:not([type="checkbox"]) {
	box-sizing: border-box;
	height: 34px;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: #fff;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	color: #555;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
}

#main .fusion-form textarea.fusion-form-input:not([type="checkbox"]) {
	height: 166px;
}

#main .fusion-form .fusion-form-input::placeholder {
	color: #555;
	opacity: 1;
}

/* PLZ and Ort share one line (30% / 60%); the column wrapper is a flex column in Avada */
#main .fusion-form .fusion-column-wrapper:has(> .mann-plz) {
	flex-flow: row wrap;
	align-content: flex-start;
}

#main .fusion-form .fusion-column-wrapper:has(> .mann-plz) > .fusion-form-field {
	width: 100%;
}

#main .fusion-form .fusion-column-wrapper:has(> .mann-plz) > .mann-plz {
	width: 30%;
}

#main .fusion-form .fusion-column-wrapper:has(> .mann-plz) > .mann-ort {
	width: 60%;
	margin-left: 10%;
}

#main .fusion-form .fusion-form-consent-field label,
#main .fusion-form .fusion-form-checkbox label {
	font-weight: 700;
}

/* Old spacing below the consent line (Bootstrap .form-group) and a 13px high "* Pflichtfelder" line */
#main .fusion-form .fusion-form-field:has(input[type="checkbox"]) {
	margin-bottom: 22px;
}

/* Phones: the consent text no longer fits beside the checkbox and wraps below it (old inline-block label) */
@media (max-width: 767px) {
	#main .fusion-form .fusion-form-field:has(input[type="checkbox"]) {
		margin-bottom: 20px;
	}

	#main .fusion-form .fusion-form-consent-field .fusion-form-checkbox {
		display: block;
		margin-right: 0;
	}

	#main .fusion-form .fusion-form-consent-field input[type="checkbox"] {
		top: 4px;
		transform: none;
	}

	#main .fusion-form .fusion-form-consent-field label {
		padding: 22px 0 0;
	}
}

#main .fusion-form .mann-pflichtfelder {
	margin-bottom: 0;
}

#main .fusion-form .mann-pflichtfelder p {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 400;
	line-height: 13px;
}

#main .fusion-form .mann-senden .fusion-button {
	padding: 8px 15px;
	border: 0;
	border-radius: 0;
	background: var(--awb-color8);
	color: var(--awb-color1);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* Header up to 1024px (design A): logo 48px on the left, hamburger on the right, the opened menu
   below the header pushes the page down; the contact button is a gold row, the current section
   gets a gold line on the left. On phones the black bar only shows phone and e-mail. */
@media (max-width: 1024px) {
	.fusion-header {
		height: auto !important;
		padding: 0 !important;
	}

	.fusion-header .fusion-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		max-width: none !important;
		padding: 12px 16px !important;
	}

	.fusion-header .fusion-row::before,
	.fusion-header .fusion-row::after {
		display: none !important;
	}

	.fusion-header .fusion-logo {
		float: none !important;
		margin: 0 !important;
	}

	.fusion-logo img.fusion-standard-logo,
	.fusion-logo img.fusion-mobile-logo {
		height: 48px !important;
		width: auto !important;
		max-height: none !important;
	}

	.fusion-mobile-menu-icons {
		float: none !important;
		margin: 0 !important;
	}

	.fusion-mobile-menu-icons a {
		display: block;
		box-sizing: border-box;
		width: 48px;
		height: 48px;
		padding: 15px 11px;
		background: linear-gradient(#1a1a1a 0 2.5px, transparent 2.5px 7.75px, #1a1a1a 7.75px 10.25px, transparent 10.25px 15.5px, #1a1a1a 15.5px 18px) content-box;
	}

	.fusion-mobile-menu-icons a::before {
		content: none !important;
	}

	.fusion-mobile-nav-holder {
		flex: 0 0 calc(100% + 32px);
		margin: 12px -16px -12px !important;
		padding: 0 !important;
		border-top: 1px solid #eee;
	}

	.fusion-mobile-nav-holder > ul {
		margin: 0 !important;
		border: 0 !important;
	}

	.fusion-mobile-nav-holder li,
	.fusion-mobile-nav-holder li a {
		border: 0 !important;
	}

	.fusion-mobile-nav-holder > ul > li > a {
		height: 56px !important;
		padding: 0 0 0 24px !important;
		background: transparent !important;
		color: var(--awb-color8) !important;
		font-size: 14px;
		font-weight: 700;
		line-height: 56px !important;
	}

	.fusion-mobile-nav-holder > ul > li > a .menu-text {
		text-transform: uppercase;
	}

	.fusion-mobile-nav-holder > ul > li.fusion-mobile-current-nav-item > a {
		box-shadow: inset 4px 0 var(--awb-color4);
	}

	.fusion-mobile-nav-holder > ul > li.mann-cta > a {
		background: var(--awb-color4) !important;
	}

	.fusion-mobile-nav-holder .fusion-open-submenu {
		top: 7px;
	}
}

@media (max-width: 767px) {
	.mann-topbar-claim {
		display: none;
	}

	.mann-topbar-inner {
		justify-content: center;
	}
}

/* Avada adds 50px below the content on phones; the old pages went straight to the footer */
#content {
	margin-bottom: 0 !important;
}

/* Columns with only   (spacers between testimonials): one 20px line when stacked */
#main .mann-leer .fusion-text p {
	margin-bottom: 0;
}

/* Images the old pages stretched over the whole column (style="width:100%") */
.mann-img-voll,
.mann-img-voll img {
	width: 100%;
}

/* Content 15px from the window edge (Avada: fixed 30px) */
#main {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* Footer content on the same edge as the page content */
.fusion-footer-copyright-area {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.fusion-footer-copyright-area > .fusion-row {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* Design A: h1/h2 extra bold (Avada typography set 1), subheadings semibold */
#main h3,
#main h4 {
	font-weight: 600;
}

/* Bold text inside headings (old content wraps many headings in <strong>) keeps the heading weight */
#main h1 strong,
#main h2 strong,
#main h3 strong,
#main h4 strong {
	font-weight: inherit;
}

/* Über uns: the 5-star seal next to the intro stays seal-sized when the columns stack */
@media (max-width: 991px) {
	.page-template-default .mann-md-2 .fusion-imageframe img {
		max-width: 200px;
	}
}

/* Einseiter (page-einseiter.php): interim one-page homepage without Avada's header and menu.
   Reuses the start page classes; the text panel on the image is translucent (customer meeting 2026-11-11). */
body.mann-einseiter {
	background: var(--awb-color1);
}

body.mann-einseiter #main {
	padding: 0 !important;
}

.mann-es-inner {
	max-width: 1250px;
	margin: 0 auto;
}

.mann-es-header {
	border-bottom: 1px solid #eee;
	background: var(--awb-color1);
}

.mann-es-header .mann-es-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	max-width: 1280px;
	padding: 16px 15px;
}

.mann-es-logo img {
	display: block;
	height: 64px;
	width: auto;
}

.mann-es-hero {
	position: relative;
	padding-bottom: 80px;
}

.mann-es-hero-bild {
	height: 640px;
	background-position: center;
	background-size: cover;
}

body.mann-einseiter #main .mann-hero-panel {
	bottom: 0; /* the hero's 80px padding is the overhang below the image */
}

body.mann-einseiter .mann-leistung img {
	height: 220px;
}

.mann-es-recht {
	font-size: 15px;
	line-height: 24px;
}

#main .mann-es-recht h2 {
	margin-bottom: 24px;
}

#main .mann-es-recht h3 {
	margin: 24px 0 8px;
	font-size: 18px;
	line-height: 26px;
}

.mann-es-recht hr {
	display: none;
}

.mann-es-recht details {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid #ddd;
}

.mann-es-recht summary {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	list-style: none;
}

.mann-es-recht summary::-webkit-details-marker {
	display: none;
}

.mann-es-recht summary::after {
	content: "+";
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
}

.mann-es-recht details[open] summary::after {
	content: "–";
}

#main .mann-es-recht summary h2 {
	margin: 0;
}

.mann-es-footer {
	padding: 28px 15px;
	background: #1a1a1a;
	color: var(--awb-color1);
}

.mann-es-footer a {
	color: var(--awb-color1);
}

@media (max-width: 900px) {
	.mann-es-hero {
		padding-bottom: 0;
	}

	.mann-es-hero-bild {
		height: 420px;
	}
}

@media (max-width: 767px) {
	.mann-es-header .mann-es-inner {
		padding: 12px 16px;
	}

	.mann-es-logo img {
		height: 48px;
	}

	.mann-es-header .mann-button {
		padding: 10px 16px;
		font-size: 14px;
	}

	.mann-es-hero-bild {
		height: 280px;
	}
}

/* Einseiter with the customer's interim text (mail of 2026-11-12): notice on the image,
   contact details large right below. */
body.mann-einseiter #main .mann-hero-panel h1 {
	font-size: 38px;
	line-height: 46px;
}

body.mann-einseiter #main .mann-hero-panel p {
	margin-bottom: 16px;
}

body.mann-einseiter #main .mann-hero-panel p:last-child {
	margin-bottom: 0;
}

.mann-es-kontakt {
	display: grid;
	gap: 24px;
	margin-bottom: 32px;
}

.mann-es-kontakt > div {
	padding-left: 16px;
	border-left: 3px solid var(--awb-color4);
}

.mann-es-label {
	display: block;
	margin-bottom: 4px;
	color: var(--awb-color6);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

#main .mann-es-kontakt p {
	margin: 0;
	font-size: 18px;
	line-height: 28px;
}

#main .mann-es-kontakt a.mann-es-gross {
	color: var(--awb-color8);
	font-size: 26px;
	font-weight: 800;
	line-height: 36px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

#main .mann-es-kontakt a.mann-es-gross:hover {
	color: var(--awb-color4);
}

@media (max-width: 900px) {
	body.mann-einseiter #main .mann-hero-panel h1 {
		font-size: 28px;
		line-height: 36px;
	}

	#main .mann-es-kontakt a.mann-es-gross {
		font-size: 22px;
		line-height: 30px;
	}
}