/**
 * Basis-Stylesheet — Layout, Komponenten, Zustände.
 * Version: 1.0.0
 *
 * Lädt nach tokens_v1.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-weit); }
.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-petrol-700); text-underline-offset: 0.15em; }
a:hover { color: var(--mb-petrol-500); }

/* Abschnittsmarke in Standnummern-Notation: A1, B2, C3. */
.mb-standnummer {
  display: inline-block;
  margin-block-end: var(--mb-space-3);
  padding: var(--mb-space-1) var(--mb-space-2);
  border: var(--mb-border-stark);
  border-radius: var(--mb-radius-1);
}

/* ====================================================================
   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-ink);
  font-size: var(--mb-text-sm);
  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-petrol-700);
  border-color: var(--mb-produkt);
}

.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-ink);
  font: inherit;
  font-size: var(--mb-text-sm);
  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-2);
  }

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

  .mb-kopf__navigation[data-offen='true'] .mb-kopf__liste a {
    padding-block: var(--mb-space-3);
    border-block-end: var(--mb-border);
  }
}

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

.mb-fuss {
  margin-block-start: var(--mb-space-9);
  padding-block: var(--mb-space-8) var(--mb-space-6);
  background: var(--mb-flaeche-alt);
  color: var(--mb-ink);
}

.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__liste a {
  color: var(--mb-ink-80);
  font-size: var(--mb-text-sm);
  text-decoration: none;
}

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

.mb-fuss__fuss {
  margin-block-start: var(--mb-space-7);
  padding-block-start: var(--mb-space-5);
  border-block-start: var(--mb-border);
  color: var(--mb-ink-60);
  font-size: var(--mb-text-xs);
}

/* ====================================================================
   BUTTONS — Höhe 48, Radius 2, Gewicht 600.
   Zinkgelb bedeutet immer eine Handlung; genau eine primäre pro Bildschirm.
   Auf Zinkgelb steht niemals weißer Text.
   ==================================================================== */

.mb-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  min-height: var(--mb-space-7);
  padding-inline: var(--mb-space-5);
  font-family: var(--mb-font-text);
  font-size: var(--mb-text-sm);
  font-weight: var(--mb-fw-semibold);
  line-height: var(--mb-lh-snug);
  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-schnell) var(--mb-easing),
              border-color var(--mb-dauer-schnell) var(--mb-easing),
              color var(--mb-dauer-schnell) var(--mb-easing);
}

.mb-knopf--primaer { background: var(--mb-zink); color: var(--mb-ink); }
.mb-knopf--primaer:hover { background: var(--mb-zink-hover); color: var(--mb-ink); }

.mb-knopf--sekundaer {
  background: transparent;
  color: var(--mb-petrol-700);
  border-color: var(--mb-petrol-700);
}

.mb-knopf--sekundaer:hover { background: var(--mb-petrol-100); color: var(--mb-petrol-900); }

.mb-knopf--tertiaer {
  min-height: auto;
  padding-inline: 0;
  background: none;
  color: var(--mb-petrol-700);
  border: 0;
}

.mb-knopf--tertiaer:hover { text-decoration: underline; }

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

.mb-knopf--gefahr:hover { background: var(--mb-fehler-100); }

.mb-knopf[disabled],
.mb-knopf[aria-disabled='true'] {
  background: var(--mb-flaeche-tief);
  color: var(--mb-ink-40);
  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); }

.mb-feld__label {
  display: block;
  margin-block-end: var(--mb-space-2);
  font-size: var(--mb-text-sm);
  font-weight: var(--mb-fw-semibold);
}

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

.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: var(--mb-space-7);
  padding: var(--mb-space-2) var(--mb-space-3);
  background: var(--mb-flaeche);
  color: var(--mb-ink);
  font-family: var(--mb-font-text);
  font-size: var(--mb-text-base);
  border: var(--mb-border);
  border-radius: var(--mb-radius-1);
}

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

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

.mb-feld__fehler {
  display: block;
  margin-block-start: var(--mb-space-2);
  color: var(--mb-fehler);
  font-size: var(--mb-text-sm);
  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);
  border-radius: var(--mb-radius-1);
}

.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);
}

.mb-karte__titel { margin: 0; font-size: var(--mb-text-lg); line-height: var(--mb-lh-snug); }
.mb-karte__meta { margin: 0; color: var(--mb-ink-60); font-size: var(--mb-text-sm); }

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

.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-ink-60); font-size: var(--mb-text-sm); }
.mb-karte__fakten dd { margin: 0; text-align: end; }

/* ====================================================================
   STATUS-TAGS — Pill, Plex Mono, Versalien.
   Zinkfüllung ist Aktionen vorbehalten, deshalb „neu" nur als Umriss.
   ==================================================================== */

.mb-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-1);
  min-height: var(--mb-space-5);
  padding-inline: var(--mb-space-3);
  font-family: var(--mb-font-daten);
  font-size: var(--mb-text-2xs);
  font-weight: var(--mb-fw-medium);
  letter-spacing: var(--mb-ls-label);
  text-transform: uppercase;
  border-radius: var(--mb-radius-pill);
}

.mb-tag--frei       { background: var(--mb-freigabe-100); color: var(--mb-freigabe); }
.mb-tag--ausgebucht { background: var(--mb-flaeche-tief); color: var(--mb-ink-60); }
.mb-tag--frist      { background: var(--mb-frist-100);    color: var(--mb-frist); }
.mb-tag--geprueft   { background: var(--mb-petrol-100);   color: var(--mb-petrol-700); }
.mb-tag--neu        { background: transparent; color: var(--mb-ink-80); border: var(--mb-border-stark); }

/* ====================================================================
   TABELLEN — Zahlenspalten rechtsbündig, kein Zebrastreifen,
   Quelle und Stand am Fuß.
   ==================================================================== */

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

.mb-tabelle th {
  padding: var(--mb-space-2) var(--mb-space-3);
  font-family: var(--mb-font-daten);
  font-size: var(--mb-text-2xs);
  font-weight: var(--mb-fw-medium);
  letter-spacing: var(--mb-ls-label);
  text-transform: uppercase;
  text-align: start;
  color: var(--mb-ink-60);
  border-block-end: var(--mb-border-stark);
}

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

.mb-tabelle th.mb-zahl,
.mb-tabelle td.mb-zahl { text-align: end; }

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

@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-ink-80); }

/* ====================================================================
   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-petrol-050);
}

.mb-hinweis--frist  { background: var(--mb-frist-100);    border-color: var(--mb-frist); }
.mb-hinweis--fehler { background: var(--mb-fehler-100);   border-color: var(--mb-fehler); }
.mb-hinweis--gut    { background: var(--mb-freigabe-100); border-color: var(--mb-freigabe); }

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

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

.mb-beitrag__meta {
  margin-block-end: var(--mb-space-6);
  color: var(--mb-ink-60);
  font-family: var(--mb-font-daten);
  font-size: var(--mb-text-xs);
}

.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); }
}