/* ══════════════════════════════════════════════════════════════════
   APP V4 — Recruiting App Pages
   Warm Swiss minimalism. Replaces inline CSS on all app pages.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ DESIGN TOKENS ═══ */
:root {
  --bg:          #F8F7F4;
  --bg-warm:     #F3F1EC;
  --bg-card:     #FFFFFF;
  --bg-hover:    #FAFAF7;
  --bg-elevated: #FCFBF9;
  --bg-inset:    #EFEEE9;

  --border:       #E6E3DC;
  --border-light: #EDEBE5;
  --border-hover: #D4D0C7;

  --ink:   #1B1918;
  --ink-2: #4A4643;
  --ink-3: #7A756F;
  --ink-4: #A9A39B;
  --ink-5: #CBC6BE;

  --gold:      #B8860B;
  --gold-hot:  #D4A03E;
  --gold-soft: rgba(184,134,11,0.08);
  --gold-med:  rgba(184,134,11,0.14);
  --gold-text: #8B6914;
  --gold-dark: #8B6914;
  --gold-light: #fef3c7;

  --teal:      #0D9488;
  --teal-soft: rgba(13,148,136,0.07);
  --coral:     #DC4A3A;
  --coral-soft:rgba(220,74,58,0.07);
  --amber:     #D97706;
  --amber-soft:rgba(217,119,6,0.07);
  --blue:      #2563EB;
  --blue-soft: rgba(37,99,235,0.07);
  --green:     #16a34a;

  /* Legacy aliases for JS/existing refs */
  --navy:    #1B1918;
  --slate:   #7A756F;
  --light:   #F8F7F4;
  --success: #16a34a;
  --warning: #D97706;
  --error:   #DC4A3A;
  --info:    #2563EB;
  /* Status als Text auf weichem Grund: --success/--warning/--error sind Flächenfarben und
     liegen auf Weiss unter 4.5:1 (Grün 3.0, Amber 3.2, Coral 4.1). Für Pillen, Abzeichen und
     Meldezeilen gibt es deshalb je Modus eine Textfarbe und einen weichen Grund. */
  --success-soft: rgba(22,163,74,0.10);
  --success-text: #166534;
  --warning-text: #B45309;
  --error-text:   #991B1B;

  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;

  --sh-xs: 0 1px 2px rgba(27,25,24,0.04);
  --sh-sm: 0 1px 3px rgba(27,25,24,0.05), 0 1px 2px rgba(27,25,24,0.03);
  --sh-md: 0 4px 12px rgba(27,25,24,0.06), 0 1px 3px rgba(27,25,24,0.04);
  --sh-lg: 0 8px 28px rgba(27,25,24,0.07), 0 2px 6px rgba(27,25,24,0.04);
  /* War bis 5.9.26 nirgends definiert — .modal-content und .us-panel verwiesen ins Leere,
     Dialoge hatten keinen Schatten. Die vier Stellen-Dialoge trugen ihn deshalb inline. */
  --sh-xl: 0 16px 48px rgba(27,25,24,0.14), 0 4px 12px rgba(27,25,24,0.06);

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-full: 9999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  180ms;
}

/* ═══ DARK MODE ═══ */
:root[data-theme="dark"] {
  --bg:          #0F0E0C;
  --bg-warm:     #15130F;
  --bg-card:     #1A1814;
  --bg-hover:    #22201B;
  --bg-elevated: #1F1D18;
  --bg-inset:    #13110E;
  --border:      #2F2A22;
  --border-light:#262118;
  --border-hover:#3D3630;
  --ink:   #F5F2EA;
  --ink-2: #D4CFC3;
  --ink-3: #A9A39B;
  --ink-4: #7A756F;
  --ink-5: #4A4643;
  --gold:      #D4A03E;
  --gold-hot:  #E8BC5A;
  --gold-soft: rgba(212,160,62,0.1);
  --gold-med:  rgba(212,160,62,0.18);
  --gold-text: #D4A03E;
  --gold-dark: #D4A03E;
  --navy: #F5F2EA;
  --slate:#A9A39B;
  --light:#1A1814;
  --success-soft: rgba(74,222,128,0.14);
  --success-text: #86EFAC;
  --warning-text: #FBBF24;
  --error-text:   #E4604F;
}

/* ═══ SKIP-LINK ═══
   Erstes fokussierbares Element jeder App-Seite (sidebar.js fügt ihn ein): sichtbar nur mit
   Tastaturfokus, führt an <main> vorbei an Kopfzeile und Seitenleiste. */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  padding: 0.5rem 0.9rem; border-radius: var(--r-xs);
  background: var(--ink); color: var(--bg-card); font-weight: 600; text-decoration: none;
  box-shadow: var(--sh-md);
}
.skip-link:focus { top: 0.75rem; outline: 2px solid var(--gold); outline-offset: 2px; }
main:focus { outline: none; }

/* ═══ RESET & BASE ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--gold-med); color: var(--ink); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.5;
}

/* ═══ HEADER ═══ */
.header {
  background: rgba(248, 247, 244, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-light);
  padding: 0 2rem;
  height: 60px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  box-shadow: var(--sh-xs);
}
:root[data-theme="dark"] .header {
  background: rgba(15, 14, 12, 0.85);
}

.header-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--gold), var(--gold-hot));
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(184,134,11,0.2);
}

.header-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.header-title span { color: var(--gold); font-weight: 700; }

.header-divider {
  color: var(--border-hover);
  font-weight: 200;
  font-size: 1.2rem;
  margin: 0 0.1rem;
}

.header-app {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Auf dem Handy rückt der Kopf enger zusammen — gleiche Regel wie im Onboarding,
   damit er beim Wechsel zwischen beiden Apps derselbe bleibt. */
@media (max-width: 767px) {
  .header-title,
  .header-app {
    font-size: 0.875rem;
  }
  /* Grundzustand schmal: das App-Label allein. Ob die Wortmarke daneben passt, entscheidet
     kopfEinpassen() in sidebar.js — ohne JS läuft so nichts über den Rand (gemessen bei
     320 px: die Glocke stand 24 px ausserhalb). Gleiche Regel wie im Onboarding. */
  .header-title,
  .header-divider {
    display: none;
  }
  .header-brand { min-width: 0; }
  .header-meta { flex-shrink: 0; }
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-xs);
  color: var(--ink-3);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.header-icon-btn:hover { background: var(--bg-inset, #F0EDE8); color: var(--ink-2); }

.header-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header-avatar-btn:hover { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* ═══ BUTTONS ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  border: none;
  text-decoration: none;
  white-space: nowrap;
}
/* Gesperrter Knopf (z.B. Senden während des Requests): bis 5.9.26 gab es keinen sichtbaren
   Unterschied — der Doppelklick-Guard griff, aber der Knopf sah klickbar aus. */
/* transform/box-shadow zurücksetzen: .btn-primary:hover steht später mit gleicher Spezifität und
   liess ein gesperrtes «Wird gesendet…» weiter wippen (apply.html/status.html hatten es je einzeln).
   Die :hover-Varianten (0,3,0) sind noetig — ohne sie gewinnt die spaetere Hover-Regel (Review 5.9.26). */
.btn:active { transform: scale(0.96); }
.btn:disabled, .btn[disabled], .btn:disabled:hover, .btn[disabled]:hover, .btn:disabled:active { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }


/* Weisse Schrift auf dem Goldverlauf ist eine BEWUSSTE Abweichung von AA (Entscheid Enis,
   12.9.2026). Gemessen an der schlechtesten Stelle des Verlaufs: hell 2.36:1, dunkel 1.78:1
   — dunkle Tinte (#111827) käme auf 5.45:1 bzw. 7.52:1. Die Marke wiegt hier schwerer; ein
   Vorher-Nachher lag vor der Entscheidung vor. Gilt genauso für .tab.active.
   Nicht bei jedem Interface-Review neu aufwerfen. Keine Kundenzusage steht dem entgegen:
   Faktenblatt, AGB und Datenschutzerklärung nennen keine Barrierefreiheitsstufe.
   Für KUNDENfarben gilt das Gegenteil — die werden gerechnet, siehe
   __tests__/akzentTextfarbe.test.js. */
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-hot));
  color: white;
  box-shadow: var(--sh-xs);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184,134,11,0.35);
}

.btn-secondary {
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-warm);
  border-color: var(--border-hover);
}

.btn-success {
  background: var(--green);
  color: white;
}
.btn-success:hover { opacity: 0.9; }

.btn-danger {
  background: var(--coral);
  color: white;
}
.btn-danger:hover { opacity: 0.9; }

.btn-ghost {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid transparent;
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* ═══ LAYOUT ═══ */
.layout {
  min-height: 100vh;
  padding-top: 60px;
}

#sidebar-partial { display: contents; }

/* ═══ SIDEBAR ═══ */
.sidebar {
  width: 220px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-light);
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed { width: 56px; }

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  padding: 1rem 0 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sidebar-section {
  margin-bottom: 0.75rem;
}

.sidebar-title {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem 0.375rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 180ms;
}
.sidebar.collapsed .sidebar-title { opacity: 0; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  margin: 1px 6px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-link:hover {
  background: var(--bg-hover);
  color: var(--ink);
}
/* Zähl-Abzeichen in der Seitenleiste — gleiche Optik wie im Onboarding (dort css/sidebar.css):
   weiche Pille, Farbe = Bedeutung (koralle: dringend/ungelesen, bernstein: offen, gold: Prüfung).
   Vorher trugen Support, Inbox und Prüfungen je einen eigenen Inline-Stil (gefüllt, 11 px). */
.sidebar-badge { margin-left: auto; font-family: var(--font-body); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; line-height: 1; flex-shrink: 0; }
.sidebar-badge-coral { background: var(--coral-soft); color: var(--coral); }
.sidebar-badge-amber { background: var(--amber-soft); color: var(--amber); }
.sidebar-badge-gold  { background: var(--gold-soft);  color: var(--gold-text); }
.sidebar-link.active {
  background: var(--gold-soft);
  color: var(--gold-text);
  font-weight: 600;
  margin-left: 0;
  padding-left: calc(1rem - 3px);
  box-shadow: inset 3px 0 0 var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.sidebar-link.active svg { opacity: 1; }

.sidebar-link-text {
  overflow: hidden;
  transition: opacity 180ms, width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.7;
  transition: opacity 120ms;
}
.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon { opacity: 1; }

/* ── Collapsed ── */
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .sidebar-link-text,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-user-role {
  opacity: 0;
  width: 0;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-link {
  margin: 1px 4px;
  justify-content: center;
  padding: 0.5rem;
}
.sidebar.collapsed .sidebar-link.active {
  padding-left: 0.5rem;
  margin-left: 0;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 0.75rem 0.25rem;
}
.sidebar.collapsed .sidebar-user-info { display: none; }
.sidebar.collapsed .sidebar-logout-btn { display: none; }

/* ── Collapse button ── */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem;
  background: none;
  border: none;
  border-top: 1px solid var(--border-light);
  cursor: pointer;
  color: var(--ink-4);
  transition: color 120ms, background 120ms;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: var(--ink-2); background: var(--bg-hover); }

/* ── Onboarding Link ── */
.sidebar-onboarding-wrap {
  padding: 8px 8px 0;
}
.sidebar-onboarding-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-med);
  border-radius: var(--r-xs);
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms var(--ease), box-shadow 120ms var(--ease);
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.sidebar-onboarding-btn:hover {
  background: var(--gold-med);
  box-shadow: var(--sh-xs);
}
.sidebar.collapsed .sidebar-onboarding-btn {
  padding: 8px;
  justify-content: center;
}
.sidebar-collapse-btn svg { transition: transform 220ms cubic-bezier(0.4,0,0.2,1); }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* ── User section ── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 120ms;
  overflow: hidden;
}
.sidebar-user:hover { background: var(--bg-hover); }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 0.75rem 0.5rem; }

.sidebar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Foto-Avatar: füllt den runden Badge, Initialen bleiben der Fallback-Inhalt */
.sidebar-avatar img,
.us-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  transition: opacity 180ms;
}
.sidebar.collapsed .sidebar-user-info { opacity: 0; width: 0; }

.sidebar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 0.6875rem;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-4);
  padding: 0.3rem;
  border-radius: var(--r-xs);
  transition: color 120ms, background 120ms;
  display: flex;
  align-items: center;
}
.sidebar-logout-btn:hover { color: var(--coral, #DC4A3A); background: rgba(220,74,58,0.07); }
.sidebar.collapsed .sidebar-logout-btn { display: none; }

/* ═══ MAIN CONTENT ═══ */
.main {
  min-width: 0;
  margin-left: 220px;
  padding: 2rem;
  transition: margin-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar.collapsed + .main { margin-left: 56px; }

/* ═══ PAGE HEADER ═══ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--ink-3);
  margin-top: 0.25rem;
}

/* ═══ CARDS ═══ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.5rem;
  box-shadow: var(--sh-xs);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 0.2rem;
}

/* ═══ STATS GRID ═══ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.stat-card.success::before { background: var(--green); }
.stat-card.warning::before { background: var(--amber); }
.stat-card.info::before    { background: var(--blue); }

/* Anklickbare Stat-Karten (Dashboard → gefilterte Liste) */
a.stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
a.stat-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.stat-label {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.stat-change {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  color: var(--ink-4);
}
.stat-change.positive { color: var(--green); }
.stat-change.negative { color: var(--coral); }

/* ═══ DASHBOARD GRID ═══ */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
/* Ohne min-width:0 hat eine Grid-Spur als Mindestbreite die MIN-CONTENT-Breite ihres
   Inhalts — "1fr" bedeutet dann nicht "so breit wie da ist", sondern "mindestens so breit
   wie der sperrigste Inhalt". Auf 390px wuchs die einspaltige Spur dadurch auf 386.7px in
   einem 358px breiten Raster, und die ganze Seite liess sich 13px seitwärts schieben.
   Es hing an den Daten: mit kurzen Stellentiteln fiel es nicht auf, mit längeren schon.
   Nachgemessen: mit dieser Regel 0px Seitenüberlauf UND kein Überlauf innerhalb der
   Karten — der Inhalt passt, die Spur wollte nur nicht schrumpfen. */
.dashboard-grid > * { min-width: 0; }
.dashboard-grid.full { grid-template-columns: 1fr; }

/* ═══ BADGES / STATUS ═══ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-new       { background: var(--blue-soft);  color: var(--blue); }
.badge-screening { background: var(--gold-soft);  color: var(--gold-text); }
.badge-interview { background: rgba(139,92,246,0.08); color: #7c3aed; }
/* Engere Auswahl: Indigo — bewusst zwischen Interview (Violett) und Angebot (Teal)
   unterscheidbar; halbtransparent wie die Nachbarn, traegt damit in beiden Modi. */
.badge-shortlist { background: rgba(67,56,202,0.08); color: #4338ca; }
.badge-offer     { background: var(--teal-soft);  color: var(--teal); }
.badge-hired     { background: rgba(22,163,74,0.08); color: var(--green); }
.badge-rejected  { background: var(--coral-soft); color: var(--coral); }
.badge-draft     { background: var(--bg-inset);   color: var(--ink-3); }
.badge-active    { background: rgba(22,163,74,0.08); color: var(--green); }
.badge-closed    { background: var(--coral-soft); color: var(--coral); }
.badge-paused    { background: var(--amber-soft); color: var(--amber); }

/* ═══ TABLES ═══ */
.table-container { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg);
}
tr:hover td { background: var(--bg-hover); }
tr:last-child td { border-bottom: none; }

/* ═══ FORMS ═══ */
.form-group { margin-bottom: 1.25rem; }

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 0.375rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  outline: none;
}
/* Native Select-Widgets rendern bei identischem Padding 2px höher als Inputs — in
   Formularen mit gemischten Feldtypen springt die Feldkante dadurch sichtbar. line-height
   greift bei Selects nicht (vom Widget ignoriert), eine feste height würde die bewusst
   kompakten Selects mit eigenem Padding aufblasen. Deshalb die Differenz über das Padding:
   relativ zur Basisregel darüber, und Inline-Paddings gewinnen weiterhin.
   appearance:none wäre der dritte Weg, entfernt aber den nativen Pfeil.
   Die Selektoren tragen bewusst Element + Klasse (0,1,1): fast jede Seite wiederholt die
   Formularregeln in einem eigenen style-Block, der nach dieser Datei geladen wird und
   bei gleicher Spezifität gewinnen würde. */
select,
select.form-select,
select.form-input {
  padding-top: calc(0.625rem - 1px);
  padding-bottom: calc(0.625rem - 1px);
}

input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
/* Platzhalter sind Text: --ink-4 lag auf Weiss bei 2.50:1, --ink-3 erreicht 4.56:1 und bleibt
   als Grau klar vom eingegebenen Wert (--ink) unterscheidbar. */
input::placeholder, textarea::placeholder { color: var(--ink-3); }

/* ═══ FELDER AUF DEM HANDY ═══
   Safari auf dem iPhone zoomt in die Seite hinein, sobald ein angetipptes Feld kleiner als
   16 px ist. Danach steht die Maske quer und muss von Hand zurückgezogen werden — auf dem
   Bewerbungsformular trifft das Bewerbende, in den Masken die HR-Fachperson. Deshalb auf dem
   Handy jedes Feld, das eine Texteingabe oder ein Auswahlrad öffnet, auf genau 16 px;
   ab 768 px bleibt alles wie zuvor (0.875rem und die Ausnahmen der Seiten).
   Ausgenommen sind die Feldarten, die gar keinen Zoom auslösen (Kontrollkästchen,
   Auswahlknopf, Dateiwahl, Schalter, Schieberegler, Farbwahl, verstecktes Feld) — sie würden
   nur unnötig wachsen; das 12-px-Dateifeld im Support-Formular etwa hätte seinen nativen
   Knopf verdoppelt.
   bewusst !important, und zwar eng: 86 Feld-Elemente im Markup tragen ein eigenes
   style="font-size:…" (allein applicant.html 50), und ein Attribut-Style schlägt jede
   Stylesheet-Regel. Ohne die Ausnahme erreichte die Regel nur einen Bruchteil der Masken.
   Sie gilt für EINE Eigenschaft innerhalb EINES Breakpoints, nicht flächendeckend.
   Obergrenze: Wer auf dem Handy bewusst ein kleineres Feld will, kommt hier nicht vorbei —
   dann gehört die Ausnahme namentlich in diesen Block, nicht ein zweites !important daneben.
   iOS-16-px-Regel (Task 12, 17.9.2026) */
@media (max-width: 767px) {
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="hidden"]),
  html body select,
  html body textarea,
  html body [contenteditable="true"],
  html body [contenteditable=""] {
    font-size: 16px !important;
  }
}

/* ═══ EMPTY STATE ═══ */
.empty-state {
  text-align: center;
  padding: 2.5rem 2rem;
  color: var(--ink-3);
}
.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

/* ═══ LISTENZEILE (geteilt) ═══
   Die Zeile hinter den grossen Listen: Stellen (jobs.html), Bewerbende
   (applicants.html) und die Kurzlisten im Dashboard. Hiess bis zum 27.7.2026
   .job-item — ein Name, der behauptete, es ginge um Stellen. Wer hier etwas an
   den Stellenkacheln richten wollte, veränderte in Wahrheit auch die
   Bewerbendenliste, ohne es zu merken. .list-row sagt, was es ist: eine Zeile.
   Was wirklich nur Stellen betrifft, heisst weiterhin .job-* (.job-title,
   .job-stat) und gehört nicht hierher. */
.list-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: var(--sh-xs);
}
.list-row:hover {
  background: var(--gold-soft);
  border-color: var(--gold);
  box-shadow: var(--sh-sm);
}
.list-row { margin-bottom: 0.5rem; }
.list-row:last-child { margin-bottom: 0; }
.list-row-main { flex: 1; min-width: 0; }
.job-title { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.list-row-meta  { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.2rem; }
.job-stats { display: flex; gap: 1rem; align-items: center; }
.job-stat  { text-align: center; }
.job-stat-value { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.job-stat-label { font-size: 0.6875rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* ═══ ACTIVITY LIST ═══ */
.activity-list { max-height: 300px; overflow-y: auto; }
.activity-item {
  display: flex;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-light);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  background: var(--bg-inset);
  flex-shrink: 0;
}
.activity-icon.new      { background: var(--blue-soft); }
.activity-icon.interview{ background: rgba(139,92,246,0.08); }
.activity-icon.hired    { background: rgba(22,163,74,0.08); }
.activity-icon.rejected { background: var(--coral-soft); }
.activity-content { flex: 1; min-width: 0; }
.activity-text   { font-size: 0.875rem; color: var(--ink-2); }
.activity-text strong { font-weight: 600; color: var(--ink); }
.activity-time   { font-size: 0.75rem; color: var(--ink-4); margin-top: 0.2rem; }

/* ═══ INTERVIEW ITEMS ═══ */
.interview-item {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  border-radius: var(--r-sm);
  background: var(--bg);
  margin-bottom: 0.5rem;
  gap: 1rem;
  border: 1px solid var(--border-light);
}
.interview-item.unscheduled {
  background: var(--amber-soft);
  border-color: var(--amber);
}
.interview-date-col { min-width: 70px; text-align: center; }
.interview-date { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.interview-time { font-size: 0.75rem; color: var(--ink-3); }
.interview-info { flex: 1; min-width: 0; }
.interview-candidate { font-weight: 600; color: var(--ink); }
.interview-job  { font-size: 0.8125rem; color: var(--ink-3); }
.interview-type { font-size: 0.75rem; color: var(--ink-4); margin-top: 0.2rem; }

/* ═══ PIPELINE ═══ */
.pipeline-section {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}
.pipeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.pipeline-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.pipeline-subtitle { font-size: 0.875rem; color: var(--ink-3); margin-top: 0.2rem; }
.pipeline-total { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; color: var(--gold-text); }
.pipeline-total-label { font-size: 0.75rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.875rem;
  margin-top: 0.75rem;
}
.pipeline-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pipeline-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  margin-bottom: 0.625rem;
  transition: transform var(--dur) var(--ease);
}
.pipeline-stage:hover .pipeline-icon { transform: scale(1.08); }
.pipeline-stage:nth-child(1) .pipeline-icon { background: linear-gradient(135deg, #fef3c7, #fcd34d); }
.pipeline-stage:nth-child(2) .pipeline-icon { background: linear-gradient(135deg, var(--blue-soft), #93c5fd); }
.pipeline-stage:nth-child(3) .pipeline-icon { background: linear-gradient(135deg, rgba(139,92,246,0.1), #c4b5fd); }
.pipeline-stage:nth-child(4) .pipeline-icon { background: linear-gradient(135deg, var(--amber-soft), #fcd34d); }
.pipeline-stage:nth-child(5) .pipeline-icon { background: linear-gradient(135deg, rgba(22,163,74,0.08), #86efac); }
.pipeline-stage:nth-child(6) .pipeline-icon { background: linear-gradient(135deg, var(--coral-soft), #fca5a5); }
.pipeline-count { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.pipeline-label { font-size: 0.6875rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pipeline-bar-container {
  width: 100%; height: 90px;
  background: var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: 0.625rem;
  display: flex; align-items: flex-end;
}
.pipeline-bar { width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: height 0.5s var(--ease); }
.pipeline-stage:nth-child(1) .pipeline-bar { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-hot) 100%); }
.pipeline-stage:nth-child(2) .pipeline-bar { background: linear-gradient(180deg, #60a5fa 0%, var(--blue) 100%); }
.pipeline-stage:nth-child(3) .pipeline-bar { background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%); }
.pipeline-stage:nth-child(4) .pipeline-bar { background: linear-gradient(180deg, #fbbf24 0%, var(--amber) 100%); }
.pipeline-stage:nth-child(5) .pipeline-bar { background: linear-gradient(180deg, #4ade80 0%, var(--green) 100%); }
.pipeline-stage:nth-child(6) .pipeline-bar { background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); }

/* ═══ ANALYTICS ═══ */
.analytics-section {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}
.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.analytics-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.analytics-subtitle { font-size: 0.875rem; color: var(--ink-3); margin-top: 0.2rem; }
.analytics-controls { display: flex; gap: 0.75rem; align-items: center; }
.analytics-controls .form-select { width: auto; }
.analytics-chart-container {
  height: 280px;
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  padding: 1rem;
  box-shadow: var(--sh-xs);
}
.analytics-legend { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; }
.legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-3); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.legend-dot.views       { background: linear-gradient(135deg, #60a5fa, var(--blue)); }
.legend-dot.applications{ background: linear-gradient(135deg, var(--gold), var(--gold-hot)); }

/* ═══ USER MENU DROPDOWN ═══ */

/* ═══ MOBILE NAV ═══ */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 0.375rem;
  cursor: pointer;
  color: var(--ink-3);
  border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-menu-btn:hover { background: var(--bg-hover); color: var(--ink); }
.mobile-menu-btn svg { width: 22px; height: 22px; }

.mobile-nav {
  display: none;
  position: fixed;
  top: 60px; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  padding: 1rem;
  z-index: 300;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-3);
  font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-nav a:hover, .mobile-nav a.active {
  background: var(--bg-hover);
  color: var(--ink);
}
.mobile-nav-divider { height: 1px; background: var(--border); margin: 0.5rem 0; }
.mobile-logout  { color: var(--coral) !important; }
.mobile-onboarding { color: var(--ink) !important; }
.mobile-onboarding-btn { display: none; }

/* ═══ MODALS ═══ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27,25,24,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
}
.modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: none; background: none;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-close:hover { background: var(--bg-hover); color: var(--ink); }

/* Schliess-Kreuz mit eigener Trefferfläche.
   Vorher standen in applicant.html 20 Buttons als blosses «&times;» mit
   `font-size:1.25rem` und ohne Masse — gerendert 12×23px. Am Handy trifft man das
   nicht zuverlässig, und danebengetippt schliesst der Overlay-Klick das Modal ohne
   Speichern. Die Klasse ersetzt die Inline-Styles; das Zeichen bleibt gleich gross,
   nur die Fläche darum wächst. */
.modal-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  /* Randlos anliegende Kreuze schöben den Modal-Kopf sonst auseinander. */
  margin: -6px -8px -6px 0;
  border: none; background: none;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-x:hover { background: var(--bg-hover); color: var(--ink); }

/* Am Finger gilt 44px als kleinste zuverlässig treffbare Fläche (WCAG 2.5.8 nennt
   24px als Minimum, 44px als Zielgrösse). `pointer: coarse` trifft Touch statt bloss
   schmaler Fenster; die Breitenabfrage bleibt als Auffangnetz für Geräte, die den
   Pointer-Typ nicht melden. */
@media (pointer: coarse), (max-width: 768px) {
  .modal-x, .modal-close, .close-btn { width: 44px; height: 44px; }
  .modal-x { margin: -8px -10px -8px 0; }
}
.modal-body { padding: 1.5rem; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ═══ TOASTS ═══ */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--sh-md);
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  max-width: 320px;
}
.toast.show { opacity: 1; transform: none; }
.toast-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.toast-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.toast-info    { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
.toast-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }

/* ═══ LOADING ═══ */
#global-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(248,247,244,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  flex-direction: column;
  gap: 0.75rem;
}
#global-loading-overlay.active { display: flex; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ KANBAN ═══ */
.kanban-column {
  /* wächst mit dem Viewport mit (Cap 360px) — fix 280px liess auf grossen
     Screens rechts Leerraum und schnitt auf 1440px die letzte Spalte an */
  flex: 1 1 280px;
  min-width: 280px;
  max-width: 360px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
}
.kanban-count {
  display: flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 0.375rem;
  background: var(--bg-inset);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
}
.kanban-cards {
  flex: 1;
  min-height: 0; /* flex-item darf schrumpfen — sonst scrollt die Spalte nie intern */
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.875rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  box-shadow: var(--sh-xs);
}
.kanban-card:hover {
  border-color: var(--gold);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}
.kanban-card.dragging { opacity: 0.5; }
/* Drop-Ziel beim Drag — die Klasse setzt kanban.html seit jeher, sie hatte nur nie CSS */
.kanban-column.drag-over { border-color: var(--gold); background: var(--gold-soft); }
.kanban-card.touching { opacity: 0.7; transform: scale(0.98); }
.kanban-card-name { font-weight: 600; font-size: 0.9375rem; color: var(--ink); margin-bottom: 0.375rem; }
.kanban-card-job  { font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 0.5rem; }

/* ═══ APPLICANT CARDS / TABLE ═══ */
.applicant-row { cursor: pointer; }
.applicant-name  { font-weight: 600; color: var(--ink); }
.applicant-meta  { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.1rem; }
.applicant-email { font-size: 0.8125rem; color: var(--ink-3); }

/* ═══ SEARCH / FILTER BAR ═══ */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--sh-xs);
}
.filter-bar input,
.filter-bar select {
  flex: 1 1 140px;
  min-width: 0;
  height: 34px;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  background: var(--bg-inset);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
  background: var(--bg-card);
  outline: none;
}
.filter-bar input[type="search"],
.filter-bar input[type="text"] {
  flex: 2 1 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237A756F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.625rem center;
  padding-left: 2.125rem;
}
.filter-bar .checkbox-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  padding: 0 0.25rem;
}

/* ═══ PAGINATION ═══ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
}
.pagination-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  font-size: 0.875rem;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pagination-btn:hover { border-color: var(--gold); color: var(--gold-text); }
.pagination-btn.active { background: var(--gold); border-color: var(--gold); color: white; font-weight: 600; }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══ TABS ═══ */
.tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--bg-inset);
  border-radius: var(--r-sm);
  padding: 0.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.tab {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: var(--r-xs);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1;
}
.tab:hover { color: var(--ink); background: var(--bg-hover); }
.tab.active { background: var(--gold); color: white; font-weight: 600; box-shadow: var(--sh-xs); }
.tab .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.2);
  color: inherit;
}
.tab:not(.active) .count {
  background: var(--border);
  color: var(--ink-4);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ MOBILE SIDEBAR OVERLAY ═══ */
.sidebar-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  backdrop-filter: blur(2px);
}
.sidebar-mobile-overlay.visible { display: block; }

@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 260px !important;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    z-index: 1000;
    overflow-y: auto;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-collapse-btn { display: none; }
  .sidebar.collapsed .sidebar-link-text,
  .sidebar.collapsed .sidebar-title,
  .sidebar.collapsed .sidebar-user-name,
  .sidebar.collapsed .sidebar-user-role { opacity: 1; width: auto; overflow: visible; }
  .sidebar.collapsed .sidebar-link { justify-content: flex-start; padding: 8px 16px; }
  .sidebar.collapsed .sidebar-user { justify-content: flex-start; }
  .sidebar.collapsed .sidebar-user-info { display: block; }
  .sidebar.collapsed .sidebar-logout-btn { display: flex; }
  .header { padding: 0 0.875rem; }
  .mobile-menu-btn { display: flex; }
  .user-name { display: none; }
  .onboarding-link { display: none; }
  .user-menu .btn-secondary { display: none; }
  .main { padding: 1rem; margin-left: 0; }
  /* Gleiche Spezifität (0,3,0) wie die Desktop-Regel `.sidebar.collapsed + .main`
     (Zeile ~555) — gewinnt NUR, weil sie später im Stylesheet steht. Nicht nach oben
     verschieben! Ohne sie behält main den 56px-Versatz, sobald die Sidebar je
     eingeklappt wurde, obwohl sie mobil off-canvas ist (die generische
     `.main { margin-left: 0 }`-Regel hier ist mit (0,1,0) zu schwach). */
  .sidebar.collapsed + .main { margin-left: 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat-value { font-size: 1.5rem; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .card { padding: 1rem; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .page-title { font-size: 1.25rem; }
  .list-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .job-stats { width: 100%; justify-content: space-between; }
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .pipeline-bar-container { height: 60px; }
  .analytics-header { flex-direction: column; gap: 0.75rem; }
  .analytics-chart-container { height: 220px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  /* Im Column-Modus wird die Row-flex-Basis (140–180px) zur HÖHE → flex-Reset für alle Felder inkl. Checkbox (sonst 730px hohe Bar bzw. 195px breite Checkbox) */
  .filter-bar input, .filter-bar select { min-width: unset; flex: 0 0 auto !important; }
  /* Volle Breite nur für Eingabefelder/Selects — NICHT die Checkbox */
  .filter-bar input[type="text"], .filter-bar input[type="search"], .filter-bar select { width: 100% !important; }
  .mobile-onboarding-btn { display: block; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ═══ EMPTY STATE (erweitert) ═══ */
.empty-state-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 0.375rem;
}
.empty-state-description {
  font-size: 0.875rem;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.empty-state-action { margin-top: 1rem; }

/* ═══ LOADING ═══ */
.loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 0.75rem;
}
.loading-text { font-size: 0.875rem; color: var(--ink-3); text-align: center; }

/* ═══ BULK ACTIONS ═══ */
.bulk-actions-bar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-med);
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.bulk-actions-bar.visible { display: flex; }
.count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold-text);
}

/* ═══ CHECKBOX ═══ */
.applicant-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--gold); }
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-2);
  cursor: pointer;
}

/* ═══ DATE / STATUS BADGES ═══
   .date-cell, .date-critical, .selected-row td und .waiting-badge (samt Modifikatoren)
   standen bis zum 27.7.2026 hier. Sie gehörten zur Tabellenfassung der Bewerbendenliste;
   seit dem Umbau auf Zeilen gibt es weder die Zellen noch die Pille. applicants.html
   bringt die Nachfolger selbst mit (farbige Schrift statt Pille, eigene .selected-row-
   Regel ohne td). Entfernt, weil ungenutzte Regeln in der geteilten Datei den nächsten
   Umbau in die Irre führen. */

.deleted-row { opacity: 0.5; }
.deleted-badge {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem; font-weight: 600;
  background: var(--coral-soft); color: var(--coral);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.status-since { font-size: 0.75rem; color: var(--ink-4); margin-top: 0.2rem; }

/* ═══ STATUS WORKFLOW (Jobs) ═══ */
.status-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: var(--r-full);
  font-size: 0.75rem; font-weight: 600;
}

/* ─── Publikations-Kanäle (jobs.ch / CH Media / Job-Room) ───
   Metadaten ("wo läuft die Stelle"), kein Zustand — deshalb bewusst NICHT die
   vollrunde, farbig geflutete Form der Pipeline-Chips: eckigere Kante und warme,
   neutrale Fläche halten sie ruhig, die Kanal-Identität steckt allein im Punkt.
   Farben kommen aus Tokens, damit der Dark-Mode automatisch mitgeht. */
.channel-badges { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.channel-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-inset);
  color: var(--ink-2);
  font-size: 0.7rem; font-weight: 600; line-height: 1.6;
  white-space: nowrap;
}
/* Punkt = "läuft", einheitlich grün. Bewusst NICHT pro Kanal eingefärbt: Orange/Gelb
   steht in dieser App für "pendent" (vgl. Sperrfrist-Badge) und liesse einen aktiven
   Kanal wie eine offene Aufgabe aussehen. Welcher Kanal es ist, sagt der Name. */
.channel-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success, #16a34a); flex-shrink: 0;
}
/* "+2"-Sammelbadge steht für mehrere Kanäle — ein einzelner Punkt wäre irreführend. */
.channel-badge--more::before { display: none; }
.channel-badge--more { color: var(--ink-3); }
/* Abgelaufene Portal-Laufzeit: derselbe Punkt, andere Aussage. Rot statt Amber —
   Amber heisst in dieser App "pendent", hier ist aber nichts pendent: die Stelle
   steht dort nicht mehr, und ohne Verlängerung bleibt das so. Der Punkt kodiert
   damit weiterhin den Zustand, der Name den Kanal. */
.channel-badge--abgelaufen::before { background: var(--error, #DC4A3A); }
.channel-badge--abgelaufen { color: var(--error, #DC4A3A); }
/* ── Verteilungsleiste ────────────────────────────────────────────────────
   Stufen eines Prozesses, keine losen Etiketten. Aus dashboard.html hierher
   gezogen, als jobs.html dieselbe Leiste bekam — zwei Kopien driften.
   Die Komposition drumherum (.flow-head/.flow-sum/.flow-legend) bleibt
   seitenlokal, sie ist auf jeder Seite eine andere. */
/* Ein durchgehender Balken mit Haarlinien statt Lücken: getrennte Pillen
   zerfallen bei ungleichen Anteilen in unlesbare Punkte. */
.flow-track {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--bg-inset);
}
/* Auf einer Karte neben Text statt als eigener Abschnitt: flacher und
   schmaler, sonst erschlägt die Leiste die Zeile, in der sie steht. */
.flow-track--sm { height: 6px; width: 120px; flex: 0 0 auto; }
.flow-seg {
  width: 0;                                     /* wächst nach dem Laden auf den Anteil */
  min-width: 12px;                              /* hält Kleinststufen sichtbar */
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: inset -1px 0 0 var(--bg-card);
}
.flow-seg:last-child { box-shadow: none; }
/* Bronze-Verlauf: eine Familie, von hell nach dunkel monoton, benachbarte
   Stufen mindestens 1.7:1 auseinander. Der erste Entwurf hatte zwei
   Goldtöne mit 1.46:1 (nicht unterscheidbar) und ein Royalblau, das im
   warmen System der lauteste Fleck der Seite war. */
.seg-new       { background: #F2DCA6; }
.seg-screening { background: #C09A2E; }
.seg-interview { background: #96700F; }
/* Engere Auswahl sitzt zwischen Interview und Angebot — also auch farblich dazwischen.
   Kein neuer Farbton: Die Staffel bleibt durchgehend gold, sonst wäre die Stufe der
   lauteste Fleck der Seite (siehe Notiz oben zum entfernten Royalblau). */
.seg-shortlist { background: #7A5A0C; }
.seg-offer     { background: #5E4408; }
:root[data-theme="dark"] .seg-new       { background: #F0D9A0; }
:root[data-theme="dark"] .seg-screening { background: #D0A544; }
:root[data-theme="dark"] .seg-interview { background: #A87C2C; }
:root[data-theme="dark"] .seg-shortlist { background: #936B25; }
:root[data-theme="dark"] .seg-offer     { background: #7E5B1E; }
/* Abschnittsüberschrift. Bewusst kräftiger als .kpi-label — sonst liest der
   Abschnitt wie eine weitere Rasterzelle statt wie ein eigener. */
.flow-title {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .flow-seg { transition: none; }
}
/* ── Stille Textaktion ────────────────────────────────────────────────────
   Nebenaktion neben einem Knopf: lesbar, aber kein zweiter Blickfang.
   Aus templates.html hierher gezogen, als die Stellenliste dasselbe brauchte.
   Die Platzierung (margin-left:auto o.ä.) bleibt Sache der jeweiligen Seite. */
.action-link {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.78rem; color: var(--ink-3, #7A756F);
  text-decoration: underline; text-underline-offset: 2px;
}
.action-link:hover { color: var(--ink, #1B1918); }
.action-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
/* --coral statt eines festen Rots: #991B1B lag im Dunkelmodus bei 2.13:1 und
   verschwand beim Hovern, statt hervorzutreten. Erst beim Überfahren farbig —
   dauerhaft rot wäre die Nebenaktion wieder ein Blickfang. */
.action-link--warn:hover { color: var(--coral, #DC4A3A); }
.deadline  { font-size: 0.8125rem; color: var(--ink-3); }

/* ═══ LISTENRAHMEN + ZEILEN-AKTIONEN ═══
   .list-rows ist der Behälter um die .list-row-Zeilen (siehe dort), .list-row-actions
   die Knopfgruppe am rechten Rand einer Zeile. */
.list-rows {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.list-row-actions { display: flex; gap: 0.5rem; flex-shrink: 0; margin-left: 1rem; flex-wrap: wrap; align-items: flex-start; }

/* ═══ KANBAN (erweitert) ═══ */
/* Höhe kommt vom Flex-Layout der Seite (kanban.html) — die frühere fixe
   calc(100vh - 120px) stimmte nie mit der echten Header-Höhe überein und
   erzeugte doppeltes Scrollen (Seite UND Spalten). */
.kanban-container { display: flex; flex-direction: row; gap: 1rem; overflow-x: auto; flex: 1 1 auto; min-height: 0; padding-bottom: 0.5rem; scrollbar-width: thin; }
.kanban-container::-webkit-scrollbar { height: 8px; }
.kanban-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.kanban-container::-webkit-scrollbar-track { background: transparent; }
.kanban-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; flex-shrink: 0;
}
.kanban-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.kanban-icon  { margin-right: 0.5rem; }
.kanban-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem;
  color: var(--ink-4); font-size: 0.875rem; text-align: center;
}

.kanban-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.375rem; margin-bottom: 0.5rem; }
/* Der Name/Mail-Block ist ein Flex-Kind ohne min-width:0 — die Ellipse der E-Mail konnte nie
   greifen, der Kopf lief 29 px über die Karte hinaus (Befund 5.9.26). */
.kanban-card-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.kanban-card-name { overflow-wrap: anywhere; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.kanban-card-email  { font-size: 0.75rem; color: var(--ink-4); margin-bottom: 0.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-date   { font-size: 0.75rem; color: var(--ink-4); margin-left: auto; /* bleibt rechts, auch ohne Score-Badge davor */ }
.kanban-card-date.overdue { color: var(--coral); }
.kanban-card-interview { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--teal); margin-top: 0.375rem; }
.kanban-card-status-info { font-size: 0.75rem; color: var(--ink-4); margin-top: 0.2rem; }
.kanban-action-badge {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem; font-weight: 600;
  background: var(--gold-soft); color: var(--gold-text);
  white-space: nowrap; flex-shrink: 0; /* brach sonst neben langen Namen zweizeilig um */
}
.interview-icon { color: var(--teal); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

/* ═══ CONTEXT MENU ═══ */
.context-menu {
  /* fixed, nicht absolute: positioniert wird mit clientX/Y (Viewport-Koordinaten) —
     mit absolute erschien das Menü nach Scrollen um den Scroll-Offset versetzt */
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  z-index: 600;
  min-width: 180px;
  overflow: hidden;
  display: none;
}
.context-menu.open { display: block; }
.context-menu-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem; color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.context-menu-item:hover { background: var(--bg-hover); color: var(--ink); }
.context-menu-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.6; }

/* ═══ CLOSE BUTTON ═══ */
.close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: none; background: none;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  font-size: 1.25rem; line-height: 1;
}
.close-btn:hover { background: var(--bg-hover); color: var(--ink); }

/* ═══ PAGINATION (erweitert) ═══ */
.pagination-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.5rem; flex-wrap: wrap; gap: 0.75rem;
}
.pagination-info { font-size: 0.875rem; color: var(--ink-3); }
.page-indicator { font-size: 0.875rem; color: var(--ink-3); }

/* ═══ MODAL (alias) ═══ */
/* .modal als Overlay-Alias entfernt — Seiten nutzen .modal als Content-Box */

/* ═══ ROLLEN-SICHTBARKEIT (aus main.css) ═══ */
.hr-only-section,
.hr-only-link { display: none !important; }

body.role-hr .hr-only-section,
body.role-admin .hr-only-section,
body.role-master-admin .hr-only-section { display: block !important; }

body.role-hr .hr-only-link,
body.role-admin .hr-only-link,
body.role-master-admin .hr-only-link { display: flex !important; }

/* Master-Admin-exklusiv (Betreiber-Tools wie Skill-Learning) — nicht für normale Admins */
.master-admin-only-link { display: none !important; }
body.role-master-admin .master-admin-only-link { display: flex !important; }

/* ═══ ERROR STATE ═══ */
.error-state {
  text-align: center;
  padding: 2rem;
  background: var(--coral-soft);
  border: 1px solid rgba(220,74,58,0.2);
  border-radius: var(--r-sm);
  margin: 1rem 0;
}
.error-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.error-state-message { color: var(--coral); font-size: 0.875rem; margin-bottom: 1rem; }
.error-state-action { margin-top: 0.5rem; }

/* ═══ SKELETON LOADING ═══ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-inset) 25%, var(--border) 50%, var(--bg-inset) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-xs);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text  { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-text.short { width: 60%; }
.skeleton-title { height: 1.5rem; width: 40%; margin-bottom: 1rem; }
.skeleton-card  { height: 80px; margin-bottom: 1rem; }

/* ═══ BTN LOADING ═══ */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn-secondary.btn-loading::after {
  border-color: rgba(0,0,0,0.1);
  border-top-color: var(--ink);
}

/* ═══ TABLE / CARD LOADING ═══ */
.table-loading { position: relative; min-height: 200px; }
.table-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.card-loading { position: relative; }
.card-loading::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(248,247,244,0.8);
  backdrop-filter: blur(2px);
  z-index: 10; border-radius: inherit;
}
.card-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 11;
}

/* ═══ MISC ═══ */
.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.form-hint { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.25rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.375rem; }

.content { padding: 0; max-width: 1400px; margin: 0 auto; width: 100%; }
body > .main { padding: 2rem; max-width: 1400px; margin: 0 auto; }

.badge-withdrawn { background: var(--bg-inset); color: var(--ink-3); }
.btn-warning { background: var(--amber); color: white; }

/* ═══ EDITOR TOOLBAR (shared: applicant, templates) ═══ */
.editor-toolbar {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.editor-btn {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.editor-btn:hover { background: var(--gold-soft); border-color: var(--gold-med); color: var(--gold-text); }

/* Das Eingabefeld zur Werkzeugleiste. Stand bis zum 21.08.2026 nur seitenspezifisch in
   jobs-form.html und templates.html — wer die Leiste anderswo benutzte, bekam ein
   zweizeiliges Feld mit schwarzem Standard-Fokusrahmen (Befund an der Prüfansicht).
   Seiten mit eigenen Regeln überschreiben diese Grundlage unverändert weiter. */
.rich-editor {
  width: 100%;
  min-height: 140px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--bg-card);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rich-editor:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.rich-editor:empty:before { content: attr(placeholder); color: var(--ink-3); }
.rich-editor p { margin: 0 0 0.7rem; }
.rich-editor p:last-child { margin-bottom: 0; }
.rich-editor ul, .rich-editor ol { margin: 0 0 0.7rem; padding-left: 1.4rem; }
.rich-editor li { margin-bottom: 0.2rem; }

/* ═══ CHECKBOX GROUP (shared: jobs-new, jobs-edit) ═══ */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.checkbox-text {
  font-size: 0.875rem;
  color: var(--ink-2);
}
.custom-field-checkbox,
.custom-field-required {
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--gold);
}

/* ═══ MSG (applicant page) ═══ */
.msg {
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
}
.msg-error {
  background: var(--coral-soft);
  border: 1px solid rgba(220,74,58,0.2);
  color: var(--coral);
}
.msg-success {
  background: rgba(22,163,74,0.07);
  border: 1px solid rgba(22,163,74,0.2);
  color: var(--green);
}

/* ═══ STAR RATING ═══ */
.star {
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  font-size: 1.25rem;
}
.star:hover, .star.active { color: var(--gold) !important; }

/* ═══ DOC ITEM ═══ */
.doc-item {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

/* ═══ HILFE & KONTAKT ═══ */
.sidebar-help-wrap { padding: 6px 8px; }
.sidebar-help-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--r-xs, 6px);
  color: var(--ink-3);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: color 120ms, background 120ms, border-color 120ms;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-help-btn:hover { color: var(--ink-2); background: var(--bg-hover); border-color: var(--border); }
.sidebar.collapsed .sidebar-help-btn .sidebar-link-text { display: none; }
.sidebar.collapsed .sidebar-help-btn { padding: 8px; justify-content: center; }

.help-options { display: flex; flex-direction: column; gap: 8px; }
.help-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--r-xs);
  text-decoration: none;
  color: var(--ink);
  transition: background 120ms, border-color 120ms;
}
.help-option:hover { background: var(--bg-inset); border-color: var(--border); }
.help-option-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-xs);
  background: var(--bg-inset);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--ink-2);
}
.help-option-body { flex: 1; min-width: 0; }
.help-option-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.help-option-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.help-option-arrow { color: var(--ink-4); flex-shrink: 0; }

/* ═══ EMAIL BODY ═══ */
.email-body {
  padding: 0.875rem;
  background: var(--bg);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════════════
   USER SETTINGS MODAL (.us-*)
   ══════════════════════════════════════════════════════════════════ */

.us-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.us-overlay.open { display: flex; }

.us-panel {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
}

.us-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.us-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  flex-shrink: 0;
}
.us-header-info { flex: 1; min-width: 0; }
.us-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.us-role { font-size: 12px; color: var(--ink-4); margin-top: 1px; }
.us-close {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--ink-4); padding: 6px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  transition: color 120ms, background 120ms;
}
.us-close:hover { color: var(--ink); background: var(--bg-hover); }

.us-body {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.us-body::-webkit-scrollbar { width: 4px; }
.us-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.us-sub-block { padding: 12px 20px; background: var(--gold-soft); }
.us-sub-inner { display: flex; align-items: center; justify-content: space-between; }
.us-sub-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.us-sub-status {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  background: var(--teal-soft); color: var(--teal);
}

.us-divider { height: 1px; background: var(--border); margin: 0; }

.us-section { padding: 14px 20px; }
.us-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}

.us-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 6px 0;
}
.us-row-info { flex: 1; min-width: 0; }
.us-row-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.us-row-sub { font-size: 11px; color: var(--ink-4); margin-top: 1px; }

.us-toggle {
  position: relative;
  width: 40px; height: 22px;
  border-radius: 11px;
  background: var(--border);
  border: none; cursor: pointer; padding: 0;
  flex-shrink: 0; transition: background 200ms;
}
.us-toggle[aria-checked="true"] { background: var(--teal); }
.us-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%; background: #fff;
  transition: transform 200ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  pointer-events: none;
}
.us-toggle[aria-checked="true"] .us-toggle-thumb { transform: translateX(18px); }

.us-accordion-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 6px 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--ink-2); text-align: left; border-radius: var(--r-xs);
  transition: color 120ms;
}
.us-accordion-btn:hover { color: var(--ink); }
.us-chevron { margin-left: auto; flex-shrink: 0; transition: transform 200ms; }
.us-accordion-btn[aria-expanded="true"] .us-chevron { transform: rotate(180deg); }
.us-accordion-body { display: none; padding: 8px 0 2px; }
.us-accordion-body.open { display: block; }

.us-field { margin-bottom: 10px; }
.us-field label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--ink-3); margin-bottom: 4px;
}
.us-field input[type="password"] {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink); background: var(--bg-card);
  outline: none; box-sizing: border-box; transition: border-color 120ms;
}
.us-field input[type="password"]:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
.us-pw-error { font-size: 12px; color: var(--coral); margin-bottom: 8px; }
.us-pw-actions { display: flex; justify-content: flex-end; }

.us-btn-primary {
  padding: 7px 16px; background: var(--ink); color: #fff;
  border: none; border-radius: var(--r-xs);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: opacity 120ms;
}
.us-btn-primary:hover { opacity: 0.85; }
.us-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.us-action-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 7px 0; font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--ink-2); text-align: left; border-radius: var(--r-xs);
  transition: color 120ms;
}
.us-action-row:hover { color: var(--ink); }

.us-footer {
  padding: 12px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.us-logout-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 8px 10px; font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--coral); border-radius: var(--r-xs); transition: background 120ms;
}
.us-logout-btn:hover { background: var(--coral-soft); }

:root[data-theme="dark"] .us-panel { background: var(--bg-card); border-color: var(--border); }
:root[data-theme="dark"] .us-overlay { background: rgba(0,0,0,0.65); }

/* ── Standalone-Toast + Segmented Control (geteilt: karriereseite.html, settings.html,
   künftige Standalone-Admin-Seiten). Der .toast oben ist fürs Container-Muster gebaut
   (opacity 0 bis .show, ohne position) — Seiten mit eigenem showToast geben dem Element
   ZUSÄTZLICH .toast-standalone und sind damit komplett self-contained. ── */
.toast-standalone {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease;
  animation: toastStandaloneIn 0.3s ease;
  max-width: 360px;
}
.toast-standalone.toast-hiding { opacity: 0; }
@keyframes toastStandaloneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Segmented Control — Premium-Radio als zusammenhängende Pill-Leiste */
/* flex-wrap: Die Spans tragen white-space:nowrap, drei Optionen nebeneinander sprengten bei
   320px die Spalte (gemessen im Karriereseiten-Cockpit). Umbrechen ist die kleinere Kröte
   als eine Leiste, die aus dem Bild läuft. */
.seg-control { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--light); border: 1px solid var(--border); border-radius: 10px; }
.seg-control label { position: relative; cursor: pointer; }
.seg-control input { position: absolute; opacity: 0; pointer-events: none; }
.seg-control span { display: inline-flex; align-items: center; padding: 0.45rem 0.95rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; color: var(--slate); transition: color 0.15s, background 0.15s, box-shadow 0.15s; white-space: nowrap; }
.seg-control label:hover span { color: var(--navy); }
/* var(--bg-card), nicht #fff: Die Schrift folgt mit --navy dem Modus, die Fläche tat es nicht.
   Im Dunkelmodus stand dadurch heller Text auf hartem Weiss — 1.12:1, und zwar ausgerechnet
   im AUSGEWÄHLTEN Zustand, während die übrigen Optionen lesbar blieben. */
.seg-control input:checked + span { background: var(--bg-card); color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06); }
.seg-control input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ══ Kennzahl-Kacheln ══════════════════════════════════════════════════════
   Aus dashboard.html hierher gezogen, damit Dashboard und Statistiken dieselbe
   Kachel benutzen statt zweier Kopien, die auseinanderlaufen. Das Raster bleibt
   bei der jeweiligen Seite — die Spaltenzahl ist dort verschieden. */
/* ══ Kennzahlen ════════════════════════════════════════════════════════ */
.kpi {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1.15rem 1.25rem 1.05rem;
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-hover); }
.kpi:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.kpi-label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.3;
}
.kpi-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-inset); color: var(--ink-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kpi-ico svg { width: 15px; height: 15px; }
.kpi:hover .kpi-ico { background: var(--gold-soft); color: var(--gold-text); }
.kpi-value {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 2.25rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink); margin: 0.5rem 0 0.15rem;
  font-variant-numeric: tabular-nums;   /* sonst springt die Breite beim Hochzählen */
}
.kpi-note { font-size: 0.8125rem; color: var(--slate); line-height: 1.4; min-height: 1.15rem; }
.kpi-note strong { color: var(--ink-2); font-weight: 600; }

/* ══ Auftritt ══════════════════════════════════════════════════════════════
   Aus dashboard.html hierher gezogen, damit Dashboard und Statistiken denselben
   Rhythmus haben. Die Regeln greifen NUR mit body.js-anim: Ohne JavaScript oder
   bei reduzierter Bewegung ist die Seite vollständig sichtbar — unsichtbarer
   Inhalt wäre schlimmer als eine Seite ohne Animation. */
body.js-anim .reveal { opacity: 0; }
@keyframes auftritt {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Als Keyframe, nicht als Transition: Die frühere Transition-Regel (0-3-0) blieb nach dem
   Auftritt aktiv, pinnte transform:none und ersetzte die Hover-Transition der KPI (0-1-0) —
   der Lift der Kacheln fand nie statt, Schatten und Rand sprangen (Review 11.9.26). Ein
   Keyframe läuft einmal durch und gibt die Eigenschaften danach wieder frei;
   «backwards» hält während des Versatzes den Startzustand. */
body.js-anim .reveal.in {
  opacity: 1;
  animation: auftritt 420ms cubic-bezier(0.22,1,0.36,1) backwards;
}
/* Versatz im CSS, nicht per Timer-Kette: setTimeout konkurriert mit den parallelen
   Requests auf demselben Thread und streut — das liest als Stolpern statt als Rhythmus. */
body.js-anim .kpi-grid .kpi:nth-child(2).in { animation-delay: 70ms; }
body.js-anim .kpi-grid .kpi:nth-child(3).in { animation-delay: 140ms; }
body.js-anim .kpi-grid .kpi:nth-child(4).in { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; animation: none; transition: none; }
  .kpi:hover { transform: none; }
}

/* Ladezustand der Kennzahl-Kacheln — zeigt die kommende Form, statt die Seite
   hinter einem Overlay zu verstecken (das blitzte im Dunkelmodus auf). */
.kpi-value.is-loading, .kpi-note.is-loading {
  color: transparent; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-inset) 25%, var(--border) 50%, var(--bg-inset) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.kpi-value.is-loading { width: 3.5rem; height: 2.25rem; margin-bottom: 0.35rem; }
.kpi-note.is-loading  { width: 70%; height: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .kpi-value.is-loading, .kpi-note.is-loading { animation: none; }
}