/*
 * mb- Klassen-Äquivalente für v3-Loop-Inseln + Motion-Fallback.
 *
 * Warum Custom CSS (Bordmittel reichen nicht):
 * 1) Elementor Global Classes greifen nur auf Atomic-v4-Elementen.
 *    Die zugelassenen v3-Loop-Subtrees (loop-grid/carousel) brauchen
 *    namens- und wertgleiche Klassen im Child-Theme.
 * 2) prefers-reduced-motion lässt sich in Global Classes nicht zuverlässig
 *    abbilden – deshalb hier der Reduce-Fallback für .mb-reveal.
 * 3) Elementor liefert Global-Class-CSS für Atomic-v4 derzeit nicht aus;
 *    .elementor .e-flexbox-base überschreibt unspezifische .mb-*-Regeln.
 *
 * Token-Werte nur über CSS Custom Properties (--mb-*), keine Hex-Werte
 * in den Klassenregeln. Kein !important.
 */

:root {
  --mb-primaer: #184478;
  --mb-primaer-hell: #215CA3;
  --mb-weiss: #FFFFFF;
  --mb-text: #606060;
  --mb-nav-inaktiv: #B2BECC;
  --mb-hinweis: #781A18;
  --mb-flaeche-footer: #E1E1E1;
  --mb-flaeche-button: #DADADA;
  --mb-linie: #C6C6C6;
  --mb-linie-kraeftig: #D0D0D0;
  --mb-deko: #B6BABA;
  --mb-schrift-text: "Open Sans", sans-serif;
  --mb-schrift-headline: "Open Sans Condensed", sans-serif;
  --mb-schrift-nav: "Mallanna", sans-serif;
}

.mb-section {
  padding-block: 60px;
  padding-inline: 0;
}

.mb-section--tight {
  padding-block: 30px;
  padding-inline: 0;
}

.mb-card {
  background-color: var(--mb-weiss);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.08);
  padding: 40px 32px;
}

.mb-card--teaser {
  background-color: var(--mb-weiss);
  border-radius: 2px;
  border-top: 2px solid var(--mb-primaer);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.08);
  padding: 48px 40px 36px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mb-card--teaser:hover,
.mb-card--teaser:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 10px 16px -4px rgba(0, 0, 0, 0.1);
}

.mb-eyebrow {
  color: var(--mb-primaer);
  font-family: var(--mb-schrift-nav);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.mb-divider {
  background-color: var(--mb-linie);
  border: 0;
  display: block;
  height: 1px;
  margin-block: 24px;
  width: 100%;
}

.mb-note {
  background-color: var(--mb-hinweis);
  color: var(--mb-weiss);
  font-family: var(--mb-schrift-text);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  text-align: center;
  text-transform: uppercase;
}

.mb-reveal {
  animation: mb-reveal-up 0.45s ease both;
}

@keyframes mb-reveal-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * v3-Nav-Insel (Header): Global Classes greifen nicht auf v3-Widgets.
 * Deshalb namensgleiche Spiegelklassen hier – Werte nur über --mb-*.
 * Kein Hex, kein !important.
 */
.mb-nav-insel {
  background-color: var(--mb-primaer);
  width: 100%;
}

.mb-nav-insel > .e-con-inner,
.mb-nav-insel.e-con {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 16px;
}

.mb-nav .elementor-nav-menu--main {
  font-family: var(--mb-schrift-nav);
}

.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a {
  color: var(--mb-nav-inaktiv);
  font-family: var(--mb-schrift-nav);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  padding-block: 14px 19px;
  padding-inline: 12px;
  text-transform: uppercase;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:hover,
.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:focus,
.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:focus-visible,
.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a,
.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > a,
.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-parent > a {
  color: var(--mb-weiss);
}

.mb-nav .elementor-nav-menu--dropdown {
  background-color: var(--mb-weiss);
  border: 1px solid var(--mb-linie-kraeftig);
}

.mb-nav .elementor-nav-menu--dropdown a,
.mb-nav .elementor-nav-menu--dropdown .elementor-sub-item {
  color: var(--mb-text);
  font-family: var(--mb-schrift-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mb-linie);
  transition: color 0.25s ease;
}

.mb-nav .elementor-nav-menu--dropdown a:hover,
.mb-nav .elementor-nav-menu--dropdown a:focus,
.mb-nav .elementor-nav-menu--dropdown a:focus-visible {
  color: var(--mb-primaer);
}

/* Submenü bei Tastatur-Fokus öffnen (Elementor zeigt sonst nur :hover) */
.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > .elementor-nav-menu--dropdown,
.mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > ul {
  display: block;
}

.mb-nav a:focus-visible,
.mb-header-kontakt:focus-visible,
.mb-header-logo:focus-visible,
.e-image-link-base:focus-visible {
  outline: 2px solid var(--mb-weiss);
  outline-offset: 3px;
}

.mb-nav .elementor-nav-menu--dropdown a:focus-visible {
  outline-color: var(--mb-primaer);
}

/*
 * v3-Footer-Nav-Insel: Global Classes greifen nicht auf v3-Widgets.
 * Menüfarbe bewusst mb-text (Kontrastkorrektur statt gestrichenem Grau).
 */
.mb-footer-nav-insel {
  background-color: var(--mb-flaeche-footer);
  width: 100%;
  padding-block: 16px 28px;
}

.mb-footer-nav-insel > .e-con-inner,
.mb-footer-nav-insel.e-con {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 16px;
}

.mb-footer-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a {
  color: var(--mb-text);
  font-family: var(--mb-schrift-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  padding-block: 8px;
  padding-inline: 14px;
  text-transform: none;
  transition: color 0.25s ease;
}

.mb-footer-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:hover,
.mb-footer-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:focus,
.mb-footer-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:focus-visible,
.mb-footer-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a {
  color: var(--mb-primaer);
}

.mb-footer-nav a:focus-visible {
  outline: 2px solid var(--mb-primaer);
  outline-offset: 3px;
}

/*
 * v3-Loop-Inseln: Global Classes greifen nicht auf Loop-Items.
 * Deshalb namensgleiche Spiegelklassen – Werte nur über --mb-*.
 */
.mb-loop-insel {
  width: 100%;
}

.mb-loop-insel > .e-con-inner,
.mb-loop-insel.e-con {
  max-width: 1140px;
  margin-inline: auto;
}

.mb-loop-grid .elementor-loop-container {
  gap: 24px;
}

.mb-card.mb-loop-team,
.mb-card.mb-loop-job,
.mb-card.mb-loop-leistung,
.mb-card.mb-loop-koop {
  background-color: var(--mb-weiss);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.08);
  height: 100%;
  padding: 24px;
}

.mb-card--teaser.mb-loop-leistung,
.mb-card--teaser.mb-loop-koop {
  border-top: 2px solid var(--mb-primaer);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mb-card--teaser.mb-loop-leistung:hover,
.mb-card--teaser.mb-loop-leistung:focus-within,
.mb-card--teaser.mb-loop-koop:hover,
.mb-card--teaser.mb-loop-koop:focus-within {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 10px 16px -4px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.mb-loop-team .elementor-widget-theme-post-featured-image img,
.mb-loop-team .elementor-widget-image img {
  border-radius: 2px;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.mb-loop-team .elementor-heading-title,
.mb-loop-leistung .elementor-heading-title,
.mb-loop-job .elementor-heading-title,
.mb-loop-koop .elementor-heading-title {
  color: var(--mb-primaer);
  font-family: var(--mb-schrift-headline);
  font-size: 23px;
  font-weight: 300;
  margin: 0;
}

.mb-loop-team .elementor-widget-text-editor,
.mb-loop-leistung .elementor-widget-text-editor,
.mb-loop-job .elementor-widget-text-editor {
  color: var(--mb-text);
  font-family: var(--mb-schrift-text);
  font-size: 16px;
}

.mb-loop-leistung .elementor-button,
.mb-loop-koop .elementor-button {
  background-color: var(--mb-primaer);
  border: 0;
  color: var(--mb-weiss);
  font-family: var(--mb-schrift-headline);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  text-transform: uppercase;
  transition: background-color 0.25s ease;
}

.mb-loop-leistung .elementor-button:hover,
.mb-loop-leistung .elementor-button:focus,
.mb-loop-leistung .elementor-button:focus-visible,
.mb-loop-koop .elementor-button:hover,
.mb-loop-koop .elementor-button:focus,
.mb-loop-koop .elementor-button:focus-visible {
  background-color: var(--mb-primaer-hell);
}

.mb-loop-leistung .elementor-button:focus-visible,
.mb-loop-koop .elementor-button:focus-visible {
  outline: 2px solid var(--mb-primaer);
  outline-offset: 3px;
}

/* Seiten-Intros (Atomic Klassen ohne lokale Hex-Werte) */
.s-page-intro {
  display: flex;
  justify-content: center;
  width: 100%;
}

.s-page-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1140px;
  padding-inline: 16px;
  width: 100%;
}

.s-page-h1 {
  color: var(--mb-primaer);
  font-family: var(--mb-schrift-headline);
  font-size: 40px;
  font-weight: 300;
  margin: 0;
}

.s-page-lead {
  color: var(--mb-text);
  font-family: var(--mb-schrift-text);
  font-size: 16px;
  margin: 0;
}

@media (max-width: 767px) {
  .s-page-h1 {
    font-size: 32px;
  }
}

.mb-header-kontakt:focus-visible {
  outline-color: var(--mb-primaer);
}

.mb-header-logo-bar {
  transition: padding 0.25s ease;
}

.mb-header-logo {
  transform-origin: left center;
}

/*
 * Sticky-Shrink: Elementor Motion Effects scrollOn/scale startet Preset-bedingt
 * bei scale(0) und ist damit für Header-Shrink unbrauchbar (Logo unsichtbar).
 * Deshalb scroll-driven CSS am Atomic-Logo – kein Custom-JS, prefers-reduced-motion unten.
 */
@supports (animation-timeline: scroll()) {
  .mb-header-logo {
    animation: mb-header-logo-shrink linear both;
    animation-timeline: scroll();
    animation-range: 0px 140px;
  }

  .mb-header-logo-bar {
    animation: mb-header-bar-shrink linear both;
    animation-timeline: scroll();
    animation-range: 0px 140px;
  }
}

@keyframes mb-header-logo-shrink {
  from { transform: scale(1); }
  to { transform: scale(0.85); }
}

@keyframes mb-header-bar-shrink {
  from { padding-block: 18px; }
  to { padding-block: 10px; }
}

/* Sticky-Shrink-Zielklasse – wird von Motion Effects (scrollOn/scale) ergänzt */
.mb-header-is-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (max-width: 1024px) {
  .mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a {
    font-size: 15px;
    padding-inline: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .elementor .e-flexbox-base.mb-card--teaser {
    transition: none;
  }

  .elementor .e-flexbox-base.mb-card--teaser:hover,
  .elementor .e-flexbox-base.mb-card--teaser:focus-within {
    transform: none;
  }

  .mb-card--teaser {
    transition: none;
  }

  .mb-card--teaser:hover,
  .mb-card--teaser:focus-within,
  .mb-card--teaser.mb-loop-leistung:hover,
  .mb-card--teaser.mb-loop-leistung:focus-within,
  .mb-card--teaser.mb-loop-koop:hover,
  .mb-card--teaser.mb-loop-koop:focus-within {
    transform: none;
  }

  .mb-header-logo-bar,
  .mb-header-logo,
  .mb-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a,
  .mb-nav .elementor-nav-menu--dropdown a,
  .mb-footer-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a {
    transition: none;
    animation: none;
  }

  .mb-header-logo,
  .mb-header-logo-bar {
    transform: none;
  }
}

/* Fließtext aus ACF als Plain-Text mit Zeilenumbrüchen (Atomic e-paragraph kann kein Block-HTML).
 * Warum Bordmittel nicht reichen: e-paragraph/html-v3 strippt ul/li und liefert leere Nodes. */
.mb-leistung-fliesstext,
.mb-team-fliesstext,
.mb-team-kurz,
.mb-loop-job .elementor-widget-text-editor {
	white-space: pre-line;
}

.mb-loop-team-img,
.mb-loop-team-img img {
	max-width: 220px;
	height: auto;
	border-radius: 8px;
}

/*
 * Atomic-v4 Layout/Global Classes: Elementor kompiliert mb-layout-* / mb-card-stack
 * nicht ins Frontend-CSS; .e-flexbox-base setzt flex-direction:row + padding:10px.
 * Spiegelregeln mit höherer Spezifität – Werte nur über --mb-*.
 */
.elementor .e-flexbox-base.mb-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding-block: 60px;
	padding-inline: 0;
}

.elementor .e-flexbox-base.mb-section--tight {
	padding-block: 30px;
}

.elementor .e-flexbox-base.mb-layout-inner {
	width: 100%;
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 16px;
}

.elementor .e-flexbox-base.mb-layout-grid-3 {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

.elementor .e-flexbox-base.mb-layout-grid-item {
	flex: 1 1 280px;
	min-width: 0;
}

.elementor .e-flexbox-base.mb-card-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	width: 100%;
}

.elementor .e-flexbox-base.mb-card {
	background-color: var(--mb-weiss);
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.08);
	padding: 40px 32px;
}

.elementor .e-flexbox-base.mb-card--teaser {
	background-color: var(--mb-weiss);
	border-radius: 2px;
	border-top: 2px solid var(--mb-primaer);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.08);
	padding: 48px 40px 36px;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.elementor .e-flexbox-base.mb-card--teaser:hover,
.elementor .e-flexbox-base.mb-card--teaser:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 10px 16px -4px rgba(0, 0, 0, 0.1);
}

.elementor .e-flexbox-base.mb-card-stack > .elementor-widget-e-button {
	margin-top: auto;
	align-self: flex-end;
}

.elementor .e-flexbox-base.mb-card--info.mb-card-stack > .elementor-widget-e-button {
	align-self: center;
}

.elementor .e-button-base.mb-btn {
	background-color: var(--mb-primaer);
	color: var(--mb-weiss);
	font-family: var(--mb-schrift-headline);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	border: 0;
	border-radius: 2px;
	padding: 12px 24px;
	transition: background-color 0.25s ease;
	text-decoration: none;
}

.elementor .e-button-base.mb-btn:hover,
.elementor .e-button-base.mb-btn:focus-visible {
	background-color: var(--mb-primaer-hell);
}

.elementor .e-button-base.mb-btn:focus-visible {
	outline: 2px solid var(--mb-primaer);
	outline-offset: 3px;
}

.elementor .mb-card .e-heading-base:is(h1) {
	color: var(--mb-primaer);
	font-family: var(--mb-schrift-headline);
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
	margin: 0;
}

.elementor .mb-card .e-heading-base:is(h2) {
	color: var(--mb-primaer);
	font-family: var(--mb-schrift-headline);
	font-size: 23px;
	font-weight: 300;
	margin: 0;
}

.elementor .mb-card--teaser .e-heading-base:is(h3) {
	color: var(--mb-primaer);
	font-family: var(--mb-schrift-nav);
	font-size: 18px;
	font-weight: 400;
	margin: 0;
}

.elementor .mb-card .e-paragraph-base,
.elementor .mb-card--teaser .e-paragraph-base {
	color: var(--mb-text);
	font-family: var(--mb-schrift-text);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.elementor .mb-eyebrow .e-paragraph-base {
	color: var(--mb-primaer);
	font-family: var(--mb-schrift-nav);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.elementor .mb-note .e-paragraph-base {
	background-color: var(--mb-hinweis);
	color: var(--mb-weiss);
	font-size: 13px;
	font-weight: 700;
	padding: 10px 24px;
	text-align: center;
	text-transform: uppercase;
	margin: 0;
}

@media (max-width: 991px) {
	.elementor .e-flexbox-base.mb-layout-grid-item {
		flex: 1 1 100%;
	}

	.elementor .mb-card .e-heading-base:is(h1) {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.elementor .e-flexbox-base.mb-card,
	.elementor .e-flexbox-base.mb-card--teaser {
		padding: 32px 24px;
	}
}

/* Atomic-v4: Infokarten – Global-Class-CSS wird nicht ausgeliefert */
.elementor .e-flexbox-base.mb-card.mb-card--info {
	align-items: center;
	text-align: center;
	padding: 48px 28px 36px;
}

.elementor .e-flexbox-base.mb-card--info.mb-card-stack {
	align-items: center;
}

.elementor .e-flexbox-base.mb-icon-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--mb-primaer);
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-block-start: -52px;
	margin-block-end: 8px;
	flex-shrink: 0;
}

.elementor .mb-icon-circle .e-svg-base {
	width: 34px;
	height: 34px;
	color: var(--mb-weiss);
}

.elementor .e-button-base.mb-btn--outline {
	background-color: var(--mb-weiss);
	color: var(--mb-primaer);
	border: 1px solid var(--mb-primaer);
	border-radius: 2px;
	font-family: var(--mb-schrift-headline);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px 24px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.elementor .e-button-base.mb-btn--outline:hover,
.elementor .e-button-base.mb-btn--outline:focus-visible {
	background-color: var(--mb-primaer);
	color: var(--mb-weiss);
}

.elementor .e-button-base.mb-btn--outline:focus-visible {
	outline: 2px solid var(--mb-primaer);
	outline-offset: 3px;
}

.elementor .mb-card--info .e-heading-base:is(h1),
.elementor .mb-card--info .e-heading-base:is(h2) {
	text-align: center;
}

.elementor .mb-card--info .e-paragraph-base {
	text-align: center;
}

/* Info-Sektion leicht über den Hero ziehen (Bestand: Karten-Overlap) */
.elementor .e-flexbox-base.mb-section.mb-home-info-overlap {
	margin-block-start: -80px;
	padding-block-start: 0;
	position: relative;
	z-index: 2;
}

@media (max-width: 991px) {
	.elementor .e-flexbox-base.mb-section.mb-home-info-overlap {
		margin-block-start: -40px;
	}
}

@media (max-width: 575px) {
	.elementor .e-flexbox-base.mb-section.mb-home-info-overlap {
		margin-block-start: -24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .e-button-base.mb-btn--outline {
		transition: none;
	}
}

/* Atomic-v4: mb-teaser-img – Global-Class-CSS wird nicht ausgeliefert */
.elementor .e-image-base.mb-teaser-img,
.elementor .e-image-link-base.mb-teaser-img img,
.elementor .mb-teaser-img .e-image-base {
	width: 100%;
	aspect-ratio: 342 / 136;
	object-fit: cover;
	border: 1px solid var(--mb-linie-kraeftig);
	display: block;
}

/* v3 Hero-Insel: Überbreite verhindern, Fokus auf Navigation */
.mb-hero-insel {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.mb-hero-insel .elementor-swiper-button:focus-visible {
	outline: 2px solid var(--mb-primaer);
	outline-offset: 3px;
}

.mb-hero-insel .swiper-pagination-bullet:focus-visible {
	outline: 2px solid var(--mb-primaer);
	outline-offset: 2px;
}