/* ══════════════════════════════════════════════════════════════════
   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;

  --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);

  --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;
}

/* ═══ 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: 'Plus Jakarta Sans', system-ui, sans-serif;
  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: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.header-title span { color: var(--ink-3); font-weight: 400; }

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

.header-app {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-3);
}

.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: all var(--dur) var(--ease);
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.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: all var(--dur) var(--ease);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-link:hover {
  background: var(--bg-hover);
  color: var(--ink);
}
.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);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }

/* ═══ 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: all 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: all 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: all 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: all 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 «×» 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: all 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: all 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: all 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: all 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: all 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; margin-bottom: 0.5rem; }
.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: all 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: all 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-4); }
.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 */
.seg-control { display: inline-flex; 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); }
.seg-control input:checked + span { background: #fff; 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: 9px;
  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; transform: translateY(10px); }
body.js-anim .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 420ms cubic-bezier(0.22,1,0.36,1),
              transform 420ms cubic-bezier(0.22,1,0.36,1);
}
/* 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 { transition-delay: 70ms; }
body.js-anim .kpi-grid .kpi:nth-child(3).in { transition-delay: 140ms; }
body.js-anim .kpi-grid .kpi:nth-child(4).in { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: 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; }
}