/* =====================================================================
   Design „MBAS IT“ (4.2.1) – Farben und Schrift von mb-key.de.
   Greift nur bei <html data-design="studio" data-brand="mbasit">: Aufbau, Abstände und Raster
   kommen unverändert aus theme3.css (Studio), hier stehen nur Farben, Schrift und wenige Akzente.
   Auswahl: Verwaltung › Organisation › Darstellung (Hauptadmin), gilt für alle Benutzer und die
   Unterschriftsseite. Hell/Dunkel bleibt je Benutzer. Keine externen Anfragen, keine Inline-Styles.
   Hellblau #00abde und Grün #94ba30 nur für Flächen, Linien und Zähler – nie für Text auf Weiß.
   ===================================================================== */

@font-face{font-family:"Inter MB";src:url(../fonts/Inter-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter MB";src:url(../fonts/Inter-SemiBold.woff) format("woff");font-weight:500 650;font-style:normal;font-display:swap}
@font-face{font-family:"Inter MB";src:url(../fonts/Inter-Bold.woff) format("woff");font-weight:651 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter MB Display";src:url(../fonts/InterDisplay-Bold.woff) format("woff");font-weight:600 900;font-style:normal;font-display:swap}

/* ---------- 1. Tokens ---------- */
:root[data-brand=mbasit]{
  --mb-bg:#f2f5f8;--mb-panel:#fff;--mb-row:#f6f9fb;--mb-text:#14212b;--mb-muted:#4c5b67;--mb-line:#d5dee5;
  --mb-primary:#004166;--mb-primary-hover:#002c46;--mb-on-primary:#fff;--mb-primary-soft:#e3edf3;
  --mb-accent:#00abde;--mb-accent-soft:#e6f6fc;--mb-brand-green:#94ba30;--mb-focus:#00abde;--mb-link:#1d4f91;
  --mb-sidebar-bg:#004166;--mb-sidebar-text:#fff;--mb-sidebar-muted:#b9d3e3;--mb-sidebar-line:#1f5a7d;
  --mb-sidebar-active-bg:#fff;--mb-sidebar-active-text:#004166;--mb-sidebar-input:#0b5079;
  --mb-ok:#3e5410;--mb-ok-soft:#e8f2d3;--mb-warning:#7a3e00;--mb-warning-soft:#fcebd5;--mb-danger:#8e2f22;--mb-danger-soft:#f8e1dd;
  --mb-shadow:0 1px 2px #0041660f,0 8px 24px #00416614;
  --mb-font:"Inter MB",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mb-font-display:"Inter MB Display","Inter MB",Inter,system-ui,sans-serif;
}
:root[data-brand=mbasit][data-theme=dark]{
  --mb-bg:#0b1a24;--mb-panel:#122634;--mb-row:#172e3e;--mb-text:#e6eef4;--mb-muted:#9fb3c2;--mb-line:#24425a;
  --mb-primary:#5ccbf0;--mb-primary-hover:#8adcf5;--mb-on-primary:#0b1a24;--mb-primary-soft:#0f3347;
  --mb-accent:#00abde;--mb-accent-soft:#0f3347;--mb-brand-green:#a8cc4a;--mb-focus:#5ccbf0;--mb-link:#9cc2f2;
  --mb-sidebar-bg:#06263b;--mb-sidebar-text:#e6eef4;--mb-sidebar-muted:#8fb0c6;--mb-sidebar-line:#173f58;
  --mb-sidebar-active-bg:#5ccbf0;--mb-sidebar-active-text:#06263b;--mb-sidebar-input:#0d3550;
  --mb-ok:#b5d86a;--mb-ok-soft:#1f3310;--mb-warning:#f5b56b;--mb-warning-soft:#3a2510;--mb-danger:#f19c8f;--mb-danger-soft:#3d1a15;
  --mb-shadow:0 1px 2px #0000004d,0 8px 24px #00000059;
}

/* ---------- 2. Anbindung an die Variablen der App (ui.css, theme3.css) ---------- */
:root[data-design=studio][data-brand=mbasit],
:root[data-design=studio][data-brand=mbasit][data-theme=dark]{
  --bg:var(--mb-bg);--surface:var(--mb-panel);--input:var(--mb-panel);--text:var(--mb-text);--muted:var(--mb-muted);--line:var(--mb-line);--row:var(--mb-row);
  --green:var(--mb-primary);--green-dark:var(--mb-primary-hover);--soft:var(--mb-primary-soft);--primary-text:var(--mb-on-primary);--blue:var(--mb-link);
  --sidebar:var(--mb-sidebar-bg);--ok:var(--mb-ok);--ok-soft:var(--mb-ok-soft);--warning:var(--mb-warning);--warning-soft:var(--mb-warning-soft);
  --danger:var(--mb-danger);--danger-soft:var(--mb-danger-soft);--t3-shadow:var(--mb-shadow);
  font-family:var(--mb-font);
}
[data-brand=mbasit] body{background:var(--mb-bg);color:var(--mb-text);font-family:var(--mb-font)}
[data-brand=mbasit] button,[data-brand=mbasit] input,[data-brand=mbasit] select,[data-brand=mbasit] textarea{font-family:inherit}
[data-brand=mbasit] .page-head h1,[data-brand=mbasit] .auth-brand h1{font-family:var(--mb-font-display);color:var(--mb-primary);letter-spacing:-.5px}
[data-brand=mbasit] .card h2,[data-brand=mbasit] .card h3{color:var(--mb-primary)}
[data-brand=mbasit] button:focus-visible,[data-brand=mbasit] a:focus-visible,[data-brand=mbasit] select:focus-visible,[data-brand=mbasit] input:focus-visible,[data-brand=mbasit] summary:focus-visible{outline:3px solid var(--mb-focus);outline-offset:2px}

/* ---------- 3. Seitenleiste: Logo-Dunkelblau, grüne Kante unter dem Kopf ---------- */
[data-brand=mbasit] .sidebar{--text:var(--mb-sidebar-text);--muted:var(--mb-sidebar-muted);--line:var(--mb-sidebar-line);--green:var(--mb-sidebar-text);--soft:var(--mb-sidebar-line);--surface:var(--mb-sidebar-bg);--input:var(--mb-sidebar-input);background:var(--mb-sidebar-bg)}
[data-brand=mbasit] .sidebar-brand{border-bottom:4px solid var(--mb-brand-green)}
[data-brand=mbasit] .sidebar-brand strong{color:var(--mb-sidebar-text)}
[data-brand=mbasit] .sidebar-brand span,[data-brand=mbasit] .sidebar-caption,[data-brand=mbasit] .sidebar .theme-choice,[data-brand=mbasit] .sidebar-collapse{color:var(--mb-sidebar-muted)}
[data-brand=mbasit] .sidebar-collapse{border-color:var(--mb-sidebar-line)}
[data-brand=mbasit] .sidebar .nav button{color:var(--mb-sidebar-text);border-radius:8px;font-weight:500}
[data-brand=mbasit] .sidebar .nav button:hover{background:#ffffff14;color:var(--mb-sidebar-text)}
[data-brand=mbasit] .sidebar .nav button.active{background:var(--mb-sidebar-active-bg);color:var(--mb-sidebar-active-text);box-shadow:inset 4px 0 0 var(--mb-brand-green);font-weight:650}
[data-brand=mbasit] .sidebar select{color:var(--mb-sidebar-text);background:var(--mb-sidebar-input);border-color:var(--mb-sidebar-line)}
[data-brand=mbasit] .sidebar-bottom{border-color:var(--mb-sidebar-line)}
/* Logos mit dunkler Schrift: immer auf weißer Fläche (Seitenleiste ist in beiden Modi dunkel). */
[data-brand=mbasit] .sidebar-brand img{background:#fff;border-radius:8px;padding:6px}
[data-brand=mbasit][data-theme=dark] .auth-brand img,[data-brand=mbasit][data-theme=dark] .brand img{background:#fff;border-radius:8px;padding:6px}

/* ---------- 4. Kopf, Karten, Tabellen ---------- */
[data-brand=mbasit] .topbar{border-bottom:1px solid var(--mb-line);background:var(--mb-panel)}
[data-brand=mbasit] .topbar .app-version{background:var(--mb-accent-soft);color:var(--mb-text)}
[data-brand=mbasit] .card,[data-brand=mbasit] .stat{border-radius:10px;border-color:var(--mb-line);box-shadow:var(--mb-shadow)}
[data-brand=mbasit] .stat.primary-stat{background:var(--mb-primary-soft);color:var(--mb-primary);border-top:3px solid var(--mb-accent)}
[data-brand=mbasit] th{color:var(--mb-muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
[data-brand=mbasit] .page-tabs button.active,[data-brand=mbasit] .page-tabs button[aria-selected=true]{box-shadow:inset 0 -3px 0 var(--mb-accent)}
[data-brand=mbasit] .dashboard-person.selected{box-shadow:inset 4px 0 var(--mb-accent)}

/* ---------- 5. Knöpfe ---------- */
[data-brand=mbasit] button,[data-brand=mbasit] .button{border-radius:7px}
[data-brand=mbasit] button.primary,[data-brand=mbasit] .button.primary{background:var(--mb-primary);border-color:var(--mb-primary);color:var(--mb-on-primary);font-weight:650;box-shadow:0 2px 5px #0041661f}
[data-brand=mbasit] button.primary:hover,[data-brand=mbasit] .button.primary:hover{background:var(--mb-primary-hover);border-color:var(--mb-primary-hover)}

/* ---------- 6. Status, Hinweise ---------- */
[data-brand=mbasit] .status-pill.ok{background:var(--mb-ok-soft);color:var(--mb-ok)}
[data-brand=mbasit] .status-pill.warn{background:var(--mb-warning-soft);color:var(--mb-warning)}
[data-brand=mbasit] .status-pill.bad{background:var(--mb-danger-soft);color:var(--mb-danger)}
[data-brand=mbasit] .notice{border-left:4px solid var(--mb-accent)}
[data-brand=mbasit] .update-band{background:var(--mb-accent-soft);border-color:var(--mb-accent);color:var(--mb-text)}

/* ---------- 7. Unterschriftsseite und Inhaber-Link (sign.php, doc.php; immer hell) ---------- */
[data-brand=mbasit] .sign-panel{border-top:5px solid var(--mb-primary);border-radius:10px}
[data-brand=mbasit] .sign-brand h1{color:var(--mb-primary);font-family:var(--mb-font-display)}
[data-brand=mbasit] .sign-brand{border-bottom:4px solid var(--mb-brand-green);padding-bottom:10px}

/* ---------- 8. Darstellungsauswahl (Verwaltung › Organisation › Darstellung) ---------- */
.design-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.design-option{display:block;border:2px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;background:var(--surface)}
.design-option:has(input:checked){border-color:var(--green)}
.design-option input[type=radio]{display:inline-block;width:18px;height:18px;min-height:0;margin:0 8px 0 0;vertical-align:-3px;accent-color:var(--green)}
.design-option p{font-weight:400;margin:6px 0 0}
[data-design-panel] fieldset{border:0;padding:0;margin:0;min-width:0}
.design-swatches{display:flex;gap:6px;margin-top:10px}
.design-swatches span{display:block;width:34px;height:22px;border-radius:5px;border:1px solid #0000001f}
.swatch-studio-1{background:#10243a}.swatch-studio-2{background:#1266d5}.swatch-studio-3{background:#f3f6fb}
.swatch-mbasit-1{background:#004166}.swatch-mbasit-2{background:#00abde}.swatch-mbasit-3{background:#94ba30}.swatch-mbasit-4{background:#f2f5f8}
@media(max-width:700px){.design-options{grid-template-columns:minmax(0,1fr)}}

/* ---------- 9. Logo-Vorschau (Darstellung) ---------- */
.logo-preview{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0 16px}
.logo-preview img{height:84px;width:auto;max-width:220px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.logo-preview img.logo-icon{height:48px;width:48px;padding:6px}