/**
 * Basis-Stylesheet — Layout, Komponenten, Zustände.
 * Version: 1.0.0
 *
 * Lädt nach tokens_v2.0.css. Kein Hex-Wert, keine freie Größe: alles kommt aus
 * den Tokens (design/design-guide_v1.0.md, Abschnitt 10, Punkt 2).
 *
 * Eine dokumentierte Ausnahme: Die vier Breakpoints stehen als Zahlen in den
 * Media Queries, weil CSS-Variablen in Media-Query-Bedingungen nicht erlaubt
 * sind. Sie stammen aus dem Design Guide, Abschnitt 4, und stehen ausschließlich
 * hier — siehe docs/entscheidungen/ADR-004-theme-grundlagen.md.
 *
 *   480px  klein     768px  Tablet
 *  1024px  Desktop  1280px  weit
 */

/* ====================================================================
   LAYOUT
   ==================================================================== */

.mb-behaelter--weit { max-width: var(--mb-breite-inhalt); }
.mb-behaelter--text { max-width: var(--mb-breite-text); }

.mb-abschnitt { padding-block: var(--mb-space-7); }

@media (min-width: 768px) {
  .mb-abschnitt { padding-block: var(--mb-space-9); }
}

.mb-raster-12 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mb-gutter);
}

@media (min-width: 768px) {
  .mb-raster-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .mb-raster-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.mb-stapel > * + * { margin-block-start: var(--mb-space-5); }

/*
 * Spaltenbreite im 12er-Raster. Bei vier Spalten (mobil) volle Breite, bei
 * acht die Hälfte, bei zwölf ein Drittel — ohne eigene Media Query.
 */
.mb-spalte-4  { grid-column: span 4; }
.mb-spalte-6  { grid-column: span 4; }
.mb-spalte-12 { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .mb-spalte-6 { grid-column: span 6; }
}

/* Lesetext bleibt bei 68 Zeichen, unabhängig vom Container. */
.mb-fliesstext > * { max-width: var(--mb-breite-text); }

/*
 * Für Screenreader sichtbar, visuell entfernt. Die 1px-Werte sind kein
 * Designmaß, sondern Bestandteil der Technik: Ein Element mit 0 Höhe wird von
 * einigen Screenreadern übersprungen.
 */
.mb-visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================
   TYPOGRAFIE
   ==================================================================== */

p, ul, ol, dl, table, figure, blockquote { margin-block: 0 var(--mb-space-5); }

a { color: var(--mb-messeblau); text-underline-offset: 0.15em; }
a:hover { color: var(--mb-messeblau); }

/* Abschnittsmarke in Standnummern-Notation: A1, B2, C3. */
/* Die Standnummer ist eine Beschriftung, kein Etikett: gemischt
   geschrieben, ohne Rahmen und ohne Kasten (Styleguide 4.4). Die Kachel
   liess sie wie ein Status-Badge aussehen — und Badges bedeuten hier
   etwas anderes. */
.mb-standnummer {
  display: block;
  margin-block-end: var(--mb-space-3);
  padding: 0;
  border: 0;
  color: var(--mb-graphit);
}

/* ====================================================================
   KOPFZEILE
   ==================================================================== */

.mb-kopf { position: relative; }

.mb-kopf__navigation { display: none; }

.mb-kopf__liste {
  display: flex;
  align-items: center;
  gap: var(--mb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-kopf__liste a {
  display: inline-block;
  padding-block: var(--mb-space-2);
  color: var(--mb-text);
  font-size: var(--mb-text-klein);
  font-weight: var(--mb-fw-medium);
  text-decoration: none;
  border-block-end: var(--mb-border-marke);
  border-color: transparent;
}

.mb-kopf__liste a:hover,
.mb-kopf__liste .current-menu-item > a {
  color: var(--mb-messeblau);
  border-color: var(--mb-portal);
}

.mb-kopf__schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  min-height: var(--mb-space-7);
  padding-inline: var(--mb-space-3);
  background: none;
  color: var(--mb-text);
  font: inherit;
  font-size: var(--mb-text-klein);
  border: var(--mb-border);
  border-radius: var(--mb-radius-1);
  cursor: pointer;
}

.mb-kopf__balken {
  display: block;
  width: var(--mb-space-4);
  height: 0;
  border-block-start: var(--mb-border-marke);
}

@media (min-width: 1024px) {
  .mb-kopf__navigation { display: block; }
  .mb-kopf__schalter { display: none; }
}

/* Mobile Navigation: aufgeklappt über den Zustand am Schalter. */
@media (max-width: 1023px) {
  .mb-kopf__navigation[data-offen='true'] {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--mb-z-dropdown);
    padding: var(--mb-space-5) var(--mb-gutter);
    background: var(--mb-flaeche);
    border-block-end: var(--mb-border);
    box-shadow: var(--mb-schatten-ebene);
  }

  .mb-kopf__navigation[data-offen='true'] .mb-kopf__liste {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mb-space-2);
  }

  /*
   * `block` statt `inline-block`: Der Trennstrich sass am Link und war
   * damit nur so breit wie sein Text — er sah aus wie ein Versehen. Und
   * die Klickflaeche endete am letzten Buchstaben, statt die Zeile zu
   * fuellen (Styleguide 9: mindestens 44 x 44 px).
   */
  .mb-kopf__navigation[data-offen='true'] .mb-kopf__liste a {
    display: block;
    min-height: 44px;
    padding-block: var(--mb-space-3);
    border-block-end: var(--mb-border);
  }

  /* Der letzte Eintrag braucht keinen Strich — darunter kommt nichts. */
  .mb-kopf__navigation[data-offen='true'] .mb-kopf__liste li:last-child a {
    border-block-end: 0;
  }
}

/* ====================================================================
   FUSSZEILE
   ==================================================================== */

/* Nachtblau ist die Tiefe des Systems: Footer, Hero, Tabellenkopf
   (Styleguide 3.3). Dunkler als Messeblau — dadurch bleibt das Logo
   darauf sichtbar. */
.mb-fuss {
  margin-block-start: var(--mb-abschnitt);
  padding-block: var(--mb-space-8) var(--mb-space-6);
  background: var(--mb-nachtblau);
  color: var(--mb-weiss);
}

.mb-fuss a { color: var(--mb-weiss); }

.mb-fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-space-7);
}

@media (min-width: 768px) {
  .mb-fuss__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mb-fuss__dach { display: inline-block; text-decoration: none; }
.mb-fuss__dach .mb-logo { height: var(--mb-space-7); width: auto; }

.mb-fuss__liste { margin: 0; padding: 0; list-style: none; }
.mb-fuss__liste li + li { margin-block-start: var(--mb-space-2); }
.mb-fuss p.mb-fuss__liste { color: var(--mb-text-invers-sekundaer); font-size: var(--mb-text-klein); }

/* Graphit auf Nachtblau ergaebe 3,14 : 1 und faellt damit fuer Fliesstext
   durch. Nachgerechnet, nicht geschaetzt. */
.mb-fuss__liste a {
  color: var(--mb-text-invers-sekundaer);
  font-size: var(--mb-text-klein);
  text-decoration: none;
}

.mb-fuss__liste a:hover { color: var(--mb-weiss); text-decoration: underline; }

.mb-fuss__fuss {
  margin-block-start: var(--mb-space-7);
  padding-block-start: var(--mb-space-5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--mb-text-invers-sekundaer);
  font-size: var(--mb-text-label);
}

/* ====================================================================
   BUTTONS — Höhe 48, Radius 2, Gewicht 600.
   Styleguide 6.1. Der primaere Knopf traegt die Portalfarbe mit weisser
   Schrift — nicht mehr Zinkgelb: Der Signalton Bernstein ist ausdruecklich
   keine Textfarbe und traegt nur den eigenen Typ.

   Der Knopf sagt, was passiert: "Anfrage senden", nicht "Absenden".
   Kein Pfeil, kein Icon-Anhaengsel im Label.
   ==================================================================== */

.mb-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  /* 44 px: zugleich die Mindestgroesse einer Klickflaeche (Styleguide 9). */
  min-height: 44px;
  padding-inline: var(--mb-space-5);
  font-family: var(--mb-font-text);
  font-size: var(--mb-text-button);
  font-weight: var(--mb-fw-medium);
  line-height: 1.333;
  text-align: center;
  text-decoration: none;
  border: var(--mb-border);
  border-color: transparent;
  border-radius: var(--mb-radius-1);
  cursor: pointer;
  transition: background var(--mb-dauer-zustand) var(--mb-easing),
              border-color var(--mb-dauer-zustand) var(--mb-easing),
              color var(--mb-dauer-zustand) var(--mb-easing);
}

/* Hover: 8 % abgedunkelt. `color-mix` statt eines zweiten Hex-Werts —
   sonst braeuchte jede Portalfarbe eine eigene Hover-Variante. */
.mb-knopf--primaer {
  background: var(--mb-portal);
  color: var(--mb-weiss);
}
.mb-knopf--primaer:hover {
  background: color-mix(in srgb, var(--mb-portal) 92%, #000);
  color: var(--mb-weiss);
}

.mb-knopf--sekundaer {
  background: transparent;
  color: var(--mb-messeblau);
  border-color: var(--mb-messeblau);
}
.mb-knopf--sekundaer:hover {
  background: var(--mb-aluminium);
  color: var(--mb-messeblau);
}

/* "still" im Styleguide. Der alte Name bleibt, damit Vorlagen tragen. */
.mb-knopf--tertiaer,
.mb-knopf--still {
  min-height: 44px;
  padding-inline: 0;
  background: none;
  color: var(--mb-graphit);
  border: 0;
}
.mb-knopf--tertiaer:hover,
.mb-knopf--still:hover { color: var(--mb-messeblau); text-decoration: underline; }

/* Signalknopf: Bernsteinflaeche, Nachtblau darauf. Hoechstens einer je
   Bildschirm (Styleguide 3.3). */
.mb-knopf--signal {
  background: var(--mb-bernstein);
  color: var(--mb-nachtblau);
}
.mb-knopf--signal:hover { background: color-mix(in srgb, var(--mb-bernstein) 92%, #000); }

.mb-knopf--gefahr {
  background: transparent;
  color: var(--mb-fehler);
  border-color: var(--mb-fehler);
}
.mb-knopf--gefahr:hover { background: var(--mb-fehler-flaeche); }

.mb-knopf[disabled],
.mb-knopf[aria-disabled='true'] {
  background: var(--mb-aluminium);
  color: var(--mb-graphit);
  border-color: var(--mb-linie);
  cursor: not-allowed;
}

/* ====================================================================
   FORMULARE — Label immer sichtbar, Fehler unter dem Feld.
   ==================================================================== */

.mb-feld { display: block; margin-block-end: var(--mb-space-5); }

/* Beschriftung ueber dem Feld, 13 px Graphit — nie als Platzhalter im
   Feld (Styleguide 6.5). Ein Platzhalter verschwindet beim Tippen und
   nimmt dem Nutzer genau dann die Information, wenn er sie braucht. */
.mb-feld__label {
  display: block;
  margin-block-end: var(--mb-space-2);
  color: var(--mb-graphit);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-fw-regular);
  line-height: var(--mb-lh-label);
}

.mb-feld__hilfe {
  display: block;
  margin-block-end: var(--mb-space-2);
  color: var(--mb-graphit);
  font-size: var(--mb-text-label);
}

.mb-feld input[type='text'],
.mb-feld input[type='email'],
.mb-feld input[type='tel'],
.mb-feld input[type='url'],
.mb-feld input[type='number'],
.mb-feld input[type='search'],
.mb-feld input[type='date'],
.mb-feld select,
.mb-feld textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--mb-space-2) var(--mb-space-3);
  background: var(--mb-flaeche);
  color: var(--mb-text);
  font-family: var(--mb-font-text);
  font-size: var(--mb-text-body);
  border: var(--mb-border);
  border-radius: var(--mb-radius-1);
}

/* Fokus im Feld: 2 px Portalfarbe (Styleguide 6.5). Der Bernsteinring
   der Seite bleibt fuer alles andere. */
.mb-feld input:focus-visible,
.mb-feld select:focus-visible,
.mb-feld textarea:focus-visible {
  outline: 2px solid var(--mb-portal);
  outline-offset: 0;
  border-color: var(--mb-portal);
  box-shadow: none;
}

.mb-feld textarea { min-height: var(--mb-space-10); resize: vertical; }

/* Hilfetext unter der Beschriftung, nicht im Feld. */
.mb-feld__hilfe { color: var(--mb-graphit); }

.mb-feld input:hover,
.mb-feld select:hover,
.mb-feld textarea:hover { border-color: var(--mb-graphit); }

/*
 * Optionsgruppen. Vom Kostenrechner hierher gezogen, weil der
 * Anfrage-Assistent dieselben Bausteine braucht — zweimal gepflegt wären sie
 * zweimal falsch.
 */
.mb-feld--gruppe {
  margin-block-end: var(--mb-space-5);
  padding: 0;
  border: 0;
}

.mb-feld__optionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-2);
}

/*
 * Radios als Schaltflächen. Der Radio bleibt im DOM und bedienbar — er wird
 * nur visuell ersetzt. Entfernen würde die Tastaturbedienung zerstören.
 */
.mb-option {
  display: inline-flex;
  align-items: center;
  min-height: var(--mb-space-7);
  padding-inline: var(--mb-space-4);
  background: var(--mb-flaeche);
  font-size: var(--mb-text-klein);
  border: var(--mb-border);
  border-radius: var(--mb-radius-1);
  cursor: pointer;
}

/*
 * Die 1px sind kein Designmass, sondern Technik: Ein Element mit Groesse 0
 * wird von manchen Screenreadern uebersprungen — dieselbe dokumentierte
 * Ausnahme wie bei .mb-visuell-versteckt im Theme.
 */
.mb-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mb-option:hover { border-color: var(--mb-graphit); }

.mb-option:has(input:checked) {
  background: var(--mb-aluminium);
  color: var(--mb-nachtblau);
  border-color: var(--mb-messeblau);
  font-weight: var(--mb-fw-medium);
}

.mb-option:has(input:focus-visible) { box-shadow: var(--mb-fokus); }

/* Rückfall für Browser ohne :has() — Fokus bleibt am Label sichtbar. */
.mb-option:focus-within { border-color: var(--mb-messeblau); }

.mb-feld__fehler {
  display: block;
  margin-block-start: var(--mb-space-2);
  color: var(--mb-fehler);
  font-size: var(--mb-text-klein);
  font-weight: var(--mb-fw-medium);
}

/* Farbe trägt nie allein die Bedeutung — der Rahmen wird zusätzlich stark. */
.mb-feld[data-fehler='true'] input,
.mb-feld[data-fehler='true'] select,
.mb-feld[data-fehler='true'] textarea { border-color: var(--mb-fehler); }

/* ====================================================================
   KARTEN
   ==================================================================== */

.mb-karte {
  padding: var(--mb-space-5);
  background: var(--mb-flaeche);
  border: var(--mb-border);
  /* Flaechen und Karten ohne Radius (Styleguide 5.3) und mit Linie statt
     Schatten — das Signet hat scharfe Ecken, das setzt sich hier fort. */
  border-radius: var(--mb-radius-0);
  box-shadow: none;
}

/* Der Streifen fuer hervorgehobene Eintraege steht in
   mb-layout (assets/css). Zwei Fassungen derselben Regel waeren zwei
   Stellen, an denen sie auseinanderlaufen kann. */

.mb-karte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mb-space-4);
  margin-block-end: var(--mb-space-3);
}

/* Firmenname als H4, Ort und Umkreis klein in Graphit (Styleguide 6.2). */
.mb-karte__titel {
  margin: 0;
  font-family: var(--mb-font-display);
  font-size: var(--mb-text-h4);
  font-weight: var(--mb-fw-h3);
  line-height: var(--mb-lh-h4);
}
.mb-karte__meta { margin: 0; color: var(--mb-graphit); font-size: var(--mb-text-klein); }

.mb-karte__fakten {
  margin-block: var(--mb-space-4);
  padding: var(--mb-space-3);
  background: var(--mb-papier);
  border-radius: var(--mb-radius-0);
}

.mb-karte__fakten dl { display: grid; grid-template-columns: auto 1fr; gap: var(--mb-space-2) var(--mb-space-4); margin: 0; }
.mb-karte__fakten dt { color: var(--mb-graphit); font-size: var(--mb-text-klein); }
.mb-karte__fakten dd { margin: 0; text-align: end; }

/* ====================================================================
   BADGES — Styleguide 6.3.
   Hoehe 24 px, Radius 2 px, Inter 500 / 13 px.

   Keine Versalien mehr und keine Pillenform: Der Styleguide verbietet
   Versalsaetze ausdruecklich (4.4) und deckelt den Radius bei 4 px (5.3).
   ==================================================================== */

.mb-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-1);
  min-height: var(--mb-space-5);
  padding-inline: var(--mb-space-2);
  font-family: var(--mb-font-text);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-fw-medium);
  line-height: var(--mb-lh-label);
  letter-spacing: var(--mb-ls-normal);
  text-transform: none;
  border-radius: var(--mb-radius-1);
  /* Neutral: Flaeche Aluminium, Schrift Messeblau. */
  background: var(--mb-aluminium);
  color: var(--mb-messeblau);
}

/* Status traegt nie allein Farbe. Auf `messebau firmen` liegt Erfolgsgruen
   nah an der Portalfarbe; dort ist das Zeichen der Unterschied
   (Styleguide 3.5 und 9). */
.mb-tag--frei::before       { content: '\2713\00a0'; }
.mb-tag--frist::before      { content: '\21af\00a0'; }
.mb-tag--ausgebucht::before { content: '\2014\00a0'; }

.mb-tag--frei       { background: var(--mb-erfolg-flaeche);  color: var(--mb-erfolg); }
.mb-tag--ausgebucht { background: var(--mb-aluminium);       color: var(--mb-graphit); }
.mb-tag--frist      { background: var(--mb-warnung-flaeche); color: var(--mb-warnung); }

/* Portalbezogen: Flaeche in der Portalfarbe bei 12 % Deckung. */
.mb-tag--geprueft {
  background: color-mix(in srgb, var(--mb-portal) 12%, transparent);
  color: var(--mb-portal);
}

/* Ausgezeichnet: Bernstein als Flaeche, Nachtblau darauf — die einzige
   zulaessige Verwendung von Bernstein mit Text. */
.mb-tag--ausgezeichnet { background: var(--mb-bernstein); color: var(--mb-nachtblau); }

.mb-tag--neu { background: transparent; color: var(--mb-graphit); border: var(--mb-border); }

/* ====================================================================
   TABELLEN — Styleguide 6.4.
   Kopfzeile Nachtblau mit weisser Schrift, Zeilen abwechselnd Weiss und
   Papier, Trennlinien nur waagerecht. Zahlen rechtsbuendig mit
   Tabellenziffern. Quelle und Stand am Fuss.
   ==================================================================== */

.mb-tabelle { width: 100%; border-collapse: collapse; }

.mb-tabelle th {
  padding: var(--mb-space-2) var(--mb-space-3);
  background: var(--mb-nachtblau);
  color: var(--mb-weiss);
  font-family: var(--mb-font-text);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-fw-medium);
  line-height: var(--mb-lh-label);
  letter-spacing: var(--mb-ls-normal);
  text-transform: none;
  text-align: start;
  border-block-end: 0;
}

.mb-tabelle td {
  padding: var(--mb-space-3);
  border-block-end: var(--mb-border);
}

/* Zeilen abwechselnd. `tbody` ausdruecklich, damit die Kopfzeile im
   Nachtblau bleibt. */
.mb-tabelle tbody tr:nth-child(even) td { background: var(--mb-papier); }

.mb-tabelle th.mb-zahl,
.mb-tabelle td.mb-zahl {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Unterhalb 768 px bricht die Tabelle in Definitionslisten um, statt
   seitlich zu scrollen. Die Vorlage liefert dafuer `data-spalte`. */
@media (max-width: 767px) {
  .mb-tabelle--umbrechend thead { display: none; }
  .mb-tabelle--umbrechend tbody tr {
    display: block;
    margin-block-end: var(--mb-space-4);
    border: var(--mb-border);
  }
  .mb-tabelle--umbrechend tbody td {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: var(--mb-space-3);
    background: var(--mb-flaeche);
  }
  .mb-tabelle--umbrechend tbody td::before {
    content: attr(data-spalte);
    color: var(--mb-graphit);
    font-size: var(--mb-text-label);
  }
  .mb-tabelle--umbrechend tbody td.mb-zahl { text-align: start; }
}

.mb-tabelle__quelle {
  margin-block-start: var(--mb-space-3);
  color: var(--mb-graphit);
  font-size: var(--mb-text-label);
}

@media (max-width: 767px) {
  .mb-tabelle-huelle { overflow-x: auto; }
}

/* ====================================================================
   LEERE ZUSTÄNDE — eine Aufforderung, keine Entschuldigung.
   ==================================================================== */

.mb-leer {
  padding: var(--mb-space-7);
  background: var(--mb-flaeche);
  border: var(--mb-border);
  border-radius: var(--mb-radius-1);
  text-align: center;
}

.mb-leer__text { max-width: var(--mb-breite-text); margin-inline: auto; color: var(--mb-graphit); }

/* ====================================================================
   HINWEISE
   ==================================================================== */

.mb-hinweis {
  padding: var(--mb-space-4) var(--mb-space-5);
  border-inline-start: var(--mb-border-marke);
  border-radius: var(--mb-radius-1);
  background: var(--mb-papier);
}

.mb-hinweis--frist  { background: var(--mb-warnung-flaeche);    border-color: var(--mb-warnung); }
.mb-hinweis--fehler { background: var(--mb-fehler-flaeche);   border-color: var(--mb-fehler); }
.mb-hinweis--gut    { background: var(--mb-erfolg-flaeche); border-color: var(--mb-erfolg); }

/* ====================================================================
   INHALTSSEITEN
   ==================================================================== */

.mb-beitrag__titel { margin-block: 0 var(--mb-space-4); }

.mb-beitrag__meta {
  margin-block-end: var(--mb-space-6);
  color: var(--mb-graphit);
  font-family: var(--mb-font-text);
  font-size: var(--mb-text-label);
}

.mb-blaettern {
  display: flex;
  justify-content: space-between;
  gap: var(--mb-space-4);
  margin-block-start: var(--mb-space-7);
  padding-block-start: var(--mb-space-5);
  border-block-start: var(--mb-border);
}

/* ====================================================================
   DRUCK — Zahlen und Quellen bleiben, Navigation entfällt.
   ==================================================================== */

@media print {
  .mb-kopf__navigation,
  .mb-kopf__schalter,
  .mb-sprung,
  .mb-blaettern { display: none; }

  .mb-fuss { margin-block-start: var(--mb-space-6); }
}

/*
 * Der Portalwechsler stand hier. Er steht jetzt in mb-core:
 * templates/fusszeile_v1.0.php baut das Markup, mb-layout (assets/css)
 * gestaltet es. Zwei Umsetzungen derselben Komponente waeren genau die
 * Abweichung, gegen die die Umstellung auf eine Schicht gerichtet war.
 */
.mb-fuss__zugehoerig {
  margin: 0 0 var(--mb-space-3);
  color: var(--mb-text-invers-sekundaer);
  font-size: var(--mb-text-label);
  line-height: var(--mb-lh-label);
}

/* ====================================================================
   LOGO — Styleguide 2.3
   Mindestbreiten digital. Schutzraum ringsum mindestens die halbe Hoehe
   des Signets; er wird hier als Innenabstand der tragenden Flaeche
   gehalten, damit keine Bildkante und kein Text hineinragt.
   ==================================================================== */

.mb-kopf__marke { display: inline-block; padding: var(--mb-space-3) 0; }
.mb-kopf__marke .mb-logo { display: block; min-width: 120px; width: 168px; height: auto; }

.mb-fuss__dach { display: inline-block; }
.mb-fuss__dach .mb-logo { display: block; min-width: 190px; width: 220px; height: auto; }

@media (max-width: 479px) {
  .mb-kopf__marke .mb-logo { width: 120px; }
  .mb-fuss__dach .mb-logo { width: 190px; }
}

/* ====================================================================
   LISTEN
   ==================================================================== */

.mb-liste { margin: 0; padding-inline-start: var(--mb-space-5); }
.mb-liste li + li { margin-block-start: var(--mb-space-2); }

/* Gedraengt: viele kurze Eintraege nebeneinander statt untereinander —
   sechzig Staedte als Spalte waeren eine Bildschirmlaenge Leerraum. */
.mb-liste--gedraengt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-2) var(--mb-space-5);
  padding-inline-start: 0;
  list-style: none;
}
.mb-liste--gedraengt li + li { margin-block-start: 0; }
.mb-liste--gedraengt .mb-daten { color: var(--mb-graphit); }