/* ============================================================================
   nop.tools — Design System (Welle 1, v2.19.0)
   Zentrale Stilquelle. Light = Default (:root), Dark = [data-theme="dark"].
   Komponenten referenzieren NUR Tokens. Token-Set: DESIGN_SYSTEM.md §4.
   Kompat-Aliase (--surface/--muted/--yellow) halten nicht-migrierte
   W2/W3-Templates lauffähig, bis sie auf die neuen Namen umziehen.
   ============================================================================ */

/* ---- Fonts (self-hosted, kein Google-CDN) ---- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('/static/fonts/dm-sans-v17-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}
@font-face {
  /* Fraunces Variable (Achsen: opsz 9–144 + wght 100–900), self-hosted, kein Google-CDN */
  font-family: 'Fraunces';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/fraunces-vf-latin.woff2') format('woff2');
}

/* ---- Tokens: Light (Default) ---- */
:root {
  --bg: #f7f4ef;
  --bg-card: #fffdf9;
  --bg-detail: #efebe3;
  --text: #1f1d1a;
  --text-muted: #6f6a62;
  --accent: #8a7340;
  --accent-dim: #c4a35a;
  --border: #e2dcd1;
  --red: #a94a4a;
  --green: #2f8f55;
  --warn: #9c6f33;
  --info: #3f6d9c;

  /* Nicht-Farb-Tokens (themeunabhängig) */
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --maxw: 1100px;
  --grain-opacity: 0.03;

  /* Kompat-Aliase für nicht-migrierte Templates (W2/W3 ziehen auf neue Namen um) */
  --surface: var(--bg-card);
  --muted: var(--text-muted);
  --yellow: var(--warn);
}

/* ---- Tokens: Dark (NOP-Public-Designsprache) ---- */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-card: #111111;
  --bg-detail: #161616;
  --text: #e8e4df;
  --text-muted: #8a8580;
  --accent: #c4a35a;
  --accent-dim: #8a7340;
  --border: #2a2725;
  --red: #c45a5a;
  --green: #5ac47a;
  --warn: #c4915a;
  --info: #5a8fc4;
  --grain-opacity: 0.04;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Fraunces nutzt optical sizing: große Display-Größen ziehen automatisch den
     dramatischen Display-Schnitt (hohe opsz), kleine bleiben lesbar. DM Sans (nicht-variabel) ignoriert dies. */
  font-optical-sizing: auto;
}

html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
}

body { display: flex; flex-direction: column; }

/* Film-Grain-Overlay (markentypisch, dezent) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--accent); text-decoration: none; }
strong { font-weight: 500; }

/* ============================================================================
   NAV — Desktop: Top-Bar · Mobile: Bottom-Bar
   ============================================================================ */
nav.topnav {
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
  align-items: center;
}

.nav-links > a, .nav-group > .nav-group-label {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.15s;
  cursor: pointer;
  user-select: none;
}
.nav-links > a:hover, .nav-links > a.active { color: var(--accent); }

.nav-group { position: relative; }
.nav-group > .nav-group-label { display: inline-flex; align-items: center; gap: 3px; }
.nav-group > .nav-group-label::after { content: '▾'; font-size: 9px; opacity: 0.6; }
.nav-group.active > .nav-group-label { color: var(--accent); }
@media (hover: hover) { .nav-group:hover > .nav-group-label { color: var(--accent); } }

.nav-group-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 0;
  min-width: 150px;
  z-index: 60;
}
.nav-group.open .nav-group-dropdown { display: block; }
@media (hover: hover) { .nav-group:hover .nav-group-dropdown { display: block; } }

.nav-group-dropdown a {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-group-dropdown a:hover { color: var(--accent); background: var(--bg-detail); }
.nav-group-dropdown a.active { color: var(--accent); }

/* Theme-Toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  padding: 6px 9px;
  transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Mobile Bottom-Bar */
.bottomnav { display: none; }
.bottomnav-more-sheet { display: none; }

@media (max-width: 760px) {
  nav.topnav .nav-links { display: none; }   /* Top-Nav-Links verstecken */
  nav.topnav { padding: 10px 16px; }

  .bottomnav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 80;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottomnav a, .bottomnav button {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    min-height: 54px;
  }
  .bottomnav a .bn-ico, .bottomnav button .bn-ico { font-size: 19px; line-height: 1; }
  .bottomnav a.active { color: var(--accent); }

  /* Platz fürs Bottom-Bar schaffen */
  body { padding-bottom: 60px; }

  /* "Mehr"-Sheet */
  .bottomnav-more-sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: flex-end;
  }
  .bottomnav-more-sheet.show { display: flex; }
  .bottomnav-more-inner {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    width: 100%;
    max-height: 75vh;
    overflow-y: auto;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .bottomnav-more-inner h4 {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.15em; margin: 14px 0 6px; font-weight: 400;
  }
  .bottomnav-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bottomnav-more-grid a {
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 6px;
    text-align: center;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .bottomnav-more-grid a.active { border-color: var(--accent); color: var(--accent); }
}

/* ---- Session-Bar ---- */
.session-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  font-size: 10px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-detail);
}
.session-bar .user-name { color: var(--accent); }
.session-bar .role-badge { border: 1px solid var(--border); padding: 1px 5px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.session-bar .logout-btn { margin-left: auto; color: var(--text-muted); text-decoration: none; font-size: 10px; letter-spacing: 0.08em; }
.session-bar .logout-btn:hover { color: var(--red); }

/* ---- Layout ---- */
.wrapper { max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 60px; flex: 1; width: 100%; }
@media (max-width: 760px) { .wrapper { padding: 24px 16px 40px; } }

/* ---- Typografie / Section-Titel ---- */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 8px;
}
.page-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 32px; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }

.section-title, .section-header {
  font-size: 10px;
  color: var(--text-muted);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-title::after, .section-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-title::before, .section-header::before { content: ''; width: 6px; height: 6px; background: var(--accent); display: inline-block; }

/* ---- Status-Dot ---- */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  padding: 9px 18px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.btn.primary:hover { background: var(--accent); color: var(--bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { color: var(--accent); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red); color: var(--bg); }
.btn.sm { font-size: 10px; padding: 5px 10px; }
.btn.lg { font-size: 14px; padding: 13px 26px; }
.btn:disabled, .btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn.skip { color: var(--text-muted); border-color: transparent; }
.btn.skip:hover { color: var(--text); }

/* ---- Cards ---- */
.card { border: 1px solid var(--border); background: var(--bg-card); padding: 20px; margin-bottom: 8px; }

/* ---- Forms ---- */
.form-group { margin-bottom: 14px; }
label { font-size: 9px; color: var(--text-muted); display: block; margin-bottom: 4px; letter-spacing: 0.08em; text-transform: uppercase; }
input[type=text], input[type=tel], input[type=time], input[type=number],
input[type=password], input[type=email], input[type=date], select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
select { cursor: pointer; }
::placeholder { color: var(--text-muted); opacity: 0.7; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 18px; height: 18px; }

/* Toggle-Switch */
.toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; inset: 0; background: var(--border); transition: 0.2s; border-radius: 24px; cursor: pointer; }
.toggle .track::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--bg-card); transition: 0.2s; border-radius: 50%; }
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::before { transform: translateX(18px); }

/* ---- Tabellen (responsive: Scroll-Wrap + Sticky-Header) ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 9px 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 400; letter-spacing: 0.1em; font-size: 10px; text-transform: uppercase; }
.table-wrap thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:hover td { background: var(--bg-detail); }

/* ---- Badges / Pills ---- */
.badge { display: inline-block; padding: 2px 8px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); color: var(--text-muted); }
.badge.accent { border-color: var(--accent); color: var(--accent); }
.badge.green  { border-color: var(--green);  color: var(--green); }
.badge.red    { border-color: var(--red);    color: var(--red); }
.badge.warn   { border-color: var(--warn);   color: var(--warn); }
.badge.info   { border-color: var(--info);   color: var(--info); }

/* ---- Toasts ---- */
.toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  background: var(--accent);
  color: var(--bg);
  padding: 9px 16px;
  font-size: 12px;
  z-index: 700;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---- Modal (EINE zentrale Implementierung) ---- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 600; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.show { display: flex; }
.modal { background: var(--bg-card); border: 1px solid var(--border); padding: 24px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; }
.modal-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.modal-close { cursor: pointer; color: var(--text-muted); font-size: 18px; }
.modal-close:hover { color: var(--red); }

/* ---- Empty-State ---- */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; }
.empty-state .icon { font-size: 34px; opacity: 0.4; margin-bottom: 10px; }

/* ---- Loading / Error / Beta ---- */
.loading { color: var(--text-muted); font-size: 12px; padding: 20px 0; display: flex; align-items: center; gap: 8px; }
.error { color: var(--red); font-size: 12px; padding: 12px; border: 1px solid var(--red); }
.beta-banner { background: var(--bg-detail); border: 1px solid var(--warn); padding: 6px 14px; margin-bottom: 12px; font-size: 10px; color: var(--warn); display: flex; align-items: center; gap: 8px; }

/* ---- Animation ---- */
.fade-in { animation: fadeUp 0.4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Footer ---- */
.site-footer { text-align: center; padding: 24px; font-size: 10px; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 40px; letter-spacing: 0.05em; }
.site-footer a { color: var(--accent); }
.site-footer a:hover { text-decoration: underline; }

/* ============================================================================
   FLOATING FEEDBACK (aus base.html — auf Tokens umgestellt)
   ============================================================================ */
#nop-feedback-btn { position: fixed; bottom: 20px; right: 20px; height: 40px; padding: 0 15px; border-radius: 20px; background: var(--accent); color: var(--bg); border: none; font-size: 13px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; z-index: 500; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.28); transition: transform .2s; }
#nop-feedback-btn:hover { transform: scale(1.05); }
@media (max-width: 760px) { #nop-feedback-btn { bottom: 70px; right: 12px; height: 34px; padding: 0 12px; font-size: 12px; } }  /* klar über der Bottom-Bar, nicht über rechtem Nav-Button */
#nop-fb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 600; align-items: center; justify-content: center; }
#nop-fb-overlay.show { display: flex; }
#nop-fb-box { background: var(--bg-card); border: 1px solid var(--accent); padding: 20px; width: 90%; max-width: 440px; }
#nop-fb-box textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font-sans); font-size: 13px; padding: 10px; resize: vertical; min-height: 80px; outline: none; }
.nop-fb-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.nop-fb-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.nop-fb-close { cursor: pointer; color: var(--text-muted); font-size: 18px; }
.nop-fb-close:hover { color: var(--red); }
.nop-fb-module { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; }
.nop-fb-toast { position: fixed; bottom: 80px; right: 20px; background: var(--accent); color: var(--bg); padding: 8px 16px; font-size: 11px; z-index: 700; opacity: 0; transition: opacity .3s; pointer-events: none; }
.nop-fb-toast.show { opacity: 1; }

/* ============================================================================
   W1-SEITEN — Klassen (damit Templates 0 Inline-Styles / 0 <style> haben)
   ============================================================================ */

/* ---- Login ---- */
.login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; gap: 14px; }
.login-logo { font-family: var(--font-display); font-size: 3rem; color: var(--accent); line-height: 1; }
.login-sub { font-size: 11px; color: var(--text-muted); margin-top: -6px; letter-spacing: 0.1em; text-transform: uppercase; }
.login-box { border: 1px solid var(--border); background: var(--bg-card); padding: 24px; width: 90%; max-width: 320px; }
.login-box input { margin-bottom: 10px; }
.login-box .remember { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin-bottom: 12px; cursor: pointer; }
.login-box .remember input { width: auto; height: auto; margin: 0; }
.login-box .btn { width: 100%; padding: 11px; font-size: 13px; }
.login-err { color: var(--red); font-size: 11px; min-height: 16px; text-align: center; margin-top: 8px; }
.login-welcome { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); text-align: center; display: none; }

/* ---- Dashboard (Artist) ---- */
.dash-wrap { max-width: 700px; margin: 0 auto; }
.dash-hello { font-family: var(--font-display); font-size: 2rem; color: var(--accent); margin-bottom: 4px; line-height: 1.1; }
.dash-date { font-size: 11px; color: var(--text-muted); margin-bottom: 16px; letter-spacing: 0.05em; }
.dash-card { border: 1px solid var(--border); background: var(--bg-card); padding: 14px; margin-bottom: 8px; }
.dash-evt { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dash-evt:last-child { border-bottom: none; }
.dash-evt-time { min-width: 90px; font-family: var(--font-display); font-size: 1.2rem; color: var(--accent); }
.dash-evt-name { flex: 1; }
.dash-evt.next { background: var(--bg-detail); border-left: 3px solid var(--accent); padding-left: 10px; margin: 4px -14px; padding-right: 14px; }
.dash-artist { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dash-artist:last-child { border-bottom: none; }
.dash-artist-name { font-weight: 500; }
.dash-artist-flags { font-size: 14px; letter-spacing: 2px; }
.dash-artist-count { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.dash-artist.self { border-left: 3px solid var(--accent); padding-left: 8px; }
.dash-artist .type-res { color: var(--green); }
.dash-artist .type-guest { color: var(--warn); }
.dash-ann { padding: 8px 12px; margin-bottom: 6px; font-size: 12px; border-left: 3px solid var(--border); }
.dash-ann.info { border-color: var(--info); }
.dash-ann.warning { border-color: var(--warn); background: var(--bg-detail); }
.dash-ann.urgent { border-color: var(--red); background: var(--bg-detail); }
.dash-hint { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; color: var(--text-muted); }
.dash-area-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-area { padding: 8px 10px; border: 1px solid var(--border); font-size: 10px; text-align: center; min-width: 64px; }
.dash-area .dash-area-val { font-size: 16px; font-family: var(--font-display); }
.dash-area.ok { border-color: var(--green); color: var(--green); }
.dash-area.warn { border-color: var(--warn); color: var(--warn); }
.dash-area.bad { border-color: var(--red); color: var(--red); }
.dash-area.never { color: var(--text-muted); }
.dash-countdown { font-family: var(--font-display); font-size: 2.6rem; color: var(--accent); text-align: center; padding: 8px 0; line-height: 1; }
.dash-countdown-label { font-size: 10px; color: var(--text-muted); text-align: center; letter-spacing: 0.1em; text-transform: uppercase; }
.dash-card.next-accent { border-color: var(--accent); margin-bottom: 8px; }
.dash-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dash-link { flex: 1; min-width: 100px; padding: 14px; border: 1px solid var(--border); text-align: center; font-size: 11px; color: var(--text); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; }
.dash-link:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-detail); }
.dash-load { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dash-load-num { font-family: var(--font-display); font-size: 1.8rem; }
.dash-load-bar { flex: 1; height: 12px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.dash-load-fill { height: 100%; transition: width 0.3s; background: var(--accent); }
.dash-lang-row { display: flex; gap: 8px; margin-bottom: 8px; }
.dash-lang-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 10px 14px; cursor: pointer; font-family: var(--font-sans); font-size: 12px; flex: 1; }
.dash-lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.dash-muted { color: var(--text-muted); font-size: 12px; }

/* ---- Modul-Liste (Index admin/user/cleaning) ---- */
.module-list { display: flex; flex-direction: column; border: 1px solid var(--border); }
.module-row { display: flex; align-items: stretch; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); }
.module-row:last-child { border-bottom: none; }
.module-row:hover { background: var(--bg-detail); }
.module-num { padding: 16px; font-size: 11px; color: var(--text-muted); border-right: 1px solid var(--border); min-width: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); }
.module-body { padding: 16px 20px; flex: 1; }
.module-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.module-name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.module-desc { font-size: 12px; color: var(--text-muted); }
.module-row.admin .module-num { color: var(--red); font-weight: 500; }
.module-row.admin .module-name { color: var(--red); }
.welcome-line { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); margin-bottom: 8px; }

/* ---- Settings ---- */
.set-wrap { max-width: 650px; margin: 0 auto; }
.set-title { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: 4px; line-height: 1.1; }
.set-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; letter-spacing: 0.05em; }
.set-card { border: 1px solid var(--border); background: var(--bg-card); padding: 16px; margin-bottom: 12px; }
.set-card .hint { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; }
.set-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.set-row > div { flex: 1; min-width: 140px; }
.set-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer; }

/* Theme-Auswahl (ersetzt Skin-Grid) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-card { border: 2px solid var(--border); background: var(--bg-card); padding: 12px; cursor: pointer; transition: border-color 0.15s; text-align: center; }
.theme-card.active { border-color: var(--accent); }
.theme-card:hover { border-color: var(--text-muted); }
.theme-preview { height: 44px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; border: 1px solid var(--border); }
.theme-preview .swatch { width: 9px; height: 9px; border-radius: 50%; }
.theme-label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }

/* Flags / Style-Tags / Push */
.flag-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.flag-btn { width: 52px; height: 44px; border: 2px solid var(--border); background: var(--bg-card); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; user-select: none; }
.flag-btn .emoji { font-size: 22px; line-height: 1; }
.flag-btn .code { font-size: 8px; color: var(--text-muted); margin-top: 2px; }
.flag-btn.active { border-color: var(--accent); background: var(--bg-detail); }
.flag-btn.active .code { color: var(--accent); }
.style-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.style-tag { padding: 7px 12px; border: 1px solid var(--border); background: var(--bg-card); font-size: 12px; cursor: pointer; transition: all 0.15s; user-select: none; }
.style-tag.active { border-color: var(--accent); color: var(--accent); background: var(--bg-detail); }
.push-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.push-row:last-child { border-bottom: none; }
.push-row label { flex: 1; font-size: 13px; color: var(--text); margin: 0; text-transform: none; letter-spacing: 0; }
.pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pin-tile { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); background: var(--bg-card); font-size: 12px; cursor: pointer; }
.pin-counter { font-size: 10px; color: var(--text-muted); margin-top: 10px; text-align: right; }
.push-step { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.push-step .num { background: var(--accent); color: var(--bg); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 500; }
.set-card.guide { border-color: var(--warn); }
.set-guide-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--warn); margin-bottom: 8px; }
.ntfy-topic { color: var(--accent); font-weight: 500; }
.push-test-status { font-size: 10px; color: var(--text-muted); margin-left: 8px; }
.set-link { color: var(--accent); }

/* Wizard */
.wizard-overlay { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 550; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wizard-overlay.show { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wizard-box { max-width: 500px; width: 90%; padding: 30px 20px; text-align: center; }
.wizard-title { font-family: var(--font-display); font-size: 2rem; color: var(--accent); margin-bottom: 8px; }
.wizard-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-field { text-align: left; margin-bottom: 12px; }
.wizard-nav { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.wizard-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.wizard-dot.active { background: var(--accent); }

/* ============================================================================
   W2 — MANAGEMENT (mg-*). Klassennamen unverändert (JS-Hooks), Tokens migriert.
   green→accent außer echte Success-Semantik (limit-ok, task-done, diff.pos,
   material 'viel'). VT323/Share Tech Mono → Display/Sans. --cyan→--info.
   ============================================================================ */
.mg-wrap{max-width:750px;margin:0 auto}
.mg-title{font-family:var(--font-display);font-size:2.4rem;line-height:1.1;margin-bottom:4px}
.mg-sub{font-size:11px;color:var(--text-muted);margin-bottom:20px}
.mg-section{font-size:10px;color:var(--text-muted);margin:24px 0 12px;display:flex;align-items:center;gap:8px;letter-spacing:0.15em;text-transform:uppercase}
.mg-section::before{content:'';width:6px;height:6px;background:var(--accent);display:inline-block}
.mg-section::after{content:'';flex:1;height:1px;background:var(--border)}
.mg-card{border:1px solid var(--border);background:var(--bg-card);padding:16px;margin-bottom:10px}
.mg-card h3{font-family:var(--font-display);font-size:1.3rem;color:var(--accent);margin:0 0 8px}
.mg-card p{font-size:11px;color:var(--text-muted);margin:0}
.mg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mg-stat{border:1px solid var(--border);background:var(--bg-card);padding:14px;text-align:center}
.mg-stat .val{font-family:var(--font-display);font-size:1.9rem;color:var(--accent)}
.mg-stat .lbl{font-size:10px;color:var(--text-muted);margin-top:4px}
.mg-stat.warn .val{color:var(--warn)}.mg-stat.warn{border-color:var(--warn)}
.mg-stat.crit .val{color:var(--red)}.mg-stat.crit{border-color:var(--red)}
.clock-wrap{margin-top:10px;text-align:center}
.clock-btn{font-family:var(--font-display);font-size:1.4rem;padding:14px 36px;border:2px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;transition:all 0.2s}
.clock-btn:hover{background:var(--accent);color:var(--bg)}
.clock-btn.active{border-color:var(--red);color:var(--red);animation:pulse 2s infinite}
.clock-btn.active:hover{background:var(--red);color:var(--bg)}
.clock-btn.blocked{border-color:var(--text-muted);color:var(--text-muted);cursor:not-allowed;opacity:0.5}
.clock-timer{font-family:var(--font-display);font-size:1.1rem;color:var(--accent);margin-top:8px}
.clock-timer.active{color:var(--warn)}
.limit-bar-wrap{margin-top:12px}
.limit-bar{height:8px;background:var(--bg-card);border:1px solid var(--border);overflow:hidden}
.limit-bar-fill{height:100%;background:var(--green);transition:width 0.5s}
.limit-bar-fill.warn{background:var(--warn)}.limit-bar-fill.crit{background:var(--red)}
.limit-info{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-top:4px}
.mg-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mg-tab{padding:10px 14px;font-size:10px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;text-transform:uppercase;letter-spacing:0.08em}
.mg-tab:hover{color:var(--text)}.mg-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tc{display:none}.tc.active{display:block}
.task-cat{font-size:10px;color:var(--text-muted);margin:16px 0 6px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:0.08em}
.task-cat .dot{width:8px;height:8px;border-radius:50%}
.task-cat .dot.daily{background:var(--red)}.task-cat .dot.weekly{background:var(--warn)}.task-cat .dot.longterm{background:var(--info)}
.task-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;transition:background 0.1s}
.task-item:hover{background:var(--bg-detail)}
.task-item.done{opacity:0.4}
.task-item .check{width:20px;height:20px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:border-color 0.2s}
.task-item.done .check{border-color:var(--green);color:var(--green)}
.task-item .task-text{flex:1}.task-item.done .task-text{text-decoration:line-through}
.task-item .task-meta{font-size:9px;color:var(--text-muted)}
.task-item .del{font-size:9px;color:var(--text-muted);cursor:pointer;opacity:0;padding:2px 6px;transition:opacity 0.2s}
.task-item:hover .del{opacity:1}.task-item .del:hover{color:var(--red)}
.task-progress{height:6px;background:var(--bg-card);border:1px solid var(--border);margin:8px 0;overflow:hidden}
.task-progress-fill{height:100%;background:var(--green);transition:width 0.3s}
.task-progress-label{font-size:10px;color:var(--text-muted);text-align:right}
.kasse-box{border:2px solid var(--accent);padding:16px;text-align:center;background:var(--bg-card)}
.kasse-val{font-family:var(--font-display);font-size:2.6rem;color:var(--accent)}
.kasse-label{font-size:10px;color:var(--text-muted);letter-spacing:0.1em;margin-bottom:4px}
.kasse-input{font-family:var(--font-display);font-size:1.8rem;background:var(--bg);border:2px solid var(--border);color:var(--accent);padding:8px 16px;text-align:center;width:160px}
.kasse-input:focus{outline:none;border-color:var(--accent)}
.kasse-diff{font-family:var(--font-display);font-size:1.5rem;margin-top:8px}
.kasse-diff.pos{color:var(--green)}.kasse-diff.neg{color:var(--red)}
.walkin-counter{text-align:center;padding:20px}
.walkin-val{font-family:var(--font-display);font-size:4.5rem;color:var(--accent)}
.walkin-btns{display:flex;gap:12px;justify-content:center;margin-top:12px}
.walkin-btn{font-family:var(--font-display);font-size:1.8rem;width:60px;height:60px;border:2px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.walkin-btn:hover{background:var(--accent);color:var(--bg)}
.walkin-btn.minus{border-color:var(--text-muted);color:var(--text-muted)}.walkin-btn.minus:hover{background:var(--text-muted);color:var(--bg)}
.walkin-hist{display:flex;gap:6px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.walkin-day{text-align:center;padding:6px 10px;border:1px solid var(--border);background:var(--bg-card);min-width:50px}
.walkin-day .wd{font-size:9px;color:var(--text-muted)}.walkin-day .wc{font-family:var(--font-display);font-size:1.1rem;color:var(--accent)}
.note-card{border-left:3px solid var(--accent);padding:10px 14px;margin-bottom:8px;background:var(--bg-card);font-size:12px;position:relative}
.note-card.urgent{border-left-color:var(--red)}
.note-card.done{opacity:0.4;border-left-color:var(--text-muted)}
.note-author{font-size:9px;color:var(--text-muted)}
.note-text{margin:4px 0}
.note-actions{display:flex;gap:8px;margin-top:6px}
.note-actions button{font-size:9px;padding:2px 8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer}
.note-actions button:hover{border-color:var(--accent);color:var(--accent)}
.note-add{display:flex;gap:6px;margin-bottom:12px}
.note-add input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 10px;font-family:var(--font-sans);font-size:12px}
.note-add input:focus{outline:none;border-color:var(--accent)}
.mat-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--border);font-size:12px}
.mat-name{flex:1}
.mat-level{display:flex;gap:4px}
.mat-level button{font-size:9px;padding:3px 10px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;transition:all 0.15s}
.mat-level button.active-viel{border-color:var(--green);color:var(--green);background:var(--bg-detail)}
.mat-level button.active-mittel{border-color:var(--warn);color:var(--warn);background:var(--bg-detail)}
.mat-level button.active-wenig{border-color:var(--red);color:var(--red);background:var(--bg-detail)}
.mat-level button:hover{opacity:0.8}
.mat-meta{font-size:9px;color:var(--text-muted);white-space:nowrap}
.mat-del{font-size:9px;color:var(--text-muted);cursor:pointer;padding:2px 6px;opacity:0;transition:opacity 0.2s}
.mat-item:hover .mat-del{opacity:1}.mat-del:hover{color:var(--red)}
.hist-row{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid var(--border);font-size:11px}
.hist-row:last-child{border-bottom:none}
.hist-date{width:75px;color:var(--text-muted)}.hist-time{width:100px}.hist-dur{width:50px;text-align:right;color:var(--accent)}
.hist-manual{font-size:8px;padding:1px 4px;border:1px solid var(--warn);color:var(--warn)}
.hist-note{flex:1;color:var(--text-muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.manual-form{display:none;margin-top:12px;padding:12px;border:1px solid var(--border);background:var(--bg-card)}
.manual-form.open{display:block}
.manual-form label{font-size:10px;color:var(--text-muted);display:block;margin:6px 0 2px}
.manual-form input,.manual-form textarea{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 8px;font-family:var(--font-sans);font-size:11px;width:100%}
.manual-form input:focus{outline:none;border-color:var(--accent)}
.mg-row{display:flex;gap:8px}.mg-row>*{flex:1}
.mg-toast{position:fixed;bottom:80px;right:20px;background:var(--accent);color:var(--bg);padding:8px 16px;font-size:11px;z-index:300;opacity:0;transition:opacity 0.3s;pointer-events:none}.mg-toast.show{opacity:1}
/* W2 generische Helfer (ersetzen statische Inline-Styles) */
.mg-inline-input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 10px;font-family:var(--font-sans);font-size:12px}
.mg-inline-select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px;font-size:10px;font-family:var(--font-sans)}
.mg-addrow{display:flex;gap:6px}
.mg-hint{font-size:10px;color:var(--text-muted);margin-bottom:12px}
.mg-note-sm{font-size:11px;margin-top:6px}
.mg-flex-between{display:flex;justify-content:space-between;align-items:center}
.mg-kasse-cols{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}
.mg-walkin-label{font-size:10px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:4px}
.mg-right{text-align:right;margin-top:8px}
.mg-err{font-size:10px;color:var(--red);margin-top:6px}
.mg-scroll-400{max-height:400px;overflow-y:auto}
.mg-muted-sm{font-size:11px;color:var(--text-muted)}

/* ===== W2 — ADMIN (Klassennamen unverändert, Tokens migriert) ===== */
.admin-wrap{max-width:900px;margin:0 auto}
.admin-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:8px}
.atab{font-size:10px;padding:5px 12px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans)}
.atab:hover,.atab.active{border-color:var(--accent);color:var(--accent);background:var(--bg-detail)}
.panel{display:none}.panel.active{display:block}
/* Users table */
.users-tbl{width:100%;border-collapse:collapse;font-size:11px}
.users-tbl th{text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:9px;letter-spacing:.1em}
.users-tbl td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.03)}
.users-tbl tr:hover{background:rgba(0,204,0,.03)}
.role-pill{font-size:9px;padding:2px 6px;border:1px solid;border-radius:2px}
.role-admin{border-color:var(--accent);color:var(--accent)}
.role-user{border-color:#5bc0de;color:#5bc0de}
.role-artist{border-color:#f0ad4e;color:#f0ad4e}
.role-cleaning{border-color:var(--text-muted);color:var(--text-muted)}
.imp-btn{font-size:9px;padding:2px 8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans)}
.imp-btn:hover{border-color:#9b59b6;color:#9b59b6}
.edit-btn{font-size:9px;padding:2px 8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans)}
.edit-btn:hover{border-color:var(--accent);color:var(--accent)}
.del-btn{font-size:9px;padding:2px 8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans)}
.del-btn:hover{border-color:var(--red);color:var(--red)}
/* Impersonate banner */
.imp-banner{background:rgba(155,89,182,.15);border:1px solid #9b59b6;padding:8px 14px;font-size:11px;color:#9b59b6;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.imp-banner button{font-size:10px;padding:3px 10px;border:1px solid #9b59b6;background:transparent;color:#9b59b6;cursor:pointer;font-family:var(--font-sans);margin-left:auto}
.imp-banner button:hover{background:rgba(155,89,182,.2)}
/* Add user form */
.add-form{border:1px solid var(--border);background:var(--bg-card);padding:14px;margin-bottom:16px}
.add-form .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.add-form input,.add-form select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:11px;padding:6px 10px}
.add-form input{width:140px}
/* Edit modal */
.edit-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center}
.edit-overlay.show{display:flex}
.edit-box{background:var(--bg);border:1px solid var(--accent);padding:20px;width:90%;max-width:550px;max-height:85vh;overflow-y:auto}
.edit-title{font-family:var(--font-display);font-size:22px;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.edit-close{cursor:pointer;color:var(--text-muted);font-size:18px}
.edit-close:hover{color:var(--red)}
.edit-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:11px}
.edit-row label{min-width:100px;color:var(--text-muted)}
.edit-row input,.edit-row select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:11px;padding:5px 8px;flex:1}
.mod-toggle{display:flex;align-items:center;gap:6px;padding:4px 0}
.mod-toggle label{font-size:11px;color:var(--text);min-width:80px}
.mod-toggle input[type=checkbox]{accent-color:var(--accent)}
.mod-toggle input[type=number]{width:60px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:10px;padding:3px 6px}
/* Cleaning hours */
.hours-month{border:1px solid var(--border);margin-bottom:12px;background:var(--bg-card)}
.hours-month-header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border)}
.hours-month-label{font-family:var(--font-display);font-size:20px;color:var(--accent)}
.hours-month-stats{font-size:11px;color:var(--text-muted)}
.hours-entry{display:flex;gap:12px;padding:6px 14px;border-bottom:1px solid rgba(255,255,255,.03);font-size:11px}
.hours-entry:last-child{border-bottom:none}
.hours-date{min-width:80px;color:var(--text-muted)}
.hours-val{min-width:40px;color:var(--accent);font-family:var(--font-display);font-size:16px}
.hours-note{color:var(--text);flex:1}
.hours-total{font-family:var(--font-display);font-size:28px;color:var(--accent);text-align:center;margin:12px 0;padding:10px;border:1px solid var(--accent);background:rgba(0,204,0,0.05)}
/* Anfragen */
.anf-card{border:1px solid var(--border);background:var(--bg-card);padding:12px 14px;margin-bottom:10px}
.anf-card.pending{border-left:3px solid #ffd700}
.anf-card.confirmed{border-left:3px solid var(--accent)}
.anf-card.declined{border-left:3px solid var(--red)}
.anf-card.alternative{border-left:3px solid #5bc0de}
.anf-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.anf-code{font-family:var(--font-display);font-size:18px;color:var(--accent);letter-spacing:0.1em}
.anf-status-pill{font-size:9px;padding:2px 6px;border:1px solid;letter-spacing:0.1em;border-radius:2px}
.anf-status-pending{border-color:#ffd700;color:#ffd700}
.anf-status-confirmed{border-color:var(--accent);color:var(--accent)}
.anf-status-declined{border-color:var(--red);color:var(--red)}
.anf-status-alternative{border-color:#5bc0de;color:#5bc0de}
.anf-time{font-size:10px;color:var(--text-muted);margin-left:auto}
.anf-row{display:flex;gap:8px;align-items:baseline;font-size:11px;padding:2px 0}
.anf-label{min-width:80px;color:var(--text-muted);font-size:9px;letter-spacing:0.1em}
.anf-val{color:var(--text)}
.anf-piercings{font-size:11px;color:var(--text);padding:6px 0}
.anf-pill{display:inline-block;padding:2px 6px;margin:2px 4px 2px 0;background:rgba(0,204,0,0.08);border:1px solid var(--border);font-size:10px}
.anf-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.anf-msg{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px;font-family:var(--font-sans);font-size:11px;width:100%;margin-top:6px;resize:vertical;min-height:40px}
.anf-timeline{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:10px;color:var(--text-muted)}
.anf-tl-item{padding:1px 0}
.anf-filter{font-size:10px}
/* Activity log */
.log-item{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.03);font-size:11px;display:flex;gap:8px}
.log-item .log-time{color:var(--text-muted);min-width:120px;font-size:10px}
.log-item .log-user{color:var(--accent);min-width:80px}
.log-item .log-action{color:var(--text)}
.toast{position:fixed;bottom:24px;right:24px;background:var(--accent);color:#000;padding:8px 16px;font-size:11px;z-index:300;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}


/* ===== W2 — KALENDER (Klassennamen unverändert, Tokens migriert) ===== */
.cal-layout { display:flex; gap:24px; align-items:flex-start; }
  .cal-sidebar { width:180px; flex-shrink:0; border:1px solid var(--border); background:var(--bg-card); }
  .sidebar-header { padding:10px 12px; font-size:10px; color:var(--text); letter-spacing:0.15em; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; background:rgba(0,204,0,0.05); }
  .sidebar-header::before { content:'📅'; font-size:14px; }
  .sidebar-group-label { padding:6px 12px 4px; font-size:9px; color:var(--text-muted); letter-spacing:0.12em; opacity:0.8; }
  .sidebar-item { display:flex; align-items:center; gap:8px; padding:6px 12px; cursor:pointer; transition:background 0.1s; user-select:none; border-bottom:1px solid var(--bg-detail); }
  .sidebar-item:hover { background:rgba(255,255,255,0.04); }
  .sidebar-item.disabled { opacity:0.5; }
  .sidebar-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .sidebar-name { font-size:11px; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sidebar-check { font-size:10px; color:var(--text-muted); flex-shrink:0; }
  .sidebar-group-btns { padding:6px 8px; display:flex; gap:3px; flex-wrap:wrap; border-bottom:1px solid var(--border); }
  .gbtn { font-size:9px; padding:2px 6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; letter-spacing:0.05em; font-family:var(--font-sans); }
  .gbtn:hover { border-color:var(--accent); color:var(--accent); }
  .gbtn.active { border-color:var(--accent); color:var(--accent); background:rgba(0,204,0,0.08); }
  .cal-main { flex:1; min-width:0; }
  .cal-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
  .date-nav { display:flex; align-items:center; gap:4px; }
  .date-nav .btn { padding:6px 10px; }
  #current-date { font-family:var(--font-display); font-size:26px; color:var(--text); min-width:220px; text-align:center; }
  .day-btns { display:flex; gap:3px; }
  .day-btns .btn { padding:4px 8px; font-size:10px; }
  .toolbar-right { display:flex; gap:6px; margin-left:auto; align-items:center; }
  .btn-refresh { font-size:18px; padding:4px 12px; border-color:var(--accent); color:var(--accent); }
  .btn-refresh:hover { background:rgba(0,204,0,0.1); }
  .cal-toolbar2 { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; font-size:10px; }
  .cal-toolbar2 .btn { padding:4px 10px; font-size:10px; }
  .range-inputs { display:flex; align-items:center; gap:4px; }
  .range-inputs input { background:var(--bg-card); border:1px solid var(--border); color:var(--text); padding:3px 6px; font-family:var(--font-sans); font-size:10px; width:100px; }
  .cal-actions { display:flex; align-items:center; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
  .cal-actions .btn { padding:5px 12px; font-size:10px; }
  .cal-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; }
  .time-cell { color:var(--accent); white-space:nowrap; font-size:12px; }
  .dur-cell { color:var(--text-muted); white-space:nowrap; font-size:10px; }
  .cal-cell { color:var(--text-muted); font-size:10px; white-space:nowrap; }
  .title-cell { color:var(--text); font-size:12px; }
  .notes-cell { color:var(--text-muted); font-size:10px; max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .allday-badge { font-size:9px; border:1px solid var(--text-muted); color:var(--text-muted); padding:1px 4px; margin-left:6px; }
  .no-entries { padding:40px 0; color:var(--text-muted); font-size:12px; text-align:center; }
  .no-entries::before { content:'// '; color:var(--accent); }
  .search-bar { display:flex; gap:6px; align-items:center; margin-bottom:8px; padding:8px 12px; border:1px solid var(--border); background:var(--bg-card); }
  .search-bar input { flex:1; background:transparent; border:none; color:var(--text); font-family:var(--font-sans); font-size:12px; outline:none; }
  .search-bar input::placeholder { color:var(--text-muted); }
  .search-bar .sc { color:var(--text-muted); cursor:pointer; font-size:14px; padding:0 4px; }
  .search-bar .sc:hover { color:var(--red); }
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200; align-items:center; justify-content:center; }
  .modal-overlay.show { display:flex; }
  .modal-box { background:var(--bg); border:1px solid var(--accent); padding:24px; max-width:650px; width:90%; max-height:80vh; overflow-y:auto; }
  .modal-box pre { white-space:pre-wrap; font-size:11px; color:var(--text); line-height:1.6; }
  .modal-html { font-size:11px; color:var(--text); line-height:1.6; }
  .modal-title { font-family:var(--font-display); font-size:24px; color:var(--accent); margin-bottom:12px; }
  .modal-close { float:right; cursor:pointer; color:var(--text-muted); font-size:18px; }
  .modal-close:hover { color:var(--red); }
  .toast { position:fixed; bottom:24px; right:24px; background:var(--accent); color:#000; padding:8px 16px; font-size:11px; z-index:300; opacity:0; transition:opacity 0.3s; pointer-events:none; }
  .toast.show { opacity:1; }
  .stat-footer { display:flex; gap:16px; padding:10px 0; margin-top:8px; border-top:1px solid var(--border); font-size:10px; color:var(--text-muted); flex-wrap:wrap; }
  .stat-footer span { color:var(--accent); }
  .dropdown-menu { position:absolute; background:var(--bg); border:1px solid var(--accent); z-index:50; min-width:180px; display:none; }
  .dropdown-menu.show { display:block; }
  .dropdown-menu div { padding:8px 14px; font-size:11px; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border); }
  .dropdown-menu div:hover { background:rgba(0,204,0,0.08); color:var(--accent); }
  .dropdown-menu div:last-child { border-bottom:none; }
  .hist-filter { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px; }
  .hist-filter .hf { font-size:9px; padding:2px 6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-family:var(--font-sans); }
  .hist-filter .hf:hover,.hist-filter .hf.active { border-color:var(--accent); color:var(--accent); }
  .putz-nav { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .putz-nav .btn { padding:4px 10px; font-size:11px; }
  .putz-nav span { font-size:13px; color:var(--accent); font-family:var(--font-display); min-width:80px; text-align:center; }
  .filter-modal-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:11px; }
  .filter-modal-row input { background:var(--bg-card); border:1px solid var(--border); color:var(--text); padding:4px 8px; font-family:var(--font-sans); font-size:11px; flex:1; }
  .filter-modal-row button { font-size:10px; padding:2px 8px; }

  .kal-login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:12px}
  .kal-login select,.kal-login input{background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:10px 14px;font-family:var(--font-sans);font-size:14px;width:200px}
  .kal-login select{width:220px}
  .kal-login .login-err{color:var(--red);font-size:11px;min-height:16px}
  .kal-login .login-info{max-width:340px;text-align:center;font-size:11px;color:var(--text-muted);line-height:1.6;border:1px solid var(--border);padding:12px;background:var(--bg-card)}
  .kal-restricted-banner{background:rgba(0,204,0,0.08);border:1px solid var(--accent);padding:8px 14px;margin-bottom:8px;font-size:10px;color:var(--accent);display:flex;align-items:center;justify-content:space-between}

  /* ── TAB SYSTEM ── */
  .cal-tabs { display:flex; gap:0; margin-bottom:12px; border-bottom:1px solid var(--border); }
  .cal-tab { padding:8px 20px; font-size:11px; letter-spacing:0.12em; color:var(--text-muted); cursor:pointer; border:1px solid transparent; border-bottom:none; background:transparent; font-family:var(--font-sans); transition:color 0.15s,background 0.15s; }
  .cal-tab:hover { color:var(--text); background:rgba(255,255,255,0.02); }
  .cal-tab.active { color:var(--accent); border-color:var(--border); border-bottom:1px solid var(--bg); margin-bottom:-1px; background:var(--bg); }
  .tab-panel { display:none; }
  .tab-panel.active { display:block; }

  /* ── SLOTS TAB ── */
  .slot-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
  .slot-day-header { padding:10px 0 4px; font-size:11px; color:var(--accent); letter-spacing:0.1em; border-bottom:1px solid var(--border); margin-top:12px; }
  .slot-day-header:first-child { margin-top:0; }
  .slot-row { display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--bg-detail); font-size:12px; transition:background 0.1s; }
  .slot-row:hover { background:rgba(255,255,255,0.02); }
  .slot-time { color:var(--accent); font-size:12px; min-width:110px; }
  .slot-type { font-size:9px; padding:2px 6px; border:1px solid var(--border); color:var(--text-muted); letter-spacing:0.1em; }
  .slot-type.piercing { border-color:var(--pink,#e05c97); color:var(--pink,#e05c97); }
  .slot-type.tattoo { border-color:var(--accent); color:var(--accent); }
  .slot-status { font-size:10px; min-width:80px; }
  .slot-status.free { color:var(--green); }
  .slot-status.booked { color:var(--yellow,#ffd700); }
  .slot-detail { font-size:10px; color:var(--text-muted); flex:1; }
  .slot-del { font-size:10px; color:var(--text-muted); cursor:pointer; padding:2px 6px; border:1px solid var(--border); background:transparent; font-family:var(--font-sans); }
  .slot-del:hover { color:var(--red); border-color:var(--red); }
  .slot-empty { padding:40px 0; color:var(--text-muted); font-size:12px; text-align:center; }
  .slot-empty::before { content:'// '; color:var(--accent); }

  /* Slot form */
  .slot-form { background:var(--bg-card); border:1px solid var(--border); padding:16px; margin-bottom:12px; display:none; }
  .slot-form.show { display:block; }
  .slot-form-title { font-size:10px; color:var(--accent); letter-spacing:0.12em; margin-bottom:10px; }
  .slot-form-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
  .slot-form-row label { font-size:10px; color:var(--text-muted); min-width:60px; letter-spacing:0.1em; }
  .slot-form-row input, .slot-form-row select { background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; font-family:var(--font-sans); font-size:11px; }
  .slot-form-row input[type="date"] { width:140px; }
  .slot-form-row input[type="time"] { width:100px; }
  .slot-form-row select { width:120px; cursor:pointer; }

  /* Series form weekday buttons */
  .wd-btn { padding:4px 10px; font-size:10px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-family:var(--font-sans); }
  .wd-btn:hover { border-color:var(--accent); color:var(--accent); }
  .wd-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(0,204,0,0.08); }


/* ===== W2 — CLEANING (Klassennamen unverändert, Tokens migriert) ===== */
.cl-wrap{max-width:750px;margin:0 auto}
.cl-title{font-family:var(--font-display);font-size:36px;margin-bottom:4px}
.cl-sub{font-size:11px;color:var(--text-muted);margin-bottom:20px}.cl-sub::before{content:'$ ';color:var(--accent)}
.btn.warn{border-color:var(--warn);color:var(--warn)}
.btn.sm{font-size:9px;padding:3px 8px}.btn.lg{font-size:14px;padding:12px 24px}
.cl-section{font-size:10px;color:var(--text-muted);margin:16px 0 8px;display:flex;align-items:center;gap:8px;letter-spacing:0.15em}
.cl-section::before{content:'# ';color:var(--accent)}.cl-section::after{content:'';flex:1;height:1px;background:var(--border)}
.beta{font-size:8px;padding:1px 4px;border:1px solid var(--warn);color:var(--warn);margin-left:6px}
.cl-wrap input[type=text],.cl-wrap select,.cl-wrap textarea{background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:6px 10px;font-family:var(--font-sans);font-size:11px;width:100%}
.cl-wrap input:focus,.cl-wrap select:focus{outline:none;border-color:var(--accent)}
.cl-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.cl-tabs::after{content:'→';display:none;position:sticky;right:0;padding:10px 4px;color:var(--text-muted);font-size:10px;background:linear-gradient(90deg,transparent,var(--bg) 40%)}
@media(max-width:500px){.cl-tabs::after{display:block}}
.cl-tab{padding:10px 14px;font-size:10px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.cl-tab:hover{color:var(--text)}.cl-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tc{display:none}.tc.active{display:block}
.cl-card{border:1px solid var(--border);background:var(--bg-card);padding:14px;margin-bottom:8px}
.kw-nav{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.kw-title{font-family:var(--font-display);font-size:24px;color:var(--accent);min-width:80px;text-align:center}
.day-row{display:flex;align-items:center;gap:6px;padding:8px 6px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;transition:background 0.1s}
.day-row:hover{background:var(--bg-detail)}.day-row.today{background:rgba(0,204,0,0.05);border-left:3px solid var(--accent)}
.day-emoji{width:22px;font-size:15px;text-align:center}.day-name{width:80px}.day-date{width:45px;color:var(--text-muted);font-size:10px}
.day-bar{flex:1;height:16px;background:var(--bg-card);border:1px solid var(--border);overflow:hidden}
.day-bar-fill{height:100%;transition:width 0.3s}.day-stats{width:80px;text-align:right;font-size:10px}
.sum-box{border:1px solid var(--border);background:var(--bg-card);padding:12px;margin-top:12px;font-size:11px;line-height:1.8}
.sum-box span{color:var(--accent)}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:var(--bg);border:1px solid var(--accent);padding:20px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}
.modal-title{font-family:var(--font-display);font-size:22px;color:var(--accent);margin-bottom:10px}
.modal-close{float:right;cursor:pointer;color:var(--text-muted);font-size:16px}.modal-close:hover{color:var(--red)}
.area-card{border:1px solid var(--border);padding:12px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.area-days{font-size:22px;font-family:var(--font-display);min-width:50px;text-align:center}
.area-ok{color:var(--green)}.area-warn{color:var(--warn)}.area-bad{color:var(--red)}.area-never{color:var(--text-muted)}
.shop-item{display:flex;align-items:center;gap:8px;padding:6px;border-bottom:1px solid var(--border);font-size:11px}
.shop-item.done{opacity:0.4;text-decoration:line-through}
.wish-card{border-left:3px solid var(--warn);padding:8px 12px;margin-bottom:6px;background:var(--bg-card);font-size:11px}
.absence-btns{display:flex;gap:12px;justify-content:center;margin:16px 0}
.cl-toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom, 0px));right:20px;background:var(--accent);color:#000;padding:8px 16px;font-size:11px;z-index:300;opacity:0;transition:opacity 0.3s;pointer-events:none}.cl-toast.show{opacity:1}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.photo-thumb{border:1px solid var(--border);background:var(--bg-card);overflow:hidden;cursor:pointer}
.photo-thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.photo-thumb-info{padding:6px;font-size:9px;color:var(--text-muted)}
.photo-thumb-cat{font-size:8px;color:var(--warn);margin-bottom:2px}
@media(max-width:600px){.day-name{width:60px;font-size:11px}.day-stats{width:60px;font-size:9px}.absence-btns{flex-direction:column}}


/* ===== W2 — BESTELLUNGEN (Klassennamen unverändert, Tokens migriert) ===== */
.b-wrap{max-width:1100px;margin:0 auto}
.b-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.b-stats{font-size:11px;color:var(--text-muted)}
.b-stats .knapp{color:#d9534f}
.b-stats .bestellt{color:#4a9eff}
.b-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.btn-x{font-size:10px;padding:6px 12px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-family:var(--font-sans)}
.btn-x:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,204,0,.08)}
.btn-x.primary{border-color:var(--accent);color:var(--accent)}
.b-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center;font-size:10px;color:var(--text-muted)}
.fbtn{font-size:10px;padding:4px 10px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans)}
.fbtn:hover,.fbtn.active{border-color:var(--accent);color:var(--accent);background:rgba(0,204,0,.08)}
.fbtn.knapp.active{border-color:#d9534f;color:#d9534f;background:rgba(217,83,79,.08)}
.fbtn.bestellt.active{border-color:#4a9eff;color:#4a9eff;background:rgba(74,158,255,.08)}
.fbtn.reicht.active{border-color:#f0ad4e;color:#f0ad4e;background:rgba(240,173,78,.08)}
.fbtn.voll.active{border-color:#5cb85c;color:#5cb85c;background:rgba(92,184,92,.08)}
.b-select{font-size:10px;padding:4px 10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:var(--font-sans)}
.kat-section{margin-bottom:18px}
.kat-title{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:8px;position:sticky;top:0;background:var(--bg);z-index:5}
.art-item{border:1px solid var(--border);background:var(--bg-card);padding:10px 12px;margin-bottom:4px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.art-status{font-size:9px;padding:3px 8px;border:1px solid;font-weight:bold;display:inline-block;min-width:80px;text-align:center}
.art-status.voll{border-color:#5cb85c;color:#5cb85c;background:rgba(92,184,92,.08)}
.art-status.reicht_noch_aus{border-color:#f0ad4e;color:#f0ad4e;background:rgba(240,173,78,.08)}
.art-status.wird_knapp{border-color:#d9534f;color:#d9534f;background:rgba(217,83,79,.12);animation:pulse 2s infinite}
.art-status.bestellt{border-color:#4a9eff;color:#4a9eff;background:rgba(74,158,255,.08)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}
.art-body{min-width:0}
.art-name{font-size:13px;color:var(--text);font-weight:bold;line-height:1.3}
.art-meta{font-size:10px;color:var(--text-muted);margin-top:3px;line-height:1.4}
.art-meta .lief{color:var(--text)}
.art-meta .preis{color:var(--accent)}
.art-meta .notiz{color:#f0ad4e;font-style:italic}
.art-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.act-btn{font-size:10px;padding:4px 8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans);white-space:nowrap}
.act-btn:hover{border-color:var(--accent);color:var(--accent)}
.act-btn.bestellt-active{border-color:#4a9eff;color:#4a9eff;background:rgba(74,158,255,.08);cursor:default}
.bestand-input{width:60px;background:var(--bg);border:1px solid var(--accent);color:var(--text);font-family:var(--font-sans);font-size:11px;padding:3px 6px;outline:none}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--accent);padding:18px;max-width:560px;width:90%;max-height:85vh;overflow-y:auto}
.modal h3{font-size:14px;color:var(--accent);margin-bottom:12px}
.modal label{display:block;font-size:10px;color:var(--text-muted);margin:8px 0 3px}
.modal input,.modal textarea,.modal select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:11px;padding:6px 10px;outline:none}
.modal textarea{resize:vertical;min-height:60px}
.modal-row{display:flex;gap:8px}
.modal-row > div{flex:1}
.modal-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.alt-lief-row{display:flex;gap:6px;align-items:center;margin-top:6px;padding:6px;background:var(--bg);border:1px solid var(--border);font-size:10px}
.alt-lief-row .name{flex:1}
.alt-lief-row .preis{color:var(--accent)}
.toast{position:fixed;bottom:24px;right:24px;background:var(--accent);color:#000;padding:10px 18px;font-size:11px;z-index:300;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
.toast.error{background:#d9534f;color:#fff}
.toast.warn{background:#f0ad4e;color:#000}
@media (max-width:768px){
  .art-item{grid-template-columns:1fr;gap:6px}
  .art-status{min-width:auto;width:fit-content}
  .art-actions{justify-content:flex-start}
  .b-head{flex-direction:column;align-items:stretch}
  .b-actions{margin-left:0}
}


/* ===== W2 — BESTELLUNGEN_LIEFERANTEN (Klassennamen unverändert, Tokens migriert) ===== */
.l-wrap{max-width:900px;margin:0 auto}
.l-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.l-actions{margin-left:auto;display:flex;gap:6px}
.btn-x{font-size:10px;padding:6px 12px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-family:var(--font-sans)}
.btn-x:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,204,0,.08)}
.btn-x.primary{border-color:var(--accent);color:var(--accent)}
.lief-item{border:1px solid var(--border);background:var(--bg-card);padding:12px 14px;margin-bottom:5px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;cursor:pointer}
.lief-item:hover{border-color:var(--accent)}
.lief-name{font-size:13px;font-weight:bold;color:var(--text)}
.lief-counts{font-size:10px;color:var(--text-muted);margin-top:3px}
.lief-counts .knapp{color:#d9534f;margin-left:8px}
.lief-counts .bestellt{color:#4a9eff;margin-left:8px}
.lief-actions{display:flex;gap:4px}
.act-btn{font-size:10px;padding:4px 8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans)}
.act-btn:hover{border-color:var(--accent);color:var(--accent)}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--accent);padding:18px;max-width:480px;width:90%}
.modal h3{font-size:14px;color:var(--accent);margin-bottom:12px}
.modal label{display:block;font-size:10px;color:var(--text-muted);margin:8px 0 3px}
.modal input,.modal textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:11px;padding:6px 10px;outline:none}
.modal textarea{resize:vertical;min-height:60px}
.modal-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.toast{position:fixed;bottom:24px;right:24px;background:var(--accent);color:#000;padding:10px 18px;font-size:11px;z-index:300;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
.toast.error{background:#d9534f;color:#fff}


/* ===== W2 — BESTELLUNGEN_LIEFERANT_DETAIL (Klassennamen unverändert, Tokens migriert) ===== */
.b-wrap{max-width:900px;margin:0 auto}
.b-head{margin-bottom:14px;font-size:11px;color:var(--text-muted)}
.b-head a{color:var(--accent)}
.lief-info{border:1px solid var(--accent);padding:14px;margin-bottom:14px;background:var(--bg-card)}
.lief-info h2{font-size:14px;color:var(--accent);margin-bottom:6px}
.lief-info .notiz{font-size:11px;color:var(--text-muted);font-style:italic;margin-top:4px}
.btn-x{font-size:10px;padding:6px 12px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-family:var(--font-sans)}
.btn-x:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,204,0,.08)}
.btn-x.primary{border-color:var(--accent);color:var(--accent)}
.btn-x.warn{border-color:#f0ad4e;color:#f0ad4e}
.btn-x.danger{border-color:#d9534f;color:#d9534f}
.bestellzettel{border:1px solid var(--border);background:var(--bg-card);padding:12px}
.bz-row{display:grid;grid-template-columns:30px auto 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--border);font-size:11px}
.bz-row:last-child{border-bottom:none}
.bz-status{font-size:9px;padding:2px 6px;border:1px solid;display:inline-block;min-width:60px;text-align:center}
.bz-status.voll{border-color:#5cb85c;color:#5cb85c}
.bz-status.reicht_noch_aus{border-color:#f0ad4e;color:#f0ad4e}
.bz-status.wird_knapp{border-color:#d9534f;color:#d9534f}
.bz-status.bestellt{border-color:#4a9eff;color:#4a9eff}
.bz-name{font-size:12px}
.bz-fehlt{font-size:10px;color:#d9534f}
.bz-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.bz-summary{font-size:11px;color:var(--text-muted);margin-right:auto}
.bz-summary .sel{color:var(--accent)}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--accent);padding:18px;max-width:560px;width:90%;max-height:85vh;overflow-y:auto}
.modal h3{font-size:14px;color:var(--accent);margin-bottom:12px}
.modal label{display:block;font-size:10px;color:var(--text-muted);margin:8px 0 3px}
.modal input,.modal textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:11px;padding:6px 10px;outline:none}
.modal-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.toast{position:fixed;bottom:24px;right:24px;background:var(--accent);color:#000;padding:10px 18px;font-size:11px;z-index:300;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
.toast.error{background:#d9534f;color:#fff}
@media (max-width:768px){
  .bz-row{grid-template-columns:30px auto 1fr;font-size:11px}
  .bz-row .bz-fehlt{grid-column:2/-1;text-align:left}
  .bz-actions{flex-direction:column;align-items:stretch}
  .bz-summary{margin-right:0}
}