/* ==========================================================================
   MET Projekt – eigenes CSS
   Regel: keine festen Farb-, Schrift- oder Abstandswerte.
   Nur Divi-5-Design-Variablen bzw. deren CSS-Custom-Properties verwenden.
   ========================================================================== */

/* ==========================================================================
   Schrift: Brandon Grotesque (selbst gehostet)
   Name muss exakt dem Namen des Divi-Schrift-Uploads entsprechen.
   ========================================================================== */
@font-face {
	font-family: "Brandon Grotesque";
	src: url("../fonts/brandon-grotesque-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Brandon Grotesque";
	src: url("../fonts/brandon-grotesque-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}



/* ==========================================================================
   Collagen mit organischen Bildmasken
   Maske liegt am Bild-Modul (Rahmen), nicht am <img>:
   unabhängig von Divi-Wrappern und Bildformat.
   ========================================================================== */
.met-collage {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
}

/* Rahmen: Position/Grösse pro Variante, Maske füllt den Rahmen exakt */
.met-collage .met-collage__bild {
	position: absolute !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

/* Alles innerhalb des Rahmens füllt ihn vollständig */
.met-collage .met-collage__bild * {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
}
.met-collage .met-collage__bild img {
	object-fit: cover;
	object-position: center center;
}

/* Variante vek-1 – Zeichenfläche 398 × 460 */
.met-collage--vek-1 { aspect-ratio: 398 / 460 !important; }

.met-collage--vek-1 .met-collage__bild--o { left: 0%;      top: 0%;      width: 82.128% !important; height: 31.901% !important; -webkit-mask-image: url("../masken/vek-1-o.svg"); mask-image: url("../masken/vek-1-o.svg"); }
.met-collage--vek-1 .met-collage__bild--l { left: 0%;      top: 28.833%; width: 72.615% !important; height: 48.132% !important; -webkit-mask-image: url("../masken/vek-1-l.svg"); mask-image: url("../masken/vek-1-l.svg"); }
.met-collage--vek-1 .met-collage__bild--r { left: 47.379%; top: 20.841%; width: 52.621% !important; height: 79.158% !important; -webkit-mask-image: url("../masken/vek-1-r.svg"); mask-image: url("../masken/vek-1-r.svg"); }

/* Bildausschnitt steuern (Klasse zusätzlich im Bild-Modul eintragen) */
.met-fokus-oben img   { object-position: center top !important; }
.met-fokus-unten img  { object-position: center bottom !important; }
.met-fokus-links img  { object-position: left center !important; }
.met-fokus-rechts img { object-position: right center !important; }



/* Variante vek-2 – Zeichenfläche 565 × 563 */
.met-collage--vek-2 { aspect-ratio: 565 / 563 !important; }

.met-collage--vek-2 .met-collage__bild--o { left: 27.543%; top: 0%;      width: 72.457% !important; height: 39.115% !important; -webkit-mask-image: url("../masken/vek-2-o.svg"); mask-image: url("../masken/vek-2-o.svg"); }
.met-collage--vek-2 .met-collage__bild--l { left: 0%;      top: 0%;      width: 51.733% !important; height: 58.532% !important; -webkit-mask-image: url("../masken/vek-2-l.svg"); mask-image: url("../masken/vek-2-l.svg"); }
.met-collage--vek-2 .met-collage__bild--r { left: 14.341%; top: 39.488%; width: 85.659% !important; height: 60.359% !important; -webkit-mask-image: url("../masken/vek-2-r.svg"); mask-image: url("../masken/vek-2-r.svg"); }

/* Variante vek-3 – Zeichenfläche 567 × 640 */
.met-collage--vek-3 { aspect-ratio: 567 / 640 !important; }

.met-collage--vek-3 .met-collage__bild--o { left: 0%;      top: 0%;      width: 100% !important;    height: 44.752% !important; -webkit-mask-image: url("../masken/vek-3-o.svg"); mask-image: url("../masken/vek-3-o.svg"); }
.met-collage--vek-3 .met-collage__bild--l { left: 0%;      top: 38.400%; width: 74.114% !important; height: 52.620% !important; -webkit-mask-image: url("../masken/vek-3-l.svg"); mask-image: url("../masken/vek-3-l.svg"); }
.met-collage--vek-3 .met-collage__bild--r { left: 47.435%; top: 14.005%; width: 52.563% !important; height: 85.785% !important; -webkit-mask-image: url("../masken/vek-3-r.svg"); mask-image: url("../masken/vek-3-r.svg"); }


/* ==========================================================================
   Firmen-Portraits: zwei Spalten, links um festen Versatz tiefer
   .met-portrait-liste = verschachtelte Zeile
   .met-portrait-intro = Einleitung (erste Spalte, ohne Loop)
   .met-portrait       = Loop-Spalte (pro Firma)
   Aufteilung in Spalten + Varianten-Klassen setzt custom.js
   ========================================================================== */
.met-portrait-liste {
	--met-versatz: 200px;
	--met-intro-abstand: 3.5rem;
	--met-abstand-x: clamp(1.875rem, 0.401rem + 6.291vw, 6.0625rem);
	--met-abstand-y: clamp(1.5625rem, 1.122rem + 1.878vw, 2.8125rem);
	display: flex !important;
	flex-direction: column;
	gap: var(--met-abstand-y);
}
.met-portrait-liste > * {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

@media (min-width: 768px) {
	.met-portrait-liste.ist-aufgeteilt {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--met-abstand-x);
	}
	/* Liste ohne Einleitung: linke Spalte trotzdem um den Versatz tiefer */
	.met-portrait-spalte--links:not(:has(> .met-portrait-intro)) {
		padding-top: var(--met-versatz);
	}
	.met-portrait-spalte {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--met-abstand-y);
	}
	.met-portrait-spalte > * {
		width: 100% !important;
		margin: 0 !important;
	}
	/* Erste linke Firma beginnt genau --met-versatz unter der ersten rechten
	   (mindestens 1.5rem unter der Einleitung, falls diese höher ist) */
		.met-portrait-spalte--links .met-portrait-intro {
		min-height: calc(var(--met-versatz) - var(--met-intro-abstand));
		margin-bottom: calc(var(--met-intro-abstand) - var(--met-abstand-y)) !important;
	}
}


/* Firmen-Portraits als Karten: Collage, Titel, Text und Button einer Firma
   stehen auf einer gemeinsamen Fläche. */
.met-portrait-liste .met-portrait {
	background-color: #ECF8F8;                                                              /* für ältere Browser */
	background-color: color-mix(in srgb, var(--gcid-primary-color, #64C3C7) 12%, #FFFFFF); /* 12 % Türkis */
	padding: clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem) !important;                            /* Innenabstand 20–40 px */
	box-sizing: border-box;
}



/* Collagen wechseln: vek-1 → vek-2 → vek-3 (Klassen setzt custom.js) */
.met-portrait--v1 .met-collage { aspect-ratio: 398 / 460 !important; }
.met-portrait--v1 .met-collage__bild--o { left: 0%;      top: 0%;      width: 82.128% !important; height: 31.901% !important; -webkit-mask-image: url("../masken/vek-1-o.svg"); mask-image: url("../masken/vek-1-o.svg"); }
.met-portrait--v1 .met-collage__bild--l { left: 0%;      top: 28.833%; width: 72.615% !important; height: 48.132% !important; -webkit-mask-image: url("../masken/vek-1-l.svg"); mask-image: url("../masken/vek-1-l.svg"); }
.met-portrait--v1 .met-collage__bild--r { left: 47.379%; top: 20.841%; width: 52.621% !important; height: 79.158% !important; -webkit-mask-image: url("../masken/vek-1-r.svg"); mask-image: url("../masken/vek-1-r.svg"); }

.met-portrait--v2 .met-collage { aspect-ratio: 565 / 563 !important; }
.met-portrait--v2 .met-collage__bild--o { left: 27.543%; top: 0%;      width: 72.457% !important; height: 39.115% !important; -webkit-mask-image: url("../masken/vek-2-o.svg"); mask-image: url("../masken/vek-2-o.svg"); }
.met-portrait--v2 .met-collage__bild--l { left: 0%;      top: 0%;      width: 51.733% !important; height: 58.532% !important; -webkit-mask-image: url("../masken/vek-2-l.svg"); mask-image: url("../masken/vek-2-l.svg"); }
.met-portrait--v2 .met-collage__bild--r { left: 14.341%; top: 39.488%; width: 85.659% !important; height: 60.359% !important; -webkit-mask-image: url("../masken/vek-2-r.svg"); mask-image: url("../masken/vek-2-r.svg"); }

.met-portrait--v3 .met-collage { aspect-ratio: 567 / 640 !important; }
.met-portrait--v3 .met-collage__bild--o { left: 0%;      top: 0%;      width: 100% !important;    height: 44.752% !important; -webkit-mask-image: url("../masken/vek-3-o.svg"); mask-image: url("../masken/vek-3-o.svg"); }
.met-portrait--v3 .met-collage__bild--l { left: 0%;      top: 38.400%; width: 74.114% !important; height: 52.620% !important; -webkit-mask-image: url("../masken/vek-3-l.svg"); mask-image: url("../masken/vek-3-l.svg"); }
.met-portrait--v3 .met-collage__bild--r { left: 47.435%; top: 14.005%; width: 52.563% !important; height: 85.785% !important; -webkit-mask-image: url("../masken/vek-3-r.svg"); mask-image: url("../masken/vek-3-r.svg"); }


/* ==========================================================================
   Firmen-Portraits: Collagen-Varianten ohne JavaScript
   Greift im Divi Visual Builder und auf dem Handy (Liste nicht aufgeteilt).
   Im aufgeteilten Frontend setzt weiterhin custom.js --v1/--v2/--v3.
   Gleiche Reihenfolge: 1., 4., 7. Firma = vek-1 · 2., 5. = vek-2 · 3., 6. = vek-3
   ========================================================================== */
.met-portrait-liste > .met-portrait:nth-child(3n+1 of .met-portrait) .met-collage { aspect-ratio: 398 / 460 !important; }
.met-portrait-liste > .met-portrait:nth-child(3n+1 of .met-portrait) .met-collage__bild--o { left: 0%;      top: 0%;      width: 82.128% !important; height: 31.901% !important; -webkit-mask-image: url("../masken/vek-1-o.svg"); mask-image: url("../masken/vek-1-o.svg"); }
.met-portrait-liste > .met-portrait:nth-child(3n+1 of .met-portrait) .met-collage__bild--l { left: 0%;      top: 28.833%; width: 72.615% !important; height: 48.132% !important; -webkit-mask-image: url("../masken/vek-1-l.svg"); mask-image: url("../masken/vek-1-l.svg"); }
.met-portrait-liste > .met-portrait:nth-child(3n+1 of .met-portrait) .met-collage__bild--r { left: 47.379%; top: 20.841%; width: 52.621% !important; height: 79.158% !important; -webkit-mask-image: url("../masken/vek-1-r.svg"); mask-image: url("../masken/vek-1-r.svg"); }

.met-portrait-liste > .met-portrait:nth-child(3n+2 of .met-portrait) .met-collage { aspect-ratio: 565 / 563 !important; }
.met-portrait-liste > .met-portrait:nth-child(3n+2 of .met-portrait) .met-collage__bild--o { left: 27.543%; top: 0%;      width: 72.457% !important; height: 39.115% !important; -webkit-mask-image: url("../masken/vek-2-o.svg"); mask-image: url("../masken/vek-2-o.svg"); }
.met-portrait-liste > .met-portrait:nth-child(3n+2 of .met-portrait) .met-collage__bild--l { left: 0%;      top: 0%;      width: 51.733% !important; height: 58.532% !important; -webkit-mask-image: url("../masken/vek-2-l.svg"); mask-image: url("../masken/vek-2-l.svg"); }
.met-portrait-liste > .met-portrait:nth-child(3n+2 of .met-portrait) .met-collage__bild--r { left: 14.341%; top: 39.488%; width: 85.659% !important; height: 60.359% !important; -webkit-mask-image: url("../masken/vek-2-r.svg"); mask-image: url("../masken/vek-2-r.svg"); }

.met-portrait-liste > .met-portrait:nth-child(3n+3 of .met-portrait) .met-collage { aspect-ratio: 567 / 640 !important; }
.met-portrait-liste > .met-portrait:nth-child(3n+3 of .met-portrait) .met-collage__bild--o { left: 0%;      top: 0%;      width: 100% !important;    height: 44.752% !important; -webkit-mask-image: url("../masken/vek-3-o.svg"); mask-image: url("../masken/vek-3-o.svg"); }
.met-portrait-liste > .met-portrait:nth-child(3n+3 of .met-portrait) .met-collage__bild--l { left: 0%;      top: 38.400%; width: 74.114% !important; height: 52.620% !important; -webkit-mask-image: url("../masken/vek-3-l.svg"); mask-image: url("../masken/vek-3-l.svg"); }
.met-portrait-liste > .met-portrait:nth-child(3n+3 of .met-portrait) .met-collage__bild--r { left: 47.435%; top: 14.005%; width: 52.563% !important; height: 85.785% !important; -webkit-mask-image: url("../masken/vek-3-r.svg"); mask-image: url("../masken/vek-3-r.svg"); }

/* Divi Visual Builder: Modul-Styles im Bild-Modul nicht mitstrecken */
.met-collage .met-collage__bild style { display: none !important; }

/* Divi Visual Builder: Firmen zweispaltig wie im Frontend (ohne Versatz) */
@media (min-width: 768px) {
	.et-fb .met-portrait-liste {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: var(--met-abstand-y) var(--met-abstand-x) !important;
	}
	.et-fb .met-portrait-liste > .met-portrait {
		width: calc((100% - var(--met-abstand-x)) / 2) !important;
	}
}


/* ==========================================================================
   Logo-Raster: gleich hohe Kacheln, Logo exakt mittig, unverzerrt
   Höhe: Handy 56 px → Desktop 88 px
   ========================================================================== */
.firmen-logo {
	--logo-hoehe: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: var(--logo-hoehe) !important;
	margin: 0 !important;
	padding: 0 !important;
}
.firmen-logo .et_pb_image_wrap {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}
.firmen-logo img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
	object-position: center center;
}

.firmen-logo .et_pb_text_inner,
.firmen-logo .et_pb_code_inner {
	display: flex;
	width: 100%;
	height: 100%;
}


/* ==========================================================================
   Kennzahlenband: vertikale Trennlinien zwischen den Kennzahlen
   Voraussetzung: Spaltenabstand der Zeile = 4rem (fester Wert, nicht %)
   ========================================================================== */
.met-kennzahlen {
	--met-trenner-abstand: 6rem;   /* muss dem Spaltenabstand entsprechen */
	--met-trenner-breite: 3px;
	--met-trenner-farbe: #64C3C8;
}
.met-kennzahlen > * {
	text-align: center;
}
.met-kennzahlen > * + * {
	position: relative;
}
.met-kennzahlen > * + *::before {
	content: "";
	position: absolute;
	top: 5%;
	bottom: 5%;
	left: calc(var(--met-trenner-abstand) / -2);
	transform: translateX(-50%);
	width: var(--met-trenner-breite);
	background: var(--met-trenner-farbe);
}

/* Handy: Kennzahlen untereinander, keine Linien */
@media (max-width: 767px) {
	.met-kennzahlen > * + *::before { display: none; }
}



/* ==========================================================================
   CTA-Bubble «Mietflächen entdecken» – fixiert am rechten Rand
   ========================================================================== */
.met-cta-bubble {
	position: fixed !important;
	top: 85%;
	right: 0;
	transform: translate(18%, -50%);
	z-index: 90;                      /* unter der Navigation (100) */
	width: clamp(8.5rem, 6rem + 8vw, 13.5rem);
	aspect-ratio: 222 / 190;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 1.4rem 0 1rem !important;
	background: #64C3C8;              /* sekundär */
	border-radius: 58% 42% 50% 50% / 52% 48% 52% 48%;
	color: #FFFFFF;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	font-size: clamp(0.95rem, 0.8rem + 0.45vw, 1.35rem);
	line-height: 1.15;
	cursor: pointer;
	transition: transform 250ms ease, background-color 250ms ease;
}
.met-cta-bubble * {
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
}
.met-cta-bubble:hover {
	background: #00787E;              /* primär */
	transform: translate(8%, -50%);   /* schiebt sich beim Überfahren etwas herein */
}

/* Handy: kleiner, unten rechts, verdeckt keinen Text */
@media (max-width: 767px) {
	.met-cta-bubble {
		top: auto;
		bottom: 1rem;
		transform: translateX(15%);
		width: 7.5rem;
		font-size: 0.8rem;
		padding: 0 1rem 0 0.75rem !important;
	}
	.met-cta-bubble:hover {
		transform: translateX(8%);
	}
}



/* ==========================================================================
   Kontaktformular (Fluent Forms) auf dunklem Hintergrund
   Modul-Klasse: met-formular
   Werte nach Design: Felder 24/44 · Hinweis 18/44 · Checkbox 26/44 bold
   ========================================================================== */

/* Abstand zwischen den Feldern */
.met-formular .fluentform .ff-el-group {
	margin-bottom: 0.75rem !important;
}

/* Eingabefelder und Platzhalter: 24px / 44px, Regular, primär */
.met-formular .fluentform .ff-el-form-control {
	width: 100% !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: #FFFFFF !important;
	color: #00787E !important;                                     /* primär */
	font-family: inherit !important;
	font-weight: 400 !important;
	font-size: clamp(1.125rem, 0.993rem + 0.563vw, 1.5rem) !important;   /* = fs-text 24px */
	line-height: 1.8334 !important;                                 /* 44 / 24 */
	letter-spacing: 0 !important;
	padding: 0 0.45em !important;
}
.met-formular .fluentform .ff-el-form-control::placeholder {
	color: #00787E;
	opacity: 1;
}
.met-formular .fluentform .ff-el-form-control:focus {
	outline: 2px solid #64C3C8;                                     /* sekundär */
	outline-offset: 0;
}
.met-formular .fluentform textarea.ff-el-form-control {
	min-height: 14rem;
	padding-top: 0.2em !important;
	resize: vertical;
}

/* Hinweis «*Bitte alle erforderlichen Felder ausfüllen»: 18px / 44px, sekundär */
.met-formular .fluentform .ff-custom_html,
.met-formular .fluentform .ff-custom_html p {
	color: #64C3C8 !important;
	font-size: clamp(1rem, 0.956rem + 0.188vw, 1.125rem) !important;    /* = fs-xs 18px */
	line-height: 2.4445 !important;                                  /* 44 / 18 */
	font-weight: 400 !important;
	margin: 0 0 1rem !important;
}

/* Checkbox «Ja, ich möchte über News informiert werden.»: 26px / 44px, Bold, sekundär */
.met-formular .fluentform .ff-el-form-check-label {
	display: flex !important;
	align-items: center;
	gap: 0.5em;
	color: #64C3C8 !important;
	font-size: clamp(1.375rem, 1.287rem + 0.376vw, 1.625rem) !important; /* = fs-nav 26px */
	line-height: 1.6924 !important;                                  /* 44 / 26 */
	font-weight: 700 !important;
	cursor: pointer;
}
.met-formular .fluentform .ff-el-form-check-input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 1.2em;
	height: 1.2em;
	margin: 0 !important;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	cursor: pointer;
}
.met-formular .fluentform .ff-el-form-check-input:checked {
	background: #FFFFFF;
	box-shadow: inset 0 0 0 0.15em #FFFFFF, inset 0 0 0 1em #00787E;
}
.met-formular .fluentform .ff-el-form-check-input:focus-visible {
	outline: 2px solid #64C3C8;
	outline-offset: 2px;
}

/* Absenden: wie MET – Button auf der ganzen Website */
.met-formular .fluentform .ff-btn-submit {
	min-width: 220px;
	background: transparent !important;
	color: #64C3C8 !important;                                       /* sekundär */
	border: 2px solid #64C3C8 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0.75rem 1.5rem !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	font-size: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem) !important; /* = fs-button 22px */
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.met-formular .fluentform .ff-btn-submit:hover,
.met-formular .fluentform .ff-btn-submit:focus-visible {
	background: #64C3C8 !important;
	border-color: #64C3C8 !important;
	color: #00787E !important;
}

/* Fehlermeldungen */
.met-formular .fluentform .error.text-danger {
	color: #FBBFCC !important;                                       /* akzent-3 */
	font-size: 0.85rem !important;
	margin-top: 0.25rem;
}


/* Handy: Formularbox innerhalb der Seitenränder */
@media (max-width: 767px) {
	.met-formular {
		padding-left: clamp(1.25rem, 0.634rem + 2.629vw, 3rem) !important;   /* = space-rand */
		padding-right: clamp(1.25rem, 0.634rem + 2.629vw, 3rem) !important;
	}
	.met-formular .fluentform .ff-el-form-control,
	.met-formular .fluentform .ff-btn-submit {
		max-width: 100% !important;
		box-sizing: border-box;
	}
}


/* ==========================================================================
   Hauptmenü: aktiver Menüpunkt und Hover unterstrichen
   Modul-Klasse: met-hauptmenu
   ========================================================================== */
.met-hauptmenu .et-menu > li > a,
.met-hauptmenu .et_mobile_menu li > a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
	transition: text-decoration-color 200ms ease;
}
.met-hauptmenu .et-menu > li > a:hover,
.met-hauptmenu .et-menu > li.current-menu-item > a,
.met-hauptmenu .et-menu > li.current-menu-ancestor > a,
.met-hauptmenu .et-menu > li.current_page_item > a,
.met-hauptmenu .et_mobile_menu li.current-menu-item > a {
	text-decoration-color: currentColor;
}


/* Button ohne Text (leeres Feld im Loop) ausblenden */
.met-portrait .et_pb_button:empty,
.met-portrait .et_pb_button_module_wrapper:has(.et_pb_button:empty) {
	display: none !important;
}
/* Menüpunkte über die volle Breite verteilen */
.met-hauptmenu .et_pb_menu__wrap,
.met-hauptmenu .et_pb_menu__menu,
.met-hauptmenu .et-menu-nav,
.met-hauptmenu .et-menu {
	width: 100% !important;
	flex: 1 1 auto !important;
}
.met-hauptmenu .et-menu {
	justify-content: space-between !important;
	flex-wrap: nowrap;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.met-hauptmenu .et-menu > li {
	padding-right: 0 !important;
	padding-left: 0 !important;
}


/* ==========================================================================
   Interaktiver Geländeplan
   Immer sichtbar: plan-grundebene, plan-bruecke, plan-nummern
   Per Button: plan-buero, plan-gewerbe, plan-lager, plan-neubau
   Buttons: met-plan-filter met-plan-filter--buero / --gewerbe / --lager / --neubau
   ========================================================================== */
.met-plan svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Flächen-Ebenen standardmässig ausgeblendet */
.met-plan #plan-buero,
.met-plan #plan-gewerbe,
.met-plan #plan-lager,
.met-plan #plan-neubau {
	opacity: 0;
	transition: opacity 300ms ease;
}

/* Mit Auswahl: gewählte Flächenart einblenden · ohne Auswahl: nur die immer sichtbaren Ebenen */
.met-plan[data-zeigen="buero"]   #plan-buero,
.met-plan[data-zeigen="gewerbe"] #plan-gewerbe,
.met-plan[data-zeigen="lager"]   #plan-lager,
.met-plan[data-zeigen="neubau"]  #plan-neubau {
	opacity: 1;
}

/* Aktiver Filter-Button: gefüllt wie «Neubau» im Design */
.met-plan-filter.ist-aktiv,
.met-plan-filter.ist-aktiv .et_pb_button,
a.met-plan-filter.ist-aktiv {
	background: #00787E !important;
	border-color: #00787E !important;
	color: #FFFFFF !important;
}


/* ==========================================================================
   Rechtstexte (Datenschutz, Impressum, AGB)
   Modul-Klasse: met-rechtstext
   ========================================================================== */
.met-rechtstext .et_pb_text_inner {
	max-width: 900px;                                   /* ca. 70 Zeichen pro Zeile */
}
.met-rechtstext h2,
.met-rechtstext h3,
.met-rechtstext h4 {
	color: #00787E !important;                         /* primär statt sekundär */
	line-height: 1.2 !important;
	padding: 0 !important;
}
.met-rechtstext h2 {
	font-size: clamp(1.5rem, 1.258rem + 1.033vw, 2.1875rem) !important;   /* = fs-titel-m 35px */
	margin: 2.5em 0 0.5em !important;
}
.met-rechtstext h3 {
	font-size: clamp(1.375rem, 1.287rem + 0.376vw, 1.625rem) !important;  /* = fs-nav 26px */
	margin: 1.75em 0 0.4em !important;
}
.met-rechtstext h4 {
	font-size: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem) !important;  /* = fs-klein 22px */
	margin: 1.5em 0 0.3em !important;
}
.met-rechtstext h2:first-child,
.met-rechtstext h3:first-child {
	margin-top: 0 !important;
}
.met-rechtstext p {
	margin-bottom: 2em !important;                     /* doppelter Abstand zwischen Abschnitten */
	padding-bottom: 0 !important;
	line-height: 1.45 !important;                      /* = lh-text */
}
.met-rechtstext ul,
.met-rechtstext ol {
	margin: 0 0 2em 1.25em;
	padding: 0;
	line-height: 1.45 !important;                      /* gleich wie der Fliesstext */
}
.met-rechtstext li {
	margin-bottom: 0.5em;
	padding-bottom: 0 !important;
	line-height: 1.45 !important;
}
/* Links im Fliesstext erkennbar machen */
.met-rechtstext a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: #64C3C8;
	overflow-wrap: anywhere;                           /* lange Adressen brechen um */
}
.met-rechtstext a:hover,
.met-rechtstext a:focus-visible {
	text-decoration-color: currentColor;
}


/* Titel und Texte nie mitten im Wort trennen */
.et_pb_heading_container h1,
.et_pb_heading_container h2,
.et_pb_heading_container h3,
.et_pb_heading_container h4,
.et_pb_text_inner,
.et_pb_text_inner p,
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4,
.et_pb_button {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* Ausnahme: lange Adressen in Rechtstexten dürfen umbrechen */
.met-rechtstext a {
	overflow-wrap: anywhere;
}


/* Servicemenü «Kontakt»: auf allen Geräten als Text, kein Burger-Menü */
.met-servicemenu .et_mobile_nav_menu {
	display: none !important;
}
.met-servicemenu .et_pb_menu__menu {
	display: flex !important;
}
.met-servicemenu .et-menu {
	display: flex !important;
	flex-wrap: nowrap;
}


/* Mobilmenü über die volle Breite der Zeile */
@media (max-width: 980px) {
	.met-hauptmenu,
	.met-hauptmenu .et_pb_menu_inner_container,
	.met-hauptmenu .et_pb_menu__wrap,
	.met-hauptmenu .et_pb_menu__menu,
	.met-hauptmenu .et_mobile_nav_menu {
		position: static !important;
	}
	.et_pb_row:has(.met-hauptmenu) {
		position: relative;
	}
	.met-hauptmenu .et_mobile_menu {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
}


@media (max-width: 980px) {
	.met-bild-mitte {
		align-self: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.met-bild-mitte .et_pb_image_wrap {
		display: block;
		text-align: center;
	}
}


/* Logo oberhalb Karte */
.met-logo-karte {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
}
@media (max-width: 980px) {
	.met-logo-karte {
		max-width: 100px;
	}
}


/* Logos im Footer: einheitliche Höhe, Breite folgt automatisch */
.met-logo-footer img {
	display: block;
	height: 80px !important;
	width: auto !important;
	max-width: 100% !important;
}
@media (max-width: 980px) {
	.met-logo-footer img {
		height: 56px !important;
	}
}

/* Abstand zwischen den Logos */
.met-logo-footer + .met-logo-footer {
	margin-left: 30px !important;
}
@media (max-width: 980px) {
	.met-logo-footer + .met-logo-footer {
		margin-left: 16px !important;
	}
}

/* ==========================================================================
   Headervideo als eigenes Element
   Spalte: met-headervideo · Video: met-headervideo__video
   ========================================================================== */
.met-headervideo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	padding: 0 !important;
}
.met-headervideo__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform;
}
.met-headervideo .et_pb_code,
.met-headervideo .et_pb_code_inner {
	position: static;
	margin: 0 !important;
	padding: 0 !important;
}

.met-karte {
	width: 100%;
	height: clamp(18rem, 12rem + 20vw, 28rem);
	background: #DCDCDC;
}



/* Bestätigungsmeldung nach dem Absenden */
.ff-message-success {
	background: none;
	border: 0;
	padding: 0;
	margin-top: 1em;
	color: #ffffff;
	box-shadow: none;
}

.ff-message-success * {
	color: inherit;
}


/* ==========================================================================
   Veranstaltungen – nur Sichtbarkeit, keine Gestaltung
   Schrift, Grösse, Farbe und Abstände werden in den Divi-Modulen eingestellt.
   ========================================================================== */

/* Bei einer Veranstaltung ersetzen Datum und Name den Standardkopf */
.et_pb_column:has(.met-termin) .met-datum-modul,
.et_pb_column:has(.met-termin) .met-titel-modul {
	display: none;
}

/* Module, die bei einer Meldung nichts ausgeben, ganz einklappen */
.met-termin-modul:not(:has(.met-termin)),
.met-news-button-modul:not(:has(.met-news-button)) {
	display: none;
}

/* Einzige Ausnahme: Luft über der Schaltfläche im zusammengesetzten
   Block der Übersicht, wo sie direkt unter dem Ort steht. */
.met-termin--block .met-termin__knopf {
	display: inline-block;
	margin-top: 1em;
}

/* Preset-CSS fehlt auf Seiten ohne Divi-Button-Modul */
.met-termin__knopf {
	border-radius: 2px;
	text-transform: uppercase;
}


/* ==========================================================================
   Freie Flächen – Tabelle [met_freie_flaechen]
   Desktop: Tabelle, gruppiert nach Haus · bis 980 px: Karten untereinander
   Farben und Schrift aus den globalen Divi-Variablen.
   Alle Selektoren mit .met-ff-wrap, damit Divis Tabellen-Standard
   (.entry-content table/td/th) überschrieben wird.
   ========================================================================== */
.met-ff-wrap {
	--met-ff-text: var(--gcid-secondary-color, #00787e);
	--met-ff-akzent: var(--gcid-primary-color, #64c3c7);
	--met-ff-linie: color-mix(in srgb, var(--met-ff-text) 20%, transparent);
	--met-ff-hover: color-mix(in srgb, var(--met-ff-akzent) 10%, transparent);
	color: var(--met-ff-text);
	font-size: var(--gvid-fvnyyg0puq, 1.0625rem);
	line-height: 1.45;
	overflow-x: auto;
}
.met-ff-wrap table.met-ff {
	width: 100%;
	margin: 0;
	border: 0 !important;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.met-ff-wrap .met-ff th,
.met-ff-wrap .met-ff td {
	padding: .75em 1.25em .75em 0;
	border: 0;
	border-bottom: 1px solid var(--met-ff-linie);
	text-align: left;
	vertical-align: top;
	font-weight: 500;
	color: inherit;
}
.met-ff-wrap .met-ff th:last-child,
.met-ff-wrap .met-ff td:last-child { padding-right: 0; }

/* Spaltentitel */
.met-ff-wrap .met-ff thead th {
	padding-top: 0;
	padding-bottom: .7em;
	border-bottom: 2px solid var(--met-ff-text);
	vertical-align: bottom;
	font-family: var(--et_global_heading_font, inherit);
	font-size: .78em;
	font-weight: 900;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.met-ff-wrap .met-ff__einheit {
	display: block;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Haus als Zwischentitel */
.met-ff-wrap .met-ff .met-ff__haus-kopf th {
	padding: 2.4em 0 .6em;
	border-bottom: 2px solid var(--met-ff-akzent);
	font-family: var(--et_global_heading_font, inherit);
	text-transform: uppercase;
}
.met-ff-wrap .met-ff thead + .met-ff__haus .met-ff__haus-kopf th { padding-top: 1.4em; }
.met-ff-wrap .met-ff__haus-name {
	font-size: 1.4em;
	font-weight: 900;
	letter-spacing: .02em;
}
.met-ff-wrap .met-ff__hinweis {
	display: inline-block;
	margin-left: .9em;
	padding: .15em .7em;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .05em;
	vertical-align: .35em;
}

/* Flächenzeilen */
.met-ff-wrap .met-ff .met-ff__zeile > th { font-weight: 900; }
.met-ff-wrap .met-ff__zeile:hover > * { background: var(--met-ff-hover); }
.met-ff-wrap .met-ff__flaeche,
.met-ff-wrap .met-ff__hoehe,
.met-ff-wrap .met-ff__mietzins,
.met-ff-wrap .met-ff__nk,
.met-ff-wrap .met-ff__miete,
.met-ff-wrap .met-ff__verfuegbar { white-space: nowrap; }

/* Plan-Download im Stil der Buttons */
.met-ff-wrap .met-ff__pdf {
	display: inline-block;
	padding: .2em .9em;
	border: 2px solid var(--met-ff-akzent);
	border-radius: 2px;
	color: var(--met-ff-text) !important;
	font-family: var(--et_global_heading_font, inherit);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.4;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s, border-color .2s, color .2s;
}
.met-ff-wrap .met-ff__pdf::after {
	content: "↓";
	margin-left: .45em;
}
.met-ff-wrap .met-ff__pdf:hover,
.met-ff-wrap .met-ff__pdf:focus-visible {
	border-color: var(--met-ff-text);
	background: var(--met-ff-text);
	color: #fff !important;
}

.met-ff-wrap .met-ff__fussnote {
	margin: 1.2em 0 0;
	padding: 0;
	font-size: .8em;
}
.met-ff-wrap .met-ff__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Tablet und Handy: jede Fläche als Karte */
@media (max-width: 980px) {
	.met-ff-wrap { overflow-x: visible; }
	.met-ff-wrap .met-ff thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.met-ff-wrap table.met-ff,
	.met-ff-wrap .met-ff tbody,
	.met-ff-wrap .met-ff tr,
	.met-ff-wrap .met-ff .met-ff__haus-kopf th { display: block; }
	.met-ff-wrap .met-ff .met-ff__haus-kopf th { padding-top: 2em; }
	.met-ff-wrap .met-ff .met-ff__haus:first-of-type .met-ff__haus-kopf th { padding-top: 0; }

	.met-ff-wrap .met-ff .met-ff__zeile {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .7em 1.25em;
		padding: 1em 0 1.15em;
		border-bottom: 1px solid var(--met-ff-linie);
	}
	.met-ff-wrap .met-ff .met-ff__zeile > th,
	.met-ff-wrap .met-ff .met-ff__zeile > td {
		display: block;
		padding: 0;
		border: 0;
		background: none;
		white-space: normal;
	}
	.met-ff-wrap .met-ff .met-ff__zeile > th {
		grid-column: 1 / -1;
		font-size: 1.15em;
	}
	.met-ff-wrap .met-ff .met-ff__zeile > td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: .1em;
		font-family: var(--et_global_heading_font, inherit);
		font-size: .72em;
		font-weight: 900;
		letter-spacing: .05em;
		text-transform: uppercase;
	}
	.met-ff-wrap .met-ff .met-ff__zeile > td.ist-leer { display: none; }
}
/* Tablet: vier Angaben pro Zeile statt zwei */
@media (min-width: 600px) and (max-width: 980px) {
	.met-ff-wrap .met-ff .met-ff__zeile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}