/* ==========================================================================
   EA-Verwaltung – Design-System (einheitlich, modern, Dark/Light)
   ========================================================================== */

/* ---------- Toast Notifications ---------- */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 400px;
  word-wrap: break-word;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-success {
  background-color: #10b981;
  color: white;
}

.toast-error {
  background-color: #ef4444;
  color: white;
}

[data-theme="dark"] .toast-success {
  background-color: #059669;
}

[data-theme="dark"] .toast-error {
  background-color: #dc2626;
}

/* ---------- Basis & Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { 
  font-size: 16px; 
  scroll-behavior: smooth;
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
/* Globale Scrollbars passend zum Design (Variablen in :root / [data-theme=dark]) */
body::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.dashboard-day-modal-inner::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.dashboard-day-modal-inner::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 5px;
}
body::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.dashboard-day-modal-inner::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
}
body::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.dashboard-day-modal-inner::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
body, .main-content {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ---------- Light Mode (Standard) ---------- */
:root {
  --font-sans: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
  --transition: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Light */
  --bg-page: #f5f5f7;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f0f0f2;
  --bg-elevated: #ffffff;
  --border-subtle: #e5e5e7;
  --border-strong: #d1d1d6;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-muted: #e8f2fc;
  --success: #34c759;
  --warning: #ff9500;
  --error: #ff3b30;
  --scrollbar-track: #e8e8ed;
  --scrollbar-thumb: #c5c5ca;
  --scrollbar-thumb-hover: #a1a1a6;
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
  --bg-page: #0d0d0f;
  --bg-surface: #1c1c1e;
  --bg-surface-hover: #2c2c2e;
  --bg-elevated: #2c2c2e;
  --border-subtle: #38383a;
  --border-strong: #48484a;
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #6e6e73;
  --accent: #0a84ff;
  --accent-hover: #409cff;
  --accent-muted: #1e3a5f;
  --success: #30d158;
  --warning: #ff9f0a;
  --error: #ff453a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.6);
  --scrollbar-track: #2c2c2e;
  --scrollbar-thumb: #48484a;
  --scrollbar-thumb-hover: #636366;
}

/* ---------- Layout ---------- */
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.main-content {
  flex: 1;
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  gap: var(--space-4);
}
#page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- Sidebar / Nav ---------- */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-hover) 100%);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}
.sidebar-brand {
  padding: 0 var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0 var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.3s;
}
.nav-link:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.nav-link.active {
  background: linear-gradient(90deg, var(--accent-muted) 0%, transparent 100%);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.15);
}
.nav-link.active::before {
  transform: scaleY(1);
}

/* Navigation-Gruppen (Untermenü) */
.nav-group {
  margin: 0;
}
.nav-group-toggle {
  cursor: pointer;
  justify-content: space-between;
}
.nav-arrow {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  opacity: 0.9;
  transition: transform var(--transition);
  transform-origin: center;
}
.nav-group-toggle:hover .nav-arrow {
  color: var(--text-primary);
  opacity: 1;
}
.nav-group.open > .nav-group-toggle .nav-arrow {
  transform: rotate(180deg);
}
.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
  margin-left: var(--space-4);
}
.nav-group.open > .nav-submenu {
  max-height: 500px;
}
.nav-submenu .nav-group {
  margin-left: 0;
}
.nav-submenu-link {
  padding-left: var(--space-6);
  font-size: var(--text-xs);
}
.nav-submenu .nav-group-toggle {
  padding-left: var(--space-6);
  font-size: var(--text-xs);
}
.nav-submenu .nav-group-toggle .nav-arrow {
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.85;
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: var(--error);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: auto;
  margin-right: var(--space-2);
}
.projektzettel-geloescht-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  transition: all 0.3s;
  max-height: 25vh;
  overflow-y: auto;
}
.projektzettel-geloescht-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.projektzettel-geloescht-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
  gap: var(--space-2);
}
.projektzettel-geloescht-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}
.projektzettel-geloescht-id {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.projektzettel-geloescht-datum {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.projektzettel-geloescht-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.projektzettel-geloescht-project {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.projektzettel-geloescht-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.projektzettel-geloescht-details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
}
.projektzettel-geloescht-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
}
.projektzettel-geloescht-detail-label {
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.projektzettel-geloescht-detail-value {
  color: var(--text-primary);
  flex-shrink: 0;
}
.projektzettel-geloescht-stats {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.projektzettel-geloescht-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.projektzettel-geloescht-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.projektzettel-geloescht-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.projektzettel-geloescht-section-icon {
  font-size: var(--text-xs);
  opacity: 0.8;
}
.projektzettel-geloescht-section-title {
  flex: 1;
}
.projektzettel-geloescht-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 0;
}
.projektzettel-geloescht-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1);
  background: var(--bg-surface-hover);
  border-radius: var(--radius-xs);
  border-left: 1px solid var(--accent);
  transition: all 0.2s ease;
  font-size: var(--text-xs);
}
.projektzettel-geloescht-list-item:hover {
  background: var(--bg-surface);
}
.projektzettel-geloescht-list-item-icon {
  font-size: var(--text-xs);
  opacity: 0.7;
  flex-shrink: 0;
}
.projektzettel-geloescht-list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}
.projektzettel-geloescht-list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
}
.projektzettel-geloescht-list-item-title {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projektzettel-geloescht-list-item-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.projektzettel-geloescht-list-item-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.2;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projektzettel-geloescht-list-empty {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
  padding: 2px var(--space-1);
  text-align: center;
  opacity: 0.5;
}
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* ---------- Top Bar ---------- */
.topbar {
  height: 64px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-hover) 100%);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  position: relative;
}
.topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}
.topbar-title { 
  font-size: var(--text-xl); 
  font-weight: 700; 
  color: var(--text-primary);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.theme-toggle {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-surface-hover);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.theme-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--accent-muted);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.theme-toggle:hover::before {
  width: 100%;
  height: 100%;
}
.theme-toggle:hover { 
  background: var(--accent); 
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.theme-toggle > * {
  position: relative;
  z-index: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}
.btn-primary:hover { 
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.4);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}
.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 2px solid var(--border-subtle);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover { 
  background: var(--bg-surface-hover);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.btn-secondary:active {
  transform: translateY(0);
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.btn-ghost:hover { 
  background: var(--bg-surface-hover); 
  color: var(--text-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.btn > * {
  position: relative;
  z-index: 1;
}

/* ---------- Form ---------- */
.input-group { margin-bottom: var(--space-4); }
.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.input, select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.input:hover, select:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.input::placeholder { color: var(--text-tertiary); }
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6e73' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
}
select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--bg-subtle);
  border-color: var(--border-subtle);
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* ---------- Card ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::before {
  opacity: 1;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
#page-content > .card {
  margin-top: var(--space-4);
}

/* ---------- Login ---------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--bg-page);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
}
.login-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}
.login-subtitle {
  margin: 0 0 var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}
.login-form .btn-primary { width: 100%; padding: var(--space-3); margin-top: var(--space-2); }

/* ---------- Page Head ---------- */
.page-head {
  margin-bottom: var(--space-4);
  flex-shrink: 0;
  min-height: fit-content;
}
.page-title { font-size: var(--text-2xl); font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-1); }
.page-desc { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

/* ---------- Dashboard Kalender ---------- */
#dashboard-calendar {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dashboard-calendar-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dashboard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
  min-height: fit-content;
}
.dashboard-month-title { font-size: var(--text-xl); font-weight: 600; color: var(--text-primary); }
.dashboard-calendar {
  display: grid;
  grid-template-columns: auto repeat(7, 1fr);
  gap: 2px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.dashboard-day-header {
  padding: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-hover);
  text-align: center;
}
.dashboard-week-header {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-hover);
  text-align: center;
}
.dashboard-week-cell {
  padding: var(--space-1);
  background: var(--bg-surface-hover);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-week-cell.other-month {
  background: var(--bg-surface);
  color: var(--text-tertiary);
}
.dashboard-day {
  padding: 5px 5px;
  background: var(--bg-surface);
  font-size: clamp(0.7rem, 1.2vh, 0.875rem);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
}
.dashboard-day:hover { 
  background: var(--bg-surface-hover); 
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dashboard-day.other-month { color: var(--text-tertiary); }
.dashboard-day-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3px;
  flex-shrink: 0;
}
.dashboard-day-num { 
  font-weight: 700; 
  font-size: clamp(0.875rem, 2vh, 1.125rem);
  line-height: 1.2;
  flex-shrink: 0;
}
.dashboard-day-warning {
  font-size: clamp(0.75rem, 1.5vh, 0.95rem);
  color: #ff6b35;
  cursor: help;
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px;
  transition: transform 0.2s ease;
}
.dashboard-day-warning:hover {
  transform: scale(1.2);
}
[data-theme="dark"] .dashboard-day-warning {
  color: #ff8c5a;
}
.dashboard-day-status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  margin-top: auto;
  flex-shrink: 0;
}
.dashboard-day-status-icon {
  font-size: clamp(0.85rem, 1.6vh, 1.1rem);
  line-height: 1;
  flex-shrink: 0;
}
.dashboard-day-status-text {
  font-weight: 600;
  font-size: clamp(0.65rem, 1.2vh, 0.8rem);
  color: var(--text-primary);
  line-height: 1.2;
}
.dashboard-day-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.dashboard-day-info-item {
  display: grid;
  grid-template-columns: 20% 40% 40%;
  align-items: center;
  width: 100%;
  font-size: clamp(0.6rem, 1.1vh, 0.75rem);
  line-height: 1.2;
  flex-shrink: 0;
}
.dashboard-day-icon {
  font-size: clamp(0.7rem, 1.3vh, 0.9rem);
  line-height: 1;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  grid-column: 1;
}
.dashboard-day-label {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: inherit;
  text-align: left;
  grid-column: 2;
  width: 100%;
}
.dashboard-day-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: left;
  font-size: inherit;
  white-space: nowrap;
  grid-column: 3;
  width: 100%;
}
[data-theme="dark"] .dashboard-day-status {
  background: rgba(255, 255, 255, 0.05);
}
.dashboard-day.day-erfasst { background: #e3f2fd; }
.dashboard-day.day-vollstaendig { background: #e8f5e9; }
.dashboard-day.day-leer { background: #fff8e1; }
.dashboard-day.day-krank { background: #ffebee; }
.dashboard-day.day-urlaub { background: #e0f7fa; }
.dashboard-day.day-verwaltung { background: #efebe9; } /* Braune Farbe für andere Verwaltungseinträge */
[data-theme="dark"] .dashboard-day.day-erfasst { background: #1e3a5f; }
[data-theme="dark"] .dashboard-day.day-vollstaendig { background: #1b3d1f; }
[data-theme="dark"] .dashboard-day.day-leer { background: #3d3500; }
[data-theme="dark"] .dashboard-day.day-krank { background: #5c1a1a; }
[data-theme="dark"] .dashboard-day.day-urlaub { background: #0d3d45; }
[data-theme="dark"] .dashboard-day.day-verwaltung { background: #3d2f1f; } /* Braune Farbe für andere Verwaltungseinträge (Dark Mode) */
.dashboard-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-surface);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  justify-content: center;
  min-height: fit-content;
}
.dashboard-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.dashboard-legend-color {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.dashboard-legend-color.day-leer { background: #fff8e1; }
.dashboard-legend-color.day-erfasst { background: #e3f2fd; }
.dashboard-legend-color.day-vollstaendig { background: #e8f5e9; }
.dashboard-legend-color.day-urlaub { background: #e0f7fa; }
.dashboard-legend-color.day-krank { background: #ffebee; }
.dashboard-legend-color.day-verwaltung { background: #efebe9; }
[data-theme="dark"] .dashboard-legend-color.day-leer { background: #3d3500; }
[data-theme="dark"] .dashboard-legend-color.day-erfasst { background: #1e3a5f; }
[data-theme="dark"] .dashboard-legend-color.day-vollstaendig { background: #1b3d1f; }
[data-theme="dark"] .dashboard-legend-color.day-urlaub { background: #0d3d45; }
[data-theme="dark"] .dashboard-legend-color.day-krank { background: #5c1a1a; }
[data-theme="dark"] .dashboard-legend-color.day-verwaltung { background: #3d2f1f; }
.dashboard-day-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.dashboard-day-modal-inner {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}
.dashboard-day-modal-inner.pz-form-modal {
  max-width: min(1120px, 92vw) !important;
  width: 92% !important;
  max-height: 88vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.dashboard-day-modal-inner.pz-form-modal .pz-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  flex: 1;
  overflow: visible;
  width: 100%;
}
.pz-form-title { margin: 0 0 var(--space-2); font-size: var(--text-xl); flex-shrink: 0; }

/* Neues Projektzettel-Layout: erste Zeile – Projekt breiter, Datum/Startzeit/Fahrt/Pause gleich groß in einer Reihe */
/* Projekt = restlicher Platz; Datum & Startzeit einheitlich größer; Fahrt & Pause einheitlich kleiner */
.pz-form-neu .pz-form-head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 9rem) minmax(0, 9rem) minmax(0, 4.5rem) minmax(0, 4.5rem);
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
  width: 100%;
  grid-auto-flow: row;
}
.pz-form-neu .pz-head-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.pz-form-neu .pz-head-cell .input,
.pz-form-neu .pz-head-cell select.input {
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  box-sizing: border-box;
}

.pz-form-neu .pz-head-cell .pz-projekt-dropdown,
.pz-form-neu .pz-head-cell .pz-startzeit-dropdown {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pz-form-neu .pz-head-cell .input,
.pz-form-neu .pz-head-cell select.input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
}

/* Anpassung für time- und number-Inputs im Projektzettel-Formular */
.pz-form-neu .pz-head-cell input[type="time"],
.pz-form-neu .pz-head-cell input[type="number"] {
  text-align: left;
  font-family: var(--font-sans);
}

/* Number-Input Spinner - transparent, rechts am Rand, vertikal zentriert */
.pz-form-neu .pz-head-cell input[type="number"] {
  -moz-appearance: textfield;
  padding-right: 1.75rem;
  position: relative;
}

.pz-form-neu .pz-head-cell input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 0.6;
  height: 1.25rem;
  width: 0.875rem;
  cursor: pointer;
  transition: opacity var(--transition);
  background: transparent;
  background-image: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.pz-form-neu .pz-head-cell input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}

.pz-form-neu .pz-head-cell input[type="number"]::-webkit-inner-spin-button:hover {
  opacity: 1;
}

[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="number"]::-webkit-inner-spin-button {
  filter: invert(1);
  background: transparent;
  background-image: none;
}

/* Startzeit-Dropdown - ähnlich wie Projekt-Dropdown */
.pz-form-neu .pz-head-cell .pz-startzeit-dropdown {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pz-form-neu .pz-head-cell .pz-startzeit-trigger {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  padding-right: 2rem;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  appearance: none;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.pz-form-neu .pz-head-cell .pz-startzeit-trigger:hover {
  border-color: var(--accent);
}

.pz-form-neu .pz-head-cell .pz-startzeit-trigger::after {
  content: "▼";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.pz-startzeit-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 100;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 220px;
  box-sizing: border-box;
  width: 100%;
}

.pz-startzeit-dropdown-panel[hidden] {
  display: none;
}

.pz-startzeit-dropdown-panel[hidden] {
  display: none;
}

.pz-startzeit-picker {
  display: flex;
  gap: var(--space-2);
  max-height: 200px;
}

.pz-startzeit-hours,
.pz-startzeit-minutes {
  flex: 1;
  overflow-y: auto;
}

.pz-startzeit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pz-startzeit-list li {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--text-primary);
  transition: background-color var(--transition);
}

.pz-startzeit-list li:hover {
  background: var(--bg-surface-hover);
}

.pz-startzeit-list li.selected {
  background: var(--accent);
  color: white;
}

/* Time-Input native UI anpassen - Icon besser integrieren */
.pz-form-neu .pz-head-cell input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  color: var(--text-primary);
  background-color: var(--bg-surface);
}

[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"] {
  color: var(--text-primary);
  background-color: var(--bg-surface);
}

.pz-form-neu .pz-head-cell input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(0);
  transition: opacity var(--transition), filter var(--transition);
  background-color: transparent;
  padding: 0;
  margin-left: var(--space-2);
}

[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
}

.pz-form-neu .pz-head-cell input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Time-Picker-Panel (native Browser-Panel) - soweit möglich anpassen */
.pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit {
  color: var(--text-primary);
}

[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit {
  color: var(--text-primary);
}

.pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text-primary);
}

[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text-primary);
}

.pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-text {
  color: var(--text-secondary);
  padding: 0 var(--space-1);
}

[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-text {
  color: var(--text-secondary);
}

.pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-hour-field,
.pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-minute-field {
  color: var(--text-primary);
  padding: 0 var(--space-1);
}

[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-hour-field,
[data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"]::-webkit-datetime-edit-minute-field {
  color: var(--text-primary);
}

/* Time-Picker-Dropdown Dark Mode - leider sehr begrenzt möglich */
/* Das native Dropdown kann nicht direkt gestylt werden, aber wir können versuchen, es zu beeinflussen */
@supports (-webkit-appearance: none) {
  .pz-form-neu .pz-head-cell input[type="time"]::-webkit-calendar-picker-indicator {
    background-color: transparent;
  }
  
  [data-theme="dark"] .pz-form-neu .pz-head-cell input[type="time"] {
    color-scheme: dark;
  }
}

/* Fokus-Styles für time und number Inputs */
.pz-form-neu .pz-head-cell input[type="time"]:focus,
.pz-form-neu .pz-head-cell input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
.pz-form-neu .pz-head-projekt { min-width: 0; }
/* Projekt-Dropdown mit Suchfeld */
.pz-form-neu .pz-head-cell .pz-projekt-dropdown {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pz-projekt-trigger {
  position: relative;
  width: 100%;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  padding-right: 2rem;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  appearance: none;
  box-sizing: border-box;
}
.pz-projekt-trigger:hover {
  border-color: var(--accent);
}
.pz-projekt-trigger::after {
  content: "▼";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: var(--text-secondary);
  pointer-events: none;
}
.pz-projekt-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 100;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 220px;
  box-sizing: border-box;
}
.pz-projekt-dropdown-panel[hidden] {
  display: none;
}
.pz-projekt-search {
  flex-shrink: 0;
  width: 100%;
  min-height: 2rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  box-sizing: border-box;
}
.pz-projekt-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.pz-projekt-dropdown-list li {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.pz-projekt-dropdown-list li:hover {
  background: var(--bg-surface-hover);
}

/* Custom Dropdown Styles (für allgemeine Dropdowns außerhalb des Projektzettel-Formulars) */
.custom-dropdown-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.custom-dropdown-trigger {
  position: relative;
  width: 100%;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  padding-right: 2rem;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-dropdown-trigger::after {
  content: "▼";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.custom-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 220px;
  box-sizing: border-box;
  width: 100%;
}

.custom-dropdown-panel[hidden] {
  display: none;
}

.custom-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.custom-dropdown-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.custom-dropdown-item:hover,
.custom-dropdown-item.selected {
  background: var(--bg-surface-hover);
}

.pz-form-neu .input-readably {
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  min-height: 2.25rem;
}
.pz-form-neu .pz-row-beteiligte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  width: 100%;
}
/* Chips-Bereich wächst und bricht Tags in weitere Zeilen um */
.pz-form-neu .pz-row-beteiligte #pz-form-beteiligte-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  align-content: center;
}
/* Exclude-me Checkbox rechts */
.pz-form-neu .pz-row-beteiligte #pz-form-exclude-me-wrap {
  flex-shrink: 0;
  margin-left: auto;
}
/* "+ Mitarbeiter" Button: anders als die Tags (hinzugefügte Mitarbeiter) */
.pz-btn-mitarbeiter-add {
  flex-shrink: 0;
  border: 1px solid var(--accent);
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 500;
}
.pz-btn-mitarbeiter-add:hover {
  background: var(--accent);
  color: #fff;
}
.pz-tags-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.pz-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface-hover);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
}
.pz-tag-remove {
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.pz-tag-remove:hover { color: var(--accent); }
.pz-tag-with-exclude {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pz-exclude-me-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.pz-exclude-me-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.pz-exclude-me-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}
.pz-form-neu .pz-kachel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  overflow: hidden;
  width: 100%;
  margin-top: var(--space-4);
}
.pz-kachel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-surface-hover);
  border-bottom: 1px solid var(--border-subtle);
}
.pz-kachel-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pz-kachel-add {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-lg);
  line-height: 1;
}
.pz-kachel-body {
  padding: var(--space-2) var(--space-4);
}

/* Maximal 5 Einträge sichtbar, dann scrollbar */
.pz-kachel-body.pz-liste-lesbar,
.pz-kachel-body.pz-liste-artikel {
  max-height: calc(5 * 2.5rem + var(--space-2) * 2);
  overflow-y: auto;
  overflow-x: hidden;
}
.pz-kachel-body .pz-liste-eintrag:first-child {
  margin-top: 0;
}
.pz-fahrt-pause-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pz-fahrt-pause-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-width: 2.5rem;
}
.pz-fahrt-pause-input {
  width: 52px;
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-base);
  min-height: 2.25rem;
  box-sizing: border-box;
}
.pz-liste-lesbar, .pz-liste-artikel {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pz-liste-eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  min-height: 2.5rem;
}
.pz-liste-eintrag:nth-child(odd) {
  background: var(--bg-surface);
}
.pz-liste-eintrag:nth-child(even) {
  background: var(--bg-surface-hover);
}
.pz-liste-eintrag:last-child { border-bottom: none; }
.pz-liste-eintrag-dauer {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 3.5rem;
  font-size: var(--text-sm);
}
.pz-liste-eintrag-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  color: var(--text-primary);
}
.pz-liste-btn { flex-shrink: 0; }
.pz-liste-artikel-eintrag .pz-artikel-menge {
  width: 72px;
  padding: var(--space-1) var(--space-2);
  padding-right: 1.75rem;
  font-size: var(--text-base);
  -moz-appearance: textfield;
  position: relative;
}

.pz-liste-artikel-eintrag .pz-artikel-menge::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 0.6;
  height: 1.25rem;
  width: 0.875rem;
  cursor: pointer;
  transition: opacity var(--transition);
  background: transparent;
  background-image: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.pz-liste-artikel-eintrag .pz-artikel-menge::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}

.pz-liste-artikel-eintrag .pz-artikel-menge::-webkit-inner-spin-button:hover {
  opacity: 1;
}

[data-theme="dark"] .pz-liste-artikel-eintrag .pz-artikel-menge::-webkit-inner-spin-button {
  filter: invert(1);
  background: transparent;
  background-image: none;
}

/* Modal Stunden-Feld Spinner */
#pz-modal-stunden {
  -moz-appearance: textfield;
  padding-right: 1.75rem;
  position: relative;
}

#pz-modal-stunden::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 0.6;
  height: 1.25rem;
  width: 0.875rem;
  cursor: pointer;
  transition: opacity var(--transition);
  background: transparent;
  background-image: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

#pz-modal-stunden::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}

#pz-modal-stunden::-webkit-inner-spin-button:hover {
  opacity: 1;
}

[data-theme="dark"] #pz-modal-stunden::-webkit-inner-spin-button {
  filter: invert(1);
  background: transparent;
  background-image: none;
}

.pz-form-neu .pz-form-actions-centered {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  width: 100%;
}
.pz-popup-inner.pz-popup-arbeitszeiten {
  max-width: 480px;
  width: 92%;
}
.pz-modal-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.pz-popup-arbeitszeiten .pz-popup-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  justify-content: flex-end;
}

.pz-form-compact .pz-form-head {
  display: grid;
  grid-template-columns: 1fr 140px 100px;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.pz-form-compact .pz-form-row-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-5);
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.pz-form-col-left, .pz-form-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.pz-form-col-left { min-width: 300px; flex: 1.15; }
.pz-form-col-right { min-width: 280px; flex: 1; }
.pz-form-section-arbeitszeiten { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
.pz-form-section-arbeitszeiten .pz-form-arbeitszeiten { flex: 1; min-height: 0; }
.pz-form-section-compact {
  padding: var(--space-4);
  margin-bottom: 0;
  min-height: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.pz-form-section-compact .pz-form-section-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.pz-form-section-compact .input-group { margin-bottom: var(--space-2); }
.pz-form-section-compact .input-group:last-of-type { margin-bottom: 0; }
/* Arbeitszeiten: Stunden schmal, Tätigkeit breit und lesbar */
.pz-form-arbeitszeiten .pz-form-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}
.pz-form-arbeitszeiten .pz-form-row input.pz-arbeits-stunden {
  width: 100%;
  min-width: 0;
  font-size: var(--text-base);
}
.pz-form-arbeitszeiten .pz-form-row input.pz-arbeits-freitext {
  min-width: 200px;
  font-size: var(--text-base);
}
.pz-form-fahrt-pause {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pz-form-fahrt-pause .input-group { margin-bottom: 0; min-width: 80px; }
.pz-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-shrink: 0; }
.pz-form-error { margin: 0; font-size: var(--text-sm); color: var(--error); flex-shrink: 0; }
/* Chip-Listen: volle Breite, lesbar, eigene Scrollbars */
.pz-form-section-compact .pz-chip-list {
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: var(--space-2);
  padding-right: var(--space-1);
  scrollbar-gutter: stable;
}
.pz-form-section-compact .pz-chip-list.pz-chip-list-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.pz-form-section-compact .pz-chip-list.pz-chip-list-scroll::-webkit-scrollbar {
  width: 8px;
}
.pz-form-section-compact .pz-chip-list.pz-chip-list-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}
.pz-form-section-compact .pz-chip-list.pz-chip-list-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
.pz-form-section-compact .pz-chip-list.pz-chip-list-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
@media (max-width: 700px) {
  .pz-form-compact .pz-form-head { grid-template-columns: 1fr 1fr; }
  .pz-form-compact .pz-form-row-cols { grid-template-columns: 1fr; }
  .pz-form-col-left, .pz-form-col-right { min-width: 0; }
}
.dashboard-day-modal-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--border-subtle);
}
.dashboard-day-modal-title { 
  margin: 0 0 var(--space-1); 
  font-size: var(--text-2xl); 
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dashboard-day-modal-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}
.dashboard-day-list-wrapper {
  margin-bottom: var(--space-6);
  max-height: 50vh;
  overflow-y: auto;
  padding-right: var(--space-2);
}
.dashboard-day-list { 
  list-style: none; 
  padding: 0; 
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
}
@media (min-width: 600px) {
  .dashboard-day-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
.dashboard-day-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
  grid-column: 1 / -1;
}
.dashboard-day-empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}
.dashboard-day-empty-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.dashboard-day-empty-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.dashboard-pz-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dashboard-pz-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transform: scaleX(0);
  transition: transform 0.3s;
}
.dashboard-pz-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.dashboard-pz-card:hover::before {
  transform: scaleX(1);
}
.dashboard-pz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}
.dashboard-pz-card-time {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.dashboard-pz-card-time-icon {
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.dashboard-pz-card-time-value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dashboard-pz-card-id {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  background: var(--bg-surface-hover);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.dashboard-pz-card-action-btn,
.dashboard-pz-card-delete {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  opacity: 0.5;
  transition: all 0.2s ease;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.dashboard-pz-card-action-btn:hover,
.dashboard-pz-card-delete:hover {
  opacity: 1;
  background: var(--bg-surface-hover);
  transform: scale(1.1);
}
.dashboard-pz-card:hover .dashboard-pz-card-action-btn,
.dashboard-pz-card:hover .dashboard-pz-card-delete {
  opacity: 0.7;
}
.dashboard-pz-card-body {
  margin-bottom: var(--space-2);
  flex: 1;
  min-height: 0;
}
.dashboard-pz-card-project {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.dashboard-pz-card-project-icon {
  font-size: var(--text-sm);
  opacity: 0.7;
  flex-shrink: 0;
}
.dashboard-pz-card-project-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-pz-card-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}
.dashboard-pz-card-action {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  transition: all 0.3s;
}
.dashboard-pz-card:hover .dashboard-pz-card-action {
  transform: translateX(2px);
}
.dashboard-day-modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.btn-icon {
  font-size: var(--text-base);
  margin-right: var(--space-1);
}

/* Projektzettel-Formular: modernes Layout */
.pz-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.pz-form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .pz-form-grid { grid-template-columns: 1fr; }
}
.pz-form-section {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-subtle);
}
.pz-form-section-title {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pz-form-arbeitszeiten .pz-form-row { margin-bottom: var(--space-2); }
.pz-form-arbeitszeiten .pz-form-row select { min-width: 140px; }
.pz-form-arbeitszeiten .pz-form-row input { width: 70px; }
.pz-form-fahrt-pause { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.pz-form-fahrt-pause .input-group { margin-bottom: 0; min-width: 100px; }

/* Chips / Listen für Beteiligte & Artikel – lesbar, volle Breite */
.pz-chip-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  min-height: 40px;
}
.pz-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-hover);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  min-width: 0;
}
.pz-chip-name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}
.pz-chip .pz-chip-remove, .pz-chip .pz-chip-edit {
  cursor: pointer;
  opacity: 0.85;
  padding: var(--space-1);
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.pz-chip .pz-chip-remove:hover, .pz-chip .pz-chip-edit:hover { opacity: 1; color: var(--accent); }
.pz-chip .pz-chip-menge-input {
  width: 72px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  flex-shrink: 0;
}
.pz-chip .pz-chip-menge-input:focus { outline: none; border-color: var(--accent); }

/* Such-Popup */
.pz-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.pz-popup-inner {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 360px;
  width: 90%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}
.pz-popup-inner h4 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.pz-popup-search {
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.pz-popup-search:focus { outline: none; border-color: var(--accent); }
.pz-popup-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
}
.pz-popup-list li {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--border-subtle);
}
.pz-popup-list li:hover { background: var(--bg-surface-hover); }
.pz-popup-list li:last-child { border-bottom: none; }
.pz-popup-close { margin-top: var(--space-3); align-self: flex-end; }

.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.pz-form-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pz-form-row select { flex: 1; min-width: 0; }
.pz-form-row input[type="number"] { width: 80px; }

/* ---------- Stammdaten: Tabellen ---------- */
.projekte-table, .artikel-table, .firmen-table, .mitarbeiter-table, .arbeitsnachweise-table {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.projekte-table table, .artikel-table table, .firmen-table table, .mitarbeiter-table table, .arbeitsnachweise-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.projekte-table th, .artikel-table th, .firmen-table th, .mitarbeiter-table th, .arbeitsnachweise-table th {
  background: linear-gradient(135deg, var(--bg-surface-hover) 0%, var(--bg-surface) 100%);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-subtle);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
.projekte-table th::after, .artikel-table th::after, .firmen-table th::after, .mitarbeiter-table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.projekte-table th:hover::after, .artikel-table th:hover::after, .firmen-table th:hover::after, .mitarbeiter-table th:hover::after, .arbeitsnachweise-table th:hover::after {
  opacity: 1;
}
.projekte-table th {
  position: relative;
}

/* Custom Dropdown für Herkunft-Filter */
.projekte-filter-dropdown {
  position: relative;
  width: 100%;
}
.projekte-filter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}
.projekte-filter-button:hover {
  color: var(--text-primary);
}
.projekte-filter-arrow {
  font-size: var(--text-xs);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.projekte-filter-dropdown.open .projekte-filter-arrow {
  transform: rotate(180deg);
}
.projekte-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: visible;
  min-width: 100%;
  width: max-content;
  white-space: nowrap;
}
.projekte-filter-dropdown.open .projekte-filter-menu {
  display: flex;
}
.projekte-filter-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.projekte-filter-option:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}
.projekte-filter-option[data-value="ALLE"]:first-child,
.projekte-filter-option[data-value="MANUELL"]:nth-child(2),
.projekte-filter-option[data-value="SYNCHRONISIERT"]:last-child {
  /* Spezifische Styles für jede Option falls nötig */
}

/* Artikel-Filter-Dropdown (gleiche Styles wie Projekte) */
.artikel-filter-dropdown {
  position: relative;
  width: 100%;
}
.artikel-filter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}
.artikel-filter-button:hover {
  color: var(--text-primary);
}
.artikel-filter-arrow {
  font-size: var(--text-xs);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.artikel-filter-dropdown.open .artikel-filter-arrow {
  transform: rotate(180deg);
}
.artikel-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: visible;
  min-width: 100%;
  width: max-content;
  white-space: nowrap;
}
.artikel-filter-dropdown.open .artikel-filter-menu {
  display: flex;
}
.artikel-filter-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.artikel-filter-option:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}
.projekte-table td, .artikel-table td, .firmen-table td, .mitarbeiter-table td, .arbeitsnachweise-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.firmen-table td, .mitarbeiter-table td, .arbeitsnachweise-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-size: var(--text-xs);
}
.projekte-table tr, .artikel-table tr, .firmen-table tr, .mitarbeiter-table tr, .arbeitsnachweise-table tr {
  transition: all 0.2s ease;
}
.projekte-table tr:hover, .artikel-table tr:hover, .firmen-table tr:hover, .mitarbeiter-table tr:hover {
  background: linear-gradient(90deg, var(--bg-surface-hover) 0%, var(--bg-surface) 100%);
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.projekte-table tr:last-child td, .artikel-table tr:last-child td, .firmen-table tr:last-child td, .mitarbeiter-table tr:last-child td {
  border-bottom: none;
}
.projekte-table tbody tr:nth-child(even), .artikel-table tbody tr:nth-child(even), .firmen-table tbody tr:nth-child(even), .mitarbeiter-table tbody tr:nth-child(even) {
  background: var(--bg-surface);
}
.projekte-table tbody tr:nth-child(odd), .artikel-table tbody tr:nth-child(odd), .firmen-table tbody tr:nth-child(odd), .mitarbeiter-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .projekte-table tbody tr:nth-child(odd),
[data-theme="dark"] .artikel-table tbody tr:nth-child(odd),
[data-theme="dark"] .firmen-table tbody tr:nth-child(odd),
[data-theme="dark"] .mitarbeiter-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.01);
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-content {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible; /* Erlaubt Dropdowns über den Modal hinaus */
}
.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.modal-content h3 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Form ---------- */
.form-group {
  margin-bottom: var(--space-5);
  position: relative;
}
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.form-group input[type="text"]:hover,
.form-group input[type="email"]:hover,
.form-group input[type="number"]:hover,
.form-group input[type="password"]:hover,
.form-group select:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.form-group-checkbox-center {
  display: flex;
  justify-content: center;
  margin-top: var(--space-1);
}
.form-group-checkbox-center label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: 0;
}
.form-group-checkbox-center input[type="checkbox"] {
  margin: 0;
}
.form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Berichte ---------- */
#berichte-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-1);
}

.berichte-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.berichte-export-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.berichte-export-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.berichte-export-form {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.berichte-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.berichte-form-field label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}

.berichte-form-field .input-compact {
  width: auto;
  min-width: 100px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.berichte-form-field .btn-compact {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.berichte-field-kw {
  min-width: 80px;
}

.berichte-field-jahr {
  min-width: 100px;
}

.berichte-field-mitarbeiter {
  min-width: 200px;
  flex: 1 1 auto;
}

.berichte-field-button {
  flex: 0 0 220px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.berichte-field-button .btn-compact {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* KW Stepper */
.kw-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.kw-stepper-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  transition: all 0.2s ease;
  user-select: none;
}

.kw-stepper-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.kw-stepper-btn:active {
  background: var(--bg-active);
  transform: scale(0.95);
}

.kw-stepper-input {
  width: 60px;
  text-align: center;
  padding: var(--space-2);
  cursor: default;
}

/* Year Picker */
.year-picker-wrapper {
  position: relative;
}

.year-picker-input {
  cursor: pointer;
  width: 100px;
}

.year-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  z-index: 1000;
  display: none;
  min-width: 250px;
}

.year-picker-dropdown.open {
  display: block;
}

.year-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.year-picker-nav {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.year-picker-nav:hover {
  background: var(--bg-hover);
}

.year-picker-decade {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.year-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
}

.year-picker-year {
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all 0.2s ease;
  text-align: center;
}

.year-picker-year:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.year-picker-year.selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 600;
}

/* ---------- Verwaltungseinträge ---------- */
.verwaltungseintrag-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.verwaltungseintrag-form-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.verwaltungseintrag-form-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-4) 0;
  color: var(--text-primary);
}

.verwaltungseintrag-form {
  width: 100%;
}

.verwaltungseintrag-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.verwaltungseintrag-form-field {
  flex: 1;
  min-width: 150px;
}

.verwaltungseintrag-form-field label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* Sicherstellen, dass Select-Elemente im Verwaltungseintrag-Formular die richtigen Styles haben */
.verwaltungseintrag-form-field select.input {
  /* Nutzt die allgemeinen select-Styles, aber mit expliziter Spezifität */
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-10);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6e73' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
}

.verwaltungseintrag-form-field select.input:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.verwaltungseintrag-form-field select.input:focus:not(:disabled) {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.verwaltungseintrag-form-field select.input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--bg-subtle);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .verwaltungseintrag-form-field select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.verwaltungseintrag-form-field-button {
  flex: 0 0 auto;
  min-width: auto;
}

.verwaltungseintrag-list-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.verwaltungseintrag-list-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-4) 0;
  color: var(--text-primary);
}

.verwaltungseintrag-table {
  overflow-x: auto;
}

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

.verwaltungseintrag-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-subtle);
  background: var(--bg-subtle);
}

.verwaltungseintrag-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.verwaltungseintrag-table tr:hover {
  background: var(--bg-hover);
}

.verwaltungseintrag-table .btn-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  margin-right: var(--space-1);
}

.ve-mitarbeiter-cell {
  font-weight: 500;
}

/* Mitarbeiter-Dropdown in Verwaltungseintrag-Formular - Custom Dropdown wie Filter-Dropdowns */
.ve-mitarbeiter-dropdown {
  position: relative;
  width: 100%;
}

.ve-mitarbeiter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}

.ve-mitarbeiter-button:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ve-mitarbeiter-button:focus:not(:disabled) {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.ve-mitarbeiter-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--bg-subtle);
  border-color: var(--border-subtle);
}

.ve-mitarbeiter-dropdown.disabled .ve-mitarbeiter-button {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--bg-subtle);
  border-color: var(--border-subtle);
}

.ve-mitarbeiter-arrow {
  font-size: var(--text-xs);
  transition: transform var(--transition);
  flex-shrink: 0;
  color: var(--text-secondary);
}

.ve-mitarbeiter-dropdown.open .ve-mitarbeiter-arrow {
  transform: rotate(180deg);
}

.ve-mitarbeiter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  max-height: 300px;
}

.ve-mitarbeiter-dropdown.open .ve-mitarbeiter-menu {
  display: flex;
}

.ve-mitarbeiter-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.ve-mitarbeiter-option:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.ve-mitarbeiter-option:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.ve-mitarbeiter-option:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Verwaltungsgrund-Dropdown - gleiches Design wie Mitarbeiter-Dropdown */
.ve-typ-dropdown {
  position: relative;
  width: 100%;
}

.ve-typ-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}

.ve-typ-button:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ve-typ-button:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.ve-typ-arrow {
  font-size: var(--text-xs);
  transition: transform var(--transition);
  flex-shrink: 0;
  color: var(--text-secondary);
}

.ve-typ-dropdown.open .ve-typ-arrow {
  transform: rotate(180deg);
}

.ve-typ-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  max-height: 300px;
}

.ve-typ-dropdown.open .ve-typ-menu {
  display: flex;
}

.ve-typ-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.ve-typ-option:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.ve-typ-option:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.ve-typ-option:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Berichte-Mitarbeiter-Dropdown - gleiches Design */
.berichte-mitarbeiter-dropdown {
  position: relative;
  width: 100%;
}

.berichte-mitarbeiter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}

.berichte-mitarbeiter-button:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.berichte-mitarbeiter-button:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.berichte-mitarbeiter-arrow {
  font-size: var(--text-xs);
  transition: transform var(--transition);
  flex-shrink: 0;
  color: var(--text-secondary);
}

.berichte-mitarbeiter-dropdown.open .berichte-mitarbeiter-arrow {
  transform: rotate(180deg);
}

.berichte-mitarbeiter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  max-height: 300px;
}

.berichte-mitarbeiter-dropdown.open .berichte-mitarbeiter-menu {
  display: flex;
}

.berichte-mitarbeiter-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.berichte-mitarbeiter-option:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.berichte-mitarbeiter-option:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.berichte-mitarbeiter-option:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Projekt-Dropdown - gleiches Design wie Mitarbeiter-Dropdown */
.berichte-projekt-dropdown {
  position: relative;
  width: 100%;
}

.berichte-projekt-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}

.berichte-projekt-button:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.berichte-projekt-button:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.berichte-projekt-arrow {
  font-size: var(--text-xs);
  transition: transform var(--transition);
  flex-shrink: 0;
  color: var(--text-secondary);
}

.berichte-projekt-dropdown.open .berichte-projekt-arrow {
  transform: rotate(180deg);
}

.berichte-projekt-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  max-height: 300px;
}

.berichte-projekt-dropdown.open .berichte-projekt-menu {
  display: flex;
}

.berichte-projekt-search {
  margin: var(--space-2);
  width: calc(100% - (var(--space-2) * 2));
  flex-shrink: 0;
}

.berichte-projekt-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.berichte-projekt-option:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.berichte-projekt-option:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.berichte-projekt-option:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.berichte-projekt-empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
}

.berichte-field-projekt {
  min-width: 300px;
  flex: 1 1 auto;
}

.berichte-field-month {
  min-width: 150px;
}

.berichte-field-stichtag {
  min-width: 150px;
}

/* Artikel-Maßeinheit-Dropdown - gleiches Design */
.artikel-masseinheit-dropdown {
  position: relative;
  width: 100%;
}

.artikel-masseinheit-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}

.artikel-masseinheit-button:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.artikel-masseinheit-button:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-muted), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.artikel-masseinheit-arrow {
  font-size: var(--text-xs);
  transition: transform var(--transition);
  flex-shrink: 0;
  color: var(--text-secondary);
}

.artikel-masseinheit-dropdown.open .artikel-masseinheit-arrow {
  transform: rotate(180deg);
}

.artikel-masseinheit-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 2000; /* Höher als Modal (1000) damit es darüber liegt */
  display: none;
  flex-direction: column;
  overflow-y: auto;
  max-height: 200px; /* Reduzierte Höhe für bessere Sichtbarkeit im Modal */
}

.artikel-masseinheit-dropdown.open .artikel-masseinheit-menu {
  display: flex;
}

.artikel-masseinheit-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.artikel-masseinheit-option:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.artikel-masseinheit-option:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.artikel-masseinheit-option:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}