/* MarkiMedia Info-Baustein · mm-info.css · Baustein-Fassung 1.1
 *
 * Quelle: markimedia-info\fassungen\1.1\web\mm-info.css – in Programmen nur als byte-gleiche
 * Kopie (markimedia-info\pruefen.mjs prueft das).
 *
 * Farben: Jedes Programm darf die OEFFENTLICHEN Variablen auf :root setzen,
 * z. B.  :root { --mmi-karte: var(--karte); --mmi-text: var(--text); }
 *   --mmi-karte --mmi-flaeche --mmi-rand --mmi-rand-stark --mmi-text
 *   --mmi-leise --mmi-blass --mmi-akzent --mmi-akzent-rgb --mmi-gut
 *   --mmi-warn --mmi-tint --mmi-schatten --mmi-symbol-grund --mmi-fokus
 *   --mmi-schrift --mmi-schrift-mono --mmi-verlauf --mmi-knopf-verlauf
 *   --mmi-ebene (z-index des Fensters, Vorgabe 1000)
 * Fehlt eine, gilt der Hauswert (Hub-Farben, abgeleitet aus
 * markimedia-web\css\farben.css) – dunkel als Grund, hell bei
 *   :root[data-theme="light"]  oder  ohne data-theme bei hellem System
 *   (prefers-color-scheme: light)  oder  data-mmi-thema="hell" am Baustein.
 * data-mmi-thema="dunkel" erzwingt dunkel. Kein Skript noetig, kein Aufblitzen.
 *
 * Bewegung: die Uebergaenge hier (Reitermarke 260 ms, Knoepfe 160 ms) und die
 * Web-Animationen in mm-info.js entfallen bei prefers-reduced-motion.
 */

.mmi-wurzel [hidden] { display: none !important; }

/* ── Hauswerte: dunkel ─────────────────────────────────────────────── */
.mmi-wurzel {
  color-scheme: dark;
  --mmi-std-karte: #141d31;
  --mmi-std-flaeche: #111a2c;
  --mmi-std-rand: #26324a;
  --mmi-std-rand-stark: #3a4966;
  --mmi-std-text: #e8edf7;
  --mmi-std-leise: #aab4c8;
  --mmi-std-blass: #8e99b0;
  --mmi-std-akzent: #8fb0ff;
  --mmi-std-akzent-rgb: 143, 176, 255;
  --mmi-std-gut: #34d399;
  --mmi-std-gut-flaeche: rgba(52, 211, 153, .14);
  --mmi-std-warn: #fbbf24;
  --mmi-std-warn-flaeche: rgba(251, 191, 36, .12);
  --mmi-std-tint: 226, 232, 245;
  --mmi-std-schatten: 0, 0, 0;
  --mmi-std-symbol-grund: #0c1322;
  --mmi-std-fokus: #8fb0ff;
  --mmi-std-glanz: .11;
}

/* ── Hauswerte: hell ───────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mmi-wurzel:not([data-mmi-thema="dunkel"]) {
    color-scheme: light;
    --mmi-std-karte: #ffffff;
    --mmi-std-flaeche: #f4f7fc;
    --mmi-std-rand: #d5dde9;
    --mmi-std-rand-stark: #a9b6cc;
    --mmi-std-text: #0b1220;
    --mmi-std-leise: #3c465c;
    --mmi-std-blass: #56607a;
    --mmi-std-akzent: #1741c9;
    --mmi-std-akzent-rgb: 23, 65, 201;
    --mmi-std-gut: #046c4e;
    --mmi-std-gut-flaeche: rgba(4, 120, 87, .10);
    --mmi-std-warn: #92400e;
    --mmi-std-warn-flaeche: rgba(251, 191, 36, .16);
    --mmi-std-tint: 11, 18, 32;
    --mmi-std-schatten: 11, 18, 32;
    --mmi-std-symbol-grund: #111a2c;
    --mmi-std-fokus: #1741c9;
    --mmi-std-glanz: .07;
  }
}
:root[data-theme="light"] .mmi-wurzel:not([data-mmi-thema="dunkel"]),
.mmi-wurzel[data-mmi-thema="hell"] {
  color-scheme: light;
  --mmi-std-karte: #ffffff;
  --mmi-std-flaeche: #f4f7fc;
  --mmi-std-rand: #d5dde9;
  --mmi-std-rand-stark: #a9b6cc;
  --mmi-std-text: #0b1220;
  --mmi-std-leise: #3c465c;
  --mmi-std-blass: #56607a;
  --mmi-std-akzent: #1741c9;
  --mmi-std-akzent-rgb: 23, 65, 201;
  --mmi-std-gut: #046c4e;
  --mmi-std-gut-flaeche: rgba(4, 120, 87, .10);
  --mmi-std-warn: #92400e;
  --mmi-std-warn-flaeche: rgba(251, 191, 36, .16);
  --mmi-std-tint: 11, 18, 32;
  --mmi-std-schatten: 11, 18, 32;
  --mmi-std-symbol-grund: #111a2c;
  --mmi-std-fokus: #1741c9;
  --mmi-std-glanz: .07;
}

/* ── Wirksame Werte: Programmwert, sonst Hauswert ──────────────────── */
.mmi-wurzel {
  --mmi-w-karte: var(--mmi-karte, var(--mmi-std-karte));
  --mmi-w-flaeche: var(--mmi-flaeche, var(--mmi-std-flaeche));
  --mmi-w-rand: var(--mmi-rand, var(--mmi-std-rand));
  --mmi-w-rand-stark: var(--mmi-rand-stark, var(--mmi-std-rand-stark));
  --mmi-w-text: var(--mmi-text, var(--mmi-std-text));
  --mmi-w-leise: var(--mmi-leise, var(--mmi-std-leise));
  --mmi-w-blass: var(--mmi-blass, var(--mmi-std-blass));
  --mmi-w-akzent: var(--mmi-akzent, var(--mmi-std-akzent));
  --mmi-w-akzent-rgb: var(--mmi-akzent-rgb, var(--mmi-std-akzent-rgb));
  --mmi-w-gut: var(--mmi-gut, var(--mmi-std-gut));
  --mmi-w-gut-flaeche: var(--mmi-gut-flaeche, var(--mmi-std-gut-flaeche));
  --mmi-w-warn: var(--mmi-warn, var(--mmi-std-warn));
  --mmi-w-warn-flaeche: var(--mmi-warn-flaeche, var(--mmi-std-warn-flaeche));
  --mmi-w-tint: var(--mmi-tint, var(--mmi-std-tint));
  --mmi-w-schatten: var(--mmi-schatten, var(--mmi-std-schatten));
  --mmi-w-symbol-grund: var(--mmi-symbol-grund, var(--mmi-std-symbol-grund));
  --mmi-w-fokus: var(--mmi-fokus, var(--mmi-std-fokus));
  --mmi-w-schrift: var(--mmi-schrift, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif);
  --mmi-w-mono: var(--mmi-schrift-mono, "Cascadia Mono", Consolas, "Courier New", monospace);
  --mmi-w-verlauf: var(--mmi-verlauf, linear-gradient(100deg, #7b1ff0, #2563eb 55%, #22d3ee));
  --mmi-w-knopf-verlauf: var(--mmi-knopf-verlauf, linear-gradient(100deg, #6d28d9, #1d4ed8));
  --mmi-kurve: cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--mmi-w-schrift);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mmi-w-text);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.mmi-wurzel *, .mmi-wurzel *::before, .mmi-wurzel *::after { box-sizing: border-box; }
.mmi-wurzel :focus-visible { outline: 2px solid var(--mmi-w-fokus); outline-offset: 2px; }
.mmi-wurzel ::selection { background: rgba(var(--mmi-w-akzent-rgb), .32); }
.mmi-wurzel p { margin: 0; }
.mmi-wurzel button { font: inherit; letter-spacing: inherit; }

.mmi-icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Fenster ──────────────────────────────────────────────────────── */
.mmi-schleier {
  position: fixed; inset: 0; z-index: var(--mmi-ebene, 1000);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(var(--mmi-w-schatten), .52);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mmi-schleier { -webkit-backdrop-filter: blur(3px) saturate(115%); backdrop-filter: blur(3px) saturate(115%); }
}
.mmi-fenster {
  position: relative;
  display: flex; flex-direction: column;
  width: min(720px, 100%);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--mmi-w-karte);
  border: 1px solid var(--mmi-w-rand-stark);
  border-radius: 16px;
  box-shadow: 0 32px 90px -24px rgba(var(--mmi-w-schatten), .62), 0 2px 8px rgba(var(--mmi-w-schatten), .12);
}
/* Das Info-Fenster hat eine feste Hoehe: der Reiterwechsel laesst es nicht springen. */
.mmi-fenster.mmi-info-fenster { height: min(700px, 100%); }
.mmi-fenster.mmi-mittel { width: min(600px, 100%); }
.mmi-fenster.mmi-klein { width: min(520px, 100%); }

.mmi-fensterkopf {
  display: flex; align-items: center; gap: 12px;
  flex: none;
  min-height: 52px;
  padding: 10px 12px 10px 22px;
}
.mmi-fenstertitel {
  margin: 0; flex: 1; min-width: 0;
  font-size: 15px; font-weight: 650; line-height: 1.3;
  letter-spacing: -.005em;
  outline: none;
}
/* Der Titel bekommt den Fokus nur per Skript beim Oeffnen (tabindex=-1: Screenreader liest ab
   hier, Tab geht von hier ins Fenster). Er ist kein Bedienelement - also kein Fokusrahmen, auch
   nicht, wenn das Fenster von selbst aufgeht (Hub H1) oder per Tastatur geoeffnet wurde. */
.mmi-wurzel .mmi-fenstertitel:focus, .mmi-wurzel .mmi-fenstertitel:focus-visible { outline: none; }
.mmi-zu {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--mmi-w-leise);
  cursor: pointer;
  transition: background-color 160ms, color 160ms;
}
.mmi-zu:hover { background: rgba(var(--mmi-w-tint), .08); color: var(--mmi-w-text); }
.mmi-zu .mmi-icon { width: 18px; height: 18px; }

/* ── Inhalt: Kopf, Reiter, Flaeche ────────────────────────────────── */
.mmi-info {
  display: flex; flex-direction: column;
  min-height: 0; flex: 1 1 auto;
  container-type: inline-size;
}
.mmi-eingebettet .mmi-info { flex: none; }
.mmi-kopf {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  flex: none;
  padding: 6px 24px 18px;
}
/* Zarter Markenschimmer oben (Violett links, Cyan rechts) – liegt UNTER
   Titel und Kopf: das Pseudo-Element steht im Baum zuerst, beide danach
   sind positioniert und werden deshalb darueber gezeichnet. */
.mmi-fenster::before, .mmi-eingebettet .mmi-kopf::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(123, 31, 240, var(--mmi-std-glanz)), transparent 72%),
    radial-gradient(50% 100% at 100% 0%, rgba(34, 211, 238, calc(var(--mmi-std-glanz) * .7)), transparent 72%);
}
.mmi-fensterkopf, .mmi-info, .mmi-koerper, .mmi-neu-frage, .mmi-knopfreihe, .mmi-koerper-fuss { position: relative; }
.mmi-eingebettet .mmi-kopf { padding-top: 18px; }
.mmi-eingebettet .mmi-kopf::before { height: auto; bottom: 0; border-radius: 12px 12px 0 0; }
.mmi-symbol {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mmi-w-symbol-grund);
  box-shadow: 0 0 0 1px rgba(var(--mmi-w-tint), .10), 0 12px 26px -16px rgba(var(--mmi-w-schatten), .8);
}
.mmi-symbol img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mmi-monogramm {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--mmi-w-knopf-verlauf); color: #fff;
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
}
.mmi-kopf-text { position: relative; min-width: 0; flex: 1; }
.mmi-name {
  font-size: 20px; font-weight: 650; line-height: 1.25; letter-spacing: -.012em;
  overflow-wrap: anywhere;
}
.mmi-meta { margin-top: 2px; font-size: 13px; color: var(--mmi-w-leise); font-variant-numeric: tabular-nums; }
.mmi-kurz { margin-top: 6px; font-size: 13.5px; color: var(--mmi-w-leise); }

.mmi-reiter {
  position: relative;
  display: flex; gap: 2px; flex: none;
  padding: 0 16px;
  border-bottom: 1px solid var(--mmi-w-rand);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.mmi-reiter::-webkit-scrollbar { display: none; }
.mmi-reiter-knopf {
  position: relative;
  flex: none;
  padding: 9px 10px 11px;
  border: 0; border-radius: 8px 8px 0 0;
  background: transparent; color: var(--mmi-w-leise);
  font-size: 13.5px; font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms, background-color 160ms;
}
.mmi-reiter-knopf:hover { color: var(--mmi-w-text); background: rgba(var(--mmi-w-tint), .04); }
.mmi-reiter-knopf[aria-selected="true"] { color: var(--mmi-w-text); }
.mmi-reiter-knopf:focus-visible { outline-offset: -3px; }
.mmi-reiter-marke {
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--mmi-w-verlauf);
  pointer-events: none;
  transition: transform 260ms var(--mmi-kurve), width 260ms var(--mmi-kurve);
}
.mmi-reiter-marke.mmi-sofort, .mmi-wahl-marke.mmi-sofort { transition: none; }

.mmi-flaeche {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 24px 18px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--mmi-w-tint), .22) transparent;
}
.mmi-eingebettet .mmi-flaeche { overflow: visible; }
.mmi-flaeche::-webkit-scrollbar { width: 12px; }
.mmi-flaeche::-webkit-scrollbar-thumb { background: rgba(var(--mmi-w-tint), .18); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.mmi-flaeche::-webkit-scrollbar-track { background: transparent; }
.mmi-tafel { outline: none; padding-top: 6px; }
.mmi-tafel:focus-visible { outline: 2px solid var(--mmi-w-fokus); outline-offset: 2px; border-radius: 6px; }

/* ── Abschnitte ───────────────────────────────────────────────────── */
.mmi-abschnitt {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--mmi-w-rand);
}
.mmi-abschnitt:first-child { border-top: 0; }
.mmi-abschnitt-titel {
  margin: 0;
  font-size: 12.5px; font-weight: 620; line-height: 1.4;
  color: var(--mmi-w-leise);
  letter-spacing: .01em;
}
.mmi-abschnitt-inhalt { display: grid; gap: 10px; min-width: 0; justify-items: start; }
.mmi-abschnitt-inhalt > * { max-width: 100%; }
@container (min-width: 560px) {
  .mmi-abschnitt { grid-template-columns: 150px minmax(0, 1fr); gap: 4px 22px; }
  .mmi-abschnitt-titel { padding-top: 1px; }
}
.mmi-satz { color: var(--mmi-w-text); }
.mmi-leise { color: var(--mmi-w-leise); font-size: 13px; }
.mmi-leer { color: var(--mmi-w-leise); padding: 18px 0; }

.mmi-zustand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mmi-punkt {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--mmi-w-gut);
  box-shadow: 0 0 0 4px var(--mmi-w-gut-flaeche);
}
.mmi-punkt-akzent { background: var(--mmi-w-akzent); box-shadow: 0 0 0 4px rgba(var(--mmi-w-akzent-rgb), .16); }
.mmi-punkt-warn { background: var(--mmi-w-warn); box-shadow: 0 0 0 4px var(--mmi-w-warn-flaeche); }
.mmi-schlitz, .mmi-zusatz { width: 100%; min-width: 0; }
.mmi-zusatz { padding: 16px 0; border-top: 1px solid var(--mmi-w-rand); }

.mmi-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mmi-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--mmi-w-rand); border-radius: 9px;
  background: rgba(var(--mmi-w-tint), .05); color: var(--mmi-w-text);
  font-size: 13.5px; font-weight: 560; line-height: 1.25; text-align: center;
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms, transform 160ms var(--mmi-kurve), filter 160ms;
}
.mmi-knopf:hover { background: rgba(var(--mmi-w-tint), .09); border-color: var(--mmi-w-rand-stark); }
.mmi-knopf:active { transform: translateY(1px); }
.mmi-knopf[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }
.mmi-knopf-haupt { border-color: transparent; background: var(--mmi-w-knopf-verlauf); color: #fff; }
.mmi-knopf-haupt:hover { background: var(--mmi-w-knopf-verlauf); border-color: transparent; filter: brightness(1.12); }
.mmi-knopf-symbol { min-height: 30px; width: 30px; padding: 0; border-radius: 8px; }
.mmi-dreht .mmi-icon { animation: mmi-drehen 900ms linear infinite; }
@keyframes mmi-drehen { to { transform: rotate(360deg); } }

.mmi-meldung { min-height: 1.5em; font-size: 13px; color: var(--mmi-w-leise); }
.mmi-meldung:empty { display: none; }
.mmi-meldung-gut { color: var(--mmi-w-gut); font-weight: 560; }
.mmi-meldung-neu { color: var(--mmi-w-akzent); font-weight: 560; }
.mmi-meldung-fehler { color: var(--mmi-w-warn); font-weight: 560; }

.mmi-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: start; }
.mmi-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0; border: 0; background: none;
  color: var(--mmi-w-akzent);
  font-size: 13.5px; font-weight: 520; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--mmi-w-akzent-rgb), .38);
  cursor: pointer; border-radius: 4px;
  transition: text-decoration-color 160ms;
}
.mmi-link:hover { text-decoration-color: currentColor; }
.mmi-link .mmi-icon { width: 14px; height: 14px; opacity: .85; }
.mmi-adresse-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mmi-adresse-name { color: var(--mmi-w-leise); font-size: 13px; }
.mmi-adresse {
  font-family: var(--mmi-w-mono); font-size: 12.5px; font-weight: 400;
  color: var(--mmi-w-text);
  -webkit-user-select: all; user-select: all;
  overflow-wrap: anywhere;
}

.mmi-recht {
  display: grid; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--mmi-w-rand); border-radius: 12px;
  background: var(--mmi-w-flaeche);
  color: var(--mmi-w-leise); font-size: 13px;
}

/* Darstellung: drei Knoepfe mit gleitender Markierung */
.mmi-wahl {
  position: relative;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 3px;
  border: 1px solid var(--mmi-w-rand); border-radius: 11px;
  background: var(--mmi-w-flaeche);
}
.mmi-wahl-option { position: relative; display: block; cursor: pointer; }
.mmi-wahl-eingabe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.mmi-wahl-text {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 4px 16px;
  border-radius: 8px;
  color: var(--mmi-w-leise); font-size: 13px; font-weight: 560; white-space: nowrap;
  transition: color 160ms;
}
.mmi-wahl-eingabe:checked + .mmi-wahl-text { color: var(--mmi-w-text); }
.mmi-wahl-option:hover .mmi-wahl-text { color: var(--mmi-w-text); }
.mmi-wahl-eingabe:focus-visible + .mmi-wahl-text { outline: 2px solid var(--mmi-w-fokus); outline-offset: 0; }
.mmi-wahl-marke {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 0;
  border-radius: 8px;
  background: var(--mmi-w-karte);
  box-shadow: 0 1px 3px rgba(var(--mmi-w-schatten), .22), inset 0 0 0 1px var(--mmi-w-rand);
  pointer-events: none;
  transition: transform 260ms var(--mmi-kurve), width 260ms var(--mmi-kurve);
}

/* ── Versionsverlauf ──────────────────────────────────────────────── */
.mmi-verlauf { list-style: none; margin: 0; padding: 0; }
.mmi-eintrag { position: relative; padding: 0 0 18px 24px; }
.mmi-eintrag::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--mmi-w-karte);
  border: 2px solid var(--mmi-w-rand-stark);
}
.mmi-eintrag::after {
  content: ""; position: absolute; left: 8px; top: 21px; bottom: 1px;
  width: 1px; background: var(--mmi-w-rand);
}
.mmi-verlauf > .mmi-eintrag:last-child { padding-bottom: 6px; }
.mmi-verlauf > .mmi-eintrag:last-child::after { display: none; }
.mmi-verlauf-neu > .mmi-eintrag:first-child::before {
  border-color: var(--mmi-w-akzent); background: var(--mmi-w-akzent);
  box-shadow: 0 0 0 4px rgba(var(--mmi-w-akzent-rgb), .16);
}
.mmi-eintrag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mmi-eintrag-fassung { font-weight: 650; font-variant-numeric: tabular-nums; }
.mmi-eintrag-datum { color: var(--mmi-w-leise); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mmi-eintrag-zeilen { margin: 6px 0 0; padding: 0 0 0 18px; list-style: disc; }
.mmi-eintrag-zeilen li { margin: 3px 0; overflow-wrap: anywhere; }
.mmi-eintrag-zeilen li::marker { color: var(--mmi-w-blass); }
.mmi-wichtig {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px !important;
  color: var(--mmi-w-warn); font-size: 12.5px; font-weight: 600;
}
.mmi-eintrag-wichtig::before { border-color: var(--mmi-w-warn); }
.mmi-chip {
  display: inline-flex; align-items: center;
  min-height: 20px; padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--mmi-w-tint), .07);
  color: var(--mmi-w-leise);
  font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  align-self: center;
}
.mmi-chip-diese { background: rgba(var(--mmi-w-akzent-rgb), .14); color: var(--mmi-w-akzent); }
.mmi-chip-mono { font-family: var(--mmi-w-mono); font-weight: 500; font-size: 11.5px; }

/* aufklappbare Teile (Aeltere Fassungen, Lizenztext) */
.mmi-klappe > summary {
  display: inline-flex; align-items: center; gap: 6px;
  list-style: none;
  padding: 4px 8px 4px 4px; margin-left: -4px;
  border-radius: 8px;
  color: var(--mmi-w-akzent); font-size: 13.5px; font-weight: 560;
  cursor: pointer;
  transition: background-color 160ms;
}
.mmi-klappe > summary::-webkit-details-marker { display: none; }
.mmi-klappe > summary:hover { background: rgba(var(--mmi-w-akzent-rgb), .08); }
.mmi-klappe > summary .mmi-icon { width: 15px; height: 15px; transition: transform 240ms var(--mmi-kurve); }
.mmi-klappe[data-mmi-klapp="auf"] > summary .mmi-icon { transform: rotate(90deg); }
.mmi-klappe-inhalt { padding-top: 12px; }
details.mmi-klappt { overflow: hidden; box-sizing: border-box; }

/* ── Lizenzen Dritter ─────────────────────────────────────────────── */
.mmi-dritte { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.mmi-baustein {
  padding: 12px 14px;
  border: 1px solid var(--mmi-w-rand); border-radius: 12px;
  background: var(--mmi-w-flaeche);
}
.mmi-baustein-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mmi-baustein-name { font-weight: 620; overflow-wrap: anywhere; }
.mmi-baustein-fassung { color: var(--mmi-w-leise); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mmi-baustein-unter { margin-top: 2px !important; color: var(--mmi-w-leise); font-size: 12.5px; overflow-wrap: anywhere; }
.mmi-baustein .mmi-klappe { margin-top: 6px; }
.mmi-baustein .mmi-klappe-inhalt { padding-top: 8px; }
.mmi-text {
  margin: 0;
  max-height: 280px; overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--mmi-w-rand); border-radius: 9px;
  background: var(--mmi-w-karte);
  color: var(--mmi-w-leise);
  font-family: var(--mmi-w-mono); font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
}

/* ── Fuss ─────────────────────────────────────────────────────────── */
.mmi-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px;
  margin-top: 6px; padding: 14px 0 2px;
  border-top: 1px solid var(--mmi-w-rand);
  color: var(--mmi-w-blass); font-size: 12.5px;
}
.mmi-fuss .mmi-link { font-size: 13px; }
.mmi-fuss .mmi-meldung { flex: 1 0 100%; }

/* ── Fenster „Neue Fassung" (Hub H1) und nur Verlauf (Hub H5) ─────── */
.mmi-neu-kopf { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.mmi-neu-kopf .mmi-fenstertitel { flex: none; overflow-wrap: anywhere; }
.mmi-neu-kopf .mmi-symbol { width: 44px; height: 44px; border-radius: 12px; }
.mmi-neu-kopf .mmi-monogramm { font-size: 20px; }
.mmi-fenster.mmi-mit-symbol .mmi-fensterkopf { padding-top: 16px; padding-bottom: 12px; }
.mmi-fenster.mmi-mit-symbol .mmi-fenstertitel { font-size: 17px; }
.mmi-unter { margin-top: 1px; color: var(--mmi-w-leise); font-size: 13px; font-weight: 400; }
.mmi-koerper {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 6px 24px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--mmi-w-tint), .22) transparent;
}
.mmi-neu-frage { flex: none; padding: 12px 24px 0; font-weight: 620; border-top: 1px solid var(--mmi-w-rand); }
.mmi-knopfreihe {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
  flex: none;
  padding: 14px 24px 20px;
}
.mmi-knopfreihe .mmi-knopf { min-height: 38px; padding: 8px 18px; }
.mmi-koerper-fuss { flex: none; padding: 12px 24px 18px; border-top: 1px solid var(--mmi-w-rand); }
.mmi-koerper-fuss .mmi-meldung { margin-top: 6px; }

/* ── Schmal (Handy, 360 px) ───────────────────────────────────────── */
@media (max-width: 520px) {
  .mmi-schleier { padding: 12px; }
  .mmi-fenster { max-height: 100%; }
  .mmi-kopf { padding: 4px 16px 14px; gap: 12px; }
  .mmi-symbol { width: 52px; height: 52px; border-radius: 14px; }
  .mmi-name { font-size: 18px; }
  .mmi-reiter { padding: 0 6px; gap: 0; }
  .mmi-reiter-knopf { padding-left: 7px; padding-right: 7px; font-size: 13px; }
  .mmi-flaeche, .mmi-koerper { padding-left: 16px; padding-right: 16px; }
  .mmi-fensterkopf { padding-left: 16px; }
  .mmi-neu-frage, .mmi-koerper-fuss { padding-left: 16px; padding-right: 16px; }
  .mmi-knopfreihe { padding: 12px 16px 16px; }
  .mmi-knopfreihe .mmi-knopf { flex: 1 1 auto; }
  .mmi-wahl { display: grid; width: 100%; }
  .mmi-wahl-text { padding: 4px 8px; }
}
@media (max-height: 640px) and (min-width: 521px) {
  .mmi-kopf { padding-bottom: 12px; }
  .mmi-symbol { width: 56px; height: 56px; border-radius: 14px; }
}

/* ── Bewegung reduzieren ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mmi-wurzel, .mmi-wurzel *, .mmi-wurzel *::before, .mmi-wurzel *::after, details.mmi-klappt {
    transition: none !important;
    animation: none !important;
  }
}