/* R7-1590 (T7): BAUTEILE DES DESIGN-SYSTEMS als echte Klassen
   Quelle: Design-System-Artifact "MDInform" (project/components/bundle.css).
   Knopf · Feld · Karte · Tabelle · Fenster · Status-Marke · Hinweis ·
   Umschalter · Chip. Nutzt nur die vorhandenen Farbvariablen der Seite
   (--pri, --card, --bd …) - funktioniert in Hell/Dunkel und jedem Admin-Design.
   Wird IMMER geladen (anders als einheitlich.css), weil neue Seiten darauf
   aufbauen. Alte Klassen (.btn, .card …) bleiben unveraendert gueltig. */
:root{
  --md-r-knopf:9px; --md-r-feld:12px; --md-r-karte:11px; --md-r-fenster:14px; --md-r-chip:20px;
  --md-schatten:0 1px 3px rgba(0,0,0,.05); --md-schatten-hoch:0 18px 50px rgba(0,0,0,.28);
  --md-schrift:var(--sans, Inter), system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* ---------- Knopf: eine Form, drei Arten, zwei Groessen ---------- */
.md-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 .88rem/1.2 var(--md-schrift);
  padding:9px 16px;min-height:38px;border-radius:var(--md-r-knopf);border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.md-btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.md-btn--haupt{background:var(--pri)!important;color:#fff!important;border-color:var(--pri)!important}
.md-btn--haupt:hover{background:var(--pri-h, var(--pri))!important}
.md-btn--rand{background:var(--card)!important;color:var(--pri-tx, var(--pri))!important;border-color:var(--bd)!important}
.md-btn--rand:hover{border-color:var(--pri)!important}
.md-btn--leise{background:transparent!important;color:var(--tx2)!important;border-color:transparent!important}
.md-btn--leise:hover{background:var(--soft)!important;color:var(--tx)!important}
.md-btn--gefahr{background:var(--card)!important;color:var(--pri-tx, var(--pri))!important;border-color:var(--pri)!important}
.md-btn--gefahr:hover{background:var(--pri)!important;color:#fff!important}
.md-btn--klein{min-height:32px;padding:6px 11px;font-size:.8rem}
.md-btn[disabled]{opacity:.45;cursor:not-allowed}
/* ---------- Feld ---------- */
.md-feld{display:block;width:100%;box-sizing:border-box;font:400 .94rem/1.4 var(--md-schrift);color:var(--tx);background:var(--card);
  border:1px solid var(--bd);border-radius:var(--md-r-feld);padding:9px 12px;min-height:40px}
textarea.md-feld{min-height:110px;resize:vertical}
.md-feld:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb, var(--pri) 18%, transparent)}
.md-label{display:block;font:600 .8rem/1.3 var(--md-schrift);color:var(--tx2);margin:10px 0 5px}
.md-hilfe{display:block;font-size:.8rem;color:var(--tx2);margin-top:5px}
/* ---------- Karte ---------- */
.md-karte{background:var(--card);border:1px solid var(--bd);border-radius:var(--md-r-karte);padding:16px 18px;box-shadow:var(--md-schatten)}
.md-karte > h3:first-child{margin-top:0}
/* ---------- Tabelle ---------- */
.md-tabelle-rahmen{border:1px solid var(--bd);border-radius:var(--md-r-karte);overflow:auto;background:var(--card)}
.md-tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.md-tabelle th{background:var(--soft);color:var(--tx2);font:700 .72rem/1.3 var(--md-schrift);letter-spacing:.06em;text-transform:uppercase;
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--bd);white-space:nowrap}
.md-tabelle td{padding:9px 12px;border-bottom:1px solid var(--bd);vertical-align:top}
.md-tabelle tr:last-child td{border-bottom:0}
.md-tabelle tbody tr:hover td{background:color-mix(in srgb, var(--soft) 45%, var(--card))}
.md-tabelle .zahl{text-align:right;font-variant-numeric:tabular-nums}
.md-tabelle .neben{color:var(--tx2);font-size:.8rem}
/* ---------- Fenster: EIN Dialog fuer alles (ersetzt die Varianten) ---------- */
.md-fenster-hg{position:fixed;inset:0;background:rgba(26,20,20,.45);z-index:20000;display:flex;align-items:center;
  justify-content:center;padding:16px;backdrop-filter:blur(1.5px)}
.md-fenster{background:var(--card);color:var(--tx);border-radius:var(--md-r-fenster);box-shadow:var(--md-schatten-hoch);
  border-top:4px solid var(--pri);padding:18px 20px;width:100%;max-width:460px;max-height:90vh;overflow:auto;box-sizing:border-box}
.md-fenster.breit{max-width:560px}
.md-fenster h4{font:700 1.05rem/1.3 var(--serif, Georgia), serif;margin:0 0 8px;color:var(--maroon-tx, var(--maroon))}
.md-fenster .md-fenster-text{margin:0 0 12px;white-space:pre-wrap;line-height:1.5}
.md-fenster .leiste{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.md-fenster .leiste .links{margin-right:auto}
.md-farben{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.md-farben button{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent;padding:0}
.md-farben button.aktiv{border-color:var(--tx);box-shadow:0 0 0 2px var(--card) inset}
/* ---------- Status-Marke ---------- */
.md-marke{display:inline-flex;align-items:center;gap:5px;font:700 .74rem/1 var(--md-schrift);padding:5px 10px;border-radius:var(--md-r-chip);white-space:nowrap}
.md-marke::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.md-marke--ok{background:var(--ok-bg,#DCFCE7);color:var(--ok-tx,#166534)}
.md-marke--warn{background:var(--warn-bg,#FEF3C7);color:var(--warn-tx,#92400E)}
.md-marke--info{background:var(--info-bg,#DBEAFE);color:#1E40AF}
.md-marke--neutral{background:var(--soft);color:var(--tx2)}
.md-marke--privat{background:var(--akzent-bg,#F3EAFE);color:#5B21B6}
/* ---------- Hinweis ---------- */
.md-hinweis{display:flex;gap:10px;align-items:flex-start;border-radius:var(--md-r-karte);padding:11px 14px;font-size:.9rem;border:1px solid var(--bd);background:var(--card)}
.md-hinweis b{display:block;margin-bottom:2px}
.md-hinweis--info{background:var(--info-bg,#EFF6FF);border-color:#BFDBFE}
.md-hinweis--ok{background:var(--ok-bg,#DCFCE7);border-color:#BBF7D0;color:var(--ok-tx,#166534)}
.md-hinweis--warn{background:var(--warn-bg,#FEF3C7);border-color:#FDE68A;color:var(--warn-tx,#92400E)}
.md-hinweis--fehler{background:var(--fehler-bg, var(--soft));border-color:#FECACA;color:var(--pri-tx, var(--pri))}
/* ---------- Umschalter ---------- */
.md-umschalter{display:inline-flex;flex-wrap:wrap;gap:5px;padding:5px;background:var(--card);border:1px solid var(--bd);
  border-radius:var(--md-r-fenster);box-shadow:var(--md-schatten)}
.md-umschalter button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 13px;border:0;border-radius:10px;
  background:transparent;color:var(--tx);font:700 .86rem/1.3 var(--md-schrift);cursor:pointer;text-align:left}
.md-umschalter button small{font:400 .74rem/1.3 var(--md-schrift);color:var(--tx2)}
.md-umschalter button:hover{background:var(--soft)}
.md-umschalter button.aktiv{background:var(--pri);color:#fff}
.md-umschalter button.aktiv small{color:rgba(255,255,255,.88)}
/* ---------- Chip ---------- */
.md-chip{display:inline-flex;align-items:center;gap:5px;font:600 .8rem/1 var(--md-schrift);padding:6px 11px;border-radius:var(--md-r-chip);
  background:var(--card);border:1px solid var(--bd);color:var(--tx);cursor:pointer}
.md-chip:hover{border-color:var(--pri);color:var(--pri-tx, var(--pri))}
.md-chip.aktiv{background:var(--pri);border-color:var(--pri);color:#fff}
.md-chip--ki{background:var(--akzent-bg,#F3EAFE);border-color:transparent;color:#5B21B6}
body.modus-dark .md-marke--privat, body.modus-dark .md-chip--ki{color:#C4B5FD}
