.eb-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  background: var(--bg-dark);
  color: var(--text);
  text-align: center;
}

/* Innerhalb einer Seite: nur den Platz des ausgefallenen Bereichs einnehmen. */
.eb-box--compact {
  min-height: 0;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}

.eb-title {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.eb-text {
  max-width: 34rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.eb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.eb-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.eb-btn:hover {
  opacity: 0.85;
}

.eb-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
}

@media (max-width: 480px) {
  .eb-actions {
    flex-direction: column;
    width: 100%;
  }

  .eb-actions .eb-btn {
    width: 100%;
  }
}
:root,
[data-theme="dark"] {
  --primary: #dc2626;
  --primary-dark: #b91c1c;
  --secondary: #1e293b;
  --accent: #ef4444;
  --bg-dark: #0f172a;
  --bg-card: rgba(255, 255, 255, 0.05);
  --surface: #1e293b;
  --surface-elevated: #334155;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.7);
  --border: rgba(255, 255, 255, 0.1);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --font-headline: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-bg: rgba(15, 23, 42, 0.8);
  --nav-link-hover: rgba(255, 255, 255, 0.05);
  --nav-link-active: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] {
  --bg-dark: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.95);
  --surface: #ffffff;
  --surface-elevated: #f8fafc;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: rgba(0, 0, 0, 0.1);
  --secondary: #e2e8f0;
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-link-hover: rgba(0, 0, 0, 0.05);
  --nav-link-active: rgba(220, 38, 38, 0.12);
}

/* Breite der fixen Desktop-Sidebar. Unterhalb 1025px ist sie ausgeblendet → 0.
   Layout-Padding und fixierte Leisten rechnen damit, statt 72px mehrfach zu wiederholen. */
:root {
  --app-sidebar-width: 0px;
}

@media (min-width: 1025px) {
  :root {
    --app-sidebar-width: 72px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-dark);
  color: var(--text);
  overflow-x: hidden;
}

.app {
  min-height: 100vh;
  position: relative;
}

/* Legacy navigation (nur für .navbar, nicht für .main-nav Menüleiste) */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 14, 39, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.navbar .nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

.navbar .nav-links {
  display: flex;
  gap: 2rem;
}

.navbar .nav-links a,
.navbar .nav-links Link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

.navbar .nav-links a:hover,
.navbar .nav-links Link:hover {
  color: var(--text);
}

.navbar .nav-links a::after,
.navbar .nav-links Link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s ease;
}

.navbar .nav-links a:hover::after {
  width: 100%;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0 2rem;
  padding-top: 80px;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}

.gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: float 20s infinite ease-in-out;
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  top: -200px;
  left: -200px;
}

.blob-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  bottom: -150px;
  right: -150px;
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(50px, -50px) scale(1.1);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  animation: fadeInUp 1s ease;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.loading-dots::after {
  content: '...';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60%, 100% {
    content: '...';
  }
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--text);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.6);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border);
}

.btn-outline:hover {
  background: var(--bg-card);
  border-color: var(--primary);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Features Section */
.features {
  padding: 6rem 2rem;
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary);
  box-shadow: 0 20px 60px rgba(220, 38, 38, 0.2);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: inline-block;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.feature-desc {
  color: var(--text-muted);
  line-height: 1.6;
}

/* About Section */
.about {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, transparent, rgba(220, 38, 38, 0.1));
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.about-desc {
  font-size: 1.125rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.badge {
  padding: 0.5rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.badge:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* Footer */
.footer {
  background: rgba(10, 14, 39, 0.8);
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar .nav-container {
    padding: 0 1rem;
  }

  .navbar .nav-links {
    gap: 1rem;
    font-size: 0.9rem;
  }

  .hero {
    padding: 0 1rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .features,
  .about {
    padding: 4rem 1rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .tech-badges {
    gap: 0.75rem;
  }

  .badge {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 1.25rem;
  }

  .navbar .nav-links {
    gap: 0.75rem;
    font-size: 0.85rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .feature-icon {
    font-size: 2.5rem;
  }
}

/* ── PWA Update Toast ─────────────────────────────────────────────────────── */
.app-update-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  background: var(--secondary, #1e293b);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 0.875rem;
  white-space: nowrap;
  animation: toastSlideUp 0.3s ease;
}

.app-update-btn {
  padding: 0.35rem 0.875rem;
  border-radius: 6px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.app-update-btn:hover {
  opacity: 0.85;
}

@keyframes toastSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Kurzer Zwischenstand bis Widget-Konfiguration geladen (z. B. Stempeluhr-Route) */
.protected-route-widget-gate {
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted, #64748b);
}

/* ─── Wichtige Auftrags-Bemerkung (rotes ⚠-Banner, auf allen Auftragskacheln) ─── */
.order-important-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  background: color-mix(in srgb, #dc2626 16%, transparent);
  border: 1px solid color-mix(in srgb, #dc2626 45%, transparent);
  border-left: 3px solid #dc2626;
  color: #f87171;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.order-important-note-icon {
  flex: 0 0 auto;
}

.order-important-note-text {
  min-width: 0;
  /* Vollständig lesbar: beliebig viele Zeilen, langer Text bricht um. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Kompakt (kleine Kanban-Kacheln) */
.order-important-note--compact {
  padding: 0.25rem 0.45rem;
  font-size: 0.72rem;
}

/* Detailseite: größer */
.order-important-note--detail {
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
}

/* Formular: rotes Label + Eingabe */
.order-important-note-label {
  color: #f87171;
  font-weight: 600;
}
.order-important-note-input {
  border-color: color-mix(in srgb, #dc2626 45%, var(--border)) !important;
}
.order-important-note-input::placeholder {
  color: color-mix(in srgb, #dc2626 45%, var(--text-muted));
}
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 0.55rem 1rem;
  padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
  background: #b91c1c;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  animation: offline-banner-in 0.25s ease;
}

.offline-banner strong {
  font-weight: 800;
}

.offline-banner--online {
  background: #15803d;
  font-weight: 700;
}

@keyframes offline-banner-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Banner verdeckt nichts: fixe Nav/Sidebar + Inhalt um die Bannerhöhe nach unten. */
html.is-offline-banner .main-nav,
html.is-offline-banner .app-sidebar {
  top: var(--offline-banner-h, 40px);
}

html.is-offline-banner body {
  padding-top: var(--offline-banner-h, 40px);
}

@media (max-width: 480px) {
  .offline-banner {
    font-size: 0.78rem;
    padding-inline: 0.75rem;
  }
}
.outbox-indicator {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: min(90vw, 360px);
}

.outbox-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: #475569;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.outbox-chip--sending {
  background: #2563eb;
}

button.outbox-chip {
  cursor: pointer;
  font-family: inherit;
}

.outbox-chip--failed {
  background: #b91c1c;
  cursor: pointer;
}

.outbox-chip--failed:hover {
  background: #991b1b;
}

@media (max-width: 768px) {
  /* Über der mobilen BottomBar bleiben, wo vorhanden. */
  .outbox-indicator {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--error, #ef4444);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.2s ease, margin-top 0.2s ease;
  margin-top: 0;
  pointer-events: none;
}

.field-error--visible {
  max-height: 4rem;
  opacity: 1;
  margin-top: 6px;
}

.field-error__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.1em;
}

.field-error__text {
  flex: 1;
  min-width: 0;
}
.validated-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.validated-field__control--error {
  border-color: var(--error, #ef4444) !important;
}

.validated-field__control--error:focus {
  border-color: var(--error, #ef4444) !important;
}
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  padding: 20px;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 400px;
  backdrop-filter: blur(10px);
}

.login-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
  color: var(--text);
  background: linear-gradient(135deg, var(--text) 0%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}

.form-group input {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text);
  transition: border-color 0.3s, background-color 0.3s;
}

.form-group input::placeholder {
  color: var(--text-muted);
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.15);
}

.error-message {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid var(--error);
}

.btn-login {
  padding: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 10px;
}

.btn-login:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.4);
}

.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .login-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .login-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
}

.address-autocomplete {
  width: 100%;
}

.autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-loading {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.autocomplete-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-dark, #1e293b);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
}

.autocomplete-suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text, #fff);
  font-size: 0.95rem;
  transition: background-color 0.2s;
}

.autocomplete-suggestion-item:last-child {
  border-bottom: none;
}

.autocomplete-suggestion-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.autocomplete-suggestion-item:active {
  background-color: rgba(255, 255, 255, 0.12);
}
.avatar {
  object-fit: cover;
  border-radius: 50%;
  background: var(--bg-card, #1e293b);
}

.avatar-sm {
  width: 40px;
  height: 40px;
}

.avatar-md {
  width: 96px;
  height: 96px;
}

.avatar-lg {
  width: 128px;
  height: 128px;
}

.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--border, rgba(255, 255, 255, 0.1));
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  font-size: 0.875rem;
}

.avatar-sm.avatar-placeholder .avatar-initials {
  font-size: 0.875rem;
}

.avatar-md.avatar-placeholder .avatar-initials {
  font-size: 1.75rem;
}

.avatar-lg.avatar-placeholder .avatar-initials {
  font-size: 2.25rem;
}

/* Inline vergrößert beim Klick (kein Modal) – Zoom-Out nutzt dieselbe Transition von .avatar[role="button"] */
.avatar.avatar-expanded {
  width: min(320px, 85vw);
  height: min(320px, 85vw);
}

.avatar[role="button"] {
  cursor: pointer;
  transition: width 0.25s ease, height 0.25s ease;
}

img.avatar {
  animation: avatar-fadein 0.3s ease;
}

@keyframes avatar-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* ══════════════════════════════════════════════════
   PROFILE – Design tokens (same as OrderDetail)
   ══════════════════════════════════════════════════ */

.profile-container {
  --pf-surface:   #161b22;
  --pf-surface-2: #0d1117;
  --pf-surface-3: #21262d;
  --pf-border:    #30363d;
  --pf-muted:     #7d8590;
  --pf-text:      #e6edf3;

  /* Höhe der Sticky-Bar — maßgeblich für ihre min-height UND den reservierten Platz darunter. */
  --pf-sticky-h: 4rem;

  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Solange die Sticky-Bar eingeblendet ist, endet der Inhalt oberhalb von ihr. */
.profile-container:has(.pf-sticky-bar) {
  padding-bottom: calc(var(--pf-sticky-h) + env(safe-area-inset-bottom, 0px) + 1.5rem);
}

[data-theme="light"] .profile-container {
  --pf-surface:   #ffffff;
  --pf-surface-2: #f6f8fa;
  --pf-surface-3: #eef2f7;
  --pf-border:    #e2e8f0;
  --pf-muted:     #64748b;
  --pf-text:      #0f172a;
}

/* ══════════════════════════════════════════════════
   BANNERS + ALERTS
   ══════════════════════════════════════════════════ */

.pf-dirty-banner {
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.pf-alert {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

.pf-alert-error  { border: 1px solid rgba(255,68,68,.3); background: rgba(255,68,68,.09); color: #ff8a8a; }
.pf-alert-success { border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.09); color: #86efac; }

.pf-floating-notices {
  position: fixed;
  top: 80px;
  right: 16px;
  z-index: 1200;
  width: min(440px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: none;
}

.pf-notice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  pointer-events: auto;
  padding: 0.72rem 0.8rem 0.72rem 0.9rem;
  border-radius: 10px;
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pf-notice.is-fading {
  opacity: 0;
  transform: translateY(-8px);
}

.pf-notice-text {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  font-weight: 600;
}

.pf-notice-warning {
  background: color-mix(in srgb, #f59e0b 14%, var(--pf-surface) 86%);
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
  color: #fbbf24;
}

.pf-notice-error {
  background: color-mix(in srgb, #ef4444 14%, var(--pf-surface) 86%);
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
  color: #fca5a5;
}

.pf-notice-success {
  background: color-mix(in srgb, #22c55e 14%, var(--pf-surface) 86%);
  border-color: color-mix(in srgb, #22c55e 40%, transparent);
  color: #86efac;
}

.pf-notice-close {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.pf-notice-close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ══════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════ */

.pf-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas:
    "sidebar head"
    "sidebar content";
  gap: 1.25rem;
  align-items: flex-start;
}

.pf-content-head {
  grid-area: head;
  min-width: 0;
}

/* ── Sidebar ─────────────────────────────────────── */

.pf-sidebar {
  grid-area: sidebar;
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}

.pf-card {
  background: var(--pf-surface);
  border: 1px solid color-mix(in srgb, var(--pf-border) 85%, transparent);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.pf-sidebar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-surface) 88%, var(--pf-surface-2) 12%), var(--pf-surface));
}

/* Photo */
.pf-photo-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.25s ease;
}

.pf-photo-preview-btn {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.pf-photo-ring {
  width: 98px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  outline: 3px solid #ef4444;
  outline-offset: 3px;
  overflow: hidden;
  transition:
    width 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-radius 0.32s ease,
    outline-width 0.28s ease,
    outline-color 0.2s ease,
    outline-offset 0.32s ease,
    box-shadow 0.32s ease;
  flex-shrink: 0;
  margin: 0 auto;
  will-change: width, border-radius;
}

.pf-photo-ring .avatar,
.pf-photo-ring .avatar-placeholder {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  font-size: 1.75rem !important;
  transition: font-size 0.32s ease, border-radius 0.32s ease;
}

.pf-photo-preview-btn:hover .pf-photo-ring {
  outline-color: #f87171;
}

.pf-photo-hint {
  font-size: 0.75rem;
  color: var(--pf-muted);
  transition: color 0.15s;
}

.pf-photo-preview-btn:hover + .pf-photo-hint {
  color: var(--pf-text);
}

.pf-photo-stage.is-expanded {
  gap: 0.65rem;
}

.pf-photo-stage.is-expanded .pf-photo-ring {
  width: 100%;
  max-width: 260px;
  border-radius: 18px;
  outline-width: 3px;
  outline-color: #ef4444;
  outline-offset: 2px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.pf-photo-stage.is-expanded .pf-photo-ring .avatar,
.pf-photo-stage.is-expanded .pf-photo-ring .avatar-placeholder {
  width: 100% !important;
  height: 100% !important;
  font-size: 3.1rem !important;
}

.pf-photo-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--pf-border) 75%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pf-surface-2) 78%, transparent);
  color: var(--pf-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.pf-photo-edit-btn:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--pf-surface-2) 62%, transparent);
  transform: translateY(-1px);
}

/* Name + badge */
.pf-sidebar-name {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--pf-text);
  text-align: center;
}

.pf-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}

.pf-role-badge[data-role="dev"]    { background: rgba(168,85,247,.15); border-color: rgba(168,85,247,.3); color: #c084fc; }
.pf-role-badge[data-role="admin"]  { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.3);  color: #f87171; }
.pf-role-badge[data-role="office"] { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.3); color: #60a5fa; }
.pf-role-badge[data-role="user"]   { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.3);  color: #4ade80; }
.pf-role-badge[data-role="guest"]  { background: rgba(107,114,128,.15);border-color: rgba(107,114,128,.3);color: #9ca3af; }

/* Info rows */
.pf-sidebar-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.pf-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--pf-muted);
}

.pf-info-icon { flex-shrink: 0; }

.pf-contact-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s, border-color 0.15s;
}

.pf-contact-link:hover {
  color: var(--pf-text);
  border-bottom-color: color-mix(in srgb, var(--pf-text) 65%, transparent);
}

.pf-sidebar-sep {
  width: 100%;
  height: 1px;
  background: var(--pf-border);
  margin: 0.25rem 0;
}

.pf-sidebar-contact {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--pf-border);
  border-radius: 10px;
  background: var(--pf-surface-2);
}

.pf-sidebar-contact-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pf-muted);
}

.pf-logout-btn {
  width: 100%;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--pf-border);
  background: transparent;
  color: var(--pf-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.pf-logout-btn:hover {
  border-color: #ef4444;
  color: #f87171;
}

/* ── Main content ────────────────────────────────── */

.pf-content {
  grid-area: content;
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pf-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.pf-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pf-content-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pf-text);
}

.pf-btn-edit {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--primary);
  color: white;
  transition: opacity 0.15s;
}

.pf-btn-edit:hover { opacity: 0.85; }

.pf-btn-logout-header {
  background: transparent;
  border: 1px solid var(--pf-border);
  color: var(--pf-text);
}

/* ══════════════════════════════════════════════════
   VIEW MODE — section cards + cells
   ══════════════════════════════════════════════════ */

.pf-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.pf-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pf-muted);
}

.pf-cell-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.pf-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: color-mix(in srgb, var(--pf-surface-2) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-border) 70%, transparent);
  border-radius: 7px;
  padding: 0.6rem 0.75rem;
}

.pf-cell-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pf-muted);
}

.pf-cell-value {
  font-size: 0.875rem;
  color: var(--pf-text);
  font-weight: 500;
  word-break: break-word;
}

.pf-cell-value .pf-contact-link {
  color: var(--pf-text);
}

/* ══════════════════════════════════════════════════
   EDIT MODE — single form card with sections
   ══════════════════════════════════════════════════ */

.pf-edit-section {
  padding: 1rem 1.1rem;
}

.pf-edit-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pf-edit-section > .pf-section-label {
  display: block;
  margin-bottom: 0.75rem;
}

.pf-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.pf-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 0.75rem;
}

.pf-form-group--full {
  grid-column: 1 / -1;
}

.pf-password-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.pf-form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pf-muted);
}

.pf-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--pf-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--pf-text);
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
  min-height: 38px;
  transition: border-color 0.15s;
}

.pf-input:focus {
  outline: none;
  border-color: var(--primary);
}

.pf-input-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pf-address-wrap {
  margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════
   BUTTONS + STICKY BAR
   ══════════════════════════════════════════════════ */

.pf-btn {
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s, transform 0.15s;
}

.pf-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pf-btn:hover:not(:disabled) { opacity: 0.88; }

.pf-btn-primary  { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; }
.pf-btn-secondary { background: transparent; border-color: var(--pf-border); color: var(--pf-text); }

/* Beginnt rechts neben der Navigations-Sidebar, statt sie zu überdecken. */
.pf-sticky-bar {
  position: fixed;
  bottom: 0;
  left: var(--app-sidebar-width);
  right: 0;
  z-index: 200;
  min-height: var(--pf-sticky-h);
  background: var(--bg-dark);
  border-top: 1px solid var(--pf-border);
  padding: 0.875rem 2rem;
  padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .pf-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "sidebar"
      "content";
  }

  .pf-content {
    width: 100%;
  }

  .pf-sidebar {
    width: 100%;
    position: static;
  }

  .pf-sidebar-card {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
  }

  .pf-photo-stage:not(.is-expanded) .pf-photo-ring {
    width: 64px !important;
  }

  .pf-photo-stage:not(.is-expanded) .pf-photo-ring .avatar,
  .pf-photo-stage:not(.is-expanded) .pf-photo-ring .avatar-placeholder {
    font-size: 1.1rem !important;
  }

  .pf-photo-stage.is-expanded {
    width: 100%;
  }

  .pf-photo-stage.is-expanded .pf-photo-ring {
    width: min(100%, 220px) !important;
  }

  .pf-photo-stage.is-expanded .pf-photo-ring .avatar,
  .pf-photo-stage.is-expanded .pf-photo-ring .avatar-placeholder {
    width: 100% !important;
    height: 100% !important;
    font-size: 2.35rem !important;
  }

  .pf-sidebar-name { text-align: left; }
  .pf-sidebar-info { margin-top: 0; flex: 1; min-width: 140px; }
  .pf-sidebar-sep  { display: none; }
  .pf-sidebar-contact { width: auto; min-width: 220px; flex: 1; }
  .pf-photo-hint   { display: none; }

  .pf-logout-btn {
    width: auto;
    padding: 0.4rem 0.875rem;
    font-size: 0.82rem;
    margin-left: auto;
  }

  .pf-content-header {
    flex-wrap: wrap;
  }

  .pf-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 600px) {
  .profile-container { padding: 1rem 0.75rem; }

  .pf-floating-notices {
    top: 72px;
    right: 12px;
    width: calc(100vw - 24px);
  }

  .pf-cell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cell-grid-account { grid-template-columns: 1fr; }
  .pf-edit-grid { grid-template-columns: 1fr; }

  .pf-edit-section { padding: 0.95rem; }

  .pf-sticky-bar {
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
  }

  .pf-sticky-bar .pf-btn { flex: 1; }

  .pf-header-actions {
    justify-content: stretch;
  }

  .pf-header-actions .pf-btn-edit {
    flex: 1;
  }
}
.pw-field {
  position: relative;
  display: block;
  width: 100%;
}

/* Zwei Klassen, damit die Regel `.form-group input` (Klasse + Element) nicht gewinnt
   und den Platz für den Umschalter wieder wegnimmt. */
.pw-field > .pw-input {
  width: 100%;
  padding-right: 2.75rem;
}

/* Absolut positioniert: der Umschalter beansprucht keinen Platz im Fluss,
   dadurch springt beim Wechsel zwischen Auge und durchgestrichenem Auge nichts. */
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.pw-toggle:hover:not(:disabled) {
  color: var(--text);
  background: var(--nav-link-hover);
}

.pw-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.pw-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Browser-eigene Passwort-Icons würden doppelt erscheinen. */
.pw-field > .pw-input::-ms-reveal,
.pw-field > .pw-input::-webkit-credentials-auto-fill-button {
  display: none;
}
/* Benachrichtigungs-Matrix: Ereignis × Kanal (Glocke / Push). */

.npref-intro {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.npref-warn {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
  font-size: 0.85rem;
}

.npref-master {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.npref-quiet {
  font-size: 0.82rem;
  margin: 0 0 0.9rem;
  padding-left: 0.75rem;
  border-left: 2px solid color-mix(in srgb, var(--pf-border) 85%, transparent);
}

.npref-table {
  border: 1px solid color-mix(in srgb, var(--pf-border) 85%, transparent);
  border-radius: 10px;
  overflow: hidden;
}

/* Spaltenbreiten einmal definiert — Kopf und Zeilen müssen exakt übereinstimmen. */
.npref-head,
.npref-row {
  display: grid;
  grid-template-columns: 1fr 4.5rem 4.5rem;
  align-items: center;
  gap: 0.5rem;
}

.npref-head {
  padding: 0.5rem 0.85rem;
  background: var(--pf-surface-2);
  border-bottom: 1px solid color-mix(in srgb, var(--pf-border) 85%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pf-muted);
}

.npref-head span:not(:first-child),
.npref-cell {
  text-align: center;
}

.npref-group + .npref-group {
  border-top: 1px solid color-mix(in srgb, var(--pf-border) 60%, transparent);
}

.npref-group-title {
  padding: 0.6rem 0.85rem 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pf-muted);
}

.npref-row {
  padding: 0.4rem 0.85rem;
}

.npref-row:last-child {
  padding-bottom: 0.65rem;
}

/* Zentral abgeschaltet: sichtbar, aber erkennbar nicht in der Hand des Nutzers. */
.npref-row.is-off {
  opacity: 0.45;
}

.npref-label {
  font-size: 0.9rem;
  line-height: 1.35;
}

.npref-cell input {
  cursor: pointer;
}

.npref-cell input:disabled {
  cursor: not-allowed;
}

/* Ereignisse anderer Zuständigkeiten: erreichbar, aber nicht im Weg. */
.npref-more {
  margin-top: 0.75rem;
}

.npref-more > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--pf-muted);
  padding: 0.35rem 0;
  user-select: none;
}

.npref-more > summary:hover {
  color: var(--pf-text);
}

.npref-more-hint {
  font-size: 0.82rem;
  margin: 0.25rem 0 0.6rem;
}

.npref-devices {
  list-style: none;
  padding: 0;
  margin: 0;
}

.npref-devices li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-border) 85%, transparent);
}

@media (max-width: 768px) {
  .npref-head,
  .npref-row {
    grid-template-columns: 1fr 3.25rem 3.25rem;
  }

  .npref-label {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .npref-head,
  .npref-row {
    grid-template-columns: 1fr 2.75rem 2.75rem;
    gap: 0.25rem;
  }

  .npref-head,
  .npref-row,
  .npref-group-title {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .npref-head {
    font-size: 0.7rem;
  }
}
.user-settings-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem 2.5rem;
}

.user-settings-hero {
  position: relative;
  border-radius: 16px;
  padding: 1.35rem 1.5rem 1.5rem;
  margin-bottom: 1.75rem;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 14%, transparent) 0%,
      color-mix(in srgb, var(--bg-card) 88%, transparent) 48%,
      color-mix(in srgb, #0ea5e9 8%, var(--bg-card)) 100%
    );
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.user-settings-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(220, 38, 38, 0.12), transparent 55%);
  pointer-events: none;
}

.user-settings-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.user-settings-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 25%, transparent);
}

.user-settings-title {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text, #fff);
  line-height: 1.15;
}

.user-settings-subtitle {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-muted, rgba(255, 255, 255, 0.72));
  max-width: 36rem;
}

.user-settings-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 960px) {
  .user-settings-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Karten aus Profil-Komponenten nahtlos einbinden */
.user-settings-grid .pf-card {
  margin-top: 0;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-card);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.user-settings-grid .pf-section-header {
  margin-bottom: 0.25rem;
}

.user-settings-grid .pf-section-label {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.user-settings-footnote {
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--border);
}

.user-settings-footnote a {
  color: color-mix(in srgb, var(--primary) 85%, #fff);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.user-settings-footnote a:hover {
  color: var(--primary);
}

.user-settings-reload-card {
  margin-top: 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-card);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.user-settings-reload-desc {
  margin: 0.35rem 0 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40rem;
}

.user-settings-reload-desc kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  font-size: 0.78rem;
  font-family: inherit;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
}

.user-settings-reload-btn {
  min-width: 10rem;
}

@media (max-width: 600px) {
  .user-settings-hero-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .user-settings-hero-icon {
    width: 48px;
    height: 48px;
  }

  .user-settings-title {
    font-size: 1.35rem;
  }
}
/* Full-screen loading state while a document blob is fetched */

.doc-open-load {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  pointer-events: auto;
}

.doc-open-load__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #0a0c10 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: doc-open-load-fade-in 0.35s ease-out both;
}

.doc-open-load__card {
  position: relative;
  max-width: min(22rem, 100%);
  width: 100%;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-card, #1a1d24) 92%, transparent),
    color-mix(in srgb, var(--bg-dark, #12141a) 88%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--primary, #e11d48) 28%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset,
    0 28px 90px rgba(0, 0, 0, 0.55),
    0 0 80px color-mix(in srgb, var(--primary, #e11d48) 12%, transparent);
  animation: doc-open-load-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.doc-open-load__rings {
  position: relative;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.35rem;
}

.doc-open-load__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--primary, #e11d48);
  border-right-color: color-mix(in srgb, var(--primary, #e11d48) 35%, transparent);
  animation: doc-open-load-spin 0.95s linear infinite;
}

.doc-open-load__ring--delayed {
  inset: 6px;
  border-top-color: color-mix(in srgb, var(--primary, #e11d48) 45%, transparent);
  border-right-color: transparent;
  animation-duration: 1.35s;
  animation-direction: reverse;
}

.doc-open-load__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text, #f4f4f5);
}

.doc-open-load__file {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: var(--text-muted, #a1a1aa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 0.25rem;
}

.doc-open-load__hint {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--text-muted, #a1a1aa) 88%, var(--primary, #e11d48));
  animation: doc-open-load-pulse 1.8s ease-in-out infinite;
}

@keyframes doc-open-load-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes doc-open-load-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes doc-open-load-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes doc-open-load-pulse {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-open-load__backdrop,
  .doc-open-load__card {
    animation: none;
  }

  .doc-open-load__ring {
    animation-duration: 1.6s;
  }

  .doc-open-load__hint {
    animation: none;
    opacity: 0.85;
  }
}
/* ── DocumentSection ─────────────────────────────────────────────────────── */

.docsec {
  margin-top: 1.5rem;
}

.docsec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.docsec-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.docsec-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  min-width: 1.5rem;
  text-align: center;
}

/* ── Upload area ───────────────────────────────────────────────────────────── */

.docsec-upload-area {
  margin-bottom: 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--bg-dark) 96%, transparent));
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.docsec-upload-area.is-drag-active {
  border-color: var(--primary);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, var(--bg-card)), color-mix(in srgb, var(--primary) 6%, var(--bg-dark)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translateY(-1px);
}

.docsec-dropzone {
  min-height: 136px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
}

.docsec-dropzone-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}

.docsec-dropzone-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.docsec-dropzone-copy strong {
  font-size: 0.95rem;
  color: var(--text);
}

.docsec-dropzone-copy span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.docsec-upload-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.docsec-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
  user-select: none;
}

.docsec-upload-btn:hover {
  opacity: 0.85;
}

.docsec-camera-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.docsec-camera-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

/* ── Pending upload area ───────────────────────────────────────────────────── */

.docsec-pending-area {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 8px;
}

.docsec-inline-drop-hint {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  font-size: 0.8rem;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.docsec-inline-drop-hint.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
}

.docsec-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.docsec-pending-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.docsec-pending-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.docsec-pending-name-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.docsec-pending-name-label .docsec-label {
  font-size: 0.72rem;
  margin: 0;
}

.docsec-pending-name-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.2rem 0.4rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.docsec-pending-name-input:focus {
  border-color: var(--primary);
  background: var(--bg-card);
}

.docsec-pending-name-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.docsec-pending-ext {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: monospace;
  white-space: nowrap;
}

.docsec-pending-size {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.docsec-pending-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.docsec-pending-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.docsec-add-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  align-self: flex-start;
  user-select: none;
}

.docsec-add-more-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.docsec-pending-cat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.docsec-invoice-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.docsec-invoice-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 120px;
}

.docsec-input {
  padding: 0.4rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
}
.docsec-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-hover, rgba(128, 128, 128, 0.12));
}

.docsec-progress-text {
  font-size: 0.8rem;
  color: var(--primary);
}

.docsec-pending-actions {
  display: flex;
  gap: 0.5rem;
}

/* ── Feedback ──────────────────────────────────────────────────────────────── */

.docsec-success {
  font-size: 0.8rem;
  color: #4ade80;
  margin-bottom: 0.5rem;
}

.docsec-error {
  font-size: 0.8rem;
  color: var(--error);
  margin-bottom: 0.5rem;
}

/* ── Filter Chips ──────────────────────────────────────────────────────────── */

.docsec-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.docsec-chip {
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.docsec-chip:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.docsec-chip--active {
  font-weight: 600;
}

.docsec-chip--clear {
  border-style: dashed;
}

/* ── Empty State ───────────────────────────────────────────────────────────── */

.docsec-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* ── Document List ─────────────────────────────────────────────────────────── */

.docsec-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.docsec-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  transition: background 0.15s;
}

.docsec-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.docsec-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.docsec-item-body {
  flex: 1;
  min-width: 0;
}

.docsec-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docsec-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.docsec-item-cat {
  font-weight: 600;
}

.docsec-item-uploader {
  font-style: italic;
}

.docsec-item-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.docsec-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.docsec-action-btn:hover {
  background: var(--bg-card);
  color: var(--text);
}

.docsec-action-btn--delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.docsec-action-btn--confirm:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.docsec-item--renaming {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-dark));
}

.docsec-rename-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.docsec-rename-input {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
}

.docsec-rename-ext {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Shared form elements ──────────────────────────────────────────────────── */

.docsec-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.docsec-select {
  flex: 1;
  padding: 0.4rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.docsec-btn-primary {
  flex: 1;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.docsec-btn-primary:hover:not(:disabled) {
  opacity: 0.85;
}

.docsec-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.docsec-btn-secondary {
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.docsec-btn-secondary:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text);
}

.docsec-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Preview Modal ─────────────────────────────────────────────────────────── */

.docsec-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  cursor: pointer;
}

.docsec-preview-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  background: var(--bg-dark);
  border-radius: 12px;
  overflow: hidden;
  cursor: default;
}

.docsec-preview-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: background 0.15s;
}

.docsec-preview-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.docsec-preview-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.docsec-preview-iframe {
  width: 90vw;
  height: 90vh;
  border: none;
  min-width: 320px;
  min-height: 400px;
}

.docsec-preview-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.docsec-preview-fallback-name {
  margin: 0;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
}

.docsec-preview-fallback-hint {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.docsec-preview-fallback-btn {
  margin-top: 0.5rem;
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* pdf.js-Vorschau (Mobile): fester Viewport, Seiten fit-to-width + vertikal scrollbar. */
.docsec-preview-content .pdfp-root,
.docsec-pdf-suspense {
  width: 92vw;
  max-width: 900px;
  height: 88vh;
}

.docsec-pdf-suspense {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .docsec-pending-row {
    flex-wrap: wrap;
  }

  .docsec-pending-size {
    display: none;
  }

  .docsec-item {
    flex-wrap: wrap;
  }

  .docsec-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Mehrfach-Auswahl / ZIP-Download ─────────────────────────── */
.docsec-select-bar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.4rem 0.2rem 0.6rem; margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--border);
}
.docsec-muted { color: var(--text-muted); font-size: 0.85rem; }
.docsec-select-link {
  background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 0.85rem; padding: 0.2rem 0.3rem;
}
.docsec-select-link:hover { text-decoration: underline; }
.docsec-select-primary {
  background: var(--primary); color: #fff; border: none; border-radius: 7px;
  padding: 0.35rem 0.75rem; font-size: 0.85rem; cursor: pointer;
}
.docsec-select-primary:disabled { opacity: 0.5; cursor: default; }
.docsec-item-check { width: 18px; height: 18px; margin-right: 0.2rem; flex: none; cursor: pointer; }

.docsec-zip-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.docsec-zip-modal {
  background: var(--bg-dark); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 1.25rem; width: min(460px, 100%);
  max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.docsec-zip-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.docsec-zip-list {
  list-style: none; margin: 0; padding: 0.5rem 0.7rem; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text); font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.docsec-zip-check { display: flex; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.9rem; cursor: pointer; }
.docsec-zip-check input { width: auto; }
.docsec-zip-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.docsec-zip-btn {
  padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 0.9rem; cursor: pointer;
}
.docsec-zip-btn:hover { filter: brightness(1.12); }
.docsec-zip-btn--primary { background: var(--primary); color: #fff; border-color: transparent; }
.docsec-zip-btn:disabled { opacity: 0.6; cursor: default; }
/* Reuse document/order-detail list and upload styles */
/* ==============================================
   ORDER DETAIL – LOCAL DESIGN TOKENS
   ============================================== */

.order-detail-container {
  --od-surface:   #161b22;
  --od-surface-2: #0d1117;
  --od-surface-3: #21262d;
  --od-border:    #30363d;
  --od-muted:     #7d8590;
  --od-text:      #e6edf3;
}

[data-theme="light"] .order-detail-container {
  --od-surface:   #ffffff;
  --od-surface-2: #f6f8fa;
  --od-surface-3: #eef2f7;
  --od-border:    #e2e8f0;
  --od-muted:     #64748b;
  --od-text:      #0f172a;
}

/* ==============================================
   ORDER DETAIL – LAYOUT & DESIGN
   ============================================== */

.order-detail-container {
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Breadcrumb */
.od-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}

.od-breadcrumb-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font-size: 0.875rem;
  transition: opacity 0.2s;
}

.od-breadcrumb-link:hover {
  opacity: 0.75;
}

.od-breadcrumb-sep {
  color: var(--text-muted);
}

.od-breadcrumb-current {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.od-breadcrumb .od-header-actions {
  margin-left: auto;
  padding-left: 1rem;
}

/* Straßensperrungen */
/* Edit-Zeile spiegelt die Lese-Card (.rc-item) → gleicher Footprint. */
.rc-edit-type {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--od-surface);
  border: 1px solid var(--od-border);
  border-radius: 7px;
  color: var(--od-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}

.rc-edit-type:focus {
  outline: none;
  border-color: var(--primary);
}

.rc-edit-times {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rc-edit-time-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.rc-edit-time-label {
  flex-shrink: 0;
  width: 2.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--od-muted);
}

.rc-edit-date,
.rc-edit-time {
  min-width: 0;
  box-sizing: border-box;
  background: var(--od-surface);
  border: 1px solid var(--od-border);
  border-radius: 6px;
  color: var(--od-text);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
}

.rc-edit-date {
  flex: 1;
}

.rc-edit-time {
  flex: 0 0 5.25rem;
}

.rc-edit-date:focus,
.rc-edit-time:focus {
  outline: none;
  border-color: var(--primary);
}

.rc-form-add {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.65rem;
  border: 1px dashed var(--od-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rc-form-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.rc-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.rc-item {
  border: 1px solid var(--od-border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background: var(--od-surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* Freigegebene (fixierte) Sperrung: gesperrte Felder dezent ausgrauen. */
.rc-item--locked input:disabled,
.rc-item--locked select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rc-locked-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--od-muted);
}

.rc-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.rc-status-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 20px;
  padding: 0.28rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: filter 0.15s;
}
.rc-status-select:hover { filter: brightness(1.12); }
.rc-status-select[data-status="angefragt"]     { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.rc-status-select[data-status="freigegeben"]   { background: rgba(16,185,129,0.15);  color: #10b981; }
.rc-status-select[data-status="gesperrt"]      { background: rgba(220,38,38,0.15);   color: #dc2626; }
.rc-status-select[data-status="abgeschlossen"] { background: rgba(107,114,128,0.15); color: #8b9099; }

.rc-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 0.1rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.rc-status-badge[data-status="angefragt"]     { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.rc-status-badge[data-status="freigegeben"]   { background: rgba(16,185,129,0.15);  color: #10b981; }
.rc-status-badge[data-status="gesperrt"]      { background: rgba(220,38,38,0.15);   color: #dc2626; }
.rc-status-badge[data-status="abgeschlossen"] { background: rgba(107,114,128,0.15); color: #8b9099; }

.rc-item-time {
  color: var(--od-muted);
  font-size: 0.82rem;
}

.rc-actors {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.15rem;
}

.rc-actor-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--od-border) 70%, transparent);
}

.rc-actor-row:last-child {
  border-bottom: none;
}

.rc-actor-label {
  color: var(--od-muted);
}

.rc-actor-value {
  color: var(--od-text);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
}

.rc-actor-name {
  color: var(--od-text);
}

.rc-actor-time {
  color: var(--od-muted);
  font-size: 0.7rem;
}

.rc-delete-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0.3rem;
  align-self: flex-end;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.rc-delete-btn:hover {
  opacity: 1;
  border-color: #dc2626;
}

.rc-history {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--od-border);
  padding-top: 0.4rem;
  min-width: 0;
}

.rc-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.rc-history-status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  flex-wrap: wrap;
}

.rc-history-arrow {
  color: var(--od-muted);
  font-size: 0.62rem;
}

.rc-history-meta {
  color: var(--od-muted);
  font-size: 0.7rem;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  .rc-history-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .rc-history-meta {
    text-align: left;
  }
}

/* Two-column layout */
.od-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.od-col-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.od-col-side {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card */
.od-card {
  background: var(--od-surface);
  border: 0.5px solid var(--od-border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}

/* Title block */
.od-title-row {
  margin-bottom: 0.25rem;
}

/* Trennlinie zwischen Titel und folgendem Inhalt (Beschreibung bzw. Edit-Feld).
   Liegt auf dem Folge-Element, damit ohne Inhalt keine lose Linie entsteht.
   Termine (.od-date-grid-view) bringen ihre eigene Trennlinie bereits mit. */
.od-titleblock .od-title-row + .od-description,
.od-titleblock .od-title-row + .od-description-input {
  margin-top: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--od-border);
}

/* ── Footprint-treues Inline-Editing ──
   Edit-Felder nehmen den Platz der Lese-Werte ein (gleiche Schriftgröße,
   dezente Rahmen, keine Labels) → beim Wechsel View↔Edit kein Springen. */
.od-titleblock .od-title-input {
  border: none;
  border-bottom: 2px solid var(--od-border);
  border-radius: 0;
  background: transparent;
  padding: 0 0 0.3rem;
}

.od-titleblock .od-title-input:focus {
  border-bottom-color: var(--primary);
}

.od-description-input {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  min-height: 4.5rem;
  margin-bottom: 1rem;
}

.od-date-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  background: var(--od-surface);
  border: 1px solid var(--od-border);
  border-radius: 6px;
  padding: 0.15rem 0.35rem;
}

.od-date-input:focus {
  outline: none;
  border-color: var(--primary);
}

.od-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  width: 100%;
}

.od-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.od-description {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.5rem 0 1rem;
  white-space: pre-wrap;
}

/* Inline edit (Bearbeiten-Modus) */
.order-detail-container .od-inline-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-detail-container .od-inline-edit-grid .form-group {
  margin-bottom: 0;
}

.od-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.od-title-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--od-border);
  border-radius: 8px;
  background: var(--od-surface-2);
  color: var(--od-text);
  font-family: inherit;
}

.od-title-input:focus {
  outline: none;
  border-color: var(--primary);
}

.od-inline-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--od-border);
  border-radius: 8px;
  background: var(--od-surface-2);
  color: var(--od-text);
  font: inherit;
  resize: vertical;
}

.od-inline-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* Date grid (view mode, 4 cells) */
.od-date-grid-view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 0.5px solid var(--od-border);
}

.od-date-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  background: var(--od-surface-2);
  border-radius: 7px;
  padding: 0.6rem 0.75rem;
}

.od-date-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.od-date-value {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
}

/* Section header (inside cards) */
.od-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.od-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.od-section-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--od-surface-2);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
}

.od-section-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.2s;
  flex-shrink: 0;
}

.od-section-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Empty state */
.od-empty {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
}

/* ToDo list */
.od-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.od-todo-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: var(--od-surface-2);
  border-radius: 7px;
  border-left: 3px solid var(--primary);
}

.od-todo-item--done {
  border-left-color: #10b981;
  opacity: 0.7;
}

.od-todo-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: white;
  transition: all 0.2s;
}

.od-todo-item--done .od-todo-check {
  background: #10b981;
  border-color: #10b981;
}

.od-todo-check:hover {
  border-color: var(--primary);
}

.od-todo-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}

.od-todo-item--done .od-todo-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.od-todo-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}

.od-todo-badge--open {
  background: rgba(220, 38, 38, 0.15);
  color: var(--primary);
}

.od-todo-badge--done {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* Document empty drop-zone */
.od-doc-upload {
  margin-bottom: 0.85rem;
}

.od-doc-upload-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.od-doc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1.5px dashed var(--od-border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Kolonnen list (sidebar) */
.od-kolonnen-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.od-kolonnen-list .kolonne-card {
  min-height: 132px;
}

/* Persons */
.od-persons-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.od-person-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  background: var(--od-surface-2);
  border-radius: 7px;
}

.od-person-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}

/* Devices list (sidebar) */
.od-devices-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Timestamps */
.od-ts-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.od-ts-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.od-ts-key {
  color: var(--text-muted);
}

.od-ts-val {
  color: var(--text-muted);
  text-align: right;
}

/* ==============================================
   EDIT MODE
   ============================================== */

.od-edit-card {
  background: var(--od-surface);
  border: 0.5px solid var(--od-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
}

.od-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.od-edit-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.od-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.od-edit-full {
  grid-column: 1 / -1;
}

.od-section {
  margin-bottom: 0;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  border-top: 0.5px solid var(--od-border);
}

.od-section > .od-section-label {
  display: block;
  margin-bottom: 0.75rem;
}

/* Date grid in edit form (2-col) */
.od-date-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.75rem;
}

/* ==============================================
   SHARED UTILITY CLASSES
   ============================================== */

.btn-edit {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  background: var(--primary);
  color: white;
}

.btn-edit:hover {
  background: var(--primary-dark);
}

.btn-remove-small {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.btn-remove-small:hover {
  background: var(--error);
  color: white;
}

.status-badge {
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-select {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  border: none;
  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='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  transition: opacity 0.2s ease;
}

.status-select:hover {
  opacity: 0.9;
}

.status-select:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.status-select option {
  background-color: #333;
  color: white;
}

.status-verfügbar { background-color: #10b981; }
.status-gebucht   { background-color: #3b82f6; }
.status-in-wartung { background-color: #f59e0b; }
.status-defekt    { background-color: #ef4444; }

/* Customer */
.customer-info {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-theme="light"] .customer-info {
  background: var(--od-surface-2);
}

.customer-info h3 {
  margin: 0;
  font-size: 1.1rem;
}

.customer-info-clickable {
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.customer-info-clickable:hover {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Address */
.address-text {
  color: var(--text);
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.address-text-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

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

.map-container {
  margin-top: 1rem;
  position: relative;
}

.map-preview-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 111px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--od-surface-2, rgba(255, 255, 255, 0.03));
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.map-preview-link:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--od-surface-2, rgba(255, 255, 255, 0.05)));
}

.map-preview-link-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.map-preview-link-title {
  font-size: 0.9rem;
  line-height: 1.2;
}

.map-preview-link-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 240px;
}

.map-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  font-size: 0.875rem;
}

.map-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Note */
.note-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

[data-theme="light"] .note-content {
  background: var(--od-surface-2);
}

.note-content p {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 0.9rem;
}

/* Device item */
.device-item {
  position: relative;
  background: var(--od-surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.device-item--has-image {
  border-color: transparent;
}

.device-item--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.device-item--has-image .device-item-header,
.device-item--has-image .device-number {
  position: relative;
  z-index: 1;
}

.device-item--has-image .device-item-header h4,
.device-item--has-image .device-number,
.device-item--has-image .device-license-plate {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.device-item:hover {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.1);
  transform: translateY(-1px);
}

.device-item--has-image:hover {
  border-color: transparent;
  background: transparent;
}

.device-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.35rem;
}

.device-item-header h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  flex: 1;
}

.device-number,
.device-license-plate {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
}

/* Form elements */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
  background: var(--od-surface-2);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.75rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.btn-link {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-link:hover {
  background: var(--primary);
  color: white;
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

/* Kolonne multiselect (modal) */
.kolonne-multiselect {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.kolonne-multiselect-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

[data-theme="light"] .kolonne-multiselect-item {
  background: var(--od-surface-2);
}

.kolonne-multiselect-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .kolonne-multiselect-item:hover {
  background: var(--od-surface-3);
}

.kolonne-multiselect-item input {
  accent-color: var(--primary);
  cursor: pointer;
}

.no-options {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0 0;
}

/* ==============================================
   DOCUMENTS
   ============================================== */

.document-upload-area {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

[data-theme="light"] .document-upload-area {
  background: var(--od-surface-2);
}

.document-upload-area:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.upload-label {
  cursor: pointer;
  display: inline-block;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.upload-button-icon {
  flex-shrink: 0;
}

.document-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.document-icon-svg {
  flex-shrink: 0;
}

.btn-document-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-document-action-icon {
  flex-shrink: 0;
}

.upload-button:hover {
  background: var(--primary-dark);
}

.upload-button-camera {
  cursor: pointer;
  border: none;
}

.document-upload-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.document-pending-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.document-pending-name label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-pending-name input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  box-sizing: border-box;
}

[data-theme="light"] .document-pending-name input {
  background: var(--od-surface-2);
}

.document-pending-name input:focus {
  outline: none;
  border-color: var(--primary);
}

.document-pending-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.document-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.document-filter-chip {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--od-border);
  background: var(--od-surface-3);
  color: var(--od-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.document-filter-chip:hover {
  background: var(--od-border);
  color: var(--od-text);
}

.document-filter-chip--active {
  color: var(--text);
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

/* Document list – new design */
.document-item {
  background: var(--od-surface);
  border: 0.5px solid var(--od-border);
  border-left: 3px solid var(--od-muted);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

.document-item-icon {
  flex-shrink: 0;
  color: var(--text);
}

.document-item-body {
  flex: 1;
  min-width: 0;
}

.document-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--od-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-item-meta {
  font-size: 10px;
  color: var(--od-muted);
  margin-top: 0.2rem;
}

.document-item-category {
  font-weight: 500;
}

.document-item-size,
.document-item-date {
  color: var(--od-muted);
}

.document-item-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.document-action-btn {
  background: var(--od-surface-3);
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--od-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.document-action-btn:hover {
  background: var(--od-border);
}

.document-action-btn-delete {
  color: #e63030;
}

.document-action-btn-delete:hover {
  background: rgba(230, 48, 48, 0.15);
}

/* ==============================================
   MODAL STYLES
   ============================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* Preview Modal */
.modal-preview {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  min-width: 600px;
}

.preview-content {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.preview-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.preview-content iframe {
  width: 100%;
  min-height: 600px;
  border-radius: 8px;
}

.preview-not-supported {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.preview-not-supported p {
  margin-bottom: 1rem;
}

.preview-not-supported .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-not-supported .btn-primary-icon {
  flex-shrink: 0;
}

/* Camera Modal */
.modal-camera {
  max-width: min(90vw, 560px);
}

.camera-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.camera-error {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.camera-error-hint {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* ==============================================
   RESPONSIVE
   ============================================== */

@media (max-width: 900px) {
  .od-date-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .order-detail-container {
    padding: 0.75rem;
  }

  .od-layout {
    flex-direction: column;
  }

  /* Titel-/Hauptspalte zuerst, Sidebar (Status, …) darunter — Desktop unverändert (DOM: Sidebar links) */
  .od-col-main {
    width: 100%;
    order: 1;
  }

  .od-col-side {
    width: 100%;
    order: 2;
  }

  .od-date-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .od-edit-card {
    padding: 1rem 1.1rem;
  }

  .od-edit-grid {
    grid-template-columns: 1fr;
  }

  .od-edit-full {
    grid-column: 1;
  }

  .od-date-grid {
    grid-template-columns: 1fr;
  }

  .od-title {
    font-size: 1.2rem;
  }

  /* Modals */
  .modal-preview {
    min-width: auto;
    width: 95vw;
  }

  .preview-content iframe {
    min-height: 400px;
  }

  .modal-content {
    padding: 1.25rem;
  }

  .modal-header {
    margin-bottom: 1rem;
  }

  .modal-header h2 {
    font-size: 1.25rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .form-actions .btn-primary,
  .form-actions .btn-secondary {
    width: 100%;
    text-align: center;
    padding: 0.875rem;
  }

  .document-item {
    flex-wrap: wrap;
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .document-item-body {
    width: 100%;
    min-width: 0;
  }

  .document-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==============================================
   CONTACT SELECTOR (edit mode)
   ============================================== */

.contact-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.65rem 0.875rem;
  background: var(--od-surface-2);
  border: 1.5px solid var(--od-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.contact-option:hover {
  border-color: var(--primary);
  background: var(--od-surface-3);
}

.contact-option--active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--od-surface-2));
}

.contact-option-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--od-text);
}

.contact-option-meta {
  font-size: 0.78rem;
  color: var(--od-muted);
}

/* ==============================================
   CONTACT DISPLAY (view mode)
   ============================================== */

.contact-display {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0;
}

.contact-display-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, var(--od-surface-3));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.contact-display-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.contact-display-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--od-text);
}

.contact-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.contact-display-meta {
  font-size: 0.82rem;
  color: var(--primary);
  text-decoration: none;
  transition: opacity 0.15s;
}

.contact-display-meta:hover {
  opacity: 0.75;
}

/* ==============================================
   MOBILE APP-LAYOUT (gepinnter Kopf + Tabs)
   ============================================== */

.od-mobile {
  display: flex;
  flex-direction: column;
}

.od-mobile-header {
  position: sticky;
  /* Bündig unter der fixen oberen Menüleiste andocken. Die Nav schrumpft beim
     Scrollen (4 Stufen) und schreibt ihre aktuelle Höhe in --app-nav-height;
     gleiche Transition wie die Nav → keine Lücke. */
  top: var(--app-nav-height, calc(88px + env(safe-area-inset-top, 0px)));
  transition: top 200ms ease;
  z-index: 50;
  background: var(--od-surface-2);
  border-bottom: 1px solid var(--od-border);
  margin-bottom: 1rem;
  padding: 0.5rem 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.od-mobile-title {
  min-width: 0;
}

.od-mobile-title .od-title {
  font-size: 1.15rem;
}

/* Status + Aktionen teilen sich eine Zeile (platzsparend). */
.od-mobile-header-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.od-mobile-status {
  flex: 1;
  min-width: 0;
}

.od-mobile-header .od-header-actions {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.od-mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 5.5rem;
}

@media (max-width: 480px) {
  .order-detail-container {
    padding: 0.5rem;
  }

  .od-title {
    font-size: 1.1rem;
  }

  .od-date-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .od-date-cell {
    padding: 0.5rem 0.6rem;
  }

  .document-item {
    padding: 0.65rem 0.75rem;
  }
}

.meine-dokumente-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.meine-dokumente-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.meine-dokumente-header {
  margin-bottom: 1.5rem;
}

.meine-dokumente-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.35rem 0;
}

.meine-dokumente-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.meine-dokumente-card {
  margin-top: 0;
}

/* Preview overlay */
.meine-dokumente-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  cursor: pointer;
}

.meine-dokumente-preview-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  background: var(--bg-dark, #1a1a1a);
  border-radius: 12px;
  overflow: hidden;
  cursor: default;
}

.meine-dokumente-preview-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.meine-dokumente-preview-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.meine-dokumente-preview-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.meine-dokumente-preview-iframe {
  width: 90vw;
  height: 90vh;
  border: none;
  min-width: 320px;
  min-height: 400px;
}
.meine-kolonne-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.meine-kolonne-loading,
.meine-kolonne-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.meine-kolonne-loading p,
.meine-kolonne-empty p {
  margin: 0.5rem 0 0;
}

.meine-kolonne-empty h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 1rem 0 0.5rem;
}

.meine-kolonne-hint {
  font-size: 0.9rem;
  margin-top: 1rem;
  opacity: 0.9;
}

.meine-kolonne-loading svg,
.meine-kolonne-empty > svg {
  opacity: 0.6;
}

/* Auswahl bei mehreren Kolonnen */
.meine-kolonne-header {
  margin-bottom: 1.5rem;
}

.meine-kolonne-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.35rem 0;
}

.meine-kolonne-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.meine-kolonne-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.meine-kolonne-list li {
  margin: 0;
}

.meine-kolonne-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--od-surface, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--od-border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.meine-kolonne-card:hover {
  background: var(--od-surface-2, rgba(255, 255, 255, 0.08));
  border-color: var(--primary, #3b82f6);
}

.meine-kolonne-card svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}/* ── Office Pool ─────────────────────────────────────────────────────────── */

.op-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.op-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 16px;
  flex-wrap: wrap;
}

.op-title {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.03em;
  flex: 1;
}

.op-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.op-header-more-wrap {
  position: relative;
}

.op-header-more-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}

.op-header-more-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.15);
}

.op-header-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  padding: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--secondary) 92%, var(--bg-dark));
  border: 0.5px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  z-index: 50;
}

.op-header-more-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-body);
}

.op-header-more-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .op-header-more-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.op-mobile-main-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  gap: 0;
}

.op-mobile-main-tab {
  flex: 1;
  padding: 12px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.op-mobile-main-tab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.op-mobile-main-tab-badge {
  background: var(--primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 1.25rem;
  text-align: center;
}

.op-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity 0.15s;
}

.op-btn:hover { opacity: 0.85; }

.op-btn-primary {
  background: var(--primary);
  color: #fff;
}

.op-btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 0.5px solid var(--border);
}

/* ── Filter: Status-Tabs + Kategorie-Chips ────────────────────────────────── */
.op-filters-block {
  flex-shrink: 0;
  margin-bottom: 2px;
}

.op-status-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface2, color-mix(in srgb, var(--bg-card) 85%, transparent));
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.op-status-tab {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, var(--text-muted));
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.op-status-tab:hover {
  color: var(--text);
}

.op-status-tab.active {
  background: var(--surface, var(--secondary));
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .op-status-tab.active {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.op-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.op-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
}

.op-sort-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.op-sort-select {
  border: 0.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface2, var(--bg-card));
  color: var(--text);
  font-size: 11px;
  padding: 6px 10px;
  font-family: var(--font-body);
}

.op-category-chips--narrow-clamp {
  max-height: 62px;
  overflow: hidden;
  position: relative;
}

.op-category-chips--sheet {
  max-height: none;
  overflow: visible;
  padding-bottom: 8px;
}

.op-chip {
  flex-shrink: 0;
}

.op-chip.op-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 0.5px solid var(--border);
  background: var(--surface2, var(--bg-card));
  color: var(--muted, var(--text-muted));
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-body);
}

.op-category-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.op-category-chip-icon svg {
  display: block;
}

.op-chip.op-category-chip:hover {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

[data-theme="light"] .op-chip.op-category-chip:hover {
  border-color: rgba(0, 0, 0, 0.12);
}

.op-chip.op-category-chip.active {
  background: rgba(230, 48, 48, 0.12);
  border-color: rgba(230, 48, 48, 0.3);
  color: var(--red, var(--primary));
}

.op-chip.op-category-chip.op-category-chip--mine.active {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

.op-chip-count {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
}

.op-filter-more-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  background: var(--surface2, var(--bg-card));
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.op-filter-more-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.15);
}

.op-filter-more-btn.active {
  background: rgba(230, 48, 48, 0.12);
  border-color: rgba(230, 48, 48, 0.3);
  color: var(--red, var(--primary));
}

.op-filter-more-count {
  font-weight: 700;
}

.op-more-filters-menu {
  border: 0.5px solid var(--border);
  border-radius: 12px;
  background: var(--secondary);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
  padding: 10px;
  min-width: 280px;
}

.op-filter-active-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.op-filter-active-tag {
  border: 0.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-body);
  padding: 3px 8px;
  cursor: pointer;
}

.op-filter-active-line {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.op-filter-active-sep {
  opacity: 0.5;
}

.op-filter-reset {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--red, var(--primary));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.op-filter-reset:hover {
  opacity: 0.85;
}

/* Bottom sheet (mobile Kategorien) */
.op-filter-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.op-filter-sheet {
  width: 100%;
  max-height: min(70vh, 520px);
  background: var(--secondary);
  border: 0.5px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  animation: op-sheet-up 0.22s ease-out;
}

@keyframes op-sheet-up {
  from {
    transform: translateY(100%);
    opacity: 0.85;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.op-filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

.op-filter-sheet-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.op-filter-sheet-done {
  border: none;
  background: transparent;
  color: var(--red, var(--primary));
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 4px 8px;
}

.op-filter-sheet .op-category-chips {
  padding: 12px 14px 20px;
  overflow-y: auto;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.op-body {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
  margin-top: 12px;
}

/* ── Feed ─────────────────────────────────────────────────────────────────── */
.op-feed {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.op-feed-group {
  margin-bottom: 6px;
}

.op-feed-group-label {
  padding: 12px 4px 8px;
  min-width: 0;
}

.op-feed-group-label-text {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted, var(--text-muted));
}

.op-feed-group-label-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 24px;
  opacity: 0.85;
}

/* ── Entry lead: category above checkbox ───────────────────────────────────── */
.op-entry-lead {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 40px;
  padding-top: 2px;
}

.op-entry-lead .op-cat-icon {
  margin-top: 0;
}

.op-entry-lead .op-checkbox {
  margin-top: 0;
}

.op-entry-lead-spacer {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Entry ─────────────────────────────────────────────────────────────────── */
.op-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  animation: op-enter 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  animation-delay: calc(var(--op-i, 0) * 40ms);
  position: relative;
}

/* Offenes Zuweisungs-Dropdown über nachfolgenden Karten + Aktions-Spalte legen */
.op-entry:has([data-op-assign-open]) {
  z-index: 30;
}

.op-entry:has([data-op-assign-open]) .op-entry-body {
  position: relative;
  z-index: 2;
}

@keyframes op-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.op-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
/* Lighten the right border on hover while keeping left priority color */
.op-entry:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.op-entry--unread {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent);
}

.op-entry--leaving {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease,
    margin 0.3s ease,
    padding 0.3s ease;
}
.op-entry.priority-urgent:hover { border-left-color: #ff4d4d; }
.op-entry.priority-high:hover   { border-left-color: #fbbf24; }
.op-entry.priority-medium:hover { border-left-color: #7eb8e8; }
.op-entry.priority-low:hover    { border-left-color: #9aa4af; }

.op-entry.type-message {
  opacity: 0.75;
}
.op-entry.type-message:hover { opacity: 1; }

.op-entry.status-done {
  opacity: 0.6;
}

/* Priority border colors */
.op-entry.priority-urgent { border-left-color: #e63030; }
.op-entry.priority-high   { border-left-color: #f59e0b; }
.op-entry.priority-medium { border-left-color: #5a9fd4; }
.op-entry.priority-low    { border-left-color: #7d8590; }

/* Checkbox */
.op-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.op-checkbox:hover {
  border-color: var(--primary);
}

.op-checkbox.checked {
  background: var(--success);
  border-color: var(--success);
}

.op-checkbox svg { color: #fff; }

/* Category icon */
.op-cat-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  margin-top: 1px;
}
[data-theme="light"] .op-cat-icon {
  background: rgba(0,0,0,0.04);
}

/* Entry body — position für Dropdown; z-index nur bei offenem Menü (s. .op-entry:has) */
.op-entry-body {
  flex: 1;
  min-width: 0;
  position: relative;
}

.op-entry-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.op-entry-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  flex: 1;
  min-width: 0;
}

.op-entry-title--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  line-height: 1.38;
  margin: 0 0 8px;
  font-weight: 500;
}

.op-entry-title--full {
  white-space: pre-wrap;
  line-height: 1.38;
  margin: 0 0 8px;
  font-weight: 500;
  text-align: left;
  overflow: visible;
}

.op-entry.status-done .op-entry-title,
.op-entry.status-done .op-entry-title--clamp {
  text-decoration: line-through;
}

.op-priority-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* glow set inline via style prop */
  transition: box-shadow 0.2s;
}

@keyframes op-priority-pulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(230, 48, 48, 0.65), 0 0 0 0 rgba(230, 48, 48, 0.35);
  }
  50% {
    box-shadow: 0 0 10px rgba(230, 48, 48, 0.85), 0 0 0 5px rgba(230, 48, 48, 0);
  }
}

.op-priority-dot--pulse {
  animation: op-priority-pulse 1.6s ease-in-out infinite;
}

/* Card layout (Standard-Einträge) */
.op-entry--card .op-entry-lead {
  padding-top: 6px;
  width: 32px;
}

.op-entry-body--card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.op-entry-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.op-priority-dot-placeholder {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.op-entry-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  flex: 1;
  justify-content: flex-end;
  text-align: right;
  min-width: 0;
}

.op-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 88%, #000 12%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.op-entry-cat-badge-emoji {
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1;
}

.op-entry-card-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0 10px;
  opacity: 0.85;
}

.op-entry-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.op-entry-card-footer-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.op-entry-comment-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  color: var(--text-muted);
  white-space: nowrap;
}

.op-entry-comment-preview--panel {
  font-size: 0.7rem;
}

.op-entry-comment-preview--submission {
  margin-right: 6px;
}

.op-entry-comment-preview-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.op-entry-comment-preview-count {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.op-entry-card-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.op-entry-card-footer-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.op-entry-card-footer-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.op-entry-creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  font-size: 0.7rem;
  line-height: 1.1;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
}

.op-entry-creator-badge .user-avatar {
  gap: 5px;
}

.op-entry-creator-badge .user-avatar-circle--sm {
  width: 20px;
  height: 20px;
  font-size: 0.58rem;
}

.op-entry-card-menu-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.op-entry-card-menu-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.op-entry-card-menu-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.op-entry-card-menu-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--secondary) 92%, var(--bg-dark));
  border: 0.5px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  z-index: 45;
}

.op-entry-card-menu-dropdown--portal {
  position: relative;
  bottom: auto;
  right: auto;
  z-index: auto;
}

.op-entry-card-menu-label {
  padding: 6px 10px 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.op-entry-card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font-body);
}

.op-entry-card-menu-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.op-entry-card-menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.op-entry-card-menu-item--danger {
  color: #f87171;
}

.op-entry-card-menu-item--danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.12);
}

.op-entry-card-menu-sep {
  border: none;
  border-top: 0.5px solid var(--border);
  margin: 4px 6px;
  opacity: 0.85;
}

[data-theme="light"] .op-entry-card-menu-dropdown {
  background: var(--bg-card);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .op-entry-card-menu-item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .op-entry-card-menu-btn:hover {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
}

.op-entry-card-footer-hover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.op-entry--card:hover .op-entry-card-footer-hover {
  opacity: 1;
  pointer-events: auto;
}

.op-entry-card-footer-hover .op-entry-card-hover-action {
  pointer-events: auto;
}

.op-entry-card-footer-hover .op-link-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 8px;
}

.op-entry-card-footer-hover .op-link-btn svg {
  width: 18px;
  height: 18px;
}

@media (hover: none) {
  .op-entry--card .op-entry-card-footer-hover {
    opacity: 1;
    pointer-events: auto;
  }
}

.op-btn-assign-self {
  padding: 4px 10px;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.op-btn-assign-self:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .op-btn-assign-self:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}

.op-btn-assign-self:disabled {
  opacity: 0.5;
  cursor: default;
}

.op-btn-assign-self--sm {
  font-size: 0.7rem;
  padding: 3px 8px;
}

.op-btn-assign-other-trigger {
  width: 32px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-body);
}

.op-btn-assign-other-trigger:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}

.op-btn-assign-other-trigger--sm {
  width: 28px;
  height: 26px;
  font-size: 0.9rem;
}

.op-entry-assign-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.op-entry-assignee-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.op-entry-assignee-pill span:not(.op-entry-assignee-clear) {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.op-entry-assignee-clear {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}

.op-entry-assignee-pill:hover .op-entry-assignee-clear {
  opacity: 1;
}

.op-panel-assignee-row:hover .op-entry-assignee-clear {
  opacity: 1;
}

.op-entry-assignee-clear:hover {
  background: rgba(220, 38, 38, 0.15);
  color: var(--primary);
}

.op-entry-assignee-clear--sm {
  width: 20px;
  height: 20px;
  font-size: 0.9rem;
  opacity: 1;
}

.op-entry-meta--submission {
  margin-top: 8px;
}

.op-entry-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: left;
  margin-bottom: 4px;
}

.op-entry-desc--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  line-height: 1.38;
  opacity: 0.85;
  margin-bottom: 10px;
}

.op-entry-desc--full {
  white-space: pre-wrap;
  line-height: 1.38;
  opacity: 0.85;
  text-align: left;
  margin-bottom: 10px;
}

.op-entry-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.op-entry-due {
  font-size: 0.75rem;
  font-weight: 500;
}
.op-entry-due.overdue { color: #e63030; }

.op-entry-assignee {
  display: flex;
  align-items: center;
  gap: 5px;
}

.op-assignee-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.op-assignee-picker[data-op-assign-open] {
  z-index: 40;
}

.op-assignee-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 2px;
  margin: -2px -6px -2px -2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.12s;
}

.op-assignee-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .op-assignee-trigger:hover {
  background: rgba(0, 0, 0, 0.05);
}

.op-assignee-trigger--muted {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
}

.op-assignee-trigger--muted:hover {
  background: rgba(220, 38, 38, 0.14);
}

.op-assign-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 10px;
  /* Deutlich deckend, damit Inhalt dahinter nicht durchscheint */
  background: color-mix(in srgb, var(--secondary) 88%, var(--bg-dark));
  border: 0.5px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Per Portal an document.body: Position kommt aus inline style (fixed), nicht vom Feed-Scroll clipping */
.op-assign-dropdown--portal {
  position: fixed;
  right: auto;
}

[data-theme='light'] .op-assign-dropdown {
  background: color-mix(in srgb, #f8fafc 92%, var(--secondary));
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
}

.op-assignee-picker--up .op-assign-dropdown {
  top: auto;
  bottom: calc(100% + 6px);
  left: auto;
  right: 0;
}

.op-assign-dropdown-title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 8px;
}

.op-assign-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.op-assign-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .op-assign-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.op-assign-dropdown-item--danger {
  color: var(--primary);
  margin-top: 4px;
  border-top: 0.5px solid var(--border);
  border-radius: 0 0 8px 8px;
  padding-top: 10px;
}

.op-assign-dropdown-item--danger:hover {
  background: rgba(220, 38, 38, 0.1);
}

.op-assign-dropdown-loading {
  padding: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.op-assignee-avatar-img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 50%;
  font-size: 0.6rem !important;
  flex-shrink: 0;
}

/* Actions on hover — Spalte selbst nie pointer-events (sonst unsichtbare Fläche blockiert das Zuweisen-Dropdown) */
.op-entry-actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  position: relative;
}
.op-entry:hover .op-entry-actions {
  opacity: 1;
}

.op-entry:hover .op-entry-actions .op-action-btn,
.op-entry:hover .op-entry-actions .op-link-btn {
  pointer-events: auto;
}

.op-action-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.op-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.op-action-btn--reopen {
  color: var(--success);
  border-color: var(--success);
}
.op-action-btn--reopen:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--success);
  color: var(--success);
}

.op-link-btn {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .op-link-btn {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.op-link-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.op-link-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
[data-theme="light"] .op-link-btn:hover {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.06);
}
/* Auftrag / Entität öffnen */
.op-link-btn--entity {
  color: var(--primary);
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.1);
}
.op-link-btn--entity:hover {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}
[data-theme="light"] .op-link-btn--entity {
  background: rgba(220, 38, 38, 0.08);
}
[data-theme="light"] .op-link-btn--entity:hover {
  color: #fff;
}
/* Archivieren */
.op-link-btn--archive {
  color: var(--text-muted);
  border-color: rgba(125, 133, 144, 0.5);
  background: rgba(125, 133, 144, 0.12);
}
.op-link-btn--archive:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: rgba(125, 133, 144, 0.2);
}

/* ── Tasks panel (right side) ────────────────────────────────────────────── */
.op-tasks-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: fit-content;
  max-height: calc(100vh - 200px);
  position: sticky;
  top: calc(var(--nav-h, 56px) + 10px);
}

.op-tasks-panel--embedded {
  width: 100%;
  max-height: min(60vh, 520px);
  position: static;
}

.op-panel-header {
  padding: 14px 16px 12px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
}

.op-panel-header--embedded {
  padding-top: 12px;
}

.op-panel-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.op-panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.op-panel-badge {
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.op-panel-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.op-panel-filter-dd {
  position: relative;
  flex: 1;
  min-width: 0;
}

.op-panel-filter-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: var(--surface2, rgba(255, 255, 255, 0.04));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.op-panel-filter-trigger:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.op-panel-filter-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-panel-filter-trigger-avatar {
  flex-shrink: 0;
}

.op-panel-filter-chevron {
  flex-shrink: 0;
  opacity: 0.5;
  font-size: 0.65rem;
}

.op-panel-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: min(240px, 50vh);
  overflow-y: auto;
  padding: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--secondary) 92%, var(--bg-dark));
  border: 0.5px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.op-panel-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}

.op-panel-filter-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.op-panel-filter-option.active {
  background: rgba(220, 38, 38, 0.12);
  color: var(--text);
}

.op-panel-filter-option-avatar {
  flex-shrink: 0;
}

.op-panel-filter-reset {
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.op-panel-filter-reset:hover {
  opacity: 0.9;
}

[data-theme="light"] .op-panel-filter-menu {
  background: var(--bg-card);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .op-panel-filter-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .op-panel-filter-trigger {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .op-panel-filter-trigger:hover {
  border-color: rgba(0, 0, 0, 0.12);
}

.op-panel-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.op-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}

.op-panel-item:has([data-op-assign-open]) {
  z-index: 25;
}

.op-panel-item:last-child { border-bottom: none; }
.op-panel-item:hover { background: rgba(255,255,255,0.03); }

.op-panel-item-text {
  flex: 1;
  min-width: 0;
}

.op-panel-item-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.op-panel-item-title--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  line-height: 1.35;
}

.op-panel-item-unread-dot {
  color: var(--primary);
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.op-panel-item-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.op-panel-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0;
}

.op-panel-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.op-panel-item--task {
  align-items: flex-start;
}

.op-panel-assignee-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.op-panel-assignee-name {
  font-size: 0.72rem;
  color: var(--text-muted);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-panel-item-assign {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.1);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.op-panel-item-assign:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.6);
}

/* Empty state */
.op-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
  gap: 10px;
}

.op-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
[data-theme="light"] .op-empty-icon { background: rgba(0,0,0,0.04); }

.op-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.op-empty-sub {
  font-size: 0.82rem;
  opacity: 0.65;
  max-width: 240px;
  line-height: 1.5;
}

/* ── Create modal ────────────────────────────────────────────────────────── */
.op-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.op-modal {
  background: var(--secondary);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.op-modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.op-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.op-form-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.op-form-input,
.op-form-select,
.op-form-textarea {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  transition: border-color 0.15s;
  width: 100%;
}

.op-form-input:focus,
.op-form-select:focus,
.op-form-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.op-form-textarea { resize: vertical; min-height: 80px; }

.op-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.op-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── User-Anfragen (Feed) ───────────────────────────────────────────────── */
.op-entry--user-submission {
  border-radius: 8px;
}

.op-entry--user-submission-clickable {
  cursor: pointer;
}

.op-entry--user-submission-clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.op-sub-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes op-sub-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.92); }
}

.op-sub-dot--pulse {
  animation: op-sub-pulse 1.35s ease-in-out infinite;
}

.op-user-submission-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 4px 10px 4px 4px;
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.op-office-note-panel {
  margin: 0 0 10px 52px;
  max-width: 520px;
}

.op-office-note-panel--inline {
  margin: 0;
  max-width: none;
}

.op-office-note-inline-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.op-office-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}

.op-office-note-toggle:hover {
  color: var(--text);
}

.op-office-note-editor {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-office-note-textarea {
  min-height: 72px;
}

.op-office-note-save {
  align-self: flex-start;
}

.ma-office-note-inline {
  margin-top: 10px;
}

.ma-office-note-inline--unread {
  background: color-mix(in srgb, #3b82f6 10%, transparent);
  border-radius: 10px;
  padding: 8px 10px 10px;
}

.ma-office-note-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.ma-office-note-label-row--author {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ma-office-note-author {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.ma-office-note-author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ma-office-note-author-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.ma-office-note-author .ma-office-note-label {
  margin-top: 0;
}

.ma-office-note-bubble {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface2, rgba(255, 255, 255, 0.04));
  border: 0.5px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}

.ma-office-note-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
}

.ma-office-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ma-office-note-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(220, 38, 38, 0.15);
  color: var(--primary);
}

.op-submission-controls {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-submission-status-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 220px;
}

.op-submission-select {
  font-size: 0.85rem;
}

.op-reject-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.op-reject-inline-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.op-rejection-accordion {
  margin-top: 10px;
  border-top: 1px solid var(--border, #334155);
  padding-top: 8px;
}

.op-rejection-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}

.op-rejection-body {
  font-size: 0.85rem;
  color: var(--text);
  padding: 8px 0 4px;
  white-space: pre-wrap;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .op-container { padding: 0 12px 12px; }

  .op-status-tabs {
    width: 100%;
    display: flex;
  }

  .op-status-tab {
    flex: 1;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  .op-body { flex-direction: column; }

  .op-tasks-panel:not(.op-tasks-panel--embedded) {
    width: 100%;
    max-height: 300px;
    position: static;
  }

  .op-chip.op-category-chip {
    font-size: 10px;
    padding: 4px 8px;
    gap: 4px;
  }

  .op-category-chip-icon svg {
    width: 12px;
    height: 12px;
  }

  .op-chip-count {
    font-size: 9px;
  }

  .op-entry-actions {
    opacity: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ── Office Pool page: scoped light / dark (only .op-page--office-pool) ───── */
[data-theme="light"] .op-page--office-pool.op-container {
  background: #f4f6f8;
}

[data-theme="light"] .op-page--office-pool .op-entry {
  background: #fff;
  border: none;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .op-page--office-pool .op-entry:hover {
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .op-page--office-pool .op-feed-group-label-text {
  color: #94a3b8;
}

[data-theme="light"] .op-page--office-pool .op-tasks-panel {
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .op-page--office-pool .op-panel-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .op-page--office-pool .op-status-tab.active {
  background: #0f172a;
  color: #f8fafc;
  box-shadow: none;
}

[data-theme="light"] .op-page--office-pool .op-chip.op-category-chip.active {
  background: rgba(230, 48, 48, 0.14);
  border-color: rgba(230, 48, 48, 0.38);
  color: var(--primary);
}

[data-theme="light"] .op-page--office-pool .op-chip.op-category-chip.op-category-chip--mine.active {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.38);
  color: #7c3aed;
}

[data-theme="dark"] .op-page--office-pool .op-tasks-panel {
  border-color: var(--border);
}

[data-theme="dark"] .op-page--office-pool .op-entry:hover {
  border-top-color: rgba(255, 255, 255, 0.22);
  border-right-color: rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* ── Creator pill on task cards ────────────────────────────────────────── */
.op-entry-creator-row {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 6px;
  margin: 4px 0 2px;
  padding: 3px 10px 3px 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--text-muted);
  max-width: 100%;
  min-width: 0;
}

[data-theme="light"] .op-entry-creator-row {
  background: rgba(0, 0, 0, 0.04);
}

.op-entry-creator-name {
  display: block;
  min-width: 0;
  max-width: 180px;
  font-size: 0.7rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Compact message card (type === 'message') ─────────────────────────── */
.op-entry--message-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  cursor: default;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  opacity: 0.78;
  animation: op-enter 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  animation-delay: calc(var(--op-i, 0) * 30ms);
  position: relative;
  min-height: 0;
}

.op-entry--message-compact:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .op-entry--message-compact:hover {
  background: rgba(0, 0, 0, 0.03);
}

.op-entry--message-compact.priority-urgent { border-left-color: #e63030; }
.op-entry--message-compact.priority-high   { border-left-color: #f59e0b; }
.op-entry--message-compact.priority-medium { border-left-color: #5a9fd4; }
.op-entry--message-compact.priority-low    { border-left-color: #7d8590; }

.op-entry--message-compact.status-archived,
.op-entry--message-compact.status-done {
  opacity: 0.45;
}

.op-msg-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1;
}

[data-theme="light"] .op-msg-icon {
  background: rgba(0, 0, 0, 0.05);
}

.op-msg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  overflow: visible;
}

.op-msg-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}

.op-msg-bottom {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.op-msg-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.op-msg-title {
  font-weight: 500;
  color: var(--text);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  text-align: left;
  max-width: 100%;
}

.op-msg-desc {
  color: var(--text-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  text-align: left;
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
}

.op-msg-time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: nowrap;
}

.op-msg-link,
.op-msg-archive,
.op-msg-delete {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0.5px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.op-msg-link:hover,
.op-msg-archive:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.05);
}

.op-msg-delete {
  font-size: 1rem;
  line-height: 1;
}

.op-msg-delete:hover:not(:disabled) {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
}

[data-theme="light"] .op-msg-link:hover,
[data-theme="light"] .op-msg-archive:hover {
  background: rgba(0, 0, 0, 0.04);
}

@media (max-width: 560px) {
  .op-entry--message-compact {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .op-msg-body {
    flex: 1 1 calc(100% - 34px);
    min-width: 0;
  }

  .op-msg-right {
    width: 100%;
    margin-left: 30px;
    align-items: stretch;
  }

  .op-msg-bottom {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
  }

  .op-msg-actions {
    justify-content: flex-start;
  }

  .op-entry-creator-badge {
    max-width: 62%;
  }

  .op-msg-title {
    max-width: 100%;
    width: 100%;
  }

  .op-msg-desc {
    font-size: 0.68rem;
    width: 100%;
  }
}
/* KB-Sticker: nur so groß wie die Grafik; Holo-Glanz; currentColor im SVG für Light/Dark */
.holo-kbauf-root--hug {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
}

.holo-kbauf-bleed-body--hug {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.holo-card--hug {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: none;
}

.holo-card {
  --x: 50%;
  --y: 50%;
  --bg-x: 50%;
  --bg-y: 50%;
  position: relative;
  border-radius: var(--dash-radius, 10px);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.12s ease-out;
  will-change: transform;
  background: transparent;
  box-shadow: none;
  border: none;
  /* Kein Überstand: Dashboard-Grid misst/stabilisiert Layout nur innerhalb der Zelle */
  overflow: hidden;
}

.holo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--bg-x) var(--bg-y),
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0.65;
}

.kb-sticker-inline-svg {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: var(--dash-radius, 14px);
  overflow: hidden;
}

.kb-sticker-inline-svg svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  color: #231f20;
  border-radius: inherit;
}

html[data-theme='dark'] .kb-sticker-inline-svg svg {
  color: #f8fafc;
}

.holo-fill-img--raster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
}

.holo-gyro-row--overlay {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  justify-content: center;
}

.holo-gyro-prompt {
  margin: 0;
  font-size: 0.7rem;
  color: var(--dash-muted, #94a3b8);
}

.holo-gyro-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.5);
  color: #e2e8f0;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.holo-gyro-btn:hover {
  background: rgba(0, 0, 0, 0.65);
}

.holo-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--dash-muted, #94a3b8);
  z-index: 0;
}

.holo-img-fallback a {
  color: var(--dash-accent, #60a5fa);
}

@media (prefers-reduced-motion: reduce) {
  .holo-card {
    transform: none !important;
    transition: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   DASHBOARD — Industrial / Utilitarian Design
   Fonts: Barlow Condensed (numbers/headlines) · DM Sans (body)
   ═══════════════════════════════════════════════════════════ */

/* ── Local design tokens (dark default) ────────────────────── */
.dashboard-container {
  --dash-surface:     #161b22;
  --dash-surface-hover: #1c2129;
  --dash-border:      rgba(48, 54, 61, 0.9);
  --dash-radius:      8px;
  /* Akzent folgt der im ThemeContext gewählten Farbe; Rot/Gelb/Grün/Blau bleiben echtem Status vorbehalten */
  --dash-accent:      var(--primary);
  --dash-red:         #dc2626;
  --dash-blue:        #3b82f6;
  --dash-green:       #10b981;
  --dash-yellow:      #f59e0b;
  --dash-text:        #e6edf3;
  --dash-muted:       #7d8590;
  --dash-pad:         1.25rem;
  --dash-inner-bg:    rgba(255, 255, 255, 0.02);
  --dash-inner-bg-2:  rgba(255, 255, 255, 0.03);
  --dash-scrollbar:   rgba(48, 54, 61, 0.9);
  --dash-skeleton:    rgba(255, 255, 255, 0.04);
  --dash-skeleton-mid: rgba(255, 255, 255, 0.08);
  --dash-status-hover: rgba(255, 255, 255, 0.12);

  padding: 1.5rem 2rem 3rem;
  max-width: 1440px;
  margin: 0 auto;
  /* clip: horizontal kein Überlauf aus dem Dashboard; vertikal keine erzwungenen Scrollbars */
  overflow-x: clip;
  overflow-y: visible;
}

/* ── Header mit Edit-Modus-Button ─────────────────────────── */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.dashboard-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dash-text);
  margin: 0;
}
.dashboard-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--dash-border);
  background: var(--dash-surface);
  color: var(--dash-muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dashboard-edit-btn:hover {
  color: var(--dash-text);
  background: var(--dash-surface-hover);
  border-color: var(--dash-muted);
}
.dashboard-edit-btn--done {
  width: auto;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── Light theme: angenehme helle Farben & Kontraste ──────── */
[data-theme="light"] .dashboard-container {
  --dash-surface:       #ffffff;
  --dash-surface-hover:  #f1f5f9;
  --dash-border:        #e2e8f0;
  --dash-red:            #dc2626;
  --dash-blue:           #2563eb;
  --dash-green:          #059669;
  --dash-yellow:         #d97706;
  --dash-text:           #0f172a;
  --dash-muted:          #64748b;
  --dash-inner-bg:       rgba(0, 0, 0, 0.03);
  --dash-inner-bg-2:     rgba(0, 0, 0, 0.04);
  --dash-scrollbar:      #cbd5e1;
  --dash-skeleton:       rgba(0, 0, 0, 0.06);
  --dash-skeleton-mid:  rgba(0, 0, 0, 0.1);
  --dash-status-hover:   rgba(0, 0, 0, 0.05);
}

/* Wrapper für ResizeObserver / deferred Grid-Mount */
.dashboard-grid-shell {
  width: 100%;
  min-height: 1px;
}

/* ── react-grid-layout container ────────────────────────── */
.dashboard-grid {
  /* react-grid-layout sets position:relative + absolute children */
  overflow-x: clip;
  overflow-y: visible;
}

/* ── Base card (fills RGL grid cell or mobile list slot) ─── */
.dash-card {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background: var(--dash-surface);
  border: 0.5px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: var(--dash-pad);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dash-card:not(.dash-card--edit) {
  cursor: pointer;
}

.dash-card--edit {
  cursor: default;
  outline: 1px dashed var(--dash-accent);
  outline-offset: 2px;
}
.dash-card--edit:active {
  cursor: default;
}

/* Drag-Handle (nur im Edit-Modus) */
.dash-card-drag-handle {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.35rem;
  border-radius: 6px;
  color: var(--dash-muted);
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.dash-card-drag-handle:active {
  cursor: grabbing;
}
.dash-card-drag-handle:hover {
  color: var(--dash-text);
  background: var(--dash-inner-bg);
}

/* Ausblenden-Button (X) */
.dash-card-hide-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--dash-muted);
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s, background 0.2s;
}
.dash-card-hide-btn:hover {
  color: var(--dash-red);
  background: rgba(220, 38, 38, 0.12);
}

.dash-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
}

/* KB-Aufkleber: kein Karten-Rahmen/Hintergrund — Inhalt bleibt in der Zelle (kein Überstand → stabiles RGL-Layout beim Reload) */
.dash-card.dash-kb_aufkleber {
  background: transparent;
  border: none;
  box-shadow: none !important;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: var(--dash-radius);
}

.dash-card.dash-kb_aufkleber:hover:not(.dash-card--edit):not(.dash-card--dragging) {
  background: transparent;
}

/* KB im Raster: Innenbereich = Zelle → größtes Quadrat ≤ Zelle */
.dash-card.dash-kb_aufkleber .dash-card-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  container-type: size;
  container-name: kbauf-sticker;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.dash-card.dash-kb_aufkleber .dash-card-inner .holo-kbauf-root--hug {
  width: min(100cqw, 100cqh);
  max-width: 100%;
}

@media (max-width: 480px) {
  .dash-card.dash-kb_aufkleber .dash-card-inner .holo-kbauf-root--hug {
    width: min(100%, 92vw, 420px);
  }
}

.dash-kbauf-widget {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-self: center;
  min-height: 0;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.dashboard-grid .react-grid-item:has(.dash-card.dash-kb_aufkleber:hover),
.dashboard-grid .react-grid-item:has(.dash-card.dash-kb_aufkleber.dash-card--dragging) {
  z-index: 6;
}

/* Card being dragged (react-grid-layout / Bearbeiten) */
.dash-card--dragging {
  opacity: 0.85;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* ── react-grid-layout overrides ─────────────────────────── */

/* Drop placeholder */
.react-grid-item.react-grid-placeholder {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px dashed rgba(59, 130, 246, 0.4) !important;
  border-radius: var(--dash-radius);
  transition: all 0.2s ease !important;
}

/* Resize handle (SE corner) */
.react-grid-item > .react-resizable-handle {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  z-index: 3;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.react-grid-item > .react-resizable-handle::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--dash-muted);
  border-right: 2px solid var(--dash-muted);
}
.react-grid-item:hover > .react-resizable-handle,
.react-grid-item > .react-resizable-handle:hover {
  opacity: 1;
}

/*
 * Stat-Widgets: gemeinsame Stufen (Container auf der jeweiligen .dash-card)
 * Stufe 1 → Zusatzzeilen / Infoblöcke (Kunden, Kolonnen, Geräte)
 * Kunden: kompakt ab ca. 72×86px (alle Zeilen), komfort ab 172×156px
 * Kolonnen/Geräte Stufe 2: min 220×208px
 * Aufträge: dichter ≤256px · kompakt ≤200/168px (alle Filter) · Filter aus ≤122px Höhe · schmal ≤220px / ≤200px Breite
 */
/* Kolonnen / Geräte: Hintergrundbild über die ganze Karte (kein „Rahmen“ aus Kartenfarbe) */
.dash-card.dash-kolonnen {
  padding: 0;
  gap: 0;
  overflow-x: clip;
  overflow-y: clip;
}

/* Geräte: unten nicht abschneiden — Inhalt bei Bedarf innerhalb der Kachel scrollen */
.dash-card.dash-gerate {
  padding: 0;
  gap: 0;
  overflow-x: clip;
  overflow-y: hidden;
}

.dash-card.dash-kolonnen .dash-card-inner,
.dash-card.dash-gerate .dash-card-inner {
  padding: 0;
  gap: 0;
  overflow-x: clip;
  overflow-y: visible;
  flex: 1 1 auto;
  min-height: 0;
}

.dash-card.dash-kolonnen .dash-stat-inner,
.dash-card.dash-gerate .dash-stat-inner {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--dash-radius);
  overflow-x: clip;
  overflow-y: visible;
}

.dash-card.dash-kolonnen .dash-stat-inner.dash-stat-inner--bg {
  overflow: hidden;
}

.dash-card.dash-gerate .dash-stat-inner {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dash-card.dash-gerate .dash-stat-inner.dash-stat-inner--bg {
  overflow-x: clip;
  overflow-y: auto;
}

.dash-card.dash-kolonnen .dash-stat-inner:not(.dash-stat-inner--bg),
.dash-card.dash-gerate .dash-stat-inner:not(.dash-stat-inner--bg) {
  padding: var(--dash-pad);
  gap: 0.75rem;
}

.dash-card.dash-kolonnen .dash-stat-inner--bg,
.dash-card.dash-gerate .dash-stat-inner--bg {
  background-repeat: no-repeat;
}

/* Kunden: Zusatzzeilen nur in größeren Widget-Zellen (Container-Query) */
.dash-card.dash-kunden {
  container-type: size;
  container-name: dashkunden;
  overflow-x: clip;
  overflow-y: clip;
}

.dash-card.dash-kunden .dash-card-inner {
  overflow-x: clip;
  overflow-y: visible;
  min-height: 0;
}

.dash-kunden-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 0.35rem;
}

.dash-kunden-extra {
  display: none;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--dash-border);
  font-size: 0.72rem;
  color: var(--dash-muted);
  gap: 0.35rem;
  flex-direction: column;
  flex-shrink: 0;
}

.dash-kunden-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.dash-kunden-extra-row--accent {
  color: var(--dash-text);
}

.dash-kunden-extra-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.58rem;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  hyphens: auto;
}

.dash-kunden-extra-val {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dash-text);
  flex-shrink: 0;
  line-height: 1;
  text-align: right;
}

/*
 * Kunden-Zusatzzeilen: zwei Stufen.
 * Kompakt: alle drei Zeilen sichtbar (kleinere Typo) — eine Rasterstufe kleiner als zuvor.
 * Komfort: größere Schrift wie früher ab ca. 172×156.
 * Darunter: keine Zusatzzeilen (nur Gesamtzahl).
 */
@container dashkunden (min-width: 72px) and (min-height: 86px) {
  .dash-kunden-extra {
    display: flex;
    font-size: 0.6rem;
    margin-top: 0.12rem;
    padding-top: 0.32rem;
    gap: 0.2rem;
  }

  .dash-kunden-extra-label {
    font-size: 0.46rem;
    letter-spacing: 0.04em;
  }

  .dash-kunden-extra-val {
    font-size: 0.78rem;
  }
}

@container dashkunden (min-width: 172px) and (min-height: 156px) {
  .dash-kunden-extra {
    font-size: 0.72rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    gap: 0.35rem;
  }

  .dash-kunden-extra-label {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .dash-kunden-extra-val {
    font-size: 1.15rem;
  }
}

/* Kolonnen-Widget: Zusatzinfos in größeren Zellen */
.dash-card.dash-kolonnen {
  container-type: size;
  container-name: dashkol;
}

.dash-kolonne-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 0.35rem;
}

.dash-kolonne-extra {
  display: none;
  margin-top: 0.2rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--dash-border);
  font-size: 0.72rem;
  color: var(--dash-muted);
  flex-direction: column;
  gap: 0.3rem;
  flex-shrink: 0;
}

.dash-kolonne-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.45rem;
}

.dash-kolonne-extra-row--accent {
  color: var(--dash-text);
}

.dash-kolonne-extra-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.58rem;
}

.dash-kolonne-extra-val {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dash-text);
}

.dash-kolonne-names {
  display: none;
  margin: 0.15rem 0 0;
  padding: 0.35rem 0 0;
  list-style: none;
  border-top: 1px solid var(--dash-border);
  font-size: 0.68rem;
  color: var(--dash-muted);
  flex-shrink: 0;
}

.dash-kolonne-names li {
  padding: 0.12rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container dashkol (min-width: 172px) and (min-height: 156px) {
  .dash-kolonne-extra {
    display: flex;
  }
}

@container dashkol (min-width: 220px) and (min-height: 208px) {
  .dash-kolonne-names {
    display: block;
  }
}

/* Meine Kolonne – Dashboard */
.dash-card.dash-meine_kolonne {
  container-type: size;
  container-name: dashmk;
}

.dash-card.dash-meine_kolonne .dash-card-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dash-meine-kolonne {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
  flex: 1;
  font-size: 0.78rem;
  color: var(--dash-text);
}

.dash-meine-kolonne-empty-text {
  margin: 0;
  font-size: 0.8rem;
  color: var(--dash-muted);
}

.dash-meine-kolonne-summary {
  margin: 0;
  font-size: 0.72rem;
  color: var(--dash-muted);
}

.dash-meine-kolonne-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.dash-meine-kolonne-card {
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: var(--dash-surface-hover);
  border: 1px solid var(--dash-border);
}

.dash-meine-kolonne-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.dash-meine-kolonne-name {
  font-weight: 700;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-meine-kolonne-next {
  font-size: 0.65rem;
  color: var(--dash-muted);
  flex-shrink: 0;
}

.dash-meine-kolonne-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  font-size: 0.7rem;
  color: var(--dash-muted);
}

.dash-meine-kolonne-stats strong {
  color: var(--dash-text);
  font-weight: 700;
}

.dash-meine-kolonne-status {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0 0;
  border-top: 1px solid var(--dash-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.65rem;
}

.dash-meine-kolonne-status li {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
}

.dash-meine-kolonne-status-name {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-meine-kolonne-team {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.3rem;
}

.dash-meine-kolonne-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  background: #0ea5e9;
  color: #fff;
}

/* Geräte-Widget: Status + Wartung + Kategorien in größeren Zellen */
.dash-card.dash-gerate {
  container-type: size;
  container-name: dashger;
}

.dash-geraete-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 0.35rem;
}

.dash-geraete-extra {
  display: none;
  margin-top: 0.2rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--dash-border);
  font-size: 0.72rem;
  color: var(--dash-muted);
  flex-direction: column;
  gap: 0.28rem;
  flex-shrink: 0;
}

.dash-geraete-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.45rem;
}

.dash-geraete-extra-row--warn {
  color: var(--dash-text);
}

.dash-geraete-extra-row--danger .dash-geraete-extra-label,
.dash-geraete-extra-row--danger .dash-geraete-extra-val {
  color: var(--dash-red);
}

.dash-geraete-extra-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.56rem;
}

.dash-geraete-extra-val {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dash-text);
}

.dash-geraete-cats {
  display: none;
  margin: 0.1rem 0 0;
  padding: 0.35rem 0 0;
  list-style: none;
  border-top: 1px solid var(--dash-border);
  font-size: 0.65rem;
  color: var(--dash-muted);
  flex-shrink: 0;
}

.dash-geraete-cats li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1rem 0;
}

.dash-geraete-cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.dash-geraete-cat-count {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  color: var(--dash-text);
  flex-shrink: 0;
}

.dash-geraete-mine-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.15rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--dash-border);
  flex: 1 1 auto;
  min-height: 0;
}

.dash-geraete-mine-caption {
  margin: 0;
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dash-muted);
}

.dash-geraete-mine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.dash-geraete-mine-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--dash-border);
}

.dash-geraete-mine-row:last-child {
  border-bottom: none;
}

.dash-geraete-mine-avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-geraete-mine-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dash-border);
  color: var(--dash-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.dash-geraete-mine-main {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.dash-geraete-mine-device {
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--dash-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-geraete-mine-order {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--primary, #3b82f6);
  cursor: pointer;
}

.dash-geraete-mine-order:hover {
  text-decoration: underline;
}

.dash-geraete-mine-order-muted {
  font-size: 0.64rem;
  color: var(--dash-muted);
}

.dash-geraete-mine-to-device {
  flex-shrink: 0;
  padding: 0.2rem 0.25rem;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--primary, #3b82f6);
  cursor: pointer;
  border-radius: 4px;
}

.dash-geraete-mine-to-device:hover {
  background: var(--dash-surface-hover);
}

@container dashger (min-width: 172px) and (min-height: 156px) {
  .dash-geraete-extra {
    display: flex;
  }
}

@container dashger (min-width: 220px) and (min-height: 208px) {
  .dash-geraete-cats {
    display: block;
  }
}

/* Hover: Kante statt Schatten-Lift */
.dash-card:hover:not(.dash-card--edit):not(.dash-card--dragging) {
  background: var(--dash-surface-hover);
  border-color: var(--dash-muted);
}

/* Buttons/links inside cards retain pointer cursor */
.dash-card button,
.dash-card a {
  cursor: pointer;
}

/* ── Card title ──────────────────────────────────────────── */
.dash-card-title {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--dash-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.dash-card-muted {
  color: var(--dash-muted);
  font-size: 0.875rem;
  margin: 0;
}

.dash-card-error {
  color: var(--dash-red);
  font-size: 0.875rem;
  margin: 0;
}

.dash-weather-skip-geo {
  display: block;
  margin-top: 0.35rem;
  text-align: left;
}

.dash-weather-geo-reset {
  margin: 0.5rem 0 0;
}

/* ── Widget header (title left + optional link right) ───── */
.dash-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.dash-widget-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dash-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 0.15s;
  white-space: nowrap;
}

.dash-widget-link:hover {
  color: var(--dash-text);
}

/* ── Empty state ─────────────────────────────────────────── */
.dash-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--dash-muted);
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem 0;
}

.dash-empty-icon {
  display: block;
  opacity: 0.55;
}

.dash-empty-sub {
  font-size: 0.78rem;
  opacity: 0.7;
}

/* ── Stempeluhr CTA ──────────────────────────────────────── */
.dash-stempel-cta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.dash-stempel-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-green);
}

.dash-stempel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.1);
  color: var(--dash-green);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  min-height: 44px;
}

.dash-stempel-btn:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.6);
  transform: translateY(-1px);
}

[data-theme="light"] .dash-stempel-icon-wrap {
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.2);
}

[data-theme="light"] .dash-stempel-btn {
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.35);
}

[data-theme="light"] .dash-stempel-btn:hover {
  background: rgba(5, 150, 105, 0.14);
}

/* ── WEATHER card (responsive Stufen, kein Scroll) ──────── */
.dash-card.dash-weather {
  overflow: hidden;
}

.dash-card.dash-weather .dash-card-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dash-weather-widget {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dash-weather-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dash-weather-widget .dash-weather-skip-geo,
.dash-weather-widget .dash-weather-geo-reset .dash-widget-link {
  white-space: normal;
}

.dash-weather-widget[data-weather-tier='xs'] .weather-temp {
  font-size: 2.05rem;
}

.dash-weather-widget[data-weather-tier='xs'] .weather-icon {
  font-size: 1.85rem;
}

.dash-weather-widget[data-weather-tier='xs'] .weather-desc {
  font-size: 0.75rem;
}

.dash-weather-widget[data-weather-tier='sm'] .weather-hourly-charts-sub {
  display: none;
}

.dash-weather-widget[data-weather-tier='sm'] .weather-chart-svg-wrap {
  height: 44px;
}

.dash-weather-widget[data-weather-tier='sm'] .weather-chart-block--precip,
.dash-weather-widget[data-weather-tier='sm'] .weather-chart-values--temp,
.dash-weather-widget[data-weather-tier='sm'] .weather-chart-values--precip {
  display: none !important;
}

.dash-weather-widget[data-weather-tier='smd'] .weather-chart-block--precip,
.dash-weather-widget[data-weather-tier='smd'] .weather-chart-values--precip {
  display: none !important;
}

.dash-weather-widget[data-weather-tier='sm'] .weather-hourly-charts,
.dash-weather-widget[data-weather-tier='smd'] .weather-hourly-charts {
  gap: 0.35rem;
}

.dash-weather-widget[data-weather-tier='sm'] .weather-chart-time {
  font-size: 0.52rem;
}

.weather-current {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
}

.weather-current[data-weather-strip='stack'] {
  align-items: center;
  text-align: center;
}

.weather-current-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.weather-current[data-weather-strip='stack'] .weather-current-inner {
  flex-direction: column;
  justify-content: center;
}

.weather-current[data-weather-strip='row'] .weather-current-inner {
  justify-content: center;
}

.weather-current[data-weather-aside='1'] .weather-current-inner,
.weather-current[data-weather-meta='inline'] .weather-current-inner {
  justify-content: space-between;
}

.weather-current-primary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.weather-current[data-weather-strip='stack'] .weather-current-primary {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.weather-current[data-weather-aside='1'] .weather-current-primary {
  flex: 1;
  min-width: 0;
}

.weather-current-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  text-align: inherit;
}

.weather-current[data-weather-strip='stack'] .weather-current-text {
  align-items: center;
}

.weather-icon {
  font-size: 2.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.weather-temp {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dash-text);
  letter-spacing: -0.01em;
}

.weather-desc {
  font-size: 0.82rem;
  color: var(--dash-muted);
  line-height: 1.25;
}

.weather-current-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.12rem;
  flex-shrink: 0;
  text-align: right;
  padding-left: 0.25rem;
}

.weather-current[data-weather-strip='stack'] .weather-current-aside {
  align-items: center;
  text-align: center;
  padding-left: 0;
  margin-top: 0.15rem;
}

.weather-current-chip {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dash-blue);
}

.weather-current-range {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dash-text);
  line-height: 1.1;
  white-space: nowrap;
}

.weather-current-precip-hint {
  font-size: 0.62rem;
  color: var(--dash-blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.weather-current-meta {
  color: var(--dash-muted);
}

.weather-current-meta--inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.85rem;
  font-size: 0.72rem;
  max-width: 42%;
}

.weather-current[data-weather-strip='stack'] .weather-current-meta--inline {
  justify-content: center;
  max-width: 100%;
  margin-top: 0.15rem;
}

.weather-current-meta--below {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
  width: 100%;
  font-size: 0.72rem;
  padding-top: 0.1rem;
}

.weather-current[data-weather-strip='row'] .weather-current-meta--below {
  justify-content: flex-start;
}

.weather-current-meta--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
  font-size: 0.72rem;
  padding-top: 0.15rem;
}

.weather-meta-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--dash-muted);
}

.weather-meta-line svg {
  flex-shrink: 0;
  opacity: 0.88;
}

.weather-current-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: inherit;
  color: inherit;
}

.weather-current-meta-item svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Block unter Aktuellwerten: Stunden-Charts + Tageswahl */
.weather-lower {
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--dash-border);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.weather-hourly-charts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow: hidden;
}

.weather-hourly-charts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.weather-hourly-charts-title {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dash-muted);
}

.weather-hourly-charts-sub {
  font-size: 0.62rem;
  color: var(--dash-muted);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.weather-chart-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.weather-chart-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--dash-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weather-chart-label-icon {
  color: #fb923c;
  flex-shrink: 0;
}

.weather-chart-label-icon--precip {
  color: var(--dash-blue);
}

.weather-chart-svg-wrap {
  position: relative;
  height: 52px;
  width: 100%;
  border-radius: 8px;
  background: var(--dash-inner-bg);
  overflow: hidden;
}

.weather-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.weather-chart-area--temp {
  fill: rgba(251, 146, 60, 0.12);
  stroke: none;
}

.weather-chart-area--precip {
  fill: rgba(59, 130, 246, 0.1);
  stroke: none;
}

[data-theme='light'] .weather-chart-area--temp {
  fill: rgba(234, 88, 12, 0.1);
}

[data-theme='light'] .weather-chart-area--precip {
  fill: rgba(37, 99, 235, 0.08);
}

.weather-chart-line--temp {
  stroke: #fb923c;
}

.weather-chart-line--precip {
  stroke: var(--dash-blue);
}

.weather-chart-values--temp,
.weather-chart-values--precip {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.weather-chart-times {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  margin-top: -0.05rem;
}

.weather-chart-value {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.weather-chart-value-num {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--dash-text);
}

.weather-chart-value-num--precip {
  font-size: 0.6rem;
  color: var(--dash-blue);
}

.weather-chart-value--now .weather-chart-value-num {
  color: var(--dash-blue);
}

.weather-chart-time {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.58rem;
  color: var(--dash-muted);
  font-variant-numeric: tabular-nums;
}

.weather-chart-time--now {
  font-weight: 700;
  color: var(--dash-blue);
}

.weather-forecast {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--dash-border);
  display: flex;
  flex-direction: row;
  gap: 0;
  justify-content: space-between;
}

.weather-forecast > li {
  flex: 1;
  min-width: 0;
  display: flex;
}

.weather-forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.25rem;
  font-size: 0.78rem;
  flex: 1;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, outline-color 0.15s;
}

.weather-forecast-day:hover {
  background: var(--dash-inner-bg);
}

.weather-forecast-day--selected {
  background: rgba(59, 130, 246, 0.14);
  outline: 1px solid rgba(59, 130, 246, 0.45);
}

[data-theme='light'] .weather-forecast-day--selected {
  background: rgba(37, 99, 235, 0.1);
  outline-color: rgba(37, 99, 235, 0.35);
}

.weather-forecast-name {
  color: var(--dash-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.weather-forecast-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* SVG folgt der font-size der Wrapper oben — so bleiben alle Größenstufen als Regler gültig */
.weather-icon,
.weather-forecast-icon {
  color: var(--dash-text);
}
.weather-icon > svg,
.weather-forecast-icon > svg {
  width: 1em;
  height: 1em;
  display: block;
}

.weather-forecast-temps {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dash-text);
  display: flex;
  align-items: center;
  gap: 1px;
}

.weather-forecast-min {
  color: var(--dash-muted);
  font-weight: 400;
  font-size: 0.82rem;
}

.weather-forecast-sep {
  margin: 0 0.1rem;
  color: var(--dash-border);
  font-size: 0.75rem;
}

.weather-forecast-max {
  color: var(--dash-text);
}

.weather-forecast-precip {
  font-size: 0.66rem;
  color: var(--dash-blue);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ── TODOS card ──────────────────────────────────────────── */
.dash-todos {
  max-height: 340px;
  overflow: hidden;
}

.dash-todos-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

.dash-empty-state {
  color: var(--dash-muted);
  font-size: 0.875rem;
  font-style: italic;
}

.dash-todos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dash-scrollbar) transparent;
}

.dash-todos-list::-webkit-scrollbar { width: 4px; }
.dash-todos-list::-webkit-scrollbar-track { background: transparent; }
.dash-todos-list::-webkit-scrollbar-thumb {
  background: var(--dash-scrollbar);
  border-radius: 2px;
}

.dash-todos-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  min-height: 36px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  background: var(--dash-inner-bg);
}

.dash-todos-check {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1.5px solid var(--dash-border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}

.dash-todos-check:hover {
  border-color: var(--dash-red);
}

.dash-todos-check.checked {
  background: var(--dash-red);
  border-color: var(--dash-red);
}

.dash-todos-check-mark {
  color: #fff;
  display: block;
}

.dash-todos-title {
  flex: 1;
  font-size: 0.875rem;
  color: var(--dash-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-todos-title.done {
  text-decoration: line-through;
  color: var(--dash-muted);
}

/* ── HEUTE card ──────────────────────────────────────────── */
.dash-heute {
  /* spans rows 1–2 on desktop via grid-template-areas */
}

.dash-today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dash-today-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  background: var(--dash-inner-bg-2);
  border: 0.5px solid var(--dash-border);
  border-left: 3px solid var(--dash-green);
  border-radius: 8px;
  color: var(--dash-text);
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s, border-color 0.15s;
}

.dash-today-link:hover {
  background: rgba(16, 185, 129, 0.07);
  border-color: var(--dash-green);
}

[data-theme="light"] .dash-today-link:hover {
  background: rgba(5, 150, 105, 0.08);
}

.dash-today-type-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dash-muted);
}

.dash-today-type-dot[data-type="order"]   { background: var(--dash-blue); }
.dash-today-type-dot[data-type="event"]   { background: var(--dash-green); }
.dash-today-type-dot[data-type="booking"] { background: var(--dash-yellow); }

.dash-today-more {
  font-size: 0.75rem;
  color: var(--dash-muted);
  padding: 0.2rem 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── NOTIFICATIONS card ──────────────────────────────────── */
.dash-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dash-notif-item {
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--dash-text);
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
}

/* BEM modifier: type-based left border + subtle bg */
.dash-notif-item--alert   { border-left-color: var(--dash-red);    background: rgba(220, 38,  38,  0.06); }
.dash-notif-item--warning { border-left-color: var(--dash-yellow); background: rgba(245, 158, 11,  0.06); }
.dash-notif-item--info    { border-left-color: var(--dash-blue);   background: rgba( 59, 130, 246, 0.06); }
.dash-notif-item--ok      { border-left-color: var(--dash-green);  background: rgba( 16, 185, 129, 0.06); }

[data-theme="light"] .dash-notif-item--alert   { background: rgba(220, 38,  38,  0.08); }
[data-theme="light"] .dash-notif-item--warning { background: rgba(217, 119,   6,  0.08); }
[data-theme="light"] .dash-notif-item--info    { background: rgba( 37,  99, 235, 0.08); }
[data-theme="light"] .dash-notif-item--ok      { background: rgba(  5, 150, 105, 0.08); }

.dash-notif-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* = line-height der Zeile: Icon sitzt mittig auf der ERSTEN Textzeile, auch bei Umbruch */
  height: 1.4em;
  opacity: 0.75;
}

.dash-notif-item--alert   .dash-notif-icon { color: var(--dash-red); }
.dash-notif-item--warning .dash-notif-icon { color: var(--dash-yellow); }
.dash-notif-item--info    .dash-notif-icon { color: var(--dash-blue); }
.dash-notif-item--ok      .dash-notif-icon { color: var(--dash-green); }

.dash-notif-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--dash-text);
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
}

.dash-notif-link:hover {
  color: var(--dash-red);
}

.dash-notif-empty {
  color: var(--dash-muted);
  font-size: 0.875rem;
}

/* ── STEMPELUHR card ─────────────────────────────────────── */
.dash-stempel {
  min-height: 160px;
}

/* ── STAT CARDS ──────────────────────────────────────────── */
.dash-stat-card {
  justify-content: space-between;
}

.dash-stat-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: inherit;
}

.dash-stat-inner--bg {
  position: relative;
  padding: 0.75rem;
}

.dash-widget-bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.dash-widget-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dash-widget-bg-layer--incoming {
  z-index: 1;
  will-change: transform;
}

@keyframes dash-widget-bg-in-left {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes dash-widget-bg-in-right {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes dash-widget-bg-in-top {
  from { transform: translate3d(0, -100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes dash-widget-bg-in-bottom {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.dash-widget-bg-slide-in--left {
  animation: dash-widget-bg-in-left 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dash-widget-bg-slide-in--right {
  animation: dash-widget-bg-in-right 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dash-widget-bg-slide-in--top {
  animation: dash-widget-bg-in-top 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dash-widget-bg-slide-in--bottom {
  animation: dash-widget-bg-in-bottom 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .dash-widget-bg-slide-in--left,
  .dash-widget-bg-slide-in--right,
  .dash-widget-bg-slide-in--top,
  .dash-widget-bg-slide-in--bottom {
    animation-duration: 0.15s;
  }
}

.dash-stat-inner--bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
  border-radius: inherit;
  pointer-events: none;
}

.dash-stat-inner--bg > .dash-kolonne-body,
.dash-stat-inner--bg > .dash-geraete-body {
  position: relative;
  z-index: 2;
}

.dash-stat-inner--bg .dash-widget-header,
.dash-stat-inner--bg .dash-card-title,
.dash-stat-inner--bg .dash-widget-link {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.dash-stat-inner--bg .dash-stat-number,
.dash-stat-inner--bg .dash-stat-label {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.dash-stat-inner--bg .dash-kolonne-extra,
.dash-stat-inner--bg .dash-kolonne-names,
.dash-stat-inner--bg .dash-geraete-extra,
.dash-stat-inner--bg .dash-geraete-cats,
.dash-stat-inner--bg .dash-geraete-mine-wrap {
  position: relative;
  z-index: 2;
  border-top-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.88);
}

.dash-stat-inner--bg .dash-geraete-mine-caption {
  color: rgba(255, 255, 255, 0.75);
}

.dash-stat-inner--bg .dash-geraete-mine-row {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.dash-stat-inner--bg .dash-geraete-mine-device {
  color: #fff;
}

.dash-stat-inner--bg .dash-geraete-mine-order {
  color: #bfdbfe;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.dash-stat-inner--bg .dash-geraete-mine-order-muted {
  color: rgba(255, 255, 255, 0.65);
}

.dash-stat-inner--bg .dash-geraete-mine-to-device {
  color: #bfdbfe;
}

.dash-stat-inner--bg .dash-geraete-mine-to-device:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dash-stat-inner--bg .dash-geraete-mine-initials {
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
}

.dash-stat-inner--bg .dash-kolonne-extra-label,
.dash-stat-inner--bg .dash-geraete-extra-label {
  color: rgba(255, 255, 255, 0.72);
}

.dash-stat-inner--bg .dash-kolonne-extra-val,
.dash-stat-inner--bg .dash-geraete-extra-val,
.dash-stat-inner--bg .dash-geraete-cat-count {
  color: #fff;
}

.dash-stat-inner--bg .dash-kolonne-extra-row--accent .dash-kolonne-extra-label {
  color: rgba(255, 255, 255, 0.82);
}

.dash-stat-inner--bg .dash-geraete-extra-row--danger .dash-geraete-extra-label,
.dash-stat-inner--bg .dash-geraete-extra-row--danger .dash-geraete-extra-val {
  color: #fecaca;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.dash-stat-inner--bg .dash-stat-footer {
  color: rgba(255, 255, 255, 0.95);
}

.dash-stat-number {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dash-text);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Kunden / Kolonnen / Geräte: große Zahl skaliert mit Zelle — kein Abschneiden, kein Innen-Scroll */
.dash-card.dash-kunden .dash-stat-number,
.dash-card.dash-kolonnen .dash-stat-number,
.dash-card.dash-gerate .dash-stat-number {
  flex: 0 1 auto;
  min-height: 0;
  font-size: clamp(0.9rem, min(22cqh, 20cqw), 3.25rem);
  line-height: 1;
}

.dash-stat-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dash-muted);
  margin-top: auto;
}

.dash-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--dash-muted);
}

/* ── AUFTRÄGE card (stat + breakdown) ────────────────────── */
.dash-card.dash-auftraege {
  container-type: size;
  container-name: dashauf;
}

.dash-card.dash-auftraege .dash-card-inner {
  overflow-x: clip;
  overflow-y: visible;
  min-height: 0;
}

.dash-auftraege-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 0.35rem;
}

.dash-auftraege .dash-stat-number {
  flex: 0 1 auto;
  min-height: 0;
  font-size: clamp(1.05rem, min(18cqh, 22cqw), 2.75rem);
  line-height: 1;
}

.dash-orders-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  border-top: 1px solid var(--dash-border);
  padding-top: 0.45rem;
  margin-top: auto;
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: clip;
  overflow-y: visible;
  align-content: start;
}

.dash-auftraege-compact-hint {
  display: none;
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.25;
  color: var(--dash-muted);
  text-align: center;
  flex-shrink: 0;
}

/* Mittlere Zelle (~≥3 Rasterzeilen): dichtere Status-Zeilen — an andere Widget-Stufen angelehnt */
@container dashauf (max-height: 256px) {
  .dash-orders-breakdown {
    gap: 0.22rem;
    padding-top: 0.35rem;
  }

  .dash-auftraege .dash-status-item {
    padding: 0.1rem 0.28rem;
    font-size: 0.68rem;
  }

  .dash-auftraege .dash-status-count {
    font-size: 0.92rem;
  }
}

/* Schmale Kachel (minW 1): eine Spalte, damit Badges + Zahl nicht gequetscht werden */
@container dashauf (max-width: 220px) {
  .dash-orders-breakdown {
    grid-template-columns: 1fr;
  }
}

/*
 * Aufträge-Filter: mehrstufig — erst sehr niedrige/flache Kachel ausblenden.
 * Stufe „eins kleiner“: alle 6 Status-Buttons sichtbar, Badge/Zähler per !important kleiner (inline-Styles im Badge).
 */
@container dashauf (max-height: 200px) {
  .dash-orders-breakdown {
    gap: 0.12rem;
    padding-top: 0.22rem;
  }

  .dash-auftraege .dash-status-item {
    padding: 0.06rem 0.2rem;
  }

  .dash-auftraege .dash-status-item > span {
    font-size: 0.62rem !important;
    padding: 0.05rem 0.3rem !important;
    line-height: 1.15 !important;
  }

  .dash-auftraege .dash-status-count {
    font-size: 0.82rem;
  }
}

@container dashauf (max-height: 168px) {
  .dash-orders-breakdown {
    gap: 0.08rem;
    padding-top: 0.16rem;
  }

  .dash-auftraege .dash-status-item {
    padding: 0.04rem 0.12rem;
  }

  .dash-auftraege .dash-status-item > span {
    font-size: 0.52rem !important;
    padding: 0.04rem 0.2rem !important;
    line-height: 1.1 !important;
  }

  .dash-auftraege .dash-status-count {
    font-size: 0.7rem;
  }
}

/* Schmal: eine Spalte ab 220px; darunter Badge noch kompakter, optional umbrechen */
@container dashauf (max-width: 200px) {
  .dash-orders-breakdown {
    grid-template-columns: 1fr;
  }

  .dash-auftraege .dash-status-item > span {
    font-size: 0.54rem !important;
    padding: 0.04rem 0.22rem !important;
    white-space: normal !important;
    text-align: center;
    max-width: 100%;
  }

  .dash-auftraege .dash-status-count {
    font-size: 0.75rem;
  }
}

/* Erst deutlich flacher als zuvor (208px): keine Status-Buttons — nur Hinweis */
@container dashauf (max-height: 122px) {
  .dash-orders-breakdown {
    display: none;
  }

  .dash-auftraege-compact-hint {
    display: block;
  }

  .dash-auftraege .dash-stat-number {
    font-size: clamp(0.95rem, min(22cqh, 28cqw), 2.25rem);
    margin-top: 0.05rem;
  }
}

/* Sehr flach: Hinweis kleiner, Gesamtzahl weiter skalieren */
@container dashauf (max-height: 156px) {
  .dash-auftraege .dash-stat-number {
    font-size: clamp(0.85rem, min(26cqh, 32cqw), 1.65rem);
  }

  .dash-auftraege-compact-hint {
    font-size: 0.52rem;
    line-height: 1.2;
  }
}

.dash-status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.75rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, filter 0.15s;
}

.dash-status-item:hover {
  background: var(--dash-status-hover);
}

[data-theme="light"] .dash-status-item:hover {
  filter: none;
}

.dash-status--planning  { background: rgba(139,  92, 246, 0.09); }
.dash-status--open      { background: rgba(245, 158,  11, 0.09); }
.dash-status--active    { background: rgba( 59, 130, 246, 0.09); }
.dash-status--paused    { background: rgba(148, 163, 184, 0.12); }
.dash-status--done      { background: rgba( 16, 185, 129, 0.09); }
.dash-status-item--billed { background: rgba(  5, 150, 105, 0.12); }
.dash-status-item--paid { background: rgba(0, 0, 0, 0.18); }
.dash-status--cancelled { background: rgba(107, 114, 128, 0.09); }

.dash-status-label {
  color: var(--dash-muted);
  font-size: 0.72rem;
}

.dash-status-count {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dash-text);
}

/* ── Skeleton loader ─────────────────────────────────────── */
.dash-skeleton-block {
  flex: 1;
  border-radius: 3px;
  min-height: 64px;
  background: linear-gradient(
    90deg,
    var(--dash-skeleton) 25%,
    var(--dash-skeleton-mid) 50%,
    var(--dash-skeleton) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE: Tablet  ≤ 1100px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .dashboard-container {
    padding: 1.25rem 1.5rem 2rem;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE: Mobile  ≤ 768px  →  vertical list
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 0;
    --dash-pad: 1rem;
  }

  /* Überschrift zentriert, Edit-Button schwebt rechts. */
  .dashboard-header {
    position: relative;
    justify-content: center;
    padding: 0.875rem 0.875rem 0;
    margin-bottom: 0;
  }

  .dashboard-title {
    text-align: center;
  }

  .dashboard-edit-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }

  .dash-stat-number {
    font-size: 2.75rem;
  }

  .dash-auftraege .dash-stat-number {
    font-size: clamp(1rem, min(16cqh, 20cqw), 2.25rem);
  }

  .dash-orders-breakdown {
    grid-template-columns: 1fr 1fr;
  }

  .weather-temp {
    font-size: 2.25rem;
  }

  .dash-weather-widget[data-weather-tier='xs'] .weather-temp {
    font-size: 1.95rem;
  }
}

/* ── Hidden widgets restore section ─────────────────────── */
.dash-hidden-section {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--dash-muted);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dash-hidden-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dash-muted);
  white-space: nowrap;
}

.dash-hidden-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dash-hidden-chip {
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--dash-muted);
  background: transparent;
  color: var(--dash-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.dash-hidden-chip:hover {
  border-color: var(--dash-text);
  color: var(--dash-text);
  background: var(--dash-inner-bg);
}
.alert-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Über allen anderen Modals (FormModal = 2000), damit Fehlermeldungen immer sichtbar sind */
  z-index: 3000;
}

.alert-modal {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.alert-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.alert-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text);
}

.alert-modal-body {
  padding: 1.5rem;
}

.alert-modal-body p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.alert-modal-actions {
  display: flex;
  justify-content: flex-end;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
}

.alert-error {
  border-left: 4px solid #ef4444;
}

.alert-success {
  border-left: 4px solid #10b981;
}

.alert-warning {
  border-left: 4px solid #f59e0b;
}

.alert-info {
  border-left: 4px solid #3b82f6;
}

@media (max-width: 480px) {
  .alert-modal {
    width: calc(100vw - 2rem);
    max-width: none;
  }

  .alert-modal-header,
  .alert-modal-body,
  .alert-modal-actions {
    padding: 1rem;
  }
}

/* FormModal – einheitliche Create/Form-Modals, kein Overlay-Close, Scroll-Lock */

.form-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.form-modal-overlay:not([data-clickable-overlay]) {
  pointer-events: auto;
}

.form-modal-content {
  background: var(--bg-dark, var(--af-surface));
  border: 1px solid var(--border, var(--af-border));
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.form-modal-content--wide {
  max-width: 720px;
}

@media (min-width: 900px) {
  .form-modal-content--wide {
    max-width: 800px;
  }
}

.form-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border, var(--af-border));
  flex-shrink: 0;
}

.form-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-modal-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.form-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: var(--border);
}

.form-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Form styles inside modal – falls back if parent has none */
.form-modal-body .form-group {
  margin-bottom: 1.25rem;
}

.form-modal-body .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-modal-body .form-group input:not([type="checkbox"]):not([type="radio"]),
.form-modal-body .form-group textarea,
.form-modal-body .form-group select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form-modal-body .form-group input:focus,
.form-modal-body .form-group textarea:focus,
.form-modal-body .form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-modal-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-modal-body .form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.75rem;
}
.kolonnen-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.kolonnen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.kolonnen-header h1 {
  font-size: 2rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kolonnen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Mindesthöhe, keine feste: Ein zweizeiliger Auftragstitel darf die Zeile
     wachsen lassen, statt unten abgeschnitten zu werden. */
  grid-auto-rows: minmax(230px, auto);
  gap: 1.5rem;
}

/* Wrapper füllt die Grid-Zelle vollständig */
.kolonne-sortable-item {
  height: 100%;
}

.kolonne-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.kolonne-card--locked {
  cursor: default;
}

.kolonne-card--locked .kolonne-card-content {
  opacity: 0.85;
}

.kolonne-card-locked-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-dark) 55%, transparent);
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(2px);
}

.kolonne-card:active {
  cursor: grabbing;
}

.kolonne-card--embedded {
  cursor: pointer;
  height: auto;
  min-height: 120px;
}

.kolonne-card--embedded:active {
  cursor: pointer;
}

.kolonne-card-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
}

.kolonne-card-actions .btn-remove-small {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}

.kolonne-card-actions .btn-remove-small:hover {
  background: var(--error, #ef4444);
  border-color: var(--error, #ef4444);
}

/* Leerer Slot während Drag: unsichtbar, Platz bleibt erhalten */
.kolonne-sortable-slot {
  visibility: hidden;
}

/* DragOverlay Ghost */
.kolonne-drag-overlay {
  cursor: grabbing;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
  transform: scale(1.02);
  opacity: 0.92;
}

/* Loading shimmer when background image is fetching */
.kolonne-card--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: img-shimmer 1.6s infinite linear;
  pointer-events: none;
}

/* Background image rendered as <img> to enable reveal animation */
.kolonne-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  z-index: 0;
  animation: image-reveal 0.55s ease forwards;
}

.kolonne-card-bg--placeholder {
  object-fit: contain;
  background: #fff;
  padding: 1rem;
}

/* Image-Karte: ohne Rand (wie bei Gerätekarten) */
.kolonne-card--has-image {
  background: #111318;
}
.kolonne-card--has-image:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
}

/* Scrim über dem Bild, unter dem Inhalt. Muss über die ganze Kartenhöhe tragen:
   Namen und Titel liegen in der Mitte, nicht nur unten — und das Motiv ist
   unbekannt, es kann an jeder Stelle hell sein. */
.kolonne-card--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

.kolonne-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.kolonne-users {
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}

/* Kolonnenname direkt unter den Mitarbeitern */
.kolonne-card-header {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

.kolonne-card-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text);
}

/* Aktueller Auftrag: Label + Titel unten in der Karte. Bewusst nicht schrumpfbar —
   gestaucht schnitt overflow:hidden die zweite Titelzeile mittig durch. */
.kolonne-card-current-order {
  flex-shrink: 0;
  margin-top: auto;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.kolonne-card--has-image .kolonne-card-current-order {
  background: rgba(0, 0, 0, 0.55);
}

.kolonne-card-current-order-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.kolonne-card--has-image .kolonne-card-current-order-label {
  color: rgba(255, 255, 255, 0.75);
}

.kolonne-card-order-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kolonne-card--has-image .kolonne-card-order-title {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.kolonne-card-order-extra {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.kolonne-card--has-image .kolonne-card-order-extra {
  color: rgba(255, 255, 255, 0.85);
}

.kolonne-card--has-image .kolonne-card-header h3,
.kolonne-card--has-image .kolonne-description,
.kolonne-card--has-image .kolonne-member-name,
.kolonne-card--has-image .no-users {
  color: #fff;
  /* Weicher Schatten mit Streuung statt harter 1px-Kante: trägt auch dort, wo das
     Motiv unter der Schrift hell ist (weiße LKW-Kabine, helles Logo). */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.55);
}


.kolonne-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
}

.kolonne-card--has-image:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
  /* box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2); */
}

.kolonne-description {
  color: var(--text-muted);
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
}

.kolonne-users {
  display: flex;
  justify-content: center;
}

.kolonne-members {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.kolonne-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* 55px Avatare in der Kolonnenkachel */
.kolonne-card .kolonne-member .avatar {
  width: 55px !important;
  height: 55px !important;
  flex-shrink: 0;
}

.kolonne-card .kolonne-member .avatar.avatar-placeholder .avatar-initials {
  font-size: 1rem;
}

.kolonne-member-name {
  font-size: 0.75rem;
  color: var(--text);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kolonne-member--more {
  justify-content: center;
}

.kolonne-member-more {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.kolonne-card--embedded .kolonne-members {
  gap: 0.75rem;
  justify-content: flex-start;
}

.kolonne-card--embedded .kolonne-member-name {
  max-width: 5rem;
}

.no-users {
  color: var(--text-muted);
  font-style: italic;
  margin: 0.5rem 0 0 0;
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .kolonnen-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(230px, auto);
  }
}

@media (max-width: 768px) {
  .kolonnen-container {
    padding: 1rem;
  }

  .kolonnen-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .kolonnen-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, auto);
  }

  .kolonne-card {
    padding: 0.75rem 1rem;
  }

  .kolonne-users {
    margin-bottom: 0.5rem;
  }

  .kolonne-card-header {
    margin-bottom: 0.35rem;
  }

  .kolonne-card-header h3 {
    font-size: 1.05rem;
  }

  .kolonne-card-current-order {
    padding: 0.4rem 0.5rem;
  }

  .kolonne-card-order-title {
    font-size: 0.8rem;
  }
}

@keyframes image-reveal {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes img-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}


/* ══════════════════════════════════════════════════
   MITARBEITER NACH POSITION (über den Kolonnen)
   ══════════════════════════════════════════════════ */

/* Bereichslabel über Team- und Kolonnenblock — nimmt die Typografie der
   Bereitschafts-Leiste auf, damit beide Blöcke als Abschnitte einer Seite lesbar sind. */
.kn-band {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}

.positions-lead {
  margin-bottom: 1.5rem;
}

/* Radius und Abstände wie im Kolonnen-Grid darunter. Spaltenzahl ergibt sich aus der
   Anzahl der Kategorien — die ist seit Schritt 2 verwaltbar und nicht mehr fix drei. */
.positions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.positions-unassigned {
  margin-bottom: 1.5rem;
}

.positions-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.positions-section:hover,
.positions-section:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  outline: none;
}

/* Geschäftsführung: oberste Ebene — volle Breite, Mitglieder nebeneinander,
   größere Überschrift. Abgesetzt allein über Breite und Typografie. */
/* Offene Zuordnungen: signalisiert Handlungsbedarf über gestrichelten Rahmen,
   Hintergrundton und Überschriftfarbe — ohne farbige Kante. */
.positions-section--unassigned {
  border-style: dashed;
  background: color-mix(in srgb, var(--warning) 6%, var(--bg-card));
}

.positions-section--unassigned .positions-section-title { color: var(--warning); }

.positions-section--unassigned:hover,
.positions-section--unassigned:focus-visible {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
}

.positions-hint {
  margin-top: -0.35rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: left;
}

.positions-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.positions-section-title {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* Chevron als Hinweis „hier steckt mehr dahinter" — gleiches Zeichen wie auf der
   aufklappbaren Kachel, damit beide Karten dieselbe Geste anbieten. */
.positions-section-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

/* „Zuordnen →" ist Text und braucht die Breite. */
.positions-section--unassigned .positions-section-open {
  width: auto;
  border-radius: 20px;
  padding: 0 0.25rem;
}

.positions-section:hover .positions-section-open,
.positions-section:focus-visible .positions-section-open {
  background: var(--nav-link-hover);
  color: var(--primary);
  transform: translateX(2px);
}

.positions-count {
  padding: 0.1rem 0.55rem;
  border-radius: 20px;
  background: var(--nav-link-hover);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.positions-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
}

.positions-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.positions-chip:hover {
  background: var(--nav-link-hover);
}

@media (max-width: 768px) {
  .positions-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.positions-section-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Aufklappbare Abteilungskachel.
   Zugeklappt trägt die Zahl die Kachel — kein Namensstapel, der die Zeile in die Höhe zieht.
   Aufgeklappt wird daraus eine Overlay-Karte mit der Namensliste. */

.etc-tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  /* Volle Höhe der Rasterzelle: Alle Abteilungskacheln einer Zeile sind gleich hoch,
     unabhängig davon, ob sie Namen oder nur die Anzahl zeigen. */
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.etc-tile:hover,
.etc-tile:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.etc-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Chevron statt Plus: Ein „+" liest sich in einer Mitarbeiterliste als „Person
   hinzufügen". Der Chevron sagt „hier steckt mehr dahinter" — dieselbe Geste wie
   in den Abteilungskarten mit Personenliste. */
.etc-open-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.etc-tile:hover .etc-open-icon,
.etc-tile:focus-visible .etc-open-icon {
  background: var(--nav-link-hover);
  color: var(--primary);
  transform: translateX(2px);
}

/* Zahl-Vorschau: füllt den Rest der Kachel und sitzt mittig darin, damit sie neben
   den Namens-Kacheln gleicher Höhe nicht oben klebt. */
.etc-count-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Die Zahl ist das Element, an dem die Kachel erkannt wird — bewusst groß und mittig,
   Ziffern in fester Breite, damit 7 und 11 gleich stehen. */
.etc-count {
  font-family: var(--font-headline);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--primary);
}

.etc-tile-title {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.etc-count-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
}

/* Namens-Vorschau: reiner Text, kein eigenes Klickziel — die Kachel hat genau eines. */
.etc-preview {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.etc-preview-member {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
}

.etc-preview-name {
  color: var(--text);
  font-size: 0.875rem;
}

.etc-preview-more {
  padding: 0.35rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Volle Zeile: Namen nebeneinander und mittig. */
.etc-tile--lead .etc-preview {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.etc-tile--lead .etc-tile-title {
  font-size: 1.25rem;
}

/* Volle Zeile auf Desktop: Der Titel steht mittig in der ganzen Kachel, nicht mittig
   im Rest neben dem Chevron. Dafür wird der Chevron aus dem Fluss genommen —
   sonst schöbe seine Breite die Überschrift nach links. */
@media (min-width: 769px) {
  .etc-tile--lead .etc-tile-head {
    position: relative;
    justify-content: center;
  }

  .etc-tile--lead .etc-tile-title {
    text-align: center;
  }

  .etc-tile--lead .etc-open-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .etc-tile--lead:hover .etc-open-icon,
  .etc-tile--lead:focus-visible .etc-open-icon {
    transform: translate(2px, -50%);
  }
}

@media (max-width: 768px) {
  .etc-tile--lead .etc-preview {
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* ── Aufgeklappt ─────────────────────────────────────────── */

/* Kräftig genug, dass die Karte auch über Kolonnenbildern und hellem Hintergrund
   klar im Vordergrund steht — der Blur allein reicht dafür nicht. */
.etc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
}

.etc-overlay {
  position: fixed;
  inset: 0;
  z-index: 2001;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  pointer-events: none;
}

.etc-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(480px, 100%);
  max-height: min(70vh, 640px);
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.etc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.etc-panel-title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.etc-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.etc-close:hover,
.etc-close:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 35%, var(--border));
}

.etc-members {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.etc-member {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.etc-member:hover,
.etc-member:focus-visible {
  background: var(--nav-link-hover);
}

.etc-empty {
  padding: 0.4rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.etc-section-link {
  align-self: flex-start;
  padding: 0.35rem 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.etc-section-link:hover,
.etc-section-link:focus-visible {
  color: var(--primary);
}

@media (max-width: 768px) {
  .etc-count {
    font-size: 2.5rem;
  }

  .etc-panel {
    max-height: 80vh;
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .etc-overlay {
    padding: 0.75rem;
  }

  .etc-panel-title {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .etc-tile {
    transition: none;
  }

  .etc-tile:hover,
  .etc-tile:focus-visible {
    transform: none;
  }
}
.bereitschaft-page {
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  /* `#root` setzt global text-align:center — hier durchgehend linksbündig. */
  text-align: left;
}

/* Avatare tragen ihre Größe als Klasse (sm 40 / md 96 / lg 128) — für diese Ansicht
   durchgehend kleiner, sonst sprengen drei Gesichter jede Kachel. */
.bereitschaft-hero-members .avatar { width: 64px; height: 64px; }
.bereitschaft-hero-members .avatar.avatar-placeholder .avatar-initials { font-size: 1.15rem; }

.bg-card-members .avatar { width: 48px; height: 48px; }
.bg-card-members .avatar.avatar-placeholder .avatar-initials { font-size: 0.9rem; }

.bereitschaft-week-faces .avatar { width: 28px; height: 28px; }
.bereitschaft-week-faces .avatar.avatar-placeholder .avatar-initials { font-size: 0.62rem; }

.bereitschaft-lead-chip .avatar,
.bereitschaft-member-list .avatar { width: 32px; height: 32px; }
.bereitschaft-lead-chip .avatar.avatar-placeholder .avatar-initials,
.bereitschaft-member-list .avatar.avatar-placeholder .avatar-initials { font-size: 0.7rem; }

.bereitschaft-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bereitschaft-header h1 {
  font-family: var(--font-headline);
  font-size: 2rem;
  color: var(--primary);
}

/* ── Laufende Woche ────────────────────────────────────────────
   Bewusst als einziges Element mit Markenfarbe: im Alltag zählt nur,
   wer gerade Dienst hat. */
.bereitschaft-hero {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    var(--bg-card);
  margin-bottom: 2rem;
}

.bereitschaft-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary);
}

.bereitschaft-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.bereitschaft-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.bereitschaft-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent);
  animation: bereitschaft-pulse 2.4s ease-out infinite;
}

@keyframes bereitschaft-pulse {
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .bereitschaft-pulse { animation: none; }
}

.bereitschaft-hero-week {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Name links, Gesichter rechts — sonst steht die halbe Karte leer. */
.bereitschaft-hero-body {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1rem 0 0;
}

.bereitschaft-hero-title { min-width: 9rem; }

.bereitschaft-hero-group {
  font-family: var(--font-headline);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--text);
}

.bereitschaft-hero-count {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.bereitschaft-hero-members {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
}

/* ── Mitglied (Gesicht + Name), geteilt von Hero und Kacheln ──── */
.bg-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 6.5rem;
}

.bg-member-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.bg-member-role {
  padding: 0.05rem 0.4rem;
  border-radius: 20px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Bauleitung trägt einen Ring — auch erkennbar, wenn das Label umbricht. */
.bg-member--lead .avatar {
  box-shadow: 0 0 0 2px var(--primary);
}

/* Ausfalltage: zurückhaltend, aber nicht zu übersehen. */
.bereitschaft-notes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  list-style: none;
  margin-top: 1.25rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--warning);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--text);
  font-size: 0.82rem;
}

.bereitschaft-hero .bereitschaft-link-btn { margin-top: 1rem; }

/* ── Abschnitte ────────────────────────────────────────────────── */
.bereitschaft-section { margin-bottom: 2rem; }

.bereitschaft-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bereitschaft-section-head h2 {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  color: var(--text);
}

.bereitschaft-section-sub {
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.bereitschaft-section-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.bereitschaft-section-tools select,
.bereitschaft-add select,
.bereitschaft-field input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}

/* ── Kommende Wochen: waagerechte Karten statt Tabellenzeilen ──── */
.bereitschaft-timeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 1fr);
  gap: 0.75rem;
  list-style: none;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.bereitschaft-week-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}

.bereitschaft-week-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.bereitschaft-week-kw {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bereitschaft-week-range {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.bereitschaft-week-group {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
}

.bereitschaft-week-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
}

.bereitschaft-week-card .bereitschaft-link-btn {
  align-self: flex-start;
  padding: 0;
}

/* ── Gruppenkacheln — im Zuschnitt der Kolonnenkacheln ─────────── */
.bereitschaft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(230px, auto);
  gap: 1.5rem;
}

.bg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bg-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
}

/* Die Gruppe, die gerade Dienst hat. */
.bg-card--on-duty {
  border-color: var(--primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 55%), var(--bg-card);
}

.bg-card--paused { opacity: 0.6; }

.bg-card-tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.bg-card-tools button {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.bg-card-tools button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.bg-card-tools button:disabled { opacity: 0.35; cursor: not-allowed; }

.bg-card-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.bg-card-name {
  margin-bottom: 0.75rem;
  font-family: var(--font-headline);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--text);
}

.bg-card-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.08);
}

.bg-card-foot-duty { text-align: right; }

.bg-card-foot-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bg-card-foot-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bg-card--on-duty .bg-card-foot-duty .bg-card-foot-value { color: var(--primary); }

.bg-card-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* ── Bauleitungs-Liste ─────────────────────────────────────────── */
.bereitschaft-lead-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}

.bereitschaft-lead-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem 0.4rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
}

.bereitschaft-lead-text {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.bereitschaft-lead-sub {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 400;
}

.bereitschaft-chip-remove {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.bereitschaft-chip-remove:hover { color: var(--error); }

.bereitschaft-lead-tools { margin-bottom: 0; }

/* ── Gruppenauswahl beim Überschreiben einer Woche ─────────────── */
.bereitschaft-group-choice {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  margin: 0.75rem 0;
}

.bereitschaft-choice {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.bereitschaft-choice:hover { background: var(--nav-link-hover); }
.bereitschaft-choice.is-selected { border-color: var(--primary); }
.bereitschaft-choice-name { font-weight: 700; color: var(--text); }
.bereitschaft-choice-members { color: var(--text-muted); font-size: 0.78rem; }

/* ── Gemeinsame Kleinteile ─────────────────────────────────────── */
.bereitschaft-tag {
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 20px;
  background: var(--nav-link-hover);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}

.bereitschaft-link-btn {
  border: none;
  background: transparent;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.bereitschaft-link-btn:hover { text-decoration: underline; }

.bereitschaft-remove {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--error);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.bereitschaft-remove:hover { background: color-mix(in srgb, var(--error) 12%, transparent); }

.bereitschaft-active-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.bereitschaft-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.bereitschaft-warning {
  margin-bottom: 0.75rem;
  color: var(--warning);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Bestehendes Mitglied, dessen Position nicht mehr bereitschaftsfähig ist (Entscheidung B2:
   informieren statt automatisch entfernen). */
.bereitschaft-ineligible {
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border: 1px dashed var(--warning);
  border-radius: 20px;
  color: var(--warning);
  font-size: 0.7rem;
  font-weight: 600;
}

/* ── Gruppen-Dialog ────────────────────────────────────────────── */
.bereitschaft-subhead {
  margin-top: 1.25rem;
  font-family: var(--font-headline);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.bereitschaft-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.75rem 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.bereitschaft-field input { font-size: 0.95rem; }

.bereitschaft-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  list-style: none;
  margin: 0.5rem 0;
}

.bereitschaft-member-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.bereitschaft-member-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
}

.bereitschaft-chip-sub { color: var(--text-muted); font-size: 0.75rem; }

.bereitschaft-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.bereitschaft-add select { flex: 1; min-width: 0; }

/* ── Kompaktkarte in der Kolonnenübersicht ─────────────────────── */
.bereitschaft-widget {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: background-color 0.15s;
}

.bereitschaft-widget:hover { background: var(--nav-link-hover); }

.bereitschaft-widget-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bereitschaft-widget-names {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-weight: 600;
}

.bereitschaft-widget-person {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.bereitschaft-widget-arrow { margin-left: auto; color: var(--text-muted); }

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

@media (max-width: 768px) {
  .bereitschaft-page { padding: 1rem; }
  .bereitschaft-grid { grid-template-columns: 1fr; }
  .bereitschaft-hero-group { font-size: 1.5rem; }
  .bereitschaft-hero-members { gap: 1rem; }

  .bereitschaft-section-head,
  .bereitschaft-section-tools {
    flex-direction: column;
    align-items: stretch;
  }

  /* Name inkl. Hinweis-Badge in eigene Zeile, Bedienelemente darunter. */
  .bereitschaft-member-list li { flex-wrap: wrap; }
  .bereitschaft-member-name { flex: 1 0 100%; }
  .bereitschaft-member-list .bereitschaft-remove { margin-left: auto; }

  .bereitschaft-add { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .bereitschaft-widget-arrow { display: none; }
}

@media (max-width: 480px) {
  .bereitschaft-header h1 { font-size: 1.5rem; }
  .bereitschaft-hero { padding: 1.1rem; }
  .bereitschaft-hero-members { gap: 0.85rem; }
  .bg-card { padding: 1.1rem; }
  .bg-card-members { gap: 0.75rem; }
  .bereitschaft-timeline { grid-auto-columns: minmax(9.5rem, 1fr); }
}
/* ─── Design tokens ─────────────────────────────────────────────────────────── */
.kunden-container {
  --af-surface:       #161b22;
  --af-surface-2:     #0d1117;
  --af-border:        #30363d;
  --af-border-hover:  #484f58;
  --af-muted:         #7d8590;
  --af-badge-bg:      #21262d;
  --af-inner-bg:      rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .kunden-container {
  --af-surface:       #ffffff;
  --af-surface-2:     #f6f8fa;
  --af-border:        #e2e8f0;
  --af-border-hover:  #94a3b8;
  --af-muted:         #64748b;
  --af-badge-bg:      #f1f5f9;
  --af-inner-bg:      rgba(0, 0, 0, 0.03);
}

/* ─── Container & Header ──────────────────────────────────────────────────── */
.kunden-container {
  padding: 2rem;
  max-width: 100%;
  overflow-x: hidden;
}

.kunden-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.kunden-header h1 {
  font-size: 2rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

/* ─── Filter Bar ──────────────────────────────────────────────────────────── */
.af-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.af-search {
  padding: 0.35rem 0.75rem;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  flex: 1;
  min-width: 180px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.af-search:focus {
  outline: none;
  border-color: var(--primary);
}

.af-search::placeholder {
  color: var(--af-muted);
}

.af-select {
  padding: 0.35rem 0.6rem;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.af-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ─── Customer List ───────────────────────────────────────────────────────── */
.kunden-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kd-row {
  background: var(--af-surface);
  border: 0.5px solid var(--af-border);
  border-radius: 8px;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kd-row:hover {
  border-color: var(--af-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.kd-row--company { border-left: 2.5px solid rgba(59, 130, 246, 0.7); }
.kd-row--private { border-left: 2.5px solid rgba(34, 197, 94, 0.7); }

.kd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kd-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.kd-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.kd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
}

.kd-contact,
.kd-address {
  font-size: 0.8rem;
  color: var(--af-muted);
}

.kd-chevron {
  font-size: 1.2rem;
  color: var(--af-border-hover);
  flex-shrink: 0;
  line-height: 1;
}

/* ─── Type Pills ──────────────────────────────────────────────────────────── */
.customer-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.customer-type-pill--company {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.customer-type-pill--private {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.open-orders-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.12);
  color: var(--primary);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

/* ─── Empty / Loading ─────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--af-muted);
}

.loading {
  text-align: center;
  padding: 2rem;
  color: var(--af-muted);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.35rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--af-border);
  border-radius: 8px;
  padding: 0.65rem 1.35rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-family: inherit;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-content--customer { max-width: 640px; }

/* ─── Form ────────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--af-surface-2);
  border: 1px solid var(--af-border);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.75rem;
}

/* ─── Customer Type Toggle ────────────────────────────────────────────────── */
.customer-type-toggle {
  display: flex;
  gap: 0.75rem;
}

.customer-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--af-surface-2);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  color: var(--af-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.customer-type-btn:hover {
  border-color: var(--af-border-hover);
  color: var(--text);
}

.customer-type-btn.active {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.1);
  color: var(--primary);
}

/* ─── Contact Rows ────────────────────────────────────────────────────────── */
.contact-row {
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--af-inner-bg);
  border: 1px solid var(--af-border);
  border-radius: 8px;
}

.contact-row .form-group {
  margin-bottom: 0.75rem;
}

.contact-row-actions {
  margin-top: 0.25rem;
}

.btn-add-contact {
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px dashed var(--af-border);
  border-radius: 8px;
  color: var(--af-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-add-contact:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-remove-contact {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--af-muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.btn-remove-contact:hover {
  color: var(--primary);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kunden-container {
    padding: 1rem;
  }

  .kunden-header {
    flex-direction: column;
    align-items: stretch;
  }

  .kunden-header .btn-primary {
    justify-content: center;
  }

  .af-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .af-search {
    min-width: 0;
    width: 100%;
  }

  .af-select {
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  .customer-type-toggle {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .kd-top {
    gap: 0.3rem;
  }

  .modal-content {
    padding: 1.5rem;
    border-radius: 8px;
  }
}
.lr-page { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

.lr-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.lr-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text); }
.lr-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.lr-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 0.9rem; cursor: pointer; white-space: nowrap;
}
.lr-btn:hover { filter: brightness(1.08); }
.lr-btn--primary { background: var(--primary); color: #fff; border-color: transparent; }
.lr-btn--primary:hover { background: var(--primary-dark); filter: none; }
.lr-btn--ghost { background: transparent; }

.lr-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Inputs/Selects: Theme-konform (dunkel im Darkmode, Text lesbar) */
.lr-input,
.lr-field input, .lr-field select,
.lr-add-row input {
  padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-dark); color: var(--text); font-size: 0.9rem;
}
.lr-input::placeholder,
.lr-field input::placeholder,
.lr-add-row input::placeholder { color: var(--text-muted); }
.lr-field input:disabled, .lr-field select:disabled {
  opacity: 0.6; cursor: not-allowed; background: var(--bg-card, rgba(128, 128, 128, 0.12));
}
.lr-input:focus,
.lr-field input:focus, .lr-field select:focus,
.lr-add-row input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.lr-search { flex: 1 1 260px; min-width: 200px; }

.lr-table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.lr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: var(--text); }
.lr-table th, .lr-table td {
  text-align: left; padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.lr-table th { font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.lr-table tbody tr:last-child td { border-bottom: none; }
.lr-inv-name { font-weight: 600; }
.lr-actions-cell { white-space: nowrap; }
.lr-actions { display: flex; gap: 0.3rem; justify-content: flex-end; }

.lr-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.lr-icon-btn:hover { filter: brightness(1.1); }
.lr-icon-btn--danger { color: #f87171; }

.lr-muted { color: var(--text-muted); }
.lr-small { font-size: 0.8rem; }

/* Formulare in den Modals */
.lr-form, .lr-manage { display: flex; flex-direction: column; gap: 0.9rem; }
.lr-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--text); }
.lr-field > span { color: var(--text-muted); }
.lr-checkbox {
  flex-direction: row; align-items: center; gap: 0.5rem; cursor: pointer;
}
.lr-checkbox input { width: auto; }
.lr-form-row { display: flex; gap: 0.8rem; }
.lr-form-row .lr-field { flex: 1; }
.lr-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; }

.lr-manage section h3 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--text); }
.lr-add-row { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.lr-add-row input { flex: 1; }
.lr-manage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.lr-manage-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}

@media (max-width: 768px) {
  .lr-page { padding: 1rem; }
  .lr-search { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .lr-form-row { flex-direction: column; }
  .lr-header-actions { width: 100%; }
  .lr-header-actions .lr-btn { flex: 1; justify-content: center; }
}
.fin-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.fin-header h1 { margin: 0; font-size: 1.5rem; }
.fin-header-actions { display: flex; gap: 0.5rem; align-items: center; }

.fin-select,
.fin-form select,
.fin-form input {
  padding: 0.45rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
}

.fin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.fin-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.fin-btn--ghost { background: transparent; }
.fin-btn:disabled { opacity: 0.6; cursor: default; }
.fin-form input:disabled,
.fin-form select:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-hover, rgba(128, 128, 128, 0.12)); }

/* KPIs */
.fin-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.fin-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fin-kpi-label { font-size: 0.8rem; color: var(--text-muted); }
.fin-kpi-value { font-size: 1.35rem; font-weight: 700; }
.fin-kpi--income { border-left-color: #16a34a; }
.fin-kpi--expense { border-left-color: #dc2626; }
.fin-kpi--profit { border-left-color: #2563eb; }
.fin-kpi--loss { border-left-color: #dc2626; }

/* Cards */
.fin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.fin-card h2 {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fin-muted { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

.fin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Chart */
.fin-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 180px;
  padding-top: 0.5rem;
}
.fin-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 0.3rem;
}
.fin-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
  width: 100%;
  justify-content: center;
}
.fin-chart-bar { width: 45%; min-height: 2px; border-radius: 3px 3px 0 0; }
.fin-chart-bar--income { background: #16a34a; }
.fin-chart-bar--expense { background: #dc2626; }
.fin-chart-label { font-size: 0.7rem; color: var(--text-muted); }

.fin-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.fin-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }

.fin-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.fin-dot--income { background: #16a34a; }
.fin-dot--expense { background: #dc2626; }

/* Category breakdown */
.fin-catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fin-catlist li { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: 0.6rem; }
.fin-catname { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.fin-catbar { background: var(--border); border-radius: 5px; height: 8px; overflow: hidden; }
.fin-catbar-fill { display: block; height: 100%; border-radius: 5px; }

.fin-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-pos { color: #16a34a; }
.fin-neg { color: #dc2626; }

/* Open items */
.fin-openlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fin-openlist li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fin-openinfo { display: flex; flex-direction: column; }
.fin-openmain { font-size: 0.88rem; }
.fin-openmeta { font-size: 0.75rem; color: var(--text-muted); }
.fin-openbadge { font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; }
.fin-openbadge--income { background: rgba(22,163,74,0.15); color: #16a34a; }
.fin-openbadge--expense { background: rgba(220,38,38,0.15); color: #dc2626; }
.fin-paidbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.fin-paidbtn:hover { border-color: #16a34a; color: #16a34a; }

/* Table */
.fin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fin-table th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
.fin-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border); }

.fin-unpaid { color: #d97706; font-size: 0.78rem; }
.fin-rowactions { text-align: right; white-space: nowrap; }
.fin-linkbtn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.35rem;
}
.fin-linkbtn:hover { text-decoration: underline; }
.fin-linkbtn--danger { color: #dc2626; }
.fin-small { font-size: 0.78rem; }

/* Category management */
.fin-catadd { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fin-catadd input[type="text"], .fin-catadd input:not([type]) { flex: 1; min-width: 140px; }
.fin-catadd input[type="color"] { width: 42px; height: 36px; padding: 2px; cursor: pointer; }
.fin-catgroup { font-size: 0.85rem; color: var(--text-muted); margin: 0.75rem 0 0.4rem; }
.fin-inline { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.fin-inline > span { font-size: 0.82rem; color: var(--text-muted); }
.fin-inline input { width: 100%; }
.fin-overdue { color: #dc2626; font-weight: 600; }
.fin-catmanage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fin-catmanage li { display: flex; align-items: center; justify-content: space-between; }

/* Booking form */
.fin-form { display: flex; flex-direction: column; gap: 0.75rem; }
.fin-field { display: flex; flex-direction: column; gap: 0.3rem; }
.fin-field > span { font-size: 0.82rem; color: var(--text-muted); }
.fin-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.fin-checkbox input { width: auto; }
.fin-typetoggle { display: flex; gap: 0.5rem; }
.fin-typetoggle button {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}
.fin-typetoggle button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.fin-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.fin-error { color: var(--error); font-size: 0.85rem; }

@media (max-width: 768px) {
  .fin-page { padding: 1rem; }
  .fin-kpis { grid-template-columns: repeat(2, 1fr); }
  .fin-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .fin-kpis { grid-template-columns: 1fr; }
  .fin-catlist li { grid-template-columns: 1fr auto; }
  .fin-catbar { display: none; }
}
/* Wiederverwendbare Bottom-Bar – feste Tab-Bar (Mobile) + optionaler Desktop-Segment-Modus. */

.bottom-bar {
  display: flex;
}

.bottom-bar-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, transform 0.08s;
}

.bottom-bar-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bottom-bar-item:active:not(:disabled) {
  transform: scale(0.96);
}

.bottom-bar-icon {
  position: relative;
  display: inline-flex;
}

.bottom-bar-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.bottom-bar-badge--dot {
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  top: -2px;
  right: -3px;
}

/* ── Desktop: Segment-Variante inline (Pills) ── */
.bottom-bar--segment {
  gap: 0.5rem;
  margin-top: 1rem;
}

.bottom-bar--segment .bottom-bar-item {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
}

.bottom-bar--segment .bottom-bar-item:hover:not(.active):not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.bottom-bar--segment .bottom-bar-item.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Desktop: globale Variante wird oben über die Topbar abgebildet → hier ausblenden. */
.bottom-bar--bottom-nav {
  display: none;
}

/* ── Mobile: beide Varianten als feste Tab-Bar unten ── */
@media (max-width: 768px) {
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    gap: 0;
    background: color-mix(in srgb, var(--bg-dark) 92%, #ffffff);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
    padding: 0.15rem 0.25rem calc(0.15rem + env(safe-area-inset-bottom, 0px));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .bottom-bar--bottom-nav {
    display: flex;
  }

  .bottom-bar .bottom-bar-item {
    flex: 1;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.25rem 0.25rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
  }

  .bottom-bar .bottom-bar-item.active {
    background: transparent;
    color: var(--primary);
  }

  .bottom-bar .bottom-bar-item.active .bottom-bar-icon {
    transform: translateY(-1px) scale(1.05);
  }
}
.todo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #ef4444;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
  vertical-align: middle;
}
/* ─── Entrance animation ──────────────────────────────────────────────────── */
@keyframes lv-row-enter {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Container ───────────────────────────────────────────────────────────── */
.lv-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.lv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.lv-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 160px;
}

.lv-search-icon {
  position: absolute;
  left: 10px;
  color: var(--af-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.lv-search {
  width: 100%;
  padding: 7px 30px 7px 34px;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font-body);
  transition: border-color 0.15s;
}

.lv-search:focus {
  outline: none;
  border-color: var(--primary);
}

.lv-search::placeholder { color: var(--af-muted); }

.lv-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--af-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}

.lv-search-clear:hover { color: var(--text); }

.lv-select {
  padding: 7px 10px;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.83rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s;
  min-width: 0;
}

.lv-select:focus {
  outline: none;
  border-color: var(--primary);
}

.lv-sort-dir {
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  padding: 7px 11px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.lv-sort-dir:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── Status chips ────────────────────────────────────────────────────────── */
.lv-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
}

.lv-chips::-webkit-scrollbar { display: none; }

.lv-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 10px;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-left-width: 3px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  color: var(--text);
}

.lv-chip:hover { border-color: var(--af-border-hover); transform: translateY(-1px); }

.lv-chip-label { color: var(--af-muted); font-size: 0.8rem; }
.lv-chip-count { font-weight: 700; font-size: 0.77rem; }

/* ─── List ────────────────────────────────────────────────────────────────── */
.lv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Row ─────────────────────────────────────────────────────────────────── */
.lv-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr 1fr;
  gap: 0 16px;
  align-items: start;
  background: var(--af-surface);
  border: 0.5px solid var(--af-border);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  position: relative;
  will-change: transform;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease;
  animation: lv-row-enter 0.3s ease both;
  animation-delay: calc(var(--row-i, 0) * 40ms);
  /* Tilt vars */
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --mx: 50%;
  --my: 50%;
}

/* Cursor spotlight */
.lv-row::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx) var(--my), var(--af-spotlight), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.lv-row:hover { border-color: var(--af-border-hover); }

.lv-row.is-tilted {
  transform: translateY(-1px) perspective(800px)
    rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.04);
}

.lv-row.is-tilted::after { opacity: 1; }

/* Compact mode: hide dates column → 3-col grid */
.lv-row.is-compact {
  grid-template-columns: 2fr 1.5fr 1fr;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Progress bar spans all columns */
.lv-progress-slot {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.lv-progress {
  height: 3px;
  background: var(--af-border);
  border-radius: 2px;
  overflow: hidden;
}

.lv-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ─── Col 1: Info ─────────────────────────────────────────────────────────── */
.lv-col-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lv-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lv-nr {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--af-muted);
  background: var(--af-badge-bg);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lv-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.lv-desc {
  font-size: 0.77rem;
  color: var(--af-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* ─── Col 2: Customer ─────────────────────────────────────────────────────── */
.lv-col-customer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 1px;
}

.lv-customer {
  font-size: 0.83rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.lv-address {
  font-size: 0.74rem;
  color: var(--af-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Col 3: Dates ────────────────────────────────────────────────────────── */
.lv-col-dates {
  min-width: 0;
}

.lv-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.lv-date-cell {
  background: var(--af-badge-bg);
  border: 0.5px solid var(--af-border);
  border-radius: 5px;
  padding: 3px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lv-date-label {
  font-size: 0.57rem;
  color: var(--af-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lv-date-val {
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 500;
}

/* ─── Col 4: Status ───────────────────────────────────────────────────────── */
.lv-col-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
  padding-top: 1px;
}

.lv-status-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid;
  text-transform: capitalize;
  white-space: nowrap;
}

.lv-created {
  font-size: 0.68rem;
  color: var(--af-muted);
  white-space: nowrap;
}

.lv-avatars {
  display: flex;
  align-items: center;
}

/* ─── Empty state ─────────────────────────────────────────────────────────── */
.lv-empty {
  text-align: center;
  padding: 2.5rem;
  color: var(--af-muted);
  font-size: 0.9rem;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lv-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .lv-search-wrap { flex: none; }
  .lv-search { width: 100%; }

  .lv-toolbar-row {
    display: flex;
    gap: 6px;
  }

  .lv-select { flex: 1; }

  .lv-row {
    grid-template-columns: 1fr;
    gap: 6px 0;
    padding: 10px 12px;
  }

  .lv-row.is-compact {
    grid-template-columns: 1fr;
  }

  .lv-col-status {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid var(--af-border);
  }

  /* On mobile show status badge inline with title row */
  .lv-title { white-space: normal; }
}
/* FormCheckbox – schlankes Checkbox-Design */

.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

/*
 * Selektor bewusst hoch spezifisch: Seiten-CSS enthält generische Regeln wie
 * `.form-group input { width: 100%; padding: … }`, die sonst gewinnen. Die versteckte
 * Checkbox bekäme dann volle Breite plus Padding und läge — absolut positioniert und
 * damit unbeschnitten — als unsichtbare Fläche über anderen Bedienelementen. Auf dem
 * iPad landeten Taps auf „Zuordnen" so auf einer fremden Checkbox.
 * `pointer-events: none` sichert das zusätzlich ab; geklickt wird ohnehin das Label.
 */
label.form-checkbox input.form-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
}

.form-checkbox-box {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: 5px;
  background: var(--bg, rgba(255, 255, 255, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-checkbox-box svg {
  color: white;
}

.form-checkbox:hover .form-checkbox-box {
  border-color: var(--text-muted);
}

.form-checkbox-input:focus-visible + .form-checkbox-box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.form-checkbox-input:checked + .form-checkbox-box {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
}

.form-checkbox-label {
  font-size: 0.95rem;
  color: var(--text);
}

.form-checkbox-input:disabled + .form-checkbox-box,
.form-checkbox-input:disabled ~ .form-checkbox-label {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ─── Local design tokens ─────────────────────────────────────────────────── */
.auftraege-container {
  /* Dark defaults */
  --af-surface:       #161b22;
  --af-surface-2:     #0d1117;
  --af-border:        #30363d;
  --af-border-hover:  #484f58;
  --af-muted:         #7d8590;
  --af-badge-bg:      #21262d;
  --af-inner-bg:      rgba(255, 255, 255, 0.02);
  --af-row-hover:     rgba(255, 255, 255, 0.025);
  --af-spotlight:     rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .auftraege-container {
  --af-surface:       #ffffff;
  --af-surface-2:     #f6f8fa;
  --af-border:        #e2e8f0;
  --af-border-hover:  #94a3b8;
  --af-muted:         #64748b;
  --af-badge-bg:      #f1f5f9;
  --af-inner-bg:      rgba(0, 0, 0, 0.03);
  --af-row-hover:     rgba(0, 0, 0, 0.025);
  --af-spotlight:     rgba(0, 0, 0, 0.055);
}

/* ─── Container & Header ──────────────────────────────────────────────────── */
.auftraege-container {
  padding: 2rem;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
}

.auftraege-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.auftraege-header h1 {
  font-size: 2rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

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

/* ─── View Toggle ─────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  gap: 0.25rem;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  padding: 0.2rem;
}

.view-btn {
  background: transparent;
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  color: var(--af-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.875rem;
}

.view-btn:hover {
  color: var(--text);
}

/* Straßensperrung-Form im Erstellen-Modal */
.rc-form-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rc-form-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.6rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--af-border);
  border-radius: 10px;
  background: var(--af-surface-2);
}

@media (max-width: 900px) {
  .rc-form-row {
    grid-template-columns: 1fr;
  }
}

.view-btn.active {
  background: var(--primary);
  color: white;
}

/* ─── Filter Bar ──────────────────────────────────────────────────────────── */
.af-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.af-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.af-search {
  padding: 0.35rem 0.75rem;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  width: 180px;
  transition: border-color 0.15s ease;
}

.af-search:focus {
  outline: none;
  border-color: var(--primary);
}

.af-search::placeholder {
  color: var(--af-muted);
}

.af-select {
  padding: 0.35rem 0.6rem;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.af-select:focus {
  outline: none;
  border-color: var(--primary);
}

.af-sort-toggle {
  padding: 0.35rem 0.7rem;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.af-sort-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── Summary Bar ─────────────────────────────────────────────────────────── */
.af-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.af-summary-card {
  background: var(--af-surface);
  border: 0.5px solid var(--af-border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.af-summary-card:hover {
  border-color: var(--af-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.af-summary-card--active {
  border-color: var(--af-border-hover);
  box-shadow: 0 0 0 1px var(--af-border-hover);
}

.af-summary-count {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.af-summary-label {
  font-size: 0.75rem;
  color: var(--af-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── List View ───────────────────────────────────────────────────────────── */
.af-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.af-order-row {
  background: var(--af-surface);
  border: 0.5px solid var(--af-border);
  border-radius: 10px;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.af-order-row:hover {
  border-color: var(--af-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.af-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.af-row-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.3;
}

.af-row-nr {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.af-status-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid;
  text-transform: capitalize;
  white-space: nowrap;
}

.af-row-customer-name {
  font-size: 0.76rem;
  color: var(--af-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.af-row-desc {
  font-size: 0.78rem;
  color: var(--af-muted);
  margin: 5px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.af-row-dates {
  font-size: 0.74rem;
  color: var(--af-muted);
  margin-top: 6px;
}

.af-row-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--af-border);
}

.af-row-created {
  font-size: 0.73rem;
  color: var(--af-muted);
  white-space: nowrap;
}

/* ─── Kanban Entrance Animations ──────────────────────────────────────────── */
@keyframes col-enter {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes card-enter {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes card-flip {
  0%   { transform: perspective(600px) rotateY(0deg); }
  50%  { transform: perspective(600px) rotateY(90deg); }
  100% { transform: perspective(600px) rotateY(0deg); }
}

/* ─── Board wrap ──────────────────────────────────────────────────────────── */
.kanban-board-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* ─── Search bar ──────────────────────────────────────────────────────────── */
.kanban-search-bar {
  position: relative;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.kanban-search-icon {
  position: absolute;
  left: 10px;
  color: var(--af-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.kanban-search-input {
  width: 100%;
  padding: 7px 32px 7px 34px;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font-body);
  transition: border-color 0.15s;
}

.kanban-search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.kanban-search-input::placeholder {
  color: var(--af-muted);
}

.kanban-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--af-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}

.kanban-search-clear:hover { color: var(--text); }

.kanban-global-sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.kanban-drag-sort-hint {
  flex: 1 1 100%;
  font-size: 0.78rem;
  color: var(--af-muted, var(--text-muted));
  line-height: 1.35;
}

@media (min-width: 769px) {
  .kanban-drag-sort-hint {
    flex: 1 1 auto;
  }
}

/* ─── Kanban Board ────────────────────────────────────────────────────────── */
.kanban-board {
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-height: 0;
  flex: 1;
  position: relative;
  /* Parallax variable (mobile) */
  --parallax-x: 0px;
}

/* ─── Kanban Column ───────────────────────────────────────────────────────── */
.kanban-column {
  flex: 1 1 0;
  min-width: 0;
  background: var(--af-surface-2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 220px);
  overflow: hidden;
  /* Entrance animation */
  animation: col-enter 0.38s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  animation-delay: calc(var(--col-i, 0) * 80ms);
  transition:
    flex 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    flex-grow 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    flex-shrink 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    flex-basis 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease;
}

/* Eingeklappt: schmale Leiste, Statistik statt Karten — andere Spalten wachsen mit flex */
.kanban-column--collapsed {
  flex: 0 0 58px !important;
  min-width: 58px !important;
  max-width: 66px;
}

.kanban-col-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--af-border);
  background: var(--af-badge-bg);
  color: var(--text);
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

.kanban-col-collapse-btn:hover {
  opacity: 1;
  border-color: var(--af-border-hover);
  background: var(--af-inner-bg);
}

.kanban-col-header--collapsed {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 4px 6px;
  flex: 0 0 auto;
  position: relative;
}

.kanban-col-collapsed-count {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.kanban-col-collapsed-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  font-size: 0.56rem;
  color: var(--af-muted);
  line-height: 1.2;
  width: 100%;
}

.kanban-col-collapsed-meta-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-col-collapsed-title {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid;
  opacity: 0.88;
  max-height: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-col-cards--collapsed-rail {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px 8px;
  background: var(--af-inner-bg);
}

.kanban-col-cards--collapsed-rail.drag-over {
  background: rgba(59, 130, 246, 0.1);
  outline: 1px dashed rgba(59, 130, 246, 0.45);
  outline-offset: -2px;
}

.kanban-col-drop-rail-hint {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
}

/* Colored top bar */
.kanban-col-topbar {
  height: 3px;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
}

/* Header */
.kanban-col-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 9px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--af-surface-2);
  flex-shrink: 0;
}

.kanban-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-col-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--af-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-col-count {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* Sort button */
.kanban-col-sort-wrap {
  position: relative;
  flex-shrink: 0;
}

.kanban-col-sort-btn {
  background: var(--af-badge-bg);
  border: 1px solid var(--af-border);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--text);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  opacity: 0.75;
}

.kanban-col-sort-btn:hover { opacity: 1; border-color: var(--af-border-hover); }
.kanban-col-sort-btn.is-active { color: var(--primary); border-color: var(--primary); opacity: 1; background: var(--af-inner-bg); }

/* Sort dropdown */
.kanban-sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  min-width: 170px;
  padding: 4px 0;
  overflow: hidden;
}

.kanban-sort-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
  transition: background 0.1s;
}

.kanban-sort-opt:hover { background: var(--af-inner-bg); }
.kanban-sort-opt.is-active { color: var(--primary); font-weight: 600; }
.kanban-sort-check { color: var(--primary); font-size: 0.75rem; }

/* Cards container — scrollable */
.kanban-col-cards {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--af-border) transparent;
}

.kanban-col-cards::-webkit-scrollbar { width: 4px; }
.kanban-col-cards::-webkit-scrollbar-track { background: transparent; }
.kanban-col-cards::-webkit-scrollbar-thumb { background: var(--af-border); border-radius: 2px; }

.kanban-col-cards.drag-over {
  background: rgba(255, 255, 255, 0.025);
}

/* ─── Card slot (dnd-kit wrapper) ─────────────────────────────────────────── */
.kc-slot {
  margin-bottom: 7px;
}

.kc-slot.is-status-open {
  position: relative;
  z-index: 50;
}

/* ─── Kanban Card ─────────────────────────────────────────────────────────── */
.kanban-card {
  background: var(--af-surface);
  border: 0.5px solid var(--af-border);
  border-radius: 10px;
  padding: 10px 10px 9px 28px;
  cursor: pointer;
  position: relative;
  user-select: none;
  will-change: transform;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease,
              opacity 0.18s ease;
  animation: card-enter 0.22s ease both;
  animation-delay: calc(var(--card-i, 0) * 28ms);
  /* Tilt variables */
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --mx: 50%;
  --my: 50%;
}

/* Glow spotlight pseudo-element following cursor */
.kanban-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx) var(--my), var(--af-spotlight), transparent 65%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.kanban-card:hover { border-color: var(--af-border-hover); }

.kanban-card.is-tilted {
  transform: translateY(-2px) perspective(600px)
    rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry)) translateZ(8px);
  box-shadow:
    calc((var(--tilt-ry) / 8deg) * -12px) calc((var(--tilt-rx) / 8deg) * 12px) 24px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.06);
}

.kanban-card.is-tilted::after { opacity: 1; }

.kanban-card.is-dragging {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  border-color: var(--af-border-hover);
}

.kanban-card.just-moved {
  animation: card-flip 0.32s ease;
}

.kanban-card.is-abgerechnet {
  opacity: 0.65;
}

.kanban-card.is-dimmed {
  opacity: 0.18;
  transform: scale(0.97);
}

.kanban-card.is-highlighted {
  box-shadow: 0 0 0 1.5px var(--sc-border, var(--primary)), 0 4px 16px rgba(0,0,0,0.2);
}

.kanban-card.is-drag-overlay {
  padding: 10px 12px 10px 12px;
}

/* Drag handle */
.kc-drag-handle {
  position: absolute;
  top: 11px;
  left: 8px;
  color: var(--af-muted);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}

.kanban-card:hover .kc-drag-handle { opacity: 0.6; }
.kc-drag-handle:hover { opacity: 1 !important; }
.kc-drag-handle:active { cursor: grabbing; }

/* Top row: number + badge */
.kc-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* ─── Inline status dropdown ─────────────────────────────────────────────── */
.kc-status-wrap {
  margin-left: auto;
  position: relative;
  flex-shrink: 0;
}

.kc-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 5px;
  border-radius: 10px;
  border: 1px solid var(--sc-border);
  background: var(--sc-bg);
  color: var(--sc-color);
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.15s, box-shadow 0.15s;
  opacity: 0.8;
}

.kc-status-btn:hover { opacity: 1; box-shadow: 0 0 0 2px var(--sc-border); }

.kc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kc-status-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 300;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
  min-width: 160px;
  padding: 4px 0;
  overflow: hidden;
}

.kc-status-drop-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text);
  text-align: left;
  transition: background 0.1s;
}

.kc-status-drop-opt:hover { background: var(--af-inner-bg); }
.kc-status-drop-opt.is-active { font-weight: 600; }

.kc-nr {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--af-muted);
  background: var(--af-badge-bg);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Title */
.kc-title {
  margin: 0 0 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Customer */
.kc-customer {
  font-size: 0.76rem;
  color: var(--af-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

/* Address */
.kc-address {
  font-size: 0.71rem;
  color: var(--af-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  opacity: 0.8;
}

/* Date grid */
.kc-date-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 5px 0 4px;
}

.kc-date-chip {
  background: var(--af-badge-bg);
  border: 0.5px solid var(--af-border);
  border-radius: 5px;
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kc-date-label {
  font-size: 0.57rem;
  color: var(--af-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kc-date-val {
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 500;
}

/* Progress bar */
.kc-progress {
  height: 3px;
  background: var(--af-border);
  border-radius: 2px;
  margin: 6px 0 4px;
  overflow: hidden;
}

.kc-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Footer */
.kc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--af-border);
}

.kc-created {
  font-size: 0.68rem;
  color: var(--af-muted);
  white-space: nowrap;
}

.kc-avatars {
  display: flex;
  align-items: center;
  isolation: isolate; /* own stacking context so z-index works between siblings */
}

.kc-avatar {
  width: 22px !important;
  height: 22px !important;
  font-size: 0.5rem !important;
  margin-left: -5px;
  border: 2px solid var(--af-surface) !important;
  position: relative;
  flex-shrink: 0;
}

/* Solid opaque background — prevents initials from bleeding through from behind */
.kc-avatar.avatar-placeholder {
  background: var(--af-badge-bg) !important;
}

/* First avatar shows on top, each subsequent one goes further back */
.kc-avatars > :nth-child(1) { z-index: 5; margin-left: 0; }
.kc-avatars > :nth-child(2) { z-index: 4; }
.kc-avatars > :nth-child(3) { z-index: 3; }
.kc-avatars > :nth-child(4) { z-index: 2; }
.kc-avatars > :nth-child(n+5) { z-index: 1; }

.kc-avatar-more {
  font-size: 0.65rem;
  color: var(--af-muted);
  margin-left: 4px;
  position: relative;
  z-index: 0;
}

/* ─── Kolonne mini-badge ──────────────────────────────────────────────────── */
.kc-kolonnen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 7px;
}

.kc-kolonne-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  background: var(--af-badge-bg);
  border: 1px solid var(--af-border);
  border-radius: 6px;
}

.kc-kolonne-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--af-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.kc-kolonne-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  isolation: isolate;
}

.kc-kolonne-avatar {
  width: 18px !important;
  height: 18px !important;
  font-size: 0.42rem !important;
  margin-left: -4px;
  border: 1.5px solid var(--af-badge-bg) !important;
  position: relative;
  flex-shrink: 0;
}

.kc-kolonne-avatar.avatar-placeholder {
  background: var(--af-surface) !important;
}

.kc-kolonne-avatars > :nth-child(1) { z-index: 5; margin-left: 0; }
.kc-kolonne-avatars > :nth-child(2) { z-index: 4; }
.kc-kolonne-avatars > :nth-child(3) { z-index: 3; }
.kc-kolonne-avatars > :nth-child(4) { z-index: 2; }
.kc-kolonne-avatars > :nth-child(n+5) { z-index: 1; }

.kc-kolonne-avatar-more {
  font-size: 0.6rem;
  color: var(--af-muted);
  margin-left: 3px;
}

/* ─── Empty column state ──────────────────────────────────────────────────── */
.kanban-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 12px;
  text-align: center;
  color: var(--af-muted);
  font-size: 0.825rem;
  border: 1.5px dashed var(--af-border);
  border-radius: 8px;
  margin: 2px;
}

.kanban-empty-add {
  margin-top: 4px;
  background: none;
  border: 1px dashed var(--af-border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  color: var(--af-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.kanban-empty-add:hover {
  color: var(--text);
  border-color: var(--af-border-hover);
}

/* ─── Density: Compact ────────────────────────────────────────────────────── */
.kanban-board-wrap.is-compact .kc-date-chips { display: none; }
.kanban-board-wrap.is-compact .kc-address    { display: none; }
.kanban-board-wrap.is-compact .kanban-card   { padding-bottom: 6px; }
.kanban-board-wrap.is-compact .kc-footer     { margin-top: 5px; padding-top: 5px; }

/* ─── Density toggle (in toolbar) ────────────────────────────────────────── */
.density-toggle {
  display: flex;
  gap: 2px;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  padding: 2px;
}

.density-btn {
  background: transparent;
  border: none;
  padding: 4px 12px;
  border-radius: 6px;
  color: var(--af-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.15s;
}

.density-btn:hover { color: var(--text); }

.density-btn.active {
  background: var(--primary);
  color: white;
}

/* ─── Auftraege title (Barlow Condensed) ──────────────────────────────────── */
.auftraege-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 2.1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: 0.01em;
}

/* kanban-mode: container becomes full-height flex column */
.auftraege-container.kanban-mode {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.auftraege-container.kanban-mode .kanban-board-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.auftraege-container.kanban-mode .kanban-board {
  flex: 1;
  min-height: 0;
}

.auftraege-container.kanban-mode .kanban-column:not(.kanban-column--collapsed) {
  max-height: none;
  flex: 1 1 0;
  min-width: 0;
}

.auftraege-container.kanban-mode .kanban-column--collapsed {
  max-height: none;
  flex: 0 0 58px !important;
  min-width: 58px !important;
  max-width: 66px;
}

/* Desktop (≥1025px): kanban-mode füllt exakt die verbleibende Höhe unter der
   Sidebar-Navigation (siehe Layout.css für die .layout/.main-content-Höhenkette).
   Weniger Kopf-Padding schafft zusätzlich Platz für die Spalten. */
@media (min-width: 1025px) {
  .auftraege-container.kanban-mode {
    height: 100%;
    padding-top: 0.75rem;
  }
}

/* ─── Mobile Dots Indicator ───────────────────────────────────────────────── */
.kanban-dots {
  display: none;
}

/* ─── Mobile Bottom Sheet ─────────────────────────────────────────────────── */
.kanban-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
}

.kanban-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--af-surface-2);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px max(32px, env(safe-area-inset-bottom));
}

.kbs-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 14px;
  text-align: center;
  color: var(--af-muted);
}

.kbs-title strong {
  color: var(--text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kbs-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  color: var(--text);
  margin-bottom: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
}

.kbs-btn.active {
  font-weight: 700;
}

.kbs-btn:hover {
  border-color: var(--af-border-hover);
}

.kbs-cancel {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--af-border);
  border-radius: 8px;
  color: var(--af-muted);
  margin-top: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
}

/* ─── Empty / Loading states ──────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--af-muted);
}

.loading {
  text-align: center;
  padding: 2rem;
  color: var(--af-muted);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.35rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--af-border);
  border-radius: 8px;
  padding: 0.65rem 1.35rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Form ────────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group-checkbox {
  margin-bottom: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--af-surface-2);
  border: 1px solid var(--af-border);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.new-customer-fields {
  padding: 1rem;
  background: var(--af-inner-bg);
  border: 1px solid var(--af-border);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.new-customer-fields .form-group {
  margin-bottom: 1rem;
}

.new-customer-fields .form-group:last-child {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.75rem;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  /* kanban stays flex/scroll — no grid override needed */
}

@media (max-width: 1100px) {
  .af-summary {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .af-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .auftraege-container {
    padding: 0;
    /* Platz für die feste Aktions-Bottom-Bar (Kanban/Liste/Neuer Auftrag). */
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Toolbar-Aktionen wandern in die Bottom-Bar. Selektor gescopt, weil
     .header-actions auch in anderen Komponenten als display:flex definiert
     ist und sonst (gleiche Spezifität, spätere Quelle) gewinnt. */
  .auftraege-header .header-actions {
    display: none;
  }

  .auftraege-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .density-toggle {
    display: none; /* hidden on mobile */
  }

  .af-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .af-filter-controls {
    margin-left: 0;
  }

  .af-search {
    width: 100%;
  }

  .af-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mobile kanban: horizontal scroll snap, 1 column at a time */
  .auftraege-container.kanban-mode {
    height: auto;
    overflow: visible;
  }

  .auftraege-container.kanban-mode .kanban-board-wrap {
    flex: none;
    overflow: visible;
  }

  .auftraege-container.kanban-mode .kanban-board.is-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 4px 0 10px;
    align-items: flex-start;
    scroll-padding-inline: 0;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }

  .auftraege-container.kanban-mode .kanban-board.is-mobile::-webkit-scrollbar { display: none; }

  /* Disable snap during drag */
  .auftraege-container.kanban-mode .kanban-board.is-mobile.drag-active {
    scroll-snap-type: none;
  }

  .auftraege-container.kanban-mode .kanban-board.is-mobile .kanban-column:not(.kanban-column--collapsed) {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: calc(100svh - 240px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
    animation: col-enter 0.3s ease both;
  }

  .auftraege-container.kanban-mode .kanban-board.is-mobile .kanban-column--collapsed {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100%;
    margin: 0;
  }

  .kc-drag-handle {
    display: none;
  }

  .kanban-col-collapse-btn {
    display: none;
  }

  .kanban-card {
    padding-left: 12px;
  }

  /* Dots indicator: mobile only */
  .kanban-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0 12px;
  }

  .kanban-dot {
    height: 7px;
    width: 7px;
    border-radius: 9999px;
    background: var(--af-border);
    border: none;
    cursor: pointer;
    transition: width 0.25s cubic-bezier(0.34, 1.3, 0.64, 1), background 0.2s;
    padding: 0;
    flex-shrink: 0;
  }

  .kanban-dot.active {
    background: var(--primary);
    width: 18px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .af-row-top {
    gap: 0.35rem;
  }
}

/* ─── Auftrag anlegen: Kunde Suche + Auswahl (ein Block) ─────────────────── */
.order-customer-combobox-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--af-muted, var(--text-muted));
  line-height: 1.35;
}

.order-customer-combobox {
  position: relative;
  z-index: 0;
}

.order-customer-combobox-inner {
  position: relative;
  display: block;
  border: 1px solid var(--af-border, var(--border));
  border-radius: 8px;
  background: var(--af-inner-bg, var(--bg-card));
}

.order-customer-combobox-inner[data-open] {
  z-index: 40;
}

.order-customer-combobox-inner > input[type='text'] {
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  background: transparent;
  color: inherit;
  box-sizing: border-box;
}

.order-customer-combobox-inner > input[type='text']:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.order-customer-combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 41;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: min(40vh, 280px);
  overflow-y: auto;
  border: 1px solid var(--af-border, var(--border));
  border-radius: 8px;
  background: var(--af-surface, var(--bg-card));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.order-customer-combobox-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: none;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.35;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.order-customer-combobox-option:hover,
.order-customer-combobox-option.is-active {
  background: var(--af-row-hover, rgba(255, 255, 255, 0.06));
}

.order-customer-combobox-option.is-selected {
  font-weight: 600;
}

.order-customer-combobox-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--af-muted, var(--text-muted));
}
.person-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.person-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  background: var(--od-surface-2, rgba(255, 255, 255, 0.04));
  border-radius: 7px;
}

.person-card-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card-remove {
  background: transparent;
  border: 1px solid var(--error, #ef4444);
  color: var(--error, #ef4444);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.person-card-remove:hover {
  background: var(--error, #ef4444);
  color: #fff;
}
/* ==============================================
   ORDER STEPS TIMELINE (Detail-Gantt / Ablaufplan)
   Eigenständig, optisch an die Kalender-Auftragsbalken angelehnt.
   ============================================== */

.ost {
  --ost-day-w: 38px;
  --ost-tint: var(--ost-accent, #dc2626);
}

.ost-head-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
}

.ost-add-btn {
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--ost-tint) 45%, transparent);
  background: color-mix(in srgb, var(--ost-tint) 14%, transparent);
  color: color-mix(in srgb, var(--ost-tint) 80%, var(--od-text));
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ost-add-btn:hover {
  background: color-mix(in srgb, var(--ost-tint) 22%, transparent);
  border-color: color-mix(in srgb, var(--ost-tint) 60%, transparent);
}

.ost-empty {
  color: var(--od-muted);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
}

.ost-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--od-border);
  border-radius: 10px;
  background: var(--od-surface-2);
  -webkit-overflow-scrolling: touch;
}

.ost-grid {
  width: calc(var(--ost-total-days) * var(--ost-day-w));
  min-width: 100%;
}

.ost-row {
  display: flex;
  position: relative;
}

/* ── Kopf: KW + Tage ── */
.ost-row--head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--od-surface-3);
  border-bottom: 1px solid var(--od-border);
}

.ost-week {
  width: calc(7 * var(--ost-day-w));
  flex: 0 0 auto;
  border-right: 1px solid var(--od-border);
}

.ost-kw {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--od-muted);
  padding: 0.25rem 0.5rem 0.1rem;
  text-transform: uppercase;
}

.ost-days {
  display: flex;
}

.ost-day {
  width: var(--ost-day-w);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.15rem 0 0.3rem;
  font-size: 0.7rem;
  color: var(--od-muted);
}

.ost-day-wd {
  font-size: 0.6rem;
  opacity: 0.75;
}

.ost-day-num {
  font-weight: 600;
  color: var(--od-text);
}

.ost-day--weekend {
  background: color-mix(in srgb, var(--od-muted) 12%, transparent);
}

.ost-day--today {
  background: color-mix(in srgb, var(--ost-tint) 22%, transparent);
  border-radius: 5px;
}

.ost-day--today .ost-day-num {
  color: color-mix(in srgb, var(--ost-tint) 85%, var(--od-text));
}

/* ── Lanes ── */
.ost-lane {
  height: 46px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--od-border) 55%, transparent);
}

.ost-lane:last-child {
  border-bottom: none;
}

.ost-week--bg {
  display: flex;
  height: 100%;
  pointer-events: none;
}

.ost-day-bg {
  width: var(--ost-day-w);
  flex: 0 0 auto;
}

.ost-day-bg--weekend {
  background: color-mix(in srgb, var(--od-muted) 8%, transparent);
}

.ost-lane--placeholder {
  justify-content: center;
}

.ost-placeholder-text {
  color: var(--od-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* ── Schritt-Balken (glasig, in Auftragsfarbe) ── */
.ost-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  left: calc(var(--day-start, 0) * var(--ost-day-w) + 2px);
  width: calc(var(--day-count, 1) * var(--ost-day-w) - 4px);
  border-radius: 8px;
  border: 1.5px dashed color-mix(in srgb, var(--ost-tint) 55%, transparent);
  background: color-mix(in srgb, var(--ost-tint) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ost-tint) 18%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 0 0.55rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 2;
}

.ost-bar-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ost-tint) 88%, var(--od-text));
  pointer-events: none;
}

.ost-bar--editable {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.ost-bar--editable:hover {
  background: color-mix(in srgb, var(--ost-tint) 30%, transparent);
  border-color: color-mix(in srgb, var(--ost-tint) 70%, transparent);
}

.ost-bar--dragging {
  cursor: grabbing;
  border-style: solid;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 6;
}

.ost-bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  touch-action: pan-y;
}

.ost-bar-handle::before {
  content: '';
  position: absolute;
  top: 28%;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ost-tint) 80%, #fff);
  opacity: 0;
  transition: opacity 0.12s;
}

.ost-bar--editable:hover .ost-bar-handle::before,
.ost-bar--dragging .ost-bar-handle::before {
  opacity: 0.9;
}

.ost-bar-handle--left { left: 0; }
.ost-bar-handle--right { right: 0; }

/* ── Hover-Tooltip (Portal) ── */
.ost-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 1000;
  min-width: 150px;
  max-width: 260px;
  padding: 0.6rem 0.75rem 0.65rem;
  border-radius: 9px;
  background: #1f2630;
  border: 1px solid #3a4350;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

[data-theme="light"] .ost-tooltip {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.ost-tooltip-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 9px 0 0 9px;
  background: var(--ost-accent, #dc2626);
}

.ost-tooltip-title {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e6edf3;
}

[data-theme="light"] .ost-tooltip-title { color: #0f172a; }

.ost-tooltip-range {
  margin: 0;
  font-size: 0.78rem;
  color: #9aa4b2;
}

/* ── Editor-Modal ── */
.ost-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.ost-modal {
  width: 100%;
  max-width: 420px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  padding: 1.25rem 1.35rem 1.1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .ost-modal {
  background: #ffffff;
  border-color: #e2e8f0;
}

.ost-modal-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #e6edf3;
}

[data-theme="light"] .ost-modal-title { color: #0f172a; }

.ost-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}

.ost-modal-field > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: #9aa4b2;
}

.ost-modal-field input {
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid #30363d;
  background: #0d1117;
  color: #e6edf3;
  font-size: 0.9rem;
}

[data-theme="light"] .ost-modal-field input {
  background: #f6f8fa;
  border-color: #e2e8f0;
  color: #0f172a;
}

.ost-modal-field input:focus {
  outline: none;
  border-color: var(--ost-accent, #dc2626);
}

.ost-modal-dates {
  display: flex;
  gap: 0.75rem;
}

.ost-modal-dates .ost-modal-field {
  flex: 1;
}

.ost-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ost-modal-spacer { flex: 1; }

.ost-modal-btn {
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  border: 1px solid #30363d;
  background: transparent;
  color: #c9d1d9;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

[data-theme="light"] .ost-modal-btn {
  border-color: #e2e8f0;
  color: #475569;
}

.ost-modal-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.ost-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ost-modal-btn--primary {
  background: var(--ost-accent, #dc2626);
  border-color: var(--ost-accent, #dc2626);
  color: #fff;
}

.ost-modal-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ost-modal-btn--danger {
  color: #f87171;
  border-color: color-mix(in srgb, #f87171 45%, transparent);
}

.ost-modal-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, #f87171 14%, transparent);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ost { --ost-day-w: 32px; }
}

@media (max-width: 480px) {
  .ost { --ost-day-w: 28px; }
  .ost-modal-dates { flex-direction: column; gap: 0; }
}
.user-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  vertical-align: middle;
}

.user-avatar-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.user-avatar-circle--sm {
  width: 24px;
  height: 24px;
  font-size: 0.68rem;
}

.user-avatar-circle--md {
  width: 32px;
  height: 32px;
  font-size: 0.82rem;
}

.user-avatar-circle--lg {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

/* Das eigentliche Avatar (img / placeholder) innen darf den farbigen Kreis nicht
 * überlagern, wenn kein Foto existiert — Hintergrund transparent machen. */
.user-avatar-circle .avatar.avatar-placeholder {
  background: transparent !important;
  color: #fff !important;
  width: 100%;
  height: 100%;
}

.user-avatar-circle .avatar {
  width: 100%;
  height: 100%;
}

.user-avatar-img {
  display: block;
}

.user-avatar-name {
  font-size: 0.8rem;
  color: var(--text, #fff);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 180px;
}

.user-avatar--system .user-avatar-circle {
  color: #e2e8f0;
}
/* ==============================================
   ORDER ACTIVITY LOG (Verlauf / Logbuch)
   ============================================== */

.oal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.oal-head .od-card-title {
  margin: 0;
}

.oal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.oal-filter {
  border: 1px solid var(--od-border);
  background: transparent;
  color: var(--od-muted);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.oal-filter:hover {
  color: var(--od-text);
}

.oal-filter.active {
  background: color-mix(in srgb, var(--accent, var(--primary)) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--primary)) 45%, transparent);
  color: var(--od-text);
}

/* ── Notiz-Eingabe ── */
.oal-note-box {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-bottom: 1.1rem;
}

.oal-note-input {
  flex: 1;
  resize: vertical;
  min-height: 2.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--od-border);
  background: var(--od-surface-2);
  color: var(--od-text);
  font: inherit;
  font-size: 0.85rem;
}

.oal-note-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent);
}

.oal-note-btn {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: none;
  background: var(--accent, var(--primary));
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}

.oal-note-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.oal-empty {
  color: var(--od-muted);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

/* ── Timeline ── */
.oal-group {
  margin-bottom: 0.4rem;
}

.oal-day {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--od-muted);
  margin: 0.7rem 0 0.4rem;
}

.oal-entry {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0 0.5rem 0;
  position: relative;
}

/* Vertikale Linie der Timeline. */
.oal-entry::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: -6px;
  width: 2px;
  background: var(--od-border);
}

.oal-entry:last-child::before {
  display: none;
}

.oal-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--od-surface-3);
  color: var(--od-muted);
  border: 1px solid var(--od-border);
  z-index: 1;
}

.oal-entry--change .oal-icon { color: #3b82f6; }
.oal-entry--assignment .oal-icon { color: #8b5cf6; }
.oal-entry--document .oal-icon { color: #0ea5e9; }
.oal-entry--closure .oal-icon { color: #f59e0b; }
.oal-entry--note .oal-icon {
  color: #10b981;
  background: color-mix(in srgb, #10b981 12%, var(--od-surface-3));
  border-color: color-mix(in srgb, #10b981 35%, transparent);
}

.oal-body {
  flex: 1;
  min-width: 0;
}

.oal-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.oal-actor {
  font-weight: 600;
  color: var(--od-text);
}

.oal-time {
  color: var(--od-muted);
  font-size: 0.74rem;
  cursor: help;
}

.oal-summary {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--od-text);
}

.oal-changes {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  font-size: 0.83rem;
}

.oal-changes li {
  padding: 0.05rem 0;
  color: var(--od-text);
}

.oal-field {
  color: var(--od-muted);
  font-weight: 600;
}

.oal-old {
  color: var(--od-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--od-muted) 60%, transparent);
}

.oal-arrow {
  color: var(--od-muted);
}

.oal-new {
  color: var(--od-text);
  font-weight: 600;
}

.oal-note {
  margin-top: 0.3rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: color-mix(in srgb, #10b981 8%, var(--od-surface-2));
  border: 1px solid color-mix(in srgb, #10b981 22%, var(--od-border));
  font-size: 0.86rem;
  color: var(--od-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.oal-more {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.55rem;
  border: 1px solid var(--od-border);
  background: var(--od-surface-2);
  color: var(--od-muted);
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 8px;
  cursor: pointer;
}

.oal-more:hover:not(:disabled) {
  color: var(--od-text);
}

.oal-more:disabled {
  opacity: 0.6;
  cursor: default;
}
/* Aufklappbare Detail-Karte (Ablaufplan / Dokumente / Verlauf) */
.od-collapsible {
  padding: 0;
  overflow: hidden;
}

.od-collapsible-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.25rem;
  background: none;
  border: none;
  font: inherit;
  color: var(--od-text);
  text-align: left;
  transition: background 0.15s;
}

button.od-collapsible-head {
  cursor: pointer;
}

button.od-collapsible-head:hover {
  background: color-mix(in srgb, var(--od-muted) 7%, transparent);
}

.od-collapsible-title {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
}

.od-collapsible-badge {
  flex: 0 0 auto;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--od-surface-3);
  color: var(--od-muted);
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.od-collapsible-chevron {
  flex: 0 0 auto;
  color: var(--od-muted);
  transition: transform 0.2s ease;
}

.od-collapsible.open .od-collapsible-chevron {
  transform: rotate(180deg);
}

.od-collapsible-body {
  padding: 0.15rem 1.25rem 1.15rem;
}

@media (max-width: 768px) {
  .od-collapsible-body {
    padding: 0;
  }
}
/* Geteilter Kopier-Button (Kontakt-/Adressdaten in Auftrags- & Kundendetail) */
.copy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--od-border, var(--border, #30363d));
  background: var(--od-surface-2, transparent);
  color: var(--od-muted, var(--text-muted, #7d8590));
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.copy-btn:hover {
  color: var(--od-text, var(--text));
  border-color: var(--od-muted, var(--text-muted));
}

.copy-btn.is-copied {
  color: #10b981;
  border-color: color-mix(in srgb, #10b981 45%, transparent);
}
/* ==============================================
   ORDER DETAIL – LOCAL DESIGN TOKENS
   ============================================== */

.order-detail-container {
  --od-surface:   #161b22;
  --od-surface-2: #0d1117;
  --od-surface-3: #21262d;
  --od-border:    #30363d;
  --od-muted:     #7d8590;
  --od-text:      #e6edf3;
}

[data-theme="light"] .order-detail-container {
  --od-surface:   #ffffff;
  --od-surface-2: #f6f8fa;
  --od-surface-3: #eef2f7;
  --od-border:    #e2e8f0;
  --od-muted:     #64748b;
  --od-text:      #0f172a;
}

/* ==============================================
   ORDER DETAIL – LAYOUT & DESIGN
   ============================================== */

.order-detail-container {
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Breadcrumb */
.od-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}

.od-breadcrumb-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font-size: 0.875rem;
  transition: opacity 0.2s;
}

.od-breadcrumb-link:hover {
  opacity: 0.75;
}

.od-breadcrumb-sep {
  color: var(--text-muted);
}

.od-breadcrumb-current {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.od-breadcrumb .od-header-actions {
  margin-left: auto;
  padding-left: 1rem;
}

/* Straßensperrungen */
/* Edit-Zeile spiegelt die Lese-Card (.rc-item) → gleicher Footprint. */
.rc-edit-type {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--od-surface);
  border: 1px solid var(--od-border);
  border-radius: 7px;
  color: var(--od-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}

.rc-edit-type:focus {
  outline: none;
  border-color: var(--primary);
}

.rc-edit-times {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rc-edit-time-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.rc-edit-time-label {
  flex-shrink: 0;
  width: 2.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--od-muted);
}

.rc-edit-date,
.rc-edit-time {
  min-width: 0;
  box-sizing: border-box;
  background: var(--od-surface);
  border: 1px solid var(--od-border);
  border-radius: 6px;
  color: var(--od-text);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
}

.rc-edit-date {
  flex: 1;
}

.rc-edit-time {
  flex: 0 0 5.25rem;
}

.rc-edit-date:focus,
.rc-edit-time:focus {
  outline: none;
  border-color: var(--primary);
}

.rc-form-add {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.65rem;
  border: 1px dashed var(--od-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rc-form-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.rc-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.rc-item {
  border: 1px solid var(--od-border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background: var(--od-surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* Freigegebene (fixierte) Sperrung: gesperrte Felder dezent ausgrauen. */
.rc-item--locked input:disabled,
.rc-item--locked select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rc-locked-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--od-muted);
}

.rc-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.rc-status-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 20px;
  padding: 0.28rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: filter 0.15s;
}
.rc-status-select:hover { filter: brightness(1.12); }
.rc-status-select[data-status="angefragt"]     { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.rc-status-select[data-status="freigegeben"]   { background: rgba(16,185,129,0.15);  color: #10b981; }
.rc-status-select[data-status="gesperrt"]      { background: rgba(220,38,38,0.15);   color: #dc2626; }
.rc-status-select[data-status="abgeschlossen"] { background: rgba(107,114,128,0.15); color: #8b9099; }

.rc-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 0.1rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.rc-status-badge[data-status="angefragt"]     { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.rc-status-badge[data-status="freigegeben"]   { background: rgba(16,185,129,0.15);  color: #10b981; }
.rc-status-badge[data-status="gesperrt"]      { background: rgba(220,38,38,0.15);   color: #dc2626; }
.rc-status-badge[data-status="abgeschlossen"] { background: rgba(107,114,128,0.15); color: #8b9099; }

.rc-item-time {
  color: var(--od-muted);
  font-size: 0.82rem;
}

.rc-actors {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.15rem;
}

.rc-actor-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--od-border) 70%, transparent);
}

.rc-actor-row:last-child {
  border-bottom: none;
}

.rc-actor-label {
  color: var(--od-muted);
}

.rc-actor-value {
  color: var(--od-text);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
}

.rc-actor-name {
  color: var(--od-text);
}

.rc-actor-time {
  color: var(--od-muted);
  font-size: 0.7rem;
}

.rc-delete-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0.3rem;
  align-self: flex-end;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.rc-delete-btn:hover {
  opacity: 1;
  border-color: #dc2626;
}

.rc-history {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--od-border);
  padding-top: 0.4rem;
  min-width: 0;
}

.rc-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.rc-history-status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  flex-wrap: wrap;
}

.rc-history-arrow {
  color: var(--od-muted);
  font-size: 0.62rem;
}

.rc-history-meta {
  color: var(--od-muted);
  font-size: 0.7rem;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  .rc-history-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .rc-history-meta {
    text-align: left;
  }
}

/* Two-column layout */
.od-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.od-col-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.od-col-side {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card */
.od-card {
  background: var(--od-surface);
  border: 0.5px solid var(--od-border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}

/* Title block */
.od-title-row {
  margin-bottom: 0.25rem;
}

/* Trennlinie zwischen Titel und folgendem Inhalt (Beschreibung bzw. Edit-Feld).
   Liegt auf dem Folge-Element, damit ohne Inhalt keine lose Linie entsteht.
   Termine (.od-date-grid-view) bringen ihre eigene Trennlinie bereits mit. */
.od-titleblock .od-title-row + .od-description,
.od-titleblock .od-title-row + .od-description-input {
  margin-top: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--od-border);
}

/* ── Footprint-treues Inline-Editing ──
   Edit-Felder nehmen den Platz der Lese-Werte ein (gleiche Schriftgröße,
   dezente Rahmen, keine Labels) → beim Wechsel View↔Edit kein Springen. */
.od-titleblock .od-title-input {
  border: none;
  border-bottom: 2px solid var(--od-border);
  border-radius: 0;
  background: transparent;
  padding: 0 0 0.3rem;
}

.od-titleblock .od-title-input:focus {
  border-bottom-color: var(--primary);
}

.od-description-input {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  min-height: 4.5rem;
  margin-bottom: 1rem;
}

.od-date-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  background: var(--od-surface);
  border: 1px solid var(--od-border);
  border-radius: 6px;
  padding: 0.15rem 0.35rem;
}

.od-date-input:focus {
  outline: none;
  border-color: var(--primary);
}

.od-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  width: 100%;
}

.od-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.od-description {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.5rem 0 1rem;
  white-space: pre-wrap;
}

/* Inline edit (Bearbeiten-Modus) */
.order-detail-container .od-inline-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-detail-container .od-inline-edit-grid .form-group {
  margin-bottom: 0;
}

.od-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.od-title-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--od-border);
  border-radius: 8px;
  background: var(--od-surface-2);
  color: var(--od-text);
  font-family: inherit;
}

.od-title-input:focus {
  outline: none;
  border-color: var(--primary);
}

.od-inline-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--od-border);
  border-radius: 8px;
  background: var(--od-surface-2);
  color: var(--od-text);
  font: inherit;
  resize: vertical;
}

.od-inline-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* Date grid (view mode, 4 cells) */
.od-date-grid-view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 0.5px solid var(--od-border);
}

.od-date-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  background: var(--od-surface-2);
  border-radius: 7px;
  padding: 0.6rem 0.75rem;
}

.od-date-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.od-date-value {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
}

/* Section header (inside cards) */
.od-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.od-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.od-section-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--od-surface-2);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
}

.od-section-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.2s;
  flex-shrink: 0;
}

.od-section-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Empty state */
.od-empty {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
}

/* ToDo list */
.od-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.od-todo-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: var(--od-surface-2);
  border-radius: 7px;
  border-left: 3px solid var(--primary);
}

.od-todo-item--done {
  border-left-color: #10b981;
  opacity: 0.7;
}

.od-todo-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: white;
  transition: all 0.2s;
}

.od-todo-item--done .od-todo-check {
  background: #10b981;
  border-color: #10b981;
}

.od-todo-check:hover {
  border-color: var(--primary);
}

.od-todo-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}

.od-todo-item--done .od-todo-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.od-todo-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}

.od-todo-badge--open {
  background: rgba(220, 38, 38, 0.15);
  color: var(--primary);
}

.od-todo-badge--done {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* Document empty drop-zone */
.od-doc-upload {
  margin-bottom: 0.85rem;
}

.od-doc-upload-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.od-doc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1.5px dashed var(--od-border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Kolonnen list (sidebar) */
.od-kolonnen-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.od-kolonnen-list .kolonne-card {
  min-height: 132px;
}

/* Persons */
.od-persons-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.od-person-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  background: var(--od-surface-2);
  border-radius: 7px;
}

.od-person-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}

/* Devices list (sidebar) */
.od-devices-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Timestamps */
.od-ts-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.od-ts-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.od-ts-key {
  color: var(--text-muted);
}

.od-ts-val {
  color: var(--text-muted);
  text-align: right;
}

/* ==============================================
   EDIT MODE
   ============================================== */

.od-edit-card {
  background: var(--od-surface);
  border: 0.5px solid var(--od-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
}

.od-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.od-edit-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.od-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.od-edit-full {
  grid-column: 1 / -1;
}

.od-section {
  margin-bottom: 0;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  border-top: 0.5px solid var(--od-border);
}

.od-section > .od-section-label {
  display: block;
  margin-bottom: 0.75rem;
}

/* Date grid in edit form (2-col) */
.od-date-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.75rem;
}

/* ==============================================
   SHARED UTILITY CLASSES
   ============================================== */

.btn-edit {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  background: var(--primary);
  color: white;
}

.btn-edit:hover {
  background: var(--primary-dark);
}

.btn-remove-small {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.btn-remove-small:hover {
  background: var(--error);
  color: white;
}

.status-badge {
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-select {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  border: none;
  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='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  transition: opacity 0.2s ease;
}

.status-select:hover {
  opacity: 0.9;
}

.status-select:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.status-select option {
  background-color: #333;
  color: white;
}

.status-verfügbar { background-color: #10b981; }
.status-gebucht   { background-color: #3b82f6; }
.status-in-wartung { background-color: #f59e0b; }
.status-defekt    { background-color: #ef4444; }

/* Customer */
.customer-info {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-theme="light"] .customer-info {
  background: var(--od-surface-2);
}

.customer-info h3 {
  margin: 0;
  font-size: 1.1rem;
}

.customer-info-clickable {
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.customer-info-clickable:hover {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Address */
.address-text {
  color: var(--text);
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.address-text-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

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

.map-container {
  margin-top: 1rem;
  position: relative;
}

.map-preview-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 111px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--od-surface-2, rgba(255, 255, 255, 0.03));
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.map-preview-link:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--od-surface-2, rgba(255, 255, 255, 0.05)));
}

.map-preview-link-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.map-preview-link-title {
  font-size: 0.9rem;
  line-height: 1.2;
}

.map-preview-link-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 240px;
}

.map-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  font-size: 0.875rem;
}

.map-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Note */
.note-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

[data-theme="light"] .note-content {
  background: var(--od-surface-2);
}

.note-content p {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 0.9rem;
}

/* Device item */
.device-item {
  position: relative;
  background: var(--od-surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.device-item--has-image {
  border-color: transparent;
}

.device-item--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.device-item--has-image .device-item-header,
.device-item--has-image .device-number {
  position: relative;
  z-index: 1;
}

.device-item--has-image .device-item-header h4,
.device-item--has-image .device-number,
.device-item--has-image .device-license-plate {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.device-item:hover {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.1);
  transform: translateY(-1px);
}

.device-item--has-image:hover {
  border-color: transparent;
  background: transparent;
}

.device-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.35rem;
}

.device-item-header h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  flex: 1;
}

.device-number,
.device-license-plate {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
}

/* Form elements */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
  background: var(--od-surface-2);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.75rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.btn-link {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-link:hover {
  background: var(--primary);
  color: white;
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

/* Kolonne multiselect (modal) */
.kolonne-multiselect {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.kolonne-multiselect-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

[data-theme="light"] .kolonne-multiselect-item {
  background: var(--od-surface-2);
}

.kolonne-multiselect-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .kolonne-multiselect-item:hover {
  background: var(--od-surface-3);
}

.kolonne-multiselect-item input {
  accent-color: var(--primary);
  cursor: pointer;
}

.no-options {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0 0;
}

/* ==============================================
   DOCUMENTS
   ============================================== */

.document-upload-area {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

[data-theme="light"] .document-upload-area {
  background: var(--od-surface-2);
}

.document-upload-area:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.upload-label {
  cursor: pointer;
  display: inline-block;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.upload-button-icon {
  flex-shrink: 0;
}

.document-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.document-icon-svg {
  flex-shrink: 0;
}

.btn-document-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-document-action-icon {
  flex-shrink: 0;
}

.upload-button:hover {
  background: var(--primary-dark);
}

.upload-button-camera {
  cursor: pointer;
  border: none;
}

.document-upload-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.document-pending-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.document-pending-name label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-pending-name input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  box-sizing: border-box;
}

[data-theme="light"] .document-pending-name input {
  background: var(--od-surface-2);
}

.document-pending-name input:focus {
  outline: none;
  border-color: var(--primary);
}

.document-pending-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.document-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.document-filter-chip {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--od-border);
  background: var(--od-surface-3);
  color: var(--od-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.document-filter-chip:hover {
  background: var(--od-border);
  color: var(--od-text);
}

.document-filter-chip--active {
  color: var(--text);
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

/* Document list – new design */
.document-item {
  background: var(--od-surface);
  border: 0.5px solid var(--od-border);
  border-left: 3px solid var(--od-muted);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

.document-item-icon {
  flex-shrink: 0;
  color: var(--text);
}

.document-item-body {
  flex: 1;
  min-width: 0;
}

.document-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--od-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-item-meta {
  font-size: 10px;
  color: var(--od-muted);
  margin-top: 0.2rem;
}

.document-item-category {
  font-weight: 500;
}

.document-item-size,
.document-item-date {
  color: var(--od-muted);
}

.document-item-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.document-action-btn {
  background: var(--od-surface-3);
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--od-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.document-action-btn:hover {
  background: var(--od-border);
}

.document-action-btn-delete {
  color: #e63030;
}

.document-action-btn-delete:hover {
  background: rgba(230, 48, 48, 0.15);
}

/* ==============================================
   MODAL STYLES
   ============================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* Preview Modal */
.modal-preview {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  min-width: 600px;
}

.preview-content {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.preview-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.preview-content iframe {
  width: 100%;
  min-height: 600px;
  border-radius: 8px;
}

.preview-not-supported {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.preview-not-supported p {
  margin-bottom: 1rem;
}

.preview-not-supported .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-not-supported .btn-primary-icon {
  flex-shrink: 0;
}

/* Camera Modal */
.modal-camera {
  max-width: min(90vw, 560px);
}

.camera-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.camera-error {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.camera-error-hint {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* ==============================================
   RESPONSIVE
   ============================================== */

@media (max-width: 900px) {
  .od-date-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .order-detail-container {
    padding: 0.75rem;
  }

  .od-layout {
    flex-direction: column;
  }

  /* Titel-/Hauptspalte zuerst, Sidebar (Status, …) darunter — Desktop unverändert (DOM: Sidebar links) */
  .od-col-main {
    width: 100%;
    order: 1;
  }

  .od-col-side {
    width: 100%;
    order: 2;
  }

  .od-date-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .od-edit-card {
    padding: 1rem 1.1rem;
  }

  .od-edit-grid {
    grid-template-columns: 1fr;
  }

  .od-edit-full {
    grid-column: 1;
  }

  .od-date-grid {
    grid-template-columns: 1fr;
  }

  .od-title {
    font-size: 1.2rem;
  }

  /* Modals */
  .modal-preview {
    min-width: auto;
    width: 95vw;
  }

  .preview-content iframe {
    min-height: 400px;
  }

  .modal-content {
    padding: 1.25rem;
  }

  .modal-header {
    margin-bottom: 1rem;
  }

  .modal-header h2 {
    font-size: 1.25rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .form-actions .btn-primary,
  .form-actions .btn-secondary {
    width: 100%;
    text-align: center;
    padding: 0.875rem;
  }

  .document-item {
    flex-wrap: wrap;
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .document-item-body {
    width: 100%;
    min-width: 0;
  }

  .document-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==============================================
   CONTACT SELECTOR (edit mode)
   ============================================== */

.contact-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.65rem 0.875rem;
  background: var(--od-surface-2);
  border: 1.5px solid var(--od-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.contact-option:hover {
  border-color: var(--primary);
  background: var(--od-surface-3);
}

.contact-option--active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--od-surface-2));
}

.contact-option-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--od-text);
}

.contact-option-meta {
  font-size: 0.78rem;
  color: var(--od-muted);
}

/* ==============================================
   CONTACT DISPLAY (view mode)
   ============================================== */

.contact-display {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0;
}

.contact-display-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, var(--od-surface-3));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.contact-display-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.contact-display-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--od-text);
}

.contact-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.contact-display-meta {
  font-size: 0.82rem;
  color: var(--primary);
  text-decoration: none;
  transition: opacity 0.15s;
}

.contact-display-meta:hover {
  opacity: 0.75;
}

/* ==============================================
   MOBILE APP-LAYOUT (gepinnter Kopf + Tabs)
   ============================================== */

.od-mobile {
  display: flex;
  flex-direction: column;
}

.od-mobile-header {
  position: sticky;
  /* Bündig unter der fixen oberen Menüleiste andocken. Die Nav schrumpft beim
     Scrollen (4 Stufen) und schreibt ihre aktuelle Höhe in --app-nav-height;
     gleiche Transition wie die Nav → keine Lücke. */
  top: var(--app-nav-height, calc(88px + env(safe-area-inset-top, 0px)));
  transition: top 200ms ease;
  z-index: 50;
  background: var(--od-surface-2);
  border-bottom: 1px solid var(--od-border);
  margin-bottom: 1rem;
  padding: 0.5rem 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.od-mobile-title {
  min-width: 0;
}

.od-mobile-title .od-title {
  font-size: 1.15rem;
}

/* Status + Aktionen teilen sich eine Zeile (platzsparend). */
.od-mobile-header-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.od-mobile-status {
  flex: 1;
  min-width: 0;
}

.od-mobile-header .od-header-actions {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.od-mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 5.5rem;
}

@media (max-width: 480px) {
  .order-detail-container {
    padding: 0.5rem;
  }

  .od-title {
    font-size: 1.1rem;
  }

  .od-date-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .od-date-cell {
    padding: 0.5rem 0.6rem;
  }

  .document-item {
    padding: 0.65rem 0.75rem;
  }
}
/* Geteilte Mobile-Tab-Logik für Detailansichten mit BottomBar (Kunde, Gerät, …).
   Die vorhandenen Karten bleiben an Ort und Stelle; auf Mobile blendet CSS nur den
   aktiven Tab-Pane ein. Tab-Namen: overview | orders | einsatz | docs. */

/* Desktop: Panes innerhalb der Hauptspalte sind layout-transparent, damit der
   Flex-Gap von .od-col-main zwischen den Karten erhalten bleibt. Die Sidebar-Spalte
   (od-col-side) ist selbst der „overview"-Pane und behält ihr Spalten-Layout. */
.od-col-main > .cd-tabpane {
  display: contents;
}

@media (max-width: 768px) {
  .od-layout.cd-tabbed .cd-tabpane {
    display: none;
  }

  .od-layout.cd-tabbed.cd-tab-overview .cd-tabpane[data-tab="overview"],
  .od-layout.cd-tabbed.cd-tab-orders .cd-tabpane[data-tab="orders"],
  .od-layout.cd-tabbed.cd-tab-einsatz .cd-tabpane[data-tab="einsatz"],
  .od-layout.cd-tabbed.cd-tab-kosten .cd-tabpane[data-tab="kosten"],
  .od-layout.cd-tabbed.cd-tab-aufmass .cd-tabpane[data-tab="aufmass"],
  .od-layout.cd-tabbed.cd-tab-docs .cd-tabpane[data-tab="docs"] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Im „Übersicht"-Tab (= Sidebar-Pane) hat die Hauptspalte keinen aktiven Pane → ausblenden. */
  .od-layout.cd-tabbed.cd-tab-overview .od-col-main {
    display: none;
  }
}
/* ─── Design tokens (od-* system, shared with OrderDetail) ──────────────── */
.customer-detail-container {
  --od-surface:   #161b22;
  --od-surface-2: #0d1117;
  --od-surface-3: #21262d;
  --od-border:    #30363d;
  --od-muted:     #7d8590;
  --od-text:      #e6edf3;

  /* keep af-* for backward-compat with form elements below */
  --af-surface:       #161b22;
  --af-surface-2:     #0d1117;
  --af-border:        #30363d;
  --af-border-hover:  #484f58;
  --af-muted:         #7d8590;
  --af-badge-bg:      #21262d;
  --af-inner-bg:      rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .customer-detail-container {
  --od-surface:   #ffffff;
  --od-surface-2: #f6f8fa;
  --od-surface-3: #eef2f7;
  --od-border:    #e2e8f0;
  --od-muted:     #64748b;
  --od-text:      #0f172a;

  --af-surface:       #ffffff;
  --af-surface-2:     #f6f8fa;
  --af-border:        #e2e8f0;
  --af-border-hover:  #94a3b8;
  --af-muted:         #64748b;
  --af-badge-bg:      #f1f5f9;
  --af-inner-bg:      rgba(0, 0, 0, 0.03);
}

/* ─── Container ───────────────────────────────────────────────────────────── */
.customer-detail-container {
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Sidebar info card ───────────────────────────────────────────────────── */
.cd-info-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cd-customer-name {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
}

.cd-customer-number {
  margin: 0;
  font-size: 0.8rem;
  color: var(--af-muted);
  font-weight: 500;
}

.cd-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ─── Inline edit grid (bearbeiten-Modus) ─────────────────────────────────── */
.customer-detail-container .cd-inline-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.customer-detail-container .cd-inline-edit-grid .form-group {
  margin-bottom: 0;
}

.customer-detail-container .cd-inline-edit-grid label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--od-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.customer-detail-container .cd-inline-edit-grid input,
.customer-detail-container .cd-inline-edit-grid textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--od-border);
  background: var(--od-surface-2);
  color: var(--od-text);
  padding: 0.75rem 0.9rem;
  font: inherit;
}

.cd-edit-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--od-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.cd-empty-hint {
  color: var(--od-muted);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
}

/* ─── Contact rows (sidebar) ──────────────────────────────────────────────── */
.cd-contact-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cd-contact-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cd-contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
}

.cd-contact-icon {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

/* Firmen-Ansprechpartner: Link + Copy als zusammenhängende Gruppe (umbruchfest) */
.cd-contact-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Adresse + Copy-Button */
.cd-address-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.cd-address-row .cd-address-lines {
  flex: 1;
  min-width: 0;
}

/* ─── Address (sidebar) ───────────────────────────────────────────────────── */
.cd-address-lines {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.9rem;
  color: var(--text);
}

.cd-map-wrap {
  margin-top: 0.75rem;
}

.map-preview-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 140px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-card, var(--bg));
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.map-preview-link:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-card, var(--bg)));
}

.map-preview-link-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.map-preview-link-title {
  font-size: 0.95rem;
}

.map-preview-link-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ─── Customer type badge ─────────────────────────────────────────────────── */
.customer-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  width: fit-content;
}

.customer-type-badge.private {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.customer-type-badge.company {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

/* ─── Action buttons ──────────────────────────────────────────────────────── */
.btn-edit {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.btn-edit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-delete {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  padding: 0.45rem 1rem;
  color: #ef4444;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

/* ─── Phone / email links ─────────────────────────────────────────────────── */
.phone-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.15s ease;
}

.phone-link:hover {
  text-decoration: underline;
}

/* ─── Map link ────────────────────────────────────────────────────────────── */
.map-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}

.map-link:hover {
  text-decoration: underline;
}

/* ─── Contacts block (company sidebar) ───────────────────────────────────── */
.contacts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-item {
  padding: 0.55rem 0;
  border-bottom: 0.5px solid var(--af-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.875rem;
  width: 100%;
}

/* ─── Orders section ──────────────────────────────────────────────────────── */
.orders-card {
  overflow: hidden;
}

.orders-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.1rem 0 0.85rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.orders-toggle-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.orders-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.orders-toggle-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.orders-toggle-title {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.2;
}

.orders-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--af-surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--af-border));
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
}

.orders-toggle-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--af-surface-2);
  border: 1px solid var(--af-border);
  color: var(--text-muted);
  transition: transform 0.24s ease, border-color 0.24s ease, color 0.24s ease, background 0.24s ease;
}

.orders-toggle-icon.is-open {
  transform: rotate(180deg);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--af-border));
  background: color-mix(in srgb, var(--primary) 10%, var(--af-surface-2));
}

.orders-card--intro .orders-toggle {
  animation: ordersCardNudge 0.95s ease;
}

.orders-panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.32s ease, opacity 0.2s ease;
}

.orders-panel.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0.82;
}

.orders-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 0.15rem;
}

.orders-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

.orders-header-top {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.orders-add-btn {
  padding-inline: 0.9rem;
}

.orders-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.orders-header .filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.orders-header .filter-group label {
  font-size: 0.8rem;
  color: var(--af-muted);
  white-space: nowrap;
}

.search-input {
  padding: 0.35rem 0.75rem;
  background: var(--af-surface-2);
  border: 1px solid var(--af-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.status-filter {
  padding: 0.35rem 0.6rem;
  background: var(--af-surface-2);
  border: 1px solid var(--af-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.status-filter:focus {
  outline: none;
  border-color: var(--primary);
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.order-item {
  background: var(--af-surface-2);
  border: 0.5px solid var(--af-border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.order-item-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  gap: 1rem;
  align-items: start;
}

.order-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.order-item:hover {
  border-color: var(--af-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.order-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.35rem;
  gap: 0.75rem;
}

.order-left-section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.order-number {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--af-muted);
  font-weight: 600;
  background: var(--af-badge-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  width: fit-content;
}

.order-item-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.order-right-section {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.customer-order-kolonnen {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.customer-order-kolonnen .kolonne-card {
  width: min(280px, 100%);
  min-height: 132px;
}

.status-badge {
  padding: 0.15rem 0.55rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid;
}

.status-in-planung {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
}

.status-offen {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}

.status-in-bearbeitung {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
}

.status-pausiert {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
}

.status-abgeschlossen {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.status-abgerechnet {
  color: #059669;
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.3);
}

.status-bezahlt {
  color: #f5f5f5;
  background: rgba(0, 0, 0, 0.72);
  border-color: #000000;
}

.status-storniert {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

.order-description {
  color: var(--af-muted);
  font-size: 0.825rem;
  margin: 0;
  line-height: 1.45;
}

.order-date {
  color: var(--af-muted);
  font-size: 0.75rem;
}

.no-orders {
  color: var(--af-muted);
  font-size: 0.875rem;
  font-style: italic;
  padding: 1rem 0;
  text-align: center;
}

@keyframes ordersCardNudge {
  0% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  55% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* ─── Edit Form ───────────────────────────────────────────────────────────── */
.contact-row {
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--af-inner-bg);
  border: 1px solid var(--af-border);
  border-radius: 8px;
}

.contact-row .form-group {
  margin-bottom: 0.75rem;
}

.btn-add-contact {
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px dashed var(--af-border);
  border-radius: 8px;
  color: var(--af-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn-add-contact:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-remove-contact {
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--af-muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.btn-remove-contact:hover {
  color: var(--primary);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.875rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--af-surface-2);
  border: 1px solid var(--af-border);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.35rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-family: inherit;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--af-border);
  border-radius: 8px;
  padding: 0.65rem 1.35rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-family: inherit;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── Loading / Error ─────────────────────────────────────────────────────── */
.loading,
.error {
  text-align: center;
  padding: 2rem;
  color: var(--af-muted);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .customer-detail-container {
    padding: 0.75rem;
  }

  .order-item-layout {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .orders-filters {
    flex-direction: column;
  }

  .orders-header .filter-group {
    flex-direction: column;
    align-items: stretch;
  }

  .orders-header .filter-group label {
    display: none;
  }

  .order-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .order-right-section {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .order-item-header .status-badge {
    align-self: flex-end;
  }

  .orders-toggle {
    padding-bottom: 0.7rem;
  }

  .orders-toggle-main {
    gap: 0.6rem;
  }

  .orders-toggle-title {
    font-size: 0.92rem;
  }

  .customer-order-kolonnen {
    justify-content: flex-start;
  }

  .customer-order-kolonnen .kolonne-card {
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .customer-detail-container {
    padding: 0.5rem;
  }

  .orders-toggle {
    gap: 0.7rem;
  }

  .orders-toggle-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }

  .orders-toggle-count {
    min-width: 0;
  }
}

/* ── Mobile: Platz für die fixe BottomBar (Tab-Logik kommt aus shared/detailTabs.css) ── */
@media (max-width: 768px) {
  .customer-detail-container {
    padding-bottom: 5.5rem;
  }
}
.confirm-modal {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.confirm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.confirm-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text);
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.confirm-modal-body {
  padding: 1.5rem;
}

.confirm-modal-body p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.timestamp-display {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timestamp-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.timestamp-value {
  font-size: 1rem;
  color: var(--text);
  font-weight: 600;
}

.confirm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

@media (max-width: 480px) {
  .confirm-modal {
    width: calc(100vw - 2rem);
    max-width: none;
  }

  .confirm-modal-actions {
    padding: 1rem;
  }

  .confirm-modal-header,
  .confirm-modal-body {
    padding: 1rem;
  }
}

.device-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.device-carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: device-carousel-fade 0.35s ease;
  cursor: inherit;
}

.device-carousel-img--placeholder {
  object-fit: contain;
  background: #fff;
  padding: 1.5rem;
}

@keyframes device-carousel-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.device-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.detail-hero:hover .device-carousel-arrow,
.device-carousel-arrow:focus-visible {
  opacity: 1;
}

.device-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.device-carousel-arrow--prev {
  left: 0.75rem;
  transform: translateY(-50%) rotate(90deg);
}

.device-carousel-arrow--next {
  right: 0.75rem;
  transform: translateY(-50%) rotate(-90deg);
}

.device-carousel-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 4;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.device-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.device-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.device-carousel-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* On touch devices, arrows stay visible since :hover doesn't work */
@media (hover: none) {
  .device-carousel-arrow {
    opacity: 1;
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 480px) {
  .device-carousel-arrow {
    width: 32px;
    height: 32px;
  }
  .device-carousel-dots {
    bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
  }
}
.device-images-editor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.device-images-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.device-images-editor-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.device-images-editor-error {
  margin: 0;
  font-size: 0.85rem;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.device-images-editor-empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem 0;
}

.device-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}

.device-image-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.device-image-thumb.is-cover {
  border-color: var(--primary);
}

.device-image-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.device-image-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg) 0%, var(--border) 100%);
}

.device-image-thumb-actions {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.device-image-thumb:hover .device-image-thumb-actions,
.device-image-thumb:focus-within .device-image-thumb-actions {
  opacity: 1;
}

.device-image-thumb-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.1s ease;
}

.device-image-thumb-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.8);
}

.device-image-thumb-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.device-image-thumb-btn--cover.is-active {
  background: var(--primary);
  opacity: 1;
}

.device-image-thumb-btn--delete:hover:not(:disabled) {
  background: #dc2626;
}

.device-image-thumb-badge {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  pointer-events: none;
}

/* On touch, always show actions */
@media (hover: none) {
  .device-image-thumb-actions {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .device-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}
.kolonne-detail-container {
  --od-surface: var(--bg-card);
  --od-surface-2: rgba(255, 255, 255, 0.03);
  --od-surface-3: var(--surface-elevated);
  --od-border: var(--border);
  --od-muted: var(--text-muted);
  --od-text: var(--text);
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.kd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.5rem 2rem 1rem;
}

.kd-body {
  padding: 0 2rem 2rem;
}

.kd-info-card {
  text-align: left;
}

.kd-kolonne-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--od-text);
  margin: 0 0 0.5rem 0;
}

.kd-kolonne-desc {
  color: var(--od-muted);
  font-size: 0.925rem;
  margin: 0 0 0.25rem 0;
  line-height: 1.5;
}

.kd-card-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--od-border);
}

.kd-edit-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0;
  padding: 0 2rem;
}

.kolonne-switcher-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kolonne-switcher-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}

.kolonne-switcher-select {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark, rgba(255, 255, 255, 0.06));
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 160px;
}

.detail-hero-wrap {
  overflow: hidden;
  margin-bottom: 2rem;
}

.detail-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem 2rem;
  transition: height 0.35s ease, width 0.35s ease;
}

/* Bg image element inside hero for reveal animation */
.detail-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: image-reveal 0.6s ease forwards;
}

/* Gradient-Overlay auf dem Titelbild bewusst entfernt (User-Wunsch). */

/* Loading shimmer */
.detail-hero--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: img-shimmer 1.6s infinite linear;
  pointer-events: none;
  z-index: 1;
}

/* Content above image and overlay */
.detail-hero-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.detail-hero[role="button"] {
  cursor: pointer;
}

.detail-hero.hero-expanded {
  height: min(420px, 75vh);
}

.detail-hero-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.btn-back {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-back:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-edit,
.btn-delete {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-edit {
  background: var(--primary);
  color: white;
}

.btn-edit:hover {
  background: var(--primary-dark);
}

.btn-delete {
  background: var(--error);
  color: white;
}

.btn-delete:hover {
  background: #dc2626;
}

.edit-form {
  padding: 0;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}

.detail-card h1 {
  margin-top: 0;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.info-item span {
  color: var(--text);
  font-size: 1rem;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.user-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.user-item-info {
  flex: 1;
  min-width: 0;
}

.user-info h3,
.user-item > div h4 {
  margin: 0 0 0.15rem 0;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info p,
.user-item > div p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-remove {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove:hover {
  background: var(--error);
  color: white;
}

.add-user-section {
  margin-top: 1rem;
}

.user-select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}

.user-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Kolonne detail refresh: align order cards with customer detail */
.kolonne-detail-container .kd-note-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kolonne-detail-container .kd-kolonne-desc {
  margin: 0;
  color: var(--od-text);
  font-size: 0.94rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.kolonne-detail-container .kd-kolonne-desc--empty {
  color: var(--od-muted);
  font-style: italic;
}

.kolonne-detail-container .kd-inline-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kolonne-detail-container .kd-inline-edit-grid .form-group {
  margin-bottom: 0;
}

.kolonne-detail-container .kd-inline-edit-grid label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--od-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kolonne-detail-container .kd-inline-edit-grid input,
.kolonne-detail-container .kd-inline-edit-grid textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--od-border);
  background: var(--od-surface-2);
  color: var(--od-text);
  padding: 0.75rem 0.9rem;
  font: inherit;
}

.kolonne-detail-container .kd-inline-edit-grid textarea {
  resize: vertical;
  min-height: 120px;
}

.kolonne-detail-container .kd-order-card {
  padding: 0.9rem 1rem;
}

.kolonne-detail-container .kd-order-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kolonne-detail-container .kd-order-details-panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.32s ease, opacity 0.2s ease;
}

.kolonne-detail-container .kd-order-details-panel.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0.82;
}

.kolonne-detail-container .kd-order-details-inner {
  min-height: 0;
  overflow: hidden;
}

.kolonne-detail-container .kd-order-card .order-item-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.kolonne-detail-container .kd-order-card .order-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.kolonne-detail-container .kd-order-summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: inherit;
}

.kolonne-detail-container .kd-order-summary-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}

.kolonne-detail-container .kd-order-summary-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.kolonne-detail-container .kd-order-summary-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--od-text);
}

.kolonne-detail-container .kd-order-summary-toggle {
  width: 1.95rem;
  height: 1.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--od-surface-2);
  border: 1px solid var(--od-border);
  color: var(--od-muted);
  transition: transform 0.22s ease, color 0.22s ease, border-color 0.22s ease;
  flex-shrink: 0;
}

.kolonne-detail-container .kd-order-summary-toggle.is-open {
  transform: rotate(180deg);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--od-border));
}

.kolonne-detail-container .kd-order-card .order-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.2rem;
}

.kolonne-detail-container .kd-order-card .order-left-section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.kolonne-detail-container .kd-order-card .order-left-section h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--od-text);
}

.kolonne-detail-container .kd-order-card .order-number {
  display: inline-flex;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--od-muted);
  background: var(--od-surface-2);
  border: 1px solid var(--od-border);
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
}

.kolonne-detail-container .kd-order-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.kolonne-detail-container .kd-order-remove {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.kolonne-detail-container .kd-order-remove:hover {
  transform: translateY(-1px);
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.5);
}

.kolonne-detail-container .kd-order-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: center;
  font-size: 0.78rem;
}

.kolonne-detail-container .kd-order-card .order-item-customer,
.kolonne-detail-container .kd-order-card .order-date,
.kolonne-detail-container .kd-order-card .order-item-contact {
  color: var(--od-muted);
}

.kolonne-detail-container .kd-order-address {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-top: 0.15rem;
  padding: 0.78rem 0.9rem;
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--od-surface-2)), var(--od-surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--od-border));
}

.kolonne-detail-container .kd-order-address-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.kolonne-detail-container .kd-order-address-label,
.kolonne-detail-container .kd-order-road-closures-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--od-muted);
}

.kolonne-detail-container .kd-order-address-text {
  margin: 0;
  color: var(--od-text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.kolonne-detail-container .kd-order-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--od-border);
  background: var(--od-surface);
  color: var(--primary);
  text-decoration: none;
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.kolonne-detail-container .kd-order-road-closures {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.kolonne-detail-container .kd-order-road-closures-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.kolonne-detail-container .kd-order-road-closure-chip {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 0.68rem 0.8rem;
  border-radius: 12px;
  background: var(--od-surface-2);
  border: 1px solid var(--od-border);
}

.kolonne-detail-container .kd-order-road-closure-chip strong {
  font-size: 0.84rem;
  color: var(--od-text);
}

.kolonne-detail-container .kd-order-road-closure-chip small {
  color: var(--od-muted);
}

.kolonne-detail-container .rc-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.kolonne-detail-container .rc-status-badge[data-status="angefragt"] {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.kolonne-detail-container .rc-status-badge[data-status="freigegeben"] {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.kolonne-detail-container .rc-status-badge[data-status="gesperrt"] {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.kolonne-detail-container .rc-status-badge[data-status="abgeschlossen"] {
  background: rgba(107, 114, 128, 0.15);
  color: #8b9099;
}

.kolonne-detail-container .kd-order-right-section {
  display: flex;
  justify-content: flex-end;
}

.kolonne-detail-container .kd-order-date-grid {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: stretch;
}

.kolonne-detail-container .kd-order-date-grid .od-date-cell {
  min-height: 88px;
  justify-content: center;
  border: 1px solid var(--od-border);
}

.kolonne-detail-container .kd-order-date-grid .od-date-value {
  font-size: 0.82rem;
  line-height: 1.35;
}

.kolonne-detail-container .kd-order-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.2rem;
}

.kolonne-detail-container .kd-order-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--od-border));
  background: color-mix(in srgb, var(--primary) 12%, var(--od-surface-2));
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.kolonne-detail-container .kd-order-link-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--od-border));
  background: color-mix(in srgb, var(--primary) 18%, var(--od-surface-2));
}

.kolonne-detail-container .kd-card-actions .btn-secondary {
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

@media (max-width: 960px) {
  .kolonne-detail-container .kd-order-right-section {
    justify-content: stretch;
  }
}

@media (max-width: 640px) {
  .kolonne-detail-container .kd-order-card {
    padding: 0.85rem 0.9rem;
  }

  .kolonne-detail-container .kd-order-card .order-item-header {
    flex-direction: column;
  }

  .kolonne-detail-container .kd-order-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .kolonne-detail-container .kd-order-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kolonne-detail-container .kd-order-address-head {
    align-items: stretch;
  }

  .kolonne-detail-container .kd-order-map-link {
    width: fit-content;
  }
}

.no-users,
.no-orders {
  color: var(--text-muted);
  font-style: italic;
}

.orders-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.orders-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.kd-orders-card {
  overflow: hidden;
}

.kd-orders-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.1rem 0 0.85rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.kd-orders-toggle-main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.kd-orders-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.kd-orders-toggle-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--od-muted);
}

.kd-orders-toggle-title {
  font-size: 1rem;
  color: var(--od-text);
  line-height: 1.2;
}

.kd-orders-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--od-surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--od-border));
  color: var(--od-text);
  font-size: 0.8rem;
  font-weight: 700;
}

.kd-orders-toggle-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--od-surface-2);
  border: 1px solid var(--od-border);
  color: var(--od-muted);
  transition: transform 0.24s ease, border-color 0.24s ease, color 0.24s ease, background 0.24s ease;
}

.kd-orders-toggle-icon.is-open {
  transform: rotate(180deg);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--od-border));
  background: color-mix(in srgb, var(--primary) 10%, var(--od-surface-2));
}

.kd-orders-card--intro .kd-orders-toggle {
  animation: kdOrdersCardNudge 0.95s ease;
}

.kd-photos-card .device-images-editor {
  padding-top: 0.35rem;
}

.kd-photos-card .device-images-editor-header {
  justify-content: flex-end;
}

.kd-orders-panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.32s ease, opacity 0.2s ease;
}

.kd-orders-panel.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0.82;
}

.kd-orders-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 0.15rem;
}

.orders-section-header h2 {
  margin: 0;
}

.kolonne-orders-view-toggle {
  display: flex;
  gap: 0.25rem;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.kolonne-orders-view-toggle button {
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.kolonne-orders-view-toggle button:hover:not(.active) {
  color: var(--text);
}

.kolonne-orders-view-toggle button.active {
  background: var(--primary);
  color: #fff;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kolonne-detail-container .order-item {
  background: var(--od-surface-2);
  border: 1px solid var(--od-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  gap: 0.55rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.kolonne-detail-container .order-item:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--od-border));
  background: color-mix(in srgb, var(--primary) 5%, var(--od-surface-2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.orders-history-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.orders-history-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 1rem 0;
}

.orders-list--history {
  margin-bottom: 0;
}

.order-item--history {
  opacity: 0.92;
}

.order-item--history:hover {
  opacity: 1;
}

.devices-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.device-item {
  position: relative;
  background: #111318;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Loading shimmer */
.device-item--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: img-shimmer 1.6s infinite linear;
  pointer-events: none;
}

/* Background image as <img> for reveal animation */
.device-item-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  z-index: 0;
  animation: image-reveal 0.55s ease forwards;
}

.device-item-bg--placeholder {
  object-fit: contain;
  background: #fff;
  padding: 0.5rem;
}

.device-item--has-image {
  border-color: transparent;
}

.device-item--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
  pointer-events: none;
  z-index: 1;
}

.device-item--has-image .device-item-header,
.device-item--has-image .device-number {
  position: relative;
  z-index: 2;
}

.device-item--has-image .device-item-header h4,
.device-item--has-image .device-number,
.device-item--has-image .device-license-plate {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.device-item:hover {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.1);
  transform: translateY(-2px);
}

.device-item--has-image:hover {
  border-color: transparent;
  background: transparent;
}

.device-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.device-item-header h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  flex: 1;
}

.device-number,
.device-license-plate {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-verfügbar {
  background-color: #10b981;
}

.status-gebucht {
  background-color: #3b82f6;
}

.status-in-wartung {
  background-color: #f59e0b;
}

.status-defekt {
  background-color: #ef4444;
}

/* ── Compact Order Item ─────────────────────────────────── */
.order-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.order-item:hover {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.04);
}

.order-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
  z-index: 1000;
}

.drag-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed var(--border);
  border-radius: 8px;
}

.order-item.drag-over {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
}

.order-item:active {
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: none) and (pointer: coarse) {
  .order-item { -webkit-tap-highlight-color: transparent; }
}

/* Top row: status + title + remove */
.order-item-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.order-item-status {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 0.22rem 0.58rem;
}

.order-item-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--od-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  min-width: 0;
  line-height: 1.25;
}

/* Meta row: customer + date */
.order-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.order-item-customer {
  font-size: 0.8rem;
  color: var(--od-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.order-item-date {
  font-size: 0.75rem;
  color: var(--od-muted);
  flex-shrink: 0;
}

/* Tracking row */
.order-item-track {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--od-border) 75%, transparent);
}

.order-item-track-info {
  font-size: 0.75rem;
  color: var(--od-muted);
  margin-left: auto;
}

.order-item-contact {
  font-size: 0.78rem;
  color: var(--od-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-item-contact-meta {
  opacity: 0.75;
}

.btn-track-start,
.btn-track-end {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.46rem 0.86rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.btn-track-start:hover { background: var(--primary-dark); box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22); }
.btn-track-end { background: #10b981; }
.btn-track-end:hover { background: #059669; box-shadow: 0 8px 18px rgba(16, 185, 129, 0.22); }

@keyframes kdOrdersCardNudge {
  0% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  55% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  color: white;
}

.status-in-planung {
  background: #8b5cf6;
}

.status-offen {
  background: #f59e0b;
}

.status-in-bearbeitung {
  background: #3b82f6;
}

.status-pausiert {
  background: #94a3b8;
}

.status-abgeschlossen {
  background: #10b981;
}

.status-abgerechnet {
  background: #059669;
}

.status-bezahlt {
  background: #000000;
}

.status-storniert {
  background: #ef4444;
}

.order-date {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.add-order-section {
  margin-top: 1rem;
}

.add-order-section--top {
  margin-top: 0;
  min-width: min(320px, 100%);
}

.order-select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}

.order-select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

/* Kachelbild – Upload-Bereich wie bei Gerät */
.info-section-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  color: var(--text);
}

.device-image-hint {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.documents-section {
  margin-top: 0.5rem;
}

.document-upload-area {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.document-upload-area:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.upload-label {
  cursor: pointer;
  display: inline-block;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.upload-button-icon {
  flex-shrink: 0;
}

.upload-button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.upload-label input[type="file"]:disabled + .upload-button {
  opacity: 0.6;
  cursor: not-allowed;
}

.document-upload-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.upload-button-camera {
  cursor: pointer;
  border: none;
}

.document-pending-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.document-pending-name label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-pending-name input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}

.document-pending-name input:focus {
  outline: none;
  border-color: var(--primary);
}

.document-pending-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.document-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.document-item:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.1);
}

.document-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.document-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.document-details {
  flex: 1;
  min-width: 0;
}

.document-name {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-document-action {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-document-action:hover {
  background: var(--primary);
  color: white;
}

.btn-document-delete {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 6px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-document-delete:hover {
  background: var(--error);
  color: white;
}

.no-documents {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

.modal-camera {
  max-width: min(90vw, 560px);
}

.camera-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.camera-error {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.camera-error-hint {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.modal-preview {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  min-width: 600px;
}

.preview-content {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.preview-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .kd-header {
    padding: 1rem 1rem 0.75rem;
  }

  .kd-body {
    /* Platz für die fixe BottomBar, damit sie den Inhalt nicht überdeckt. */
    padding: 0 1rem calc(1.5rem + 5.5rem);
  }

  .kolonne-detail-container .od-layout {
    flex-direction: column;
  }

  .kolonne-detail-container .od-col-side,
  .kolonne-detail-container .od-col-main {
    width: 100%;
  }

  .detail-hero-wrap {
    margin-bottom: 1rem;
  }

  .detail-hero {
    height: 180px;
    padding: 1rem;
  }

  .detail-hero.hero-expanded {
    height: min(320px, 70vh);
  }

  .detail-hero-title {
    font-size: 1.35rem;
  }

  .kd-orders-toggle {
    gap: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* Aufträge-Karte auf Mobile nicht einklappbar (Steuerung läuft über die BottomBar-Tabs). */
  .kolonne-detail-container .kd-orders-panel.is-collapsed {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .kolonne-detail-container .kd-orders-toggle {
    cursor: default;
    pointer-events: none;
  }

  .kolonne-detail-container .kd-orders-toggle-icon {
    display: none;
  }

  .kd-orders-toggle-main {
    gap: 0.6rem;
    align-items: flex-start;
  }

  .kd-orders-toggle-title {
    font-size: 0.92rem;
  }

  .orders-section-header {
    gap: 0.7rem;
  }

  .orders-section-actions {
    width: 100%;
    justify-content: stretch;
  }

  .add-order-section--top {
    min-width: 100%;
  }

  .modal-preview {
    min-width: auto;
    width: 95vw;
  }

  .modal-content {
    padding: 1.5rem;
  }

  .document-item {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .document-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .devices-list {
    grid-template-columns: 1fr;
  }

  .order-item-top {
    flex-wrap: wrap;
  }

  .order-item-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-item-track-info {
    margin-left: 0;
  }
}

/* Mini Document Manager */
.kd-mini-docs {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  margin-top: 8px;
}

.kd-mini-docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kd-mini-docs-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.kd-mini-docs-actions {
  display: flex;
  gap: 6px;
}

.kd-mini-doc-pending {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card, var(--bg));
}

.kd-mini-doc-pending-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.kd-mini-doc-pending-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.kd-mini-doc-pending-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

.kd-mini-doc-pending-ext {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.kd-mini-doc-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kd-mini-docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}

.kd-mini-docs-btn:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.kd-mini-docs-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.kd-mini-docs-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kd-mini-docs-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.02));
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}

.kd-mini-docs-file:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
  border-color: var(--border);
}

.kd-mini-docs-error {
  font-size: 0.78rem;
  color: var(--danger, #ef4444);
  margin: 4px 0 8px;
}

/* Row thumbnail (images) */
.kd-mini-docs-row-thumb-link {
  flex-shrink: 0;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  font: inherit;
  color: inherit;
}

.kd-mini-docs-thumb-loading {
  box-sizing: border-box;
}

.kd-mini-docs-row-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: block;
}

/* File icon placeholder */
.kd-mini-docs-row-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.kd-mini-docs-file-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.kd-mini-docs-btn--danger:hover {
  color: var(--danger, #ef4444);
}

.kd-mini-docs-file-name {
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kd-mini-docs-file-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.kd-mini-doc-preview-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.kd-mini-doc-preview-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}

.kd-mini-doc-preview-body {
  min-height: 40vh;
}

.kd-mini-doc-preview-body iframe.kd-mini-doc-preview-iframe {
  width: 100%;
  min-height: 65vh;
  border: none;
  border-radius: 8px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
}

.kd-mini-doc-preview-pdf-narrow {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem 0 0;
}

.kd-mini-doc-preview-pdf-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: var(--primary, #3b82f6);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  font-family: inherit;
  text-align: center;
}

.kd-mini-doc-preview-iframe.kd-mini-doc-preview-iframe--narrow-pdf-fallback {
  min-height: 35vh;
  max-height: 50vh;
}

/* Pinned orders */
.kd-order-pinned {
  background: var(--primary-bg, rgba(59, 130, 246, 0.04));
  border-left: 3px solid var(--accent, #3b82f6);
}

.kd-pin-indicator {
  font-size: 14px;
  margin-right: 6px;
  flex-shrink: 0;
}

.kd-pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 2px 6px;
  border-radius: 4px;
  filter: grayscale(1);
}

.kd-pin-btn.is-pinned {
  opacity: 1;
  filter: none;
}

.kd-order-accordion:hover .kd-pin-btn,
.kd-order-summary:focus-within .kd-pin-btn {
  opacity: 1;
}

.kd-pin-btn:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  filter: none;
}

@keyframes image-reveal {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes img-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   KENNZEICHEN — German License Plate Component
   ═══════════════════════════════════════════════════════════════ */

/* ── EU Strip (shared) ─────────────────────────────────────────── */
.kz-eu-strip,
.kz-badge-eu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #003399;
  flex-shrink: 0;
  gap: 1px;
}

.kz-stars-svg { display: block; }

.kz-country-code,
.kz-badge-country {
  color: #fff !important;
  font-weight: 700;
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  line-height: 1;
  letter-spacing: 0;
}

/* ── Sticker decorations (TÜV + AU circles) ─────────────────────── */
.kz-sticker-group,
.kz-badge-stickers {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.kz-sticker {
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
}

.kz-sticker--tuev {
  background: conic-gradient(
    #e53935 0deg 90deg,
    #fdd835 90deg 180deg,
    #43a047 180deg 270deg,
    #1565c0 270deg 360deg
  );
}

.kz-sticker--au {
  background: conic-gradient(
    #fdd835 0deg 120deg,
    #43a047 120deg 240deg,
    #e53935 240deg 360deg
  );
}

/* ── Vertical separator ─────────────────────────────────────────── */
.kz-sep-line,
.kz-badge-sep-line {
  display: inline-block;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   INPUT PLATE
   ════════════════════════════════════════════════════════════════ */
/* Isolate from theme — Kennzeichen bleibt immer heller Hintergrund, schwarze Schrift */
.kz-plate--input,
.kz-badge {
  color-scheme: light;
}

.kz-plate--input {
  display: inline-flex;
  align-items: stretch;
  border: 2.5px solid #111;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5ec;
  height: 62px;
  width: 100%;
  max-width: 340px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.kz-plate--input .kz-eu-strip {
  padding: 5px 6px 4px;
  min-width: 30px;
}

.kz-plate--input .kz-country-code {
  font-size: 11px;
}

.kz-plate-body {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 10px;
  gap: 6px;
}

.kz-field {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Oswald', 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  color: #000 !important;
  text-align: center;
  font-size: 1.85rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0;
  min-width: 0;
  caret-color: #003399;
}

/* Ort (Stadtkürzel): 1–3 Buchstaben — ausreichend Platz für Lesbarkeit */
.kz-city-field {
  width: 5.5ch;
  min-width: 5.5ch;
  max-width: 5.5ch;
}

/* Buchstaben: 2 Zeichen — ausreichend Platz für Lesbarkeit */
.kz-letters-field {
  width: 4.5ch;
  min-width: 4.5ch;
  max-width: 4.5ch;
}

/* Zahlen: 1–4 Ziffern — mindestens 4 sichtbar */
.kz-digits-field {
  flex: 1;
  min-width: 6ch;
}

.kz-field::placeholder {
  color: #a0a098 !important;
  font-weight: 600;
}

.kz-field:focus {
  color: #003399 !important;
}

.kz-plate--input .kz-sticker-group {
  gap: 2px;
}

.kz-plate--input .kz-sticker {
  width: 14px;
  height: 14px;
}

.kz-plate--input .kz-sep-line {
  width: 1.5px;
  height: 55%;
}

/* ════════════════════════════════════════════════════════════════
   BADGE (read-only display)
   ════════════════════════════════════════════════════════════════ */
.kz-badge {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid #111;
  border-radius: 4px;
  overflow: hidden;
  background: #f5f5ec;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
  vertical-align: middle;
  /* Always render in light mode — plate is white and text must stay dark */
  color-scheme: light;
}

.kz-badge--sm { height: 28px; width: fit-content; align-self: center; }
.kz-badge--md { height: 40px; width: fit-content; align-self: center; }

/* EU strip sizing per variant */
.kz-badge--sm .kz-badge-eu { padding: 2px 3px 1px; min-width: 18px; }
.kz-badge--sm .kz-badge-country { font-size: 7px; }

.kz-badge--md .kz-badge-eu { padding: 3px 5px 2px; min-width: 24px; }
.kz-badge--md .kz-badge-country { font-size: 9px; }

.kz-badge-body {
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.kz-badge--sm .kz-badge-body { padding: 0 5px; gap: 3px; }
.kz-badge--md .kz-badge-body { padding: 0 8px; gap: 5px; }

.kz-badge .kz-badge-city,
.kz-badge .kz-badge-letters,
.kz-badge .kz-badge-digits {
  font-family: 'Oswald', 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  color: #000 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.kz-badge--sm .kz-badge-city,
.kz-badge--sm .kz-badge-letters,
.kz-badge--sm .kz-badge-digits { font-size: 0.9rem; color: #000 !important; }

.kz-badge--md .kz-badge-city,
.kz-badge--md .kz-badge-letters,
.kz-badge--md .kz-badge-digits { font-size: 1.2rem; color: #000 !important; }

/* Sticker sizes per variant */
.kz-badge--sm .kz-badge-stickers { gap: 1px; }
.kz-badge--md .kz-badge-stickers { gap: 2px; }

.kz-badge--sm .kz-sticker { width: 8px;  height: 8px; }
.kz-badge--md .kz-sticker { width: 12px; height: 12px; }

/* Separator sizes per variant */
.kz-badge--sm .kz-badge-sep-line { width: 1px;   height: 50%; }
.kz-badge--md .kz-badge-sep-line { width: 1.5px; height: 55%; }
.geraete-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.geraete-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.geraete-header h1 {
  margin: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.geraete-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.geraete-sidebar {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 1rem;
}

.geraete-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.geraete-sidebar-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.25rem 0;
}

.geraete-status-stats {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.geraete-stat-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.875rem;
  color: var(--text);
  text-align: left;
  width: 100%;
}

.geraete-stat-chip:hover,
.geraete-stat-chip.active {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.08);
}

.geraete-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.geraete-stat-label {
  flex: 1;
  text-transform: capitalize;
}

.geraete-stat-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(128, 128, 128, 0.15);
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
}

.geraete-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.geraete-cat-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: all 0.15s;
}

.geraete-cat-btn:hover {
  background: var(--bg-card);
}

.geraete-cat-btn.active {
  background: var(--bg-card);
  border-color: var(--primary);
  color: var(--primary);
}

.geraete-cat-label {
  flex: 1;
}

.geraete-main {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.category-new-input {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

.category-new-input:focus {
  outline: none;
  border-color: var(--primary);
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Wie Aufträge-Kanban / Liste: card-enter */
@keyframes geraete-card-enter {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.device-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid #000;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  animation: geraete-card-enter 0.22s ease both;
  animation-delay: calc(var(--card-i, 0) * 28ms);
}

/* Loading shimmer when background image is fetching */
.device-card--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: img-shimmer 1.6s infinite linear;
  pointer-events: none;
}

/* Background image rendered as <img> to enable fade-in on load */
.device-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  z-index: 0;
  animation: image-reveal 0.55s ease forwards;
}

.device-card-bg--placeholder {
  object-fit: contain;
  background: #fff;
  padding: 1rem;
}

.device-card--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}

.device-card--has-image .device-card-header,
.device-card--has-image .device-card-body {
  position: relative;
  z-index: 2;
}

@keyframes image-reveal {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes img-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.device-card--has-image .device-card-header h3,
.device-card--has-image .device-number {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.device-card--has-image .device-category,
.device-card--has-image .device-location,
.device-card--has-image .device-maintenance {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.device-card:hover { 
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
}

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

.device-card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.device-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* KZ badge on card: same sm height but bigger text */
.device-card-header-right .kz-badge--sm {
  height: 32px;
}

.device-card-header-right .kz-badge--sm .kz-badge-city,
.device-card-header-right .kz-badge--sm .kz-badge-letters,
.device-card-header-right .kz-badge--sm .kz-badge-digits {
  font-size: 0.95rem;
}

.device-card-header-right .kz-badge--sm .kz-badge-eu {
  min-width: 20px;
}

.device-card-header-right .kz-badge--sm .kz-sticker {
  width: 9px;
  height: 9px;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  white-space: nowrap;
}

.device-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.device-number {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0;
}

.device-category,
.device-location,
.device-maintenance {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-content {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(220, 38, 38, 0.4);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Wartungsintervall + TÜV (Create-Modal) */
.gd-interval-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.gd-interval-input input,
.gd-interval-input select {
  flex: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;
}

.gd-tuev-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.gd-tuev-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.gd-tuev-row--stacked {
  flex-direction: column;
  align-items: flex-start;
}

.gd-tuev-row--stacked input {
  width: 100%;
  max-width: 12rem;
}

.gd-tuev-row input {
  flex: 1;
  min-width: 0;
}

.gd-tuev-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.gd-maintenance-btn {
  margin-top: 0.5rem;
  white-space: nowrap;
}

.loading {
  text-align: center;
  padding: 4rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .geraete-layout {
    flex-direction: column;
  }

  .geraete-sidebar {
    width: 100%;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .gd-interval-input,
  .gd-tuev-row {
    flex-direction: column;
    align-items: stretch;
  }

  .geraete-sidebar-section {
    flex: 1;
    min-width: 160px;
  }

  .geraete-status-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .geraete-stat-chip {
    width: auto;
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .geraete-container {
    padding: 1rem;
  }

  .geraete-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .devices-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

.dc-card { display: flex; flex-direction: column; gap: 0.9rem; }
.dc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dc-total { font-size: 0.9rem; color: var(--text-muted); }
.dc-add-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.8rem; border-radius: 8px; border: 1px solid var(--primary);
  background: var(--primary); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.dc-muted { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.dc-small { font-size: 0.78rem; }

.dc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.dc-list li { display: grid; grid-template-columns: minmax(120px, 1fr) 1.4fr auto; align-items: center; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.dc-list li:last-child { border-bottom: none; padding-bottom: 0; }
.dc-cat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.dc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dc-beleg { font-size: 0.7rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; }
.dc-info { display: flex; flex-direction: column; }
.dc-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-meta { font-size: 0.75rem; color: var(--text-muted); }
.dc-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.dc-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.dc-link:hover { text-decoration: underline; }
.dc-link--danger { color: #dc2626; }

.dc-form { display: flex; flex-direction: column; gap: 0.75rem; }
.dc-row { display: flex; gap: 0.6rem; }
.dc-row .dc-field { flex: 1; }
.dc-field { display: flex; flex-direction: column; gap: 0.3rem; }
.dc-field > span { font-size: 0.82rem; color: var(--text-muted); }
.dc-field input, .dc-field select {
  padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 0.9rem; font-family: inherit;
}
.dc-field input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-hover, rgba(128,128,128,0.12)); }
.dc-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.dc-error { color: var(--error); font-size: 0.85rem; }
.dc-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.dc-btn { padding: 0.5rem 0.9rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.dc-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.dc-btn:disabled { opacity: 0.6; cursor: default; }
.geraete-detail-container {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-hero-wrap {
  overflow: hidden;
  margin-bottom: 2rem;
}

.detail-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem 2rem;
  transition: height 0.35s ease, width 0.35s ease;
}

/* Bg image element inside hero for reveal animation */
.detail-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: image-reveal 0.6s ease forwards;
}

/* Gradient-Overlay auf dem Titelbild bewusst entfernt (User-Wunsch). */

/* Loading shimmer */
.detail-hero--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: img-shimmer 1.6s infinite linear;
  pointer-events: none;
  z-index: 1;
}

/* Content above image and overlay */
.detail-hero-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.detail-hero[role="button"] {
  cursor: pointer;
}

.detail-hero.hero-expanded {
  height: min(420px, 75vh);
}

.detail-hero-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.detail-hero-status {
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.gd-header {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem 1rem;
}

.gd-body {
  padding: 0 2rem 2rem;
}

.gd-info-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gd-device-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.gd-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  text-transform: capitalize;
  align-self: flex-start;
}

.gd-info-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.gd-card-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.gd-edit-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.gd-notes-text {
  color: var(--text-muted);
  font-size: 0.925rem;
  margin: 0;
  white-space: pre-wrap;
}

.gd-notes-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
}

/* Inline edit (Bearbeiten-Modus) */
.geraete-detail-container .gd-inline-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.geraete-detail-container .gd-inline-edit-grid .form-group {
  margin-bottom: 0;
}

.gd-inline-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.gd-inline-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.gd-chassis {
  font-size: 0.8rem;
  font-family: monospace;
  word-break: break-all;
}

/* Quick status select */
.gd-status-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

.gd-status-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Details grid (2-col) */
.gd-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.gd-detail-cell {
  background: var(--bg);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gd-detail-cell--full {
  grid-column: 1 / -1;
}

.gd-detail-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.gd-detail-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Date grid for Wartung/TÜV */
.gd-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.gd-date-cell {
  background: var(--bg);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 3px solid var(--border);
}

.gd-date-cell--overdue {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.gd-date-cell--warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.gd-date-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.gd-date-cell--overdue .gd-date-label { color: #ef4444; }
.gd-date-cell--warning .gd-date-label { color: #f59e0b; }

.gd-date-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

/* Wartungsintervall mit Einheiten-Auswahl */
.gd-interval-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.gd-interval-input input,
.gd-interval-input select {
  flex: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;
}

/* TÜV-Intervall Info + Button */
.gd-tuev-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.gd-tuev-current-display {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  margin-bottom: 0.75rem;
}

.gd-tuev-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.gd-tuev-row--stacked {
  flex-direction: column;
  align-items: flex-start;
}

.gd-tuev-row input {
  flex: 1;
  min-width: 0;
}

.gd-tuev-row--stacked input {
  width: 100%;
  max-width: 12rem;
}

.gd-tuev-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.gd-maintenance-btn {
  margin-top: 0.5rem;
  white-space: nowrap;
}

.gd-date-cell--overdue .gd-date-value { color: #ef4444; }
.gd-date-cell--warning .gd-date-value { color: #f59e0b; }

.warning-banner {
  margin-bottom: 1rem;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0 2rem;
}

.btn-back {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-back:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-edit,
.btn-delete {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-edit {
  background: var(--primary);
  color: white;
}

.btn-edit:hover {
  background: var(--primary-dark);
}

.btn-delete {
  background: var(--error);
  color: white;
}

.btn-delete:hover {
  background: #dc2626;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 2rem 2rem;
}

.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.device-header h1 {
  margin: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.status-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
}

.warning-banner {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.maintenance-overdue {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #ff6b6b;
}

.maintenance-warning {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fbbf24;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h2 {
  margin: 0;
}

.section-header--with-filter {
  flex-wrap: wrap;
  gap: 1rem;
}

.assignments-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.assignment-filter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.assignment-filter-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.assignment-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.assignment-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.btn-small {
  background: var(--primary);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  color: white;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-small:hover {
  background: var(--primary-dark);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.info-item span {
  color: var(--text);
  font-size: 1rem;
}

.info-item span.overdue {
  color: #ef4444;
  font-weight: 600;
}

.info-item span.warning {
  color: #f59e0b;
  font-weight: 600;
}

.note-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.note-content p {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Container für alle Zuweisungen */
.assignments-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Kolonnen-Zuweisungen: nebeneinander, auf Mobile untereinander */
.assignments-kolonnen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.assignment-kolonne-card {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.assignment-kolonne-tile-wrapper {
  position: relative;
  display: block;
}

.assignment-kolonne-card .kolonne-card {
  border-radius: 12px 12px 0 0;
  border-width: 0;
  height: auto;
  min-height: 0;
}

.assignment-kolonne-remove {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.assignment-kolonne-remove:hover {
  background: var(--error, #ef4444);
}

.assignment-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.assignment-date {
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
}

/* Grid für Mitarbeiter-/Auftrags-Zuweisungen (nebeneinander wenn Platz) */
.assignments-other-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Mitarbeiter-/Auftrags-Zuweisungen: Karten mit Profilbild bzw. Auftrags-Link */
.assignments-container .assignment-card--other {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 400px;
}

.assignment-card-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assignment-card-user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.assignment-card-user-row .avatar {
  flex-shrink: 0;
}

.assignment-card-name {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
}

.assignment-card-order-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.assignment-card-order-row:hover {
  background: rgba(255, 255, 255, 0.1);
}

.assignment-card-order-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.assignment-card-order-title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

.assignment-card-kolonne-fallback {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assignment-card-kolonne-name {
  font-size: 0.9rem;
  color: var(--text);
}

/* Mobile: Kolonnen-Karten volle Breite, untereinander */
@media (max-width: 768px) {
  .assignments-kolonnen-grid {
    flex-direction: column;
  }

  .assignment-kolonne-card {
    max-width: 100%;
  }

  .assignments-container .assignment-card--other {
    max-width: 100%;
  }
}

.btn-remove-small {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-remove-small:hover {
  background: var(--error);
  color: white;
}

.no-items {
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-content {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  /* Platz für die fixe BottomBar. */
  .geraete-detail-container {
    padding-bottom: 5.5rem;
  }

  .detail-hero-wrap {
    margin-bottom: 1rem;
  }

  .detail-hero {
    height: 180px;
    padding: 1rem;
  }

  .detail-hero.hero-expanded {
    height: min(320px, 70vh);
  }

  .detail-hero-title {
    font-size: 1.35rem;
  }

  .gd-header {
    padding: 1rem 1rem 0.75rem;
  }

  .gd-body {
    padding: 0;
  }

  .geraete-detail-container .od-layout {
    flex-direction: column;
  }

  .geraete-detail-container .od-col-side {
    width: 100%;
    order: -1;
  }

  .geraete-detail-container .od-card {
    padding: 0.875rem 0.75rem;
  }

  .device-calendar-wrapper {
    padding: 0.25rem;
  }

  .detail-header {
    padding: 0 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .detail-content {
    padding: 0 1rem 1rem;
  }

  .device-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal-preview {
    min-width: auto;
    width: 95vw;
  }

  .modal-content {
    padding: 1.5rem;
  }

  .document-item {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .document-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.info-section-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  color: var(--text);
}

.device-image-hint {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Documents / Kachelbild – wie im Auftrag */
.documents-section {
  margin-top: 0.5rem;
}

.document-upload-area {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.document-upload-area:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.upload-label {
  cursor: pointer;
  display: inline-block;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.upload-button-icon {
  flex-shrink: 0;
}

.upload-button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.upload-label input[type="file"]:disabled + .upload-button {
  opacity: 0.6;
  cursor: not-allowed;
}

.document-upload-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.upload-button-camera {
  cursor: pointer;
  border: none;
}

.document-pending-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.document-pending-name label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-pending-name input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}

.document-pending-name input:focus {
  outline: none;
  border-color: var(--primary);
}

.document-pending-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.document-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.document-item:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.1);
}

.document-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.document-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.document-details {
  flex: 1;
  min-width: 0;
}

.document-name {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-document-action {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-document-action:hover {
  background: var(--primary);
  color: white;
}

.btn-document-delete {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 6px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-document-delete:hover {
  background: var(--error);
  color: white;
}

.no-documents {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* Camera Modal */
.modal-camera {
  max-width: min(90vw, 560px);
}

.camera-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.camera-error {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.camera-error-hint {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* Preview Modal */
.modal-preview {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  min-width: 600px;
}

.preview-content {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.preview-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Device bookings calendar */
.device-bookings-section {
  margin-top: 1rem;
}

.device-bookings-section h2 {
  margin-bottom: 1rem;
}

.device-calendar-wrapper {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  overflow: hidden;
}

.device-calendar-wrapper .fc {
  --fc-border-color: var(--border);
  --fc-button-bg-color: var(--secondary);
  --fc-button-border-color: var(--border);
  --fc-button-hover-bg-color: var(--primary);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--bg-dark);
}

.device-calendar-wrapper .fc .fc-button {
  color: var(--text);
}

.device-calendar-wrapper .fc-theme-standard td,
.device-calendar-wrapper .fc-theme-standard th {
  border-color: var(--border);
}

.device-calendar-wrapper .fc-event {
  cursor: pointer;
}

/* Touch: Tippen & Ziehen für neue Buchung, keine Zooms */
.device-calendar-touch {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 320px;
}

.device-calendar-touch .fc {
  touch-action: manipulation;
}

.device-calendar-touch .fc-scrollgrid,
.device-calendar-touch .fc-timegrid-body {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .device-calendar-touch {
    min-height: 380px;
    padding: 0.5rem;
  }

  .device-calendar-touch .fc .fc-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.65rem;
  }

  .device-calendar-touch .fc-daygrid-day-number {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .device-calendar-touch .fc-timegrid-slot {
    min-height: 2.5em;
  }
}

@keyframes image-reveal {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes img-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.user-management-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.user-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.user-management-header h1 {
  font-size: 2rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.users-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.user-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.user-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}

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

.user-card-header .avatar {
  flex-shrink: 0;
}

.user-card-header h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  color: var(--text);
}

.user-username {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.user-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-role {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

/* Position im Unternehmen: bewusst anders als das Rollen-Badge (kein Versalsatz,
   gedeckte Farbe), damit beide nicht verwechselt werden. */
.user-position {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.user-position--unassigned {
  color: var(--text-muted);
  font-style: italic;
  border-style: dashed;
}

.btn-edit {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.btn-edit:hover {
  color: var(--text);
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
}

.user-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.user-details p {
  margin: 0.5rem 0;
}

.user-details strong {
  color: var(--text);
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.modal-content .info-section {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.modal-content .info-section h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group input:disabled,
.form-group select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.form-actions-left {
  display: flex;
  gap: 1rem;
}

.btn-danger {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: #ff6b6b;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-danger:hover {
  background: rgba(255, 68, 68, 0.2);
  border-color: #ff6b6b;
  color: #ff5252;
}

.form-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}

.error-message {
  background: rgba(255, 68, 68, 0.1);
  color: #ff6b6b;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 68, 68, 0.3);
  margin-bottom: 1rem;
}

.loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .user-management-container {
    padding: 1rem;
  }

  .user-management-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .users-list {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

.user-detail-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.btn-back {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-back:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-edit {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-edit:hover {
  background: var(--primary-dark);
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}

.user-detail-photo-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.user-detail-photo-section .avatar {
  flex-shrink: 0;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  flex: 1;
}


.user-header h1 {
  margin: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.status-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-section {
  margin-bottom: 1rem;
}

.info-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.info-section h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
  margin-top: 1.5rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.info-item span {
  color: var(--text);
  font-size: 1rem;
}

.role-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-weight: 500;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .user-detail-container {
    padding: 1rem;
  }

  .detail-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .user-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal-preview {
    min-width: auto;
    width: 95vw;
  }

  .document-item {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .document-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.phone-link {
  color: var(--primary);
  text-decoration: none;
  transition: all 0.3s ease;
}

.phone-link:hover {
  text-decoration: underline;
  color: var(--primary-dark);
}

/* Documents section (same as OrderDetail) */
.documents-section {
  margin-top: 1rem;
}

.document-upload-area {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed var(--border);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.document-upload-area:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.document-upload-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.upload-label {
  cursor: pointer;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.upload-button-camera {
  cursor: pointer;
}

.upload-button-icon {
  flex-shrink: 0;
}

.document-pending-upload {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.document-pending-name label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-pending-name input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}

.document-pending-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.document-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.document-item:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.1);
}

.document-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.document-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.document-details {
  flex: 1;
  min-width: 0;
}

.document-name {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.document-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-document-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.btn-document-action:hover {
  background: var(--primary);
  color: white;
}

.btn-document-delete {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 6px;
  padding: 0.5rem;
  cursor: pointer;
}

.btn-document-delete:hover {
  background: var(--error);
  color: white;
}

.no-documents {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* Modals (preview + camera) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
}

.btn-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.modal-hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.modal-preview {
  max-width: 90vw;
  min-width: 400px;
}

.preview-content {
  margin-top: 1rem;
}

.preview-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
}

.preview-not-supported {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.preview-not-supported .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modal-camera {
  max-width: min(90vw, 560px);
}

.camera-preview-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.camera-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.camera-error {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.camera-error-hint {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* Default (Mobile/schmale Screens): horizontaler Block unter dem Kalender */
.kalender-legend {
  display: block;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  font-size: 0.85rem;
  color: var(--text, #111);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  max-width: 1280px;
  margin: 1rem auto 0;
}

.kalender-legend-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.kalender-legend-group + .kalender-legend-group {
  margin-top: 0.75rem;
}

.kalender-legend-group-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
}

.kalender-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.kalender-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kalender-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.kalender-legend-label {
  line-height: 1.2;
}

.kalender-legend-swatch--timeline-glass {
  height: 16px;
  border-style: dashed;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--swatch-color, #dc2626) 55%, transparent);
  background: color-mix(in srgb, var(--swatch-color, #dc2626) 22%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swatch-color, #dc2626) 18%, transparent);
}

.kalender-legend-swatch--timeline-dual {
  position: relative;
  width: 22px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none;
  flex-shrink: 0;
}

.kalender-legend-swatch--timeline-dual > .kalender-legend-swatch--timeline-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.kalender-legend-swatch--timeline-dual > .kalender-legend-swatch--timeline-actual {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 3px;
  bottom: 3px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--swatch-color, #dc2626) 40%, #000);
}

.kalender-legend-hint {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
}

/* Auf schmalen Screens: Liste horizontal flowen, damit der Block kompakt bleibt */
@media (max-width: 1499px) {
  .kalender-legend-list {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.4rem;
  }
}

/* Mobile: Abstand zur fixen Bottom-Tab-Bar, damit die Legende nicht dahinter verschwindet. */
@media (max-width: 768px) {
  .kalender-legend {
    margin-bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
}

/* Fill-Modus (Teamkalender, 1025–1499px): Hier scrollt die Seite nicht, die Legende steht
   also nicht unterhalb der Falz wie in den anderen Kalenderbereichen, sondern nimmt der
   Zeitleiste direkt Höhe weg. Als Karte mit Überschriften wären das ~165px. Deshalb dieselbe
   flache Form, die Finanzen.css für `.fin-legend` nutzt: eine Zeile, Punkt + Text, kein Rahmen.
   Unter 1025px scrollt die Seite wieder – dort bleibt die normale Karte. */
@media (min-width: 1025px) and (max-width: 1499px) {
  .kalender-page--fill + .kalender-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.1rem;
    row-gap: 0.3rem;
    padding: 0.4rem 0.15rem 0;
    margin: 0;
    max-width: none;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 0.78rem;
    color: var(--text-muted);
  }

  /* „Legende“ als Überschrift ist in einer einzeiligen Leiste nur Ballast. */
  .kalender-page--fill + .kalender-legend .kalender-legend-title {
    display: none;
  }

  /* Gruppen lösen sich auf, damit Titel und Einträge in einer Reihe fließen. */
  .kalender-page--fill + .kalender-legend .kalender-legend-group {
    display: contents;
  }

  .kalender-page--fill + .kalender-legend .kalender-legend-group-title {
    margin: 0;
  }

  .kalender-page--fill + .kalender-legend .kalender-legend-list {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
  }
}

/* Breite Screens: Sticky Sidebar rechts neben dem Kalender */
@media (min-width: 1500px) {
  .main-content:has(> .kalender-page) {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .main-content:has(> .kalender-page) > .kalender-page {
    flex: 0 1 1280px;
    min-width: 0;
    max-width: 1280px;
  }

  .kalender-legend {
    flex: 0 0 200px;
    position: sticky;
    top: calc(88px + env(safe-area-inset-top, 0px) + 4rem);
    max-width: none;
    margin: 0;
    max-height: calc(100vh - 88px - env(safe-area-inset-top, 0px) - 5rem);
    overflow-y: auto;
  }

  /* Fill-Modus: die Seite scrollt nicht, also braucht die Legende kein Sticky.
     Sie bleibt auf Inhaltshöhe und wird nur gedeckelt, wenn der Viewport nicht reicht. */
  .kalender-page--fill + .kalender-legend {
    position: static;
    align-self: flex-start;
    max-height: 100%;
  }
}
.kalender-page {
  padding: 1rem 1.25rem 1.25rem;
  max-width: 100%;
  margin: 0 auto;
}

/* ── Fill-Modus (Teamkalender) ────────────────────────────────────────────────
   Ziel: kein Doppel-Scroll. Die Seite füllt exakt den Viewport, gescrollt wird
   ausschließlich in der Zeitleiste. Die Höhenkette beginnt in Layout.css
   (.layout / .main-content) und läuft hier weiter:
     .kalender-page--fill → .kalender-fill-slot → .team-calendar → .otl → .otl-scroll
   Jedes Glied braucht `min-height: 0`, sonst wächst ein Flex-Item mit seinem
   Inhalt statt zu scrollen. Unter 1025px greift die Kette nicht (dort scrollt die
   Seite wie bisher) – deshalb der max-height-Fallback weiter unten. */
@media (min-width: 1025px) {
  .kalender-page--fill {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0.75rem;
  }

  .kalender-page--fill > .kalender-fill-slot,
  .kalender-page--fill .team-calendar,
  .kalender-page--fill .otl {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .kalender-page--fill .otl-scroll {
    flex: 1;
    min-height: 0;
    max-height: none;
  }

  /* Jahresansicht hat kein .otl – sie bekommt ihren eigenen Scroller. */
  .kalender-page--fill .team-year-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0;
  }

}

/* Legende: exakt wie in den anderen Kalenderbereichen – ab 1500px sticky Sidebar,
   darunter ein kompakter Block unter dem Kalender (KalenderLegend.css). Im
   Fill-Modus muss sie nur in die Höhenkette eingehängt werden, damit sie nicht
   aus dem Viewport fällt. */
@media (min-width: 1025px) and (max-width: 1499px) {
  .main-content:has(> .kalender-page.kalender-page--fill) {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .main-content:has(> .kalender-page.kalender-page--fill) > .kalender-page--fill {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  /* Die Legende behält ihre Inhaltshöhe, die Zeitleiste bekommt den Rest. */
  .kalender-page--fill + .kalender-legend {
    flex: 0 0 auto;
    margin: 0.5rem auto 0;
  }
}

@media (min-width: 1500px) {
  /* `align-self` statt `align-items` am Container: sonst würde die Sidebar-Legende
     mitgestreckt und stünde als überlanges Kästchen neben dem Kalender.
     Doppelte Klasse, damit die Regel unabhängig von der Import-Reihenfolge der
     beiden CSS-Dateien gewinnt – bei gleicher Spezifität entschiede sonst der Zufall. */
  .main-content:has(> .kalender-page.kalender-page--fill) > .kalender-page--fill {
    align-self: stretch;
  }
}

/* Unter 1025px scrollt die Seite – die Zeitleiste bekommt eine feste
   Viewport-Bindung, damit ihre untere Scrollleiste erreichbar bleibt.
   (Ersetzt das frühere per JS gesetzte maxHeight, das nach dem ersten
   Page-Scroll veraltet war.) */
@media (max-width: 1024px) {
  .kalender-page--fill .otl-scroll {
    max-height: calc(100dvh - 19rem);
  }
}

@media (max-width: 768px) {
  .kalender-page--fill .otl-scroll {
    max-height: calc(100dvh - 16rem);
  }
}

.kalender-header {
  margin-bottom: 1.5rem;
}

.kalender-header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.kalender-header-row h1 {
  margin: 0;
}

.kalender-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.kalender-add-button:hover {
  background: var(--primary-dark, #b91c1c);
  transform: scale(1.05);
}

.kalender-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text, #fff);
}

.kalender-subtitle {
  color: var(--text-muted, rgba(255, 255, 255, 0.7));
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

/* Bereichswechsel nutzt jetzt die wiederverwendbare BottomBar (variant="segment"). */

/* Team calendar */
.team-calendar {
  overflow-x: visible;
  max-width: 100%;
}

/* ── tcb = team calendar bar ──────────────────────────────────────────────────
   Ersetzt fünf gestapelte Kopfblöcke (zwei Filterleisten, Modus-Umschalter,
   Wochen-Navigation, Wochen-Chips, Anzeige-Filter) durch eine Zeile. Die
   Wochen-Chips sind ersatzlos entfallen: ‹ › plus Monatspicker am Zeitraum-Label
   leisten dasselbe auf einem Bruchteil der Höhe. */
.tcb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.tcb-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.tcb-nav {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-dark);
}

.tcb-arrow,
.tcb-period {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

.tcb-arrow {
  width: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
}

.tcb-period {
  padding: 0.4rem 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-width: 12.5rem;
}

.tcb-arrow:hover,
.tcb-period:hover {
  background: rgba(255, 255, 255, 0.08);
}

.tcb-btn {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tcb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.tcb-btn--primary {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--text);
  font-weight: 600;
}

.tcb-btn--filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Zugeklappt muss erkennbar bleiben, dass etwas ausgeblendet ist. */
.tcb-btn--filter-active {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  color: var(--text);
}

.tcb-select {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.tcb-select select {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}

.tcb .team-calendar-mode-toggle {
  margin-right: 0;
}

.tcb-filter-pop {
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.kalender-filter-bar--popover {
  margin-bottom: 0;
  border: none;
  background: none;
  padding: 0.6rem;
}

.kalender-filter-bar--popover .kalender-filter-bar-chips {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 768px) {
  .tcb-period {
    min-width: 0;
    flex: 1;
  }

  .tcb-nav {
    flex: 1 1 100%;
  }

  .tcb-spacer {
    display: none;
  }
}

.team-calendar-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.team-calendar-header-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.team-calendar-nav-btn {
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.team-calendar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.team-calendar-nav-btn--primary {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--text);
  font-weight: 600;
}

.team-calendar-nav-btn--primary:hover {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--text);
}

.team-calendar-header button {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}

.team-calendar-header button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.team-calendar-week-label {
  font-weight: 500;
  color: var(--text);
  min-width: 230px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1.5px dotted var(--text-muted);
  padding-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.team-week-scroller {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0.35rem 0.6rem;
  margin-bottom: 0.75rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.5rem;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-size: 100% 100%;
}

.team-week-chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  min-width: 7.5rem;
  font-size: 0.82rem;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
}

.team-week-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* Kalenderaktuelle Woche (nicht ausgewählt): dezent, schwächer als .active */
.team-week-chip.team-week-chip--calendar-current {
  background: rgba(220, 38, 38, 0.08);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--text);
}

.team-week-chip.active {
  background: color-mix(in srgb, var(--primary) 32%, transparent);
  border-color: var(--primary);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}

.team-week-chip.team-week-chip--calendar-current-active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.team-calendar-week-label::after {
  content: ' ▾';
  font-size: 0.65em;
  opacity: 0.5;
  vertical-align: middle;
}

.team-calendar-week-label:hover {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.team-calendar-week-label--static {
  cursor: default;
  border-bottom: none;
  padding-bottom: 0;
}

.team-calendar-week-label--static::after {
  content: none;
}

.team-calendar-week-label--static:hover {
  border-bottom-color: transparent;
  color: var(--text);
}

.team-calendar-mode-toggle {
  display: inline-flex;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-right: 0.5rem;
}

.team-calendar-mode-toggle button {
  padding: 0.35rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.team-calendar-mode-toggle button + button {
  border-left: 1px solid var(--border);
}

.team-calendar-mode-toggle button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.team-calendar-mode-toggle button.active {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--text);
  font-weight: 600;
}

/* Team Jahresansicht (Monatskacheln, KW, Abwesenheitsbalken) */
.team-year-view {
  margin-top: 0.75rem;
}

.team-year-error {
  background: color-mix(in srgb, var(--error, #ef4444) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--error, #ef4444) 35%, var(--border));
  color: var(--text);
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.team-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.1rem;
  align-items: start;
}

.team-year-month {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 0.65rem 0.5rem 0.75rem;
  min-width: 0;
}

.team-year-month-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  text-transform: capitalize;
}

.cy-month-title-btn {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  background: none;
  border: none;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.cy-month-title-btn:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

.team-year-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.72rem;
}

.team-year-th-kw,
.team-year-kw {
  width: 1.75rem;
  padding: 0.2rem 0.1rem;
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
}

.team-year-th-kw {
  border-bottom: 1px solid var(--border);
  font-size: 0.65rem;
}

.team-year-th-day {
  padding: 0.25rem 0.05rem;
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  font-size: 0.65rem;
}

.team-year-kw {
  vertical-align: middle;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
}

.team-year-cell {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0;
  vertical-align: top;
  height: 2.35rem;
}

.team-year-cell:last-child {
  border-right: none;
}

.team-year-cell--weekend {
  background: rgba(148, 163, 184, 0.11);
}

.team-year-cell--other-month {
  opacity: 0.42;
}

.team-year-cell--today {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

.team-year-cell-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 2.2rem;
  padding: 0.12rem 0.1rem 0.08rem;
}

.team-year-day-num {
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  font-size: 0.75rem;
}

.team-year-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  min-height: 5px;
}

.team-year-bar {
  height: 5px;
  min-height: 5px;
}

.team-year-bar--urlaub {
  background: #f8d300;
}

.team-year-bar--krank {
  background: #0370b2;
}

.team-year-bar--segment-start.team-year-bar--segment-end {
  border-radius: 3px;
}

.team-year-bar--segment-start:not(.team-year-bar--segment-end) {
  border-radius: 3px 0 0 3px;
}

.team-year-bar--segment-end:not(.team-year-bar--segment-start) {
  border-radius: 0 3px 3px 0;
}

@media (max-width: 1100px) {
  .team-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .team-year-grid {
    grid-template-columns: 1fr;
  }

  .team-calendar-mode-toggle {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }

  .team-calendar-mode-toggle button {
    flex: 1;
  }
}

.team-calendar-empty {
  color: var(--text-muted);
  padding: 2rem;
  text-align: center;
}

.team-timeline-kw-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
  padding: 0.2rem 0.25rem 0;
  line-height: 1.2;
}

.team-timeline-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 2.75rem;
}


.team-timeline-week-days--head {
  font-weight: 600;
  color: var(--text-muted);
}

.team-timeline-day-head {
  padding: 0.55rem 0.25rem;
  text-align: center;
  border-right: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.25;
}

.team-timeline-week-days .team-timeline-day-head:last-child {
  border-right: none;
}

/* Team-Lane-Label (nicht interaktiv – nur Anzeige). */
.otl-lane-label--static { cursor: default; }
.otl-lane-label--static:hover { background: var(--otl-surface); }

/* Read-only Team-Track: kein Greif-Cursor. */
.otl--readonly .otl-track { cursor: default; }

/* Durchgehendes Segment (Auftrag/Urlaub/Krankheit/Anwesend) über den Team-Track. */
.otl-seg {
  position: absolute;
  height: 24px;
  left: calc(var(--day-start, 0) * var(--orders-timeline-day-w) + 2px);
  width: calc(var(--day-count, 1) * var(--orders-timeline-day-w) - 4px);
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  box-sizing: border-box;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

button.otl-seg {
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-weight: 500;
}

.otl-seg-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.otl-seg--auftrag:hover {
  filter: brightness(1.1);
}

.otl-seg--anwesend {
  background: rgba(90, 170, 110, 0.2) !important;
  color: #5aaa6e;
  border-color: #4a8f5c !important;
  font-weight: 600;
}

.otl-seg.orders-timeline-bar--clip-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.otl-seg.orders-timeline-bar--clip-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.kalender-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.kalender-error {
  background: var(--bg-card);
  border: 1px solid var(--error, #ef4444);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kalender-error button {
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
}

.kalender-error button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.kalender-filter-urlaub-summary {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

/* Filter bar (chip-style) – responsive für alle Bildschirmgrößen */
.kalender-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.kalender-filter-bar-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.kalender-filter-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.kalender-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.kalender-filter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}

.kalender-filter-chip--on {
  border-color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 22%, transparent);
  color: var(--text);
}

.kalender-filter-chip--on:hover {
  background: color-mix(in srgb, var(--chip-color) 32%, transparent);
}

.kalender-filter-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kalender-filter-chip--on .kalender-filter-chip-dot {
  box-shadow: 0 0 0 2px var(--bg-card);
}

.kalender-filter-chip-label {
  white-space: nowrap;
}

.kalender-filter-bar-summary {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Urlaubstage-Zeile: platzsparend, eigene Zeile unter der Filterleiste */
.kalender-urlaub-summary-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 0;
}

.kalender-urlaub-summary-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.kalender-urlaub-summary-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kalender-urlaub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: transform 0.15s, box-shadow 0.15s;
}

.kalender-urlaub-badge:hover {
  transform: translateY(-1px);
}

.kalender-urlaub-badge--booked {
  background: color-mix(in srgb, #f8d300 18%, transparent);
  color: #f8d300;
  border: 1px solid color-mix(in srgb, #f8d300 45%, transparent);
}

.kalender-urlaub-badge--requested {
  background: color-mix(in srgb, rgb(100 116 139) 22%, transparent);
  color: #cbd5e1;
  border: 1px solid color-mix(in srgb, rgb(100 116 139) 45%, transparent);
}

.kalender-urlaub-badge--free {
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: #6ee7b7;
  border: 1px solid color-mix(in srgb, #10b981 40%, transparent);
}

.kalender-urlaub-badge-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.kalender-urlaub-badge-text {
  font-weight: 500;
  opacity: 0.95;
}

.kalender-sickness-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.kalender-btn-small {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
}

.kalender-wrapper {
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

/* Touch-friendly: Tippen & Ziehen für Auswahl, keine versehentliche Zooms */
.kalender-touch {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 320px;
}

.kalender-touch .fc {
  touch-action: manipulation;
}

.kalender-touch .fc-scrollgrid,
.kalender-touch .fc-timegrid-body {
  -webkit-overflow-scrolling: touch;
}

/* FullCalendar overrides for dark theme */
.kalender-wrapper .fc {
  --fc-border-color: var(--border);
  --fc-button-bg-color: var(--secondary, #1e293b);
  --fc-button-border-color: var(--border);
  --fc-button-hover-bg-color: var(--primary, #dc2626);
  --fc-button-hover-border-color: var(--primary);
  --fc-button-active-bg-color: var(--primary-dark, #b91c1c);
  --fc-today-bg-color: rgba(220, 38, 38, 0.2);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--bg-dark);
  --fc-list-event-hover-bg-color: rgba(255, 255, 255, 0.08);
}

.kalender-wrapper .fc-theme-standard td,
.kalender-wrapper .fc-theme-standard th {
  border-color: var(--border);
}

.kalender-wrapper .fc-scrollgrid {
  border-color: var(--border);
}

.kalender-wrapper .fc .fc-button {
  color: var(--text);
  text-transform: capitalize;
}

.kalender-wrapper .fc .fc-button:hover {
  color: #fff;
}

.kalender-wrapper .fc-col-header-cell-cushion,
.kalender-wrapper .fc-days-cell .fc-daygrid-day-number {
  color: var(--text-muted);
}

.kalender-wrapper .fc .fc-toolbar-title {
  cursor: pointer;
  user-select: none;
  border-bottom: 1.5px dotted var(--text-muted);
  padding-bottom: 2px;
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.kalender-wrapper .fc .fc-toolbar-title::after {
  content: ' ▾';
  font-size: 0.65em;
  opacity: 0.5;
  vertical-align: middle;
}

.kalender-wrapper .fc .fc-toolbar-title:hover {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.kalender-wrapper .fc-event {
  cursor: pointer;
  border-radius: 4px;
}

/* Ausstehende Urlaubsanfrage: gedämpft/grauer als genehmigter Urlaub */
.kalender-wrapper .fc-event-leave-request,
.kalender-wrapper .fc-event-leave-request .fc-event-main {
  opacity: 0.95;
}

.kalender-wrapper .fc-event-leave-request .fc-event-title {
  font-weight: 600;
}

.kalender-wrapper .fc-event-title {
  font-weight: 500;
}

/* Heute hervorheben (Kalender) */
.kalender-wrapper .fc-day-today {
  background: rgba(220, 38, 38, 0.18);
}

.kalender-wrapper .fc-day-today .fc-daygrid-day-number {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Team-Kalender: ausgewählte Woche (Grid) – dezentes Rot */
.team-timeline-day-head.team-timeline-day--selected-week,
.team-timeline-cell.team-timeline-day--selected-week {
  background: rgba(220, 38, 38, 0.07);
}

/* Sonntag: grau (nicht heute); schwächer als heute */
.team-timeline-day-head.team-timeline-day--sunday:not(.team-timeline-day--today),
.team-timeline-cell.team-timeline-day--sunday:not(.team-timeline-day--today) {
  background: rgba(148, 163, 184, 0.14);
}

.team-timeline-day-head.team-timeline-day--sunday:not(.team-timeline-day--today) {
  color: var(--text-muted);
}

/* Heutiger Tag: stärkste Hervorhebung (über Sonntag / Wochenfläche) */
.team-timeline-day-head.team-timeline-day--today,
.team-timeline-cell.team-timeline-day--today {
  background: rgba(220, 38, 38, 0.22);
}

.team-timeline-day-head.team-timeline-day--today {
  font-weight: 700;
  color: var(--text);
}

/* ─── Bottom-Sheet Basiselemente (Desktop: unsichtbar) ─── */
.kalender-modal-handle {
  display: none;
}

.kalender-modal-close {
  display: none;
}

.kalender-modal-form {
  /* Desktop: kein eigenes Layout */
}

.kalender-modal-body {
  /* Desktop: kein Scrolling, fließt normal */
}

/* Mobile: Event-Titel in allen Ansichten */
@media (max-width: 768px) {
  .kalender-wrapper .fc-daygrid-event .fc-event-title {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kalender-wrapper .fc-daygrid-event {
    padding: 1px 3px;
  }
}

/* Slide-Up Animation für Bottom Sheet */
@keyframes kModalSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.85;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ─── Datum+Uhrzeit Doppel-Input (global, Desktop + Mobile) ─── */
.kalender-datetime-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0.5rem;
}

/* ─── Monats-/Jahr-Picker Overlay ─── */
.kalender-month-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.kalender-month-picker {
  background: #1c2128;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.875rem;
  width: min(290px, 88vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 201;
}

[data-theme="light"] .kalender-month-picker {
  background: #e8eaed;
}

.kalender-month-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.kalender-month-picker-header button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.kalender-month-picker-header button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.kalender-month-picker-year {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.kalender-month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.kalender-month-picker-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-align: center;
  min-height: 38px;
}

.kalender-month-picker-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.kalender-month-picker-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  .kalender-page {
    padding: 0;
    /* `hidden` würde die y-Achse implizit auf `auto` heben und die Seite zum
       Scrollport machen – dann klebt jedes `position: sticky` darin an DIESEM
       Container statt am Viewport. `clip` beschneidet ohne Scrollport
       (dieselbe Korrektur wie in Layout.css für .main-content). */
    overflow-x: clip;
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  .kalender-header {
    margin-bottom: 0.875rem;
  }

  .kalender-header-row {
    gap: 0.5rem;
    justify-content: space-between;
  }

  .kalender-header h1 {
    font-size: 1.35rem;
  }

  .kalender-filter-bar {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
  }

  .kalender-filter-bar-label {
    display: none;
  }

  .kalender-filter-bar-summary {
    display: none;
  }

  .kalender-filter-chip {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }

  .kalender-urlaub-summary-row {
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.75rem;
  }

  .kalender-touch .fc .fc-toolbar {
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .kalender-touch .fc .fc-toolbar-title {
    font-size: 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .kalender-touch .fc .fc-button {
    min-height: 40px;
    min-width: 40px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }

  .kalender-form-row {
    grid-template-columns: 1fr;
  }

  .kalender-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .kalender-modal {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 0;
    animation: kModalSlideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  .kalender-modal-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  .kalender-modal-close {
    display: flex;
    position: absolute;
    top: 8px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    z-index: 2;
    padding: 0;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .kalender-modal-close:hover,
  .kalender-modal-close:active {
    background: rgba(255, 255, 255, 0.18);
    color: var(--text);
  }

  .kalender-modal-form,
  .kalender-modal form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .kalender-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 1.25rem 0.5rem;
    overscroll-behavior: contain;
  }

  .kalender-modal-body h2 {
    padding-right: 2.5rem;
    margin-bottom: 1rem;
  }

  .kalender-modal-actions {
    flex-shrink: 0;
    display: flex;
    gap: 0.75rem;
    justify-content: stretch;
    padding: 0.875rem 1.25rem;
    padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    margin-top: 0;
  }

  .kalender-modal-actions button {
    flex: 1;
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .kalender-error {
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
  }

  .team-timeline-day-head {
    font-size: 0.7rem;
    padding: 0.45rem 0.15rem;
  }

  .team-week-chip {
    font-size: 0.76rem;
    padding: 0.34rem 0.62rem;
  }
}

@media (max-width: 480px) {
  .kalender-page {
    padding: 0;
  }

  .kalender-touch {
    padding: 0.35rem;
  }

  .kalender-touch .fc .fc-toolbar-title {
    font-size: 0.9rem;
  }

  .kalender-touch .fc .fc-button {
    min-height: 38px;
    min-width: 38px;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
  }

  .kalender-modal-body {
    padding: 0.625rem 1rem 0.5rem;
  }

  .kalender-modal-actions {
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

.kalender-wrapper .fc-event-gerat {
  background: #036338;
  border-color: #036338;
}

.kalender-wrapper .fc-event-privat {
  background: var(--success, #10b981);
  border-color: var(--success, #10b981);
}

/* Modal */
.kalender-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.kalender-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.kalender-modal-type-hint {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 1rem 0;
}

.kalender-modal-type-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.kalender-modal-type-option {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.kalender-modal-type-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
}

.kalender-modal-back {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.25rem 0;
  margin-bottom: 0.75rem;
}

.kalender-modal-back:hover {
  color: var(--text);
}

.kalender-modal h2 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--text);
}

.kalender-form-group {
  margin-bottom: 1rem;
}

.kalender-form-group label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.kalender-form-group input,
.kalender-form-group select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 1rem;
}

.kalender-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.kalender-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.kalender-modal-actions button {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid var(--border);
}

.kalender-modal-actions button[type="button"] {
  background: transparent;
  color: var(--text);
}

.kalender-modal-actions button[type="submit"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.kalender-modal-actions button[type="submit"]:hover:not(:disabled) {
  background: var(--primary-dark);
}

.kalender-modal-actions button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kalender-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.kalender-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}

.kalender-color-swatch:hover {
  transform: scale(1.15);
}

.kalender-color-swatch.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg-card);
}

.kalender-invitees-select {
  min-height: 80px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.95rem;
}

.kalender-form-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.kalender-participants-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.kalender-participants-list li {
  padding: 0.2rem 0;
}

.kalender-loading-inline {
  margin: 0;
  color: var(--text-muted);
  padding: 1rem 0;
}

.kalender-btn-danger {
  background: var(--error, #ef4444) !important;
  border-color: var(--error, #ef4444) !important;
  color: #fff !important;
}

.kalender-btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}

.calendar-year-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calendar-year-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.calendar-year-toolbar .team-calendar-week-label--static {
  margin-left: auto;
}

.calendar-year-cell--clickable {
  cursor: pointer;
}

.calendar-year-overflow {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.calendar-year-overflow:hover {
  background: rgba(0, 0, 0, 0.16);
}

.team-year-bar {
  cursor: pointer;
}

/* ─── CalendarYearView: Wochen-Grid mit Track-stacking ─────────── */
.cy-month {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cy-header-row,
.cy-week {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
}

.cy-header-row {
  background: transparent;
  padding-bottom: 2px;
}

.cy-kw-head,
.cy-day-head {
  background: transparent;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 2px;
}

.cy-kw-cell {
  background: var(--bg-card);
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.cy-day-cell {
  background: var(--bg-card);
  font-size: 0.75rem;
  color: var(--text);
  padding: 4px 6px;
  cursor: pointer;
  text-align: right;
  min-width: 0;
}

.cy-day-cell:hover {
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
}

.cy-day-cell--other-month {
  opacity: 0.4;
}

.cy-day-cell--weekend {
  background: color-mix(in srgb, var(--text-muted) 6%, var(--bg-card));
}

.cy-day-cell--today {
  background: color-mix(in srgb, var(--primary) 22%, var(--bg-card));
  color: var(--text);
  font-weight: 700;
}

.cy-bar-bg {
  background: var(--bg-card);
  cursor: pointer;
}

.cy-bar-bg--other-month {
  opacity: 0.4;
}

.cy-bar-bg--weekend {
  background: color-mix(in srgb, var(--text-muted) 6%, var(--bg-card));
}

.cy-bar {
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  padding: 0 6px;
  border-radius: 3px;
  margin: 1px 2px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.cy-bar:hover {
  filter: brightness(1.1);
}

.cy-bar--clip-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
}

.cy-bar--clip-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}

.cy-overflow {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 3px;
  margin: 1px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cy-overflow:hover {
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
}

/* ─── Orders Timeline View ─────────────────────────────────────── */
.orders-timeline-lane-label {
  gap: 0.5rem;
}

.orders-timeline-lane-label--btn {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.orders-timeline-lane-label--btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.orders-timeline-lane-label--btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 65%, transparent);
  outline-offset: -2px;
}

.orders-timeline-lane-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.orders-timeline-lane-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orders-timeline-lane {
  position: relative;
  min-height: 56px;
}

.orders-timeline-lane--undated {
  background: color-mix(in srgb, var(--text-muted) 4%, transparent);
}

.orders-timeline-lane-create-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: crosshair;
  /* Touch darf scrollen (sonst versehentliches Erstellen beim Wischen);
     Maus-Drag zum Anlegen funktioniert unabhängig von touch-action. */
  touch-action: pan-x pan-y;
}

.orders-timeline-lane-label--undated .orders-timeline-lane-title {
  font-style: italic;
  color: var(--text-muted);
}

.orders-timeline-bar--preview {
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
}

.orders-timeline-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  left: calc(var(--day-start, 0) * var(--orders-timeline-day-w));
  width: calc(var(--day-count, 1) * var(--orders-timeline-day-w));
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 0 0.6rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  cursor: default;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --bar-tint: var(--orders-timeline-bar-color, #dc2626);
  --bar-inset-x: 0px;
  box-sizing: border-box;
}

.orders-timeline-bar:hover {
  filter: brightness(1.08);
}

.orders-timeline-bar--clip-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.orders-timeline-bar--clip-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.orders-timeline-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  pointer-events: none;
}

/* Geplant (glasig): äußerer, größerer Rahmen – immer sichtbar um den Ist-Balken. */
.orders-timeline-bar--planned-glass {
  z-index: 1;
  height: 36px;
  padding: 0 0.5rem;
  border-style: dashed;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--bar-tint) 55%, transparent);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar-tint) 18%, transparent);
  background: color-mix(in srgb, var(--bar-tint) 22%, transparent) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: color-mix(in srgb, var(--bar-tint) 72%, #fff);
}

.orders-timeline-bar--planned-glass:hover {
  filter: none;
  background: color-mix(in srgb, var(--bar-tint) 28%, transparent) !important;
  border-color: color-mix(in srgb, var(--bar-tint) 65%, transparent);
}

.orders-timeline-bar--planned-glass .orders-timeline-bar-label {
  color: color-mix(in srgb, var(--bar-tint) 88%, #1a1a1a);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Tatsächlich: innerer, schmalerer Balken – seitlich und vertikal eingezogen. */
.orders-timeline-bar--actual {
  --bar-inset-x: 5px;
  z-index: 2;
  height: 22px;
  left: calc(var(--day-start, 0) * var(--orders-timeline-day-w) + var(--bar-inset-x));
  width: calc(max(14px, var(--day-count, 1) * var(--orders-timeline-day-w) - 2 * var(--bar-inset-x)));
  padding: 0 0.45rem;
  border-radius: 5px;
  font-size: 0.78rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--bar-tint) 40%, #000);
}

.orders-timeline-bar--actual:hover {
  filter: brightness(1.06);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--bar-tint) 45%, #000);
}

.orders-timeline-bar--actual.orders-timeline-bar--clip-left {
  left: calc(var(--day-start, 0) * var(--orders-timeline-day-w));
  width: calc(max(14px, var(--day-count, 1) * var(--orders-timeline-day-w) - var(--bar-inset-x)));
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0.35rem;
}

.orders-timeline-bar--actual.orders-timeline-bar--clip-right {
  width: calc(max(14px, var(--day-count, 1) * var(--orders-timeline-day-w) - var(--bar-inset-x)));
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 0.35rem;
}

/* Im Bearbeitungsmodus: Klicks gehen zum geplanten Balken darunter – Ist-Zeitraum nicht per Drag änderbar. */
.orders-timeline-bar--actual-readonly {
  pointer-events: none;
  cursor: default;
}

.orders-timeline-bar--editable {
  cursor: grab;
  /* Wischen darf scrollen; das Verschieben startet erst per Long-Press (Touch). */
  touch-action: pan-x pan-y;
  user-select: none;
}

.orders-timeline-bar--dragging,
.orders-timeline-bar--editable:active {
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.orders-timeline-bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: rgba(255, 255, 255, 0.0);
  cursor: ew-resize;
  touch-action: pan-x pan-y;
}

.orders-timeline-bar-handle::before {
  content: '';
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transition: opacity 0.12s;
}

.orders-timeline-bar--editable:hover .orders-timeline-bar-handle::before,
.orders-timeline-bar--dragging .orders-timeline-bar-handle::before {
  opacity: 1;
}

.orders-timeline-bar-handle--left {
  left: 0;
}

.orders-timeline-bar-handle--right {
  right: 0;
}

/* ─── Zeitstrahl: Auftrags-Tooltip ─────────────────────────────── */
.orders-timeline-order-tooltip-portal {
  position: fixed;
  z-index: 1200;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  padding-bottom: 10px;
  opacity: 1;
}

.orders-timeline-order-tooltip-portal--fading {
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
}

.orders-timeline-order-tooltip {
  position: relative;
  min-width: 228px;
  max-width: 300px;
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--tooltip-accent, var(--primary)) 12%, transparent);
  pointer-events: auto;
}

.orders-timeline-order-tooltip__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: var(--tooltip-accent, var(--primary));
}

.orders-timeline-order-tooltip__title {
  margin: 0.15rem 0 0.55rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-timeline-order-tooltip__rows {
  margin: 0 0 0.65rem;
  display: grid;
  gap: 0.4rem;
}

.orders-timeline-order-tooltip__row {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 0.45rem;
  align-items: baseline;
  font-size: 0.78rem;
  line-height: 1.35;
}

.orders-timeline-order-tooltip__row dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
}

.orders-timeline-order-tooltip__row dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

.orders-timeline-order-tooltip__btn {
  display: block;
  width: 100%;
  padding: 0.42rem 0.65rem;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--tooltip-accent, var(--primary)) 55%, var(--border));
  background: color-mix(in srgb, var(--tooltip-accent, var(--primary)) 14%, var(--bg-card));
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.orders-timeline-order-tooltip__btn:hover {
  background: color-mix(in srgb, var(--tooltip-accent, var(--primary)) 24%, var(--bg-card));
  border-color: color-mix(in srgb, var(--tooltip-accent, var(--primary)) 70%, var(--border));
  color: var(--text);
}

[data-theme="dark"] .orders-timeline-order-tooltip {
  background: color-mix(in srgb, var(--bg-dark) 88%, #000);
  border-color: color-mix(in srgb, var(--border) 70%, #000);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--tooltip-accent, var(--primary)) 18%, transparent);
}

.orders-timeline-toolbar-toggle {
  margin-left: auto;
}

/* ═══ Orders-Zeitstrahl: neues Sticky-Table-Layout (otl-*) ═══════════
   Ein einziger Scroll-Container scrollt beide Achsen. Kopfzeile sticky-top,
   Auftragsspalte sticky-left – kein JS-Scroll-Sync mehr. Tagbreite ist eine
   feste Metrik (--otl-day-w); Wochenblock = exakt 7×Tagbreite ohne Layout-Border
   (Trenner via inset box-shadow), damit Balken pixelgenau über dem Raster sitzen. */
.otl {
  position: relative;
  --otl-day-w: clamp(56px, 6.2vw, 78px);
  --otl-label-w: 150px;
  --orders-timeline-day-w: var(--otl-day-w);
  /* Opake Flächen für die fixierten Spalten/Kopfzeile – --bg-card ist
     transluzent, sonst scheint das scrollende Raster durch (wirkt wie
     verschobene Spalten). Funktioniert in Dark- und Light-Theme. */
  --otl-surface: color-mix(in srgb, var(--bg-dark) 94%, #ffffff);
  --otl-surface-hover: color-mix(in srgb, var(--bg-dark) 88%, #ffffff);
}

/* ── schlanke 2-zeilige Toolbar ── */
.otl-toolbar {
  padding: 0.4rem 0.5rem 0.45rem;
}

.otl-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.otl-toolbar .team-calendar-nav-btn {
  padding: 0.3rem 0.6rem;
}

.otl-week-label {
  min-width: auto;
  font-size: 0.85rem;
}

.otl-toolbar .orders-timeline-toolbar-toggle {
  margin-left: auto;
}

.otl-week-scroller {
  margin-bottom: 0;
  padding: 0.15rem 0.3rem 0.3rem;
}

.otl-week-scroller .team-week-chip {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  min-width: 6.5rem;
}

/* ── Scroll-Container (eine Achse beide) ── */
.otl-scroll {
  position: relative;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  /* Keine blaue Text-Markierung / iOS-Callout beim langen Halten. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.otl-scroll:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 65%, transparent);
  outline-offset: -2px;
}

.otl-scroll--panning,
.otl-scroll--panning * {
  cursor: grabbing !important;
  user-select: none;
}

.otl-grid {
  position: relative;
  width: max-content;
  min-width: 100%;
}

.otl-row {
  display: flex;
  align-items: stretch;
}

.otl-row--head {
  position: sticky;
  top: 0;
  z-index: 4;
}

.otl-cell-label {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: 0 0 var(--otl-label-w);
  width: var(--otl-label-w);
  background: var(--otl-surface);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 var(--border);
}

.otl-corner {
  z-index: 5;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.4rem 0.7rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--otl-surface);
}

.otl-days {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  background: var(--otl-surface);
}

.otl-week {
  flex: 0 0 auto;
  width: calc(var(--otl-day-w) * 7);
  box-shadow: inset -1px 0 0 var(--border);
}

.otl-week--bg {
  background: rgba(255, 255, 255, 0.02);
}

.otl-week--center {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  box-shadow: inset -1px 0 0 var(--border), inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, var(--border));
}

.otl-lane {
  min-height: 56px;
}

.otl-lane .otl-cell-label {
  border-bottom: 1px solid var(--border);
}

.otl-order-group:last-child .otl-lane:last-child .otl-cell-label {
  border-bottom: none;
}

.otl-lane-label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  border: none;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--otl-surface);
  padding: 0.55rem 0.7rem;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.otl-lane-label-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.otl-lane-label:hover {
  background: var(--otl-surface-hover);
}

/* Vollständige Titel ohne Spaltenbreite zu verschwenden: bis zu 2 Zeilen. */
.otl-lane-label .orders-timeline-lane-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
}

.otl-track {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px solid var(--border);
  cursor: grab;
}

.otl-order-group:last-child .otl-lane:last-child .otl-track {
  border-bottom: none;
}

/* ── Aufklappbarer Ablaufplan: Hüllen-Balken + Schritt-Zeilen ───── */
.otl-lane--expanded {
  align-items: stretch;
}

/* Aufgeklappter Auftragsbalken wächst zum Container über die volle Zeilenhöhe. */
.orders-timeline-bar--envelope {
  cursor: pointer;
}

.orders-timeline-bar--envelope-open {
  top: 4px;
  bottom: 4px;
  height: auto;
  transform: none;
  align-items: flex-start;
  padding-top: 4px;
  background: color-mix(in srgb, var(--bar-tint) 14%, transparent) !important;
  border-style: solid;
  border-color: color-mix(in srgb, var(--bar-tint) 45%, transparent);
  cursor: default;
  z-index: 1;
}

.orders-timeline-env-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}

.orders-timeline-env-caret {
  font-size: 0.7rem;
  opacity: 0.8;
}

.orders-timeline-env-loading {
  position: absolute;
  left: 0.6rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
  z-index: 3;
}

/* Einzelner Arbeitsschritt im aufgeklappten Balken. */
.orders-timeline-step {
  position: absolute;
  height: 24px;
  left: calc(var(--day-start, 0) * var(--orders-timeline-day-w) + 3px);
  width: calc(var(--day-count, 1) * var(--orders-timeline-day-w) - 6px);
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  z-index: 3;
  --bar-tint: var(--orders-timeline-bar-color, #dc2626);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--bar-tint) 35%, #000);
}

.orders-timeline-step-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.orders-timeline-step--editable {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.orders-timeline-step--editable:hover {
  filter: brightness(1.08);
}

.orders-timeline-step--dragging {
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 6;
}

.orders-timeline-step-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  cursor: ew-resize;
  touch-action: pan-y;
}

.orders-timeline-step-handle::before {
  content: '';
  position: absolute;
  top: 28%;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.12s;
}

.orders-timeline-step--editable:hover .orders-timeline-step-handle::before,
.orders-timeline-step--dragging .orders-timeline-step-handle::before {
  opacity: 1;
}

.orders-timeline-step-handle--left { left: 0; }
.orders-timeline-step-handle--right { right: 0; }

.otl-track--undated {
  background: color-mix(in srgb, var(--text-muted) 4%, transparent);
}

.otl-days {
  cursor: grab;
}

/* Balken niemals über die fixierten Spalten/Kopfzeile legen. */
.otl .orders-timeline-bar--dragging {
  z-index: 2;
}

.otl-empty {
  position: sticky;
  left: 0;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Mobile Bottom-Sheet: Zeitraum präzise setzen ── */
.otl-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.otl-sheet {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 0 1.1rem max(1rem, env(safe-area-inset-bottom));
  animation: kModalSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@media (min-width: 560px) {
  .otl-sheet-overlay {
    align-items: center;
  }
  .otl-sheet {
    border-radius: 14px;
    border-bottom: 1px solid var(--border);
  }
}

.otl-sheet-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.4rem 0 0.2rem;
  color: var(--text);
}

.otl-sheet-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
}

.otl-sheet-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.otl-sheet-field input {
  flex: 0 0 auto;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.95rem;
}

.otl-sheet-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.otl-sheet-actions button {
  flex: 1;
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .otl {
    --otl-day-w: clamp(46px, 12.5vw, 62px);
  }
  .otl-toolbar {
    padding: 0.3rem 0.4rem 0.35rem;
  }
  /* Wochen-Chips entfallen mobil – ‹ Heute › + Datum + Nur aktive reichen. */
  .otl-week-scroller {
    display: none;
  }
  .otl-toolbar-row {
    gap: 0.4rem;
    margin-bottom: 0;
  }
  .otl-week-label {
    font-size: 0.82rem;
  }
  .otl-days .team-timeline-day-head {
    font-size: 0.66rem;
    padding: 0.4rem 0.1rem;
    white-space: normal;
    line-height: 1.15;
  }

  /* Mobile: keine fixe Spalte. Eine Zeile pro Auftrag – der Balken füllt die
     Höhe, der Titel liegt als sticky-left Overlay auf einem Farbverlauf-Scrim
     (immer lesbar, blockiert aber das Ziehen des Balkens nicht). */
  .otl-corner {
    display: none;
  }
  .otl-lane {
    min-height: 52px;
  }
  /* Label wird zur nullbreiten Sticky-Hülle; der Inhalt overlayt absolut. */
  .otl-lane .otl-cell-label {
    flex: 0 0 0;
    width: 0;
    overflow: visible;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
    pointer-events: none;
  }
  .otl-lane-label-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: 62vw;
    gap: 0.45rem;
    padding: 0 1.6rem 0 0.7rem;
    /* Titel-Overlay bleibt tippbar (→ scrollToOrder), nur die sichtbare
       Titelfläche; die nullbreite Hülle ist durchlässig für Balken-Drag. */
    pointer-events: auto;
    cursor: pointer;
    background: linear-gradient(
      to right,
      var(--otl-surface) 0%,
      var(--otl-surface) 62%,
      color-mix(in srgb, var(--otl-surface) 55%, transparent) 84%,
      transparent 100%
    );
  }
  /* Lange Namen brechen auf max. 2 Zeilen um, statt die Breite zu sprengen. */
  .otl-lane-label-inner .orders-timeline-lane-title {
    white-space: normal;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.18;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  /* Balken größer → großes Touch-Target + gut sichtbar. */
  .otl .orders-timeline-bar--planned-glass {
    height: 40px;
  }
  .otl .orders-timeline-bar-label {
    display: none;
  }
}

@media (max-width: 480px) {
  .otl {
    --otl-day-w: clamp(44px, 13.5vw, 56px);
    --otl-label-w: 92px;
  }
}
/* ─── Local design tokens ──────────────────────────────────────────────────── */
.stempeluhr-page {
  /* Dark defaults */
  --st-surface:       #161b22;
  --st-surface-2:     #0d1117;
  --st-border:        #30363d;
  --st-border-light:  #21262d;
  --st-border-hover:  #484f58;
  --st-muted:         #7d8590;
  --st-row-hover:     rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .stempeluhr-page {
  --st-surface:       #ffffff;
  --st-surface-2:     #f6f8fa;
  --st-border:        #e2e8f0;
  --st-border-light:  #f1f5f9;
  --st-border-hover:  #94a3b8;
  --st-muted:         #64748b;
  --st-row-hover:     rgba(0, 0, 0, 0.025);
}

/* ─── Page & Header ───────────────────────────────────────────────────────── */
.stempeluhr-page {
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.stempeluhr-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stempeluhr-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Clock Card ──────────────────────────────────────────────────────────── */
.stempeluhr-clock-card {
  background: var(--st-surface);
  border: 0.5px solid var(--st-border);
  border-radius: 10px;
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.stempeluhr-clock-date {
  font-size: 0.9rem;
  color: var(--st-muted);
  margin-bottom: 0.4rem;
}

.stempeluhr-clock-time {
  font-size: 3.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
}

.stempeluhr-status {
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  display: inline-block;
  font-weight: 500;
}

.stempeluhr-status-in {
  background: rgba(90, 170, 110, 0.15);
  color: #5aaa6e;
  border: 1px solid #4a8f5c;
}

.stempeluhr-status-out {
  color: var(--st-muted);
  background: var(--st-border-light);
  border: 1px solid var(--st-border);
}

.st-overtime {
  font-size: 0.825rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.st-overtime--pos {
  color: #5aaa6e;
  background: rgba(90, 170, 110, 0.12);
  border: 1px solid #4a8f5c;
}

.st-overtime--neg {
  color: #c47a7a;
  background: rgba(196, 122, 122, 0.12);
  border: 1px solid #8f4a4a;
}

.stempeluhr-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.stempeluhr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 130px;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: filter 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.stempeluhr-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.stempeluhr-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stempeluhr-btn-kommen {
  background: #5aaa6e;
  color: #fff;
}

.stempeluhr-btn-kommen:hover:not(:disabled) {
  filter: brightness(1.1);
}

.stempeluhr-btn-gehen {
  background: var(--primary);
  color: #fff;
}

.stempeluhr-btn-gehen:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* ─── Filter Bar ──────────────────────────────────────────────────────────── */
.st-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.st-heute-btn {
  padding: 0.35rem 0.85rem;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: 20px;
  color: var(--st-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.st-heute-btn:hover {
  border-color: var(--st-border-hover);
  color: var(--text);
}

.st-heute-btn--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.st-heute-btn--active:hover {
  filter: brightness(1.1);
  color: #fff;
}

.st-date-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.st-date-group label {
  font-size: 0.8rem;
  color: var(--st-muted);
  white-space: nowrap;
}

.st-date-input {
  padding: 0.32rem 0.6rem;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  transition: border-color 0.15s ease;
}

.st-date-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ─── Table ───────────────────────────────────────────────────────────────── */
.stempeluhr-table-wrap {
  background: var(--st-surface);
  border: 0.5px solid var(--st-border);
  border-radius: 10px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.stempeluhr-table th {
  padding: 0.65rem 1rem;
  text-align: left;
  background: var(--st-surface-2);
  font-weight: 600;
  color: var(--st-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 0.5px solid var(--st-border);
  white-space: nowrap;
}

.stempeluhr-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 0.5px solid var(--st-border-light);
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.stempeluhr-table tbody tr:last-child td {
  border-bottom: none;
}

.stempeluhr-table tbody tr:hover {
  background: var(--st-row-hover);
}

.stempeluhr-row-open {
  background: rgba(90, 170, 110, 0.06) !important;
}

.stempeluhr-empty {
  color: var(--st-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2.5rem;
}

.stempeluhr-totals {
  padding: 0.7rem 1rem;
  border-top: 0.5px solid var(--st-border);
  background: var(--st-surface-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.stempeluhr-totals-label {
  color: var(--st-muted);
  font-weight: 500;
}

.stempeluhr-totals-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}

.stempeluhr-hint {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--st-muted);
}

/* Anwesend-Banner (persönliche Ansicht) */
.stempeluhr-anwesend-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  margin-bottom: 1rem;
  background: rgba(90, 170, 110, 0.12);
  border: 1px solid #4a8f5c;
  border-radius: 10px;
  color: #5aaa6e;
  font-size: 0.95rem;
  font-weight: 600;
}

.stempeluhr-anwesend-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5aaa6e;
  flex-shrink: 0;
  animation: stPulse 1.8s ease-in-out infinite;
}

@keyframes stPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 170, 110, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(90, 170, 110, 0); }}

.stempeluhr-create-btn {
  padding: 0.4rem 0.9rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.stempeluhr-create-btn:hover {
  background: var(--primary-dark, #b91c1c);
}

.st-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.stempeluhr-loading {
  color: var(--st-muted);
  padding: 2rem;
  text-align: center;
}

/* ─── Edit Modal ──────────────────────────────────────────────────────────── */
.stempeluhr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.stempeluhr-modal {
  background: var(--st-surface);
  border: 0.5px solid var(--st-border);
  border-radius: 10px;
  padding: 1.5rem;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.stempeluhr-modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1.25rem 0;
}

.stempeluhr-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.stempeluhr-modal-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--st-muted);
}

.stempeluhr-modal-input {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--st-border);
  border-radius: 7px;
  background: var(--st-surface-2);
  color: var(--text);
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
}

.stempeluhr-modal-input:focus {
  outline: none;
  border-color: var(--primary);
}

.stempeluhr-modal-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: flex-end;
}

.stempeluhr-modal-btn {
  padding: 0.55rem 1.1rem;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.stempeluhr-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stempeluhr-modal-btn-cancel {
  background: transparent;
  color: var(--st-muted);
  border: 1px solid var(--st-border);
}

.stempeluhr-modal-btn-cancel:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--st-border-hover);
}

.stempeluhr-modal-btn-save {
  background: var(--primary);
  color: #fff;
}

.stempeluhr-modal-btn-save:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stempeluhr-page {
    padding: 1rem;
  }

  .stempeluhr-title {
    font-size: 1.6rem;
  }

  .stempeluhr-clock-time {
    font-size: 2.75rem;
  }

  .stempeluhr-actions {
    flex-direction: column;
  }

  .stempeluhr-btn {
    width: 100%;
    min-width: 0;
  }

  .st-filter-bar {
    gap: 0.4rem;
  }

  .stempeluhr-table th,
  .stempeluhr-table td {
    padding: 0.55rem 0.75rem;
    font-size: 0.825rem;
  }
}

@media (max-width: 480px) {
  .stempeluhr-clock-time {
    font-size: 2.25rem;
  }

  .stempeluhr-clock-card {
    padding: 1.5rem 1rem 1.25rem;
  }}
.anw-page {
  padding: 1rem 1.25rem 1.25rem;
  max-width: 100%;
}

.anw-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.anw-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
}

.anw-viewtoggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.anw-viewtoggle button {
  padding: 0.35rem 0.85rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.anw-viewtoggle button + button { border-left: 1px solid var(--border); }
.anw-viewtoggle button.active {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--text);
  font-weight: 600;
}

.anw-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.anw-spacer { flex: 1 1 auto; min-width: 0; }

.anw-nav {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-dark);
}

.anw-nav button {
  width: 2rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.anw-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.anw-nav button:disabled { opacity: 0.35; cursor: not-allowed; }

.anw-nav input[type='date'],
.anw-nav .anw-daylabel {
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.anw-daylabel {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.anw-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.anw-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.anw-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.anw-btn--primary {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--text);
  font-weight: 600;
}

.anw-reported {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.anw-reported select {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.8rem;
}

.anw-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.anw-badge--holiday {
  background: color-mix(in srgb, var(--info, #3b82f6) 18%, transparent);
  border-color: color-mix(in srgb, var(--info, #3b82f6) 40%, var(--border));
  color: var(--text);
}

.anw-badge--late {
  margin-left: 0.4rem;
  background: color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent);
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
  color: var(--text);
}

/* Offene Erfassungen tagesuebergreifend – der Schutz gegen vergessene Feierabende. */
.anw-openbanner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
  background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent);
  color: var(--text);
  font-size: 0.85rem;
}

.anw-openlist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.anw-openlink {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
}

.anw-openlink:hover { background: rgba(255, 255, 255, 0.1); }

.anw-warn {
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 40%, var(--border));
  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
  color: var(--text);
  font-size: 0.85rem;
}

.anw-empty {
  color: var(--text-muted);
  padding: 1.5rem 0;
}

.anw-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}

.anw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.anw-table th,
.anw-table td {
  padding: 0.45rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.anw-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.anw-table tr:last-child td { border-bottom: none; }

.anw-table input[type='time'],
.anw-table input[type='text'] {
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.82rem;
}

.anw-table input[type='text'] { min-width: 14rem; }

.anw-row--locked td { opacity: 0.55; }

.anw-col-check {
  width: 2.2rem;
  text-align: center;
  padding-right: 0;
}

.anw-col-check input[type='checkbox'] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.anw-status {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  border: 1px solid var(--border);
}

.anw-status--anwesend { background: color-mix(in srgb, #5aaa6e 22%, transparent); color: var(--text); }
.anw-status--offen {
  background: color-mix(in srgb, var(--warning, #f59e0b) 24%, transparent);
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
  color: var(--text);
}
.anw-status--urlaub { background: color-mix(in srgb, #f8d300 22%, transparent); color: var(--text); }
.anw-status--krankmeldung { background: color-mix(in srgb, #0370b2 25%, transparent); color: var(--text); }
.anw-status--kurzarbeit,
.anw-status--urlaub_unbezahlt { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }

.anw-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Über der Höchstarbeitszeit: markieren statt kappen (§ 16 Abs. 2 ArbZG). */
.anw-exceeds {
  color: var(--error, #ef4444);
  font-weight: 600;
}

.anw-pause {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.75;
}

.anw-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.anw-hint {
  color: var(--text-muted);
  font-size: 0.8rem;
  flex: 1 1 20rem;
  margin: 0.5rem 0 0;
}

/* ── Wochenraster ───────────────────────────────────────────────────────── */
.anw-table--week td { text-align: center; padding: 0.2rem; }
.anw-table--week th:first-child,
.anw-table--week td:first-child { text-align: left; }

.anw-cell-btn {
  width: 100%;
  min-width: 3.5rem;
  padding: 0.35rem 0.2rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}

.anw-cell-btn:hover { background: rgba(255, 255, 255, 0.08); }
.anw-cell--frei .anw-cell-btn { color: var(--text-muted); opacity: 0.5; }
.anw-cell--anwesend .anw-cell-btn { background: color-mix(in srgb, #5aaa6e 18%, transparent); }
.anw-cell--urlaub .anw-cell-btn { background: color-mix(in srgb, #f8d300 18%, transparent); }
.anw-cell--krankmeldung .anw-cell-btn { background: color-mix(in srgb, #0370b2 20%, transparent); }
.anw-cell--nicht_erfasst:not(.anw-cell--frei) .anw-cell-btn { color: var(--error, #ef4444); }

@media (max-width: 768px) {
  .anw-page {
    padding: 0.75rem;
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  .anw-toolbar { gap: 0.4rem; }
  .anw-spacer { display: none; }
  .anw-nav { flex: 1 1 100%; }
  .anw-nav input[type='date'] { flex: 1; }
  .anw-table input[type='text'] { min-width: 8rem; }
}
.mnw {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}

.mnw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mnw-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.mnw-nav {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-dark);
}

.mnw-nav button {
  width: 2rem;
  padding: 0.3rem 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.mnw-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.mnw-nav button:disabled { opacity: 0.35; cursor: not-allowed; }

.mnw-nav span {
  padding: 0.3rem 0.7rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.mnw-exports {
  display: inline-flex;
  gap: 0.4rem;
}

.mnw-hint {
  margin: 0.5rem 0 0.85rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.mnw-empty {
  color: var(--text-muted);
  padding: 1rem 0;
}

.mnw-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mnw-summary strong { color: var(--text); }

.mnw-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.mnw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.mnw-table th,
.mnw-table td {
  padding: 0.3rem 0.55rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.mnw-table th:first-child,
.mnw-table td:first-child,
.mnw-table th:last-child,
.mnw-table td:last-child { text-align: left; }

.mnw-table th {
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mnw-table tr:last-child td { border-bottom: none; }
.mnw-row--frei td { color: var(--text-muted); opacity: 0.65; }

/* Über der Höchstarbeitszeit – markiert statt gekappt (§ 16 Abs. 2 ArbZG). */
.mnw-exceeds { color: var(--error, #ef4444); font-weight: 600; }

.mnw-note { color: var(--text-muted); font-size: 0.78rem; }

.mnw-status {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mnw-status--bestaetigt { color: var(--success, #10b981); }
.mnw-status--widersprochen { color: var(--warning, #f59e0b); }
/* Eine überholte Bestätigung darf nicht mehr grün aussehen. */
.mnw-status--veraltet { color: var(--warning, #f59e0b); font-weight: 600; }

.mnw-row--beanstandet td {
  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
}

.mnw-dayaction { text-align: right; white-space: nowrap; }

/* Erscheint erst beim Überfahren der Zeile – 30 Zeilen mit Dauer-Knopf wären Lärm. */
.mnw-link--quiet { opacity: 0; color: var(--text-muted); }
.mnw-table tr:hover .mnw-link--quiet,
.mnw-link--quiet:focus-visible { opacity: 1; }

/* Ohne Hover gäbe es sonst keinen Weg zur Beanstandung. */
@media (hover: none) {
  .mnw-link--quiet { opacity: 1; }
}

.mnw-tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  background: color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent);
  color: var(--text-primary);
}

.mnw-tag--done { background: color-mix(in srgb, var(--success, #10b981) 20%, transparent); }
.mnw-tag--rejected { background: color-mix(in srgb, var(--error, #ef4444) 20%, transparent); }

.mnw-error {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--error, #ef4444);
}

.mnw-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--primary);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.mnw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mnw-input {
  flex: 1 1 16rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.85rem;
}

.mnw-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.mnw-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.mnw-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.mnw-btn--primary {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  color: var(--text);
  font-weight: 600;
}

.mnw-btn--warn {
  background: color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent);
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 768px) {
  .mnw { padding: 0.75rem; }
  .mnw-input { flex-basis: 100%; }
}
.az-page {
  padding: 1rem 1.25rem 1.25rem;
  max-width: 100%;
}

.az-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.az-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
}

.az-viewtoggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.az-viewtoggle button {
  padding: 0.35rem 0.85rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.az-viewtoggle button + button { border-left: 1px solid var(--border); }
.az-viewtoggle button.active {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--text);
  font-weight: 600;
}

.az-spacer { flex: 1 1 auto; min-width: 0; }

.azu-head,
.azd-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.azd-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.az-monthnav {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-dark);
}

.az-monthnav button {
  width: 2rem;
  padding: 0.3rem 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.az-monthnav button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.az-monthnav button:disabled { opacity: 0.35; cursor: not-allowed; }

.az-monthnav span {
  padding: 0.3rem 0.7rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.az-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.az-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.az-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.az-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.az-summary strong { color: var(--text); }

.az-badge {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
}

.az-badge--bestaetigt {
  background: color-mix(in srgb, var(--success, #10b981) 20%, transparent);
  color: var(--text);
}

.az-badge--widersprochen {
  background: color-mix(in srgb, var(--warning, #f59e0b) 22%, transparent);
  color: var(--text);
}

.az-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}

.az-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.az-table th,
.az-table td {
  padding: 0.35rem 0.6rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.az-table th:first-child,
.az-table td:first-child { text-align: left; }

.az-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: right;
}

.az-table th:first-child { text-align: left; }
.az-table tr:last-child td { border-bottom: none; }

/* Über der Höchstarbeitszeit bzw. offene Tage – markieren, nicht verstecken. */
.az-exceeds { color: var(--error, #ef4444); font-weight: 600; }

.az-empty { color: var(--text-muted); padding: 1.5rem 0; }

.az-hint {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 0.6rem 0 0;
}

.az-warn {
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
  background: color-mix(in srgb, var(--warning, #f59e0b) 13%, transparent);
  color: var(--text);
  font-size: 0.84rem;
}

/* ── Übersicht ──────────────────────────────────────────────────────────── */
.azu-row { cursor: pointer; }
.azu-row:hover { background: rgba(255, 255, 255, 0.06); }
.azu-arrow { color: var(--text-muted); width: 1.5rem; }

/* ── Detail ─────────────────────────────────────────────────────────────── */
.azd-table th:nth-last-child(-n+3),
.azd-table td:nth-last-child(-n+3) { text-align: left; }

.azd-row--wochenende td { background: rgba(255, 255, 255, 0.03); color: var(--text-muted); }
.azd-row--feiertag td {
  background: color-mix(in srgb, var(--info, #3b82f6) 10%, transparent);
  color: var(--text-muted);
}
.azd-row--beanstandet td {
  background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent);
}

.azd-disputes {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.azd-dispute {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.84rem;
}

.azd-dispute--offen {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
}

.azd-dispute-when { font-weight: 600; white-space: nowrap; }
.azd-dispute-note { flex: 1 1 12rem; min-width: 0; }

.azd-dispute-status {
  padding: 0.05rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent);
  white-space: nowrap;
}

.azd-dispute-status--done { background: color-mix(in srgb, var(--success, #10b981) 20%, transparent); }
.azd-dispute-status--rejected { background: color-mix(in srgb, var(--error, #ef4444) 20%, transparent); }

@media (max-width: 480px) {
  .azd-dispute { flex-direction: column; gap: 0.2rem; }
}

.azd-status {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

.azd-status--erfasst { background: color-mix(in srgb, #5aaa6e 22%, transparent); color: var(--text); }
.azd-status--offen { background: color-mix(in srgb, var(--warning, #f59e0b) 24%, transparent); color: var(--text); }
.azd-status--abwesend { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }
.azd-status--frei { color: var(--text-muted); }
.azd-status--fehlt { background: color-mix(in srgb, var(--error, #ef4444) 18%, transparent); color: var(--text); }

.azd-meta { color: var(--text-muted); font-size: 0.76rem; }

.azd-spesen {
  width: 3rem;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.8rem;
  text-align: right;
}

@media (max-width: 768px) {
  .az-page {
    padding: 0.75rem;
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
  .az-spacer { display: none; }
  .az-monthnav { flex: 1 1 100%; }
}
/* ── Page ─────────────────────────────────────────────────────────────────── */
.todos-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.todos-header {
  margin-bottom: 1.5rem;
}

.todos-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.todos-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.todos-open-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.4rem;
  border-radius: 13px;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.todos-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

.todos-loading,
.todos-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 3rem 1rem;
}

/* ── Quick Add ────────────────────────────────────────────────────────────── */
.td-quickadd {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: visible;
}

.td-quickadd-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.25rem 0.5rem;
}

.td-quickadd-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: default;
}

.td-quickadd-input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
}

.td-quickadd-input::placeholder { color: var(--text-muted); }

.td-quickadd-expand {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  border-radius: 6px;
}

.td-quickadd-expand:hover { color: var(--text); }

.td-quickadd-expand--open {
  transform: rotate(180deg);
  color: var(--primary);
}

.td-quickadd-submit {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border: none;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.td-quickadd-submit:hover:not(:disabled) { background: var(--primary-dark); }
.td-quickadd-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.td-quickadd-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}

/* ── Expand animation wrapper ────────────────────────────────────────────── */
.td-expand-anim {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 280ms;
}

.td-expand-anim--open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.td-expand-anim-inner {
  overflow: hidden;
  min-height: 0;
}

/* ── Expand section (new + edit) ─────────────────────────────────────────── */
.td-expand {
  padding: 0.75rem 1rem 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.td-expand--new {
  border-top: 1px solid var(--border);
}

.td-expand-panel {
  padding: 0.75rem 1rem 0;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Field rows ──────────────────────────────────────────────────────────── */
.td-field-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.td-field-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.td-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.td-input {
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

.td-input:focus { outline: none; border-color: var(--primary); }

.td-input--date { width: 150px; }
.td-input--time { width: 110px; }
.td-input--custom-amt { width: 70px; }

.td-select {
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
}

.td-select:focus { outline: none; border-color: var(--primary); }
.td-select--reminder { flex: 1; min-width: 0; }

.td-clear-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
}

.td-clear-btn:hover { color: var(--text); border-color: var(--primary); }

.td-notes {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.td-notes:focus { outline: none; border-color: var(--primary); }

.td-notes-readonly {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  white-space: pre-wrap;
}

/* ── Priority buttons ────────────────────────────────────────────────────── */
.td-prio-btns {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.td-prio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}

.td-prio-btn:hover { border-color: var(--text-muted); color: var(--text); }

.td-prio-btn--active {
  border-color: transparent;
  color: #fff !important;
}

.td-prio-btn--low.td-prio-btn--active    { background: #6b7280; }
.td-prio-btn--medium.td-prio-btn--active { background: #ca8a04; }
.td-prio-btn--high.td-prio-btn--active   { background: #f97316; }
.td-prio-btn--urgent.td-prio-btn--active { background: #ef4444; }

.td-prio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* urgent pulsing when active */
.td-prio-btn--urgent.td-prio-btn--active .td-prio-dot {
  animation: td-pulse 1.4s ease-in-out infinite;
}

@keyframes td-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.35); }
}

/* ── Attachment combobox ─────────────────────────────────────────────────── */
.td-attach-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.td-attach-half {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.td-attach-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.td-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.td-attach-chip {
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.td-attach-chip:hover { border-color: var(--primary); color: var(--text); }

.td-attach-chip--active {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.12);
  color: var(--primary);
}

.td-attach-search-wrap {
  position: relative;
}

.td-attach-search {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.td-attach-search::placeholder { color: var(--text-muted); }
.td-attach-search:focus { outline: none; border-color: var(--primary); }

.td-attach-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  list-style: none;
  margin: 0; padding: 0.25rem 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}

.td-attach-result {
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-attach-result:hover { background: rgba(220,38,38,0.07); }

.td-attach-result--active {
  background: rgba(220,38,38,0.14);
  color: var(--primary);
}

.td-attach-result--empty {
  color: var(--text-muted);
  cursor: default;
  font-style: italic;
}

/* ── Share ───────────────────────────────────────────────────────────────── */
.td-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.td-share-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.td-share-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  background: rgba(220,38,38,0.12);
  color: var(--text);
  font-size: 0.8rem;
}

.td-share-tag button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.td-share-tag button:hover { color: var(--error, #ef4444); }

/* ── Due date row ────────────────────────────────────────────────────────── */
.td-due-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.td-reminder-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.td-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 7px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}

.td-btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.td-btn--primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.td-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

.td-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.td-btn--ghost:hover { color: var(--text); border-color: var(--text-muted); }

.td-btn--danger {
  background: transparent;
  color: var(--error, #ef4444);
  border-color: rgba(239,68,68,0.3);
}

.td-btn--danger:hover { background: rgba(239,68,68,0.1); }

.td-btn--link {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
  font-size: 0.875rem;
}

.td-btn--link:hover { background: rgba(220,38,38,0.08); }

/* ── Expand footer ───────────────────────────────────────────────────────── */
.td-expand-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}

.td-expand-footer-right {
  display: flex;
  gap: 0.5rem;
}

.td-expand-nav {
  display: flex;
}

.td-expand-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.td-filters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.td-filter-row {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
  padding-bottom: 2px;
}

.td-filter-row::-webkit-scrollbar { display: none; }

.td-filter-chip {
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.td-filter-chip:hover { border-color: var(--text-muted); color: var(--text); }

.td-filter-chip--active {
  border-color: var(--primary);
  background: rgba(220,38,38,0.12);
  color: var(--primary);
}

.td-filter-chip--prio.td-filter-chip--active {
  border-color: var(--prio-color, var(--primary));
  background: color-mix(in srgb, var(--prio-color, var(--primary)) 12%, transparent);
  color: var(--prio-color, var(--primary));
}

.td-sort-select {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

/* ── Todo list ───────────────────────────────────────────────────────────── */
.td-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── Todo item ───────────────────────────────────────────────────────────── */
.td-item {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid #3b82f6;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.td-item:hover { border-color: rgba(220,38,38,0.3); }

.td-item--expanded {
  border-color: rgba(59,130,246,0.5);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.25);
}

.td-item--done { opacity: 0.55; }

.td-item--overdue { border-left-color: #ef4444 !important; }

/* Swipe overlays */
.td-swipe-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  border-radius: 10px;
}

.td-swipe-hint--delete { background: rgba(239,68,68,0.15); color: #ef4444; justify-content: flex-end; padding-right: 1.5rem; }
.td-swipe-hint--done   { background: rgba(34,197,94,0.15);  color: #22c55e; justify-content: flex-start; padding-left: 1.5rem; }

/* ── Item row (collapsed view) ───────────────────────────────────────────── */
.td-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  position: relative;
  z-index: 1;
}

/* ── Checkbox ────────────────────────────────────────────────────────────── */
.td-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  color: #fff;
  min-width: 22px;
  min-height: 22px;
}

.td-check:hover { border-color: var(--primary); }

.td-check--done {
  background: #22c55e;
  border-color: #22c55e;
}

/* ── Item content ────────────────────────────────────────────────────────── */
.td-item-content {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.td-item-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.td-item-title {
  font-size: 0.95rem;
  color: var(--text);
  word-break: break-word;
}

.td-item--done .td-item-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.td-prio-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
}

.td-prio-badge--low    { background: rgba(107,114,128,0.15); color: #9ca3af; }
.td-prio-badge--medium { background: rgba(234,179,8,0.15);   color: #eab308; }
.td-prio-badge--high   { background: rgba(249,115,22,0.15);  color: #f97316; }
.td-prio-badge--urgent { background: rgba(239,68,68,0.15);   color: #ef4444; }

.td-attach-badge,
.td-shared-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.td-shared-badge {
  color: #60a5fa;
  background: rgba(96,165,250,0.12);
  border-color: rgba(96,165,250,0.25);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── From / To labels (shared todos) ─────────────────────────────────────── */
.td-from-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #60a5fa;
  margin-bottom: 0.2rem;
}

.td-to-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}

.td-to-person {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4ade80;
}

.td-mini-avatar {
  width: 20px !important;
  height: 20px !important;
  font-size: 0.55rem !important;
  flex-shrink: 0;
}

/* ── Meta row (due date) ─────────────────────────────────────────────────── */
.td-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.td-due {
  font-size: 0.78rem;
  font-weight: 500;
}

.td-due--overdue { color: #ef4444; }
.td-due--today   { color: #f97316; }
.td-due--future  { color: var(--text-muted); }

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.td-chevron {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.td-chevron:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.td-chevron-icon { transition: transform 0.2s; }
.td-chevron-icon--open { transform: rotate(180deg); }

/* ── Section header ──────────────────────────────────────────────────────── */
.td-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s;
  list-style: none;
}

.td-section-header:hover { background: rgba(255,255,255,0.04); }

.td-section-chevron { transition: transform 0.2s; }
.td-section-chevron--open { transform: rotate(180deg); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .td-attach-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .td-attach-half { width: 100%; }

  .td-prio-btns { gap: 0.25rem; }

  .td-prio-btn { padding: 0.3rem 0.55rem; font-size: 0.78rem; }

  .td-expand-footer {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }

  .td-expand-footer-right {
    justify-content: flex-end;
  }

  .td-input--date { width: 100%; }
  .td-input--time { width: 100%; }

  .td-due-row,
  .td-reminder-row { flex-direction: column; align-items: stretch; }

  .td-select--reminder { width: 100%; }
}

@media (max-width: 480px) {
  .td-item-title-row { gap: 0.3rem; }
  .td-attach-badge   { max-width: 100px; }
}
.devpanel-page {
  padding: 1.5rem;
  max-width: 1040px;
  margin: 0 auto;
}

.devpanel-header {
  margin-bottom: 2rem;
}

.devpanel-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.devpanel-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.devpanel-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.devpanel-admin-link:hover {
  text-decoration: underline;
}

.devpanel-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.devpanel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.devpanel-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.devpanel-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.devpanel-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.devpanel-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.devpanel-role-impersonation {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
}

.devpanel-role-impersonation-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.35rem 0;
}

.devpanel-role-impersonation-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}

.devpanel-role-impersonation-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.devpanel-role-select {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  min-width: 140px;
}

.devpanel-role-reset {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.devpanel-role-reset:hover {
  color: var(--text);
  border-color: var(--primary);
}

.devpanel-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.devpanel-shortcut {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}

.devpanel-shortcut:hover {
  border-color: var(--primary);
  background: rgba(220, 38, 38, 0.08);
}

.devpanel-shortcut span {
  flex: 1;
}

.devpanel-settings-list,
.devpanel-debug-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.devpanel-setting-item,
.devpanel-debug-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.devpanel-setting-item dt,
.devpanel-debug-item dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.devpanel-setting-item dd,
.devpanel-debug-item dd {
  margin: 0;
  font-size: 0.95rem;
}

.devpanel-setting-item code,
.devpanel-debug-item code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.devpanel-token {
  word-break: break-all;
}

.devpanel-ua {
  font-size: 0.8rem !important;
}

.devpanel-debug-item pre {
  margin: 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-size: 0.85rem;
  overflow-x: auto;
}

.devpanel-status-ok {
  color: var(--success);
}

.devpanel-status-error {
  color: var(--error);
}

.devpanel-status-loading {
  color: var(--text-muted);
}

.devpanel-forbidden {
  text-align: center;
  padding: 3rem 2rem;
}

.devpanel-forbidden h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.devpanel-forbidden p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.devpanel-back-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
}

.devpanel-back-btn:hover {
  background: var(--primary-dark);
}

.devpanel-live-logs {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.devpanel-live-logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.devpanel-live-logs-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.devpanel-live-logs-clear {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.devpanel-live-logs-clear:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.devpanel-live-logs-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.devpanel-live-logs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.devpanel-live-logs-item {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}

.devpanel-live-logs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.devpanel-live-logs-src {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.devpanel-live-logs-user {
  font-variant-numeric: tabular-nums;
}

.devpanel-live-logs-msg {
  margin: 0;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.devpanel-live-logs-stack {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow-y: auto;
}

/* —— System-Logs (DevSystemLogsTab) —— */
.dev-syslogs {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dev-syslogs-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.12);
}

.dev-syslogs-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.dev-syslogs-hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dev-syslogs-error {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #f87171;
}

.dev-syslogs-push-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.dev-syslogs-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin: 0;
}

.dev-syslogs-fieldset--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.dev-syslogs-fieldset legend {
  padding: 0 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dev-syslogs-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}

.dev-syslogs-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dev-syslogs-input {
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.9rem;
  min-width: 12rem;
}

.dev-syslogs-input--narrow {
  min-width: 6rem;
}

.dev-syslogs-quiet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 0.5rem;
}

.dev-syslogs-btn {
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

.dev-syslogs-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.dev-syslogs-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dev-syslogs-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.dev-syslogs-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
}

.dev-syslogs-saved {
  font-size: 0.85rem;
  color: #86efac;
  margin-left: 0.5rem;
}

.dev-syslogs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.dev-syslogs-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.dev-syslogs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.dev-syslogs-table th,
.dev-syslogs-table td {
  padding: 0.45rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.dev-syslogs-table th {
  color: var(--text-muted);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.2);
}

.dev-syslogs-td-time {
  white-space: nowrap;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dev-syslogs-td-msg {
  max-width: 28rem;
  word-break: break-word;
}

.dev-syslogs-badge {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dev-syslogs-badge--error {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
}

.dev-syslogs-badge--warn {
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
}

.dev-syslogs-badge--info {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}

.dev-syslogs-linkbtn {
  border: none;
  background: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 0;
}

.dev-syslogs-empty {
  padding: 0.75rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dev-syslogs-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.dev-syslogs-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  max-height: min(88vh, 900px);
  overflow: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Darkmode: nicht nur Glas (--bg-card ist dort sehr transparent), sondern deckend lesbar */
[data-theme="dark"] .dev-syslogs-modal {
  background: color-mix(in srgb, var(--bg-dark) 90%, rgb(51 65 85));
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.dev-syslogs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.dev-syslogs-modal-head h3 {
  margin: 0;
  font-size: 1rem;
}

.dev-syslogs-modal-close {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.dev-syslogs-modal-body {
  padding: 1rem;
}

.dev-syslogs-dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr;
  gap: 0.5rem 0.75rem;
  font-size: 0.88rem;
}

.dev-syslogs-dl dt {
  margin: 0;
  color: var(--text-muted);
}

.dev-syslogs-dl dd {
  margin: 0;
}

.dev-syslogs-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.78rem;
  max-height: 200px;
  overflow: auto;
  padding: 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
}

.dev-syslogs-pre--stack {
  max-height: 280px;
}

.dev-syslogs-pre--json {
  max-height: 240px;
}

@media (max-width: 768px) {
  .devpanel-page {
    padding: 1rem;
  }

  .devpanel-shortcuts {
    grid-template-columns: 1fr;
  }
}
.abteilung-page {
  padding: 1.5rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.abteilung-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.abteilung-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.abteilung-header h1 {
  font-family: var(--font-headline);
  font-size: 2rem;
  color: var(--primary);
}

.abteilung-count {
  text-align: left;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.abteilung-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  list-style: none;
}

.abteilung-card .pf-avatar,
.abteilung-card .avatar {
  flex-shrink: 0;
}

.abteilung-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
}

/* #root setzt global text-align:center (Vite-Template-Rest) — hier explizit zurücksetzen. */
.abteilung-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.abteilung-name {
  font-weight: 600;
  color: var(--text);
}

.abteilung-role {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.abteilung-mail {
  color: var(--primary);
  font-size: 0.85rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abteilung-mail:hover { text-decoration: underline; }

.abteilung-profile-link {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}

.abteilung-profile-link:hover { background: var(--nav-link-hover); }

.abteilung-empty {
  text-align: left;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .abteilung-page { padding: 1rem; }
  .abteilung-list { grid-template-columns: 1fr; }

  .abteilung-header {
    flex-direction: column;
    align-items: stretch;
  }
}
.adminpos-table th,
.adminpos-table td {
  vertical-align: middle;
  text-align: left;
  padding-inline: 0.5rem;
}

/* Eingabefelder dürfen die Tabelle nicht über die Kartenbreite hinaus dehnen. */
.adminpos-table input[type='text'],
.adminpos-table .adminpos-input { min-width: 0; }

.adminpos-key {
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: var(--nav-link-hover);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.adminpos-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}

.adminpos-input--num { width: 4.5rem; }

.adminpos-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
}

.adminpos-check--form { align-self: end; flex-wrap: nowrap; padding-bottom: 0.55rem; }

.adminpos-delete {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--error);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.adminpos-delete:hover:not(:disabled) { background: color-mix(in srgb, var(--error) 12%, transparent); }
.adminpos-delete:disabled { opacity: 0.5; cursor: not-allowed; }

.adminpos-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
  text-align: left;
}

.adminpos-message--error {
  border-color: color-mix(in srgb, var(--error) 45%, var(--border));
  background: color-mix(in srgb, var(--error) 8%, transparent);
  color: var(--text);
}

.adminpos-message--success {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--text);
}

.adminpos-link {
  border: none;
  background: transparent;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.adminpos-create {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  align-items: start;
  margin-top: 0.75rem;
  text-align: left;
}

.adminpos-create label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.adminpos-fieldhint { font-size: 0.72rem; color: var(--text-muted); }

@media (max-width: 768px) {
  .adminpos-create { grid-template-columns: 1fr; }
}
/* Interactive hover links — theme vars from app (no Tailwind) */

.ihl-section {
  width: 100%;
  padding: 1rem;
  background: var(--bg-card, var(--bg-dark));
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .ihl-section {
    padding: 1.5rem 2rem;
  }
}

.ihl-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.ihl-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 2px solid var(--border, rgba(255, 255, 255, 0.1));
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.45s ease;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font: inherit;
  /* Touch: vertikales Scrollen der Seite/Liste erlauben, Pointer-Move trotzdem liefern */
  touch-action: pan-y;
}

.ihl-link:hover,
.ihl-link:focus-visible {
  border-bottom-color: var(--text, #e2e8f0);
  outline: none;
}

@media (min-width: 768px) {
  .ihl-link {
    padding: 1.75rem 0;
  }
}

.ihl-link-textwrap {
  flex: 1;
  min-width: 0;
}

.ihl-heading {
  position: relative;
  z-index: 2;
  display: block;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  transition: color 0.45s ease;
}

.ihl-link:hover .ihl-heading,
.ihl-link:focus-visible .ihl-heading {
  color: var(--text, #f1f5f9);
}

.ihl-heading-char {
  display: inline-block;
}

.ihl-sub {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--text-muted, #94a3b8);
  transition: color 0.45s ease;
}

.ihl-link:hover .ihl-sub,
.ihl-link:focus-visible .ihl-sub {
  color: var(--text, #f1f5f9);
}

.ihl-float-img {
  position: absolute;
  z-index: 1;
  height: 6rem;
  width: 8rem;
  border-radius: 0.5rem;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

@media (min-width: 768px) {
  .ihl-float-img {
    height: 12rem;
    width: 16rem;
  }
}

.ihl-arrow-wrap {
  overflow: hidden;
  flex-shrink: 0;
}

.ihl-arrow-inner {
  position: relative;
  z-index: 2;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text, #f1f5f9);
}

.ihl-arrow-svg {
  width: 2rem;
  height: 2rem;
}

@media (min-width: 768px) {
  .ihl-arrow-svg {
    width: 3rem;
    height: 3rem;
  }
}

.ihl-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.adminpanel-page {
  padding: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
  min-width: 0;
  overflow-x: hidden;
}

.adminpanel-page:has(.admin-features-hub),
.adminpanel-page:has(.admin-feature-projects) {
  max-width: 1100px;
}

.adminpanel-header {
  margin-bottom: 2rem;
}

.adminpanel-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.adminpanel-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.adminpanel-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.adminpanel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.adminpanel-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.adminpanel-tab.active {
  background: var(--secondary, #1e293b);
  color: #fff;
  border-color: var(--secondary, #1e293b);
}

.adminpanel-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  min-width: 0;
  overflow-x: hidden;
}

.adminpanel-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.adminpanel-role-impersonation {
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
}

.adminpanel-role-impersonation-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.35rem 0;
}

.adminpanel-role-impersonation-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}

.adminpanel-role-impersonation-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.adminpanel-role-select {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  min-width: 140px;
}

.adminpanel-role-reset {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.adminpanel-role-reset:hover {
  color: var(--text);
  border-color: var(--secondary, #475569);
}

/* Darstellung */
.adminpanel-form-group {
  margin-bottom: 1.5rem;
}

.adminpanel-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.adminpanel-theme-buttons {
  display: flex;
  gap: 0.5rem;
}

.adminpanel-theme-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.adminpanel-theme-btn:hover {
  color: var(--text);
  border-color: var(--primary);
}

.adminpanel-theme-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.adminpanel-accent-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.adminpanel-accent-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.adminpanel-accent-btn:hover {
  border-color: var(--primary);
}

.adminpanel-accent-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.adminpanel-accent-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--accent-preview, var(--primary));
}

.adminpanel-accent-label {
  font-weight: 500;
}

.adminpanel-color-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.adminpanel-color-picker {
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
}

.adminpanel-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.adminpanel-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.adminpanel-color-picker::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.adminpanel-hex-input {
  width: 7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: ui-monospace, monospace;
}

.adminpanel-hex-input::placeholder {
  color: var(--text-muted);
}

.adminpanel-hex-input:focus {
  outline: none;
  border-color: var(--primary);
}

.adminpanel-hex-reset {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.adminpanel-hex-reset:hover {
  color: var(--text);
  border-color: var(--primary);
}

/* Nutzer & Rollen */
.adminpanel-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.adminpanel-loading {
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.adminpanel-users-table-wrap {
  overflow-x: auto;
}

.adminpanel-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.adminpanel-users-table th,
.adminpanel-users-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.adminpanel-users-table th {
  font-weight: 600;
  color: var(--text-muted);
}

.adminpanel-users-table td {
  color: var(--text);
}

.adminpanel-doc-categories-table td {
  vertical-align: middle;
}

.adminpanel-doc-category-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.adminpanel-doc-role-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.adminpanel-doc-role-check input {
  margin: 0;
}

.adminpanel-role-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  font-weight: 500;
}

.adminpanel-save-role-btn {
  padding: 0.35rem 0.75rem;
  min-height: 44px;
  min-width: 44px;
  border-radius: 6px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}

.adminpanel-users-table .adminpanel-save-role-btn {
  min-width: auto;
}

.adminpanel-save-role-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.adminpanel-save-role-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.adminpanel-save-role-btn--danger {
  background: var(--error, #ef4444);
}

.adminpanel-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.adminpanel-modal--confirm .adminpanel-hint {
  margin-bottom: 0;
}

/* Berechtigungen */
.adminpanel-permissions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.adminpanel-permissions-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.adminpanel-permissions-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
}

.adminpanel-permissions-section-title {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.adminpanel-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  user-select: none;
  flex-shrink: 0;
}

.adminpanel-section-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
  accent-color: var(--primary, #3b82f6);
}

.adminpanel-section-toggle-label {
  white-space: nowrap;
}

.adminpanel-permissions-off {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

.adminpanel-permissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.adminpanel-permissions-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.adminpanel-permissions-table tbody tr:last-child {
  border-bottom: none;
}

.adminpanel-permissions-label {
  padding: 0.6rem 1rem;
  color: var(--text);
  vertical-align: middle;
}

.adminpanel-permissions-role {
  padding: 0.5rem 1rem;
  width: 140px;
  text-align: right;
  vertical-align: middle;
}

.adminpanel-permissions-role .adminpanel-role-select {
  min-width: 120px;
}

.adminpanel-forbidden {
  text-align: center;
  padding: 3rem 2rem;
}

.adminpanel-forbidden h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.adminpanel-forbidden p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* Statistiken */
.adminpanel-stats .adminpanel-section-title {
  margin-bottom: 1.25rem;
}

.adminpanel-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  min-width: 0;
}

.adminpanel-stats-block {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
  overflow-wrap: break-word;
}

.adminpanel-stats-block--kolonnen {
  grid-column: 1 / -1;
}

.adminpanel-stats-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.adminpanel-stats-table--kolonnen {
  width: 100%;
  min-width: 520px;
}

.adminpanel-stats-table--kolonnen th,
.adminpanel-stats-table--kolonnen td {
  padding: 0.5rem 0.75rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.adminpanel-stats-table--kolonnen th:first-child,
.adminpanel-stats-table--kolonnen td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-card, #1e293b);
  z-index: 1;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.adminpanel-stats-table--kolonnen thead th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.adminpanel-stats-kolonne-name {
  font-weight: 500;
  color: var(--text);
}

.adminpanel-stats-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

.adminpanel-stats-block-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem 0;
}

.adminpanel-stats-total {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}

.adminpanel-stats-total strong {
  color: var(--text);
}

.adminpanel-stats-subtitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 1rem 0 0.5rem 0;
}

.adminpanel-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.adminpanel-stats-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.adminpanel-stats-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.adminpanel-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.adminpanel-bar-chart--month .adminpanel-bar-label {
  min-width: 5rem;
}

.adminpanel-bar-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  min-width: 0;
}

.adminpanel-bar-label {
  min-width: 3rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.adminpanel-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.adminpanel-bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: var(--primary);
  transition: width 0.25s ease;
}

.adminpanel-bar-fill--success {
  background: var(--success, #22c55e);
}

.adminpanel-bar-value {
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.adminpanel-back-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
}

.adminpanel-back-btn:hover {
  background: var(--primary-dark);
}

/* Widgets */
.adminpanel-widgets-toggle-all {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.adminpanel-btn-secondary {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.adminpanel-btn-secondary:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--primary);
}

.adminpanel-widgets-list {
  margin-bottom: 1.5rem;
}

.adminpanel-widget-block {
  border-bottom: 1px solid var(--border);
}

.adminpanel-widget-block:last-child {
  border-bottom: none;
}

.adminpanel-widget-stripe-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.35rem;
}

.adminpanel-widget-stripe-color {
  width: 2.35rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

.adminpanel-widget-stripe-color:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.adminpanel-widget-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  cursor: pointer;
}

.adminpanel-widget-block-settings {
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.adminpanel-widget-block-settings-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.adminpanel-widget-block-hint {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.adminpanel-widget-label {
  font-size: 0.95rem;
  color: var(--text);
}

.adminpanel-widget-city-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.adminpanel-widget-text-input {
  flex: 1;
  min-width: 180px;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

.adminpanel-widget-text-input:focus {
  outline: none;
  border-color: var(--primary);
}

.adminpanel-widget-bg-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.adminpanel-widget-bg-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.adminpanel-widget-bg-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.adminpanel-widget-bg-key {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminpanel-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}

.adminpanel-btn-icon:hover:not(:disabled) {
  color: var(--error, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.adminpanel-widget-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.adminpanel-widget-upload-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

@media (max-width: 768px) {
  .adminpanel-page {
    padding: 1rem;
  }

  .adminpanel-content {
    padding: 1rem;
  }

  .adminpanel-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .adminpanel-stats-block {
    padding: 0.75rem;
  }

  .adminpanel-stats-block-title {
    font-size: 0.95rem;
  }

  .adminpanel-stats-table,
  .adminpanel-stats-table td {
    font-size: 0.8rem;
  }

  .adminpanel-bar-label {
    min-width: 2.5rem;
  }

  .adminpanel-bar-chart--month .adminpanel-bar-label {
    min-width: 4rem;
  }
}

@media (max-width: 480px) {
  .adminpanel-page {
    padding: 0.75rem;
  }

  .adminpanel-content {
    padding: 0.75rem;
    border-radius: 8px;
  }

  .adminpanel-stats-block {
    padding: 0.6rem;
  }

  .adminpanel-stats-table--kolonnen {
    min-width: 480px;
  }

  .adminpanel-stats-table--kolonnen th,
  .adminpanel-stats-table--kolonnen td {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* ─── Season Profiles ─────────────────────────────────────────────── */
.adminpanel-season-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 0.625rem;
}

.adminpanel-season-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.adminpanel-season-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 120px;
}

.adminpanel-season-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.adminpanel-season-active-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(90, 170, 110, 0.15);
  color: #5aaa6e;
  border: 1px solid #4a8f5c;
  font-weight: 500;
}

.adminpanel-season-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.adminpanel-season-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.adminpanel-season-breaks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.625rem;
  align-items: center;
}

.adminpanel-season-break-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  color: var(--text);
}

.adminpanel-season-break-chip-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.9rem;
}

.adminpanel-season-break-chip-del:hover {
  color: #c47a7a;
}

.adminpanel-season-add-break {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.season-split { margin-top: 0.625rem; }
.season-split-text { margin: 0 0 0.375rem; font-size: 0.85rem; }
.season-plus { color: var(--success); }
.season-minus { color: var(--warning); }
.season-split-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
}
.season-split-seg { background: var(--primary); opacity: 0.55; }
.season-split-seg--plus { background: var(--success); opacity: 1; }
.season-split-seg--minus { background: var(--warning); opacity: 1; }
.season-rule, .season-breaks-label, .season-confirm { font-size: 0.8rem; color: var(--text-muted); }
.season-rule { margin: 0.375rem 0 0; }
.season-warn { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--warning); }
.season-error { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--error); }

.season-bilanz {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.season-bilanz-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.season-year { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.season-bilanz-total td { font-weight: 600; border-top: 1px solid var(--border); }

.season-form { display: flex; flex-direction: column; gap: 0.75rem; }
.season-form .adminpanel-label,
.season-gutzeit legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 0;
  text-align: left;
}
.season-form .adminpanel-label > input[type='text'] { width: 100%; }
.season-form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.season-date { display: flex; gap: 0.25rem; }
.season-gutzeit { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.season-radio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.season-minutes { width: 80px; }

/* ─── Season Profile Modal ────────────────────────────────────────── */
.adminpanel-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.adminpanel-modal {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  width: min(480px, 92vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.adminpanel-modal-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

[data-theme="dark"] .adminpanel-modal-overlay {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-theme="dark"] .adminpanel-modal {
  background: color-mix(in srgb, var(--bg-dark, #0f172a) 92%, #000);
  border-color: color-mix(in srgb, var(--border) 55%, #000);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ─── Admin Features (experimentell) ───────────────────────────────── */
.admin-features-hub-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.admin-features-hub-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, transparent), color-mix(in srgb, var(--primary) 8%, var(--bg-dark)));
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--primary);
}

.admin-features-hub-title {
  margin-bottom: 0.35rem;
}

.admin-features-hub-lead {
  margin: 0;
}

.admin-features-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.admin-features-card {
  text-align: left;
  padding: 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--bg-card), color-mix(in srgb, var(--bg-dark) 88%, var(--primary)));
  cursor: pointer;
  font: inherit;
  color: var(--text);
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 8.5rem;
}

.admin-features-card:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

.admin-features-card--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.admin-features-card--disabled:hover {
  box-shadow: none;
  transform: none;
}

.admin-features-card-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.admin-features-card-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.admin-features-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  flex: 1;
}

.admin-features-card-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 0.25rem;
}

.admin-features-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.65rem;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  text-decoration: none;
  width: fit-content;
}

.admin-features-back:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.admin-feature-projects-intro {
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}

.admin-feature-upload-card {
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
  margin-bottom: 2rem;
}

.admin-feature-upload-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .admin-feature-upload-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-feature-input-wide {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.admin-feature-file-input {
  width: 100%;
  font-size: 0.85rem;
}

.admin-feature-file-name {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.admin-features-browse-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: var(--text);
}

.admin-feature-manage {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.admin-feature-manage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-feature-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--bg-dark, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--border);
}

.admin-feature-manage-title {
  font-weight: 500;
  font-size: 0.92rem;
  min-width: 0;
  flex: 1 1 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feature-manage-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.admin-feature-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-left: auto;
}

.admin-feature-open-gallery-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

.admin-feature-open-gallery-btn:hover {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

.admin-feature-delete-btn {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #ef4444 50%, var(--border));
  background: transparent;
  color: #f87171;
  cursor: pointer;
  font-family: inherit;
}

.admin-feature-delete-btn:hover:not(:disabled) {
  background: color-mix(in srgb, #ef4444 15%, transparent);
}

.admin-feature-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-feature-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
}

.admin-feature-lightbox-inner {
  cursor: default;
  max-width: min(920px, 96vw);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.admin-feature-lightbox-img {
  max-width: 100%;
  max-height: min(72vh, 800px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.admin-feature-lightbox-caption {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.admin-feature-lightbox-sub {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.admin-feature-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2001;
}

.admin-feature-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-feature-files-field {
  grid-column: 1 / -1;
}

.admin-feature-pending-list {
  margin-top: 0.75rem;
}

.admin-feature-pending-hint {
  margin: 0 0 0.5rem 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.admin-feature-pending-thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-feature-pending-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 104px;
}

.admin-feature-pending-thumb-wrap {
  padding: 0;
  border: 3px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  background: var(--bg-dark);
  line-height: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-feature-pending-thumb-wrap:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.admin-feature-pending-thumb-wrap.is-cover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* Nur das Bild wird beschnitten — Label „Titelbild“ sitzt darunter und bleibt lesbar */
.admin-feature-pending-thumb-clip {
  display: block;
  width: 96px;
  height: 72px;
  border-radius: 9px;
  overflow: hidden;
}

.admin-feature-pending-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-feature-pending-cover-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--text-muted);
  padding: 0 0.15rem;
}

.admin-feature-pending-cover-line.is-cover {
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-feature-pending-remove {
  font-size: 0.72rem;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.admin-feature-pending-remove:hover {
  color: #f87171;
}

/* Galerie-Modal */
.admin-feature-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  cursor: pointer;
}

.admin-feature-gallery-modal {
  cursor: default;
  width: min(900px, 100%);
  margin: 2vh auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.admin-feature-gallery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.admin-feature-gallery-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.admin-feature-gallery-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.admin-feature-gallery-sub {
  margin: 0 0 1rem 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.admin-feature-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.85rem;
}

.admin-feature-gallery-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-feature-gallery-thumb-btn {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-dark);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-feature-gallery-thumb-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.admin-feature-gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-feature-gallery-loading {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.admin-feature-gallery-cell-actions {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
}

.admin-feature-gallery-cover-label {
  font-weight: 700;
  color: var(--primary);
}

.admin-feature-gallery-linkish {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.admin-feature-gallery-linkish.danger {
  color: #f87171;
}

.admin-feature-gallery-linkish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Vollbild-Bildviewer innerhalb der Galerie */
.admin-feature-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
}

.admin-feature-viewer-inner {
  cursor: default;
  max-width: min(960px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.admin-feature-viewer-img {
  max-width: 100%;
  max-height: min(78vh, 860px);
  object-fit: contain;
  border-radius: 10px;
}

.admin-feature-viewer-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.admin-feature-viewer-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2201;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.admin-feature-viewer-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2201;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-feature-viewer-nav.prev {
  left: 0.75rem;
}

.admin-feature-viewer-nav.next {
  right: 0.75rem;
}

.admin-feature-viewer-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.status-dropdown {
  position: relative;
  display: inline-block;
}

.status-dropdown--full {
  display: block;
  width: 100%;
}

.status-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.status-dropdown-trigger:hover:not(:disabled) {
  filter: brightness(1.1);
}

.status-dropdown-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.status-dropdown--full .status-dropdown-trigger {
  width: 100%;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.status-dropdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

.status-dropdown-label {
  flex: 1;
  text-align: left;
}

.status-dropdown-caret {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-left: 2px;
}

.status-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.status-dropdown--pill .status-dropdown-menu {
  min-width: 160px;
}

.status-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text, #fff);
  cursor: pointer;
  text-align: left;
}

.status-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme='light'] .status-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.status-dropdown-item--active {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

[data-theme='light'] .status-dropdown-item--active {
  background: rgba(0, 0, 0, 0.06);
}
/* Office Pool Task Detail Modal */

.optm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: optm-fade 0.15s ease;
}

@keyframes optm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.optm-modal {
  width: 900px;
  max-width: 95vw;
  height: 80vh;
  max-height: 90vh;
  min-height: 0;
  background: var(--bg-dark, #0f172a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: grid;
  grid-template-columns: 65% 35%;
  overflow: hidden;
  color: var(--text, #fff);
  animation: optm-pop 0.2s ease;
}

@keyframes optm-pop {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

[data-theme='light'] .optm-modal {
  background: #fff;
}

.optm-modal--user-submission {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 3px 0 0 0 #8b5cf6;
}

.optm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.optm-submission-select-wrap {
  display: block;
  margin-top: 4px;
}

.optm-submission-select {
  width: 100%;
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

[data-theme='light'] .optm-submission-select {
  background: #f8fafc;
}

.optm-submission-reject {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.optm-submission-reject-text {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  resize: vertical;
  min-height: 52px;
}

.optm-submission-reject-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ─── LEFT pane ─────────────────────────────────────────────────── */

.optm-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-right: 0.5px solid var(--border);
  background: transparent;
}

.optm-left-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.optm-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.optm-title {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  cursor: text;
  word-break: break-word;
  color: var(--text);
  padding: 4px 0;
  border-radius: 4px;
}

.optm-title--readonly {
  cursor: default;
}

.optm-title:hover {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme='light'] .optm-title--readonly:hover {
  background: transparent;
}

.optm-title--readonly:hover {
  background: transparent;
}

[data-theme='light'] .optm-title:hover {
  background: rgba(0, 0, 0, 0.03);
}

.optm-edit-actions-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
}

[data-theme='light'] .optm-edit-actions-block {
  background: rgba(15, 23, 42, 0.03);
}

.optm-edit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.optm-title-input {
  flex: 1;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--accent, #ef4444);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text);
  outline: none;
}

.optm-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.optm-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.optm-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.optm-cat-badge {
  font-size: 0.72rem;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.optm-muted {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.optm-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.optm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.optm-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.optm-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
}

.optm-desc {
  box-sizing: border-box;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: text;
  min-height: 42px;
  border: 1px solid var(--border);
}

.optm-desc:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}

[data-theme='light'] .optm-desc:hover {
  background: rgba(0, 0, 0, 0.03);
}

.optm-desc--empty {
  color: var(--text-muted);
  font-style: italic;
}

.optm-desc-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  resize: vertical;
  min-height: 42px;
  outline: none;
}

.optm-desc-input:focus {
  border-color: var(--accent, #ef4444);
  background: rgba(255, 255, 255, 0.06);
}

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

/* ─── Comments ───────────────────────────────────────────────────── */

.optm-loading,
.optm-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 12px 4px;
  font-style: italic;
}

.optm-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.optm-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.optm-comment-body {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}

[data-theme='light'] .optm-comment-body {
  background: rgba(0, 0, 0, 0.03);
}

.optm-comment-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.optm-comment-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.optm-comment-time {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.optm-comment-edited {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
}

.optm-comment-text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.optm-comment-text--deleted {
  color: var(--text-muted);
  font-style: italic;
}

.optm-comment-like-wrap {
  position: relative;
  margin-top: 8px;
}

.optm-comment-like-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.optm-comment-like-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.optm-comment-like-heart:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--primary, #ef4444);
}

.optm-comment-like-heart--on {
  color: var(--primary, #ef4444);
}

.optm-comment-like-heart:disabled {
  opacity: 0.5;
  cursor: wait;
}

.optm-heart-svg {
  display: block;
  opacity: 0.9;
}

.optm-heart-svg--filled {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary, #ef4444) 45%, transparent));
}

.optm-comment-like-count {
  min-width: 1.5rem;
  padding: 2px 8px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.optm-comment-like-count:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.optm-comment-like-panel {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 20;
  min-width: 180px;
  max-width: min(280px, 85vw);
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px 10px;
  border-radius: 10px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.optm-comment-like-panel-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.optm-comment-like-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text);
}

.optm-comment-like-panel-list li {
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.optm-comment-like-panel-list li:last-child {
  border-bottom: none;
}

.optm-comment-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.optm-comment:hover .optm-comment-actions {
  opacity: 1;
}

.optm-comment-actions button {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.optm-comment-actions button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.optm-comment-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.optm-comment-edit textarea {
  width: 100%;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  resize: vertical;
  outline: none;
}

.optm-comment-edit textarea:focus {
  border-color: var(--accent);
}

.optm-comment-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ─── Composer ───────────────────────────────────────────────────── */

.optm-composer {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: flex-start;
  position: sticky;
  bottom: 0;
  padding: 12px 0 4px;
  background: var(--bg-card, #1e293b);
}

[data-theme='light'] .optm-composer {
  background: #fff;
}

.optm-composer-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

[data-theme='light'] .optm-composer-box {
  background: rgba(0, 0, 0, 0.02);
}

.optm-composer-box:focus-within {
  border-color: var(--accent);
}

.optm-composer-input {
  width: 100%;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--text);
  resize: none;
  outline: none;
  min-height: 48px;
}

.optm-composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-top: 0.5px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
}

[data-theme='light'] .optm-composer-footer {
  background: rgba(0, 0, 0, 0.02);
}

.optm-composer-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ─── Footer (sticky done/archive) ──────────────────────────────── */

.optm-footer {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 14px 28px;
  border-top: 0.5px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

[data-theme='light'] .optm-footer {
  background: rgba(0, 0, 0, 0.02);
}

.optm-btn {
  padding: 8px 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.optm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.optm-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.optm-btn--done {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.optm-btn--done:hover:not(:disabled) {
  background: #15803d;
}

.optm-btn--archive {
  color: var(--text-muted);
}

.optm-btn--archive:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.optm-btn--primary {
  background: var(--accent, #ef4444);
  border-color: var(--accent, #ef4444);
  color: #fff;
}

.optm-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.optm-btn--ghost {
  background: transparent;
}

/* ─── RIGHT pane ─────────────────────────────────────────────────── */

.optm-right {
  min-height: 0;
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(0, 0, 0, 0.15);
}

[data-theme='light'] .optm-right {
  background: rgba(0, 0, 0, 0.02);
}

.optm-meta-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.optm-meta-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}

.optm-meta-value {
  font-size: 0.86rem;
  color: var(--text);
  word-break: break-word;
}

.optm-meta-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.optm-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.optm-meta-stack {
  flex: 1;
  min-width: 0;
}

.optm-meta-clear {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.optm-meta-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.optm-meta-empty-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.optm-audit-block {
  margin-top: 4px;
}

.optm-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.optm-audit-item {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.optm-audit-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent, #ef4444);
  flex-shrink: 0;
}

.optm-audit-content {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
}

[data-theme='light'] .optm-audit-content {
  background: rgba(15, 23, 42, 0.03);
}

.optm-audit-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.optm-audit-title {
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 600;
}

.optm-audit-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.optm-audit-actor {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.optm-audit-detail {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.optm-audit-more {
  margin-top: 4px;
}

.optm-audit-more > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 0.74rem;
  user-select: none;
}

.optm-audit-more[open] > summary {
  margin-bottom: 6px;
}

.optm-audit-toggle {
  margin-top: 4px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  padding: 7px 10px;
  cursor: pointer;
}

.optm-audit-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.optm-btn-self,
.optm-btn-pick {
  font: inherit;
  font-size: 0.76rem;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
}

.optm-btn-self:hover,
.optm-btn-pick:hover {
  background: rgba(255, 255, 255, 0.12);
}

.optm-assign-picker-wrap {
  position: relative;
}

.optm-assign-picker {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme='light'] .optm-assign-picker {
  background: #fff;
}

.optm-assign-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.optm-assign-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.optm-assign-picker-me {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Priorität toggle */

.optm-prio-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.optm-prio-btn {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.optm-prio-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.optm-prio-btn:disabled.optm-prio-btn--active {
  cursor: default;
}

.optm-overdue {
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.optm-overdue-badge {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.5);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.optm-link-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent, #ef4444);
  cursor: pointer;
  text-align: left;
}

.optm-link-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .optm-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 10px)
      env(safe-area-inset-right, 0px)
      calc(env(safe-area-inset-bottom, 0px) + 6px)
      env(safe-area-inset-left, 0px);
  }
  .optm-modal {
    width: 100%;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    max-width: 100vw;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    border-radius: 0;
  }
  .optm-right {
    display: none;
  }
  .optm-modal--mobile-meta .optm-right {
    display: flex;
  }
  .optm-modal--mobile-meta .optm-left {
    display: none;
  }
  .optm-title {
    font-size: 1.2rem;
  }
  .optm-title-row {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-card, #1e293b);
    padding-top: 2px;
  }
  [data-theme='light'] .optm-title-row {
    background: #fff;
  }
  .optm-close {
    width: 44px;
    height: 44px;
    font-size: 2rem;
    line-height: 1;
  }
  .optm-left-scroll {
    padding: 20px 18px 16px;
  }
  .optm-footer {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
.bn-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

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

.bn-h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
}

.bn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bn-btn {
  font-size: 0.82rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

.bn-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bn-btn--danger {
  border-color: rgba(220, 38, 38, 0.35);
  color: #dc2626;
}

.bn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.bn-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.bn-tab.is-active {
  color: var(--text);
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.06));
}

.bn-muted {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.bn-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bn-section__h {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.bn-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.bn-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.bn-card.is-unread {
  border-left: 3px solid #3b82f6;
  padding-left: calc(1rem - 2px);
  background: color-mix(in srgb, var(--surface) 90%, var(--primary) 10%);
}

.bn-card:hover {
  background: color-mix(in srgb, var(--surface) 92%, var(--text) 4%);
}

.bn-card__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--border);
  overflow: hidden;
}

.bn-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bn-card__body {
  flex: 1;
  min-width: 0;
}

.bn-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.bn-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.bn-card__time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.bn-card__desc {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.bn-card__link {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--primary);
}

.bn-more {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.nav-notif-portal-root {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}

.nav-notif-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(8, 12, 20, 0.56);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: default;
  pointer-events: auto;
}

.nav-notif-panel {
  pointer-events: auto;
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  right: 0;
  width: 360px;
  max-width: 100vw;
  max-height: calc(100vh - 60px - env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 0.5px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.nav-notif-panel__head {
  flex-shrink: 0;
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 0.5px solid var(--border);
}

.nav-notif-panel__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-notif-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.nav-notif-panel__head-badge {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-notif-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.nav-notif-panel__btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 0.5px solid var(--border);
  background: var(--surface-elevated, var(--surface));
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

.nav-notif-panel__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nav-notif-panel__btn--ghost:hover:not(:disabled) {
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.05));
}

.nav-notif-panel__btn--danger {
  border-color: rgba(220, 38, 38, 0.35);
  color: #dc2626;
}

.nav-notif-panel__tabs {
  display: flex;
  flex-shrink: 0;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto;
}

.nav-notif-panel__tab {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

.nav-notif-panel__tab.is-active {
  color: var(--text);
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.06));
}

.nav-notif-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.65rem 0.75rem;
  min-height: 120px;
}

.nav-notif-panel__muted {
  margin: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.nav-notif-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.9rem;
}

.nav-notif-panel__empty-icon {
  opacity: 0.35;
}

.nav-notif-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-notif-panel__li {
  margin-bottom: 0.5rem;
}

.nav-notif-panel__li.is-stacked .nav-notif-card {
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.06),
    8px 8px 0 rgba(0, 0, 0, 0.04);
}

.nav-notif-card {
  position: relative;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.65rem 2rem 0.65rem 0.65rem;
  border-radius: 8px;
  background: var(--surface-elevated, var(--surface));
  border: 0.5px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.nav-notif-card.is-unread {
  background: color-mix(in srgb, var(--surface) 88%, var(--primary) 12%);
  border-left: 3px solid #3b82f6;
  padding-left: calc(0.65rem - 2px);
}

.nav-notif-card:hover {
  background: color-mix(in srgb, var(--surface) 92%, var(--text) 4%);
}

.nav-notif-card__del {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.65rem;
  height: 1.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-notif-card:hover .nav-notif-card__del {
  opacity: 1;
}

.nav-notif-card__del:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.nav-notif-card__avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-notif-card__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-notif-card__avatar-fallback {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.nav-notif-card__avatar-fallback--under {
  position: relative;
  z-index: 0;
}

.nav-notif-card__main {
  flex: 1;
  min-width: 0;
}

.nav-notif-card__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.15rem;
}

.nav-notif-card__time {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.nav-notif-card__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-notif-card__desc {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-notif-card__actor {
  margin-top: 0.25rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.nav-notif-panel__foot {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  border-top: 0.5px solid var(--border);
}

.nav-notif-panel__all-link {
  font-size: 0.82rem;
  color: var(--primary);
  text-decoration: none;
}

.nav-notif-panel__all-link:hover {
  text-decoration: underline;
}
/* ══════════════════════════════════════════════════════
   NAV BASE
   ══════════════════════════════════════════════════════ */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--nav-bg, rgba(15, 23, 42, 0.9));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* No border-bottom — seamless transition into page */
  overflow: visible;
}

.nav-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}

/* ── Logo ─────────────────────────────────────────── */
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo-img {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}


.nav-dropdown-item-badge {
  margin-left: auto;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-dropdown-item-badge--drawer {
  margin-left: 0.35rem;
}


/* ── Icon buttons ─────────────────────────────────── */
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}

.nav-icon-btn:hover,
.nav-icon-btn.active {
  color: var(--text);
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.05));
}

/* ── Theme toggle (View Transition + radial clip vom Button) ───────── */
.nav-icon-btn.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.2s,
    color 0.2s,
    background 0.2s;
}

.nav-icon-btn.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  transform: scale(1.05);
  color: var(--text);
  background: var(--bg-card);
}

.nav-icon-btn.theme-toggle:active {
  transform: scale(0.95);
}

.nav-icon-btn.theme-toggle .toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s;
}

.nav-icon-btn.theme-toggle:active .toggle-icon {
  transform: rotate(-14deg) scale(0.92);
}

.nav-icon-btn.theme-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  transform: scale(0);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.nav-icon-btn.theme-toggle:active::after {
  transform: scale(1);
}

/* Drawer: volle Zeile, runder Icon-Cluster links */
.drawer-link.theme-toggle--drawer {
  position: relative;
  overflow: hidden;
}

.drawer-link.theme-toggle--drawer::after {
  display: none;
}

.theme-toggle-drawer-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}

.drawer-link.theme-toggle--drawer:active .theme-toggle-drawer-icon {
  transform: scale(0.95);
}

.theme-toggle-drawer-icon .toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drawer-link.theme-toggle--drawer:active .theme-toggle-drawer-icon .toggle-icon {
  transform: rotate(-14deg) scale(0.92);
}

.theme-toggle-drawer-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  transform: scale(0);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.drawer-link.theme-toggle--drawer:active .theme-toggle-drawer-icon::after {
  transform: scale(1);
}

/* ── Badge ────────────────────────────────────────── */
.nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--primary);
  color: #fff;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  box-sizing: border-box;
}

.main-nav--compact .nav-badge {
  top: -2px;
}

/* ── Notification dropdown ────────────────────────── */
.nav-notif-wrap {
  position: relative;
  flex-shrink: 0;
}

.nav-notif-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  max-height: 400px;
  background: var(--nav-bg, rgba(15, 23, 42, 0.98));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 1002;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nav-notif-header {
  padding: 0.65rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.nav-notif-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  flex: 1;
}

.nav-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.nav-notif-item--btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  border-radius: 0;
}

.nav-notif-item--btn:hover {
  color: var(--text);
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.05));
}

.nav-notif-icon {
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.nav-notif-empty {
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

.nav-notif-footer {
  display: block;
  width: 100%;
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}

.nav-notif-footer:hover {
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.05));
}

/* ── Mobile quick icons ───────────────────────────── */
.nav-mobile-quick {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

/* ── Hamburger ────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  gap: 5px;
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--text);
  transition: background 0.2s;
}

.nav-hamburger:hover {
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.05));
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ══════════════════════════════════════════════════════
   DRAWER  (mobile only)
   ══════════════════════════════════════════════════════ */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  z-index: 1002;
  background: var(--nav-bg, rgba(15, 23, 42, 0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nav-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
  position: relative;
  flex-shrink: 0;
}

.drawer-close:hover {
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.05));
  color: var(--text);
}

.drawer-close span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: absolute;
}

.drawer-close span:nth-child(1) { transform: rotate(45deg); }
.drawer-close span:nth-child(2) { transform: rotate(-45deg); }

.drawer-nav {
  flex: 1;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
}

.drawer-footer {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  height: 52px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  flex-shrink: 0;
}

.drawer-link:hover {
  color: var(--text);
  background: var(--nav-link-hover, rgba(255, 255, 255, 0.05));
}

.drawer-link.active {
  color: var(--text);
  background: var(--nav-link-active, rgba(220, 38, 38, 0.12));
  border-left: 3px solid var(--primary);
  padding-left: calc(1.25rem - 3px);
}

/* Abschnitts-Label im Drawer (nicht klickbar). */
.drawer-caption {
  padding: 0.85rem 1.25rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.drawer-logout {
  color: #ff6b6b;
}

.drawer-logout:hover {
  color: #ff5252;
  background: rgba(255, 107, 107, 0.08);
}

/* ── Drawer overlay ───────────────────────────────── */
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}

.nav-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════
   UNTER DESKTOP  ≤1024px → obere Leiste = nur Logo + Glocke + Burger
   (alles Weitere über das Burgermenü; keine horizontalen Icons)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav-container {
    padding: 0 1rem;
    gap: 0.25rem;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* Obere Leiste = nur Logo + Glocke + Burger */
  .nav-mobile-quick { display: flex; }
  .nav-hamburger { display: flex; }

  /* Logo max-width so hamburger never overflows */
  .nav-logo-img {
    max-width: 222px;
  }

  /* Notification dropdown: fixed below nav bar */
  .nav-mobile-quick .nav-notif-dropdown {
    position: fixed;
    top: var(--nav-h, 56px);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 0.75rem;
  }

  .nav-logo-img {
    max-width: 180px;
  }
}

@media (max-width: 360px) {
  .nav-container {
    padding: 0 0.5rem;
    gap: 0.15rem;
  }

  .nav-icon-btn {
    width: 36px;
    height: 36px;
  }

  .nav-hamburger {
    width: 36px;
    height: 36px;
    padding: 7px;
  }

  .nav-logo-img {
    max-width: 155px;
  }
}

/* ════════════════════════════════════════════════════════════════
   Desktop-Sidebar (≥1025px) – ersetzt die obere Menüleiste.
   Schmal (Icon-only), klappt beim Hovern / per Pin auf.
   ════════════════════════════════════════════════════════════════ */
.app-sidebar {
  display: none;
}

@media (min-width: 1025px) {
  .main-nav {
    display: none;
  }

  .app-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--app-sidebar-width);
    z-index: 50;
    padding: 0.6rem 0.55rem;
    background: color-mix(in srgb, var(--bg-dark) 95%, #ffffff);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s;
  }

  .app-sidebar--expanded {
    width: 248px;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.22);
  }

  .sb-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 0.4rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
  }

  .sb-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  /* Wortmarken-Logo: im Rail breitenbegrenzt, aufgeklappt bis 40px hoch. */
  .sb-logo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
  }

  /* Pin/Aufklapp-Toggle unten – ersetzt den Pfeil oben, bleibt für Touch erreichbar. */
  .sb-pin {
    margin-top: 0.15rem;
    opacity: 0.75;
  }

  .sb-pin:hover {
    opacity: 1;
  }

  .sb-pin.active {
    color: var(--primary);
    opacity: 1;
  }

  .sb-pin-icon {
    transition: transform 0.22s;
  }

  .app-sidebar--expanded .sb-pin-icon {
    transform: rotate(180deg);
  }

  .sb-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  .sb-nav::-webkit-scrollbar {
    width: 4px;
  }

  .sb-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 0.5rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--border);
  }

  .sb-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    height: 44px;
    padding: 0 0.65rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
  }

  .sb-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }

  .sb-link.active {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
  }

  .sb-ic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
  }

  .sb-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.18s;
  }

  .app-sidebar--expanded .sb-label {
    opacity: 1;
  }

  .sb-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  .sb-sep {
    height: 1px;
    margin: 0.5rem 0.65rem;
    background: var(--border);
  }

  /* Abschnitts-Label – nur im aufgeklappten Zustand sichtbar (im Rail genügt der Trenner). */
  .sb-caption {
    display: none;
  }

  .app-sidebar--expanded .sb-caption {
    display: block;
    padding: 0.1rem 0.7rem 0.15rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .sb-notif-wrap {
    position: relative;
  }

  .sb-logout {
    color: #ef4444;
  }

  .sb-logout:hover {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    color: #ef4444;
  }
}

.push-permission-banner {
  /* Unter der fixierten Navigation (.main-nav z-index 1000), sonst nicht klickbar */
  margin-top: calc(88px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
  /* --bg existiert nicht global; --bg-dark ist hell im Light- und dunkel im Dark-Theme */
  background: color-mix(in srgb, var(--accent, #dc2626) 14%, var(--bg-dark, #0f172a));
  border-bottom: 1px solid color-mix(in srgb, var(--border, #334155) 80%, transparent);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text);
}

.push-permission-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.push-permission-banner-text {
  line-height: 1.4;
}

.push-permission-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.push-permission-banner-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border, #475569);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.8125rem;
}

.push-permission-banner-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.push-permission-banner-btn-primary {
  background: var(--accent, #dc2626);
  border-color: var(--accent, #dc2626);
  color: #fff;
}

.push-permission-banner-error {
  max-width: 1200px;
  margin: 0.35rem auto 0;
  color: #f87171;
  font-size: 0.8125rem;
}
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Push-Banner räumt die fixe Nav frei; Role-Banner braucht dann keinen zweiten 88px-Abstand */
.push-permission-banner + .role-simulation-banner {
  margin-top: 0;
}

/* Einheitliche Menüleiste: eine Komponente, gleiche Darstellung auf allen Seiten */
.layout-menüleiste {
  width: 100%;
}

.role-simulation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  margin-top: calc(88px + env(safe-area-inset-top, 0px));
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--text);
  font-size: 0.9rem;
}

.role-simulation-banner strong {
  color: var(--primary);
}

.role-simulation-reset {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.role-simulation-reset:hover {
  color: var(--text);
  border-color: var(--primary);
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: calc(88px + env(safe-area-inset-top, 0px) + 2rem);
  /* hidden + visible-y würde y zu auto machen; clip vermeidet den Extra-Scroll-Container */
  overflow-x: clip;
  overflow-y: visible;
  box-sizing: border-box;
  min-width: 0;
}

/* Kanban / full-width pages break out of the 1280px constraint */
.main-content:has(.auftraege-container.kanban-mode) {
  max-width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (max-width: 1024px) {
  .role-simulation-banner {
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 0;
    padding-top: calc(88px + env(safe-area-inset-top, 0px) + 1rem);
  }
}

/* Desktop (≥1025px): Inhalt sitzt rechts neben der fixen Sidebar (72px), kein oberer Nav-Abstand. */
@media (min-width: 1025px) {
  .layout {
    padding-left: var(--app-sidebar-width);
  }

  /* Nur EIN schlanker Rand über .main-content – die Seiten-Container selbst
     ohne eigenes (doppeltes) Padding, damit der Platz besser genutzt wird. */
  .main-content {
    padding: 1.25rem 1.5rem;
  }

  .main-content > .kalender-page,
  .main-content > .auftraege-container,
  .main-content > .dashboard-container,
  .main-content > .kunden-container,
  .main-content > .kolonnen-container,
  .main-content > .geraete-container,
  .main-content > .todos-page,
  .main-content > .stempeluhr-page,
  .main-content > .geraete-detail-container,
  .main-content > .kolonne-detail-container,
  .main-content > .order-detail-container {
    padding-left: 0;
    padding-right: 0;
  }

  .role-simulation-banner {
    margin-top: 0;
  }

  /* Kanban braucht die volle Viewport-Höhe ohne Seiten-Scroll (nur die Spalten
     scrollen). .main-content bekäme sonst durch sein eigenes Padding zusätzliche
     Höhe on top von .auftraege-container.kanban-mode's 100% dazu – das würde die
     ganze Seite scrollbar machen. */
  .layout:has(.auftraege-container.kanban-mode) {
    height: 100dvh;
    overflow: hidden;
  }

  .main-content:has(.auftraege-container.kanban-mode) {
    min-height: 0;
    overflow: hidden;
  }

  /* Teamkalender: gleiche Höhenkette wie das Kanban – ohne sie scrollen Seite UND
     Zeitleiste gleichzeitig, und der Kopf frisst die Hälfte des Bildschirms. */
  .layout:has(.kalender-page--fill) {
    height: 100dvh;
    overflow: hidden;
  }

  .main-content:has(.kalender-page--fill) {
    min-height: 0;
    overflow: hidden;
  }
}
/* ── Custom overlay scrollbar ──────────────────────────────────────────────── */

.cscroll-track {
  position: fixed;
  right: 0;
  top: 0;
  width: 14px;
  height: 100vh;
  z-index: 10000;
  cursor: pointer;
  pointer-events: none;
}

/* Touch-Geräte: native Scroll, kein unsichtbares Overlay über Buttons am rechten Rand */
@media (pointer: coarse) {
  .cscroll-track {
    display: none;
  }
}

/* ── Thumb ──────────────────────────────────────────────────────────────────── */
.cscroll-thumb {
  position: absolute;
  right: 4px;
  width: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    width       0.18s cubic-bezier(0.4, 0, 0.2, 1),
    right       0.18s cubic-bezier(0.4, 0, 0.2, 1),
    background  0.18s ease,
    box-shadow  0.18s ease;
  cursor: grab;
  pointer-events: auto;
}

.cscroll-thumb--active {
  width: 6px;
  right: 3px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 14px rgba(255, 255, 255, 0.08),
    0 2px 12px rgba(0, 0, 0, 0.35);
  cursor: grabbing;
}

/* Light theme */
:root[data-theme='light'] .cscroll-thumb {
  background: rgba(0, 0, 0, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

:root[data-theme='light'] .cscroll-thumb--active {
  background: rgba(0, 0, 0, 0.36);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 2px 12px rgba(0, 0, 0, 0.12);
}
/*
 * Theme-Switch View Transitions (data-theme steht nach dem Callback = Ziel-Theme).
 * Dark → Light: helle „new“-Ebene oben, Welle expandiert (innen → außen) auf ::view-transition-new.
 * Light → Dark: alte helle „old“-Ebene oben, Welle zieht sich zusammen (außen → innen) auf ::view-transition-old.
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html[data-theme='light']::view-transition-new(root) {
  z-index: 9999;
}

html[data-theme='light']::view-transition-old(root) {
  z-index: 1;
}

html[data-theme='dark']::view-transition-old(root) {
  z-index: 9999;
}

html[data-theme='dark']::view-transition-new(root) {
  z-index: 1;
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

#root {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* iOS Safari zoomt beim Fokussieren eines Inputs automatisch hinein, wenn dessen
   Schriftgröße < 16px ist – und zoomt danach nicht mehr zuverlässig zurück.
   Erzwingt auf Mobile überall mindestens 16px auf Formularfeldern, unabhängig von
   (oft kleineren) komponentenspezifischen font-size-Regeln. Bewusst großzügig
   dimensionierte Felder (z.B. KennzeichenInput) haben ihr eigenes !important. */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Wie Office-Pool: gestaffeltes Einblenden (opacity + leichter translateY) */
@keyframes kn-op-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kn-enter-stagger {
  animation: kn-op-enter 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  animation-delay: calc(var(--kn-enter-i, 0) * 40ms);
}