@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/exo-2.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --accent: #8b5cf6;
  --accent-soft: #a78bfa;
  --pink: #f472b6;
  --font: 'Exo 2', system-ui, sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
  --sidebar: 256px;
  --sidebar-gap: 12px;
}

html.sidebar-collapsed { --sidebar: 84px; }

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0c0c11;
  --sidebar-bg: #0b0b0f;
  --surface: #121218;
  --surface-2: #1a1a23;
  --border: #25252f;
  --text: #f4f4f6;
  --muted: #a3a3ae;
  --faint: #6f6f7c;
  --nav-active: #1f1a33;
  --hero-fade: 12, 12, 17;
  --hero-opacity: .75;
  --full: #34d399;
  --full-soft: rgba(52, 211, 153, .12);
  --empty: #fb923c;
  --empty-soft: rgba(251, 146, 60, .12);
  --partial: #60a5fa;
  --partial-soft: rgba(96, 165, 250, .12);
  --danger: #f87171;
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #f5f5f8;
  --sidebar-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #efeff4;
  --border: #e0e0e8;
  --text: #17171d;
  --muted: #5c5c69;
  --faint: #83838f;
  --nav-active: #ece7fd;
  --accent-soft: #6d3fe0;
  --hero-fade: 245, 245, 248;
  --hero-opacity: .55;
  --full: #067a55;
  --full-soft: rgba(6, 122, 85, .1);
  --empty: #b84a0c;
  --empty-soft: rgba(184, 74, 12, .1);
  --partial: #1d5fb8;
  --partial-soft: rgba(29, 95, 184, .1);
  --danger: #c02626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sidebar: schwebt als angehobene Karte neben dem Inhalt. */
.sidebar {
  position: fixed;
  inset: var(--sidebar-gap) auto var(--sidebar-gap) var(--sidebar-gap);
  z-index: 20;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 12px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(120% 18% at 30% 0%, rgba(244, 114, 182, .12), transparent),
    radial-gradient(120% 22% at 30% 100%, rgba(139, 92, 246, .2), transparent),
    var(--sidebar-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1px 0 rgba(255, 255, 255, .03),
    0 18px 40px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(139, 92, 246, .06);
  transition: width .25s ease;
}

[data-theme='light'] .sidebar {
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px rgba(60, 40, 120, .12), 0 2px 6px rgba(60, 40, 120, .06);
}

.no-sidebar-anim .sidebar,
.no-sidebar-anim .main,
.no-sidebar-anim .sidebar-toggle { transition: none; }

/* Runder Knopf auf der Kante der Leiste. */
.sidebar-toggle {
  position: fixed;
  top: 136px;
  left: calc(var(--sidebar) + var(--sidebar-gap) - 14px);
  z-index: 21;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--muted);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: left .25s ease, color .15s, border-color .15s;
}

.sidebar-toggle:hover { border-color: var(--accent); color: var(--text); }
.sidebar-toggle svg { width: 16px; height: 16px; transition: transform .25s ease; }
.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Feste Hoehe, damit das Menue darunter auf seiner gewohnten Hoehe bleibt. */
.brand {
  position: relative;
  display: grid;
  align-content: space-between;
  flex: none;
  height: 109px;
  padding: 14px 14px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(244, 114, 182, .06) 60%, transparent), var(--surface);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .15s;
}

.brand:hover { border-color: var(--accent); }

/* Leuchtende Linie oben im Farbverlauf des Logos. */
.brand::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--pink));
}

.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-row img { filter: drop-shadow(0 0 8px rgba(139, 92, 246, .45)); }

.brand-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
}

.brand-unit::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--full);
  box-shadow: 0 0 6px var(--full);
}

.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.avatar-round {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.profile-text { min-width: 0; flex: 1; }

.profile-text strong,
.profile-text small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-text strong { font-size: 14px; font-weight: 700; }
.profile-text small { font-size: 12px; color: var(--muted); }

.nav { display: grid; gap: 4px; }

.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border-radius: 11px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.nav a:hover { color: var(--text); background: rgba(127, 127, 140, .07); }

/* Verwaltungsbereich: eigener, leicht abgesetzter Block unter den normalen Seiten */
.nav-section {
  display: grid;
  gap: 6px;
  margin-top: 40px;
}
.nav-section-label { padding: 0 8px; color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

/* Reihenfolge der Seitenleiste aendern */
/* Seitenleiste anordnen – gleicher Look wie "Anordnen" im Dashboard */
.nav-move { display: none; flex: none; align-items: center; gap: 2px; margin-left: auto; }
.nav.editing a { gap: 8px; min-width: 0; padding-right: 4px; }
.nav.editing .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-move button, .nav-grip { display: grid; width: 21px; height: 21px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; }
.nav-move button:hover:not(:disabled), .nav-grip:hover { border-color: var(--accent); color: var(--text); }
.nav-move button:disabled { opacity: .35; cursor: default; }
.nav-move svg { width: 13px; height: 13px; }
.nav-grip { cursor: grab; }
.nav.editing { padding: 4px; border-radius: 14px; outline: 1.5px dashed rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .04); }
.nav.editing a { cursor: grab; touch-action: none; user-select: none; animation: tile-wiggle .9s ease-in-out infinite alternate; }
.nav.editing a:nth-child(even) { animation-delay: -.45s; }
.nav.editing a:hover { animation-play-state: paused; background: rgba(139, 92, 246, .08); }
.nav.editing a:hover .nav-icon { transform: none; }
.nav.editing .nav-move { display: flex; }
.nav.editing a.dragging { z-index: 1; opacity: .4; box-shadow: 0 0 0 2px var(--accent); animation: none; cursor: grabbing; }
.nav-order-hint { margin: 8px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.nav-order-hint .nav-order-reset { display: inline; padding: 0; margin-left: 2px; color: var(--accent-soft); text-decoration: underline dotted; }

/* Unterste Zeile: links Hell/Dunkel/System, ganz rechts der Stift zum Anordnen. */
.sidebar-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sidebar-foot-actions { display: flex; align-items: center; gap: 2px; }
.sidebar-logout { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.sidebar-logout svg { width: 15px; height: 15px; }
.sidebar-logout:hover, .sidebar-logout:focus-visible { color: var(--danger); outline: none; }
.nav-order-toggle { padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nav-order-toggle svg { flex: none; }
/* Normal ein Symbol wie die Darstellungs-Knoepfe daneben; beim Anordnen wird es zum lila "Fertig"-Knopf. */
.nav-order-toggle[aria-pressed='false'] {
  width: 28px;
  height: 28px;
  justify-content: center;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--faint);
}
.nav-order-toggle[aria-pressed='false'] svg { width: 15px; height: 15px; }
.nav-order-toggle[aria-pressed='false'] .nav-label { display: none; }
.nav-order-toggle[aria-pressed='false']:hover, .nav-order-toggle[aria-pressed='false']:focus-visible { border-color: transparent; color: var(--text); outline: none; }
.nav-order-reset { padding: 6px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.nav-order-reset:hover { color: var(--text); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .nav.editing a { animation: none; } }

.nav a.active {
  background: var(--nav-active);
  color: var(--text);
  font-weight: 700;
}

.nav a.active::before {
  content: '';
  position: absolute;
  inset: 9px auto 9px -6px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Symbole als kleine, angehobene Kacheln mit Lichtkante oben und Schatten unten. */
.nav-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}

[data-theme='light'] .nav-icon {
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #dcdce6, 0 6px 12px rgba(60, 40, 120, .08);
}

.nav-icon svg { width: 17px; height: 17px; }
.nav a:hover .nav-icon { transform: translateY(-2px); border-color: var(--accent); }
.nav a:active .nav-icon { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(0, 0, 0, .35); }

.nav a.active .nav-icon {
  border-color: rgba(167, 139, 250, .6);
  background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #4c1d95, 0 8px 18px rgba(139, 92, 246, .45);
}

.nav-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding: 0 6px;
}

/* Admin-Konsole ueber dem Benutzer, sieht aus wie die Menuepunkte; nur fuer Admins */
.admin-nav { margin: 0 -6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
/* Ganzer Benutzerbereich ist ein Knopf zu den Accounteinstellungen */
.account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -6px;
  padding: 8px 10px 8px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .15s, border-color .15s;
}

.account:hover { border-color: var(--border); background: rgba(139, 92, 246, .08); }
.account.active { border-color: rgba(167, 139, 250, .45); background: var(--nav-active); }
.account-gear { display: grid; flex: none; place-items: center; color: var(--faint); transition: color .15s; }
.account-gear svg { width: 14px; height: 14px; transition: transform .4s ease; }
.account:hover .account-gear, .account.active .account-gear { color: var(--accent-soft); }
.account:hover .account-gear svg { transform: rotate(60deg); }

/* Zahnrad neben dem Namen, fuehrt zu den Profil-Einstellungen */
.account-settings {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 rgba(0, 0, 0, .3);
  transition: color .15s, border-color .15s;
}

.account-settings svg { width: 17px; height: 17px; transition: transform .4s ease; }
.account-settings:hover { border-color: var(--accent); color: var(--text); }
.account-settings:hover svg { transform: rotate(60deg); }
.account-settings.active { border-color: rgba(167, 139, 250, .6); background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777); color: #fff; }

.theme-switch { display: flex; gap: 2px; }

.theme-switch button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--faint);
}

.theme-switch svg { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--text); }

.theme-switch button[aria-pressed='true'] {
  background: var(--nav-active);
  color: var(--accent-soft);
}

/* Eingeklappt: nur Logo, Symbole und Avatar, alles mittig. */
@media (min-width: 861px) {
  .sidebar-collapsed .brand { height: 62px; padding: 10px; place-items: center; align-content: center; }
  .sidebar-collapsed .brand-name,
  .sidebar-collapsed .brand-unit,
  .sidebar-collapsed .nav-label,
  .sidebar-collapsed .account .profile-text { display: none; }
  .sidebar-collapsed .admin-nav { margin: 0; }
  .sidebar-collapsed .nav-section { margin-top: 24px; }
  .sidebar-collapsed .nav-section-label { display: none; }
  .sidebar-collapsed .nav a { justify-content: center; padding: 5px 0; }
  .sidebar-collapsed .nav a:hover { background: none; }
  .sidebar-collapsed .nav.editing .nav-move, .sidebar-collapsed .nav-order-reset, .sidebar-collapsed .nav-order-hint { display: none; }
  .sidebar-collapsed .nav.editing { padding: 4px 0; }
  .sidebar-collapsed .sidebar-foot-row, .sidebar-collapsed .sidebar-foot-actions { flex-direction: column; }
  .sidebar-collapsed .nav-order-toggle .nav-label { display: none; }
  .sidebar-collapsed .nav-order-toggle { padding: 7px; }
  .sidebar-collapsed .account { flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: 6px 0; }
  .sidebar-collapsed .sidebar-foot { padding: 0; }
  .sidebar-collapsed .theme-switch { flex-direction: column; align-items: center; }
}

/* Inhalt */
.main { margin-left: calc(var(--sidebar) + var(--sidebar-gap)); min-height: 100vh; transition: margin-left .25s ease; }

.menu-button {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 10;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.hero {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  background: url('../img/hero.svg') center bottom / cover no-repeat;
  opacity: var(--hero-opacity);
}

.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(var(--hero-fade)) 0%, rgba(var(--hero-fade), .3) 55%, rgba(var(--hero-fade), .75) 100%),
    linear-gradient(to right, rgba(var(--hero-fade), .75), transparent 60%);
}

.hero-content {
  position: relative;
  width: 100%;
  padding: 40px 28px;
}

.eyebrow,
.section-label,
.quick-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.clock {
  position: absolute;
  top: 40px;
  right: 28px;
  font-family: var(--mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.hero h1 {
  margin: 12px 0 14px;
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.hero-text { color: var(--muted); font-size: 17px; }

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 38px;
  padding: 0 28px 48px;
}

.content[hidden] { display: none; }

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.section-label::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--border);
}

/* Schnellzugriff */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Kachel mit 3D-Symbol, blassem Wasserzeichen und Pfeil; hebt sich beim Darueberfahren. */
.quick-card {
  grid-column: span 3;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 178px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(139, 92, 246, .1), transparent 55%),
    linear-gradient(180deg, var(--surface-2), var(--surface) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .25);
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}

[data-theme='light'] .quick-card {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(139, 92, 246, .09), transparent 55%),
    var(--surface);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(60, 40, 120, .08);
}

.quick-card.large { grid-column: span 6; }

.quick-card.linked:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 34px rgba(0, 0, 0, .35), 0 0 0 1px rgba(139, 92, 246, .25), 0 10px 40px rgba(139, 92, 246, .18);
}

.quick-top { display: flex; justify-content: space-between; align-items: flex-start; }

.quick-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 0 rgba(0, 0, 0, .35), 0 8px 16px rgba(0, 0, 0, .25);
  transition: transform .2s ease, background .2s, color .2s, box-shadow .2s;
}

[data-theme='light'] .quick-icon { box-shadow: inset 0 1px 0 #fff, 0 4px 0 #dcdce6, 0 8px 16px rgba(60, 40, 120, .08); }
.quick-icon svg { width: 22px; height: 22px; }

.quick-card.linked:hover .quick-icon {
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, .6);
  background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #4c1d95, 0 10px 22px rgba(139, 92, 246, .45);
}

.quick-body { margin-top: auto; padding-right: 36px; }
.quick-kicker { display: block; font-size: 10px; }
.quick-card h3 { margin-top: 3px; font-size: 19px; font-weight: 700; }
.quick-card.large h3 { font-size: 28px; }
.quick-card p { margin-top: 4px; color: var(--muted); font-size: 14px; }

/* Grosses, blasses Symbol rechts unten im Hintergrund */
.quick-watermark {
  position: absolute;
  right: -18px;
  bottom: -22px;
  z-index: -1;
  color: var(--accent-soft);
  opacity: .06;
  transition: opacity .2s, transform .3s ease;
}

.quick-watermark svg { width: 130px; height: 130px; stroke-width: 1.2; }
.quick-card.large .quick-watermark svg { width: 170px; height: 170px; }
.quick-card.linked:hover .quick-watermark { opacity: .12; transform: rotate(-6deg) scale(1.05); }

.quick-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  transition: transform .2s ease, color .2s, border-color .2s, background .2s;
}

.quick-arrow svg { width: 15px; height: 15px; }
.quick-card.linked:hover .quick-arrow { transform: translateX(3px); border-color: var(--accent); background: var(--accent); color: #fff; }

/* Im Bearbeitungsmodus kein Anheben, damit das Wackeln ruhig bleibt. */
.dash-editing .quick-card.linked:hover { transform: none; }
.dash-editing .quick-arrow { display: none; }


.quick-empty {
  grid-column: 1 / -1;
  padding: 36px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

/* Auswahlfenster */
.quick-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.quick-dialog[open] { animation: worker-pop .18s ease-out; }
.quick-dialog::backdrop { background: rgba(8, 8, 12, .65); backdrop-filter: blur(4px); }
.quick-dialog form { display: grid; gap: 18px; padding: 24px; }
.quick-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.quick-dialog-head h2 { font-size: 22px; font-weight: 700; }
.quick-dialog-head p { margin-top: 2px; color: var(--muted); font-size: 14px; }
.quick-dialog-head .name-edit { width: 34px; height: 34px; border: 1px solid var(--border); }

.quick-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.quick-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.quick-option:hover { border-color: var(--accent-soft); }
.quick-option input { position: absolute; opacity: 0; pointer-events: none; }
.quick-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-option:has(input:checked) { border-color: var(--accent); background: linear-gradient(120deg, rgba(139, 92, 246, .16), transparent 70%), var(--surface-2); }

.quick-option-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}

.quick-option:has(input:checked) .quick-option-icon { color: var(--accent-soft); border-color: rgba(167, 139, 250, .5); }
.quick-option-text { display: grid; flex: 1; min-width: 0; }
.quick-option-text b { font-size: 15px; }
.quick-option-text small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.quick-option-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: transparent;
  transition: background .15s, border-color .15s;
}

.quick-option-check svg { width: 14px; height: 14px; stroke-width: 2.6; }
.quick-option:has(input:checked) .quick-option-check { border-color: var(--accent); background: var(--accent); color: #fff; }

.quick-dialog-actions { display: flex; align-items: center; gap: 10px; }
.quick-dialog-actions span { flex: 1; }

@media (max-width: 560px) {
  .quick-options { grid-template-columns: minmax(0, 1fr); }
  .quick-dialog form { padding: 18px; }
}

/* Fahrzeuge */
.hero.compact { min-height: 210px; }
.hero.compact h1 { margin: 6px 0 8px; font-size: clamp(30px, 3.4vw, 44px); }
.hero.compact .hero-text { font-size: 15px; }
.vehicle-section { display: grid; gap: 20px; }
.voll { --status: var(--full); --status-soft: var(--full-soft); }
.leer { --status: var(--empty); --status-soft: var(--empty-soft); }
.teilweise { --status: var(--partial); --status-soft: var(--partial-soft); }
.metall { --status: var(--accent-soft); --status-soft: rgba(139, 92, 246, .14); }
.stahl { --status: #7dd3fc; --status-soft: rgba(125, 211, 252, .14); }
[data-theme='light'] .stahl { --status: #0369a1; --status-soft: rgba(3, 105, 161, .1); }
.eisen { --status: var(--pink); --status-soft: rgba(244, 114, 182, .12); }
[data-theme='light'] .eisen { --status: #be185d; --status-soft: rgba(190, 24, 93, .1); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-card {
  width: 100%;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
}

.stat-card:hover { border-color: var(--status, var(--accent)); }
.stat-note { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.stat-card[aria-pressed='true'] { box-shadow: 0 0 0 1px var(--status, var(--accent)); border-color: var(--status, var(--accent)); }

.stat-card.lager { --status: var(--accent-soft); --status-soft: rgba(139, 92, 246, .14); }

.stat-card.voll,
.stat-card.leer,
.stat-card.eisen,
.stat-card.stahl,
.stat-card.lager {
  border-color: var(--status);
  background: linear-gradient(120deg, var(--status-soft), transparent 70%), var(--surface);
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-label svg { width: 16px; height: 16px; }
.stat-card.voll .stat-label svg, .stat-card.leer .stat-label svg,
.stat-card.eisen .stat-label svg, .stat-card.stahl .stat-label svg,
.stat-card.lager .stat-label svg { color: var(--status); }

.stat-value {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--status, var(--text));
}

.stat-value.accent { color: var(--accent-soft); }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-divider { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }

.chip {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
}

.chip b { margin-left: 2px; color: var(--muted); font-weight: 500; }
.chip.voll, .chip.leer, .chip.metall, .chip.eisen { color: var(--status); }
.chip:hover { border-color: var(--status, var(--accent)); }

.chip[aria-pressed='true'] {
  border-color: var(--status, var(--accent));
  background: var(--status, var(--accent));
  color: #fff;
}

.chip.voll[aria-pressed='true'],
.chip.leer[aria-pressed='true'],
.chip.metall[aria-pressed='true'],
.chip.eisen[aria-pressed='true'] { color: #101014; }

[data-theme='light'] .chip.metall[aria-pressed='true'],
[data-theme='light'] .chip.eisen[aria-pressed='true'] { color: #fff; }
.chip[aria-pressed='true'] b { color: inherit; opacity: .8; }

.add-vehicle {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.vehicle-form {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 170px auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.vehicle-form[hidden] { display: none; }

.vehicle-form select,
.vehicle-form input {
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.vehicle-form .cargo-error { grid-column: 1 / -1; }

.vehicle-capacity { color: var(--muted); font-size: 16px; font-weight: 600; white-space: nowrap; }

.form-cancel { padding: 10px 12px; color: var(--muted); font-size: 16px; font-weight: 600; }
.form-cancel:hover { color: var(--text); }

/* Eigenes Bestaetigungsfenster (askConfirm in shell.js) */
.ask-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.ask-dialog::backdrop { background: rgba(6, 6, 10, .65); backdrop-filter: blur(4px); }
.ask-dialog[open] { animation: ask-pop .18s ease-out; }
@keyframes ask-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.ask-dialog form { display: grid; justify-items: center; gap: 10px; padding: 26px 24px 20px; text-align: center; }
.ask-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: rgba(167, 139, 250, .14); color: var(--accent-soft); }
.ask-icon.danger { background: rgba(248, 113, 113, .14); color: var(--danger); }
.ask-icon svg { width: 24px; height: 24px; }
.ask-dialog h2 { margin: 4px 0 0; font-size: 19px; }
.ask-dialog p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ask-actions { display: flex; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; }
.ask-actions button { flex: 1; }
.ask-actions .form-cancel { border: 1px solid var(--border); border-radius: 999px; }
.ask-danger { padding: 10px 22px; border-radius: 999px; background: var(--danger); color: #101014; font-size: 16px; font-weight: 700; }
.ask-danger:hover { filter: brightness(1.08); }
.ask-actions button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ask-dialog[open] { animation: none; } }

.vehicle-remove {
  padding: 8px 6px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

.vehicle-remove:hover { background: var(--danger); color: #101014; }

@media (max-width: 700px) {
  .vehicle-form { grid-template-columns: 1fr; }
}

.vehicle-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 16px;
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--status);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
}

.vehicle-card:hover { border-color: var(--status); }
.vehicle-card[aria-pressed='true'] { box-shadow: 0 0 0 1px var(--accent); border-color: var(--accent); border-left-color: var(--status); }
.vehicle-card strong { margin-top: 10px; font-size: 15px; font-weight: 600; }

.vehicle-card small {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.cargo-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.vehicle-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin-bottom: 6px;
}

.status-badge {
  padding: 1px 10px;
  border: 1px solid var(--status);
  border-radius: 999px;
  background: var(--status-soft);
  color: var(--status);
  font-size: 12px;
  font-weight: 700;
}

/* Farbe wie der Hintergrund der Fahrzeugbilder, in beiden Themes gleich. */
.vehicle-image {
  display: block;
  height: 96px;
  padding: 6px;
  border-radius: 8px;
  background: #131216;
}

.vehicle-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vehicle-image.large { height: 170px; margin: 16px 0 22px; padding: 22px; }

.vehicle-detail {
  position: sticky;
  top: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.detail-head h2 { min-width: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.detail-name { display: flex; align-items: center; gap: 4px; min-width: 0; }

.name-edit {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
}

.name-edit:hover { background: var(--surface-2); color: var(--accent-soft); }

.name-form { display: grid; gap: 8px; }

.name-form input {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.name-actions { display: flex; align-items: center; gap: 4px; }

.name-save {
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.name-actions .form-cancel { padding: 7px 10px; font-size: 14px; }

.detail-code { margin-top: 4px; font-family: var(--mono); font-size: 13px; color: var(--muted); }

.tank-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

.tank-bar {
  height: 8px;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.tank-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--pink));
}

.cargo-summary { margin-top: 8px; font-size: 13px; color: var(--muted); }

.cargo-controls {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.material-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface-2);
}

.material-switch button {
  padding: 6px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.material-switch button[aria-pressed='true'] {
  background: var(--accent);
  color: #fff;
}

.cargo-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cargo-shortcut {
  padding: 8px 6px;
  border: 1px solid var(--status);
  border-radius: 8px;
  background: var(--status-soft);
  color: var(--status);
  font-size: 13px;
  font-weight: 700;
}

.cargo-shortcut:hover { background: var(--status); color: #101014; }

.quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.quick-amounts button {
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.quick-amounts button:hover { border-color: var(--accent); color: var(--accent); }

.cargo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.cargo-form input {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.cargo-form button {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.cargo-error { color: var(--danger); font-size: 13px; }

.empty-state {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
}

/* Statistiken */
.stats-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.stats-head .section-label { margin-bottom: 0; }

.section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.section-toggle:hover { color: var(--text); }
.section-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.section-toggle[aria-expanded='false'] svg { transform: rotate(-90deg); }

/* Eingeklappt bleibt nur die Kopfzeile stehen. */
section.collapsed > :not(.stats-head):not(.section-label) { display: none; }
section.collapsed > .section-label,
section.collapsed > .stats-head { margin-bottom: 0; }
section.collapsed .stats-head > :not(.section-label) { display: none; }

.stats-panel {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.stats-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.stats-table th,
.stats-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.stats-table th:first-child,
.stats-table td:first-child { text-align: left; }
.stats-table th { color: var(--muted); font-size: 13px; font-weight: 600; }
.stats-table tbody tr:last-child td { border-bottom: 0; }
.stats-table tfoot td { border-top: 1px solid var(--border); border-bottom: 0; font-weight: 700; }

/* Sieht aus wie normaler Tabellentext, nur beim Darueberfahren unterstrichen. */
.table-link { color: inherit; }
.table-link:hover { text-decoration: underline; }

.chart-panel {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.chart-panel .empty-state { padding: 16px 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13px; }
.stats-head:has(.chart-legend) { flex-wrap: wrap; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend .chart-seg { width: 12px; height: 12px; border-radius: 3px; }

.chart-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 32px;
  border-radius: 6px;
}

.chart-row:hover { background: var(--surface-2); }
.chart-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chart-name { padding-left: 6px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

/* Die Balkenlaenge bezieht sich auf die Spur abzueglich Platz fuer die Summe. */
.chart-track { display: flex; align-items: center; gap: 2px; padding-right: 90px; }
.chart-track b { flex: none; margin: 0 -86px 0 6px; color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-seg { display: block; flex: none; min-width: 2px; height: 16px; }
.chart-track .chart-seg:nth-last-of-type(1) { border-radius: 0 4px 4px 0; }
.chart-seg.eisen { background: #ec4899; }
.chart-seg.metall { background: #8b5cf6; }
.chart-seg.blockiert { background: repeating-linear-gradient(-45deg, #f59e0b 0 4px, #8a5a12 4px 8px); }
.chart-seg.frei { background: #33333f; }
[data-theme='light'] .chart-seg.eisen { background: #be185d; }
[data-theme='light'] .chart-seg.metall { background: #6d3fe0; }
[data-theme='light'] .chart-seg.frei { background: #d9d9e2; }

.stats-note { margin-top: 10px; color: var(--muted); font-size: 13px; }

/* Einstellungen */
.profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(139, 92, 246, .14), transparent 70%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 26px rgba(0, 0, 0, .25);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px rgba(167, 139, 250, .5), 0 10px 24px rgba(139, 92, 246, .4);
}

/* Links Kuerzel, Name und Knopf, rechts die Rechte; beide Haelften mittig, getrennt durch eine Linie. */
.profile-main { display: grid; align-content: center; justify-items: start; gap: 2px; min-width: 0; }
.profile-main h3 { font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.profile-team { color: var(--muted); font-size: 14px; }
.profile-main .profile-password { margin-top: 10px; }

.profile-rights {
  display: grid;
  align-self: stretch;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.profile-rights-label { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.price-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(139, 92, 246, .1), transparent 60%), var(--surface);
}

.price-text { display: grid; gap: 2px; }
.price-text b { font-size: 16px; }
.price-text small { color: var(--muted); font-size: 13px; }
.price-input { display: flex; gap: 8px; }

.price-input input {
  width: 130px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.price-input input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.discord-card { margin-top: 12px; background: linear-gradient(120deg, rgba(88, 101, 242, .14), transparent 60%), var(--surface); }
.discord-icon { color: #7983f5; }
.discord-card .notify-amount input { width: 230px; font-family: var(--mono); font-size: 15px; }
.discord-card .notify-amount input:focus { border-color: #5865f2; box-shadow: 0 0 0 3px rgba(88, 101, 242, .25); }
.discord-card .switch input:checked + .switch-track { border-color: #7983f5; background: linear-gradient(160deg, #7983f5, #5865f2); box-shadow: 0 0 14px rgba(88, 101, 242, .5); }
.discord-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.discord-test { border: 1px solid #5865f2; border-radius: 999px; padding: 9px 16px; color: #aab1ff; }
.discord-test:hover:not(:disabled) { background: rgba(88, 101, 242, .15); color: var(--text); }
.discord-test:disabled { opacity: .5; cursor: wait; }
[data-theme='light'] .discord-test { color: #4752c4; }
.price-status { grid-column: 2 / -1; color: var(--muted); font-size: 13px; }
.price-status.error { color: var(--danger); }

@media (max-width: 700px) {
  .price-card { grid-template-columns: auto minmax(0, 1fr); }
  .price-input, .price-status { grid-column: 1 / -1; }
  .price-input input { flex: 1; width: auto; min-width: 0; }
  .discord-card .notify-amount, .discord-card .notify-amount input { width: 100%; }
  .discord-actions, .discord-actions button { width: 100%; }
}

/* Benachrichtigungen mit Schieberegler */
.notify-card {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(139, 92, 246, .1), transparent 60%), var(--surface);
}

.notify-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.notify-body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); transition: opacity .2s; }
.notify-body[hidden] { display: none; }
.notify-body:not([hidden]) { animation: worker-pop .18s ease-out; }
.notify-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.notify-amount em { color: var(--faint); font-style: normal; }

.notify-amount input {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.notify-amount input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.notify-card .price-status { grid-column: auto; }

/* Passwort aendern */
.password-dialog { width: min(520px, calc(100vw - 32px)); }
.password-title { display: flex; align-items: flex-start; gap: 14px; }
.password-body { display: grid; gap: 14px; }

/* Knopf in der Profilkarte */
.profile-password {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(167, 139, 250, .5);
  border-radius: 999px;
  background: rgba(139, 92, 246, .1);
  color: var(--accent-soft);
  font-size: 13px;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}

.profile-password:hover { border-color: var(--accent); background: rgba(139, 92, 246, .2); color: var(--text); }
.profile-password svg { width: 15px; height: 15px; }
.profile-status { margin-top: 6px; color: var(--full); }
.password-field { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.password-input { position: relative; display: block; }

.password-input textarea { resize: vertical; min-height: 76px; line-height: 1.45; }
.password-input input,
.password-input textarea {
  width: 100%;
  padding: 10px 42px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}

.password-input textarea:focus,
.password-input input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }

.password-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
  transform: translateY(-50%);
}

.password-eye:hover { background: rgba(139, 92, 246, .12); color: var(--text); }
.password-eye svg { width: 17px; height: 17px; }
.password-strength { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--border); }
.password-strength i { display: block; width: 0; height: 100%; transition: width .2s, background .2s; }
.password-hint { min-height: 16px; color: var(--muted); font-size: 12px; font-weight: 500; }
.password-hint.ok { color: var(--full); }

/* Gesperrt, solange der Discord-Bot nicht verbunden ist */
.notify-card.locked .notify-head { opacity: .55; }

/* Blauer Discord-Hinweis, ploppt unten in der Mitte auf */
.discord-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px dashed rgba(121, 131, 245, .8);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(88, 101, 242, .22), rgba(88, 101, 242, .08)), var(--surface);
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 24px rgba(88, 101, 242, .3);
  opacity: 0;
  transform: translate(-50%, 16px) scale(.97);
  transition: opacity .25s ease, transform .25s ease;
}

.discord-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.discord-toast b { color: #aab1ff; }
[data-theme='light'] .discord-toast b { color: #4752c4; }

.discord-toast-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(160deg, #7983f5, #5865f2);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #3c45a5;
}

.discord-toast-icon svg { width: 16px; height: 16px; }
.notify-card.locked .switch { cursor: not-allowed; }
.switch input:disabled + .switch-track { filter: grayscale(.4); }

/* Zahnrad neben "Benachrichtigungen" und Fenster mit den anpassbaren Nachrichten */
.section-head-settings { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-head-settings .section-label { margin-bottom: 0; }
.section-head-settings .account-settings { width: 24px; height: 24px; border-radius: 7px; }
.section-head-settings .account-settings svg { width: 13px; height: 13px; }
.message-dialog { width: min(720px, calc(100vw - 32px)); }
.message-editors { display: grid; gap: 14px; }
.message-editor { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.message-editor .discord-test { justify-self: start; }
.message-editor .price-status { grid-column: auto; }
.notify-message-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.notify-message-head span { display: grid; gap: 2px; }
.notify-message-head b { font-size: 15px; }
.notify-message-head small { color: var(--muted); font-size: 13px; }
.notify-message-head .form-cancel { flex: none; padding: 4px 8px; font-size: 13px; }

.message-editor textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.message-editor textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.notify-tokens { display: flex; flex-wrap: wrap; gap: 6px; }

.notify-token {
  padding: 3px 10px;
  border: 1px solid rgba(167, 139, 250, .45);
  border-radius: 999px;
  background: rgba(139, 92, 246, .1);
  color: var(--accent-soft);
  font-family: var(--mono);
  font-size: 12px;
}

.notify-token:hover { border-color: var(--accent); background: rgba(139, 92, 246, .2); }
.notify-preview { display: grid; gap: 6px; margin-top: 4px; }
.notify-preview-label { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

.notify-bubble {
  padding: 10px 14px;
  border-left: 3px solid #5865f2;
  border-radius: 8px;
  background: #2b2d31;
  color: #dbdee1;
  font-size: 14px;
}

.notify-bot { color: #c9cdfb; font-size: 13px; font-weight: 700; }
.notify-bubble p { margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.news-notify { margin-top: 12px; background: linear-gradient(120deg, rgba(236, 72, 153, .1), transparent 60%), var(--surface); }
.news-notify .action-icon { color: var(--pink); }
.abgaben-notify { margin-top: 12px; background: linear-gradient(120deg, rgba(251, 146, 60, .1), transparent 60%), var(--surface); }
.abgaben-notify .action-icon { color: #fb923c; }
.notify-card[hidden] { display: none; }

.switch { position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }

/* Aus: dunkle Rinne mit lila Kante und lila Knopf, passend zu den 3D-Symbolen. */
.switch-track {
  position: relative;
  width: 52px;
  height: 30px;
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 999px;
  background: linear-gradient(180deg, #0c0c11, #17151f);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04);
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.switch:hover .switch-track { border-color: rgba(167, 139, 250, .7); }

.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3b3352, #241f33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(167, 139, 250, .35), 0 3px 6px rgba(0, 0, 0, .45);
  transition: transform .2s ease, background .2s, box-shadow .2s;
}

.switch-thumb::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: .55;
  transition: opacity .2s;
}

.switch input:checked + .switch-track .switch-thumb::after { opacity: 0; }

[data-theme='light'] .switch-track { border-color: rgba(109, 63, 224, .3); background: linear-gradient(180deg, #e7e3f6, #f3f1fa); box-shadow: inset 0 2px 4px rgba(60, 40, 120, .15); }
[data-theme='light'] .switch-thumb { background: linear-gradient(160deg, #ffffff, #ece7fd); box-shadow: 0 0 0 1px rgba(109, 63, 224, .3), 0 2px 5px rgba(60, 40, 120, .2); }

.switch input:checked + .switch-track { border-color: rgba(167, 139, 250, .7); background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777); box-shadow: 0 0 14px rgba(139, 92, 246, .45); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(22px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 700px) {
  .notify-head { grid-template-columns: auto minmax(0, 1fr); }
  .notify-head .switch { grid-column: 1 / -1; justify-self: start; }
}

.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.theme-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  transition: border-color .15s, background .15s;
}

.theme-option:hover { border-color: var(--accent-soft); }
.theme-option .action-text { flex: 1; }
.theme-option[aria-checked='true'] { border-color: var(--accent); background: linear-gradient(120deg, rgba(139, 92, 246, .16), transparent 70%), var(--surface); }
.theme-option[aria-checked='true'] .quick-option-check { border-color: var(--accent); background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  .profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .profile-rights { grid-column: 1 / -1; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .theme-options { grid-template-columns: minmax(0, 1fr); }
}

/* Reiter der Admin-Konsole */
.admin-tabs {
  display: flex;
  gap: 4px;
  justify-self: start;
  margin-bottom: -14px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.admin-tabs a { padding: 7px 16px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 700; transition: color .15s, background .15s; }
.admin-tabs a:hover { color: var(--text); }
.admin-tabs a.active { background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777); color: #fff; box-shadow: 0 4px 14px rgba(139, 92, 246, .35); }

/* Gesamtbestand: Karten je Ortsart */
.stock-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.stock-place {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(139, 92, 246, .1), transparent 60%), var(--surface);
  transition: border-color .15s, transform .15s;
}

.stock-place:hover { border-color: var(--accent); transform: translateY(-2px); }
.stock-place-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.stock-place-head b { font-size: 17px; }
.stock-place-head small { color: var(--muted); font-size: 13px; }
.stock-place-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stock-place-values span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.stock-place-values small { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.stock-place-values b { font-size: 22px; font-weight: 800; }
.eisen-text { color: var(--pink); }
.metall-text { color: var(--accent-soft); }
.ankauf-text { color: var(--empty); }

/* Verkaufen */
.sale-people { gap: 12px; }
.sale-add-row { display: flex; gap: 8px; }

.sale-add-row select,
.sale-row select {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.sale-add-row .discord-test { flex: none; }
.sale-rows { display: grid; gap: 10px; }
.sale-rows-empty { padding: 14px; border: 1.5px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: 14px; text-align: center; }
/* Mitarbeiter-Karte im Verkaufsfenster */
.sale-row { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sale-row:focus-within { border-color: rgba(167, 139, 250, .45); }
.sale-row-head { display: flex; align-items: flex-start; gap: 12px; }
.sale-row-head .news-avatar { flex: none; width: 40px; height: 40px; font-size: 13px; }
.sale-row-head .proc-delete { flex: none; }
.sale-row-name { display: grid; flex: 1; gap: 6px; min-width: 0; }
.sale-row-name > b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.sale-row-name small { display: flex; flex-wrap: wrap; gap: 6px; }

.sale-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

.sale-chip svg { width: 13px; height: 13px; }
.sale-fill { cursor: pointer; }
.sale-chip-total { color: var(--text); }
.sale-fill:hover, .sale-fill:focus-visible { border-color: var(--accent); color: var(--text); outline: none; }

.sale-row-body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.sale-amount { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sale-amount > span small { margin-left: 4px; font-weight: 400; }
.sale-row-body.with-purchase { grid-template-columns: 1fr 1fr auto; }
.sale-amount-field { display: flex; align-items: center; max-width: 220px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.sale-amount-field:focus-within { border-color: var(--accent); }
.sale-amount-field em { padding: 0 12px 0 4px; color: var(--muted); font-size: 13px; font-style: normal; }

.sale-amount input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
}

.sale-amount input:focus { outline: none; }
.sale-row-value { display: grid; justify-items: end; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sale-row-value b { color: #34d399; font-size: 18px; }
[data-theme='light'] .sale-row-value b { color: #059669; }
.sale-row select:focus, .sale-add-row select:focus { border-color: var(--accent); outline: none; }
.sale-row-source { display: flex; align-items: center; gap: 12px; }
.sale-source-text { display: grid; flex: 1; min-width: 0; color: var(--muted); font-size: 13px; }
.sale-source-text small { color: var(--muted); font-size: 12px; font-weight: 400; }
.sale-preview[data-preview] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sale-preview-label { margin-right: 2px; color: var(--muted); font-size: 12px; }
.sale-take-chip { padding: 3px 9px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.sale-take-chip b { margin-left: 4px; color: var(--text); }

/* Schmale Bildschirme: Name des Fahrzeugs oben, Knoepfe und Menge darunter */
@media (max-width: 560px) {
  .sale-row .sale-place { flex-wrap: wrap; gap: 8px; }
  .sale-row .sale-place > span { flex: 1 1 100%; }
  .sale-row .sale-place input { flex: 1; width: auto; }
  .sale-row-body, .sale-row-body.with-purchase { grid-template-columns: 1fr; }
  .sale-row-value { grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
  .sale-amount-field { max-width: none; }
}
.sale-row-source select { flex-basis: 100%; }
.sale-places { display: grid; gap: 8px; }
.sale-place-list { display: grid; gap: 8px; }

.sale-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.sale-place span { display: grid; flex: 1; min-width: 0; }
.sale-place .proc-delete { flex: none; }
.sale-take-all { flex: none; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sale-take-all:hover, .sale-take-all:focus-visible { border-color: var(--accent); color: var(--text); outline: none; }
/* Abgabe annehmen: Menge auf einen oder mehrere Lagerorte verteilen */
.accept-places { display: grid; gap: 8px; }
.accept-places-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.accept-place-list { max-height: 330px; overflow-y: auto; padding-right: 2px; }
.accept-place-list .sale-place input { width: 110px; }
/* Ankauf: Lagerorte zum Anhaken, Menge daneben */
.purchase-place-pick { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.sale-place .purchase-place-pick input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; accent-color: var(--accent); cursor: pointer;
}
.purchase-place-row { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.purchase-place-row:has(input:not(:placeholder-shown)) { border-color: var(--border); }
.purchase-place-row.picked { border-color: rgba(167, 139, 250, .55); background: rgba(167, 139, 250, .08); }
.purchase-place-row:not(.picked) .purchase-place-pick span { opacity: .7; }
.purchase-place-row input[type="number"]:disabled { opacity: .35; cursor: default; }
.accept-rest { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.accept-rest.done { color: #34d399; }
.accept-rest.over { color: #f87171; }
/* "Alles" rechts im Mengenfeld der Abgabe */
.password-input:has(.abgabe-all) input { padding-right: 76px; }
.abgabe-all { position: absolute; top: 50%; right: 6px; padding: 5px 10px; transform: translateY(-50%); }
.abgabe-all:disabled { opacity: .45; cursor: default; }
.sale-place-add { display: grid; width: 40px; padding: 0; place-items: center; }
.sale-place-add svg { width: 18px; height: 18px; }
.sale-source-text { color: var(--text); font-weight: 600; }
.sale-place b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sale-place small { color: var(--muted); font-size: 12px; }

.sale-place input {
  flex: none;
  width: 100px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.sale-place input:focus { border-color: var(--accent); outline: none; }
.sale-place:has(input:not(:placeholder-shown)) { border-color: rgba(167, 139, 250, .55); }
.sale-amount input[readonly] { color: var(--accent-soft); cursor: default; }
.sale-preview { color: var(--muted); font-size: 12px; }
.sale-preview:empty { display: none; }
.sale-people-cell span { display: block; white-space: nowrap; }
.sale-people-cell small { margin-left: 6px; color: var(--muted); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Verkaufsliste auf der Seite Verkaufen */
.sale-table td { padding-top: 14px; padding-bottom: 14px; vertical-align: top; font-variant-numeric: tabular-nums; }
.sale-table th:nth-child(-n+3), .sale-table td:nth-child(-n+3) { text-align: left; }
.sale-table tbody tr { transition: background .15s ease; }
.sale-table tbody tr:hover { background: rgba(167, 139, 250, .05); }
.sale-when { white-space: nowrap; }
.sale-when b, .sale-when small { display: block; }
.sale-when small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.sale-buyer { font-weight: 600; }
.sale-muted { color: var(--muted); font-weight: 400; }
.sale-people { min-width: 260px; }
.sale-person-row { display: flex; align-items: flex-start; gap: 10px; }
.sale-person-row + .sale-person-row { margin-top: 10px; }
.sale-person-row .news-avatar { flex: none; width: 28px; height: 28px; font-size: 11px; }
.sale-person-text { display: grid; gap: 2px; min-width: 0; }
.sale-person-text > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sale-person-text em { color: var(--accent-soft); font-size: 13px; font-style: normal; font-weight: 700; }
.sale-person-text small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.sale-place-lines { display: grid; gap: 2px; min-width: 180px; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--border); list-style: none; }
.sale-place-lines li { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sale-place-lines b { color: var(--text); font-weight: 600; }
.sale-total { color: #34d399; font-weight: 700; }
[data-theme='light'] .sale-total { color: #059669; }
.sale-actions { width: 1%; }
.sale-table .proc-delete { opacity: .55; transition: opacity .15s ease; }
.sale-table tr:hover .proc-delete, .sale-table .proc-delete:focus-visible { opacity: 1; }
.sale-table tfoot td { padding-top: 12px; padding-bottom: 12px; }

/* Gesamtzeile pro Verkauf, darunter die Aufschluesselung pro Person */
.sale-group + .sale-group { border-top: 1px solid var(--border); }
.sale-main { cursor: pointer; }
.sale-when-inner { display: flex; align-items: flex-start; gap: 10px; }
.sale-when-inner b, .sale-when-inner small { display: block; }
.sale-toggle { display: grid; flex: none; width: 26px; height: 26px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.sale-toggle:hover { border-color: var(--accent); color: var(--text); }
.sale-toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.sale-toggle[aria-expanded='true'] svg { transform: rotate(90deg); }
.sale-group.collapsed .sale-sub, .sale-group.collapsed .sale-detail { display: none !important; }

/* Anteil pro Person im aufgeklappten Verkauf */
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.share-card { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.share-card header { display: flex; align-items: center; gap: 10px; }
.share-card .news-avatar { flex: none; width: 34px; height: 34px; font-size: 12px; }
.share-card-name { display: grid; flex: 1; gap: 4px; min-width: 0; }
.share-card-name > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-card-name > span { display: flex; flex-wrap: wrap; gap: 4px; }
.share-card-name .status-badge { padding: 2px 8px; font-size: 11px; }
.share-card-sum { display: grid; justify-items: end; text-align: right; }
.share-card-sum small { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.share-card-sum b { font-size: 18px; }
.share-card-meta { margin: 0; color: var(--muted); font-size: 12px; }
.share-card .sale-calc { min-width: 0; max-width: none; margin: 0; }
.share-card .sale-place-lines { margin: 0; }
.sale-table .sale-detail td { padding: 4px 16px 16px; border-bottom: 0; background: none; text-align: left; }
.sale-table .sale-detail .share-card { background: var(--surface-2); }
.sale-table .sale-main:hover td { background: rgba(167, 139, 250, .05); }
.sale-group.collapsed .sale-main td { border-bottom: 0; }
.sale-table .sale-group tr:last-child td { border-bottom: 0; }
.sale-main td { border-bottom: 1px solid var(--border); }
.sale-count { display: inline-block; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--accent-soft); font-size: 13px; font-weight: 700; }
.sale-table .sale-sub td { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); background: rgba(255, 255, 255, .015); text-align: right; }
[data-theme='light'] .sale-sub td { background: rgba(0, 0, 0, .02); }
.sale-table .sale-sub td:first-child { padding-left: 34px; text-align: left; }
.sale-sub .sale-person-text > span .status-badge { padding: 2px 8px; font-size: 11px; }
.sale-share { color: var(--accent-soft); font-weight: 700; }
.sale-table tbody.sale-group tr:hover { background: none; }
.sale-table .sale-main:hover td, .sale-table .sale-sub:hover td { background: rgba(167, 139, 250, .05); }
.sale-calc { display: grid; gap: 2px; min-width: 240px; max-width: 380px; margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); list-style: none; }
.sale-calc li { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.sale-calc b { color: var(--text); font-weight: 600; }

/* Auf schmalen Bildschirmen wird jeder Verkauf zur Karte statt seitlich zu scrollen */
@media (max-width: 700px) {
  .sale-table thead { display: none; }
  .sale-table, .sale-table tbody, .sale-table tfoot, .sale-table tr, .sale-table td { display: block; }
  .sale-table td.sale-people { gap: 10px; }
  .sale-table .sale-person-row + .sale-person-row { margin-top: 0; }
  .sale-table tbody tr { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .sale-table tbody tr:last-child { border-bottom: 0; }
  .sale-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .sale-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; }
  .sale-table td.sale-when { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 0 40px 8px 0; }
  .sale-table td.sale-when::before, .sale-table td.sale-people::before { content: none; }
  .sale-table td.sale-people { display: grid; min-width: 0; margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); text-align: left; }
  .sale-table td.sale-actions { position: absolute; top: 10px; right: 12px; width: auto; padding: 0; }
  .sale-table td.sale-actions::before { content: none; }
  .sale-table .proc-delete { opacity: 1; }
  .sale-table tbody.sale-group { display: block; border-bottom: 1px solid var(--border); }
  .sale-table tbody.sale-group tr { border-bottom: 0; }
  .sale-table .sale-sub { margin: 0 12px 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
  .sale-table .sale-sub td, .sale-table .sale-sub td:first-child { padding: 2px 0; background: none; }
  .sale-table .sale-sub td.sale-sub-person::before, .sale-table .sale-sub-empty { display: none; }
  .sale-table .sale-sub td.sale-sub-person { display: block; padding-bottom: 6px; }
  .sale-calc { min-width: 0; max-width: none; background: var(--surface); }
  .sale-table .sale-detail td { display: block; padding: 0 12px 12px; }
  .sale-table .sale-detail td::before { content: none; }
  .sale-table .sale-detail .share-card { background: var(--surface-2); }
  .share-grid { grid-template-columns: 1fr; }
  .sale-table tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
  .sale-table tfoot td { display: block; padding: 0; border: 0; }
  .sale-table tfoot td:empty { display: none; }
}
.sale-stats-table td { vertical-align: top; }
.sale-stats-table td:nth-child(2), .sale-stats-table th:nth-child(2),
.sale-stats-table td:nth-child(3), .sale-stats-table th:nth-child(3) { text-align: left; }
.sale-person { display: grid; padding: 4px 0; white-space: nowrap; }
.sale-person + .sale-person { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sale-person b { font-size: 14px; }
.sale-person span { color: var(--muted); font-size: 13px; }
.sale-person small { color: var(--faint); font-size: 12px; }
.sale-sum { color: var(--muted); font-size: 14px; }
.sale-sum b { color: var(--full); font-size: 20px; font-weight: 800; }
.field-optional { color: var(--faint); font-style: normal; font-weight: 400; }

/* Uebersicht der Admin-Konsole: zwei Kaesten nebeneinander */
.admin-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.admin-box { display: grid; align-content: start; min-width: 0; }
.admin-box .admin-news { margin-top: 0; }
.admin-more { color: var(--accent-soft); font-size: 13px; font-weight: 700; }
.admin-more:hover { color: var(--text); }

@media (max-width: 1000px) {
  .admin-overview { grid-template-columns: minmax(0, 1fr); }
}

/* Benutzer anlegen */
.user-dialog { width: min(680px, calc(100vw - 32px)); }
.user-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.user-fields .wide { grid-column: 1 / -1; }

.user-fields select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.user-fields select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.user-fields .password-input input, .user-fields .password-input textarea { padding-right: 14px; }
.user-fields .password-input:has(.password-eye) input { padding-right: 42px; }
.user-rights { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.user-rights-grid { display: grid; gap: 8px; }
.user-rights-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.user-rights-group .profile-rights-label { flex-basis: 100%; }
/* Gruppenname als Knopf: alle Rechte der Gruppe an- oder abwaehlen */
.rights-group-toggle { display: flex; align-items: center; gap: 8px; width: max-content; flex-basis: auto !important; margin-right: 100%; padding: 1px 10px 1px 0; border: 0; background: none; cursor: pointer; text-align: left; }
.rights-group-toggle::after { content: 'alle'; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.rights-group-toggle:hover, .rights-group-toggle:focus-visible { color: var(--text); outline: none; }
.rights-group-toggle:hover::after, .rights-group-toggle:focus-visible::after { border-color: var(--accent); color: var(--text); }
.rights-group-toggle[aria-pressed='true'] { color: var(--accent-soft); }
.rights-group-toggle[aria-pressed='true']::after { content: 'keine'; }
.rights-group-count { color: var(--faint); letter-spacing: 0; }

.user-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.user-right input { position: absolute; opacity: 0; pointer-events: none; }
.user-right .quick-option-check { width: 20px; height: 20px; }
.user-right:has(input:checked), .user-right.on { border-color: var(--accent); background: rgba(139, 92, 246, .14); }
.user-right:has(input:checked) .quick-option-check, .user-right.on .quick-option-check { border-color: var(--accent); background: var(--accent); color: #fff; }
.user-right:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-empty { display: grid; gap: 4px; }
.user-empty b { color: var(--text); }
.admin-user .proc-head-actions { flex: none; }
.admin-user .proc-head-actions .name-edit { width: 32px; height: 32px; border: 1px solid var(--border); }
.admin-user .proc-head-actions .name-edit:hover { border-color: var(--accent); }
.admin-user .proc-head-actions svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .user-fields { grid-template-columns: minmax(0, 1fr); }
  .admin-tabs { justify-self: stretch; }
  .admin-tabs a { flex: 1; text-align: center; padding: 7px 8px; }
}

/* Admin-Konsole: News senden, gesendete News, Benutzer */
.news-compose {
  display: flex;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: radial-gradient(70% 120% at 0% 0%, rgba(236, 72, 153, .1), transparent 70%), var(--surface);
}

.news-compose .news-fields { flex: 1; min-width: 0; }
.news-compose-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.news-target { color: var(--muted); font-size: 13px; }
.admin-news { display: grid; gap: 10px; margin-top: 12px; }

.admin-news-row,
.admin-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.admin-news-body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.admin-news-body b { font-size: 15px; }
.admin-news-body p { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-news-row .proc-delete { flex: none; }
.admin-users { display: grid; gap: 10px; }
.admin-user.me { border-color: rgba(167, 139, 250, .45); }
.admin-user-main { display: grid; flex: none; width: 200px; min-width: 0; }
.admin-user-main em { color: var(--accent-soft); font-style: normal; font-weight: 500; }
.admin-user-main small { color: var(--muted); font-size: 13px; }
.admin-user .profile-badges { flex: 1; }

.news-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--nav-active);
  color: var(--accent-soft);
  font-weight: 700;
}

@media (max-width: 700px) {
  .news-compose { padding: 16px; }
  .news-compose > .news-tile-icon { display: none; }
  .admin-user { flex-wrap: wrap; }
  .admin-user-main { flex: 1; width: auto; }
  .admin-user .profile-badges { flex-basis: 100%; }
}

/* News-Kachel im Ueberblick: klein, fest, neueste Nachricht mit Blaettern */
.news-tile {
  position: relative;
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(236, 72, 153, .12), transparent 45%),
    linear-gradient(120deg, rgba(139, 92, 246, .12), transparent 60%), var(--surface);
  overflow: hidden;
}

/* Grosse News-Kachel: Kopfzeile, Nachricht, Absender, Punkte */
.news-tile-head { display: flex; align-items: center; gap: 14px; }
.news-tile.collapsed { padding: 12px 18px; }
.news-tile.collapsed .news-tile-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-collapse { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.news-collapse:hover { border-color: var(--accent); color: var(--text); }
.news-collapse svg { width: 14px; height: 14px; transform: rotate(180deg); transition: transform .2s; }
.news-collapse[aria-expanded='false'] svg { transform: none; }
.news-tile-label { display: grid; flex: 1; min-width: 0; }
.news-tile-label b { font-size: 13px; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.news-tile-label small { color: var(--muted); font-size: 12px; }
.news-message { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: rgba(12, 10, 18, .35); }
[data-theme='light'] .news-message { background: rgba(255, 255, 255, .6); }
.news-message-title { display: flex; align-items: center; gap: 10px; }
.news-tile .news-message h3 { margin: 0; overflow: visible; font-size: 22px; line-height: 1.25; white-space: normal; }
.news-tile .news-text { overflow: visible; color: var(--text); font-size: 15px; line-height: 1.65; white-space: pre-line; text-overflow: clip; opacity: .88; }
.news-message.clamped .news-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.news-more { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.news-more:hover { text-decoration: underline; }
.news-author { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.news-author .news-avatar { flex: none; width: 34px; height: 34px; font-size: 12px; }
.news-author > span:last-child { display: grid; }
.news-author b { font-size: 14px; }
.news-author small { color: var(--muted); font-size: 12px; }
.news-dots { display: flex; justify-content: center; gap: 6px; }
.news-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: width .2s, background .2s; }
.news-dots button.fresh { background: rgba(236, 72, 153, .6); }
.news-dots button.active { width: 22px; background: linear-gradient(90deg, var(--accent), var(--pink)); }
.news-tile .news-tile-empty { margin: 0; padding: 16px 18px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); font-size: 15px; white-space: normal; }

.news-tile.unread {
  border-color: rgba(236, 72, 153, .55);
  background: linear-gradient(120deg, rgba(236, 72, 153, .1), transparent 60%), var(--surface);
}

.news-tile-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #4c1d95, 0 8px 18px rgba(139, 92, 246, .35);
}

.news-tile-icon svg { width: 20px; height: 20px; }

.news-new {
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, #f472b6, #db2777);
  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.news-tile-side { display: flex; flex: none; align-items: center; gap: 6px; }
.news-pager { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.news-pager button,
.news-send,
.news-remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
}

.news-pager button:hover:not(:disabled), .news-send:hover { border-color: var(--accent); color: var(--text); }
.news-pager button:disabled { opacity: .35; cursor: default; }
.news-remove { color: var(--danger); }
.news-remove:hover { border-color: var(--danger); background: rgba(248, 113, 113, .1); }
.news-pager svg, .news-send svg, .news-remove svg { width: 14px; height: 14px; }
.news-fields { display: grid; gap: 10px; }

.news-fields input,
.news-fields textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.news-fields input { font-weight: 700; }
.news-fields input:focus, .news-fields textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }

@media (max-width: 560px) {
  .news-tile { padding: 16px; }
  .news-tile-head { flex-wrap: wrap; }
  .news-tile-icon { width: 36px; height: 36px; }
  .news-tile-side { width: 100%; justify-content: flex-end; }
  .news-message { padding: 14px; }
  .news-tile .news-message h3 { font-size: 19px; }
}

/* Statistiken: grosser Verdienst-Bereich */
.earn-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 28px;
  border: 1px solid var(--full);
  border-radius: 16px;
  background:
    radial-gradient(70% 120% at 0% 0%, var(--full-soft), transparent 70%),
    radial-gradient(60% 100% at 100% 100%, rgba(139, 92, 246, .1), transparent 70%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 30px rgba(0, 0, 0, .25);
}

.earn-card[hidden] { display: none; }

/* Dashboard: Spaltenzahl richtet sich nach der Anzahl gewaehlter Kacheln (hoechstens vier). */
.overview-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.overview-grid:empty { display: none; }

@media (max-width: 1100px) {
  .stat-grid.overview-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.earn-main { display: grid; align-content: center; gap: 6px; }
.earn-label { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

.earn-value {
  color: var(--full);
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.earn-formula { color: var(--muted); font-size: 14px; }
.earn-extra { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.earn-extra b { color: var(--text); font-size: 15px; }

.earn-rows { display: grid; align-content: center; gap: 10px; }

.earn-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 14px;
}

.earn-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earn-amount { color: var(--muted); font-size: 13px; }
.earn-row b { min-width: 90px; color: var(--full); font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.earn-share { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--full); opacity: .7; }

@media (max-width: 900px) {
  .earn-card { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .earn-row { grid-template-columns: minmax(0, 1fr) auto; }
  .earn-amount { grid-row: 2; }
}

/* Dashboard: verschiebbare Bereiche */
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.dash-head .section-label { margin-bottom: 0; }
/* Verschiebe-Knoepfe gibt es nur im Bearbeitungsmodus. */
.dash-move { display: none; align-items: center; gap: 4px; }
.dash-editing .dash-move { display: flex; }

.dash-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-bottom: -20px; }
.dash-edit-hint { flex: 1; color: var(--muted); font-size: 13px; }

.dash-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 14px rgba(0, 0, 0, .2);
  transition: border-color .15s, color .15s, background .15s;
}

.dash-edit svg { width: 15px; height: 15px; }
.dash-edit:hover { border-color: var(--accent); color: var(--text); }
.dash-edit[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Runder Plus-Knopf rechts neben "Anordnen" */
.dash-add {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #4c1d95, 0 8px 18px rgba(139, 92, 246, .45);
  transition: transform .2s;
}

.dash-add svg { width: 18px; height: 18px; stroke-width: 2.4; }
.dash-add:hover { transform: rotate(90deg); }
.dash-add:active { transform: rotate(90deg) translateY(2px); }

.dash-move .dash-remove { margin-left: 6px; color: var(--danger); }
.dash-move button.dash-remove:hover:not(:disabled) { border-color: var(--danger); background: rgba(248, 113, 113, .1); color: var(--danger); }
.dash-empty { grid-column: 1 / -1; }

/* Gerade hinzugefuegter Bereich leuchtet kurz auf. */
.dash-section.just-added { animation: section-glow 1.6s ease-out; }

@keyframes section-glow {
  0%, 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 30px rgba(139, 92, 246, .35); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Auswahl der Bausteine im Plus-Fenster; Schritt 1 und 2 werden ueber hidden umgeschaltet. */
#widgetDialog [hidden], .layout-dialog [hidden] { display: none; }
#processorTimes[hidden], .overview-grid[hidden] { display: none; }

/* Eingeklappte Bereiche zeigen im Bearbeitungsmodus trotzdem ihre Knoepfe. */
.dash-editing section.collapsed .stats-head > .dash-move { display: flex; }
.stats-head .dash-move { margin-left: auto; }
.widget-types { display: grid; gap: 10px; }

.widget-type {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: left;
  transition: border-color .15s, transform .15s;
}

.widget-type:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.widget-type:disabled { opacity: .55; cursor: default; }
.widget-type .action-text { flex: 1; }

.widget-status {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.widget-type.present .widget-status { border: 1px solid var(--border); background: transparent; color: var(--muted); }

/* Quick Use */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  transition: border-color .15s, transform .15s;
}

.action-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.action-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .2);
  transition: transform .15s;
}

[data-theme='light'] .action-icon { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #dcdce6, 0 6px 12px rgba(60, 40, 120, .08); }
.action-card:hover .action-icon { transform: translateY(-2px); }
.action-icon svg { width: 20px; height: 20px; }
.action-text { display: grid; min-width: 0; }
.action-text b { font-size: 15px; font-weight: 700; }
.action-text small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Im Bearbeitungsmodus sind die Bereiche gestrichelt umrandet. */
.dash-editing .dash-section {
  padding: 14px 16px 18px;
  outline: 1.5px dashed rgba(139, 92, 246, .45);
  outline-offset: 0;
  background: rgba(139, 92, 246, .03);
}

.dash-editing .quick-card[data-quick-id] { cursor: grab; animation: tile-wiggle .9s ease-in-out infinite alternate; }
.dash-editing .quick-card[data-quick-id]:nth-child(even) { animation-delay: -.45s; }
.dash-editing .quick-card[data-quick-id]:hover { animation-play-state: paused; border-color: var(--accent); }

@keyframes tile-wiggle {
  from { transform: rotate(-.35deg); }
  to { transform: rotate(.35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dash-editing .quick-card[data-quick-id] { animation: none; }
}

.dash-move button,
.dash-grip {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
}

.dash-move button:hover:not(:disabled), .dash-grip:hover { border-color: var(--accent); color: var(--text); }
.dash-move button:disabled { opacity: .35; cursor: default; }
.dash-move svg { width: 15px; height: 15px; }
.dash-grip { cursor: grab; touch-action: none; }
.dash-grip:active { cursor: grabbing; }

.dash-section { border-radius: 14px; transition: box-shadow .15s, opacity .15s; }
.dash-section.dragging,
.quick-card.dragging { opacity: .4; box-shadow: 0 0 0 2px var(--accent); }

.dash-processors { margin-top: 16px; }
.dash-sub { margin-bottom: 10px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.dash-sub b { color: var(--text); font-family: var(--font); font-size: 13px; letter-spacing: 0; }

@media (max-width: 560px) {
  .stat-grid.four.dash-grid,
  .stat-grid.overview-grid.dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-grid .stat-card { padding: 14px 14px; }
  .dash-grid .stat-label { font-size: 10px; letter-spacing: .1em; }
  .dash-grid .stat-value { font-size: 22px; }
}
.stat-grid.four { grid-template-columns: repeat(4, 1fr); }
.stat-grid.four .stat-card { min-width: 0; }
/* Fuenf Kacheln in einer Reihe (Gesamtbestand) */
.stat-grid.four.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.proc-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.proc-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
}

.proc-time span { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.proc-time b { flex: none; font-weight: 600; }
.proc-time.done { border-color: var(--full); background: linear-gradient(to right, var(--full-soft), var(--surface)); }
.proc-time.done b { color: var(--full); }
.proc-time.running { border-color: var(--empty); background: linear-gradient(to right, var(--empty-soft), var(--surface)); }
.proc-time.running b { color: var(--empty); }

@media (max-width: 1100px) {
  .stat-grid.four, .stat-grid.four.five { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .stat-grid.four, .stat-grid.four.five { grid-template-columns: minmax(0, 1fr); }
}

.chart-tip {
  position: fixed;
  z-index: 50;
  max-width: 300px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  pointer-events: none;
}

/* Arbeiter */
.worker-create {
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.worker-create[open] {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  animation: worker-pop .18s ease-out;
}

.worker-create::backdrop { background: rgba(8, 8, 12, .65); backdrop-filter: blur(4px); }
.worker-create.editing .art-plus { display: none; }

@keyframes worker-pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
}

.worker-count { margin-left: 6px; color: var(--accent-soft); }

/* Wie die Fahrzeugbilder in beiden Themes dunkel, mit der Stadtsilhouette aus dem Seitenkopf. */
.worker-art {
  display: grid;
  place-items: center;
  padding: 24px;
  border-right: 1px solid var(--border);
  background:
    linear-gradient(to top, rgba(12, 12, 17, .35), rgba(12, 12, 17, .85) 70%),
    url('../img/hero.svg') center bottom / auto 42% no-repeat,
    #0c0c11;
}

.worker-art svg { width: 170px; height: 170px; max-width: 100%; filter: drop-shadow(0 0 14px rgba(139, 92, 246, .45)); }

.worker-form { display: grid; align-content: center; gap: 18px; padding: 28px; }
.worker-form h2 { font-size: 24px; font-weight: 700; }
.worker-form-head p { margin-top: 2px; color: var(--muted); font-size: 14px; }
.worker-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.worker-fields .wide { grid-column: 1 / -1; }
.worker-form label { display: grid; gap: 6px; min-width: 0; }
.worker-form label span { color: var(--muted); font-size: 13px; font-weight: 600; }
.worker-form label em { color: var(--faint); font-style: normal; font-weight: 400; }

.worker-form input,
.worker-form textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}

.worker-form textarea { resize: vertical; }

.worker-form input:focus,
.worker-form textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}

.worker-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

.worker-card .proc-head-actions .name-edit { width: 32px; height: 32px; border: 1px solid var(--border); }
.worker-card .proc-head-actions .name-edit:hover { border-color: var(--accent); }
.worker-card .proc-head-actions svg { width: 16px; height: 16px; }

.worker-description { display: grid; gap: 4px; }
.worker-description span { color: var(--muted); font-size: 14px; }
.worker-description p { font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }

.worker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
  gap: 16px;
}

.worker-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.worker-card:hover { border-color: var(--accent); }
.worker-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }

.worker-info { display: grid; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.worker-info div { display: flex; justify-content: space-between; gap: 12px; }
.worker-info dt { color: var(--muted); font-size: 14px; }
.worker-info dd { margin: 0; font-size: 15px; font-weight: 600; }

.worker-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nav-active);
  color: var(--accent-soft);
  font-size: 18px;
  font-weight: 700;
}

.worker-text { display: grid; flex: 1; min-width: 0; }
.worker-text strong { overflow: hidden; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.worker-text small { color: var(--muted); font-family: var(--mono); font-size: 13px; }

.worker-card { cursor: pointer; }

.worker-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--nav-active);
  color: var(--muted);
  font-size: 14px;
  text-align: left;
}

.worker-toggle b { color: var(--text); font-weight: 700; }
.worker-toggle svg { flex: none; width: 18px; height: 18px; color: var(--accent-soft); transition: transform .15s; }
.worker-card:hover .worker-toggle svg { transform: translateX(3px); }


.worker-popup {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.worker-popup[open] { animation: worker-pop .18s ease-out; }
.worker-popup::backdrop { background: rgba(8, 8, 12, .65); backdrop-filter: blur(4px); }

.worker-popup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(139, 92, 246, .16), transparent 70%);
}

.worker-popup-head .name-edit { width: 36px; height: 36px; border: 1px solid var(--border); }
.worker-popup-head .name-edit:hover { border-color: var(--accent); }
.worker-popup-head .worker-text strong { font-size: 22px; }

.worker-popup-info {
  display: grid;
  flex-basis: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.worker-popup-info .wide { grid-column: 1 / -1; }
.worker-popup-info dt { color: var(--muted); font-size: 13px; }
.worker-popup-info dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.worker-popup-body { padding: 20px 24px 24px; }
.worker-popup-body .stats-panel { margin-top: 16px; }

/* Besitzer von Fahrzeugen, Verarbeitern und Lagerhaus */
.owner-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 600; }
.owner-field > span { display: inline-flex; align-items: center; gap: 6px; }
.owner-field svg { width: 15px; height: 15px; }
.owner-field select { min-width: 0; max-width: 60%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.owner-field select:focus { border-color: var(--accent); outline: none; }
.vehicle-owner { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--accent-soft) !important; font-size: 12px; }
.vehicle-owner svg { width: 12px; height: 12px; }
.proc-owner { padding: 0 20px; }
.proc-owner .owner-field { margin: 4px 0 0; }

/* Gesamtbestand: Umschalter Uebersicht / Liste */
.view-switch { display: inline-flex; justify-self: start; width: max-content; gap: 3px; margin-bottom: 0; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.view-switch button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-selected='true'] { background: var(--accent); color: #fff; }
.view-switch svg { width: 15px; height: 15px; }

.people-table td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.people-table th:first-child { text-align: left; }
.people-row { cursor: pointer; transition: background .15s; }
.people-row:hover, .people-row:focus-visible { background: rgba(167, 139, 250, .06); outline: none; }
/* "Ohne Besitzer": gleiche Farben wie die anderen Zeilen, nur etwas abgeschwaecht. */
.people-unowned td { opacity: .8; }
.people-name { display: flex; align-items: center; gap: 10px; }
.people-name .news-avatar { flex: none; width: 32px; height: 32px; font-size: 12px; }
.people-name > span:last-child { display: grid; }
.people-name small { color: var(--muted); font-size: 12px; }

/* Fahrzeug-Bestand in der Benutzer-Karte */
.member-vehicles { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.member-vehicles-head, .member-vehicles li, .member-vehicles-sum { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center; gap: 8px; }
.member-vehicles-head { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.member-vehicles-head b { margin-left: 4px; color: var(--text); }
.member-vehicles-head span:not(:first-child), .member-vehicles li > span:not(:first-child), .member-vehicles-sum span:not(:first-child) { text-align: right; }
.member-vehicles ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.member-vehicles li { padding: 6px 0; border-top: 1px solid var(--border); }
.member-vehicle-name { display: grid; min-width: 0; }
.member-vehicle-name b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.member-vehicle-name small { color: var(--muted); font-size: 11px; }
.member-vehicles-sum { padding-top: 6px; border-top: 1px solid var(--border); font-weight: 700; }
.member-vehicles.empty { grid-template-columns: 1fr auto; align-items: center; }
.member-vehicles.empty span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.member-vehicles.empty p { margin: 0; color: var(--faint); }
.member-popup-vehicles { margin-top: 8px; }
.member-popup-vehicles[hidden] { display: none; }
.member-vehicle-toggle { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s; }
.member-vehicle-toggle:hover, .member-vehicle-toggle:focus-visible { border-color: var(--accent); outline: none; }
.member-vehicle-toggle-icon { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(139, 92, 246, .14); color: var(--accent-soft); }
.member-vehicle-toggle-icon svg { width: 18px; height: 18px; }
.member-vehicle-toggle-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.member-vehicle-toggle-text b { font-size: 15px; }
.member-vehicle-toggle-text small { color: var(--muted); font-size: 12px; }
.member-vehicle-toggle > svg { flex: none; width: 18px; height: 18px; color: var(--accent-soft); transition: transform .2s; }
.member-vehicle-toggle[aria-expanded='true'] > svg { transform: rotate(90deg); }
.member-popup-vehicles .member-vehicles { padding: 14px 16px; border: 1px solid var(--border); font-size: 14px; }
.member-popup-vehicles .member-vehicles-head, .member-popup-vehicles .member-vehicles li, .member-popup-vehicles .member-vehicles-sum { grid-template-columns: minmax(0, 1fr) 110px 110px; }

/* Abgaben */
.status-badge.none { --status: var(--muted); --status-soft: rgba(127, 127, 140, .12); }
.abgabe-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0; padding: 0; list-style: none; counter-reset: step; }
.abgabe-steps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.abgabe-steps li + li::before { content: '→'; margin-right: 6px; color: var(--faint); }
.abgaben-table td { vertical-align: middle; }
.abgaben-table th:nth-child(-n+2), .abgaben-table td:nth-child(-n+2), .abgaben-table th:nth-child(7), .abgaben-table td:nth-child(7) { text-align: left; }
.abgabe-person { display: grid; }
.abgabe-person small, .abgabe-history { color: var(--muted); font-size: 12px; line-height: 1.5; }
.abgaben-table th, .abgaben-table td { padding-left: 12px; padding-right: 12px; }
.abgaben-table td:nth-child(7) { max-width: 230px; white-space: normal; }
.abgabe-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.abgabe-action { padding: 5px 11px; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.abgabe-action.accept { border-color: var(--accent); background: var(--accent); color: #fff; }
.abgabe-action.reject:hover { border-color: var(--danger); color: var(--danger); }
.abgabe-action.pay { border-color: var(--full); color: var(--full); }
.abgabe-action.pay:hover { background: var(--full); color: #101014; }
.sale-abgaben { display: grid; gap: 8px; }
#saleAbgabenBox[hidden] { display: none; }

/* Dashboard: Meine Abgaben */
.dash-abgaben { display: grid; gap: 12px; }
.dash-abgaben-note { margin: 0; color: var(--muted); font-size: 13px; }
.dash-abgaben-admin { display: flex; align-items: center; gap: 10px; width: max-content; padding: 8px 14px; border: 1px solid rgba(251, 146, 60, .5); border-radius: 999px; background: var(--empty-soft); color: var(--text); font-size: 13px; }
.dash-abgaben-admin svg { width: 16px; height: 16px; color: var(--empty); }
.dash-abgaben-admin b { color: var(--empty); }
.dash-abgaben-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dash-abgabe { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); transition: border-color .15s, transform .15s; }
.dash-abgabe:hover { border-color: var(--accent); transform: translateY(-2px); }
.dash-abgabe-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-abgabe-top small, .dash-abgabe > small { color: var(--muted); font-size: 12px; }
.dash-abgabe > b { font-size: 20px; }
.dash-abgabe-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dash-abgabe-track i { height: 5px; border-radius: 999px; background: var(--surface-2); }
.dash-abgabe-track i.done { background: linear-gradient(90deg, var(--accent), var(--pink)); }
.dash-abgabe-rejected { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.dash-abgabe-pay { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.dash-abgabe-pay b { color: var(--full); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .dash-abgabe:hover { transform: none; } }

/* Hinweise vom Startskript (boot.js) */
.lv-save-error { position: fixed; left: 50%; bottom: 20px; z-index: 90; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid rgba(248, 113, 113, .6); border-radius: 12px; background: var(--surface); color: var(--danger); font-size: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); transform: translateX(-50%); }
.lv-save-error[hidden] { display: none; }
.lv-boot-error { margin: 24px; padding: 16px; border: 1px solid rgba(248, 113, 113, .6); border-radius: 12px; background: var(--surface); color: var(--danger); }

/* Login-Seite */
.login-page { min-height: 100vh; overflow-x: hidden; }
.login-bg { position: fixed; inset: 0; background: url('../img/hero-dashboard.svg') center bottom / cover no-repeat; }
.login-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(var(--hero-fade), .35), rgba(var(--hero-fade), .85) 70%); }
.login-wrap { position: relative; display: grid; min-height: 100vh; padding: 24px; place-items: center; }
.login-card {
  display: grid;
  gap: 22px;
  width: min(420px, 100%);
  padding: 30px 30px 26px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(139, 92, 246, .14), transparent 55%), color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
  animation: ask-pop .25s ease-out;
}
.login-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.login-brand > span { display: grid; gap: 4px; }
.login-brand b { font-size: 16px; font-weight: 800; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; }
.login-brand small { color: var(--accent-soft); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.login-step { display: grid; gap: 14px; }
.login-step[hidden] { display: none; }
.login-head h1 { margin: 0 0 6px; font-size: 26px; }
.login-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.login-input > svg { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.login-input input { padding-left: 40px !important; padding-top: 12px; padding-bottom: 12px; }
.login-input:focus-within > svg { color: var(--accent-soft); }
.login-error { margin: 0; padding: 10px 12px; border: 1px solid rgba(248, 113, 113, .45); border-radius: 10px; background: rgba(248, 113, 113, .1); color: var(--danger); font-size: 13px; }
.login-error[hidden] { display: none; }
.login-submit { width: 100%; margin-top: 4px; padding: 13px 22px; }
.login-submit:disabled { opacity: .7; cursor: progress; }
.login-foot { margin: 0; color: var(--faint); font-size: 12px; text-align: center; }
.login-back { justify-self: center; font-size: 14px; }
.login-sites { display: grid; gap: 10px; }
.login-site { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.login-site:hover { border-color: rgba(139, 92, 246, .6); }
.login-site input { position: absolute; opacity: 0; pointer-events: none; }
.login-site:has(input:checked) { border-color: var(--accent); background: rgba(139, 92, 246, .14); }
.login-site:has(input:checked) .quick-option-check { border-color: var(--accent); background: var(--accent); color: #fff; }
.login-site:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-site-icon { display: grid; flex: none; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: linear-gradient(160deg, #a78bfa, #7c3aed 55%, #db2777); color: #fff; }
.login-site-icon svg { width: 22px; height: 22px; }
.login-site-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.login-site-text small { color: var(--muted); font-size: 12px; }
@media (max-width: 480px) { .login-card { padding: 24px 20px 20px; } }

/* Benutzer im Gesamtbestand */
.member-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.member-payout { color: var(--accent-soft); font-weight: 700; }
.member-rights { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.member-subhead { margin: 22px 0 0; font-size: 15px; }
.member-subhead small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 500; }
.member-table th:nth-child(-n+3), .member-table td:nth-child(-n+3) { text-align: left; }

.worker-popup-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.worker-popup-stats .stat-card { padding: 12px 14px; }
.worker-popup-stats .stat-value { font-size: 20px; }

.worker-purchases td small { color: var(--muted); font-size: 12px; }
.worker-purchases .mobile-note { display: none; }
.worker-purchases-empty { padding: 28px 0; color: var(--muted); font-size: 14px; text-align: center; }

/* Ankauf */
.profit-plus { color: var(--full); }

/* Hinweis, wenn noch kein eigener Metallpreis gesetzt ist */
.price-missing { color: var(--empty); font-size: 18px; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 4px; }
.price-missing:hover { color: var(--text); }
.earn-value.earn-missing { color: var(--empty); }
.earn-set { display: inline-block; margin-top: 2px; }
.profit-minus { color: var(--danger); }

.worker-form select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.worker-form select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
/* Spalten: Status, Datum, Uhrzeit, Angekauft von, Arbeiter, Gelagert, dann Zahlen */
.purchase-table th:first-child,
.purchase-table td:nth-child(2), .purchase-table th:nth-child(2),
.purchase-table td:nth-child(4), .purchase-table th:nth-child(4),
.purchase-table td:nth-child(5), .purchase-table th:nth-child(5),
.purchase-table td:nth-child(6), .purchase-table th:nth-child(6) { text-align: left; }
.purchase-table td:last-child { width: 1%; }
.purchase-actions { display: flex; justify-content: flex-end; gap: 8px; }
#purchaseSoldSection[hidden], #purchaseKeeperField[hidden] { display: none; }
.purchase-keeper-switch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.purchase-keeper-switch > span:last-child { display: grid; gap: 2px; min-width: 0; }
.purchase-keeper-switch b { font-size: 14px; }
.purchase-keeper-switch small { color: var(--muted); font-size: 12px; }
.purchase-locked { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.purchase-locked svg { width: 14px; height: 14px; }
.purchase-actions:has([data-remove-locked]) { align-items: center; gap: 10px; }
.purchase-sold-count { margin-left: 6px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; letter-spacing: 0; }
.purchase-status { display: grid; justify-items: start; gap: 3px; }
.purchase-status small { color: var(--muted); font-size: 12px; }
.purchase-place b, .purchase-place small { display: block; }
.purchase-place b { font-weight: 600; }
.purchase-place small { color: var(--muted); font-size: 12px; }
.purchase-actions .name-edit { width: 32px; height: 32px; border: 1px solid var(--border); }
.purchase-actions .name-edit:hover { border-color: var(--accent); }
.purchase-actions svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .worker-create[open] { grid-template-columns: minmax(0, 1fr); }
  .worker-art { padding: 14px; border-right: 0; border-bottom: 1px solid var(--border); background-size: auto, cover, auto; }
  .worker-art svg { width: 84px; height: 84px; }
  .worker-form { padding: 20px; }
  .worker-fields { grid-template-columns: minmax(0, 1fr); }
  .worker-list { grid-template-columns: minmax(0, 1fr); }
  .worker-popup-head { padding: 16px 18px; }
  .worker-popup-body { padding: 16px 18px 18px; }
  .worker-popup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worker-popup-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worker-purchases th, .worker-purchases td { padding: 9px 8px; }
  /* Uhrzeit und Stueckpreis stehen hier klein unter Datum und Menge statt in eigenen Spalten. */
  .worker-purchases th:nth-child(2), .worker-purchases td:nth-child(2),
  .worker-purchases th:nth-child(4), .worker-purchases td:nth-child(4) { display: none; }
  .worker-purchases .mobile-note { display: block; }
}

/* Lager */
.warehouse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.warehouse-card,
.warehouse-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(127, 127, 140, .05) 0 2px, transparent 2px 12px),
    var(--surface);
}

.warehouse-card::before,
.warehouse-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: repeating-linear-gradient(-45deg, #f59e0b 0 12px, #17171d 12px 24px);
}

.warehouse-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  padding: 24px 20px 20px;
}

.warehouse-scene {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: linear-gradient(#1b1a24, #131216);
  fill: initial;
  stroke: none;
}

.warehouse-card .warehouse-scene { margin-bottom: 6px; }
.wh-ground { fill: #26262f; }
.wh-roof { fill: #3b3b49; }
.wh-wall { fill: #5a6072; }
.wh-ribs { fill: none; stroke: #4a4f60; stroke-width: 2; }
.wh-sign { fill: #17171d; }
.wh-sign-text { fill: #f59e0b; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.wh-bay { fill: #101014; }
.wh-shutter { fill: #7c8496; }
.wh-slats { fill: none; stroke: #5f6678; stroke-width: 2; }
.wh-shelf { fill: #475066; }
.wh-crate { fill: #c98a3c; }
.wh-crate-line { fill: none; stroke: #8f5f27; stroke-width: 1.500; }
.wh-item.eisen { filter: drop-shadow(0 0 3px rgba(236, 72, 153, .7)); }
.wh-item.metall { filter: drop-shadow(0 0 3px rgba(139, 92, 246, .8)); }

.warehouse-tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.warehouse-card h3,
.warehouse-info h3 { font-size: 20px; font-weight: 700; }
.warehouse-capacity { color: var(--muted); font-size: 14px; }
.warehouse-capacity b { color: var(--text); font-size: 30px; font-weight: 700; }

.warehouse-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 32px 28px 28px;
}

.warehouse-info { display: grid; gap: 10px; min-width: 0; }

.warehouse-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

.warehouse-steps i { height: 6px; border-radius: 2px; background: var(--surface-2); }
.warehouse-steps i.done { background: #f59e0b; }
.warehouse-free { color: var(--muted); font-size: 16px; }
.warehouse-free b { color: var(--text); font-size: 34px; font-weight: 700; }
.warehouse-line { color: var(--muted); font-size: 14px; }
.warehouse-other { display: grid; gap: 6px; margin-top: 8px; }
.warehouse-other label { color: var(--muted); font-size: 13px; }

.warehouse-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.warehouse-rent,
.warehouse-cancel {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.warehouse-rent { background: var(--accent); color: #fff; }
.warehouse-rent:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.warehouse-cancel { border: 1px solid var(--danger); color: var(--danger); }
.warehouse-cancel:hover { background: var(--danger); color: #101014; }

.warehouse-picker { margin-top: 28px; }

.warehouse-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.warehouse-picker-head .section-label { margin-bottom: 0; }

/* Bestand Eisen und Metall */
.stock-panel {
  display: grid;
  gap: 18px;
  margin-top: 16px;
  padding: 24px 28px 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(244, 114, 182, .08), transparent 60%),
    radial-gradient(80% 120% at 100% 0%, rgba(139, 92, 246, .1), transparent 60%),
    var(--surface);
}

.stock-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.stock-panel-head h3 { margin-top: 4px; font-size: 20px; font-weight: 700; }
.stock-total { color: var(--muted); font-size: 14px; }
.stock-total b { color: var(--text); font-size: 22px; font-weight: 700; }

.stock-bar {
  display: flex;
  gap: 2px;
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-2);
}

.stock-bar i { display: block; min-width: 3px; transition: width .3s; }
.stock-bar i:last-child { border-radius: 0 7px 7px 0; }
.stock-bar i:first-child { border-radius: 7px 0 0 7px; }
.stock-bar .eisen, .stock-legend i.eisen { background: #ec4899; }
.stock-bar .metall, .stock-legend i.metall { background: #8b5cf6; }
.stock-bar .andere, .stock-legend i.andere { background: repeating-linear-gradient(-45deg, #f59e0b 0 4px, #8a5a12 4px 8px); }
.stock-bar .frei, .stock-legend i.frei { background: #33333f; }
[data-theme='light'] .stock-bar .eisen, [data-theme='light'] .stock-legend i.eisen { background: #be185d; }
[data-theme='light'] .stock-bar .metall, [data-theme='light'] .stock-legend i.metall { background: #6d3fe0; }
[data-theme='light'] .stock-bar .frei, [data-theme='light'] .stock-legend i.frei { background: #d9d9e2; }

.stock-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 13px; }
.stock-legend span { display: flex; align-items: center; gap: 6px; }
.stock-legend i { width: 12px; height: 12px; border-radius: 3px; }
.stock-legend b { color: var(--text); font-weight: 600; }

.stock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.stock-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--status);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--status-soft), transparent 70%), var(--surface);
}

.stock-head { display: flex; align-items: center; gap: 14px; }

.stock-art {
  flex: none;
  width: 64px;
  height: 52px;
  padding: 8px;
  border-radius: 10px;
  background: #0c0c11;
  fill: initial;
  stroke: none;
  filter: drop-shadow(0 0 10px var(--status-soft));
}

.stock-head > div { display: grid; flex: 1; min-width: 0; }
.stock-label { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.stock-head strong { color: var(--status); font-size: 30px; font-weight: 800; line-height: 1.15; }

.stock-share {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--status);
  border-radius: 999px;
  color: var(--status);
  font-size: 13px;
  font-weight: 700;
}

.stock-quick button:hover { border-color: var(--status); color: var(--status); }

.stock-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }

.stock-form input {
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.stock-form input:focus { border-color: var(--status); outline: none; }
.stock-form button { padding: 9px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.stock-add { background: var(--status); color: #101014; }
[data-theme='light'] .stock-add { color: #fff; }
.stock-take { border: 1px solid var(--status); color: var(--status); }
.stock-take:hover { background: var(--status-soft); }
.stock-info { color: var(--full); font-size: 13px; }

@media (max-width: 900px) {
  .warehouse-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 18px 20px; }
  .stock-panel { padding: 20px 18px; }
  .stock-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .stock-form { grid-template-columns: 1fr 1fr; }
  .stock-form input { grid-column: 1 / -1; }
}

/* Verarbeiter */
.svg-defs { position: absolute; width: 0; height: 0; stroke: none; }
.processor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  gap: 16px;
}

.processor {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.proc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.proc-toolbar { justify-content: flex-end; }

.proc-name { min-width: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.proc-name-form { display: none; margin-bottom: 14px; }
.processor.editing .proc-head { display: none; }
.processor.editing .proc-name-form { display: grid; }

.proc-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.proc-head-main .proc-status { flex: none; }

.proc-sync {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.proc-sync svg { width: 15px; height: 15px; }
.proc-sync:hover { border-color: var(--accent); color: var(--text); }

.proc-sync-form {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.processor.syncing .proc-sync-form { display: grid; }
.processor.syncing .proc-controls,
.processor.syncing .proc-quick { display: none; }

.source-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.source-dialog::backdrop { background: rgba(5, 5, 9, .7); }

.source-form { display: grid; gap: 12px; padding: 20px; }

.source-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.source-head h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.source-processor { margin-top: -8px; color: var(--muted); font-size: 13px; }
.source-list { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }

.source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.source-row:has(:checked) { border-color: var(--accent); }

.source-row label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.source-row label input { flex: none; accent-color: var(--accent); }
.source-row label span { min-width: 0; }
.source-row b, .source-row small { display: block; overflow-wrap: anywhere; }
.source-row b { font-size: 14px; }
.source-row small { color: var(--muted); font-size: 11px; }
.source-row .status-badge { flex: none; }
.status-badge.lager { --status: var(--accent-soft); --status-soft: rgba(139, 92, 246, .14); }
.source-warehouse { background: linear-gradient(120deg, rgba(139, 92, 246, .1), transparent 70%); }

.source-row > input {
  flex: none;
  width: 76px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.source-empty {
  padding: 18px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

/* Auf schmalen Bildschirmen steht der Name oben, Abzeichen und Menge darunter. */
@media (max-width: 560px) {
  .source-row { flex-wrap: wrap; }
  .source-row label { flex-basis: 100%; }
  .source-row > input { margin-left: auto; }
}

.source-summary { color: var(--muted); font-size: 13px; }
.source-form .name-save:disabled { opacity: .45; cursor: not-allowed; }
.proc-info { margin-top: 10px; color: var(--full); font-size: 13px; text-align: center; }

.proc-quick { grid-template-columns: repeat(5, 1fr); margin-top: 14px; }
.proc-quick + .proc-controls { margin-top: 8px; }

.proc-sync-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.proc-sync-form input {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.proc-sync-form .name-actions { grid-column: 1 / -1; }

.proc-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.proc-delete {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
}

.proc-delete:hover { background: var(--danger); color: #101014; }

.proc-status {
  padding: 2px 12px;
  border: 1px solid var(--empty);
  border-radius: 999px;
  background: var(--empty-soft);
  color: var(--empty);
  font-size: 13px;
  font-weight: 700;
}

.processor.running .proc-status {
  border-color: var(--full);
  background: var(--full-soft);
  color: var(--full);
}

.proc-body { display: grid; gap: 14px; }

/* Die Szene bleibt in beiden Themes dunkel, wie die Fahrzeugbilder. */
.proc-stage {
  padding: 8px 8px 10px;
  border-radius: 8px;
  background: #131216;
  contain: paint;
}

.factory { display: block; border-radius: 6px; width: 100%; height: auto; stroke: none; }

.proc-recipe {
  margin-top: 6px;
  color: #a3a3ae;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.proc-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.proc-gauge {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.proc-icon { width: 46px; height: 26px; stroke: none; }
.proc-gauge strong { font-size: 15px; font-weight: 700; }
.proc-gauge small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.proc-ring { position: relative; width: min(100%, 128px); margin-top: 2px; }

.proc-ring svg {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
  stroke-linecap: butt;
}

.proc-ring circle { fill: none; stroke-width: 15; }
.ring-track { stroke: var(--surface-2); }
.ring-value { stroke: var(--status); stroke-dasharray: 0 100; transition: stroke-dasharray .4s; }

.proc-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
}

.proc-progress {
  height: 8px;
  margin-top: 16px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.proc-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--pink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s linear;
}

.proc-next { margin-top: 10px; color: var(--muted); text-align: center; }
.proc-full { margin-top: 2px; color: var(--accent-soft); font-size: 14px; font-weight: 600; text-align: center; }
.proc-next b { color: var(--text); }

.proc-controls {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) auto auto;
  gap: 8px;
  margin-top: 14px;
}

.proc-controls input {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.proc-controls button {
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.proc-add { background: #be185d; }
.proc-collect { background: #6d3fe0; }
/* Reserviert die Zeile dauerhaft, damit alle Kacheln gleich hoch bleiben. */
.proc-messages { display: flow-root; min-height: 30px; }
.processor .cargo-error { margin-top: 10px; text-align: center; }

/* Nur transform und opacity: spart Neuberechnungen. Alle Teile teilen sich den 5-s-Takt. */
.factory .anim { animation-play-state: paused; }
.processor.running.in-view .factory .anim { animation-play-state: running; }
.processor:not(.running) .item,
.processor:not(.running) .smoke,
.processor:not(.running) .spark,
.processor:not(.running) .furnace-fire { visibility: hidden; }

.belt-marks { animation: belt 1s linear infinite; }
.gear { transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
.furnace-fire { animation: fire 1.100s steps(5) infinite alternate; }
.smoke { fill: #8d8b99; opacity: 0; animation: smoke 4.500s linear infinite; }
.smoke-2 { animation-delay: -1.500s; }
.smoke-3 { animation-delay: -3s; }
.lamp { fill: #6f6f7c; }
.processor.running .lamp { fill: #34d399; }
.item { opacity: 0; }
.item-iron { animation: item-iron 5s linear infinite; }
.item-billet { animation: item-billet 5s linear infinite; }
.item-steel { animation: item-steel 5s linear infinite; }
.press { animation: press 5s ease-in infinite; }
.spark { opacity: 0; animation: spark 5s linear infinite; --spark-x: -14px; }

@keyframes belt { to { transform: translateX(20px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fire { from { opacity: .7; } to { opacity: 1; } }

@keyframes smoke {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  20% { opacity: .3; }
  100% { transform: translate(12px, -28px) scale(1.400); opacity: 0; }
}

@keyframes item-iron {
  0% { transform: translate(-40px, 148px); opacity: 1; }
  36% { transform: translate(112px, 148px); opacity: 1; }
  37%, 100% { transform: translate(112px, 148px); opacity: 0; }
}

@keyframes item-billet {
  0%, 38% { transform: translate(214px, 159px); opacity: 0; }
  39% { transform: translate(214px, 159px); opacity: 1; }
  54%, 61% { transform: translate(266px, 159px); opacity: 1; }
  62%, 100% { transform: translate(266px, 159px); opacity: 0; }
}

@keyframes item-steel {
  0%, 60% { transform: translate(264px, 150px); opacity: 0; }
  61%, 66% { transform: translate(264px, 150px); opacity: 1; }
  100% { transform: translate(410px, 150px); opacity: 1; }
}

@keyframes press {
  0%, 50% { transform: translateY(0); }
  58%, 62% { transform: translateY(41px); }
  78%, 100% { transform: translateY(0); }
}

@keyframes spark {
  0%, 57% { transform: translate(0, 0); opacity: 0; }
  58% { transform: translate(0, 0); opacity: 1; }
  68%, 100% { transform: translate(var(--spark-x), var(--spark-y, -18px)); opacity: 0; }
}

/* Zusatzeffekte im selben 5-s-Takt, der Kran braucht zwei Takte. */
.processor:not(.running) .fx { visibility: hidden; }
.factory-shake { animation: shake 5s linear infinite; }
.floor-glow { animation: fire 1.100s steps(5) infinite alternate; }
.press-flash { opacity: 0; animation: flash 5s linear infinite; }
.crane { animation: crane 10s ease-in-out infinite; }
.crane-load { animation: crane-load 10s linear infinite; }
.ore-drop { opacity: 0; animation: ore-drop 10s ease-in infinite; }
.ember { opacity: 0; animation: ember 2.200s linear infinite; }
.ember-2 { animation-delay: -1.100s; --ember-x: -10px; }
.led { animation: led 1.500s steps(2) infinite; }
.led-2 { animation-delay: -.5s; }
.led-3 { animation-delay: -1s; }
.arm-upper, .arm-fore { transform-box: view-box; }
.arm-upper { transform-origin: 352px 158px; animation: arm-upper 5s ease-in-out infinite; }
.arm-fore { transform-origin: 352px 118px; animation: arm-fore 5s ease-in-out infinite; }
.hot-overlay { animation: hot-overlay 5s linear infinite; }
.steam { fill: #cbd5e1; opacity: 0; animation: steam 5s linear infinite; }
.steam-2 { --steam-x: 16px; }
.weld-flash { opacity: 0; animation: weld 5s steps(1) infinite; }
.weld-spark { opacity: 0; animation: weld-spark .4s linear infinite; --weld-x: -9px; }
.weld-spark-2 { animation-delay: -.2s; --weld-x: 8px; }
.processor.running.in-view .weld-spark { animation-name: weld-spark; }
.shock { transform-box: fill-box; transform-origin: center; opacity: 0; animation: shock 5s ease-out infinite; }
.beacon-beam { transform-box: view-box; transform-origin: 284px 52px; animation: spin 2s linear infinite; }
.beacon-light { animation: led 1s steps(2) infinite; }
.spark-2 { --spark-x: 14px; --spark-y: -20px; }
.spark-3 { --spark-x: 3px; --spark-y: -26px; }
.spark-4 { --spark-x: -24px; --spark-y: -8px; }
.spark-5 { --spark-x: 26px; --spark-y: -10px; }
.spark-6 { --spark-x: -8px; --spark-y: -30px; }
.spark-7 { --spark-x: 9px; --spark-y: -32px; }

@keyframes shake {
  0%, 57.900%, 63%, 100% { transform: translate(0, 0); }
  58.300% { transform: translate(1.500px, 2.500px); }
  59% { transform: translate(-1.500px, -1.500px); }
  60% { transform: translate(1px, 1px); }
  61% { transform: translate(-.5px, 0); }
}

@keyframes flash {
  0%, 57% { opacity: 0; }
  58% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

@keyframes crane {
  0%, 6% { transform: translateX(30px); }
  36%, 52% { transform: translateX(139px); }
  90%, 100% { transform: translateX(30px); }
}

@keyframes crane-load {
  0%, 41.900% { opacity: 1; }
  42%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes ore-drop {
  0%, 41.900% { transform: translateY(0); opacity: 0; }
  42% { transform: translateY(0); opacity: 1; }
  48% { transform: translateY(16px); opacity: 1; }
  50%, 100% { transform: translateY(20px); opacity: 0; }
}

@keyframes ember {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--ember-x, 12px), -34px); opacity: 0; }
}

@keyframes led { 50% { opacity: .2; } }

@keyframes arm-upper {
  0%, 62%, 90%, 100% { transform: rotate(16deg); }
  70%, 80% { transform: rotate(0); }
}

@keyframes arm-fore {
  0%, 62%, 90%, 100% { transform: rotate(-24deg); }
  70%, 80% { transform: rotate(0); }
}

@keyframes hot-overlay {
  0%, 62% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

@keyframes steam {
  0%, 64% { transform: translate(0, 0) scale(.6); opacity: 0; }
  68% { opacity: .35; }
  84%, 100% { transform: translate(var(--steam-x, 6px), -28px) scale(1.700); opacity: 0; }
}

@keyframes weld {
  0%, 70% { opacity: 0; }
  71% { opacity: 1; }
  72% { opacity: .3; }
  73.500% { opacity: 1; }
  75% { opacity: .5; }
  76.500% { opacity: 1; }
  78% { opacity: .4; }
  79%, 100% { opacity: 0; }
}

@keyframes weld-spark {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--weld-x), 12px); opacity: 0; }
}

@keyframes shock {
  0%, 57.500% { transform: scale(.3); opacity: 0; }
  58% { opacity: .9; }
  72%, 100% { transform: scale(1.700); opacity: 0; }
}

.scrim { display: none; }

@media (max-width: 1100px) {
  .quick-card, .quick-card.large { grid-column: span 6; }
  .vehicle-layout { grid-template-columns: minmax(0, 1fr); }
  .vehicle-detail { position: static; order: -1; }
}

@media (max-width: 860px) {
  .sidebar { width: 256px; transform: translateX(calc(-100% - 2 * var(--sidebar-gap))); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .sidebar-toggle { display: none; }
  .main { margin-left: 0; }
  .menu-button { display: block; }

  .scrim.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(0, 0, 0, .55);
  }

  .hero-content { padding-top: 76px; }
  .clock { top: 20px; }
  .hero-text br { display: none; }
}

@media (max-width: 560px) {
  .proc-controls { grid-template-columns: 1fr 1fr; }
  .proc-controls input { grid-column: 1 / -1; }
  .quick-card, .quick-card.large { grid-column: span 12; min-height: 150px; }
  .stat-grid, .vehicle-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .factory .anim { animation: none !important; }
}