/* ===========================================================================
   MIRAU BAU — Gestaltungsebene „Lichtband" (Version 5)
   ---------------------------------------------------------------------------
   Diese Datei liegt über theme.css und abschnitte.css und gibt dem Theme das
   Gesicht aus dem freigegebenen Entwurf 2: helles, warmes Papier, weiche
   Karten mit langem Schatten, Waldgrün als Grundton, Gold sparsam und nur
   dort, wo etwas passieren soll.

   Grundsätze
   - Kein :is(). WordPress schreibt Editor-Stile um und verrechnet sich dabei
     bei :is() — Selektoren stehen deshalb ausgeschrieben.
   - Keine Animation, die Inhalt unsichtbar beginnen lässt. Bewegt wird nur
     die Lage, nie die Deckkraft.
   - Alle Farben kommen aus den Presets der theme.json, damit der Customizer
     sie weiterhin umstellen kann.
   ======================================================================== */

:root {
  --lb-papier:   #F7F6F2;
  --lb-karte:    #FFFFFF;
  --lb-schatten:   0 2px 4px rgba(27, 43, 40, .04), 0 12px 28px rgba(27, 43, 40, .06);
  --lb-schatten-h: 0 4px 10px rgba(27, 43, 40, .07), 0 22px 50px rgba(27, 43, 40, .11);
  --lb-r:   var(--wp--custom--radius--karte, 10px);
  --lb-r-l: var(--wp--custom--radius--gross, 16px);
  --lb-bahn: 1320px;
  --lb-rand: clamp(18px, 4vw, 56px);
}

body { background: var(--lb-papier); }

/* ---------------------------------------------------------------------------
   1. Bänder und Bahn
   ------------------------------------------------------------------------ */
.mb-abschnitt {
  padding-block: clamp(52px, 7vw, 108px);
  padding-left: max(var(--lb-rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--lb-rand), env(safe-area-inset-right, 0px));
}
.mb-abschnitt.mb-luft-eng   { padding-block: clamp(26px, 3.5vw, 52px); }
.mb-abschnitt.mb-luft-weit  { padding-block: clamp(72px, 9vw, 148px); }
.mb-abschnitt__innen { width: 100%; max-width: var(--lb-bahn); margin-inline: auto; }
.mb-abschnitt.mb-breite-schmal .mb-abschnitt__innen { max-width: 860px; }

.mb-abschnitt.mb-grund-weiss  { background: var(--lb-papier); }
.mb-abschnitt.mb-grund-hell   { background: var(--wp--preset--color--gruen-hell, #EEF3F1); }
.mb-abschnitt.mb-grund-flaeche{ background: var(--wp--preset--color--flaeche, #F9F9FB); }
.mb-abschnitt.mb-grund-dunkel {
  background: var(--wp--preset--color--gruen, #2C4641);
  color: #F2F6F4;
}
.mb-abschnitt.mb-grund-dunkel .mb-sektionskopf h2,
.mb-abschnitt.mb-grund-dunkel .mb-sektionskopf__titel,
.mb-abschnitt.mb-grund-dunkel .mb-cta__titel { color: #FFFFFF; }

/* ---------------------------------------------------------------------------
   2. Abschnittskopf: kleine Marke über der Überschrift
   ------------------------------------------------------------------------ */
.mb-sektionskopf { display: grid; gap: .8rem; max-width: 62ch; margin-bottom: clamp(24px, 3vw, 44px); }
.mb-sektionskopf h2,
.mb-sektionskopf__titel {
  margin: 0;
  font-size: var(--mb-bd-titel-fs, var(--wp--preset--font-size--h-2, 2.6rem));
  font-weight: var(--mb-bd-titel-fw, 750);
  line-height: var(--mb-bd-titel-lh, 1.08);
  letter-spacing: var(--mb-bd-titel-ls, -.028em);
  text-transform: var(--mb-bd-titel-tt, none);
  color: var(--mb-bd-titel-fc, inherit);
  text-wrap: balance;
}
.mb-sektionskopf .mb-lead { margin: 0; color: var(--wp--preset--color--schrift-weich, #6B7570); }
.mb-mittig .mb-sektionskopf { margin-inline: auto; text-align: center; justify-items: center; }
.mb-vorzeile {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 0;
  font-size: var(--wp--preset--font-size--klein, .875rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gruen-mittel, #4C6A64);
}
.mb-vorzeile::before {
  content: "";
  flex: 0 0 auto;
  width: 1.6em;
  height: 2px;
  border-radius: 2px;
  background: var(--wp--preset--color--gold, #FFBB00);
}
.mb-abschnitt.mb-grund-dunkel .mb-vorzeile { color: rgba(242, 246, 244, .78); }
.mb-hero .mb-vorzeile { color: rgba(255, 255, 255, .86); }

/* ---------------------------------------------------------------------------
   3. Knöpfe — Pille, weich, mit spürbarer Reaktion
   ------------------------------------------------------------------------ */
.mb-knopfreihe { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.3rem; }
.mb-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .9em 1.55em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--lb-karte);
  color: var(--wp--preset--color--schrift, #141617);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  hyphens: none;
  cursor: pointer;
  box-shadow: var(--lb-schatten);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background-color .2s, color .2s, border-color .2s;
}
.mb-knopf:hover { transform: translateY(-2px); box-shadow: var(--lb-schatten-h); }
.mb-knopf:active { transform: translateY(0); }
.mb-knopf--gold { background: var(--wp--preset--color--gold, #FFBB00); color: #241A00; }
.mb-knopf--gold:hover { background: var(--wp--preset--color--gold-dunkel, #E0A400); }
.mb-knopf--rand { background: transparent; border-color: var(--wp--preset--color--linie, #E4E8E6); box-shadow: none; }
.mb-knopf--rand:hover { background: var(--lb-karte); border-color: transparent; }
.mb-knopf--hell { background: #FFFFFF; color: var(--wp--preset--color--gruen, #2C4641); }
.mb-abschnitt.mb-grund-dunkel .mb-knopf--rand,
.mb-hero .mb-knopf--rand { border-color: rgba(242, 246, 244, .32); color: #F2F6F4; }
.mb-abschnitt.mb-grund-dunkel .mb-knopf--rand:hover,
.mb-hero .mb-knopf--rand:hover { background: rgba(242, 246, 244, .12); }

/* ---------------------------------------------------------------------------
   4. Kopfbereich (Hero)
   ------------------------------------------------------------------------ */
/* Der Kopfbereich laeuft randlos. Deshalb traegt nicht der Abschnitt den
   Seitenrand, sondern sein Innenteil — sonst bleibt links ein heller
   Streifen neben Bild und Schleier stehen. */
.mb-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(var(--mb-hero-hoehe, 72vh), 760px);
  overflow: hidden;
  border-radius: 0;
  color: #FFFFFF;
  padding-left: 0;
  padding-right: 0;
}
.mb-hero__innen {
  width: 100%;
  max-width: var(--lb-bahn);
  margin-inline: auto;
  padding-left: max(var(--lb-rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--lb-rand), env(safe-area-inset-right, 0px));
}
/*
 * Bild und Schleier muessen die volle Abschnittshoehe fuellen — auch die
 * Polsterung oben und unten.
 *
 * Der Haken: .mb-hero ist ein Raster, und .mb-hero > * bekommt in
 * abschnitte.css `grid-area: 1 / 1`. Fuer ein absolut gesetztes Rasterkind
 * mit fester Rasterposition ist der Bezugsrahmen nicht der Polsterkasten des
 * Abschnitts, sondern die Rasterzelle — die liegt innerhalb der Polsterung.
 * Oben blieb deshalb ein heller Streifen von rund 100 px stehen.
 *
 * `grid-area: auto` nimmt beiden die feste Rasterposition. Damit bezieht sich
 * `inset: 0` wieder auf den Polsterkasten, und der Kopfbereich ist
 * randlos dunkel.
 */
.mb-hero > .mb-hero__bild,
.mb-hero > .mb-hero__schleier { grid-area: auto; }
.mb-hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-hero__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20, 30, 28, .88) 0%, rgba(20, 30, 28, .55) 52%, rgba(20, 30, 28, .25) 100%);
}
.mb-hero__innen { position: relative; z-index: 2; }
.mb-hero__titel {
  max-width: 19ch;
  font-size: var(--mb-bd-titel-fs, var(--wp--preset--font-size--h-1, 3.5rem));
  font-weight: var(--mb-bd-titel-fw, 750);
  line-height: var(--mb-bd-titel-lh, 1.06);
  letter-spacing: var(--mb-bd-titel-ls, -.034em);
  text-transform: var(--mb-bd-titel-tt, none);
  color: var(--mb-bd-titel-fc, #FFFFFF);
}
.mb-hero .mb-lead { max-width: 54ch; margin-top: 1rem; }
.mb-abschnitt .mb-lead,
.mb-lead {
  font-size: var(--mb-bd-text-fs, var(--wp--preset--font-size--lead, 1.15rem));
  font-weight: var(--mb-bd-text-fw, 400);
  line-height: var(--mb-bd-text-lh, 1.6);
  letter-spacing: var(--mb-bd-text-ls, normal);
  text-transform: var(--mb-bd-text-tt, none);
  color: var(--mb-bd-text-fc, inherit);
}
.mb-hell { color: #FFFFFF; }

/* ---------------------------------------------------------------------------
   5. Kacheln — weiche Karten statt harter Kästen
   ------------------------------------------------------------------------ */
/*
 * Das Raster richtet sich nach dem Platz, nicht nach der Fensterbreite.
 *
 * Vorher sprang es bei genau 900 px auf drei feste Spalten — macht 248 px je
 * Kachel, und darin steht ein Titel wie „Aufgesetzte Markise" dreizeilig.
 * Deshalb jetzt auto-fit mit einer ehrlichen Mindestbreite: Eine Kachel mit
 * Bild, Symbol, Titel und drei Zeilen Text braucht rund 290 px, sonst wird
 * sie gequetscht. Das Raster bricht von allein um, wenn das nicht mehr passt.
 *
 * min() faengt den Fall ab, dass der Abschnitt selbst schmaler als 290 px
 * ist — ohne das entsteht dort waagerechtes Scrollen.
 */
.mb-kacheln {
  display: grid;
  gap: var(--mb-bd-luecke, clamp(.85rem, .5rem + 1vw, 1.4rem));
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  align-items: stretch;
}
/*
 * Eine feste Spaltenzahl gilt nur, wenn sie auch hineinpasst. Vier Spalten
 * auf dem Handy waeren kein Wunsch, sondern ein Versehen — deshalb greift
 * die Vorgabe aus dem Builder erst, wenn je Spalte noch 240 px bleiben.
 */
@media (min-width: 1024px) {
  .mb-kacheln { grid-template-columns: repeat(var(--mb-bd-spalten, var(--mb-kacheln-spalten, 3)), minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .mb-kacheln { grid-template-columns: repeat(var(--mb-bd-spalten, 2), minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .mb-kacheln { grid-template-columns: repeat(var(--mb-bd-spalten, 1), minmax(0, 1fr)); }
}
.mb-kachel {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--lb-karte);
  border-radius: var(--lb-r);
  box-shadow: var(--lb-schatten);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.mb-kachel:hover { transform: translateY(-4px); box-shadow: var(--lb-schatten-h); }
.mb-kachel__bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mb-kachel__text { padding: clamp(1.1rem, 2.2vw, 1.6rem); display: grid; gap: .45rem; align-content: start; }
.mb-kachel__titel {
  margin: 0;
  font-size: var(--mb-bd-titel-fs, var(--wp--preset--font-size--kachel, 1.13rem));
  font-weight: var(--mb-bd-titel-fw, 700);
  line-height: var(--mb-bd-titel-lh, 1.32);
  letter-spacing: var(--mb-bd-titel-ls, -.012em);
  text-transform: var(--mb-bd-titel-tt, none);
  color: var(--mb-bd-titel-fc, inherit);
  /* „Bausachverstaendigenleistungen" ist 29 Zeichen lang. Ohne Umbruch
     steht es ueber dem Kartenrand. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.mb-kachel__titel a { text-decoration: none; }
.mb-kachel__titel a:hover { color: var(--wp--preset--color--gruen, #2C4641); }
.mb-abschnitt .mb-kachel__beschreibung,
.mb-kachel__beschreibung {
  margin: 0;
  font-size: var(--mb-bd-text-fs, var(--wp--preset--font-size--klein, .875rem));
  font-weight: var(--mb-bd-text-fw, 400);
  line-height: var(--mb-bd-text-lh, 1.6);
  letter-spacing: var(--mb-bd-text-ls, normal);
  text-transform: var(--mb-bd-text-tt, none);
  color: var(--mb-bd-text-fc, var(--wp--preset--color--schrift-weich, #6B7570));
}

/* ---------------------------------------------------------------------------
   6. Kennzahlen / Erfahrungsblock — eine Leiste statt vier Kästen
   ------------------------------------------------------------------------ */
.mb-erfahrung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 1px;
  background: var(--wp--preset--color--linie, #E4E8E6);
  border-radius: var(--lb-r);
  overflow: hidden;
  box-shadow: var(--lb-schatten);
}
.mb-erfahrung__zelle { background: var(--lb-karte); padding: 1.15rem 1.25rem; display: grid; gap: .25rem; align-content: start; }
.mb-kennzahl {
  font-size: var(--wp--preset--font-size--zahl, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--schrift, #141617);
}
.mb-kennzahl-text {
  font-size: var(--wp--preset--font-size--klein, .875rem);
  line-height: 1.5;
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}
.mb-erfahrung__fussnote {
  margin-top: 1rem;
  font-size: var(--wp--preset--font-size--klein, .875rem);
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}

/* ---------------------------------------------------------------------------
   7. Vorher / Nachher
   ------------------------------------------------------------------------ */
.mb-vn {
  background: var(--lb-karte);
  border-radius: var(--lb-r);
  box-shadow: var(--lb-schatten);
  overflow: hidden;
}
.mb-vn__bilder { border-radius: var(--lb-r) var(--lb-r) 0 0; }
.mb-vn__marke {
  top: .7rem;
  padding: .32em .7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #16211F;
  font-size: .78rem;
  font-weight: 650;
  backdrop-filter: blur(6px);
}
.mb-vn__marke--links  { left: .7rem; }
.mb-vn__marke--rechts { right: .7rem; background: var(--wp--preset--color--gold, #FFBB00); color: #241A00; }
/* Keine Regeln fuer .mb-vn__klammer: Das ist der Rahmen mit dem Vorher-Bild,
   nicht die Trennlinie. Hier stand bis 6.6.2 „width: 3px" — damit war das
   Vorher-Bild nur 3 px breit und praktisch unsichtbar, man sah nur das
   Nachher-Bild. Linie und Knauf zeichnet .mb-vn__griff in theme.css. */
.mb-vn__text { padding: 1.05rem 1.2rem 1.3rem; display: grid; gap: .3rem; align-content: start; }
.mb-vn__ort {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--gruen-mittel, #4C6A64);
}
.mb-vn__titel { margin: 0; font-size: var(--wp--preset--font-size--kachel, 1.13rem); font-weight: 700; letter-spacing: -.012em; }
.mb-vn__beschreibung { margin: 0; font-size: var(--wp--preset--font-size--klein, .875rem); color: var(--wp--preset--color--schrift-weich, #6B7570); }

/* ---------------------------------------------------------------------------
   8. Ablauf: der goldene Faden
   ------------------------------------------------------------------------ */
.mb-schritte { position: relative; display: grid; gap: 1.6rem; align-items: start; }
.mb-schritte::before {
  content: "";
  position: absolute;
  left: 21px; top: 24px; bottom: 24px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--wp--preset--color--gold, #FFBB00), rgba(255, 187, 0, .2));
}
.mb-schritt { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .3rem 1.1rem; align-content: start; }

/*
 * Die Marke zeigt Nummer und Symbol zusammen: die Zahl sagt, der wievielte
 * Schritt es ist, das Zeichen sagt, worum es geht. Vorher war es ein
 * Entweder-oder — mit Symbol verschwand die Reihenfolge.
 */
.mb-schritt__marke {
  grid-row: span 2;
  display: grid;
  justify-items: center;
  gap: .4rem;
  align-content: start;
}
.mb-schrittnummer {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lb-karte);
  border: 2px solid var(--wp--preset--color--gold, #FFBB00);
  font-weight: 750; font-size: .875rem;
  box-shadow: var(--lb-schatten);
}
.mb-schritt__symbol {
  display: grid; place-items: center;
  line-height: 0;
  color: var(--mb-bd-symbolfarbe, var(--wp--preset--color--gruen-mittel, #4C6A64));
}
.mb-schritt__symbol:empty { display: none; }
.mb-schritt__titel { margin: 0; font-size: var(--wp--preset--font-size--kachel, 1.13rem); font-weight: 700; letter-spacing: -.012em; }
.mb-schritt__text {
  font-size: var(--mb-bd-text-fs, var(--wp--preset--font-size--klein, .875rem));
  font-weight: var(--mb-bd-text-fw, 400);
  line-height: var(--mb-bd-text-lh, 1.6);
  letter-spacing: var(--mb-bd-text-ls, normal);
  text-transform: var(--mb-bd-text-tt, none);
  color: var(--mb-bd-text-fc, var(--wp--preset--color--schrift-weich, #6B7570));
}
@media (min-width: 900px) {
  .mb-schritte { grid-template-columns: repeat(var(--mb-bd-spalten, 4), minmax(0, 1fr)); gap: var(--mb-bd-luecke, 1.2rem); }
  .mb-schritte { --mb-schritte-vorgabe: 4; }
  .mb-schritte::before { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--wp--preset--color--gold, #FFBB00), rgba(255, 187, 0, .2)); }
  .mb-schritt { grid-template-columns: 1fr; }
  .mb-schritt__marke {
    grid-row: auto;
    justify-items: start;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: .55rem;
    margin-bottom: .7rem;
  }
}

/* ---------------------------------------------------------------------------
   9. Fragen
   ------------------------------------------------------------------------ */
.mb-fragen { display: grid; gap: .6rem; }
.mb-fragen details, .mb-frage {
  background: var(--lb-karte);
  border: 0;
  border-radius: var(--lb-r);
  box-shadow: var(--lb-schatten);
  overflow: hidden;
}
.mb-fragen summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer; list-style: none;
  font-size: var(--wp--preset--font-size--kachel, 1.13rem);
  font-weight: 700; line-height: 1.35; letter-spacing: -.012em;
}
.mb-fragen summary::-webkit-details-marker { display: none; }
.mb-fragen summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--wp--preset--color--gruen, #2C4641);
  border-bottom: 2.5px solid var(--wp--preset--color--gruen, #2C4641);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.mb-fragen details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mb-frage__antwort { padding: 0 1.25rem 1.3rem; max-width: 76ch; }
.mb-frage__antwort p { font-size: var(--wp--preset--font-size--klein, .875rem); line-height: 1.7; }
.mb-frage__antwort p + p { margin-top: .7em; }

/* ---------------------------------------------------------------------------
   10. Team
   ------------------------------------------------------------------------ */
.mb-team {
  display: grid;
  gap: var(--mb-bd-luecke, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  align-items: start;
}
@media (min-width: 1024px) {
  .mb-team { grid-template-columns: repeat(var(--mb-bd-spalten, 2), minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .mb-team { grid-template-columns: repeat(var(--mb-bd-spalten, 2), minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .mb-team { grid-template-columns: repeat(var(--mb-bd-spalten, 1), minmax(0, 1fr)); }
}
.mb-person {
  background: var(--lb-karte);
  border-radius: var(--lb-r);
  box-shadow: var(--lb-schatten);
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
.mb-person__bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mb-person__text { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: .3rem; align-content: start; }
.mb-person__name { margin: 0; font-size: var(--wp--preset--font-size--h-3, 1.5rem); font-weight: 750; letter-spacing: -.018em; }
.mb-person__rolle {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--wp--preset--color--gruen-mittel, #4C6A64);
  order: -1;
}
.mb-person__beschreibung { font-size: var(--wp--preset--font-size--klein, .875rem); line-height: 1.6; color: var(--wp--preset--color--schrift-weich, #6B7570); }

/* ---------------------------------------------------------------------------
   11. Schlussaufruf
   ------------------------------------------------------------------------ */
.mb-cta__titel {
  margin: 0;
  font-size: var(--mb-bd-titel-fs, var(--wp--preset--font-size--h-2, 2.6rem));
  font-weight: var(--mb-bd-titel-fw, 750);
  line-height: var(--mb-bd-titel-lh, 1.08);
  letter-spacing: var(--mb-bd-titel-ls, -.028em);
  text-transform: var(--mb-bd-titel-tt, none);
  color: var(--mb-bd-titel-fc, inherit);
}
.mb-cta__lead, .mb-cta__text { max-width: 56ch; margin-top: 1rem; }

/* ---------------------------------------------------------------------------
   12. Faktenkasten — die Seite maschinenlesbar machen
   ------------------------------------------------------------------------ */
.mb-fakten__kopf {
  margin: 0;
  padding: .85rem 1.2rem;
  background: var(--wp--preset--color--gruen, #2C4641);
  color: #F2F6F4;
  border-radius: var(--lb-r) var(--lb-r) 0 0;
  font-size: var(--wp--preset--font-size--klein, .875rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mb-fakten {
  margin: 0;
  align-content: start;
  border: 2px solid var(--wp--preset--color--gruen, #2C4641);
  border-top: 0;
  border-radius: 0 0 var(--lb-r) var(--lb-r);
  overflow: hidden;
  background: var(--wp--preset--color--linie, #E4E8E6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
}
.mb-fakten__pos { background: var(--lb-karte); padding: .85rem 1.2rem; display: grid; gap: .15rem; align-content: start; }
.mb-fakten__label {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}
.mb-fakten__wert { margin: 0; font-size: var(--wp--preset--font-size--klein, .875rem); font-weight: 600; line-height: 1.5; }

/* --- Material und Farben ------------------------------------------------ */
/* align-items: start ist hier kein Feinschliff, sondern Pflicht: Sonst
   zieht die hoehere Spalte die niedrigere auf ihre Hoehe, und deren
   Rasterzeilen laufen meterweit auseinander. */
.mb-material { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 880px) { .mb-material { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mb-ral { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .7rem; align-items: start; align-content: start; }
.mb-ral__feld { display: grid; gap: .3rem; min-width: 0; align-content: start; }
.mb-ral__fleck {
  display: block;
  aspect-ratio: 5 / 3;
  border-radius: calc(var(--lb-r) * .6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09), var(--lb-schatten);
}
.mb-ral__name { font-size: .78rem; font-weight: 650; line-height: 1.35; }
.mb-ral__nr   { font-size: .78rem; color: var(--wp--preset--color--schrift-weich, #6B7570); }

.mb-daten {
  margin: 0;
  display: grid; gap: 1px; align-content: start;
  background: var(--wp--preset--color--linie, #E4E8E6);
  border: 1px solid var(--wp--preset--color--linie, #E4E8E6);
  border-radius: var(--lb-r);
  overflow: hidden;
}
.mb-daten__zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;
  align-items: baseline;
  padding: .85rem 1.1rem;
  background: var(--lb-karte);
}
.mb-daten__zeile dt { font-size: var(--wp--preset--font-size--klein, .875rem); color: var(--wp--preset--color--schrift-weich, #6B7570); }
.mb-daten__zeile dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.mb-erklaerung {
  margin-top: 1.2rem;
  max-width: 72ch;
  font-size: var(--wp--preset--font-size--klein, .875rem);
  line-height: 1.7;
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}
.mb-erklaerung strong { color: var(--wp--preset--color--schrift, #141617); }

/* --- Grenzen: was wir nicht machen -------------------------------------- */
.mb-grenzen {
  display: grid; align-content: start;
  background: var(--lb-karte);
  border-radius: var(--lb-r);
  box-shadow: var(--lb-schatten);
  padding: .4rem 1.3rem;
}
.mb-grenze {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .2rem .8rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--wp--preset--color--linie, #E4E8E6);
}
.mb-grenze:last-child { border-bottom: 0; }
.mb-grenze__x { grid-row: span 2; color: var(--wp--preset--color--schrift-weich, #6B7570); margin-top: .2em; }
.mb-grenze b { font-weight: 700; }
.mb-grenze p {
  grid-column: 2; margin: 0;
  font-size: var(--wp--preset--font-size--klein, .875rem);
  line-height: 1.6;
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}

/* Platzhalter für fehlende Betriebsangaben */
.mb-pruefen {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 4px;
  background: #FFF3CD;
  color: #6B4E00;
  font-weight: 650;
}

/* ---------------------------------------------------------------------------
   13. Lichtfläche — Bildersatz, solange keine Fotos da sind
   ------------------------------------------------------------------------ */
.mb-licht {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%,
      color-mix(in srgb, var(--mb-licht, #FFD88A) 85%, #fff) 0%,
      color-mix(in srgb, var(--mb-licht, #FFD88A) 30%, var(--mb-ton, #8FAFA4)) 38%,
      var(--mb-ton, #8FAFA4) 72%,
      color-mix(in srgb, var(--mb-ton, #8FAFA4) 55%, #16211F) 100%);
}
.mb-licht::before {
  content: "";
  position: absolute;
  inset: -30% -45%;
  background-image:
    repeating-linear-gradient(98deg, rgba(255,255,255,.3) 0 3px, transparent 3px 76px),
    repeating-linear-gradient(8deg, rgba(27,43,40,.14) 0 2px, transparent 2px 120px);
  transform: perspective(1000px) rotateX(52deg) scale(1.6);
  transform-origin: 70% 10%;
  opacity: .72;
}
.mb-licht--morgen { --mb-ton: #A9C4BA; --mb-licht: #FFE9B8; }
.mb-licht--mittag { --mb-ton: #8FAFA4; --mb-licht: #FFF3CF; }
.mb-licht--abend  { --mb-ton: #6E8C84; --mb-licht: #FFC778; }
.mb-licht--holz   { --mb-ton: #A98C6B; --mb-licht: #FFE2AE; }
.mb-licht--stahl  { --mb-ton: #8C9BA3; --mb-licht: #E8F2FA; }
.mb-licht--grau   { --mb-ton: #9B9B94; --mb-licht: #D8D4CB; }

/* ---------------------------------------------------------------------------
   14. Kopf- und Fußbereich
   ------------------------------------------------------------------------ */
.wp-site-blocks > header.wp-block-template-part,
.is-style-mb-kopf {
  background: color-mix(in srgb, var(--lb-papier) 88%, transparent);
  /* Kein backdrop-filter — Grund siehe theme.css, Abschnitt 03 Kopfbereich:
     Er sperrte das Klappmenue auf Tablet und Handy in die Kopfleiste. */
  border-bottom: 1px solid var(--wp--preset--color--linie, #E4E8E6);
}
.is-style-mb-topbar { font-size: .8rem; }
.wp-site-blocks > footer.wp-block-template-part {
  background: var(--wp--preset--color--gruen-dunkel, #1B2B28);
  color: rgba(242, 246, 244, .82);
}

/* ---------------------------------------------------------------------------
   15. Handlungsleiste unten — auf dem Handy immer erreichbar
   ------------------------------------------------------------------------ */
.mb-aktionsleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--wp--preset--color--linie, #E4E8E6);
  border-top: 1px solid var(--wp--preset--color--linie, #E4E8E6);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -8px 28px rgba(27, 43, 40, .1);
}
.mb-aktionsleiste a {
  display: grid; justify-items: center; gap: .2rem;
  padding: .7rem .5rem;
  background: var(--lb-karte);
  color: var(--wp--preset--color--schrift, #141617);
  font-size: .78rem; font-weight: 700; line-height: 1.3;
  text-decoration: none;
}
.mb-aktionsleiste a:active { background: var(--wp--preset--color--gruen-hell, #EEF3F1); }
.mb-aktionsleiste svg { width: 20px; height: 20px; }
.mb-aktionsleiste .mb-aktionsleiste--gold { background: var(--wp--preset--color--gold, #FFBB00); color: #241A00; }
@media (min-width: 1000px) { .mb-aktionsleiste { display: none; } }
@media (max-width: 999px) { body.mb-hat-aktionsleiste { padding-bottom: 76px; } }
body.mb-builder-aktiv .mb-aktionsleiste { display: none; }

/* ---------------------------------------------------------------------------
   16. Bewegung — nur Lage, nie Deckkraft
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mb-abschnitt > .mb-abschnitt__innen {
      animation: mb-heben linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
    .mb-hero > .mb-abschnitt__innen { animation: none; }
  }
  @keyframes mb-heben {
    from { transform: translateY(18px); }
    to   { transform: none; }
  }
}
body.mb-builder-aktiv .mb-abschnitt > .mb-abschnitt__innen { animation: none; transform: none; }

/* ---------------------------------------------------------------------------
   17. Deutsche Komposita: nichts darf aus seinem Feld laufen
   ------------------------------------------------------------------------ */
.mb-kachel, .mb-erfahrung__zelle, .mb-schritt, .mb-person, .mb-vn { min-width: 0; }
.mb-kachel__titel, .mb-schritt__titel, .mb-person__name, .mb-vn__titel,
.mb-sektionskopf h2, .mb-sektionskopf__titel, .mb-hero__titel, .mb-cta__titel { overflow-wrap: break-word; }

/* ---------------------------------------------------------------------------
   18. Website-Titel im Kopfbereich
   Ausgeblendet, weil das Logo die Marke traegt. Wieder einschaltbar unter
   Design → Customizer → Kopfbereich und Logo.
   ------------------------------------------------------------------------ */
.wp-site-blocks > header .wp-block-site-title,
.is-style-mb-kopf .wp-block-site-title { display: none; }

/* ===========================================================================
   19. Die Einstellungen aus dem Builder
   Jede Einstellung eines Abschnitts kommt als CSS-Variable auf genau diesem
   Abschnitt an. Hier steht, was damit passiert. Alles mit Rückfall, damit ein
   leeres Feld nie etwas kaputt macht.
   ======================================================================== */

/* --- Fläche -------------------------------------------------------- */
.mb-abschnitt.mb-grund-eigen { background: var(--mb-bd-grund, var(--lb-papier)); }
.mb-abschnitt[style*="--mb-bd-schrift"] { color: var(--mb-bd-schrift); }

.mb-abschnitt.mb-hat-grundbild { position: relative; isolation: isolate; }
.mb-abschnitt.mb-hat-grundbild::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--mb-bd-grundbild);
  background-size: cover;
  background-position: center;
}
.mb-abschnitt.mb-hat-grundbild::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(16, 24, 22, var(--mb-bd-grundbild-dim, .45));
}
.mb-abschnitt.mb-hat-grundbild { color: #F2F6F4; }
.mb-abschnitt.mb-hat-grundbild .mb-sektionskopf h2 { color: #FFFFFF; }

/* --- Maße ---------------------------------------------------------- */
.mb-abschnitt.mb-luft-keiner { padding-block: 0; }
.mb-abschnitt.mb-luft-eng    { padding-block: clamp(26px, 3.5vw, 52px); }
.mb-abschnitt.mb-luft-normal { padding-block: clamp(52px, 7vw, 108px); }
.mb-abschnitt.mb-luft-weit   { padding-block: clamp(72px, 9vw, 148px); }
.mb-abschnitt.mb-luft-eigen  {
  padding-top: var(--mb-bd-oben, clamp(52px, 7vw, 108px));
  padding-bottom: var(--mb-bd-unten, clamp(52px, 7vw, 108px));
}

.mb-abschnitt.mb-breite-schmal .mb-abschnitt__innen { max-width: 860px; }
.mb-abschnitt.mb-breite-normal .mb-abschnitt__innen { max-width: 1080px; }
.mb-abschnitt.mb-breite-breit  .mb-abschnitt__innen { max-width: var(--lb-bahn); }
.mb-abschnitt.mb-breite-voll   .mb-abschnitt__innen { max-width: none; }

/* Eckenrundung und Schatten schlagen auf alle Bauteile im Abschnitt durch. */
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-kachel,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-person,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-vn,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-erfahrung,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-fragen details,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-grenzen,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-daten,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-ral__fleck,
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-fakten { border-radius: var(--mb-bd-rundung); }
.mb-abschnitt[style*="--mb-bd-rundung"] .mb-fakten__kopf { border-radius: var(--mb-bd-rundung) var(--mb-bd-rundung) 0 0; }

.mb-abschnitt[style*="--mb-bd-schatten"] .mb-kachel,
.mb-abschnitt[style*="--mb-bd-schatten"] .mb-person,
.mb-abschnitt[style*="--mb-bd-schatten"] .mb-vn,
.mb-abschnitt[style*="--mb-bd-schatten"] .mb-erfahrung,
.mb-abschnitt[style*="--mb-bd-schatten"] .mb-fragen details,
.mb-abschnitt[style*="--mb-bd-schatten"] .mb-grenzen { box-shadow: var(--mb-bd-schatten); }

/* --- Anordnung ------------------------------------------------------ */
.mb-abschnitt.mb-richtung-links  { text-align: left; }
.mb-abschnitt.mb-richtung-mitte  { text-align: center; }
.mb-abschnitt.mb-richtung-rechts { text-align: right; }
.mb-abschnitt.mb-richtung-mitte .mb-sektionskopf { margin-inline: auto; justify-items: center; }
.mb-abschnitt.mb-richtung-mitte .mb-knopfreihe   { justify-content: center; }
.mb-abschnitt.mb-richtung-rechts .mb-knopfreihe  { justify-content: flex-end; }
.mb-abschnitt.mb-richtung-mitte .mb-schritt,
.mb-abschnitt.mb-richtung-mitte .mb-kachel__text { justify-items: center; }

.mb-abschnitt.mb-umkehren .mb-zweispalt { direction: rtl; }
.mb-abschnitt.mb-umkehren .mb-zweispalt > * { direction: ltr; }

@media (min-width: 900px) {
  .mb-abschnitt[style*="--mb-bd-spalten"] .mb-kacheln,
  .mb-abschnitt[style*="--mb-bd-spalten"] .mb-team,
  .mb-abschnitt[style*="--mb-bd-spalten"] .mb-schritte,
  .mb-abschnitt[style*="--mb-bd-spalten"] .mb-erfahrung,
  .mb-abschnitt[style*="--mb-bd-spalten"] .mb-fakten__liste,
  .mb-abschnitt[style*="--mb-bd-spalten"] .mb-fakten {
    grid-template-columns: repeat(var(--mb-bd-spalten), minmax(0, 1fr));
  }
}
.mb-abschnitt[style*="--mb-bd-luecke"] .mb-kacheln,
.mb-abschnitt[style*="--mb-bd-luecke"] .mb-team,
.mb-abschnitt[style*="--mb-bd-luecke"] .mb-schritte,
.mb-abschnitt[style*="--mb-bd-luecke"] .mb-ral,
.mb-abschnitt[style*="--mb-bd-luecke"] .mb-fragen { gap: var(--mb-bd-luecke); }

.mb-abschnitt[style*="--mb-bd-bildformat"] .mb-kachel__bild,
.mb-abschnitt[style*="--mb-bd-bildformat"] .mb-person__bild,
.mb-abschnitt[style*="--mb-bd-bildformat"] .mb-bild__bild { aspect-ratio: var(--mb-bd-bildformat); object-fit: cover; }

/* --- Symbole -------------------------------------------------------- */
.mb-symbol {
  width: var(--mb-bd-symbol, 24px);
  height: var(--mb-bd-symbol, 24px);
  color: var(--mb-bd-symbolfarbe, var(--wp--preset--color--gruen, #2C4641));
  flex: 0 0 auto;
}
.mb-symbol--bild { object-fit: contain; }
.mb-abschnitt.mb-grund-dunkel .mb-symbol,
.mb-abschnitt.mb-grund-gruen .mb-symbol,
.mb-abschnitt.mb-hat-grundbild .mb-symbol { color: var(--mb-bd-symbolfarbe, var(--wp--preset--color--gold, #FFBB00)); }
.mb-symbolfeld {
  display: grid; place-items: center;
  width: calc(var(--mb-bd-symbol, 24px) * 1.9);
  height: calc(var(--mb-bd-symbol, 24px) * 1.9);
  border-radius: 50%;
  background: var(--wp--preset--color--gruen-hell, #EEF3F1);
  flex: 0 0 auto;
}
.mb-abschnitt.mb-grund-dunkel .mb-symbolfeld,
.mb-abschnitt.mb-grund-gruen .mb-symbolfeld,
.mb-abschnitt.mb-hat-grundbild .mb-symbolfeld { background: rgba(255, 255, 255, .12); }

/* --- Typografie je Ebene --------------------------------------------
 *
 * Achtung, hier lag ein Fehler: Ein Sammelblock setzte fuer alle
 * Ueberschriften `font-size: var(--mb-bd-titel-fs, inherit)`. Solange im
 * Builder keine Groesse eingestellt ist, bleibt die Variable undefiniert —
 * und `inherit` holt dann die 16 px vom Koerpertext. Jede Ueberschrift der
 * Seite war 16 px gross.
 *
 * Deshalb stehen die Variablen jetzt dort, wo das Element ohnehin gestaltet
 * wird, jeweils mit dem eigenen Vorgabewert als Rueckfall. Hier bleibt nur,
 * was keine eigene Regel hat.
 * ------------------------------------------------------------------- */
.mb-abschnitt .mb-freitext {
  font-size: var(--mb-bd-text-fs, var(--wp--preset--font-size--normal, 1rem));
  font-weight: var(--mb-bd-text-fw, 400);
  line-height: var(--mb-bd-text-lh, 1.7);
  letter-spacing: var(--mb-bd-text-ls, normal);
  text-transform: var(--mb-bd-text-tt, none);
  color: var(--mb-bd-text-fc, inherit);
}

/* --- Zweispalter mit tauschbarer Reihenfolge ------------------------- */
.mb-zweispalt { display: grid; gap: var(--mb-bd-luecke, clamp(28px, 4vw, 56px)); align-items: center; }
@media (min-width: 900px) { .mb-zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* --- Kopfbereich schliesst direkt an die Kopfzeile an ----------------
 *
 * WordPress setzt ueber den Blockabstand aus theme.json auf jedes Geschwister
 * in .wp-site-blocks einen Aussenabstand oben. Zwischen Kopfzeile und Inhalt
 * entstand dadurch ein heller Streifen von 28 px, der den Kopfbereich wie ein
 * eingeschobenes Feld aussehen liess. Hier nicht erwuenscht.
 * ------------------------------------------------------------------- */
.wp-site-blocks > main { margin-block-start: 0; }

/* --- Sichtbarkeit ---------------------------------------------------- */
@media (max-width: 599px)  { .mb-aus-handy { display: none !important; } }
@media (max-width: 899px)  { .mb-aus-tablet { display: none !important; } }
@media (min-width: 900px)  { .mb-aus-desktop { display: none !important; } }

/* =========================================================================
 * 20. Symbole an ihren Plätzen
 *
 * Die Grundgrösse und die Farbe kommen aus Abschnitt 19 (--mb-bd-symbol,
 * --mb-bd-symbolfarbe). Hier steht nur, wo das Zeichen sitzt.
 * ====================================================================== */

.mb-sektionskopf__symbol,
.mb-kachel__symbol,
.mb-erfahrung__symbol,
.mb-schritt__symbol {
  display: inline-grid;
  place-items: center;
  line-height: 0;
}

/* Über der Überschrift eines Abschnittskopfs. */
.mb-sektionskopf__symbol {
  margin-bottom: .6rem;
  width: calc(var(--mb-bd-symbol, 24px) * 2.1);
  height: calc(var(--mb-bd-symbol, 24px) * 2.1);
  border-radius: var(--wp--custom--radius--m, 16px);
  background: color-mix(in srgb, var(--wp--preset--color--gold, #FFBB00) 18%, transparent);
}
.mb-abschnitt__innen.mb-mittig .mb-sektionskopf__symbol { margin-inline: auto; }

/* In der Kachel, direkt über dem Titel. */
.mb-kachel__symbol {
  margin-bottom: .5rem;
  width: calc(var(--mb-bd-symbol, 24px) * 1.7);
  height: calc(var(--mb-bd-symbol, 24px) * 1.7);
  border-radius: var(--wp--custom--radius--s, 10px);
  background: color-mix(in srgb, var(--wp--preset--color--gruen, #2C4641) 8%, transparent);
}

/* Über einer Kennzahl. */
.mb-erfahrung__symbol { margin-bottom: .35rem; }

/* Statt der Schrittnummer. */
.mb-schritt__symbol {
  width: calc(var(--mb-bd-symbol, 24px) * 2);
  height: calc(var(--mb-bd-symbol, 24px) * 2);
  border-radius: 999px;
  border: 2px solid currentColor;
}

/* Im Knopf, vor der Beschriftung. */
.mb-knopf__symbol {
  width: 1.15em;
  height: 1.15em;
  margin-right: .45em;
  vertical-align: -.18em;
  color: currentColor;
}

/* color-mix kennen aeltere Browser nicht — dann bleibt der Hintergrund weg. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .mb-sektionskopf__symbol,
  .mb-kachel__symbol { background: rgba(44, 70, 65, .07); }
}

/* --- Abschnittskopf mit Bild daneben ---------------------------------- */
.mb-kopfbild { margin: 0; }
.mb-kopfbild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mb-bd-bildformat, 4 / 3);
  object-fit: cover;
  border-radius: var(--mb-bd-rundung, var(--lb-r));
  box-shadow: var(--mb-bd-schatten, var(--lb-schatten));
}
.mb-zweispalt .mb-sektionskopf { margin-bottom: 0; max-width: none; }
/* „Bild links" kehrt nur die Anzeige um — die Vorlesereihenfolge bleibt. */
@media (min-width: 900px) {
  .mb-zweispalt--umkehren { direction: rtl; }
  .mb-zweispalt--umkehren > * { direction: ltr; }
}

/* --- Nur ein schwebendes Element unten ------------------------------
 *
 * Auf dem Handy liegt die Aktionsleiste am unteren Rand. Der schwebende
 * WhatsApp-Knopf saesse direkt darauf und verdeckt „Anrufen". Da die Leiste
 * WhatsApp ohnehin enthaelt, faellt der Knopf dort weg.
 * ------------------------------------------------------------------- */
body.mb-hat-aktionsleiste .mb-wa-schweber { display: none !important; }

/* =========================================================================
 * 21. Desktop, Tablet, Handy — getrennt einstellbar
 *
 * Jedes Dreifachfeld schreibt bis zu drei Variablen auf den Abschnitt:
 * --mb-bd-spalten-d, -t und -h. Hier wird daraus je Umbruchpunkt die eine
 * Variable, die der Rest des Stylesheets schon kennt. Nichts weiter unten
 * muss davon wissen.
 *
 * Die Kette liest sich von innen nach aussen: Handy nimmt -h, sonst -d;
 * Tablet nimmt -t, sonst -d; Desktop nimmt -d. Ein nicht gesetztes Geraet
 * erbt dadurch von allein den Desktopwert.
 *
 * Umbruchpunkte: Handy bis 599, Tablet 600 bis 1023, Desktop ab 1024.
 * ====================================================================== */

.mb-abschnitt {
  /*
   * Spalten erben bewusst NICHT nach unten.
   *
   * Alles andere hier darf das: Eine Schriftgroesse von 2.4rem ist auf dem
   * Handy vielleicht gross, aber nicht kaputt. Drei Spalten auf 375 px sind
   * kaputt — jede Kachel waere 93 px breit. Ist fuer das Geraet nichts
   * gesetzt, bleibt die Variable leer, und jedes Raster nimmt weiter unten
   * seinen eigenen, sinnvollen Vorgabewert.
   */
  --mb-bd-spalten:  var(--mb-bd-spalten-h);
  --mb-bd-luecke:   var(--mb-bd-luecke-h,   var(--mb-bd-luecke-d));
  --mb-bd-symbol:   var(--mb-bd-symbol-h,   var(--mb-bd-symbol-d, 24px));
  --mb-bd-titel-fs: var(--mb-bd-titel-fs-h, var(--mb-bd-titel-fs-d));
  --mb-bd-text-fs:  var(--mb-bd-text-fs-h,  var(--mb-bd-text-fs-d));
}

@media (min-width: 600px) {
  .mb-abschnitt {
    --mb-bd-spalten:  var(--mb-bd-spalten-t);
    --mb-bd-luecke:   var(--mb-bd-luecke-t,   var(--mb-bd-luecke-d));
    --mb-bd-symbol:   var(--mb-bd-symbol-t,   var(--mb-bd-symbol-d, 24px));
    --mb-bd-titel-fs: var(--mb-bd-titel-fs-t, var(--mb-bd-titel-fs-d));
    --mb-bd-text-fs:  var(--mb-bd-text-fs-t,  var(--mb-bd-text-fs-d));
  }
}

@media (min-width: 1024px) {
  .mb-abschnitt {
    --mb-bd-spalten:  var(--mb-bd-spalten-d);
    --mb-bd-luecke:   var(--mb-bd-luecke-d);
    --mb-bd-symbol:   var(--mb-bd-symbol-d, 24px);
    --mb-bd-titel-fs: var(--mb-bd-titel-fs-d);
    --mb-bd-text-fs:  var(--mb-bd-text-fs-d);
  }
}

/* --- Abstand oben und unten je Geraet --------------------------------
 * Die Klassen mb-luft-t-* und mb-luft-h-* gelten nur in ihrem Fenster und
 * stechen die Desktopklasse dort aus.
 * ------------------------------------------------------------------- */
@media (max-width: 599px) {
  .mb-abschnitt.mb-luft-h-keiner { padding-block: 0; }
  .mb-abschnitt.mb-luft-h-eng    { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  .mb-abschnitt.mb-luft-h-normal { padding-block: clamp(3rem, 1.8rem + 5vw, 5.5rem); }
  .mb-abschnitt.mb-luft-h-weit   { padding-block: clamp(4rem, 2.2rem + 7vw, 7.5rem); }
  .mb-abschnitt.mb-luft-h-eigen  { padding-top: var(--mb-bd-oben, 0); padding-bottom: var(--mb-bd-unten, 0); }
  .mb-abschnitt.mb-richtung-h-links  { text-align: left; }
  .mb-abschnitt.mb-richtung-h-mitte  { text-align: center; }
  .mb-abschnitt.mb-richtung-h-rechts { text-align: right; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .mb-abschnitt.mb-luft-t-keiner { padding-block: 0; }
  .mb-abschnitt.mb-luft-t-eng    { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  .mb-abschnitt.mb-luft-t-normal { padding-block: clamp(3rem, 1.8rem + 5vw, 5.5rem); }
  .mb-abschnitt.mb-luft-t-weit   { padding-block: clamp(4rem, 2.2rem + 7vw, 7.5rem); }
  .mb-abschnitt.mb-luft-t-eigen  { padding-top: var(--mb-bd-oben, 0); padding-bottom: var(--mb-bd-unten, 0); }
  .mb-abschnitt.mb-richtung-t-links  { text-align: left; }
  .mb-abschnitt.mb-richtung-t-mitte  { text-align: center; }
  .mb-abschnitt.mb-richtung-t-rechts { text-align: right; }
}

/* =========================================================================
 * 22. Handlungsfläche im Kopfbereich
 *
 * Bewertung, Umriss-Knopf, WhatsApp und der gefüllte Knopf. Die Texte und
 * Ziele stehen im Customizer, hier steht nur die Form.
 * ====================================================================== */

.mb-kopf__aktionen {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

/* --- Knöpfe ---------------------------------------------------------- */
.mb-kopfknopf {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .58rem 1.05rem;
  border: 2px solid transparent;
  border-radius: var(--wp--custom--radius--knopf, 999px);
  font-size: .85rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .14s, border-color .14s, color .14s, transform .14s;
}
.mb-kopfknopf:hover,
.mb-kopfknopf:focus-visible { transform: translateY(-1px); }
.mb-kopfknopf:focus-visible {
  outline: 3px solid var(--wp--preset--color--gold, #FFBB00);
  outline-offset: 2px;
}

.mb-kopfknopf--umriss {
  border-color: var(--wp--preset--color--gruen, #2C4641);
  color: var(--wp--preset--color--gruen, #2C4641);
  background: transparent;
}
.mb-kopfknopf--umriss:hover,
.mb-kopfknopf--umriss:focus-visible {
  background: var(--wp--preset--color--gruen, #2C4641);
  color: #FFFFFF;
}

/* WhatsApp in CI, nicht im Boten-Grün. Das Zeichen genügt zum Erkennen. */
.mb-kopfknopf--wa {
  background: var(--wp--preset--color--gruen-hell, #EEF3F1);
  color: var(--wp--preset--color--gruen, #2C4641);
  padding-left: .85rem;
}
.mb-kopfknopf--wa:hover,
.mb-kopfknopf--wa:focus-visible {
  background: var(--wp--preset--color--gruen, #2C4641);
  color: #FFFFFF;
}
.mb-kopfknopf__zeichen { width: 1.1em; height: 1.1em; flex: none; }

.mb-kopfknopf--voll {
  background: var(--wp--preset--color--gold, #FFBB00);
  color: #1A1A1A;
}
.mb-kopfknopf--voll:hover,
.mb-kopfknopf--voll:focus-visible { background: #E0A400; color: #1A1A1A; }

/* --- Google-Bewertung ------------------------------------------------ */
.mb-bewertung {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  font-size: .8rem;
  line-height: 1;
  white-space: nowrap;
}
.mb-bewertung--kopf { margin-right: .35rem; }
.mb-bewertung__zahl { font-weight: 750; }
.mb-bewertung__anzahl { color: var(--wp--preset--color--schrift-weich, #6B7570); }
.mb-bewertung:hover .mb-bewertung__zahl { text-decoration: underline; }

.mb-sterne { display: inline-flex; gap: 1px; }
/*
 * Ein Stern als Maske: Die Füllung sitzt links, --mb-stern sagt, wie weit
 * sie reicht. Damit lassen sich auch halbe Sterne zeigen, ohne ein zweites
 * Bild zu laden.
 */
.mb-sterne__stern {
  width: 13px;
  height: 13px;
  background:
    linear-gradient(90deg,
      var(--wp--preset--color--gold, #FFBB00) var(--mb-stern, 0%),
      rgba(107, 117, 112, .3) var(--mb-stern, 0%));
  -webkit-mask: var(--mb-sternform) center / contain no-repeat;
  mask: var(--mb-sternform) center / contain no-repeat;
}
:root {
  --mb-sternform: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21.1 7 14.2 2 9.3l6.9-1z'/%3E%3C/svg%3E");
}

/* --- Platz schaffen, wenn es eng wird -------------------------------- */
@media (max-width: 1200px) {
  .mb-kopf__aktionen .mb-nur-desktop { display: none; }
}
@media (max-width: 599px) {
  .mb-kopfknopf { padding: .5rem .8rem; font-size: .8rem; }
  .mb-kopfknopf--wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mb-kopfknopf--wa { padding: .5rem; }
  .mb-kopfknopf--wa .mb-kopfknopf__zeichen { width: 1.25em; height: 1.25em; }
}

/* =========================================================================
 * 23. WhatsApp-Karten in der Miraubau-CI
 *
 * Vorher waren alle drei Karten im Boten-Grün — drei gleich laute Flächen
 * nebeneinander, und keine CI-Farbe weit und breit. Jetzt trägt jede Karte
 * einen eigenen Akzent aus der CI, und das Grün bleibt dort, wo es
 * hingehört: im Zeichen, damit der Kanal erkennbar bleibt.
 *
 * Reduziert heisst hier: keine Schatten, keine Füllfläche hinter dem
 * Zeichen, ein Haarstrich als Rahmen, ein Akzentbalken oben. Die Aufmerksam-
 * keit gehört dem Knopf.
 * ====================================================================== */

.mb-abschnitt .mb-wa {
  --mb-wa-akzent: var(--wp--preset--color--gruen, #2C4641);
  --mb-wa-schrift: #FFFFFF;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  padding: 1.5rem 1.35rem 1.35rem;
  background: var(--lb-karte, #FFFFFF);
  border: 1px solid var(--wp--preset--color--linie, #E4E8E6);
  border-radius: var(--mb-bd-rundung, var(--lb-r, 16px));
  box-shadow: none;
  overflow: hidden;
  align-content: start;
}

/* Der Akzent als Strich oben — kräftig genug zum Unterscheiden,
   zurückhaltend genug, um nicht mit dem Knopf zu konkurrieren. */
.mb-abschnitt .mb-wa::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mb-wa-akzent);
}

/* Die drei Anlässe. Gold führt, weil „Foto senden" die niedrigste Hürde hat. */
.mb-abschnitt .mb-wa--foto {
  --mb-wa-akzent: var(--wp--preset--color--gold, #FFBB00);
  --mb-wa-schrift: #1A1A1A;
}
.mb-abschnitt .mb-wa--angebot {
  --mb-wa-akzent: var(--wp--preset--color--gruen, #2C4641);
  --mb-wa-schrift: #FFFFFF;
}
.mb-abschnitt .mb-wa--termin {
  --mb-wa-akzent: var(--wp--preset--color--gruen-mittel, #4C6A64);
  --mb-wa-schrift: #FFFFFF;
}

/* Das Zeichen ohne Kreis darunter. Grün bleibt — daran erkennt man den
   Kanal, und genau dafür steht es da. */
.mb-abschnitt .mb-wa__zeichen {
  width: auto; height: auto;
  margin: 0;
  padding: 0;
  display: block;
  background: none;
  border-radius: 0;
  color: #25D366;
  line-height: 0;
}
.mb-abschnitt .mb-wa__zeichen svg { width: 22px; height: 22px; }

.mb-abschnitt .mb-wa__inhalt { display: grid; gap: .55rem; align-content: start; min-width: 0; }

.mb-abschnitt .mb-wa__titel {
  margin: 0;
  font-size: var(--wp--preset--font-size--kachel, 1.13rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--wp--preset--color--schrift, #141617);
}
.mb-abschnitt .mb-wa__text {
  margin: 0;
  font-size: var(--wp--preset--font-size--klein, .875rem);
  line-height: 1.6;
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}

/* Die Stichpunkte sind Nebensache: kleiner Punkt statt Pfeil. */
.mb-abschnitt .mb-wa__punkte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
}
.mb-abschnitt .mb-wa__punkte li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: .55rem;
  align-items: baseline;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}
.mb-abschnitt .mb-wa__punkte li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mb-wa-akzent);
  transform: translateY(-2px);
}

.mb-abschnitt .mb-wa__knopf {
  justify-self: start;
  margin-top: .25rem;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .62rem 1.15rem;
  border: 0;
  border-radius: var(--wp--custom--radius--knopf, 999px);
  background: var(--mb-wa-akzent);
  color: var(--mb-wa-schrift);
  font-size: .85rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition: filter .14s, transform .14s;
}
.mb-abschnitt .mb-wa__knopf::after { content: "→"; font-size: 1em; }
.mb-abschnitt .mb-wa__knopf:hover,
.mb-abschnitt .mb-wa__knopf:focus-visible {
  filter: brightness(.92);
  transform: translateY(-1px);
  color: var(--mb-wa-schrift);
}
.mb-abschnitt .mb-wa__knopf:focus-visible {
  outline: 3px solid var(--wp--preset--color--gold, #FFBB00);
  outline-offset: 2px;
}

/* Auf dunklem Grund dreht sich die Karte mit. */
.mb-abschnitt.mb-grund-gruen .mb-wa,
.mb-abschnitt.mb-grund-dunkel .mb-wa,
.mb-abschnitt.mb-hat-grundbild .mb-wa {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.mb-abschnitt.mb-grund-gruen .mb-wa__titel,
.mb-abschnitt.mb-grund-dunkel .mb-wa__titel,
.mb-abschnitt.mb-hat-grundbild .mb-wa__titel { color: #FFFFFF; }
.mb-abschnitt.mb-grund-gruen .mb-wa__text,
.mb-abschnitt.mb-grund-dunkel .mb-wa__text,
.mb-abschnitt.mb-hat-grundbild .mb-wa__text,
.mb-abschnitt.mb-grund-gruen .mb-wa__punkte li,
.mb-abschnitt.mb-grund-dunkel .mb-wa__punkte li,
.mb-abschnitt.mb-hat-grundbild .mb-wa__punkte li { color: rgba(255, 255, 255, .78); }
.mb-abschnitt.mb-grund-gruen .mb-wa--angebot,
.mb-abschnitt.mb-grund-dunkel .mb-wa--angebot {
  --mb-wa-akzent: var(--wp--preset--color--gold, #FFBB00);
  --mb-wa-schrift: #1A1A1A;
}

/* =========================================================================
 * 24. Kontaktformular als Abschnitt
 *
 * Das Formular selbst ist in theme.css gestaltet (.mb-form). Hier steht nur,
 * wie es im Abschnitt sitzt — und die Kontaktdaten daneben.
 * ====================================================================== */

.mb-anfrage { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }

/* Formular links, Daten rechts — erst, wenn beides nebeneinander passt. */
@media (min-width: 900px) {
  .mb-anfrage--zweispaltig { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}

.mb-anfrage__formular { min-width: 0; }
.mb-anfrage__formular .mb-sektionskopf { margin-bottom: clamp(20px, 2.5vw, 32px); }

.mb-anfrage__daten {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 30px);
  background: var(--lb-karte, #FFFFFF);
  border: 1px solid var(--wp--preset--color--linie, #E4E8E6);
  border-radius: var(--mb-bd-rundung, var(--lb-r, 16px));
}

.mb-kontaktdaten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.05rem;
  align-content: start;
}

.mb-kontaktdaten__pos {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}

.mb-kontaktdaten__symbol {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--wp--custom--radius--s, 10px);
  background: var(--wp--preset--color--gruen-hell, #EEF3F1);
  color: var(--mb-bd-symbolfarbe, var(--wp--preset--color--gruen, #2C4641));
  line-height: 0;
}

.mb-kontaktdaten__text { display: grid; gap: .1rem; min-width: 0; }

.mb-kontaktdaten__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--schrift-weich, #6B7570);
}

.mb-kontaktdaten__wert {
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--wp--preset--color--schrift, #141617);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.mb-kontaktdaten__wert:hover,
a.mb-kontaktdaten__wert:focus-visible {
  color: var(--wp--preset--color--gruen, #2C4641);
  text-decoration: underline;
}

/* Auf dunklem Grund mitdrehen. */
.mb-abschnitt.mb-grund-gruen .mb-anfrage__daten,
.mb-abschnitt.mb-grund-dunkel .mb-anfrage__daten,
.mb-abschnitt.mb-hat-grundbild .mb-anfrage__daten {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.mb-abschnitt.mb-grund-gruen .mb-kontaktdaten__wert,
.mb-abschnitt.mb-grund-dunkel .mb-kontaktdaten__wert,
.mb-abschnitt.mb-hat-grundbild .mb-kontaktdaten__wert { color: #FFFFFF; }
.mb-abschnitt.mb-grund-gruen .mb-kontaktdaten__symbol,
.mb-abschnitt.mb-grund-dunkel .mb-kontaktdaten__symbol,
.mb-abschnitt.mb-hat-grundbild .mb-kontaktdaten__symbol {
  background: rgba(255, 255, 255, .12);
  color: var(--wp--preset--color--gold, #FFBB00);
}