/* mm-patterns.css — Pattern-Bausteine R1–R11. Setzt die Tokens aus base.html voraus. */

/* R1: Link-Chips */
.mm-chip-link { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--color-primary);
  font-family:var(--font-display); font-weight:600; font-size:12px; cursor:pointer; text-decoration:none;
  transition:all 140ms var(--ease-out); white-space:nowrap; }
.mm-chip-link:hover { border-color:var(--color-secondary); color:var(--color-secondary); transform:translateY(-1px); }
.mm-chip-link.intern { border-color:transparent; background:var(--color-primary-soft); }
.mm-chip-link.sm { padding:3px 10px; font-size:10.5px; }
.mm-chip-link .ic, .mm-chip-link svg { flex-shrink:0; }
/* R1-Ausnahme: Meta-Textlink in dichten Listen (easybill/Deep-Links in Tabellen) */
.mm-metalink, .eb-link { color:var(--color-secondary); font-weight:600; text-decoration:none; }
.mm-metalink:hover, .eb-link:hover { text-decoration:underline; color:var(--color-primary); }

/* R8: Entity-Chips mit Farbpunkt — Gesellschafts-Farben, deckungsgleich mit den Charts */
.mm-ent-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.mm-ent-dot.bochum { background:var(--entity-bochum); }
.mm-ent-dot.zentrale { background:var(--entity-zentrale); }
.mm-ent-dot.akademie { background:var(--entity-akademie); }

/* R2: Icon-Buttons + zweizeilige Zeile */
.mm-icon-btn { width:32px; height:32px; border-radius:999px; border:1px solid var(--border-subtle);
  background:var(--surface-card); color:var(--text-muted); display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; transition:all 140ms var(--ease-out); flex-shrink:0; }
.mm-icon-btn:hover { border-color:var(--color-secondary); color:var(--color-secondary); }
.mm-icon-btn.lg { width:36px; height:36px; border-width:2px; border-color:var(--color-primary); color:var(--color-primary); }
.mm-icon-btn.lg:hover { background:var(--color-primary-soft); }
.mm-icon-btn.on { border-color:var(--color-secondary); color:var(--color-secondary); background:var(--surface-info); }
a.mm-icon-btn { text-decoration:none; }   /* Icon-Button als Link (z.B. „extern öffnen") */
.mm-icon-btn.plain { border-color:transparent; }
.mm-icon-btn.plain:hover { background:var(--surface-muted); color:var(--text-body); }
.mm-icon-btn.danger { color:var(--danger); }
.mm-icon-btn.danger:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-soft-bg, rgba(210,59,59,.10)); }

/* ⋯-Menü (Kebab): weitere Aktionen einklappen. mm-menu-pop wird per JS fixed
   positioniert, damit es nicht am overflow:hidden der Liste abgeschnitten wird. */
.mm-menu { position:relative; display:inline-flex; }
.mm-menu.open > .mm-icon-btn { border-color:var(--color-secondary); color:var(--color-secondary); }
.mm-menu-pop { display:none; position:fixed; min-width:196px; z-index:var(--z-popover, 900);
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); padding:6px; }
.mm-menu-pop form { margin:0; }
.mm-menu-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 11px; border:none; background:none; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:13px; color:var(--text-body); text-decoration:none; white-space:nowrap; }
.mm-menu-item:hover { background:var(--surface-muted); }
.mm-menu-item .ic { color:var(--text-muted); flex-shrink:0; }
.mm-menu-item.danger { color:var(--danger); }
.mm-menu-item.danger .ic { color:var(--danger); }
.mm-menu-item.danger:hover { background:var(--danger-soft-bg, rgba(210,59,59,.10)); }
.mm-menu-sep { height:1px; background:var(--divider); margin:5px 4px; }
.mm-icon-btn.primary { color:var(--color-primary); }
.mm-icon-btn.primary:hover { border-color:var(--color-primary); background:var(--color-primary-soft); }
.mm-row2 { line-height:1.35; min-width:0; }
.mm-row2 b { display:block; font-weight:600; font-size:13px; }
.mm-row2 span { color:var(--text-faint); font-size:12px; }

/* R2: Tooltip (data-tip), erscheint nach 400 ms.
   Der Tooltip hängt NICHT mehr als ::after im Element, sondern als EIN fixed
   positioniertes Element am <body> (mm-core.js). Grund: ein absolut positioniertes
   Pseudo-Element lebt in der Box seines Elements und wird von jedem Vorfahren mit
   `overflow:hidden` abgeschnitten (Tabellenzellen, Karten, Scroll-Container). Fixed
   am Body kann das nicht passieren — dasselbe Muster wie beim ⋯-Menü. */
[data-tip] { position:relative; }
.mm-tip { position:fixed; z-index:var(--z-popover, 900); background:var(--text-body);
  color:var(--surface-card); font-family:var(--font-display); font-weight:500; font-size:11.5px;
  padding:5px 11px; border-radius:7px; max-width:min(320px, 80vw); box-shadow:0 4px 12px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transform:translateY(2px);
  transition:opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
.mm-tip.show { opacity:1; transform:translateY(0); }
/* kurze Labels bleiben einzeilig, lange brechen um statt breit zu laufen */
.mm-tip.nowrap { white-space:nowrap; }

/* R9: Monats-Blättern */
.mm-monthnav { display:inline-flex; align-items:center; gap:10px; }
.mm-monthnav .lbl { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--text-heading);
  min-width:104px; text-align:center; }
.mm-monthnav .mm-icon-btn[disabled] { opacity:.35; cursor:default; pointer-events:none; }

/* R10: Auswahl-Zustände */
.mm-selectable { cursor:pointer; transition:all 140ms var(--ease-out); }
.mm-selectable:hover { border-color:var(--color-secondary); transform:translateY(-1px); }
.mm-selectable.is-selected { border-color:var(--color-secondary); box-shadow:0 0 0 3px rgba(0,140,210,.12); transform:none; }
.mm-kpi-badge { margin-left:auto; padding:3px 10px; border-radius:999px; font-family:var(--font-display);
  font-weight:600; font-size:10.5px; white-space:nowrap; }
.mm-kpi-badge.ok { background:var(--ok-soft-bg); color:var(--ok-soft-text); }
.mm-kpi-badge.warn { background:var(--warn-soft-bg); color:var(--warn-soft-text); }
.mm-kpi-badge.bad { background:var(--bad-soft-bg); color:var(--bad-soft-text); }
.mm-kpi-badge.info { background:var(--color-primary-soft); color:var(--color-primary); }

/* R11: Dropzone + Datei-Chip + URL-Feld */
.mm-dropzone { border:2px dashed var(--border-strong); border-radius:14px; background:var(--surface-info);
  padding:20px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  text-align:center; transition:all 140ms var(--ease-out); }
.mm-dropzone:hover, .mm-dropzone.drag { border-color:var(--color-secondary); background:var(--nav-hover-bg); }
.mm-dropzone .zic { width:38px; height:38px; border-radius:50%; background:var(--color-primary-soft);
  color:var(--color-primary); display:inline-flex; align-items:center; justify-content:center; }
.mm-dropzone .t { font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text-body); }
.mm-dropzone .t em { font-style:normal; color:var(--color-secondary); }
.mm-dropzone .sub { font-size:11.5px; color:var(--text-faint); }
.mm-filechip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:var(--surface-info); font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--color-primary); }
.mm-filechip .x { cursor:pointer; color:var(--text-faint); display:inline-flex; }
.mm-urlfield { display:flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid var(--border-subtle);
  border-radius:12px; background:var(--surface-card); }
.mm-urlfield input { flex:1; min-width:0; border:none; background:none; font-size:12.5px; color:var(--text-body);
  text-overflow:ellipsis; outline:none; padding:0; }
.mm-urlfield:focus-within { border-color:var(--color-secondary); box-shadow:0 0 0 3px rgba(0,140,210,.12); }
.mm-urlstate { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:10.5px; flex-shrink:0; }
.mm-urlstate.ok { background:var(--ok-soft-bg); color:var(--ok-soft-text); }
.mm-urlstate.warn { background:var(--warn-soft-bg); color:var(--warn-soft-text); }
.mm-urlstate.busy { background:var(--surface-muted); color:var(--text-muted); }
.mm-fieldhint { font-size:11.5px; color:var(--text-faint); margin-top:5px; }

/* Stepper (nur unumkehrbare Workflows) */
.mm-stepper { display:flex; align-items:center; }
.mm-step { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:12.5px; }
.mm-step .dot { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-weight:600; font-size:12.5px; flex-shrink:0; }
.mm-step.done { color:var(--text-body); } .mm-step.done .dot { background:var(--success); color:var(--on-brand); }
.mm-step.active { color:var(--color-primary); } .mm-step.active .dot { background:var(--color-primary); color:var(--on-brand); box-shadow:0 0 0 4px rgba(0,140,210,.15); }
.mm-step.todo { color:var(--text-faint); } .mm-step.todo .dot { border:2px solid var(--border-subtle); background:var(--surface-card); color:var(--text-faint); }
.mm-stepline { flex:1; height:2px; background:var(--border-subtle); margin:0 12px; }
.mm-stepline.done { background:var(--success); }

/* Eskalations-Timeline (Mahnwesen) */
.mm-esk { display:flex; align-items:center; }
.mm-esk .node { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:96px; font-size:10.5px;
  color:var(--text-muted); text-align:center; }
.mm-esk .node .p { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.mm-esk .node.done .p { background:var(--success); color:var(--on-brand); }
.mm-esk .node.due .p { background:var(--surface-card); border:2px solid var(--warning); box-shadow:0 0 0 3px rgba(240,145,0,.15); }
.mm-esk .node.due { color:var(--warn-soft-text); font-weight:600; }
.mm-esk .node.todo .p { border:2px dashed var(--border-subtle); background:var(--surface-card); }
.mm-esk .line { flex:1; height:2px; background:var(--border-subtle); margin:0 4px 22px; }
.mm-esk .line.done { background:var(--success); }

/* Verbindungs-Karten */
.mm-conn { position:relative; }
.mm-conn .st { width:8px; height:8px; border-radius:50%; margin-left:auto; }
.mm-conn.ok .st { background:var(--success); }
.mm-conn.warn { border-color:var(--warning) !important; box-shadow:0 0 0 3px rgba(240,145,0,.10); }
.mm-conn.warn .st { background:var(--warning); }
.mm-conn.off .st { background:var(--danger); }

/* Overlay-Suche (Spotlight) */
.mm-spot-scrim { position:fixed; inset:0; background:var(--scrim); z-index:var(--z-modal); display:none;
  align-items:flex-start; justify-content:center; padding:12vh 20px 20px; }
.mm-spot-scrim.open { display:flex; }
.mm-spot { width:520px; max-width:100%; background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:14px; box-shadow:0 12px 32px rgba(0,51,96,.18); overflow:hidden; animation:mmRowIn 240ms var(--ease-out) both; }
.mm-spot .head { display:flex; align-items:center; gap:9px; padding:12px 15px; border-bottom:1px solid var(--divider); }
.mm-spot input { flex:1; border:none !important; background:none !important; font-size:14px; outline:none; }
.mm-spot .grp { font-family:var(--font-display); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); padding:6px 12px 2px; }
.mm-spot .res { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px;
  font-size:13px; cursor:pointer; margin:0 6px; }
.mm-spot .res:hover, .mm-spot .res.sel { background:var(--nav-hover-bg); }
.mm-spot .kbd { border:1px solid var(--border-subtle); border-radius:5px; padding:1px 6px;
  font-family:ui-monospace,monospace; font-size:10px; color:var(--text-faint); }

/* R7: Animations-Keyframes + Utilities */
@keyframes mmRowIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes mmPanelIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes mmSheetIn { from { transform:translateY(100%); } to { transform:none; } }
@keyframes mmW { from { width:0; } }
@keyframes mmH { from { height:0; } }
@keyframes mmSlice { from { stroke-dasharray:0 100; } }
@keyframes mmDraw { from { stroke-dashoffset:1; } }
@keyframes mmFadeIn { from { opacity:0; } }
.anim-row { animation:mmRowIn 240ms var(--ease-out) both; }
.anim-w { animation:mmW 900ms var(--ease-out) 250ms both; }
.anim-h { animation:mmH 600ms var(--ease-out) 150ms both; }
.anim-draw { stroke-dasharray:1; animation:mmDraw 1100ms var(--ease-out) 300ms both; } /* Path braucht pathLength="1" */
.anim-fade { animation:mmFadeIn 500ms ease 900ms both; }
/* Stagger: JS setzt style.animationDelay = i*30ms (mmAnim.stagger), max. 10 Zeilen */
@media (prefers-reduced-motion: reduce) {
  .anim-row, .anim-w, .anim-h, .anim-draw, .anim-fade, .mm-spot { animation:none !important; }
  .mm-panel-aside, .mm-panel-sheet { animation:none !important; transition:none !important; }
}

/* mm-ajax: In-Place-Erledigt + dezenter Toast (Aktion ohne Voll-Reload) */
.mm-row-done { opacity: .55; }
.mm-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  background: var(--text); color: var(--on-brand);
  padding: 10px 16px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  z-index: 9999; pointer-events: none; max-width: 86vw;
}
.mm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .mm-toast { transition: opacity .01s; } }

/* Aktive-Instanz-Anzeige (damit man immer weiß, in welcher Instanz man ist) */
.inst-chip { display:inline-flex; align-items:center; gap:5px; margin:9px 2px 2px; padding:5px 11px;
  border-radius:999px; background:var(--surface-info); color:var(--color-secondary);
  font-family:var(--font-display, 'Poppins', sans-serif); font-weight:600; font-size:12.5px;
  text-decoration:none; border:1px solid transparent; max-width:100%; }
.inst-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inst-chip:hover { border-color:var(--color-secondary); }
.m-inst-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  background:var(--surface-info); color:var(--color-secondary); font-weight:600; font-size:12px;
  text-decoration:none; max-width:44vw; }
.m-inst-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── mm-msel: Mehrfach-Auswahl im Popover (Standorte, später auch andere Listen) ──
   Trigger = .chip, Liste gruppiert, mit Suche + Schnellfiltern. Skaliert von 10 auf
   100+ Einträge, weil gesucht statt gescrollt wird. Auswahl bleibt AUSSEN als Chips
   sichtbar (siehe .mm-msel-tag) — sonst fragt man sich, warum die Liste leer ist. */
.mm-msel { position:relative; display:inline-flex; }
.mm-msel-pop { position:absolute; top:calc(100% + 8px); left:0; z-index:60; width:min(400px, 92vw);
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:16px;
  box-shadow:var(--shadow-panel); padding:12px; display:none; }
.mm-msel.open .mm-msel-pop { display:block; }
.mm-msel-search { width:100%; margin-bottom:10px; }
.mm-msel-quick { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.mm-msel-list { max-height:min(48vh, 340px); overflow-y:auto; margin:0 -4px; }
.mm-msel-group { font-family:var(--font-display); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); display:flex; justify-content:space-between;
  padding:10px 8px 4px; position:sticky; top:0; background:var(--surface-card); }
.mm-msel-row { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:10px;
  cursor:pointer; font-size:13px; }
.mm-msel-row:hover { background:var(--surface-muted); }
.mm-msel-row input { width:auto; margin:0; flex-shrink:0; }
.mm-msel-row .n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-msel-row .v { font-family:var(--font-display); font-feature-settings:'tnum'; color:var(--text-muted);
  white-space:nowrap; flex-shrink:0; }
.mm-msel-row.is-empty { opacity:.55; }
.mm-msel-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--divider); margin-top:8px; padding-top:10px; font-size:12px;
  color:var(--text-muted); }
.mm-msel-none { padding:14px 8px; font-size:12.5px; color:var(--text-muted); text-align:center; }
/* Kontext-Chip in der Zeile: zeigt das Problem, BEVOR man auswählt */
.mm-msel-tag { font-family:var(--font-display); font-size:9.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; border-radius:999px; padding:1px 7px; white-space:nowrap; flex-shrink:0;
  color:var(--text-muted); background:var(--surface-muted); }
.mm-msel-tag.warn { color:var(--warning); background:var(--warn-soft-bg); }
.mm-msel-tag.info { color:var(--color-secondary); background:var(--surface-info); }

/* ── mm-recref: Referenz auf einen Fremd-Datensatz (Objektnummer, Beleg-Nr, …) ──
   Feste Optik, damit Spalten ausgerichtet bleiben und die Nummer als Anker lesbar
   ist. Zustände zeigen, ob der Datensatz sauber, widersprüchlich oder weg ist. */
.mm-recref { display:inline-flex; align-items:center; gap:5px; border-radius:8px; padding:3px 9px;
  font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.01em;
  font-feature-settings:'tnum'; white-space:nowrap; flex-shrink:0; text-decoration:none;
  color:var(--color-primary); background:var(--surface-info); border:1px solid var(--border-subtle);
  transition:border-color 140ms var(--ease-out), background 140ms var(--ease-out); }
a.mm-recref:hover, a.mm-recref:focus-visible { background:var(--color-primary-soft);
  border-color:var(--color-secondary); color:var(--color-primary); }
.mm-recref.warn { color:var(--warning); background:var(--warn-soft-bg); border-color:var(--warning); }
.mm-recref.none { color:var(--text-faint); background:none; border-style:dashed; }
.mm-recref.off { color:var(--text-faint); background:var(--surface-muted); text-decoration:line-through; }

/* Ladebalken: zeigt beim Klick sofort, dass etwas passiert. Läuft bewusst nicht
   bis 100 % — er verschwindet, wenn die neue Seite da ist. */
.mm-ladebalken { position:fixed; top:0; left:0; height:3px; width:0; z-index:var(--z-modal, 1000);
  background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius:0 3px 3px 0; transition:width 8s cubic-bezier(.1,.6,.3,1); pointer-events:none; }
.mm-ladebalken.an { width:92%; }
@media (prefers-reduced-motion: reduce) { .mm-ladebalken { transition:none; width:92%; } }

/* ── mm-erkl: Erklärung auf Abruf ─────────────────────────────────────────────
   Erklärtexte standen als Dauer-Absatz unter jeder Überschrift und lasen sich,
   als hätte sie jemand einmal hingeschrieben und dann vergessen. Sie erklären
   aber eine Regel, die man einmal liest und dann kennt. Also: eingeklappt, per
   <details> ohne JavaScript, und im Weg steht nur noch eine Zeile.
   Markup über {% call ui.erklaerung('Titel') %} … {% endcall %} */
.mm-erkl { margin:0 0 14px; }
.mm-erkl > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  list-style:none; font-family:var(--font-display); font-size:11.5px; font-weight:600;
  letter-spacing:.01em; color:var(--text-muted); border:1px solid var(--border-subtle);
  background:var(--surface-card); border-radius:999px; padding:4px 12px 4px 10px;
  transition:color .15s, border-color .15s; }
.mm-erkl > summary::-webkit-details-marker { display:none; }
.mm-erkl > summary:hover { color:var(--color-secondary); border-color:var(--color-secondary); }
.mm-erkl > summary .ic { color:var(--text-faint); flex-shrink:0; }
.mm-erkl > summary:hover .ic { color:var(--color-secondary); }
.mm-erkl > summary .chev { margin-left:2px; transition:transform .18s; }
.mm-erkl[open] > summary { color:var(--color-secondary); border-color:var(--color-secondary); }
.mm-erkl[open] > summary .chev { transform:rotate(180deg); }
.mm-erkl[open] > summary .ic { color:var(--color-secondary); }
.mm-erkl-text { font-size:12.5px; line-height:1.65; color:var(--text-muted);
  border-left:2px solid var(--border-subtle); padding:2px 0 2px 12px; margin:10px 0 0 10px;
  max-width:78ch; }
.mm-erkl-text p { margin:0 0 6px; }
.mm-erkl-text p:last-child { margin-bottom:0; }
.mm-erkl-text b { color:var(--text-body); }
.mm-erkl-text a { color:var(--color-secondary); font-weight:600; text-decoration:none; }
@media (prefers-reduced-motion: reduce) { .mm-erkl > summary .chev { transition:none; } }

/* ── mm-page: Fußzeile des geteilten Blätterwerks (MM.blaettern) ────────────── */
.mm-page { display:none; align-items:center; justify-content:center; gap:14px;
  padding:12px 4px 2px; }
.mm-page-info { font-size:12px; color:var(--text-muted); font-feature-settings:'tnum';
  white-space:nowrap; }
@media (max-width:520px) { .mm-page { gap:8px; } .mm-page-info { font-size:11px; white-space:normal; text-align:center; } }

/* ── mm-skel: Platzhalter in der Form, die gleich kommt ───────────────────────
   Zwischen Klick und neuer Seite passiert sichtbar nichts. Der Balken oben sagt
   „läuft", aber die Fläche bleibt leer. Weil sich die Design-Sprache wiederholt
   — Kachelreihe, Reiter, Zeilenliste —, lässt sich der Platzhalter aus der
   aktuellen Seite ableiten und passt fast immer.
   Erscheint erst nach 250 ms: schnelle Wege sollen nicht flackern. */
.mm-skel { animation:mm-skel-auf .18s ease-out both; }
/* Der echte Inhalt bleibt stehen, nur unsichtbar — so ist er sofort wieder da,
   wenn der Browser mit „Zurück" aus seinem Cache kommt. Die Überschrift bleibt. */
.container.mm-skel-an > *:not(.page-head):not(.mm-skel-fach) { display:none !important; }
@keyframes mm-skel-auf { from { opacity:0 } to { opacity:1 } }
.mm-skel-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:22px; }
.mm-skel-kpi { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:16px; box-shadow:var(--shadow-card); padding:18px 20px; }
.mm-skel-tabs { display:flex; gap:8px; margin:0 0 18px; flex-wrap:wrap; }
.mm-skel-liste { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:16px; box-shadow:var(--shadow-card); overflow:hidden; }
.mm-skel-zeile { display:flex; align-items:center; gap:16px; padding:15px 18px;
  border-bottom:1px solid var(--divider); }
.mm-skel-zeile:last-child { border-bottom:none; }
.mm-skel-b { display:block; border-radius:7px; background:var(--surface-muted);
  position:relative; overflow:hidden; }
.mm-skel-b.pille { border-radius:999px; }
.mm-skel-b::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation:mm-skel-wandern 1.25s ease-in-out infinite; }
/* Das Theme wird in base.html immer auf <html> gestempelt — ein Medienzweig
   würde hier gegen den Umschalter arbeiten. */
html[data-theme="dark"] .mm-skel-b::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); }
@keyframes mm-skel-wandern { to { transform:translateX(100%) } }
@media (prefers-reduced-motion: reduce) {
  .mm-skel { animation:none; }
  .mm-skel-b::after { animation:none; }
}

/* ── mnav / rp-src / chip-x: die kleinen Wiederholungstäter ──────────────────
   Diese drei standen in vier bis sechs Templates fast wortgleich noch einmal.
   Wer die Pfeile oder eine Herkunfts-Pille anfasst, soll das an einer Stelle tun. */

/* Monats-Pfeile ‹ › — als Knopf oder Link, .off/[disabled] = nicht verfügbar */
.mnav-wrap { display:inline-flex; gap:6px; }
.mnav { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:999px;
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-body); transition:all 140ms var(--ease-out); }
.mnav:hover:not([disabled]):not(.off) { border-color:var(--color-secondary); color:var(--color-secondary); }
.mnav[disabled], .mnav.off { opacity:.4; cursor:default; pointer-events:none; }

/* Herkunfts-/Zustands-Pille an einer Zeile (E-Mail, Lastschrift, Überweisung, …).
   Werte 1:1 aus belege.html + mail_rechnungen.html übernommen — die Zusammenlegung
   soll nichts am Aussehen ändern, nur den Ort, an dem es steht. */
.rp-src { display:inline-flex; align-items:center; gap:3px; flex-shrink:0;
  font-family:var(--font-display); font-size:9.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; border-radius:999px; padding:1px 7px; vertical-align:middle;
  color:var(--ok-soft-text); background:var(--ok-soft-bg); }
.rp-src.ls, .rp-src.gut { color:var(--ok-soft-text); background:var(--ok-soft-bg); }
.rp-src.ue, .rp-src.ann { color:var(--warning); background:var(--warn-soft-bg); }
.rp-src.storno { color:var(--text-muted); background:var(--surface-muted); }
.rp-src.mahn { color:var(--bad-soft-text); background:var(--bad-soft-bg); }
.rp-src.mail { color:var(--color-secondary); background:var(--surface-info); }
.rp-src.card, .rp-src.konto { color:var(--color-primary); background:var(--color-primary-soft); }
/* Herkunft einer vorbereiteten Überweisung (Erstattung/Auslage/Gutschrift/Rechnung) */
.rp-src.erst { color:var(--color-secondary); background:var(--surface-info); }
.rp-src.rech { color:var(--warning); background:var(--warn-soft-bg); }
/* Bank-Umsatz: informativ (die Zahlung ist schon erfolgt) → neutral, keine Aufgaben-Farbe */
.rp-src.pull { text-transform:none; color:var(--color-primary); background:var(--color-primary-soft); }
.rp-src.push { text-transform:none; color:var(--text-muted); background:var(--surface-muted); }

/* Kleines × an einem Chip (Zuordnung wieder lösen) */
.chip-x { border:none; background:transparent; color:inherit; cursor:pointer; padding:0 0 0 2px;
  line-height:0; display:inline-flex; align-items:center; opacity:.6; }
.chip-x:hover { opacity:1; }

/* ── mm-tabelle: Tabelle, die mobil zur Kartenliste wird ─────────────────────
   Design-Regel: nichts läuft horizontal über. Bisher hatte jede Seite ihre eigene
   Fassung derselben acht Zeilen (.fo-table, .kat-table), und die Partner-Tabelle
   in der Verwaltung schob stattdessen seitwärts. Jede Zelle nennt ihre Spalte in
   data-label, dann wird daraus mobil die Zeilenbeschriftung. */
@media (max-width: 640px) {
  .mm-tabelle thead { display:none; }
  .mm-tabelle, .mm-tabelle tbody, .mm-tabelle tr, .mm-tabelle td { display:block; width:100%; }
  .mm-tabelle { min-width:0 !important; }
  .mm-tabelle tr { border:1px solid var(--border-subtle); border-radius:14px; padding:10px 14px;
    margin-bottom:10px; background:var(--surface-card); box-shadow:var(--shadow-card); }
  .mm-tabelle td { border:none; padding:4px 0; display:flex; justify-content:space-between;
    align-items:center; gap:12px; text-align:right; }
  .mm-tabelle td::before { content:attr(data-label); color:var(--text-muted); font-size:11px;
    font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:left; flex-shrink:0; }
  .mm-tabelle td:empty, .mm-tabelle td[data-label=""]::before { display:none; }
  .mm-tabelle select, .mm-tabelle .mm-input { max-width:62%; }
}

/* ── Warndreieck: ein Zahnrad steht ──────────────────────────────────────────
   Absichtlich klein und orange, nicht rot: es ist Wartung, kein Notfall. Es zeigt
   auf die Stelle, an der man es beheben oder wegklicken kann — kein Telegram. */
.mm-warn-tri { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px;
  border-radius:999px; background:var(--warn-soft-bg); color:var(--warning);
  text-decoration:none; font-family:var(--font-display); font-size:12px; font-weight:600;
  border:1px solid transparent; transition:border-color .15s, filter .15s; }
.mm-warn-tri:hover { border-color:var(--warning); filter:brightness(.98); }

/* ── Split-View: beide Spalten fangen auf derselben Höhe an ──────────────────
   .card/.chart-card bringen 18 px Außenabstand oben mit. Links greift der auf
   die erste Karte, rechts nicht — dadurch stand das Detail-Panel 18 px höher als
   die Liste daneben. Die erste Karte einer Spalte braucht diesen Abstand nicht;
   den Abstand nach oben setzt der Container. */
.mm-split-list > :first-child,
.mm-split-list > .mm-panel > :first-child,
.mm-split-detail > :first-child { margin-top:0; }