/* ================================================================
   AzubiBoard im Look „V9.0 (Beta)“ des Dashboards
   Wird NACH azubi.css geladen und biegt nur Farben, Schrift, Flächen und
   Hintergrund um — Aufbau und Logik bleiben unverändert. Rückbau = die
   <link>-Zeile in AzubiBoard.html entfernen.
   Schrift + Hintergrundbilder kommen aus /Data/fonts/rubik.css und
   /Data/bg-v9.css (auf der Azubi-Adresse freigegeben, Caddyfile @board).
   ================================================================ */
@import url('../../Data/fonts/rubik.css');
@import url('../../Data/bg-v9.css');   /* Hintergrundbilder als data:-URI */

:root {
  --bg: #F4F5F7; --fg: #15181D; --muted: #5B6270;
  --card: rgba(255, 255, 255, .86); --card-solid: #FFFFFF;
  --stroke: #E3E5EA; --stroke-strong: #D5D9E0; --surface2: #F6F7F9;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --accent: #D92D20; --accent-hover: #B42318; --accent-soft: #FDECEA; --accent-text: #B42318;
  --navy: #1D4FB0; --ring: rgba(217, 45, 32, .28);
  --radius: 14px;
  --glass-head: rgba(255, 255, 255, .78);
  --bg-img: var(--v9-bg-light);
  --bg-filter: none;
  --overlay: linear-gradient(to bottom, rgba(255, 255, 255, .10), rgba(255, 255, 255, .25));
}
html.dark {
  --bg: #0E1014; --fg: #E8EBF0; --muted: #9AA1AE;
  --card: rgba(23, 26, 32, .86); --card-solid: #171A20;
  --stroke: #2A2F38; --stroke-strong: #3A404C; --surface2: #1E222A;
  --shadow: 0 8px 24px rgba(0, 0, 0, .25);
  --accent: #E5483B; --accent-hover: #D92D20; --accent-soft: #33171A; --accent-text: #FF8F86;
  --navy: #9DBCF5; --ring: rgba(229, 72, 59, .35);
  --glass-head: rgba(14, 16, 20, .80);
  --bg-img: var(--v9-bg-dark);
  --bg-filter: saturate(.95) brightness(.68);
  --overlay: linear-gradient(to bottom, rgba(10, 12, 14, .15), rgba(10, 12, 14, .45));
}

/* Grund + Hintergrundbild (wie Dashboard) */
html { background: var(--bg); }
body { background: transparent; font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14.5px; }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2; background: var(--bg-img) center / cover no-repeat; filter: var(--bg-filter); }
body::after { z-index: -1; background: var(--overlay); }
h1, h2, h3 { font-weight: 650; letter-spacing: 0; }

/* Karten als Glas */
.card {
  background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}

/* Kopfzeile */
.topbar {
  background: var(--glass-head); border-bottom: 1px solid var(--stroke); padding: 10px 24px;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.brand strong, .brand b { font-weight: 700; }
.tabs a { font-weight: 500; font-size: 14px; color: var(--muted); border-radius: 9px; }
.tabs a:hover { background: var(--surface2); color: var(--fg); }
.tabs a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* Knöpfe */
.btn {
  font-weight: 600; font-size: 13.5px; border-radius: 9px; padding: 8px 14px;
  border: 1px solid var(--stroke-strong); background: var(--card-solid); color: var(--fg);
  transition: background-color .12s, border-color .12s;
}
.btn:hover { filter: none; background: var(--surface2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn:focus-visible, .tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Felder */
.field input, .field select, .field textarea, .login-card input, main input:not([type=checkbox]):not([type=radio]):not([type=range]), main select, main textarea {
  font: inherit; font-size: 14px; color: var(--fg); background: var(--card-solid);
  border: 1px solid var(--stroke-strong); border-radius: 10px; box-shadow: none;
}
.field input:focus, .field select:focus, .field textarea:focus, .login-card input:focus,
main input:focus, main select:focus, main textarea:focus {
  outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px var(--ring);
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.label { font-weight: 600; letter-spacing: .05em; }

/* Anmeldung wie im Dashboard */
.login-card { max-width: 400px; padding: 30px 28px 22px; gap: 12px; border-radius: 18px; background: var(--card-solid); box-shadow: 0 30px 80px rgba(15, 17, 21, .2); }
.login-card h1 { font-size: 22px; font-weight: 700; }
.login-logo { width: 76px; height: 76px; }
.login-card input { height: 44px; padding: 0 14px; text-align: left; }
.login-card .btn.primary { height: 46px; font-size: 15px; border-radius: 10px; }

/* Abzeichen */
.badge { font-weight: 600; }

/* Hell / Automatisch / Dunkel (wie Dashboard-Kopfzeile) */
.theme-segment {
  display: inline-flex; height: 32px; border: 1px solid var(--stroke-strong); border-radius: 9px;
  background: var(--card-solid); overflow: hidden; flex: none;
}
.theme-seg-btn {
  display: flex; align-items: center; padding: 0 9px; border: 0; background: transparent;
  color: var(--fg); opacity: .55; cursor: pointer; transition: background-color .12s, opacity .12s;
}
.theme-seg-btn + .theme-seg-btn { border-left: 1px solid var(--stroke); }
.theme-seg-btn:hover { background: var(--surface2); opacity: .85; }
.theme-seg-btn.active { background: var(--accent-soft); color: var(--accent-text); opacity: 1; }
.theme-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }