/* =========================================
  1. VARIABLEN & GRUNDLAGEN
========================================= */
:root {
 --bg-body: #f0f6fc;
 --card-bg: #ffffff;
 --ink: #2b2b2b;      
 --muted: #6f6f6f;    
 --line: #dde6ee;     
 --accent: #2f3e8b;   
 --link: #2f3e8b;      /* Neue Variable für Links im hellen Modus */
 --input-bg: #ffffff; 
 --input-border: #cbd5e1;
 --header-bg: #2f3e8b;
 --pill-bg: #f1f5f9;
 --shadow-header: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-3d: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --modal-bg: #ffffff;
}


[data-theme="dark"] {
 --bg-body: #1e293b;        /* Original PM Hintergrund */
 --card-bg: #334155;        /* Original PM Tabellen & Kacheln */
 --ink: #f8fafc;
 --muted: #cbd5e1;    
 --line: #475569;           /* Original PM Ränder */
 --accent: #60a5fa;   
 --link: #93c5fd;           /* Eisblau für lesbare Links! */
 --input-bg: #475569;       /* Original PM Eingabefelder */
 --input-border: #64748b;
 --header-bg: #2f3e8b;      /* Kopfzeile bleibt blau! */
 --pill-bg: rgba(255,255,255,0.15);
 --shadow-3d: 0 10px 20px rgba(0, 0, 0, 0.3);
 --modal-bg: #334155;
}


* { box-sizing: border-box; }


body {
 margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 color: var(--ink); background: var(--bg-body);
 height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}


/* =============================
  2. HEADER & LOGO (Nach Codebasis)
  ============================= */
.header {
 display: flex; align-items: center; justify-content: flex-start;
 padding: 16px 20px; margin: 12px 24px; min-height: 72px; border-radius: 12px;
 background: var(--header-bg); border: 1px solid var(--header-bg); color: #fff; gap: 20px;
 box-shadow: var(--shadow-header); flex-shrink: 0; z-index: 20;
}
.title { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.title img { height: 34px; width: auto; object-fit: contain; display: block; }


.controls { margin-left: auto; display: flex; align-items: center; gap: 16px; }


/* Einheitlicher Button-Style (Transparent mit Glass-Hover-Effekt) */
.icon-btn {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 border: none;
 background: transparent;
 color: #ffffff;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.3s ease;
 padding: 0;
 text-decoration: none;
}


.icon-btn:hover {
 background-color: rgba(255, 255, 255, 0.15);
 box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 transform: scale(1.05);
}


.icon-btn svg {
 stroke-width: 2;
 width: 22px;
 height: 22px;
}


/* Spezieller Rotations-Effekt nur für den Refresh-Button */
.refresh-icon:hover svg {
 transform: rotate(15deg);
}


.spinning svg {
 animation: spin 1s linear infinite;
 pointer-events: none;
 opacity: 0.8;
}


@keyframes spin {
 100% { transform: rotate(360deg); }
}


/* =============================
  Apple Glass Theme Slider
============================= */
.theme-switch { position: relative; width: 60px; height: 32px; display: inline-block; margin-left: 10px; }
.theme-switch input { display: none; }

.slider-btn { 
    position: absolute; inset: 0; 
    background: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 32px; cursor: pointer; transition: .4s; 
    backdrop-filter: blur(5px); 
}

input:checked + .slider-btn { 
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.knob { 
    position: absolute; height: 24px; width: 24px; left: 3px; bottom: 3px; 
    background: white; border-radius: 50%; transition: .4s; 
    display: flex; align-items: center; justify-content: center; 
    color: #f59e0b; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.knob svg { width: 14px; height: 14px; } 

input:checked + .slider-btn .knob { 
    transform: translateX(28px); 
    background: #334155; 
    color: #a78bfa; 
}

/* =================
   3. FILTER BAR
================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Reduziert von 16px */
  padding: 14px; /* Reduziert von 24px für ein schlankeres Profil */
  margin: 0 24px 20px 24px; /* UNVERÄNDERT: Behält die parallele Ausrichtung zur Kopfzeile */
  align-items: end;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  justify-content: flex-start;
}

/* DIESER BLOCK HAT BEI DIR GEFEHLT! */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.filter-group.small  { width: 100px; }
.filter-group.medium { width: 160px; }
.filter-group.large  { width: 250px; }
.filter-group:not(.small):not(.medium):not(.large) { width: 150px; }

.filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.filter-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--ink);
  height: 36px; /* Reduziert von 46px */
  padding: 0 12px; /* Minimal engeres Padding */
  font-size: 12px; /* Angepasst von 15px für die geringere Höhe */
  border-radius: 8px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
  transition: border-color 0.2s;
}
.filter-input:focus { border-color: var(--accent); }

/* --- NEU: Custom Multi-Select Dropdown (Behebt Text-Überlappung) --- */
.custom-multi-select {
  position: relative;
  width: 100%;
}

.select-trigger {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--ink);
  height: 38px; /* Synchron zu .filter-input (vorher 46px) */
  padding: 0 32px 0 12px; /* 32px rechts für den Pfeil reserviert */
  font-size: 14px; /* Synchron zu .filter-input */
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s;
}

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

/* Das aufklappende Menü mit den Checkboxen */
.dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%; /* NEU: Mindestens so breit wie das Eingabefeld */
  width: max-content; /* NEU: Das Dropdown wächst automatisch mit dem längsten Text mit */
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  z-index: 100;
  display: none; 
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.dropdown-list.show { display: flex; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 6px;
  transition: background 0.2s;
  white-space: nowrap; /* NEU: Zwingt Name und Anzahl immer auf eine einzige Zeile */
}

.checkbox-label:hover { background: var(--pill-bg); }
[data-theme="dark"] .checkbox-label:hover { background: rgba(255,255,255,0.05); }

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

[data-theme="dark"] .filter-input::placeholder,
[data-theme="dark"] .sperr-input-modern::placeholder { 
  color: #cbd5e1; 
  opacity: 1; 
}
/* ===================
  4. BOARD (KANBAN)
=================== */
.board-container { flex: 1; overflow-x: auto; padding: 0 24px 24px 24px; display: flex; gap: 16px; align-items: stretch; -webkit-overflow-scrolling: touch; }
.col { flex: 1; min-width: 280px; display: flex; flex-direction: column; background-color: var(--card-bg); background-image: linear-gradient(to bottom, rgba(var(--col-rgb), 0.1) 0%, var(--card-bg) 300px); border: 1px solid var(--line); border-top: 4px solid rgb(var(--col-rgb)); border-radius: 12px; padding: 0; overflow: hidden; box-shadow: var(--shadow-3d); transition: all 0.3s ease; }
.col-header { background: transparent; border-bottom: 1px solid var(--line); width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 4px; min-height: 72px; }
.col-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.col-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.col-count { font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 10px; color: var(--ink); border: 1px solid var(--line); }
.col-sum { font-size: 13px; font-weight: 600; color: var(--muted); }
.col-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.col.drag-over { box-shadow: 0 0 0 4px rgba(var(--col-rgb), 0.3) !important; border-color: rgb(var(--col-rgb)) !important; }
.col.invalid-drop { opacity: 0.35; filter: grayscale(100%); pointer-events: none; transition: all 0.3s ease; }


/* Kachel Design */
.card { 
  background: linear-gradient(145deg, #ffffff, #f8fafc); 
  border: 1px solid var(--input-border); 
  border-bottom: 3px solid #cbd5e1; 
  border-radius: 10px; 
  padding: 16px; 
  margin-bottom: 16px; 
  cursor: grab; 
  touch-action: pan-y;
  
  /* NEU: Verhindert, dass das Tablet beim Gedrückthalten Text markiert */
  -webkit-user-select: none; 
  user-select: none; 

  box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); 
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .card {
 background: var(--card-bg);
 border: 1px solid var(--input-border); /* NEU: Hellerer Rand wie bei den Filtern! */
 border-bottom: 3px solid var(--input-border); /* NEU: Einheitlicher, sauberer Abschluss unten */
 box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
.card-header { display: flex; justify-content: flex-start; }
.card-badge { background: var(--pill-bg); color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
/* Styling für die klickbaren Nummern im Header (optisch wie der Dashboard Button) */
.link-badge {
  text-decoration: none !important;
  background: #e0f2fe !important;
  color: #637680 !important;
  border: 1px solid #bae6fd !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.2s ease;
  cursor: pointer;
  
  /* --- NEU: Verhindert das Ausbrechen --- */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}


.link-badge:hover {
 background: #bae6fd !important;
 color: #0369a1 !important;
 border-color: #7dd3fc !important;
 transform: translateY(-1px);
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


/* Anpassung für den Dark Mode */
[data-theme="dark"] .link-badge {
 background: rgba(56, 189, 248, 0.15) !important;
 color: #38bdf8 !important;
 border-color: rgba(56, 189, 248, 0.3) !important;
}


[data-theme="dark"] .link-badge:hover {
 background: rgba(56, 189, 248, 0.25) !important;
 color: #7dd3fc !important;
}
.card-body-content { display: flex; flex-direction: column; gap: 6px; }
.card-title { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.card-footer-info { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.price { font-weight: 800; color: var(--ink); font-size: 16px; }
.resp-name { font-size: 13px; color: var(--muted); font-weight: 500; }
.act-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none; background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; transition: 0.2s; cursor: pointer; text-align: center; }
.act-btn:hover { background: #bae6fd; color: #0369a1; border-color: #7dd3fc; }
[data-theme="dark"] .act-btn { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border-color: rgba(56, 189, 248, 0.3); }
.sperr-info { margin-top: 8px; padding: 6px 8px; background-color: rgba(255, 59, 48, 0.1); border-left: 3px solid #ff3b30; border-radius: 4px; font-size: 12px; color: #d32f2f; line-height: 1.4; }
[data-theme="dark"] .sperr-info { background-color: rgba(255, 59, 48, 0.2); color: #ff8a80; }
.ghost-card { background: rgba(226, 232, 240, 0.2); border: 2px dashed var(--muted); border-radius: 10px; margin-bottom: 16px; height: 120px; pointer-events: none; transition: all 0.2s ease; }
.card.dragging { 
  opacity: 0.4; 
  transform: scale(0.95); 
  box-shadow: none; 
}


/* =========================================
     5. LISTENANSICHT (TABLE) - MODERN
     ========================================= */
  .list-container { flex: 1; overflow-y: auto; padding: 0 24px 24px 24px; display: none; }


  /* Der Container wird zur weißen Karte */
  .table-scroll-container {
     background: var(--card-bg); 
     border: 1px solid var(--line); 
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0,0,0,0.05);
     overflow-x: auto; /* NEU: Erlaubt horizontales Wischen auf Handys */
     -webkit-overflow-scrolling: touch; /* Sanftes Scrollen für iPhones/iPads */
  }


  .data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
 
  /* Header exakt wie im Picktourmanager */
  .data-table thead th {
 position: sticky;
 top: 0;
 background: var(--bg-body);
 z-index: 10;
 color: var(--ink);
 padding: 12px 16px;
 text-align: left;
 font-size: 11px;
 text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 0.5px;
 border-bottom: 2px solid var(--line);
 white-space: nowrap;
}
 
  .data-table tbody tr { background: var(--card-bg); transition: 0.2s; }
  .data-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; color: var(--ink); }
 
  /* Hover-Effekt (Grau) wie im Picktourmanager */
  .data-table tbody tr:hover td {
    background-color: var(--line);
    color: var(--ink);
  }


  .status-select-modern {
 appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; min-width: 160px; padding: 8px 32px 8px 12px;
 border: 1px solid var(--input-border);background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; }
  .status-select-modern:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(47, 62, 139, 0.1); }
  .sperr-input-modern {
 width: 100%; min-width: 200px; padding: 8px 12px;
 border: 1px solid var(--input-border); /* NEU */
 border-radius: 6px;
 background: var(--input-bg); /* NEU */
 color: var(--ink);
 font-size: 13px;
 outline: none;
 transition: 0.2s; }
  .sperr-input-modern:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 62, 139, 0.1); }
  .status-select-modern:disabled, .sperr-input-modern:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--pill-bg); }
  .status-select-modern option:disabled { color: #94a3b8; font-style: italic; }


/* Status Action Buttons (Listenansicht) */
  .status-action-container {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
 
  .status-btn {
    background-color: rgba(var(--btn-color), 0.15); /* Heller Hintergrund in Spaltenfarbe */
    border: 1px solid rgb(var(--btn-color));        /* Rahmen in echter Spaltenfarbe */
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
 
  .status-btn:hover {
    background-color: rgb(var(--btn-color));
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
 
  [data-theme="dark"] .status-btn { color: #f8fafc; }


  .status-badge-current {
 background-color: rgba(var(--badge-rgb), 0.15);
 border: 1px solid rgb(var(--badge-rgb));
 color: var(--ink);
 font-size: 11px;
 font-weight: 800;
 padding: 6px 10px;
 border-radius: 6px;
 white-space: nowrap;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
/* =========================================
  6. MODAL & LOADER
========================================= */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(4px); }
.modal { background: var(--modal-bg); border: 1px solid var(--line); border-radius: 12px; width: 400px; max-width: 95vw; box-shadow: 0 25px 50px rgba(0,0,0,0.5); overflow: hidden; display: flex; flex-direction: column; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; background: var(--pill-bg); }
.modal-title { font-weight: 700; font-size: 16px; color: var(--ink); }
.close-icon { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.modal-body { padding: 20px; color: var(--ink); }
.edit-area { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--bg-body); color: var(--ink); font-family: inherit; resize: vertical; min-height: 80px; outline: none; }
.edit-area:focus { border-color: var(--accent); }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-body); }
.btn-save { background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; }
.btn-cancel { background: transparent; border: 1px solid #94a3b8; padding: 8px 16px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; transition: all 0.2s ease; }
.btn-cancel:hover { border-color: var(--ink); color: var(--ink); background: var(--pill-bg); }
[data-theme="dark"] .btn-cancel { border: 1px solid #64748b; }

/*-------------------------------------Hauptseite Logo-----------------------------------------------------*/

#loader-overlay { 
  position: fixed; inset: 0; background: var(--bg-body); display: flex; flex-direction: column; 
  justify-content: center; align-items: center; z-index: 9999;
  transition: opacity 0.6s ease; pointer-events: none; 
}

/* Der neue Lade-Text (immer scharf, mit Licht-Reflexion) */
.loader-text { 
  font-weight: 600; 
  letter-spacing: 1px; 
  font-size: 14px;
  margin-top: 30px; 
  
  /* Der Shimmer-Effekt (Licht wandert von links nach rechts) */
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--accent) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 2.5s infinite linear;
}

/* =========================================
   EPIC MAIN PAGE LOADER
========================================= */
.main-loader-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Die gigantische Energie-Aura im Hintergrund */
.main-glow-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--accent);
  filter: blur(60px); /* Erzeugt das softe, volumetrische Leuchten */
  border-radius: 50%;
  opacity: 0.15;
  animation: epicPulse 2.5s ease-in-out infinite alternate;
  z-index: 0;
}

[data-theme="dark"] .main-glow-ring {
  opacity: 0.25;
}

.main-logo-container {
  position: relative;
  width: 220px; /* Logo etwas präsenter als im Modal */
  z-index: 1;
}

.main-logo-active {
  width: 100%;
  height: auto;
  /* TEKA Dunkelblau */
  filter: brightness(0) saturate(100%) invert(18%) sepia(45%) saturate(2971%) hue-rotate(218deg) brightness(96%) contrast(93%);
  clip-path: inset(0 0 100% 0);
  animation: formFromTopMain 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

[data-theme="dark"] .main-logo-active {
  /* Leuchtendes Eisblau für den Dark Mode */
  filter: brightness(0) saturate(100%) invert(75%) sepia(21%) saturate(1478%) hue-rotate(185deg) brightness(101%) contrast(102%);
}

/* Der Laser (jetzt mathematisch 100% zentriert) */
.main-scanner-line {
  position: absolute;
  top: 0;
  
  /* --- HIER SIND DIE ÄNDERUNGEN FÜR DIE ZENTRIERUNG --- */
  left: 50%;
  transform: translateX(-50%);
  width: 120%; /* Exakt so breit wie das Logo (Du kannst auch 105% testen) */
  /* ---------------------------------------------------- */
  
  height: 1px; 
  background: #ffffff; 
  box-shadow: 0 0 6px 2px var(--accent), 0 0 12px 4px var(--accent); 
  border-radius: 50%;
  z-index: 2;
  animation: scanMoveMain 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* --- ANIMATIONEN --- */
@keyframes epicPulse {
  0% { transform: scale(0.7); opacity: 0.05; }
  100% { transform: scale(1.6); opacity: 0.25; }
}

@keyframes formFromTopMain {
  0%   { clip-path: inset(0 0 100% 0); opacity: 1; }
  65%  { clip-path: inset(0 0 0 0); opacity: 1; } /* Das Bild ist bei 65% komplett sichtbar */
  90%  { clip-path: inset(0 0 0 0); opacity: 1; } /* Angenehme Pause, damit man den Text lesen kann */
  100% { clip-path: inset(0 0 0 0); opacity: 0; } /* Weiches Ausblenden für den Neustart */
}

@keyframes scanMoveMain {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 1; }
  65%  { top: 102%; opacity: 1; } /* Fährt exakt bis zum unteren Bildrand (synchron zum Bildaufbau) */
  70%  { top: 102%; opacity: 0; } /* Erlischt sanft am unteren Rand */
  100% { top: 102%; opacity: 0; } /* Bleibt unsichtbar während der Lesepause */
}

/* Die Bewegung für den Lichtstrahl */
@keyframes shimmerText {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/*-------------------------------------Hauptseite Logo-----------------------------------------------------*/


/* Sortier-Funktion für die Listenansicht */
  th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
  }
  th.sortable:hover {
    background-color: var(--line);
    color: var(--accent);
  }
/* Graue Markierung für aktive Sperrvermerke in der Liste */
  .sperr-input-modern.has-sperr {
    background-color: #f1f5f9; /* Sehr helles, dezentes Grau */
    border-color: #cbd5e1;     /* Etwas dunklerer Rand für den Kontrast */
    color: var(--ink);         /* Normale Schriftfarbe */
    font-weight: 600;          /* Leicht fett, damit man es gut lesen kann */
  }
 
  [data-theme="dark"] .sperr-input-modern.has-sperr {
    background-color: rgba(255, 255, 255, 0.08); /* Transparentes Grau im Dark Mode */
    border-color: #64748b;
    color: #f8fafc;
  }


/* =========================================
   7. HILFEMENÜ (ANGEPASSTE FARBEN & POSITION)
========================================= */
/* WICHTIG: Dieser Wrapper hält das Menü genau unter dem Button! */
.help-menu-wrapper {
  position: relative;
  display: inline-block;
}

.help-glass-overlay {
  position: absolute;
  top: 55px; /* Etwas tiefer, damit es nicht am Button klebt */
  right: 0;  /* Bündig mit der rechten Kante des Buttons */
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  
  /* Hintergrundfarbe genau wie der Light-Mode Schalter */
  background: #ebeef5;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  
  /* 3D Animations-Setup */
  opacity: 0;
  visibility: hidden;
  transform-origin: top right;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1000;
}

.help-glass-overlay.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hintergrundfarbe genau wie der Dark-Mode Schalter */
[data-theme="dark"] .help-glass-overlay {
  background: #334155; 
  border: 1px solid #475569;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.help-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
}

.help-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent);
  transition: all 0.2s ease;
}

[data-theme="dark"] .help-icon-box {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Hover Effekte */
.help-item:hover {
  background: #ffffff; /* Strahlend weißer Hover auf dem graublauen Grund */
  transform: translateX(4px); 
}

.help-item:hover .help-icon-box {
  background: var(--accent);
  color: #fff;
  transform: scale(1.1);
}

[data-theme="dark"] .help-item:hover {
  background: #1e293b; /* Passender dunkler Hover im Dark Mode */
}
/* Fixt das Problem auf Tablets, dass die neue Spalte beim Ziehen nicht erkannt wird */
.dnd-poly-drag-image {
    pointer-events: none !important;
}

/* =========================================
   8. MOBILE VIEW (HANDY ANSICHT & ZOOM)
========================================= */
.mobile-container {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
   display: none; 
   
   /* HIER IST DIE MAGIE: Flexibles Raster anstatt starre Spalte! */
   grid-template-columns: repeat(auto-fill, minmax(calc(320px * var(--m-scale)), 1fr));
   align-items: start;
   align-content: start;
   gap: calc(16px * var(--m-scale));
   
   -webkit-overflow-scrolling: touch;
   background: var(--bg-body);
   --m-scale: 1; 
}

.mobile-card {
   width: 100%;
   background: var(--mc-bg, var(--card-bg));
   border: 1px solid var(--input-border);
   border-radius: calc(12px * var(--m-scale));
   padding: calc(16px * var(--m-scale));
   display: flex;
   flex-direction: column;
   gap: calc(10px * var(--m-scale));
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
   transition: background 0.3s, transform 0.1s;
   font-size: calc(14px * var(--m-scale));
}
/* Farb-Logik für die 4 Status (Hell & Dunkelmodus) */
.mc-open { --mc-bg: rgba(88, 166, 255, 0.08); border-left: calc(6px * var(--m-scale)) solid rgb(88, 166, 255); }
.mc-prog { --mc-bg: rgba(255, 215, 0, 0.12); border-left: calc(6px * var(--m-scale)) solid rgb(255, 215, 0); }
.mc-lock { --mc-bg: rgba(210, 168, 255, 0.12); border-left: calc(6px * var(--m-scale)) solid rgb(210, 168, 255); }
.mc-done { --mc-bg: rgba(52, 199, 89, 0.12); border-left: calc(6px * var(--m-scale)) solid rgb(52, 199, 89); }

[data-theme="dark"] .mc-open { --mc-bg: rgba(88, 166, 255, 0.15); }
[data-theme="dark"] .mc-prog { --mc-bg: rgba(255, 215, 0, 0.2); }
[data-theme="dark"] .mc-lock { --mc-bg: rgba(210, 168, 255, 0.25); }
[data-theme="dark"] .mc-done { --mc-bg: rgba(52, 199, 89, 0.2); }

.mobile-card-header { display: flex; justify-content: space-between; align-items: center; gap: calc(6px * var(--m-scale)); }
.mobile-card-title { font-weight: 800; color: var(--ink); font-size: calc(15px * var(--m-scale)); line-height: 1.3; }

/* Status Dropdown Design in der Kachel (Repariert die Text-Überlappung!) */
.mobile-status-select {
   appearance: none; 
   -webkit-appearance: none; 
   -moz-appearance: none;
   width: 100%;
   /* WICHTIG: Rechts 32px Platz für den Pfeil erzwingen, damit der Text stoppt! */
   padding: calc(10px * var(--m-scale)) calc(32px * var(--m-scale)) calc(10px * var(--m-scale)) calc(10px * var(--m-scale));
   font-size: calc(14px * var(--m-scale));
   border-radius: calc(8px * var(--m-scale));
   border: 1px solid var(--input-border);
   background-color: var(--card-bg);
   
   /* Eigener eleganter Pfeil */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right calc(10px * var(--m-scale)) center;
   background-size: calc(16px * var(--m-scale)); /* Pfeil wächst beim Zoomen mit */
   
   color: var(--ink);
   font-weight: 700;
   outline: none;
   text-overflow: ellipsis; /* Bricht zu langen Text mit "..." sauber ab */
}
.mobile-status-select:disabled { opacity: 0.7; }

/* --- ZOOM-OVERRIDES: Zwingt die starren Desktop-Elemente, auf dem Handy mitzuwachsen! --- */
.mobile-card .link-badge {
   font-size: calc(11.5px * var(--m-scale)) !important;
   padding: calc(4px * var(--m-scale)) calc(10px * var(--m-scale));
   border-radius: calc(20px * var(--m-scale));
}

.mobile-card .sperr-info {
   font-size: calc(12px * var(--m-scale));
   padding: calc(6px * var(--m-scale)) calc(8px * var(--m-scale));
   border-left-width: calc(3px * var(--m-scale));
   border-radius: calc(4px * var(--m-scale));
   margin-top: calc(8px * var(--m-scale));
}

.mobile-card .m-act-btn {
   font-size: calc(12px * var(--m-scale));
   padding: calc(6px * var(--m-scale)) calc(14px * var(--m-scale));
   border-radius: calc(6px * var(--m-scale));
}

/* OPTIMIERUNG FÜR KLEINE HANDY-BILDSCHIRME (Filter anpassen) */
@media (max-width: 768px) {
   .filter-bar {
      flex-direction: column;
      align-items: stretch;
      padding: 12px;
      margin: 0 12px 12px 12px;
   }
   .filter-group { width: 100% !important; }
   .header { margin: 12px; padding: 10px; height: auto; flex-wrap: wrap; }
   .title { font-size: 15px; width: 100%; justify-content: center; margin-bottom: 8px;}
   .controls { width: 100%; justify-content: space-around; margin: 0; }
}

/* =========================================
   9. ABC-KLASSIFIZIERUNG (BADGES)
========================================= */
.abc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px;
  font-size: 11px; font-weight: 800; margin-right: 8px;
  vertical-align: middle;
}

/* Mobile-Zoom-Variante */
.m-abc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(22px * var(--m-scale)); height: calc(22px * var(--m-scale)); border-radius: calc(4px * var(--m-scale));
  font-size: calc(11px * var(--m-scale)); font-weight: 800; margin-right: calc(8px * var(--m-scale));
  vertical-align: middle;
}

/* Dezente Farben für Hell- und Dunkelmodus */
.abc-A { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.abc-B { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.abc-C { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

[data-theme="dark"] .abc-A { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
[data-theme="dark"] .abc-B { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); }
[data-theme="dark"] .abc-C { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.4); }



/* =========================================================
   DASHBOARD DETAILANSICHT (MODAL) STYLES
   Diese Klassen beeinflussen das Kanban-Board nicht!
========================================================= */
.dash-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-cols-2 { grid-template-columns: 1fr 1fr; }

.dash-card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,.03);
}
.dash-card-head h4 { margin: 0; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dash-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }

/* Formulare im Modal */
.form { display: grid; gap: 8px; }
/* HIER ANGEPASST: Nur .frow.single braucht 130px. Normale .frow auf 90px/80px reduziert für mehr Platz in den Feldern! */
.frow { display: grid; grid-template-columns: 90px minmax(0,1fr) 80px minmax(0,1fr); gap: 8px; align-items: center; }
.frow.single { grid-template-columns: 130px minmax(0,1fr); }
.md-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 16px; }

/* HIER ANGEPASST: Einheitliche Labels (für normale Formulare UND Accordions) */
.lbl, .acc-lbl { 
  font-size: 11px; /* Schrift etwas kleiner für mehr Platz */
  color: var(--muted); 
  font-weight: 600; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Zeigt "..." an, falls ein Wort doch zu lang sein sollte */
}

/* HIER ANGEPASST: Einheitliche Felder (Standard Feld & Accordion Feld) */
.field, .acc-val { 
  background: #f8fbff; border: 1px solid var(--line); border-radius: 6px; 
  padding: 5px 8px; font-size: 12px; min-height: 26px; color: var(--ink); /* Schrift auf 12px gesetzt */
  display: flex; align-items: center; word-break: break-word;
}
[data-theme="dark"] .field, [data-theme="dark"] .acc-val { background: #1e293b; }

/* ===== FARBIGE BOXEN (TRI-LINES) EXAKT WIE IM ORIGINAL ===== */
.field.tri-lines {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: transparent; border: none; padding: 0; min-height: auto;
}
.field.tri-lines .tline {
  display: inline-block; padding: 3px 10px; border-radius: 8px; 
  line-height: 1.35; max-width: 100%; min-width: 10ch; 
  text-align: center; box-sizing: border-box; font-size: 11px; font-weight: 600;
}
.field.tri-lines .t-green { color: #1f7a4a; background: rgba(178, 235, 204, .9); cursor: help; }
.field.tri-lines .t-orange { color: #8a5200; background: rgba(255, 220, 170, .9); }
.field.tri-lines .t-red { color: #8f2a2a; background: rgba(255, 190, 190, .9); }

/* Stift (Edit) im Modal */
.frow.has-pen { position: relative; }
/* HIER ANGEPASST: Stift-Position passend zur neuen 130px Spaltenbreite verschoben */
.frow.has-pen .row-pen { 
  position: absolute; left: 110px; top: 50%; transform: translateY(-50%); 
  font-size: 14px; color: var(--accent); cursor: pointer; padding: 2px 6px; 
}
.frow.has-pen .row-pen:hover { background: rgba(0,0,0,.08); border-radius: 4px; }

/* Tooltips für die farbigen Felder */
.corr-tooltip-wrap { position: relative; display: block; }
.corr-tooltip {
  position: absolute; left: 0; top: calc(100% + 6px); background: #222; color: #fff;
  font-size: 12px; padding: 6px 10px; border-radius: 6px; max-width: 350px;
  white-space: normal; opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease; z-index: 10000;
}
.corr-tooltip.is-visible { opacity: 1; transform: translateY(0); }

/* Accordions im Modal */
.subacc { margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.02); }
.subacc__summary { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; cursor: pointer; display: flex; justify-content: space-between; }
.subacc__body { padding: 10px; border-top: 1px solid var(--line); }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* HIER ANGEPASST: Auch die Accordion-Reihen erhalten 130px Platz für das Label */
.acc-row { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 6px; align-items: center; } 

/* Tabellen im Modal */
.table-wrap { overflow-x: auto; max-height: 250px; border-radius: 6px; border: 1px solid var(--line); }
.dash-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.dash-table th, .dash-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dash-table th { background: var(--bg-body); position: sticky; top: 0; color: var(--muted); font-weight: 700; }

/* Edit Overlay Modal-in-Modal */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; justify-content: center; align-items: center; }
.overlay-content { background: var(--card-bg); padding: 24px; border-radius: 12px; width: 360px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.overlay-content input { width: 100%; padding: 10px; margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-body); color: var(--ink); }
.overlay-buttons { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; }

/* ===== ICONS OBEN RECHTS (Pfeile & Stifte) ===== */
.dash-edit-link {
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.dash-edit-link:hover {
  transform: scale(1.2); /* Ein schöner, flüssiger Zoom-Effekt beim Darüberfahren */
}
.dash-edit-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor; /* Das SVG übernimmt so automatisch die blaue Accent-Farbe */
}

@media (max-width: 1100px) {
  .dash-cols-2 { grid-template-columns: 1fr; }
  .md-grid { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: 1fr; }
}

/* =========================================
   NEUER 3D-SCANNER LOGO-LOADER (ZENTRIERT IM MODAL)
========================================= */
/* 1. Wrapper hält alles brav innerhalb des Modals */
.modal-loader-wrapper-centered {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Garantiert, dass genug Platz zum Zentrieren da ist */
    justify-content: center;
    align-items: center;
}

/* 2. Container für das Logo */
.logo-3d-build-container {
    position: relative;
    width: 180px; 
    display: flex;
    justify-content: center;
}

/* 3. Das aktive Logo, das von oben "gedruckt" wird (Kein Ghost-Bild mehr!) */
.modal-loader-logo-active {
    width: 100%;
    height: auto;
    /* Das satte TEKA Dunkelblau */
    filter: brightness(0) saturate(100%) invert(18%) sepia(45%) saturate(2971%) hue-rotate(218deg) brightness(96%) contrast(93%);
    /* Startet oben sichtbar, unten komplett abgeschnitten */
    clip-path: inset(0 0 100% 0);
    animation: formFromTop 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 4. Der moderne 3D-Laser-Scanner (Glühende Linie) */
.scanner-line {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 15px 3px var(--accent), 0 0 4px 1px #ffffff;
    border-radius: 50%;
    z-index: 2;
    animation: scanMove 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Die Animationen für Logo und Laser-Linie (Perfekt synchronisiert) */
@keyframes formFromTop {
    0% { clip-path: inset(0 0 100% 0); opacity: 1; }
    90% { clip-path: inset(0 0 0 0); opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 0; } /* Kurzes Ausblenden für weichen Neustart */
}

@keyframes scanMove {
    0% { top: 0%; opacity: 0; }
    5% { opacity: 1; }
    90% { top: 100%; opacity: 1; }
    95% { top: 100%; opacity: 0; }
    100% { top: 100%; opacity: 0; }
}

/* =========================================
   POWER-USER: ABGESCHLOSSENE KARTEN GRAU FÄRBEN
========================================= */

/* 1. Desktop Kanban Board */
#col_4 .card {
    opacity: 0.6;
    filter: grayscale(100%);
    background: #f1f5f9;
}
#col_4 .card:hover {
    opacity: 0.9;
    filter: grayscale(30%);
}

/* 2. Listen Ansicht */
tr.row-done td {
    opacity: 0.6;
    filter: grayscale(100%);
    background-color: #f8fafc;
}

/* 3. Mobile Ansicht (hatte schon die Klasse mc-done) */
.mobile-card.mc-done {
    opacity: 0.6;
    filter: grayscale(100%);
}

/* =========================================
   HIGHLIGHT-ANIMATION FÜR GEÄNDERTE DATEN
========================================= */
@keyframes highlightFade {
  0%   { background-color: #fef08a; color: #854d0e; box-shadow: 0 0 0 4px #fef08a; }
  15%  { background-color: #fef08a; color: #854d0e; box-shadow: 0 0 0 4px #fef08a; }
  100% { background-color: transparent; color: var(--ink); box-shadow: 0 0 0 0 transparent; }
}

[data-theme="dark"] @keyframes highlightFade {
  0%   { background-color: rgba(234, 179, 8, 0.3); color: #fde047; box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.3); }
  15%  { background-color: rgba(234, 179, 8, 0.3); color: #fde047; box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.3); }
  100% { background-color: transparent; color: var(--ink); box-shadow: 0 0 0 0 transparent; }
}

.flash-highlight {
  animation: highlightFade 2.5s ease-out !important;
  border-radius: 4px;
  display: inline-block;
}

/* =========================================
   DEAKTIVIERTE BUTTONS (OFFEN-STATUS)
========================================= */
.link-badge:disabled, .act-btn:disabled {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

[data-theme="dark"] .link-badge:disabled, [data-theme="dark"] .act-btn:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #64748b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* =========================================
   DUNKELMODUS (DARK MODE) - HELLER & WEICHER
========================================= */

/* 1. Gesamter Hintergrund (Jetzt DEUTLICH heller und weicher!) */
[data-theme="dark"] body {
  background: #243141 !important; /* Ein weiches, ruhiges Blaugrau (Soft-Dark) */
}

/* 2. Die Spalten (Wirken jetzt wie leicht vertiefte Glaskästen) */
[data-theme="dark"] .col {
  /* Der Verlauf endet in einem minimal dunkleren Ton als der Hintergrund - das erzeugt perfekte räumliche Tiefe! */
  background: linear-gradient(180deg, rgba(var(--col-rgb), 0.22) 0%, rgba(var(--col-rgb), 0.05) 50%, #1a2432 90%, #1a2432 100%) !important; 
  
  border: 1px solid rgba(var(--col-rgb), 0.4) !important;
  box-shadow: inset 0 0 25px rgba(0,0,0,0.25) !important; 
}

/* 3. Spalten-Kopfzeile */
[data-theme="dark"] .col-header {
  background: rgba(var(--col-rgb), 0.15) !important; 
  border-bottom: 2px solid rgba(var(--col-rgb), 0.8) !important; 
}

/* 4. Die Kacheln (Desktop) */
[data-theme="dark"] .card {
  background: #2e3c4f !important; 
  border: 1px solid #43546b !important;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25), 
              0 0 6px rgba(var(--col-rgb), 0.3) !important;
  transform: translateY(-1px); 
  transition: all 0.2s ease; 
}
[data-theme="dark"] .card:hover {
  background: #36475c !important; 
  box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4), 
              0 0 12px rgba(var(--col-rgb), 0.6) !important;
  transform: translateY(-3px); 
}

/* 5. Mobile Kacheln (Holen die Status-Farbe als linken Rand zurück!) */
[data-theme="dark"] .mobile-card {
  background: #2e3c4f !important; 
  border: 1px solid #43546b !important;
  /* HIER IST DIE MAGIE: Der linke Rand bekommt zwingend die Status-Farbe */
  border-left: 5px solid rgb(var(--col-rgb)) !important; 
  
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25), 
              0 0 6px rgba(var(--col-rgb), 0.3) !important;
}