/**
 * messebau netzwerk — Content-Layout
 * Autor:   Maik Haring / maikharing.com
 * Version: 1.0.0
 * Datei:   mb-layout-1.1.0.css
 * Quelle:  docs/messebau-layout-prototyp.html (Style-Block, ohne Abschnitt 18)
 * Regeln:  docs/content-layout-spezifikation.md, design/marke/styleguide_v1.0.md
 *
 * EINE Datei fuer vier Portale. Alles Portalspezifische laeuft ueber
 * `--mb-portal` und `--mb-portal-invers`; ein Portalwechsel aendert nichts
 * ausser diesen beiden Werten.
 *
 * Abschnitt 18 des Prototyps ("Umschalter") ist bewusst nicht uebernommen —
 * er gehoerte zur Vorschau, nicht zur Seite.
 *
 * Geprueft wird diese Datei maschinell: tools/pruefe-layout-css_v1.0.sh
 * bricht ab, wenn ein fester Portal-Hex ausserhalb des Token-Blocks steht,
 * ein Abstand nicht aus der Skala kommt oder ein Radius ueber 4 px liegt.
 */

/* =========================================================================
   messebau netzwerk — Layout-Prototyp
   Autor: Maik Haring / maikharing.com
   Version: 1.0.0
   Alle Werte aus messebau-netzwerk-styleguide.md (Stand 2026-09-02).
   Komponenten greifen ausschliesslich auf --mb-portal zu.
   ========================================================================= */

/* --- 1. Kurznamen ------------------------------------------------------- */
/*
 * Hier stand die komplette Palette ein zweites Mal — dieselben zwoelf
 * Farben und dieselben fuenf Portalbloecke wie in tokens_v2.0.css. Weil
 * diese Datei NACH der Tokendatei laedt, gewann sie jeden Konflikt: Eine
 * Korrektur an der Tokendatei waere hier stillschweigend zurueckgedreht
 * worden. Zwei Quellen fuer eine Farbe sind eine Quelle zu viel.
 *
 * Geblieben sind die Kurznamen, die der Prototyp eingefuehrt hat. Sie
 * halten die Regeln unten lesbar (--s24 statt --mb-space-5) und zeigen
 * jetzt auf die Tokendatei, statt eigene Werte zu fuehren.
 */
:root{
  --s4:var(--mb-space-1);   --s8:var(--mb-space-2);   --s12:var(--mb-space-3);
  --s16:var(--mb-space-4);  --s24:var(--mb-space-5);  --s32:var(--mb-space-6);
  --s48:var(--mb-space-7);  --s64:var(--mb-space-8);  --s96:var(--mb-space-9);
  --s128:var(--mb-space-10);

  --mb-sans:var(--mb-font-text);
  --mb-display:var(--mb-font-display);
  --mb-container:var(--mb-breite-inhalt);
  --mb-schnell:var(--mb-dauer-zustand) var(--mb-easing);
}

/* --- 2. Grundlagen ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
/* scrollbar-gutter:stable — sonst springt der Inhalt um die Breite des
   Rollbalkens, sobald eine kurze Seite (Presse, Anmelden) ohne Rollbalken
   auf eine lange folgt. Gemessen am 04.09.2026 beim Durchklicken. */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;}
body{
  margin:0;background:var(--mb-papier);color:var(--mb-messeblau);
  font-family:var(--mb-sans);font-size:16px;line-height:26px;
  font-feature-settings:"kern" 1;
}
h1,h2,h3,h4{font-family:var(--mb-display);margin:0;color:var(--mb-messeblau);}
h1{font-size:40px;line-height:45px;font-weight:700;letter-spacing:-.018em;}
h2{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.015em;}
h3{font-size:22px;line-height:29px;font-weight:500;letter-spacing:-.01em;}
h4{font-size:18px;line-height:25px;font-weight:500;}
p{margin:0;}
a{color:inherit;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--mb-bernstein);outline-offset:2px;}

.mb-lead{font-size:19px;line-height:30px;}
.mb-klein{font-size:14px;line-height:22px;}
.mb-besch{font-size:13px;line-height:19px;color:var(--mb-graphit);}
.mb-mass{max-width:64ch;}
.mb-stark{font-weight:500;}
.mb-zahl{font-variant-numeric:tabular-nums;}

/* --- 3. Raster ---------------------------------------------------------- */
.mb-container{max-width:var(--mb-container);margin:0 auto;padding:0 var(--s24);}
.mb-sec{padding:var(--s96) 0;}
.mb-sec--eng{padding:var(--s64) 0;}
.s-papier{background:var(--mb-papier);}
.s-weiss{background:var(--mb-weiss);}
.s-nacht{background:var(--mb-nachtblau);color:var(--mb-weiss);}
.s-nacht h1,.s-nacht h2,.s-nacht h3,.s-nacht h4{color:var(--mb-weiss);}
.s-nacht .mb-besch{color:var(--mb-text-invers-sekundaer);}

.mb-sec-kopf{margin-bottom:var(--s48);}
.mb-sec-kopf p{margin-top:var(--s12);color:var(--mb-graphit);max-width:60ch;}
.s-nacht .mb-sec-kopf p{color:var(--mb-text-invers-sekundaer);}

/* --- 4. Signets --------------------------------------------------------- */
.mb-sig{display:block;width:32px;height:32px;flex:none;}

/*
 * Die Regeln .mb-sig .rahmen / .fuell / .kontur des Prototyps stehen hier
 * NICHT mehr. Sie sahen richtig aus und taten nichts: `<use>` klont den
 * Inhalt des <symbol> in einen Schattenbaum, und Nachfahrenselektoren
 * reichen dort nicht hinein.
 *
 * Die Farbe traegt stattdessen die Datei selbst — der Rahmen mit
 * `stroke="currentColor"`, die Innenfigur mit `fill="var(--mb-portal)"`.
 * Beides sind vererbte Werte und kommen im Schattenbaum an. Erzeugt von
 * tools/signet-sprite_v1.0.php.
 *
 * Die Umrisse eines Signets — bei finder drei der vier Felder — tragen
 * ebenfalls `currentColor` und nicht die Portalfarbe: Sie sind Struktur,
 * kein Akzent (Styleguide 2.1).
 */

/*
 * Auf dunklem Grund die Invers-Fassung — ueber die VARIABLE, nicht ueber
 * einen Nachfahrenselektor.
 *
 * `<use>` klont den Inhalt des <symbol> in einen Schattenbaum. Regeln wie
 * `.s-nacht .mb-sig .fuell` reichen dort nicht hinein; geerbte
 * Eigenschaften und Custom Properties schon. Die frueheren Zeilen sahen
 * richtig aus und taten nichts: Das netzwerk-Signet stand mit Messeblau
 * #16324F auf Nachtblau #0B2032 und war praktisch unsichtbar.
 */
.s-nacht .mb-sig{--mb-portal:var(--mb-portal-invers);}

/* --- 5. Wortmarke / Kopfzeile ------------------------------------------- */
.mb-kopf{background:var(--mb-weiss);border-bottom:1px solid var(--mb-linie);}
.mb-kopf .mb-container{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s32);min-height:72px;}
.mb-marke{display:flex;align-items:center;gap:var(--s12);text-decoration:none;}
.mb-marke .mb-sig{width:34px;height:34px;}
.mb-wort{font-family:var(--mb-display);font-weight:700;font-size:19px;line-height:21px;
  letter-spacing:-.02em;}
.mb-wort span{display:block;}
.mb-wort .teil2{color:var(--mb-portal);}
.mb-nav{display:flex;align-items:center;gap:var(--s32);}
.mb-nav__liste{display:flex;align-items:center;gap:var(--s32);margin:0;padding:0;list-style:none;}
.mb-schalter{display:none;}
.mb-nav a{font-size:15px;text-decoration:none;color:var(--mb-messeblau);
  padding:var(--s8) 0;border-bottom:2px solid transparent;transition:border-color var(--mb-schnell);}
.mb-nav a:hover{border-bottom-color:var(--mb-portal);}
.mb-nav .aktiv{border-bottom-color:var(--mb-portal);}

/* --- 6. Buttons --------------------------------------------------------- */
.mb-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:2px;border:1px solid transparent;
  font-family:var(--mb-sans);font-size:15px;line-height:20px;font-weight:500;
  text-decoration:none;cursor:pointer;transition:background var(--mb-schnell),color var(--mb-schnell);}
.mb-btn--primaer{background:var(--mb-portal);color:var(--mb-weiss);}
.mb-btn--primaer:hover{filter:brightness(.92);}
.mb-btn--sekundaer{border-color:var(--mb-messeblau);color:var(--mb-messeblau);background:transparent;}
.mb-btn--sekundaer:hover{background:var(--mb-messeblau);color:var(--mb-weiss);}
.s-nacht .mb-btn--sekundaer{border-color:var(--mb-weiss);color:var(--mb-weiss);}
.s-nacht .mb-btn--sekundaer:hover{background:var(--mb-weiss);color:var(--mb-nachtblau);}
.mb-btn--still{color:var(--mb-graphit);padding-left:0;padding-right:0;}
/* Auf Nachtblau: Graphit ergaebe 3,1 : 1 und war im Handlungsblock der
   anbieter-Startseite praktisch unsichtbar (04.09.2026). */
.s-nacht .mb-btn--still{color:var(--mb-text-invers-sekundaer);}
.s-nacht .mb-btn--still:hover{color:var(--mb-weiss);}
.mb-btn--signal{background:var(--mb-bernstein);color:var(--mb-nachtblau);}
.mb-btn-reihe{display:flex;flex-wrap:wrap;gap:var(--s12);margin-top:var(--s32);}

/* Textlink mit Unterstreichung in Portalfarbe */
.mb-link{text-decoration:none;border-bottom:1px solid var(--mb-portal);
  padding-bottom:1px;font-weight:500;}
.mb-link:hover{color:var(--mb-portal);}
.s-nacht .mb-link{border-bottom-color:var(--mb-portal-invers);}
.s-nacht .mb-link:hover{color:var(--mb-portal-invers);}

/* --- 7. Kopfabschnitt (7/5) --------------------------------------------- */
.mb-hero{padding:var(--s96) 0 var(--s96);}
.mb-hero-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s64);align-items:start;}
.mb-hero h1{max-width:18ch;}
.mb-hero .mb-lead{margin-top:var(--s24);max-width:52ch;color:var(--mb-messeblau);}

/* --- 8. Kasten (Formular, Kurzinfo) ------------------------------------- */
.mb-kasten{background:var(--mb-weiss);border:1px solid var(--mb-linie);padding:var(--s32);}
.mb-kasten--akzent{border-top:3px solid var(--mb-portal);}
.mb-kasten h3{margin-bottom:var(--s8);}
.mb-kasten .mb-hinweis{margin-top:var(--s16);}

/* Definitionsliste im Kasten */
.mb-dl{margin:0;}
.mb-dl div{padding:var(--s16) 0;border-bottom:1px solid var(--mb-linie);}
.mb-dl div:first-child{padding-top:0;}
.mb-dl div:last-child{border-bottom:0;padding-bottom:0;}
.mb-dl dt{font-size:13px;line-height:19px;color:var(--mb-graphit);}
.mb-dl dd{margin:var(--s4) 0 0;font-size:15px;line-height:23px;}

/* --- 9. Formularfelder -------------------------------------------------- */
.mb-feld{margin-bottom:var(--s16);}
.mb-feld label{display:block;font-size:13px;line-height:19px;color:var(--mb-graphit);
  margin-bottom:var(--s4);}
.mb-feld input,.mb-feld select{
  width:100%;height:44px;padding:0 var(--s12);border:1px solid var(--mb-linie);
  border-radius:2px;background:var(--mb-weiss);color:var(--mb-messeblau);
  font-family:var(--mb-sans);font-size:16px;line-height:26px;}
.mb-feld input:focus,.mb-feld select:focus{outline:2px solid var(--mb-portal);outline-offset:0;
  border-color:var(--mb-portal);}
.mb-feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);}
.mb-feld .einheit{position:relative;}
.mb-feld .einheit span{position:absolute;right:var(--s12);top:0;line-height:44px;
  color:var(--mb-graphit);font-size:14px;}
.mb-feld .einheit input{padding-right:var(--s48);}

/* --- 10. Definitionszeilen (Regeln, Portale, Werkzeuge) ----------------- */
.mb-zeilen{border-top:1px solid var(--mb-linie);}
.mb-zeile{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s48);
  padding:var(--s32) 0;border-bottom:1px solid var(--mb-linie);align-items:start;}
.mb-zeile-titel{display:flex;gap:var(--s16);align-items:flex-start;}
.mb-zeile p{color:var(--mb-graphit);max-width:62ch;}
.s-nacht .mb-zeilen,.s-nacht .mb-zeile{border-color:var(--mb-linie-invers);}
.s-nacht .mb-zeile p{color:var(--mb-text-invers-sekundaer);}
.mb-zeile-aktion{margin-top:var(--s12);display:inline-block;}

/* Portalzeile mit Signet */
.mb-portalzeile{display:grid;grid-template-columns:32px minmax(0,3fr) minmax(0,6fr) auto;
  gap:var(--s24);padding:var(--s24) 0;border-bottom:1px solid var(--mb-linie);align-items:start;}
.mb-portalzeile .name{font-family:var(--mb-display);font-weight:500;font-size:18px;line-height:25px;}
.mb-portalzeile p{color:var(--mb-graphit);}
.mb-portalzeile .domain{font-size:14px;white-space:nowrap;}

/* --- 11. Schrittfolge --------------------------------------------------- */
.mb-schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s24);}
.mb-schritt{border-top:2px solid var(--mb-portal);padding-top:var(--s16);}
.mb-schritt .rolle{font-size:13px;line-height:19px;color:var(--mb-graphit);}
.mb-schritt h4{margin:var(--s4) 0 var(--s8);}
.mb-schritt p{font-size:15px;line-height:23px;color:var(--mb-graphit);}
.s-nacht .mb-schritt p,.s-nacht .mb-schritt .rolle{color:var(--mb-text-invers-sekundaer);}
.mb-schritt .dauer{margin-top:var(--s12);font-size:13px;line-height:19px;color:var(--mb-messeblau);}

/* --- 12. Tabelle -------------------------------------------------------- */
.mb-tabelle-huelle{overflow-x:auto;}
.mb-tabelle{width:100%;border-collapse:collapse;font-size:15px;line-height:23px;}
.mb-tabelle th{background:var(--mb-nachtblau);color:var(--mb-weiss);
  font-family:var(--mb-sans);font-weight:500;font-size:13px;line-height:19px;
  text-align:left;padding:var(--s12) var(--s16);white-space:nowrap;}
.mb-tabelle td{padding:var(--s12) var(--s16);border-bottom:1px solid var(--mb-linie);
  background:var(--mb-weiss);}
.mb-tabelle tr:nth-child(even) td{background:var(--mb-papier);}
.mb-tabelle .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mb-tabelle caption{caption-side:top;text-align:left;font-size:13px;line-height:19px;
  color:var(--mb-graphit);padding-bottom:var(--s12);}
.s-nacht .mb-tabelle td{background:var(--mb-messeblau);border-bottom-color:var(--mb-linie-invers);color:var(--mb-weiss);}
.s-nacht .mb-tabelle tr:nth-child(even) td{background:var(--mb-flaeche-invers-zebra);}
.s-nacht .mb-tabelle th{background:var(--mb-flaeche-invers-kopf);}
.s-nacht .mb-tabelle caption{color:var(--mb-text-invers-sekundaer);}

/* --- 13. Liste mit Modulmarker ------------------------------------------ */
.mb-liste li{position:relative;padding-left:var(--s24);margin-bottom:var(--s12);}
.mb-liste li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  background:var(--mb-portal);}
.s-nacht .mb-liste li::before{background:var(--mb-portal-invers);}
.mb-liste--still li::before{background:var(--mb-linie);}

.mb-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:var(--s64);align-items:start;}
.mb-dreispalt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s48);align-items:start;}
.mb-spalt-titel{font-family:var(--mb-display);font-weight:500;font-size:18px;line-height:25px;
  padding-bottom:var(--s12);border-bottom:1px solid var(--mb-linie);margin-bottom:var(--s16);}
.s-nacht .mb-spalt-titel{border-bottom-color:var(--mb-linie-invers);}

/* --- 14. Kennzahl ------------------------------------------------------- */
.mb-kennzahl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s64);
  align-items:center;}
.mb-kennzahl .wert{font-family:var(--mb-display);font-weight:700;font-size:56px;line-height:60px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.mb-kennzahl .quelle{margin-top:var(--s16);}

/* --- 15. Anbieterkarte -------------------------------------------------- */
/*
 * Abweichung vom Prototyp, auf Weisung des Styleguides.
 *
 * Der Prototyp gibt JEDER Karte den 3-px-Streifen und eine Breitengrenze
 * von 520 px. Styleguide 6.2 sagt aber: Der Streifen "markiert
 * hervorgehobene Eintraege" — er ist eine Auszeichnung, keine
 * Grundausstattung. Traegt ihn jede Karte, zeichnet er keine mehr aus.
 * Die Breitengrenze steht im Styleguide gar nicht; sie stammt aus der
 * einspaltigen Vorschau und braeche jede Karte in einem Raster.
 *
 * Kein Ausgleich der zwei zusaetzlichen Pixel: `box-sizing: border-box`
 * haelt die Aussenmasse, der Inhalt rueckt um zwei Pixel ein. Das ist
 * unterhalb der Wahrnehmungsschwelle — eine Ausnahme in der
 * Abstandsskala dafuer waere teurer als der Effekt.
 */
.mb-karte{background:var(--mb-weiss);border:1px solid var(--mb-linie);padding:var(--s24);}
.mb-karte--hervorgehoben{border-left:3px solid var(--mb-portal);}
.mb-karte .ort{margin-top:var(--s4);}
.mb-badges{display:flex;flex-wrap:wrap;gap:var(--s8);margin:var(--s16) 0;}
.mb-badge{display:inline-flex;align-items:center;height:24px;padding:0 var(--s8);
  border-radius:2px;font-size:13px;line-height:19px;font-weight:500;
  background:var(--mb-aluminium);color:var(--mb-messeblau);}
.mb-badge--portal{background:color-mix(in srgb,var(--mb-portal) 12%,transparent);color:var(--mb-portal);}
.mb-badge--signal{background:var(--mb-bernstein);color:var(--mb-nachtblau);}

/* --- 16. Registrierblock ------------------------------------------------ */
.mb-register{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s64);
  align-items:start;}
.mb-register .neben{border-left:1px solid var(--mb-linie-invers);padding-left:var(--s48);}

/* --- 17. Fusszeile ------------------------------------------------------ */
.mb-fuss{background:var(--mb-nachtblau);color:var(--mb-weiss);padding:var(--s64) 0 var(--s32);}
.mb-fuss a{color:var(--mb-weiss);text-decoration:none;}
.mb-fuss a:hover{text-decoration:underline;}
.mb-fuss-oben{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);
  gap:var(--s48);padding-bottom:var(--s48);}
.mb-fuss-oben p{color:var(--mb-text-invers-sekundaer);font-size:14px;line-height:22px;}
.mb-fuss-links li{margin-bottom:var(--s12);font-size:15px;}
.mb-wechsler{border-top:1px solid var(--mb-linie-invers);padding:var(--s32) 0;}
/*
 * `.mb-wechsler .zeile` stand hier — eine Zeile Vorspann ueber den vier
 * Signets. Der Prototyp hatte sie, das Template hat sie nicht: die
 * Fusszeile fuehrt ihre Ueberschrift schon in .mb-fuss__spaltentitel.
 * Eine Regel ohne Element ist keine Reserve, sie ist Ballast.
 */
.mb-wechsler ul{display:flex;flex-wrap:wrap;gap:var(--s48);}
.mb-wechsler li a,.mb-wechsler li span{display:flex;flex-direction:column;gap:var(--s8);
  font-size:13px;line-height:19px;}
/*
 * Das eigene Portal. Der Prototyp nannte die Klasse `.eigen`, das Template
 * schreibt `.is-eigen` — die Regel griff deshalb nie, und der Wechsler
 * zeigte auf jeder Seite vier gleichwertige Eintraege.
 *
 * Graphit waere hier falsch: 3,1 : 1 auf Nachtblau. Der Eintrag ist der
 * Ort, an dem der Nutzer gerade steht; er muss zurueckhaltender sein als
 * die Links, aber lesbar bleiben (9,5 : 1). Die Abstufung traegt das
 * Signet mit halber Deckkraft.
 */
.mb-wechsler__eintrag.is-eigen .mb-wechsler__ziel{color:var(--mb-text-invers-sekundaer);
  cursor:default;}
.mb-wechsler__eintrag.is-eigen .mb-sig{opacity:.5;}
.mb-fuss-unten{border-top:1px solid var(--mb-linie-invers);padding-top:var(--s24);
  display:flex;justify-content:space-between;gap:var(--s24);flex-wrap:wrap;
  color:var(--mb-text-invers-sekundaer);font-size:13px;line-height:19px;}

/* --- 19. Responsiv ------------------------------------------------------ */
@media (max-width:1023px){
  .mb-hero-raster,.mb-register,.mb-kennzahl{grid-template-columns:1fr;gap:var(--s48);}
  .mb-register .neben{border-left:0;border-top:1px solid var(--mb-linie-invers);padding-left:0;padding-top:var(--s32);}
  .mb-schritte{grid-template-columns:1fr 1fr;gap:var(--s32);}
  .mb-zeile{grid-template-columns:1fr;gap:var(--s12);}
  .mb-portalzeile{grid-template-columns:32px 1fr;gap:var(--s16) var(--s16);}
  .mb-portalzeile p,.mb-portalzeile .domain{grid-column:2;}
  .mb-dreispalt{grid-template-columns:1fr;gap:var(--s32);}
}
@media (max-width:767px){
  h1{font-size:30px;line-height:36px;}
  h2{font-size:24px;line-height:31px;}
  h3{font-size:20px;line-height:27px;}
  .mb-sec,.mb-hero{padding:var(--s64) 0;}
  .mb-container{padding:0 var(--s24);}
  .mb-schritte,.mb-zweispalt{grid-template-columns:1fr;gap:var(--s32);}
  .mb-kennzahl .wert{font-size:36px;line-height:40px;}
  .mb-fuss-oben{grid-template-columns:1fr;gap:var(--s32);}
  /*
   * Abweichung vom Prototyp, auf Weisung des Styleguides.
   *
   * Der Prototyp blendet die Navigation unter 768 px ersatzlos aus. Damit
   * waeren die Unterseiten am Handy nicht erreichbar — Styleguide 9
   * verlangt durchgaengige Bedienbarkeit und Klickflaechen von mindestens
   * 44 x 44 px. Sie klappt deshalb auf, statt zu verschwinden.
   */
  .mb-nav{display:none;}
  .mb-schalter{display:inline-flex;}
  .mb-nav[data-offen="true"]{
    display:block;position:absolute;inset-inline:0;top:100%;z-index:100;
    padding:var(--s24);background:var(--mb-weiss);
    border-bottom:1px solid var(--mb-linie);
    box-shadow:0 8px 24px rgba(11,32,50,.14);}
  .mb-nav[data-offen="true"] .mb-nav__liste{flex-direction:column;align-items:stretch;gap:0;}
  .mb-nav[data-offen="true"] a{display:block;min-height:44px;padding:var(--s12) 0;
    border-bottom:1px solid var(--mb-linie);}
  .mb-nav[data-offen="true"] li:last-child a{border-bottom:0;}
  .mb-schalter{display:inline-flex;align-items:center;gap:var(--s8);
    min-height:44px;padding:0 var(--s16);background:none;cursor:pointer;
    color:var(--mb-messeblau);font-family:var(--mb-sans);font-size:15px;
    border:1px solid var(--mb-linie);border-radius:2px;}
  .mb-kasten{padding:var(--s24);}
  .mb-wechsler ul{gap:var(--s24);}
}
/* Kein 32-px-Seitenrand ab 768 px mehr: Theme (--mb-gutter), Prototyp und
   Fusszeile arbeiten mit 24 px. Drei Kanten (24, 32, 0) liessen die Seite
   beim Wechsel zwischen Start- und Unterseiten springen. */
@media (prefers-reduced-motion:reduce){*{transition-duration:0ms!important;animation-duration:0ms!important;}}

/* --- 19. Baukasten ------------------------------------------------------ */
/*
 * Seiten aus dem Page Builder (Vorlage "Baukasten, volle Breite"). Die
 * Zeile des Baukastens ist `.panel-grid`, darin liegt `.panel-row-style`
 * mit den Klassen aus den Zeileneinstellungen (s-papier, mb-sec ...).
 *
 * Die Flaeche soll bis an den Rand reichen, der Inhalt aber 1200 px
 * halten. Kein zusaetzliches Element dafuer — SiteOrigin legt seine
 * Spalten als direkte Kinder von .panel-row-style an, ein Behaelter
 * dazwischen zerlegte das Raster. Stattdessen traegt die Zeile den
 * Seitenabstand selbst: der Rest bis 1200 px, halbiert, PLUS die 24 px
 * Innenabstand des Containers — so liegt der Inhalt auf derselben Kante
 * wie Kopfzeile, Unterseiten und Fusszeile (137 px bei 1440 px). Ohne
 * das Plus stand er 24 px weiter links und die Seite sprang beim
 * Seitenwechsel.
 */
.mb-baukasten .panel-grid{margin:0;}
.mb-baukasten .panel-row-style{padding-inline:max(var(--s24),calc((100% - var(--mb-container)) / 2 + var(--s24)));}

/*
 * Baukasten-Seiten enden mit ihrer letzten Zeile — meist Nachtblau, wie
 * die Fusszeile. Das Theme setzt vor der Fusszeile einen Abstand fuer
 * Fliesstextseiten; hier ergaebe er einen Papierstreifen zwischen zwei
 * dunklen Flaechen. Die Vorlage setzt die Body-Klasse.
 */
body.mb-baukasten-seite .mb-fuss{margin-block-start:0;}
body.mb-baukasten-seite .mb-inhalt{padding-block-end:0;}

/* --- 20. Bilder ---------------------------------------------------------- */
/*
 * Styleguide 5.3: Bilder ohne Radius, ohne Schatten, ohne Rahmen. Das
 * Bild fuellt seine Flaeche (object-fit), damit ein 16:9-Motiv in jedem
 * Raster ohne Rand steht; der Ausschnitt bleibt mittig.
 */
.mb-bild-figur{margin:0;}
.mb-bild{display:block;width:100%;height:auto;object-fit:cover;}
.mb-bild--breit{aspect-ratio:21/9;}
.mb-bild--natuerlich{aspect-ratio:16/9;}
.mb-bild-unterschrift{margin-top:var(--s12);font-size:13px;line-height:19px;color:var(--mb-graphit);}
.s-nacht .mb-bild-unterschrift{color:var(--mb-text-invers-sekundaer);}

/* Im Kopfbereich: das Bild sitzt in der rechten Spalte ueber dem Kasten. */
.mb-hero-bild{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.mb-hero-bild + .mb-kasten{margin-top:var(--s24);}
@media (max-width:767px){
  .mb-bild--breit{aspect-ratio:16/9;}
}

/* --- 21. Hero (M16.1) --------------------------------------------------- */
/*
 * Quelle: docs/messebau-hero-varianten.html, Klassen auf `mb-hero`
 * umbenannt (docs/M16-1-prompt-hero.md). Zwei Bauarten, ein Band von
 * 400 px: kein Bildschirmfueller, der erste Inhaltsabschnitt bleibt
 * beim Laden sichtbar.
 *
 * Hoehe, Trennkante (50 % + 130 px = die 7/5-Teilung des Containers,
 * bis zum Fensterrand fortgesetzt) und Deckung (.84) sind bewusst fest:
 * Darunter faellt der Textkontrast unter 4,5:1. Text liegt nie auf dem
 * Foto — deshalb bricht ein Bildtausch nichts.
 *
 * Abschnitt 7 (.mb-hero des Kopfbereich-Widgets) wird hier fuer den
 * Startseiten-Hero ueberschrieben: kein Innenabstand aussen, Lead in
 * der Invers-Farbe. Der Hero traegt zusaetzlich `s-nacht`, damit die
 * Nachtblau-Regeln fuer Buttons und Kleintext aus Abschnitt 2 und 6
 * gelten, statt sie ein zweites Mal zu schreiben.
 *
 * Keine Nachweiszeile unter dem Band — auf Wunsch vom 04.09.2026
 * entfernt, ebenso die Bildunterschriften.
 */
.mb-hero{position:relative;padding:0;overflow:hidden;background:var(--mb-nachtblau);color:var(--mb-weiss);}
.mb-hero h1{max-width:17ch;}
.mb-hero .mb-lead{margin-top:var(--s16);max-width:46ch;color:var(--mb-text-invers-sekundaer);}
.mb-hero__raster{position:relative;max-width:var(--mb-container);margin:0 auto;
  padding:var(--s64) var(--s24);min-height:400px;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s64);align-items:center;}
.mb-hero__inhalt{min-width:0;}
.mb-hero__platzhalter{visibility:hidden;}
.mb-hero .mb-btn-reihe{margin-top:var(--s24);}
/* Primaer auf Nachtblau: Auf netzwerk ist die Portalfarbe Messeblau und
   hebt sich kaum ab. Die Kontur in der Invers-Portalfarbe gibt dem
   Button eine Kante — dieselbe Farbe, die .s-nacht fuer Links nutzt. */
.mb-hero .mb-btn--primaer{border-color:var(--mb-portal-invers);}
.mb-hero__kleintext{margin-top:var(--s16);}

/* Geteilt: Bild rechts, randabfallend, ohne Ueberlagerung. */
.mb-hero--geteilt .mb-hero__bild{position:absolute;top:0;bottom:0;left:calc(50% + 130px);right:0;}
.mb-hero--geteilt .mb-hero__bild img{display:block;width:100%;height:100%;object-fit:cover;}

/* Band: Bild hinter der Flaeche, Nachtblau mit 84 % Deckung darueber. */
.mb-hero--band{isolation:isolate;}
.mb-hero--band .mb-hero__hintergrund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.mb-hero--band::after{content:"";position:absolute;inset:0;background:var(--mb-nachtblau);opacity:.84;z-index:-1;}
/* align-items:flex-start, nicht center: In einer Spalten-Flexbox zentriert
   align-items WAAGERECHT — der Text stand 260 px rechts von Logo und Inhalt. */
.mb-hero--band .mb-hero__raster{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--s96) var(--s24);}
.mb-hero--band h1{max-width:18ch;}
.mb-hero--band .mb-lead{max-width:52ch;}

/* Such- und Rechnerzeile: Beschriftung ueber dem Feld, 44 px hoch. */
.mb-hero__zeile{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:var(--s12);
  align-items:end;margin-top:var(--s32);max-width:640px;}
.mb-hero__zeile--rechner{grid-template-columns:150px minmax(0,1fr) auto;}
.mb-hero__zeile .mb-feld{margin-bottom:0;}
.mb-hero__zeile .mb-feld label{color:var(--mb-text-invers-sekundaer);}
.mb-hero__zeile .mb-feld input:focus,.mb-hero__zeile .mb-feld select:focus{outline-color:var(--mb-bernstein);border-color:var(--mb-weiss);}
.mb-hero__zeile .mb-btn{align-self:end;}

@media (max-width:1023px){
  /* Geteilt stapelt: erst der Text, darunter das Bild mit 280 px. */
  .mb-hero--geteilt{display:flex;flex-direction:column;}
  .mb-hero--geteilt .mb-hero__raster{grid-template-columns:1fr;min-height:0;padding-bottom:0;}
  .mb-hero--geteilt.mb-hero--ohne-bild .mb-hero__raster{padding-bottom:var(--s64);}
  .mb-hero--geteilt .mb-hero__bild{position:static;order:2;height:280px;margin-top:var(--s48);}
  .mb-hero__platzhalter{display:none;}
  .mb-hero__zeile,.mb-hero__zeile--rechner{grid-template-columns:1fr;max-width:none;}
}
@media (max-width:767px){
  .mb-hero--band .mb-hero__raster{padding-block:var(--s64);min-height:0;}
}