/* ==========================================================================
   Mirau Bau — Ergänzungen zu theme.json

   Alles Gestalterische steckt in theme.json. Hier steht nur, was sich dort
   nicht abbilden lässt:

   01 Überlaufschutz (Texte bleiben in ihren Feldern)
   02 Eigene Block-Stile (Kachel, Faktenkasten, Kennzahl, Zitat, Pille …)
   03 Kopfbereich: mitlaufend, Mobilnavigation
   04 Aufklapp-Fragen (core/details)
   05 Tabellen
   06 Formular
   07 Bewegung, Fokus, Druck
   ========================================================================== */

/* Hinweis zu den Klassennamen
   ---------------------------------------------------------------------------
   WordPress vergibt fuer registrierte Block-Stile die Klasse
   `is-style-<name>`. Damit dieselben Regeln auch greifen, wenn die Klasse von
   Hand gesetzt wurde, steht jede Klasse hier als `:is(.mb-x, .is-style-mb-x)`.
   --------------------------------------------------------------------------- */

/* 00 Eigene Tokens =======================================================

   Farben und Abstände kommen aus theme.json — der Website-Editor schreibt sie
   als --wp--preset--* ins Dokument. Hier stehen nur die paar Werte, die es
   dort nicht gibt. */

:root {
  --mb-ease: cubic-bezier(.4, 0, .2, 1);
  --mb-whatsapp: #25D366;
  --mb-radius: 10px;
  --mb-radius-gross: 16px;
  --mb-schatten: 0 14px 34px rgba(20, 22, 26, .08);
  --mb-schatten-klein: 0 4px 14px rgba(20, 22, 26, .06);
  --mb-schatten-gross: 0 24px 54px rgba(20, 22, 26, .14);
  --mb-slider-luft: clamp(1rem, .7rem + 1.2vw, 1.75rem);
}

/* 01 Überlaufschutz ====================================================== */

html {
  /* clip statt hidden: verhindert waagerechtes Scrollen, ohne den
     mitlaufenden Kopfbereich zu zerstören */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mb-header-h, 80px) + 16px);
}
body { overflow-x: clip; }

/* Lange deutsche Komposita ("Terrassenüberdachung") dürfen umbrechen,
   statt aus der Kachel zu ragen. Die Schriftgrössen in theme.json sind so
   gewählt, dass das praktisch nie nötig wird. */
body,
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
p, li, dt, dd, td, th, figcaption {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}

/* Knoepfe nie trennen. Aus „Jetzt konfigurieren" wurde im Kopfbereich sonst
   „Jetzt konfigurier / en" — der Browser trennt, sobald der Platz knapp wird,
   und bei einem Knopf sieht das nach einem Fehler aus. Lieber laeuft der Knopf
   in die naechste Zeile als das Wort. */
.wp-block-button__link,
.wp-element-button,
.mb-btn,
button, input[type="submit"] {
  hyphens: none;
  -webkit-hyphens: none;
  white-space: nowrap;
}

/* Jedes Raster- und Flexkind darf schrumpfen. Ohne min-width:0 setzt der
   Browser die Mindestbreite auf den längsten Inhalt — genau daher stammen
   überstehende Texte und waagerechtes Scrollen. */
.wp-block-columns > .wp-block-column,
.wp-block-group > *,
.wp-block-buttons > .wp-block-button,
.wp-block-media-text > *,
.wp-block-post-template > li,
.wp-block-query > *,
.mb-karte > *,
.is-style-mb-karte > *,
.mb-fakten > *,
.is-style-mb-fakten > * { min-width: 0; }

img, svg, video, iframe, embed, object { max-width: 100%; height: auto; }

/* Sehr lange, ununterbrochene Zeichenketten (E-Mail, URL, IBAN) */
.mb-umbruch,
.is-style-mb-umbruch { overflow-wrap: anywhere; word-break: break-word; }

/* Spalten brechen bei WordPress von Haus aus erst bei 782 px um. Bei vier
   Spalten mit deutschen Überschriften ist das zu spät. Die Bereiche
   überschneiden sich bewusst nicht — sonst gewinnt die zuletzt notierte
   Regel und die schmalste Stufe greift nie. */
@media (min-width: 600px) and (max-width: 1199.98px) {
  .mb-vier-spalten.wp-block-columns:not(.is-not-stacked-on-mobile),
.is-style-mb-vier-spalten.wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }  /* schlaegt WordPress' flex-wrap:nowrap ab 782 px */
  .mb-vier-spalten.wp-block-columns > .wp-block-column,
.is-style-mb-vier-spalten.wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 2rem) !important;
    flex-grow: 1;
  }
}
@media (min-width: 600px) and (max-width: 781.98px) {
  .mb-drei-spalten.wp-block-columns:not(.is-not-stacked-on-mobile),
.is-style-mb-drei-spalten.wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }  /* schlaegt WordPress' flex-wrap:nowrap ab 782 px */
  .mb-drei-spalten.wp-block-columns > .wp-block-column,
.is-style-mb-drei-spalten.wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 2rem) !important;
    flex-grow: 1;
  }
}
@media (max-width: 599.98px) {
  .mb-vier-spalten.wp-block-columns > .wp-block-column,
.is-style-mb-vier-spalten.wp-block-columns > .wp-block-column,
.mb-drei-spalten.wp-block-columns > .wp-block-column,
.is-style-mb-drei-spalten.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* 02 Eigene Block-Stile ================================================== */

/* --- Kachel (Gruppe) — „Kachel" im Block-Stil-Umschalter --------------- */
.mb-karte,
.is-style-mb-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: var(--wp--custom--radius--karte, 10px);
  box-shadow: var(--wp--preset--shadow--karte);
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.mb-karte:hover,
.is-style-mb-karte:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--gross); }
.mb-karte:focus-within,
.is-style-mb-karte:focus-within { box-shadow: var(--wp--preset--shadow--gross), 0 0 0 3px var(--wp--preset--color--gold); }

/* Bild oben bündig, festes Seitenverhältnis — dadurch fluchten die Kacheln */
.mb-karte > .wp-block-image:first-child,
.is-style-mb-karte > .wp-block-image:first-child,
.mb-karte > figure.wp-block-image:first-child,
.is-style-mb-karte > figure.wp-block-image:first-child {
  margin: 0 0 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--gruen-hell);
}
.mb-karte > .wp-block-image:first-child img,
.is-style-mb-karte > .wp-block-image:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.mb-karte:hover > .wp-block-image:first-child img,
.is-style-mb-karte:hover > .wp-block-image:first-child img { transform: scale(1.04); }

/* Der letzte Absatz oder Button sitzt unten — Kacheln einer Reihe fluchten */
.mb-karte > :last-child,
.is-style-mb-karte > :last-child { margin-top: auto; }

/* Genau ein Link je Kachel, aufgespannt über die ganze Fläche.
   Greift automatisch, sobald die Kachelüberschrift verlinkt ist — dadurch
   ist die Antippfläche die ganze Kachel statt nur der Textzeile. */
.mb-karte .wp-block-heading > a::after,
.is-style-mb-karte .wp-block-heading > a::after,
.mb-karte .wp-block-post-title > a::after,
.is-style-mb-karte .wp-block-post-title > a::after,
.mb-karte .mb-flaechenlink a::after,
.mb-karte .is-style-mb-flaechenlink a::after,
.is-style-mb-karte .mb-flaechenlink a::after,
.is-style-mb-karte .is-style-mb-flaechenlink a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Weitere Bedienelemente in der Kachel müssen darüber liegen */
.mb-karte .wp-block-buttons,
.is-style-mb-karte .wp-block-buttons,
.mb-karte .wp-block-button,
.is-style-mb-karte .wp-block-button,
.mb-karte figcaption a,
.is-style-mb-karte figcaption a { position: relative; z-index: 2; }


/* Verlinkte Überschriften ohne Unterstrich — in Kacheln wirkt er zu schwer.
   Beim Überfahren kommt er zurück, damit der Link erkennbar bleibt. */
.wp-block-heading > a,
.wp-block-post-title > a,
h1 > a, h2 > a, h3 > a, h4 > a { text-decoration: none; }
.wp-block-heading > a:hover,
.wp-block-post-title > a:hover { text-decoration: underline; }

/* --- Faktenkasten ------------------------------------------------------ */
.mb-fakten,
.is-style-mb-fakten {
  background: var(--wp--preset--color--gruen-hell);
  border: 1px solid #DCE6E3;
  border-left: 4px solid var(--wp--preset--color--gruen);
  border-radius: var(--wp--custom--radius--karte, 10px);
}
.mb-fakten .wp-block-column > p:first-child,
.is-style-mb-fakten .wp-block-column > p:first-child,
.mb-fakten .mb-fakten__label,
.is-style-mb-fakten .mb-fakten__label {
  margin-bottom: .1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gruen);
}
.mb-fakten .mb-fakten__wert,
.is-style-mb-fakten .mb-fakten__wert {
  margin-top: 0;
  padding-bottom: .7rem;
  border-bottom: 1px solid #DCE6E3;
  font-size: .95rem;
  line-height: 1.55;
}

/* --- Kennzahl ---------------------------------------------------------- */
.mb-kennzahl,
.is-style-mb-kennzahl {
  font-size: var(--wp--preset--font-size--zahl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: .35rem;
}

/* --- Schrittnummer (01, 02 …) ------------------------------------------ */
.mb-schrittnummer,
.is-style-mb-schrittnummer {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wp--preset--color--gruen);
  margin-bottom: .35rem;
}

/* --- Kleinüberschrift mit Zierstrich („Unsere Leistungen") ------------- */
.mb-vorzeile,
.is-style-mb-vorzeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--wp--preset--color--gruen);
}
.mb-vorzeile::before,
.is-style-mb-vorzeile::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 2px;
  background: var(--wp--preset--color--gold);
}
.mb-vorzeile.has-text-align-center,
.is-style-mb-vorzeile.has-text-align-center { justify-content: center; }
.mb-vorzeile.has-gold-color::before,
.is-style-mb-vorzeile.has-gold-color::before { background: var(--wp--preset--color--gold); }

/* --- Fusszeilenliste ---------------------------------------------------- */
/* Steht hier und nicht als Inline-Stil in der Fusszeile: alles, was im
   Block-Markup steht, muss exakt dem entsprechen, was der Editor speichert. */
ul.mb-footer-liste { list-style: none; }

/* --- Häkchenliste ------------------------------------------------------ */
ul.mb-haken,
ul.is-style-mb-haken { list-style: none; padding-left: 0; }
ul.mb-haken li,
ul.is-style-mb-haken li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  line-height: 1.6;
}
ul.mb-haken li + li,
ul.is-style-mb-haken li + li { margin-top: .8rem; }
ul.mb-haken li::before,
ul.is-style-mb-haken li::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--wp--preset--color--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.has-dunkel-background-color ul.mb-haken li::before,
.has-dunkel-background-color ul.is-style-mb-haken li::before,
.has-gruen-background-color ul.mb-haken li::before,
.has-gruen-background-color ul.is-style-mb-haken li::before { background-color: var(--wp--preset--color--gold); }

/* --- Pille (Bewertung, Merkmale im Kopfbereich) ------------------------ */
.mb-pille,
.is-style-mb-pille {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  padding: .5rem 1rem;
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: var(--wp--custom--radius--pille, 999px);
  background: var(--wp--preset--color--weiss);
  font-size: .9rem;
  line-height: 1.5;
}
.mb-pille--dunkel {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  font-size: .8rem;
}
.mb-sterne { color: var(--wp--preset--color--gold); letter-spacing: .08em; white-space: nowrap; }

/* --- Zitatkachel ------------------------------------------------------- */
.mb-zitat,
.is-style-mb-zitat { position: relative; }
.mb-zitat::before,
.is-style-mb-zitat::before {
  content: "\201C";
  position: absolute;
  top: .1rem;
  right: 1rem;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--wp--preset--color--gold);
  opacity: .35;
  pointer-events: none;
}

/* --- Galeriebild mit Beschriftung -------------------------------------- */
.mb-projekt,
.is-style-mb-projekt { position: relative; overflow: hidden; border-radius: var(--wp--custom--radius--karte, 10px); }
.mb-projekt img,
.is-style-mb-projekt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.mb-projekt:hover img,
.is-style-mb-projekt:hover img { transform: scale(1.05); }
.mb-projekt figcaption,
.is-style-mb-projekt figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 2.5rem .95rem .85rem;
  background: linear-gradient(transparent, rgba(20, 22, 23, .82));
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

/* 03 Kopfbereich ========================================================= */

.wp-site-blocks > header.wp-block-template-part,
.mb-kopf,
.is-style-mb-kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  /* Bewusst kein backdrop-filter: Er macht den Kopfbereich zum Bezugsrahmen
     fuer position: fixed. Das Klappmenue auf Tablet und Handy blieb dann in
     der 65 px hohen Kopfleiste gefangen und war nicht zu sehen. Der Kopf ist
     deckend, der Weichzeichner war ohnehin unsichtbar. */
  border-bottom: 1px solid var(--wp--preset--color--linie);
}
/* Das offene Klappmenue liegt ueber allem, auch ueber schwebenden Knoepfen
   (z-index 120). WordPress setzt has-modal-open, solange es offen ist. */
html.has-modal-open .wp-site-blocks > header.wp-block-template-part { z-index: 130; }
.admin-bar .mb-kopf,
.admin-bar .is-style-mb-kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .mb-kopf,
.admin-bar .is-style-mb-kopf { top: 46px; } }
.mb-kopf.is-stuck,
.is-style-mb-kopf.is-stuck { box-shadow: 0 6px 24px rgba(20, 22, 26, .08); }

/* Logo: Platzhalterfläche, solange keines gewählt ist */
.wp-block-site-logo img { height: auto; }
.mb-logo-platzhalter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px dashed var(--wp--preset--color--gruen);
  border-radius: 8px;
  background: var(--wp--preset--color--gruen-hell);
  color: var(--wp--preset--color--gruen);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}
.mb-logo-platzhalter::before { content: "\1F5BC"; font-size: 1rem; }


/* Das Logo darf im Kopfbereich nie gequetscht werden — Navigation und
   Knopf geben nach, nicht die Marke. */
.mb-kopf .wp-block-site-logo,
.is-style-mb-kopf .wp-block-site-logo,
.mb-kopf .wp-block-site-title,
.is-style-mb-kopf .wp-block-site-title,
.mb-kopf .mb-wortmarke,
.is-style-mb-kopf .mb-wortmarke { flex: 0 0 auto; }

/* Logo und Schriftzug stehen nebeneinander. Solange kein Logo hochgeladen
   ist, traegt der Schriftzug den Kopfbereich allein — die Seite sieht also
   vom ersten Aufruf an fertig aus. Wer ein Logo hochlaedt, kann den
   Website-Titel im Website-Editor loeschen. */
.mb-marke { min-width: 0; }
.mb-marke .wp-block-site-title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--wp--preset--color--schrift);
}
/* Ohne Logo traegt der Titel den Kopfbereich. Ist ein Logo da, steht der
   Titel daneben — oder wird im Website-Editor geloescht. */
.mb-marke .wp-block-site-logo:empty { display: none; }
.mb-marke .wp-block-site-title a:hover { color: var(--wp--preset--color--gruen); }

/* Rückfall-Schriftzug, solange kein Logo hochgeladen ist */
.mb-wortmarke a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--wp--preset--color--schrift);
}
.mb-wortmarke a span { color: var(--wp--preset--color--gruen); }

/* Navigation: Unterstrich in der Akzentfarbe */
.mb-kopf .wp-block-navigation .wp-block-navigation-item__content,
.is-style-mb-kopf .wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  padding-block: .45rem;
}
.mb-kopf .wp-block-navigation .wp-block-navigation-item__content::after,
.is-style-mb-kopf .wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--gold);
  transition: right .22s cubic-bezier(.4,0,.2,1);
}
.mb-kopf .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.is-style-mb-kopf .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.mb-kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.is-style-mb-kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.mb-kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.is-style-mb-kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--gruen); font-weight: 600; }
.mb-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after,
.is-style-mb-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.mb-kopf .wp-block-navigation__submenu-container,
.is-style-mb-kopf .wp-block-navigation__submenu-container {
  border-radius: var(--wp--custom--radius--karte, 10px);
  box-shadow: var(--wp--preset--shadow--karte);
  padding: .4rem;
}
.mb-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.is-style-mb-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-radius: 6px;
  padding: .55rem .8rem;
}
.mb-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.is-style-mb-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--gruen-hell);
}

/* Antippflächen im Mobilmenü */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding-block: .7rem;
  font-size: 1.02rem;
}
/* Das Zeichen sitzt mittig in der 44-px-Antippflaeche. Ohne Zentrierung
   klebte es oben links — 10 px hoeher als die Knoepfe daneben. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.wp-block-navigation__responsive-container-close { display: flex; }


/* Umschaltpunkt der Navigation: WordPress wechselt erst bei 600 px auf das
   Klappmenü. Deutsche Menütitel sind deutlich länger als englische — darum
   schon ab 1080 px. Der Angebots-Knopf wandert dabei ins Menü. */
@media (min-width: 1080px) {
  .mb-kopf .wp-block-navigation__container,
.is-style-mb-kopf .wp-block-navigation__container { flex-wrap: nowrap; }

  /* Untermenü am Desktop: Es haengt am mitlaufenden Kopfbereich. War es
     hoeher als das Fenster, liessen sich die unteren Punkte nie erreichen —
     beim Scrollen wanderte die Seite, das Untermenue blieb stehen. Jetzt
     endet es am Fensterrand und scrollt in sich. 9rem = Kopfbereich plus
     etwas Luft, auch mit Admin-Leiste. */
  .mb-kopf .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
  .mb-kopf .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
  .mb-kopf .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
  .is-style-mb-kopf .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
  .is-style-mb-kopf .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
  .is-style-mb-kopf .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    max-height: calc(100vh - 9rem);
    max-height: calc(100dvh - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 1079.98px) {
  .mb-kopf .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.is-menu-open),
.is-style-mb-kopf .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  .mb-kopf .wp-block-navigation__responsive-container-open:not(.always-shown),
.is-style-mb-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .mb-kopf .wp-block-navigation__responsive-container.is-menu-open,
.is-style-mb-kopf .wp-block-navigation__responsive-container.is-menu-open { display: flex; }
  .mb-kopf .wp-block-buttons,
.is-style-mb-kopf .wp-block-buttons { display: none; }
}

/* Kontaktleiste */
.mb-topbar,
.is-style-mb-topbar { font-size: .82rem; line-height: 1.5; }
.mb-topbar a,
.is-style-mb-topbar a { text-decoration: none; }
.mb-topbar a:hover,
.is-style-mb-topbar a:hover { text-decoration: underline; }
@media (max-width: 899.98px) {
  .mb-topbar .mb-nur-desktop,
.is-style-mb-topbar .mb-nur-desktop { display: none; }
}

/* Schwebender Anruf-Knopf auf kleinen Geräten */
.mb-anruf-knopf {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 120;
  display: none;
  box-shadow: var(--wp--preset--shadow--gross);
}
@media (max-width: 767.98px) { .mb-anruf-knopf { display: block; } }

/* 04 Aufklapp-Fragen ===================================================== */

.wp-block-details.mb-frage,
.wp-block-details.is-style-mb-frage {
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: var(--wp--custom--radius--karte, 10px);
  background: var(--wp--preset--color--weiss);
  overflow: hidden;
}
.wp-block-details.mb-frage + .wp-block-details.mb-frage,
.wp-block-details.mb-frage + .wp-block-details.is-style-mb-frage,
.wp-block-details.is-style-mb-frage + .wp-block-details.mb-frage,
.wp-block-details.is-style-mb-frage + .wp-block-details.is-style-mb-frage { margin-top: .7rem; }
.wp-block-details.mb-frage[open],
.wp-block-details.is-style-mb-frage[open] { border-color: var(--wp--preset--color--gruen-mittel); }
.wp-block-details.mb-frage > summary,
.wp-block-details.is-style-mb-frage > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.wp-block-details.mb-frage > summary::-webkit-details-marker,
.wp-block-details.is-style-mb-frage > summary::-webkit-details-marker,
.wp-block-details.mb-frage > summary::marker,
.wp-block-details.is-style-mb-frage > summary::marker { display: none; content: ""; }
.wp-block-details.mb-frage > summary::after,
.wp-block-details.is-style-mb-frage > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--gruen);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.wp-block-details.mb-frage[open] > summary::after,
.wp-block-details.is-style-mb-frage[open] > summary::after { transform: rotate(45deg); }
.wp-block-details.mb-frage > :not(summary),
.wp-block-details.is-style-mb-frage > :not(summary) { padding-inline: 1.25rem; }
.wp-block-details.mb-frage > :last-child,
.wp-block-details.is-style-mb-frage > :last-child { padding-bottom: 1.25rem; }

/* 05 Tabellen ============================================================ */

.wp-block-table.mb-vergleich,
.wp-block-table.is-style-mb-vergleich { overflow-x: auto; }
.wp-block-table.mb-vergleich table,
.wp-block-table.is-style-mb-vergleich table {
  min-width: 34rem;  /* darunter wird eine vierspaltige Tabelle unlesbar */
  border-collapse: collapse;
  border: 0;
}
.wp-block-table.mb-vergleich th,
.wp-block-table.is-style-mb-vergleich th,
.wp-block-table.mb-vergleich td,
.wp-block-table.is-style-mb-vergleich td {
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--linie);
}
.wp-block-table.mb-vergleich thead th,
.wp-block-table.is-style-mb-vergleich thead th {
  background: var(--wp--preset--color--gruen-hell);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gruen);
  white-space: nowrap;
}
.wp-block-table.mb-vergleich tbody tr:nth-child(even),
.wp-block-table.is-style-mb-vergleich tbody tr:nth-child(even) { background: var(--wp--preset--color--flaeche); }
.wp-block-table.mb-vergleich figcaption,
.wp-block-table.is-style-mb-vergleich figcaption { text-align: left; }
.mb-tabellenhinweis,
.is-style-mb-tabellenhinweis { display: none; margin-top: .5rem; font-size: .8rem; color: var(--wp--preset--color--schrift-weich); }
.mb-tabellenhinweis::before,
.is-style-mb-tabellenhinweis::before { content: "\2194\00A0"; }
@media (max-width: 619.98px) { .mb-tabellenhinweis,
.is-style-mb-tabellenhinweis { display: block; } }

/* 06 Formular ============================================================ */

.mb-form { display: grid; gap: 1.05rem; }
.mb-form__reihe { display: grid; gap: 1.05rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mb-form__reihe--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mb-feld { display: grid; gap: .4rem; min-width: 0; }
.mb-feld label { font-size: .88rem; font-weight: 600; }
.mb-feld .pflicht { color: #B4321E; }

.mb-form, .mb-form * { box-sizing: border-box; }

.mb-form input[type="text"], .mb-form input[type="email"], .mb-form input[type="tel"],
.mb-form select, .mb-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;   /* WordPress setzt das nicht global — sonst sprengt der Innenabstand das Feld */
  padding: .78rem .95rem;
  border: 1px solid #CDD5D2;
  border-radius: 8px;
  background: #fff;
  color: var(--wp--preset--color--schrift);
  font-family: inherit;
  font-size: 1rem;  /* 16px verhindert das Zoomen auf iOS */
  line-height: 1.5;
}
.mb-form textarea { min-height: 140px; resize: vertical; }
.mb-form input:focus, .mb-form select:focus, .mb-form textarea:focus {
  border-color: var(--wp--preset--color--gruen);
  box-shadow: 0 0 0 3px rgba(44, 70, 65, .12);
  outline: none;
}
.mb-einwilligung {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--wp--preset--color--schrift-weich);
}
.mb-einwilligung input[type="checkbox"] { width: 20px; height: 20px; margin: .18rem 0 0; }
.mb-hinweis { padding: .95rem 1.15rem; border-radius: 8px; font-size: .93rem; line-height: 1.6; }
.mb-hinweis--ok  { background: #E9F4EF; border: 1px solid #BEDCD1; color: #1B4A38; }
.mb-hinweis--fehler { background: #FBECEA; border: 1px solid #F0C8C1; color: #7E2114; }
.mb-honigtopf { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.mb-form button[type="submit"] {
  justify-self: start;
  padding: .9rem 1.75rem;
  border: 0;
  border-radius: var(--wp--custom--radius--pille, 999px);
  background: var(--wp--preset--color--gruen);
  color: #fff;
  font: 600 .95rem/1.35 inherit;
  cursor: pointer;
}
.mb-form button[type="submit"]:hover { background: var(--wp--preset--color--gruen-dunkel); }

/* 08 Konfigurator ======================================================== */

/* --- Eigene Knoepfe ----------------------------------------------------- */
/* Konfigurator und WhatsApp-Karte sind Server-Bausteine und koennen den
   Knopf-Block von WordPress nicht verwenden. Damit sie trotzdem aussehen wie
   jeder andere Knopf im Theme, steht die Gestaltung hier — vorher fehlte sie,
   und „Weiter" erschien als grauer Systemknopf. */
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--wp--custom--radius--knopf, 999px);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  hyphens: none;
  cursor: pointer;
  transition: background-color .18s var(--mb-ease), color .18s var(--mb-ease), transform .18s var(--mb-ease);
}
.mb-btn:hover { transform: translateY(-1px); }
.mb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.mb-btn--gold {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--schrift);
}
.mb-btn--gold:hover { background: var(--wp--preset--color--gold-dunkel); color: var(--wp--preset--color--schrift); }

.mb-btn--gruen {
  background: var(--wp--preset--color--gruen);
  color: var(--wp--preset--color--weiss);
}
.mb-btn--gruen:hover { background: var(--wp--preset--color--gruen-dunkel); }

.mb-btn--rand {
  background: transparent;
  border-color: currentColor;
  color: var(--wp--preset--color--gruen);
}
.mb-btn--rand:hover { background: var(--wp--preset--color--gruen); border-color: var(--wp--preset--color--gruen); color: var(--wp--preset--color--weiss); }

/* Ein Knopf mit [hidden] muss verschwinden. Die Regeln fuer .mb-btn
   setzen display: inline-flex und wuerden das sonst ueberstimmen — der
   Absendeknopf staende dann schon in Schritt 1. */
.mb-konf [hidden] { display: none !important; }


.mb-konf {
  --mb-konf-rand: 1px solid var(--wp--preset--color--linie);
  container-type: inline-size;
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
  background: var(--wp--preset--color--weiss);
  border: var(--mb-konf-rand);
  border-radius: var(--mb-radius-gross);
  box-shadow: var(--mb-schatten);
}
.mb-konf--flaeche { background: var(--wp--preset--color--flaeche); }
.mb-konf *, .mb-konf *::before, .mb-konf *::after { box-sizing: border-box; }
.mb-konf__form { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); min-width: 0; }

/* Kopf mit Fortschritt */
.mb-konf__titel { max-width: 46rem; }
.mb-konf__titel h2 { margin: 0 0 .4rem; font-size: clamp(1.25rem, .95rem + 1.3vw, 1.9rem) !important; }
.mb-konf__titel .mb-lead { margin: 0; }

.mb-konf__schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: .5rem .75rem;
  margin: 1.25rem 0 .75rem;
  padding: 0;
  list-style: none;
}
.mb-konf__schritt {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--wp--preset--color--schrift-weich);
}
.mb-konf__schritt.ist-fertig { cursor: pointer; color: var(--wp--preset--color--gruen); }
.mb-konf__schritt.ist-aktiv { color: var(--wp--preset--color--schrift); }
.mb-konf__nummer {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 2px solid var(--wp--preset--color--linie);
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  background: var(--wp--preset--color--weiss);
}
.mb-konf__schritt.ist-aktiv .mb-konf__nummer { border-color: var(--wp--preset--color--gruen); background: var(--wp--preset--color--gruen); color: #fff; }
.mb-konf__schritt.ist-fertig .mb-konf__nummer { border-color: var(--wp--preset--color--gruen); color: var(--wp--preset--color--gruen); }
.mb-konf__schrittname { min-width: 0; overflow-wrap: break-word; }

.mb-konf__balken { height: 4px; border-radius: 999px; background: var(--wp--preset--color--linie); overflow: hidden; }
.mb-konf__balken span { display: block; height: 100%; background: var(--wp--preset--color--gold); transition: width .3s var(--mb-ease); }

/* Fragen */
.mb-konf__frage {
  margin: 0 0 .9rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem) !important;
  font-weight: 700;
  line-height: 1.35;
}
.mb-konf__frage small { display: block; margin-top: .2rem; font-size: .82rem; font-weight: 400; color: var(--wp--preset--color--schrift-weich); }

/* Auswahlkarten */
.mb-konf__wahl { display: grid; gap: .7rem; margin-bottom: 1.6rem; min-width: 0; }
.mb-konf__wahl > * { min-width: 0; }
.mb-konf__wahl--gross { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.mb-konf__wahl--zwei  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.mb-konf__wahl--drei  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.mb-konf__wahl--farben{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.mb-konf__karte {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-width: 0;
  min-height: 56px;
  padding: .85rem 1rem;
  background: var(--wp--preset--color--weiss);
  border: 2px solid var(--wp--preset--color--linie);
  border-radius: var(--mb-radius);
  cursor: pointer;
  transition: border-color .16s var(--mb-ease), box-shadow .16s var(--mb-ease);
}
.mb-konf__karte:hover { border-color: var(--wp--preset--color--gruen-mittel); }
.mb-konf__karte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mb-konf__karte:has(input:checked) { border-color: var(--wp--preset--color--gruen); box-shadow: 0 0 0 3px rgba(44, 70, 65, .1); }
.mb-konf__karte:has(input:focus-visible) { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 2px; }

.mb-konf__kartentext { display: grid; gap: .15rem; min-width: 0; }
.mb-konf__kartentext strong { font-size: .97rem; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.mb-konf__kartentext small { font-size: .82rem; line-height: 1.45; color: var(--wp--preset--color--schrift-weich); overflow-wrap: break-word; }

/* Häkchen rechts oben, sobald gewählt */
.mb-konf__karte:has(input:checked)::after {
  content: "";
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wp--preset--color--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.mb-konf__karte--haken { padding-right: 2.4rem; }

.mb-konf__punkt {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(20, 22, 26, .18);
  border-radius: 8px;
}

/* Regler */
.mb-konf__regler { margin-bottom: 1.35rem; min-width: 0; }
.mb-konf__reglerkopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.mb-konf__reglerkopf label { font-size: .95rem; font-weight: 600; }
.mb-konf__wert { display: inline-flex; align-items: baseline; gap: .25rem; }
.mb-konf__wert input {
  width: 5.5rem;
  padding: .45rem .6rem;
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 8px;
  background: var(--wp--preset--color--flaeche);
  font: 700 1rem/1.2 inherit;
  color: var(--wp--preset--color--gruen);
  text-align: right;
}
.mb-konf__wert span { font-size: .85rem; color: var(--wp--preset--color--schrift-weich); }

.mb-konf__schieber {
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.mb-konf__schieber::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--wp--preset--color--linie); }
.mb-konf__schieber::-moz-range-track { height: 6px; border-radius: 999px; background: var(--wp--preset--color--linie); }
.mb-konf__schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--wp--preset--color--gruen);
  box-shadow: 0 2px 8px rgba(20, 22, 26, .25);
}
.mb-konf__schieber::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--wp--preset--color--gruen);
  box-shadow: 0 2px 8px rgba(20, 22, 26, .25);
}
.mb-konf__grenzen { display: flex; justify-content: space-between; font-size: .76rem; color: var(--wp--preset--color--schrift-weich); }

/* Zweispaltiger Aufbau: Felder links, Vorschau rechts */
.mb-konf__zweispalt { display: grid; gap: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); min-width: 0; }
.mb-konf__zweispalt > * { min-width: 0; }

@container (min-width: 44rem) {
  .mb-konf__zweispalt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .mb-konf__vorschau, .mb-konf__zusammen { position: sticky; top: calc(var(--mb-kopf-hoehe, 0px) + 1rem); }
}

/* Vorschau */
.mb-konf__vorschau, .mb-konf__zusammen {
  padding: clamp(1rem, .85rem + .8vw, 1.5rem);
  background: var(--wp--preset--color--gruen-hell);
  border: 1px solid #DCE6E3;
  border-radius: var(--mb-radius);
}
.mb-konf__vorschaukopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.mb-konf__vorschaukopf span { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--schrift-weich); }
.mb-konf__flaeche { font-size: 1.25rem; font-weight: 800; color: var(--wp--preset--color--gruen); }
.mb-konf__skizze svg { display: block; width: 100%; height: auto; }
.mb-konf__vorschaufuss { margin: .4rem 0 0; font-size: .85rem; color: var(--wp--preset--color--schrift-weich); text-align: center; }

/* Zusammenfassung */
.mb-konf__zusammen h3 { margin: 0 0 .85rem; font-size: 1rem !important; font-weight: 700; }
.mb-konf__liste { display: grid; gap: .55rem; margin: 0; }
.mb-konf__zeile { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .3rem .8rem; padding-bottom: .55rem; border-bottom: 1px solid #DCE6E3; }
.mb-konf__zeile dt { font-size: .8rem; font-weight: 700; color: var(--wp--preset--color--schrift-weich); }
.mb-konf__zeile dd { margin: 0; font-size: .9rem; font-weight: 600; overflow-wrap: break-word; }

.mb-konf__preis { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px solid var(--wp--preset--color--gruen); }
.mb-konf__preislabel { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--schrift-weich); }
.mb-konf__preiswert { display: block; margin-top: .2rem; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--wp--preset--color--gruen); overflow-wrap: break-word; }
.mb-konf__preisfuss { margin: .6rem 0 0; font-size: .78rem; line-height: 1.55; color: var(--wp--preset--color--schrift-weich); }

.mb-konf__hinweis { margin: -.5rem 0 1.1rem; font-size: .84rem; color: var(--wp--preset--color--schrift-weich); }

/* Fussleiste */
.mb-konf__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.mb-konf__fussrechts { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; margin-left: auto; min-width: 0; }
.mb-konf__fusspreis { display: grid; min-width: 0; }
.mb-konf__fusspreis .mb-konf__preiswert { font-size: 1.1rem; }
.mb-konf__zurueck {
  padding: .7rem 0;
  border: 0;
  background: none;
  font: 600 .93rem/1.35 inherit;
  color: var(--wp--preset--color--schrift-weich);
  cursor: pointer;
}
.mb-konf__zurueck:hover { color: var(--wp--preset--color--gruen); }
.mb-konf__fussnote { margin: 0; font-size: .8rem; color: var(--wp--preset--color--schrift-weich); }

@media (max-width: 479.98px) {
  .mb-konf__fussrechts { width: 100%; }
  .mb-konf__fussrechts .mb-btn { display: flex; width: 100%; }
}

/* Ohne JavaScript stehen alle Schritte untereinander. */
.mb-konf__seite + .mb-konf__seite { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--wp--preset--color--linie); }
.js .mb-konf__seite + .mb-konf__seite { margin-top: 0; padding-top: 0; border-top: 0; }

/* 09 Vorher / Nachher ==================================================== */

/* Beide Bilder liegen deckungsgleich uebereinander und sind beide 100 % breit.
   Verschoben wird nicht die Breite, sondern der Beschnitt des oberen Bildes.
   Eine Breitenaenderung haette das Bild verzerrt und aus dem Rahmen ragen
   lassen — gemessen bei 320 px: 320 px Bild in einer 160 px breiten Klammer. */
.mb-vn { --mb-vn-pos: 50%; margin: 0; }

.mb-vn__bilder {
  position: relative;
  overflow: hidden;
  border-radius: var(--mb-radius);
  background: var(--wp--preset--color--gruen-hell);
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.mb-vn__bilder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-vn__klammer {
  position: absolute;
  inset: 0;
  width: 100%;
  clip-path: inset(0 calc(100% - var(--mb-vn-pos)) 0 0);
}

/* Der Griff ist so breit wie sein Knauf. Die sichtbare Linie zeichnet
   ::before — sonst ragt der Knauf aus dem 3 px schmalen Element heraus. */
.mb-vn__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--mb-vn-pos);
  width: 44px;
  margin-left: -22px;
  pointer-events: none;
}
.mb-vn__griff::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 22, 26, .18);
}
.mb-vn__griff::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4641' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 3 12 9 6'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 4px 14px rgba(20, 22, 26, .25);
}

.mb-vn__marke {
  position: absolute;
  top: .75rem;
  z-index: 2;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(22, 33, 31, .72);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: none;
}
.mb-vn__marke--links { left: .75rem; }
.mb-vn__marke--rechts { right: .75rem; }

/* Der eigentliche Regler liegt unsichtbar ueber dem ganzen Bild. Damit
   funktioniert das Ziehen mit Maus, Finger und Pfeiltasten gleichermassen. */
.mb-vn__regler {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.mb-vn__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.mb-vn__regler::-moz-range-thumb { width: 44px; height: 100px; border: 0; }
.mb-vn__regler:focus-visible ~ .mb-vn__griff::after { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 3px; }

.mb-vn__text { display: grid; gap: .2rem; margin-top: .9rem; }
.mb-vn__ort { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--gruen); }
.mb-vn__titel { font-size: 1.02rem; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.mb-vn__beschreibung { font-size: .9rem; line-height: 1.6; color: var(--wp--preset--color--schrift-weich); }


/* 10 Slider ============================================================== */

/* Das Blaettern erledigt der Browser: waagerecht scrollbarer Bereich mit
   Scroll-Snap. Ohne JavaScript funktioniert Wischen und Tastatur weiterhin,
   nur Pfeile und Punkte fehlen dann. */
.mb-slider {
  --mb-slider-spalten: 1;
  position: relative;
}
.mb-slider__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--mb-slider-spalten) - 1) * var(--mb-slider-luft, 1.5rem)) / var(--mb-slider-spalten));
  gap: var(--mb-slider-luft, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: .35rem;
  /* Eigene Bedienelemente statt Systemleiste. */
  scrollbar-width: none;
}
.mb-slider__spur::-webkit-scrollbar { display: none; }
.mb-slider__spur > * {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

/* Auf schmalen Geraeten steht immer nur eine Folie im Bild — sonst waeren
   zwei Vorher/Nachher-Regler nebeneinander je gut 150 px breit. */
@media (max-width: 781.98px) {
  .mb-slider__spur { grid-auto-columns: 100%; }
}

.mb-slider__leiste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: 1.15rem;
}
.mb-slider__pfeil {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--linie);
  border-radius: 50%;
  background: var(--wp--preset--color--weiss);
  color: var(--wp--preset--color--gruen);
  cursor: pointer;
  transition: border-color .16s var(--mb-ease, ease), background .16s var(--mb-ease, ease);
}
.mb-slider__pfeil:hover {
  border-color: var(--wp--preset--color--gruen);
  background: var(--wp--preset--color--gruen);
  color: #fff;
}
.mb-slider__punkte { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
/* 40 x 40 statt 9 x 9: der sichtbare Punkt bleibt klein, die Antippfläche
   erreicht die Mindestgrösse. Gemessen wurde vorher 30 px — knapp darunter. */
.mb-slider__punkt {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mb-slider__punkt::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  border-radius: 50%;
  background: var(--wp--preset--color--linie);
  transition: background .16s var(--mb-ease, ease), transform .16s var(--mb-ease, ease);
}
.mb-slider__punkt.ist-aktiv::before {
  background: var(--wp--preset--color--gruen);
  transform: scale(1.35);
}
.mb-slider.ist-einzeln .mb-slider__leiste { display: none; }

/* 11 Erfahrungsblock ===================================================== */

/* Vier feste Spalten, nicht auto-fill: bei auto-fill legt WordPress auf
   1240 px sieben Spuren an und die vier Zahlen kleben links. Auf schmalen
   Geraeten zwei Spalten — vier waeren je 70 px breit. */
.mb-erfahrung__gitter { text-align: center; }
.mb-erfahrung__feld { min-width: 0; display: grid; justify-items: center; }
.mb-erfahrung__feld > * { text-align: center; }

@media (max-width: 599.98px) {
  .mb-erfahrung__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.mb-erfahrung .mb-kennzahl {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.mb-erfahrung .mb-kennzahl-text {
  margin: 0;
  line-height: 1.4;
  color: rgba(255, 255, 255, .66);
}
.mb-erfahrung__fuss {
  margin: 0;
  color: rgba(255, 255, 255, .5);
}
.mb-erfahrung__fuss a { color: inherit; }

/* 12 WhatsApp ============================================================ */

.mb-wa {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 1rem;
  height: 100%;
  min-width: 0;
  padding: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(20, 22, 26, .06);
}
.mb-wa__zeichen {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mb-whatsapp, #25D366);
  color: #0B3D22;
}
.mb-wa__inhalt { display: grid; align-content: start; gap: .5rem; min-width: 0; }
.mb-wa__titel { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.mb-wa__text { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--wp--preset--color--schrift-weich); }
.mb-wa__punkte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
  font-size: .88rem;
}
.mb-wa__punkte li {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  gap: .4rem;
  color: var(--wp--preset--color--schrift-weich);
}
.mb-wa__punkte li::before { content: "→"; color: var(--wp--preset--color--gruen); }
.mb-wa__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: .8rem 1.35rem;
  border-radius: 999px;
  background: var(--mb-whatsapp, #25D366);
  color: #0B3D22;
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
}
.mb-wa__knopf:hover { background: #1FBA59; color: #08321C; }
.mb-wa__fuss { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--wp--preset--color--schrift-weich); }
.mb-wa__fehlt { margin: 0; font-size: .9rem; color: #7E2114; }

@media (max-width: 419.98px) {
  .mb-wa { grid-template-columns: minmax(0, 1fr); }
}

/* Schwebender WhatsApp-Knopf — links, damit er dem Anruf-Knopf nicht in die
   Quere kommt. */
.mb-wa-schweber {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 120;
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  background: var(--mb-whatsapp, #25D366);
  color: #0B3D22;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(20, 22, 26, .22);
}
@media (max-width: 767.98px) { .mb-wa-schweber { display: inline-flex; } }

/* 13 Wissen und Über uns ================================================= */

.mb-wissen__dauer { margin: auto 0 0; color: var(--wp--preset--color--schrift-weich); }
.mb-wissen .wp-block-post-title a,
.mb-wissen h3 a { color: inherit; text-decoration: none; }
.mb-wissen .wp-block-post-title a:hover,
.mb-wissen h3 a:hover { color: var(--wp--preset--color--gruen); }

.mb-portrait img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }
.mb-bild-rund img { width: 100%; height: auto; }

/* Die Knoepfe im Kopfbereich behalten ihre Groesse, das Menue gibt nach.
   Ohne flex-shrink: 0 schoben sich die beiden Knoepfe uebereinander, sobald
   das Menue lang wurde — gemessen bei zehn Menuepunkten auf 1440 px. */
.mb-kopf__knoepfe {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.mb-kopf__knoepfe > .wp-block-button { flex: 0 0 auto; }

.mb-kopf .wp-block-navigation,
.is-style-mb-kopf .wp-block-navigation { min-width: 0; flex: 1 1 auto; }

/* Der zweite Knopf ist der wichtigere. „Angebot anfordern" tritt zurueck,
   sobald es eng wird — der Weg dorthin steht ohnehin in der Kontaktleiste. */
@media (max-width: 1279.98px) {
  .mb-kopf__knoepfe .mb-nur-desktop { display: none; }
}

@media (max-width: 599.98px) {
  .mb-kopf__knoepfe .wp-block-button__link { font-size: .8rem; padding-inline: .9rem; }
}

/* 07 Bewegung, Fokus, Druck ============================================= */

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.mb-einblenden { opacity: 0; transform: translateY(14px); }
.mb-einblenden.is-sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}

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

@media print {
  .mb-topbar,
.is-style-mb-topbar,
.mb-kopf,
.is-style-mb-kopf,
.mb-anruf-knopf,
.wp-block-template-part[class*="footer"] { display: none !important; }
  body { color: #000; font-size: 11pt; }
}

/* Im Editor sollen Platzhalter und Kacheln genauso aussehen wie vorne */
.editor-styles-wrapper .mb-karte:hover,
.editor-styles-wrapper .is-style-mb-karte:hover { transform: none; }